Skip to content

Commit cfa941d

Browse files
committed
feat(core angular react): support negative y-values
affects: @peretz/charts support negative y-values
1 parent 5064f63 commit cfa941d

File tree

5 files changed

+156
-47
lines changed

5 files changed

+156
-47
lines changed

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

Lines changed: 61 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export const groupedBarData = {
88
backgroundColors: [colors[0]],
99
data: [
1010
65000,
11-
29123,
12-
35213,
11+
-29123,
12+
-35213,
1313
51213,
1414
16932
1515
]
@@ -19,28 +19,28 @@ export const groupedBarData = {
1919
backgroundColors: [colors[1]],
2020
data: [
2121
32432,
22-
21312,
23-
56456,
24-
21312,
22+
-21312,
23+
-56456,
24+
-21312,
2525
34234
2626
]
2727
},
2828
{
2929
label: "Dataset 3",
3030
backgroundColors: [colors[2]],
3131
data: [
32-
12312,
32+
-12312,
3333
23232,
3434
34232,
35-
12312,
36-
34234
35+
-12312,
36+
-34234
3737
]
3838
},
3939
{
4040
label: "Dataset 4",
4141
backgroundColors: [colors[3]],
4242
data: [
43-
32423,
43+
-32423,
4444
21313,
4545
64353,
4646
24134,
@@ -51,7 +51,6 @@ export const groupedBarData = {
5151
};
5252

5353
export const groupedBarOptions = {
54-
accessibility: true,
5554
scales: {
5655
x: {
5756
title: "2018 Annual Sales Figures",
@@ -64,8 +63,8 @@ export const groupedBarOptions = {
6463
},
6564
y2: {
6665
ticks: {
67-
max: 1,
68-
min: 0
66+
max: 70,
67+
min: -60
6968
}
7069
}
7170
},
@@ -109,6 +108,56 @@ export const simpleBarOptions = {
109108
containerResizable: true,
110109
};
111110

111+
export const stackedBarData = {
112+
labels: ["Qty", "More", "Sold", "Restocking", "Misc"],
113+
datasets: [
114+
{
115+
label: "Dataset 1",
116+
backgroundColors: [colors[0]],
117+
data: [
118+
65000,
119+
29123,
120+
35213,
121+
51213,
122+
16932
123+
]
124+
},
125+
{
126+
label: "Dataset 2",
127+
backgroundColors: [colors[1]],
128+
data: [
129+
32432,
130+
21312,
131+
56456,
132+
21312,
133+
34234
134+
]
135+
},
136+
{
137+
label: "Dataset 3",
138+
backgroundColors: [colors[2]],
139+
data: [
140+
12312,
141+
23232,
142+
34232,
143+
12312,
144+
34234
145+
]
146+
},
147+
{
148+
label: "Dataset 4",
149+
backgroundColors: [colors[3]],
150+
data: [
151+
32423,
152+
21313,
153+
64353,
154+
24134,
155+
32423
156+
]
157+
}
158+
]
159+
};
160+
112161
// Stacked bar
113162
export const stackedBarOptions = {
114163
accessibility: false,

packages/core/demo/index.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,16 @@ <h2>Basic chart types: Demo</h2>
7676
</div>
7777
</div>
7878

79-
<div class="chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
80-
<div class="chart-demo-actions" id="actions-simple-bar">
79+
<div class="chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
80+
<div class="chart-demo-actions" id="actions-simple-bar-accessible">
8181
<div class="btn-group--lg" role="group" aria-label="Options for changing data">
82-
<button id="change-data-simple-bar" class="btn--primary" type="button">Change Data</button>
82+
<button id="change-data-simple-bar-accessible" class="btn--primary" type="button">Change Data</button>
8383

8484
<button class="btn--primary-addon" id="largeExpMenuBtn2" type="button" aria-controls="largeBtn2ExpMenu" aria-expanded="true" aria-haspopup="true">
8585
<peretz-icon set="arrows_chevrons" icon="chevron_up" size="sm" class="icon--white-sm"></peretz-icon>
8686
</button>
8787

88-
<ul class="btn_menu" role="menu" aria-labelledby="simpleBarActions">
88+
<ul class="btn_menu" role="menu" aria-labelledby="simpleBarAccessibleActions">
8989
<li role="menuitem" tabindex="0" class="change-data-promise" data-promise-delay="2000">Using Promises (2s)</li>
9090
<li role="menuitem" tabindex="1" class="change-data-promise" data-promise-delay="5000">Using Promises (5s)</li>
9191
<li role="menuitem" tabindex="2" class="change-data-promise" data-promise-delay="10000">Using Promises (10s)</li>
@@ -110,16 +110,16 @@ <h2>Basic chart types: Demo</h2>
110110
</div>
111111
</div>
112112

113-
<div class="chart-holder has-actions" id="classy-simple-bar-accessible-chart-holder"></div>
114-
<div class="chart-demo-actions" id="actions-simple-bar-accessible">
113+
<div class="chart-holder has-actions" id="classy-simple-bar-chart-holder"></div>
114+
<div class="chart-demo-actions" id="actions-simple-bar">
115115
<div class="btn-group--lg" role="group" aria-label="Options for changing data">
116-
<button id="change-data-simple-bar-accessible" class="btn--primary" type="button">Change Data</button>
116+
<button id="change-data-simple-bar" class="btn--primary" type="button">Change Data</button>
117117

118118
<button class="btn--primary-addon" id="largeExpMenuBtn2" type="button" aria-controls="largeBtn2ExpMenu" aria-expanded="true" aria-haspopup="true">
119119
<peretz-icon set="arrows_chevrons" icon="chevron_up" size="sm" class="icon--white-sm"></peretz-icon>
120120
</button>
121121

122-
<ul class="btn_menu" role="menu" aria-labelledby="simpleBarAccessibleActions">
122+
<ul class="btn_menu" role="menu" aria-labelledby="simpleBarActions">
123123
<li role="menuitem" tabindex="0" class="change-data-promise" data-promise-delay="2000">Using Promises (2s)</li>
124124
<li role="menuitem" tabindex="1" class="change-data-promise" data-promise-delay="5000">Using Promises (5s)</li>
125125
<li role="menuitem" tabindex="2" class="change-data-promise" data-promise-delay="10000">Using Promises (10s)</li>

packages/core/demo/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
groupedBarData,
1919
simpleBarOptions,
2020
simpleBarData,
21+
stackedBarData,
2122
stackedBarOptions,
2223
// Pie & donut
2324
pieOptions,
@@ -47,7 +48,7 @@ const chartTypes = [
4748
id: "stacked-bar",
4849
name: "Bar",
4950
options: stackedBarOptions,
50-
data: groupedBarData
51+
data: stackedBarData
5152
},
5253
{
5354
id: "simple-bar-accessible",
@@ -59,7 +60,7 @@ const chartTypes = [
5960
id: "stacked-bar-accessible",
6061
name: "Bar",
6162
options: Object.assign({}, stackedBarOptions, {accessibility: true}),
62-
data: groupedBarData
63+
data: stackedBarData
6364
},
6465
{
6566
id: "curved-line",

packages/core/src/bar-chart.ts

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@ import { BaseAxisChart } from "./base-axis-chart";
44
import { StackedBarChart } from "./stacked-bar-chart";
55
import { Configuration } from "./configuration";
66

7+
const getYMin = configs => {
8+
const { datasets } = configs.data;
9+
const { scales } = configs.options;
10+
let yMin;
11+
12+
if (datasets.length === 1) {
13+
yMin = d3.min(datasets[0].data);
14+
} else {
15+
yMin = d3.min(datasets, (d: any) => (d3.min(d.data)));
16+
}
17+
18+
if (scales.y.yMinAdjuster) {
19+
yMin = scales.y.yMinAdjuster(yMin);
20+
}
21+
22+
return yMin;
23+
};
24+
725
export class BarChart extends BaseAxisChart {
826
x: any;
927
x1?: any;
@@ -12,7 +30,7 @@ export class BarChart extends BaseAxisChart {
1230

1331
constructor(holder: Element, configs: any) {
1432
// If this is a stacked bar chart, change the object prototype
15-
if (configs.options.scales.y.stacked) {
33+
if (configs.options.scales.y.stacked && getYMin(configs) >= 0 ) {
1634
return new StackedBarChart(holder, configs);
1735
}
1836

@@ -61,9 +79,9 @@ export class BarChart extends BaseAxisChart {
6179
.append("rect")
6280
.classed("bar", true)
6381
.attr("x", d => this.x1(d.datasetLabel))
64-
.attr("y", d => this.y(d.value))
82+
.attr("y", d => this.y(Math.max(0, d.value)))
6583
.attr("width", this.x1.bandwidth())
66-
.attr("height", d => height - this.y(d.value))
84+
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
6785
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
6886
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null)
6987
.attr("stroke-width", Configuration.bars.default.strokeWidth)
@@ -106,9 +124,9 @@ export class BarChart extends BaseAxisChart {
106124
.append("rect")
107125
.attr("class", "bar")
108126
.attr("x", d => this.x1(d.datasetLabel))
109-
.attr("y", d => this.y(d.value))
127+
.attr("y", d => this.y(Math.max(0, d.value)))
110128
.attr("width", this.x1.bandwidth())
111-
.attr("height", d => height - this.y(d.value))
129+
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
112130
.attr("opacity", 0)
113131
.transition(this.getFillTransition())
114132
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
@@ -122,9 +140,9 @@ export class BarChart extends BaseAxisChart {
122140
.append("rect")
123141
.attr("class", "bar")
124142
.attr("x", d => this.x1(d.datasetLabel))
125-
.attr("y", d => this.y(d.value))
143+
.attr("y", d => this.y(Math.max(0, d.value)))
126144
.attr("width", this.x1.bandwidth())
127-
.attr("height", d => height - this.y(d.value))
145+
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
128146
.attr("opacity", 0)
129147
.transition(this.getFillTransition())
130148
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
@@ -175,9 +193,9 @@ export class BarChart extends BaseAxisChart {
175193
// TODO
176194
// .ease(d3.easeCircle)
177195
.attr("x", d => this.x1(d.datasetLabel))
178-
.attr("y", d => this.y(d.value))
196+
.attr("y", d => this.y(Math.max(0, d.value)))
179197
.attr("width", this.x1.bandwidth())
180-
.attr("height", d => height - this.y(d.value))
198+
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
181199
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
182200
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null);
183201
}

0 commit comments

Comments
 (0)