Skip to content

Commit 6a480f0

Browse files
natashadecostetheiliadcal-smith
committedJan 21, 2020
feat(core): add support for horizontal bar charts (#415)
* feat(core): add support for horizontal bar charts * add stories for horizontal bar * add horizontal discrete bar chart * add vue and angular stories * update zero-line transition * Update packages/core/src/components/graphs/bar-stacked.ts Co-Authored-By: Cal Smith <[email protected]> * enable switching orientations for grouped bar without duplicating draw logic * fix lint errors * draw simple bars in horizontal & vertical orientations * draw stacked bars regardless of 2D orientation * add orientation support for time-series stacked bar charts * use the calculated bar width in all 3 bar types * add requested PR changes * fix lint error * fix lint error * fix tests * fix lint error * fix tests tsconfig issue * add knobs to all stories * add requested PR changes * code style changes * code style fixes Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Cal Smith <[email protected]>
·
v1.23.6v0.28.0
1 parent b4191b3 commit 6a480f0

37 files changed

+976
-439
lines changed
 

‎packages/angular/stories/bar-horizontal.stories.ts

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { storiesOf } from "@storybook/angular";
2+
import { withKnobs, object } from "@storybook/addon-knobs";
3+
4+
import { ChartsModule } from "../src/charts.module";
5+
6+
import {
7+
// Horizontal bar
8+
groupedHorizontalBarOptions,
9+
groupedHorizontalBarData,
10+
simpleHorizontalBarOptions,
11+
simpleHorizontalBarData,
12+
simpleHorizontalBarTimeSeriesOptions,
13+
simpleHorizontalBarTimeSeriesData,
14+
stackedHorizontalBarTimeSeriesOptions,
15+
stackedHorizontalBarTimeSeriesData,
16+
stackedHorizontalBarData,
17+
stackedHorizontalBarOptions,
18+
} from "../../core/demo/demo-data/index";
19+
import { addWidthAndHeight } from "./commons";
20+
21+
const template = barType => `
22+
<ibm-${barType}-bar-chart
23+
class="n-chart"
24+
[data]="data"
25+
[options]="options"
26+
#${barType}BarChart>
27+
</ibm-${barType}-bar-chart>
28+
`;
29+
30+
const stories = storiesOf("Bar (Horizontal)", module).addDecorator(withKnobs);
31+
stories.add(simpleHorizontalBarOptions.title, () => ({
32+
template: template("simple"),
33+
moduleMetadata: {
34+
imports: [ChartsModule]
35+
},
36+
props: {
37+
data: object("Data", simpleHorizontalBarData),
38+
options: object("Options", addWidthAndHeight(simpleHorizontalBarOptions))
39+
}
40+
}));
41+
42+
stories.add(simpleHorizontalBarTimeSeriesOptions.title, () => ({
43+
template: template("simple"),
44+
moduleMetadata: {
45+
imports: [ChartsModule]
46+
},
47+
props: {
48+
data: object("Data", simpleHorizontalBarTimeSeriesData),
49+
options: object("Options", addWidthAndHeight(simpleHorizontalBarTimeSeriesOptions))
50+
}
51+
}));
52+
53+
stories.add(groupedHorizontalBarOptions.title, () => ({
54+
template: template("grouped"),
55+
moduleMetadata: {
56+
imports: [ChartsModule]
57+
},
58+
props: {
59+
data: object("Data", groupedHorizontalBarData),
60+
options: object("Options", addWidthAndHeight(groupedHorizontalBarOptions))
61+
}
62+
}));
63+
64+
stories.add(stackedHorizontalBarOptions.title, () => ({
65+
template: template("stacked"),
66+
moduleMetadata: {
67+
imports: [ChartsModule]
68+
},
69+
props: {
70+
data: object("Data", stackedHorizontalBarData),
71+
options: object("Options", addWidthAndHeight(stackedHorizontalBarOptions))
72+
}
73+
}));
74+
75+
stories.add(stackedHorizontalBarTimeSeriesOptions.title, () => ({
76+
template: template("stacked"),
77+
moduleMetadata: {
78+
imports: [ChartsModule]
79+
},
80+
props: {
81+
data: object("Data", stackedHorizontalBarTimeSeriesData),
82+
options: object("Options", addWidthAndHeight(stackedHorizontalBarTimeSeriesOptions))
83+
}
84+
}));

‎packages/core/demo/chart-types.ts

+44-9
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,24 @@ const {
22
// Bar
33
groupedBarOptions,
44
groupedBarData,
5+
groupedHorizontalBarOptions,
6+
groupedHorizontalBarData,
57
simpleBarOptions,
68
simpleBarData,
9+
simpleHorizontalBarOptions,
10+
simpleHorizontalBarData,
711
simpleBarTimeSeriesOptions,
812
simpleBarTimeSeriesData,
9-
stackedBarData,
13+
simpleHorizontalBarTimeSeriesOptions,
14+
simpleHorizontalBarTimeSeriesData,
1015
stackedBarOptions,
16+
stackedBarData,
17+
stackedHorizontalBarOptions,
18+
stackedHorizontalBarData,
1119
stackedBarTimeSeriesOptions,
1220
stackedBarTimeSeriesData,
21+
stackedHorizontalBarTimeSeriesOptions,
22+
stackedHorizontalBarTimeSeriesData,
1323
// Pie & donut
1424
pieOptions,
1525
pieData,
@@ -33,16 +43,21 @@ const {
3343
} = require("./demo-data/index");
3444

3545
export const chartTypes = [
36-
{
37-
id: "grouped-bar",
38-
options: groupedBarOptions,
39-
data: groupedBarData
40-
},
4146
{
4247
id: "simple-bar",
4348
options: simpleBarOptions,
4449
data: simpleBarData
4550
},
51+
{
52+
id: "simple-horizontal-bar-time-series",
53+
options: simpleHorizontalBarTimeSeriesOptions,
54+
data: simpleHorizontalBarTimeSeriesData
55+
},
56+
{
57+
id: "simple-horizontal-bar",
58+
options: simpleHorizontalBarOptions,
59+
data: simpleHorizontalBarData
60+
},
4661
{
4762
id: "scatter-time-series",
4863
options: scatterTimeSeriesOptions,
@@ -54,20 +69,40 @@ export const chartTypes = [
5469
data: scatterData
5570
},
5671
{
57-
id: "simple-bar-time-series",
58-
options: simpleBarTimeSeriesOptions,
59-
data: simpleBarTimeSeriesData
72+
id: "grouped-bar",
73+
options: groupedBarOptions,
74+
data: groupedBarData
75+
},
76+
{
77+
id: "grouped-horizontal-bar",
78+
options: groupedHorizontalBarOptions,
79+
data: groupedHorizontalBarData
6080
},
6181
{
6282
id: "stacked-bar",
6383
options: stackedBarOptions,
6484
data: stackedBarData
6585
},
86+
{
87+
id: "stacked-horizontal-bar",
88+
options: stackedHorizontalBarOptions,
89+
data: stackedHorizontalBarData
90+
},
91+
{
92+
id: "simple-bar-time-series",
93+
options: simpleBarTimeSeriesOptions,
94+
data: simpleBarTimeSeriesData
95+
},
6696
{
6797
id: "stacked-bar-time-series",
6898
options: stackedBarTimeSeriesOptions,
6999
data: stackedBarTimeSeriesData
70100
},
101+
{
102+
id: "stacked-horizontal-bar-time-series",
103+
options: stackedHorizontalBarTimeSeriesOptions,
104+
data: stackedHorizontalBarTimeSeriesData
105+
},
71106
{
72107
id: "pie",
73108
options: pieOptions,

‎packages/core/demo/demo-data/bar.ts

+83-3
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,23 @@ export const groupedBarOptions = {
5757
},
5858
bottom: {
5959
scaleType: "labels",
60-
secondary: true,
60+
secondary: true
61+
}
62+
}
63+
};
64+
65+
// Horizontal Grouped
66+
export const groupedHorizontalBarData = groupedBarData;
67+
68+
export const groupedHorizontalBarOptions = {
69+
title: "Grouped horizontal bar (discrete)",
70+
axes: {
71+
left: {
72+
scaleType: "labels",
73+
primary: true,
74+
},
75+
bottom: {
76+
secondary: true
6177
}
6278
}
6379
};
@@ -87,11 +103,26 @@ export const simpleBarOptions = {
87103
},
88104
bottom: {
89105
scaleType: "labels",
90-
secondary: true,
106+
secondary: true
91107
}
92108
}
93109
};
94110

111+
// Horizontal Simple
112+
export const simpleHorizontalBarData = simpleBarData;
113+
114+
export const simpleHorizontalBarOptions = {
115+
title: "Simple horizontal bar (discrete)",
116+
axes: {
117+
left: {
118+
primary: true,
119+
scaleType: "labels"
120+
},
121+
bottom: {
122+
secondary: true
123+
}
124+
}
125+
};
95126

96127
export const simpleBarTimeSeriesData = {
97128
labels: ["Qty", "More", "Sold", "Restocking", "Miscellaneous"],
@@ -140,6 +171,22 @@ export const simpleBarTimeSeriesOptions = {
140171
}
141172
};
142173

174+
// Horizontal simple time series
175+
export const simpleHorizontalBarTimeSeriesOptions = {
176+
title: "Simple horizontal bar (time series)",
177+
axes: {
178+
left: {
179+
scaleType: "time",
180+
primary: true
181+
},
182+
bottom: {
183+
secondary: true
184+
}
185+
}
186+
};
187+
188+
export const simpleHorizontalBarTimeSeriesData = simpleBarTimeSeriesData;
189+
143190
// Stacked bar
144191
export const stackedBarData = {
145192
labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
@@ -196,11 +243,27 @@ export const stackedBarOptions = {
196243
},
197244
bottom: {
198245
scaleType: "labels",
199-
secondary: true,
246+
secondary: true
200247
}
201248
}
202249
};
203250

