Skip to content

Commit 3866d86

Browse files
cal-smithcal-smith
committed
fix(bar): add maxWidth and other bar fixes
1 parent 214823f commit 3866d86

14 files changed

+130
-22
lines changed

Diff for: ‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [0.9.5](https://github.com/IBM/carbon-charts/compare/v0.9.4...v0.9.5) (2019-02-20)
7+
8+
9+
### Bug Fixes
10+
11+
* **$core:** Fixes opacity transitions not completing when data is updated. Ensures use SVG vs CSS op ([f6b245e](https://github.com/IBM/carbon-charts/commit/f6b245e))
12+
13+
14+
15+
16+
617
## [0.9.4](https://github.com/IBM/carbon-charts/compare/v0.9.3...v0.9.4) (2019-02-16)
718

819

Diff for: ‎lerna.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
]
1717
}
1818
},
19-
"version": "0.9.4"
19+
"version": "0.9.5"
2020
}

Diff for: ‎packages/core/CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [0.9.5](https://github.com/IBM/carbon-charts/compare/v0.9.4...v0.9.5) (2019-02-20)
7+
8+
9+
### Bug Fixes
10+
11+
* **$core:** Fixes opacity transitions not completing when data is updated. Ensures use SVG vs CSS op ([f6b245e](https://github.com/IBM/carbon-charts/commit/f6b245e))
12+
13+
14+
15+
16+
617
## [0.9.4](https://github.com/IBM/carbon-charts/compare/v0.9.3...v0.9.4) (2019-02-16)
718

819

Diff for: ‎packages/core/demo/demo-data/bar.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,10 @@ export const simpleBarOptions = {
107107
}
108108
},
109109
legendClickable: true,
110-
containerResizable: true
110+
containerResizable: true,
111+
bars: {
112+
maxWidth: 50
113+
}
111114
};
112115

113116
// Stacked bar

Diff for: ‎packages/core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@carbon/charts",
3-
"version": "0.9.4",
3+
"version": "0.9.5",
44
"description": "Carbon charting components",
55
"files": [
66
"dist",

Diff for: ‎packages/core/src/bar-chart.ts

+57-12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { BaseAxisChart } from "./base-axis-chart";
77
import { StackedBarChart } from "./stacked-bar-chart";
88
import * as Configuration from "./configuration";
99

10+
import { Tools } from "./tools";
11+
1012
const getYMin = configs => {
1113
const { datasets } = configs.data;
1214
const { scales } = configs.options;
@@ -25,6 +27,31 @@ const getYMin = configs => {
2527
return yMin;
2628
};
2729

30+
// returns the configured max width or the calculated bandwidth
31+
// whichever is lower
32+
// defaults to the calculated bandwidth if no maxWidth is defined
33+
const getMaxBarWidth = (maxWidth, currentBandWidth) => {
34+
if (!maxWidth) {
35+
return currentBandWidth;
36+
}
37+
if (currentBandWidth <= maxWidth) {
38+
return currentBandWidth;
39+
}
40+
return maxWidth;
41+
};
42+
43+
// returns true if the calculated bandwidth is greater than the maxWidth (if deinfed)
44+
// i.e. if we should be constraining ourselves to a specific bar width
45+
const isWidthConstrained = (maxWidth, currentBandWidth) => {
46+
if (!maxWidth) {
47+
return false;
48+
}
49+
if (currentBandWidth <= maxWidth) {
50+
return false;
51+
}
52+
return true;
53+
};
54+
2855
export class BarChart extends BaseAxisChart {
2956
x: any;
3057
x1?: any;
@@ -51,7 +78,8 @@ export class BarChart extends BaseAxisChart {
5178
const width = chartSize.width - margins.left - margins.right;
5279

5380
this.x1 = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.bars);
54-
this.x1.domain(configs.data.datasets.map(dataset => dataset.label)).rangeRound([0, this.x.bandwidth()]);
81+
this.x1.domain(configs.data.datasets.map(dataset => dataset.label))
82+
.rangeRound([0, getMaxBarWidth(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())]);
5583
}
5684

5785
this.options.type = "bar";
@@ -69,8 +97,23 @@ export class BarChart extends BaseAxisChart {
6997
this.x.domain(this.displayData.labels);
7098
}
7199

72-
this.x1 = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.bars);
73-
this.x1.domain(this.displayData.datasets.map(dataset => dataset.label)).rangeRound([0, this.x.bandwidth()]);
100+
// if it's a grouped bar, use additoinal padding so the bars don't group up
101+
if (this.displayData.datasets.length > 1) {
102+
this.x1 = scaleBand().rangeRound([0, width]).padding(Configuration.bars.spacing.bars);
103+
} else {
104+
this.x1 = scaleBand().rangeRound([0, width]);
105+
}
106+
107+
this.x1.domain(this.displayData.datasets.map(dataset => dataset.label))
108+
.rangeRound([0, getMaxBarWidth(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())]);
109+
}
110+
111+
getBarX(d) {
112+
if (!isWidthConstrained(Tools.getProperty(this.options, "bars", "maxWidth"), this.x.bandwidth())) {
113+
return this.x1(d.datasetLabel);
114+
}
115+
116+
return (this.x.bandwidth() / 2) - (Tools.getProperty(this.options, "bars", "maxWidth") / 2);
74117
}
75118

76119
draw() {
@@ -99,7 +142,7 @@ export class BarChart extends BaseAxisChart {
99142
.enter()
100143
.append("rect")
101144
.classed("bar", true)
102-
.attr("x", d => this.x1(d.datasetLabel))
145+
.attr("x", this.getBarX.bind(this))
103146
.attr("y", d => this.y(Math.max(0, d.value)))
104147
.attr("width", this.x1.bandwidth())
105148
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
@@ -144,14 +187,14 @@ export class BarChart extends BaseAxisChart {
144187
.enter()
145188
.append("rect")
146189
.attr("class", "bar")
147-
.attr("x", d => this.x1(d.datasetLabel))
190+
.attr("x", this.getBarX.bind(this))
148191
.attr("y", d => this.y(Math.max(0, d.value)))
149192
.attr("width", this.x1.bandwidth())
150193
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
151-
.attr("opacity", 0)
194+
.style("opacity", 0)
152195
.transition(this.getFillTransition())
153196
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
154-
.attr("opacity", 1)
197+
.style("opacity", 1)
155198
.attr("stroke", (d: any) => this.colorScale[d.datasetLabel](d.label))
156199
.attr("stroke-width", Configuration.bars.default.strokeWidth);
157200

@@ -160,14 +203,14 @@ export class BarChart extends BaseAxisChart {
160203
.enter()
161204
.append("rect")
162205
.attr("class", "bar")
163-
.attr("x", d => this.x1(d.datasetLabel))
206+
.attr("x", this.getBarX.bind(this))
164207
.attr("y", d => this.y(Math.max(0, d.value)))
165208
.attr("width", this.x1.bandwidth())
166209
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
167-
.attr("opacity", 0)
210+
.style("opacity", 0)
168211
.transition(this.getFillTransition())
169212
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
170-
.attr("opacity", 1)
213+
.style("opacity", 1)
171214
.attr("stroke", (d: any) => this.colorScale[d.datasetLabel](d.label))
172215
.attr("stroke-width", Configuration.bars.default.strokeWidth);
173216

@@ -205,15 +248,17 @@ export class BarChart extends BaseAxisChart {
205248

206249
if (g) {
207250
g.transition(animate ? this.getDefaultTransition() : this.getInstantTransition())
208-
.attr("transform", d => `translate(${this.x(d)}, 0)`);
251+
.attr("transform", d => `translate(${this.x(d)}, 0)`)
252+
.style("opacity", 1);
209253
}
210254

211255
// Update existing bars
212256
rect
213257
.transition(animate ? this.getFillTransition() : this.getInstantTransition())
214258
// TODO
215259
// .ease(d3.easeCircle)
216-
.attr("x", d => this.x1(d.datasetLabel))
260+
.style("opacity", 1)
261+
.attr("x", this.getBarX.bind(this))
217262
.attr("y", d => this.y(Math.max(0, d.value)))
218263
.attr("width", this.x1.bandwidth())
219264
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))

Diff for: ‎packages/core/src/base-axis-chart.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -519,9 +519,9 @@ export class BaseAxisChart extends BaseChart {
519519
.attr("width", width)
520520
.attr("height", d => calculateHeight(d))
521521
.attr("fill", d => Configuration.scales.y.thresholds.colors[d.theme])
522-
.attr("opacity", 0)
522+
.style("opacity", 0)
523523
.transition(t)
524-
.attr("opacity", d => calculateOpacity(d));
524+
.style("opacity", d => calculateOpacity(d));
525525

526526
// Update thresholds
527527
thresholdRects
@@ -530,7 +530,7 @@ export class BaseAxisChart extends BaseChart {
530530
.attr("y", d => calculateYPosition(d))
531531
.attr("width", width)
532532
.attr("height", d => calculateHeight(d))
533-
.attr("opacity", d => calculateOpacity(d))
533+
.style("opacity", d => calculateOpacity(d))
534534
.attr("fill", d => Configuration.scales.y.thresholds.colors[d.theme]);
535535

536536
// Applies to thresholds getting removed

Diff for: ‎packages/core/src/configuration.ts

+3
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,9 @@ export const bars = {
166166
spacing: {
167167
bars: 0.2,
168168
datasets: 0.25
169+
},
170+
bars: {
171+
maxWidth: null
169172
}
170173
};
171174

Diff for: ‎packages/core/src/line-chart.ts

+5
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,9 @@ export class LineChart extends BaseAxisChart {
115115
const width = chartSize.width - margins.left - margins.right;
116116
const height = chartSize.height - this.getBBox(".x.axis").height;
117117

118+
this.innerWrap.selectAll(".removed")
119+
.remove();
120+
118121
// Apply new data to the lines
119122
const gLines = this.innerWrap.selectAll("g.lines")
120123
.data(newData.datasets);
@@ -153,6 +156,7 @@ export class LineChart extends BaseAxisChart {
153156

154157
// Remove lines that are no longer needed
155158
gLines.exit()
159+
.classed("removed", true) // mark this element with "removed" class so it isn't reused
156160
.transition(this.getDefaultTransition())
157161
.style("opacity", 0)
158162
.remove();
@@ -186,6 +190,7 @@ export class LineChart extends BaseAxisChart {
186190
return parentDatum.data;
187191
})
188192
.transition(transitionToUse)
193+
.style("opacity", 1)
189194
.attr("stroke", function(d) {
190195
const parentDatum = select(this.parentNode).datum() as any;
191196

Diff for: ‎packages/core/src/pie-chart.ts

+1
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ export class PieChart extends BaseChart {
159159
.attr("stroke-width", Configuration.pie.default.strokeWidth)
160160
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
161161
.transition()
162+
.style("opacity", 1)
162163
.duration(Configuration.transitions.default.duration)
163164
.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
164165
.attrTween("d", function (a) {

Diff for: ‎packages/core/src/stacked-bar-chart.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ export class StackedBarChart extends BaseAxisChart {
6868
return stackDataArray;
6969
}
7070

71+
// currently unused, but required to match the BarChart class
72+
getBarX(d) {}
73+
7174
draw() {
7275
this.innerWrap.style("width", "100%")
7376
.style("height", "100%");
@@ -110,6 +113,9 @@ export class StackedBarChart extends BaseAxisChart {
110113
const stackDataArray = this.getStackData();
111114
const stackKeys = this.displayData.datasets.map(dataset => dataset.label);
112115

116+
this.innerWrap.selectAll(".removed")
117+
.remove();
118+
113119
const g = this.innerWrap.selectAll("g.bars-wrapper")
114120
.selectAll("g")
115121
.data(stack().keys(stackKeys)(stackDataArray));
@@ -128,9 +134,9 @@ export class StackedBarChart extends BaseAxisChart {
128134
.attr("height", d => this.y(d[0]) - this.y(d[1]))
129135
.attr("width", d => this.x.bandwidth())
130136
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
131-
.attr("opacity", 0)
137+
.style("opacity", 0)
132138
.transition(this.getFillTransition())
133-
.attr("opacity", 1)
139+
.style("opacity", 1)
134140
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
135141
.attr("stroke-width", Configuration.bars.default.strokeWidth)
136142
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
@@ -146,11 +152,13 @@ export class StackedBarChart extends BaseAxisChart {
146152
addRect(rect);
147153

148154
g.exit()
155+
.classed("removed", true) // mark this element with "removed" class so it isn't reused
149156
.transition(this.getDefaultTransition())
150157
.style("opacity", 0)
151158
.remove();
152159

153160
rect.exit()
161+
.classed("removed", true) // mark this element with "removed" class so it isn't reused
154162
.transition(this.getDefaultTransition())
155163
.style("opacity", 0)
156164
.remove();
@@ -198,6 +206,7 @@ export class StackedBarChart extends BaseAxisChart {
198206
// Update existing bars
199207
rect
200208
.transition(animate ? this.getFillTransition() : this.getInstantTransition())
209+
.style("opacity", 1)
201210
.attr("x", d => this.x(d.data.label))
202211
.attr("y", d => this.y(d[1]))
203212
.attr("height", d => this.y(d[0]) - this.y(d[1]))

Diff for: ‎packages/core/src/tools.ts

+12
Original file line numberDiff line numberDiff line change
@@ -210,4 +210,16 @@ export namespace Tools {
210210

211211
return transformMatrixArray[4];
212212
}
213+
214+
export const getProperty = (object, ...propPath) => {
215+
let position = object;
216+
for (const prop of propPath) {
217+
if (position[prop]) {
218+
position = position[prop];
219+
} else {
220+
return null;
221+
}
222+
}
223+
return position;
224+
};
213225
}

Diff for: ‎packages/react/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
## [0.9.5](https://github.com/IBM/carbon-charts/compare/v0.9.4...v0.9.5) (2019-02-20)
7+
8+
**Note:** Version bump only for package @carbon/charts-react
9+
10+
11+
12+
13+
614
## [0.9.4](https://github.com/IBM/carbon-charts/compare/v0.9.3...v0.9.4) (2019-02-16)
715

816
**Note:** Version bump only for package @carbon/charts-react

Diff for: ‎packages/react/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@carbon/charts-react",
3-
"version": "0.9.4",
3+
"version": "0.9.5",
44
"description": "Carbon charting components for React",
55
"main": "index.js",
66
"files": [
@@ -27,7 +27,7 @@
2727
},
2828
"homepage": "https://github.com/IBM/carbon-charts#readme",
2929
"dependencies": {
30-
"@carbon/charts": "^0.9.4",
30+
"@carbon/charts": "^0.9.5",
3131
"react": "16.6.3",
3232
"react-dom": "16.6.3"
3333
},

0 commit comments

Comments
 (0)