251+
// horizontal stacked bar
252+
export const stackedHorizontalBarData = stackedBarData;
253+
254+
export const stackedHorizontalBarOptions = {
255+
title: "Stacked horizontal bar (discrete)",
256+
axes: {
257+
left: {
258+
scaleType: "labels",
259+
primary: true
260+
},
261+
bottom: {
262+
stacked: true,
263+
secondary: true
264+
}
265+
}
266+
};
204267

205268
export const stackedBarTimeSeriesData = {
206269
labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
@@ -321,3 +384,20 @@ export const stackedBarTimeSeriesOptions = {
321384
}
322385
}
323386
};
387+
388+
// Stacked horizontal bar (time series)
389+
export const stackedHorizontalBarTimeSeriesOptions = {
390+
title: "Stacked horizontal bar (time series)",
391+
axes: {
392+
left: {
393+
primary: true,
394+
scaleType: "time"
395+
},
396+
bottom: {
397+
stacked: true,
398+
secondary: true
399+
}
400+
}
401+
};
402+
403+
export const stackedHorizontalBarTimeSeriesData = stackedBarTimeSeriesData;

‎packages/core/demo/demo-data/colors.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const urlParams = new URLSearchParams(window.location.search);
55
// Grab "theme" param from query string
66
let themeToUse = colorPalettes.DEFAULT;
77
if (urlParams.has("theme") && colorPalettes[urlParams.get("theme")]) {
8-
themeToUse = colorPalettes[urlParams.get("theme")];
8+
themeToUse = colorPalettes[urlParams.get("theme")];
99
}
1010

1111
export const colors = themeToUse;

‎packages/core/demo/demo-options.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { colorPalettes } from "../src/index";
2-
31
export const setOrUpdateParam = (name, value) => {
42
const params = new URLSearchParams(location.search)
53

‎packages/core/demo/index.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ const changeDemoData = (chartType: any, chartObj: any) => {
3030
// Function to be used to randomize a value
3131
const randomizeValue = datum => {
3232
const currentVal = datum.value !== undefined ? datum.value : datum;
33-
const firstTry = Math.max(0.85 * currentVal, currentVal * Math.random() * (Math.random() * 5));
34-
let result = currentVal > 0 ? Math.min(3 * currentVal, firstTry) : Math.max(3 * currentVal, firstTry);
33+
let result = Math.random() > 0.5 ? 0.95 * currentVal : 1.05 * currentVal;
3534

3635
if (Math.random() > 0.5
3736
|| chartType.indexOf("stacked") !== -1
@@ -157,14 +156,19 @@ chartTypes.forEach(type => {
157156
let classToInitialize;
158157
switch (type.id) {
159158
case "simple-bar":
159+
case "simple-horizontal-bar":
160160
case "simple-bar-time-series":
161+
case "simple-horizontal-bar-time-series":
161162
classToInitialize = SimpleBarChart;
162163
break;
163164
case "grouped-bar":
165+
case "grouped-horizontal-bar":
164166
classToInitialize = GroupedBarChart;
165167
break;
166168
case "stacked-bar":
169+
case "stacked-horizontal-bar":
167170
case "stacked-bar-time-series":
171+
case "stacked-horizontal-bar-time-series":
168172
classToInitialize = StackedBarChart;
169173
break;
170174
case "scatter":

‎packages/core/src/axis-chart.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ import {
1717
} from "./components/index";
1818
import { Tools } from "./tools";
1919

20-
import { Axes, Curves } from "./services/index";
20+
import { CartesianScales, Curves } from "./services/index";
2121

2222
export class AxisChart extends Chart {
2323
services: any = Object.assign(this.services, {
24-
axes: Axes,
24+
cartesianScales: CartesianScales,
2525
curves: Curves
2626
});
2727

‎packages/core/src/charts/bar-grouped.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
Grid,
1313
GroupedBar,
1414
TwoDimensionalAxes,
15-
HorizontalZeroLine,
15+
ZeroLine,
1616
TooltipBar,
1717
// the imports below are needed because of typescript bug (error TS4029)
1818
Tooltip,
@@ -43,7 +43,7 @@ export class GroupedBarChart extends AxisChart {
4343
new TwoDimensionalAxes(this.model, this.services),
4444
new Grid(this.model, this.services),
4545
new GroupedBar(this.model, this.services),
46-
new HorizontalZeroLine(this.model, this.services)
46+
new ZeroLine(this.model, this.services)
4747
];
4848

4949
const components: any[] = this.getAxisChartComponents(graphFrameComponents);

0 commit comments

Comments
 (0)