Skip to content

Commit 03d47bf

Browse files
JesperLeklandJesperLekland
authored
Merge pull request #326 from buschco/improvement/props-axis-children
Added more props to axis children
2 parents e125f20 + 4c5a241 commit 03d47bf

File tree

3 files changed

+64
-63
lines changed

3 files changed

+64
-63
lines changed

‎src/stacked-bar-chart/stacked-bar-grouped.js

+62-63
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ class StackedBarGrouped extends PureComponent {
6969
areas = series.map((stack, stackIndex) => {
7070
return stack.map((serie, keyIndex) => {
7171
return serie.map((entry, entryIndex) => {
72-
const leftMargin = series.length > 1 ? innerBarSpace / 2 : 0 ;
72+
const leftMargin = series.length > 1 ? innerBarSpace / 2 : 0
7373
const path = shape
7474
.area()
7575
.x0(d => x(d[0]))
@@ -93,30 +93,29 @@ class StackedBarGrouped extends PureComponent {
9393
areas = series.map((stack, stackIndex) => {
9494
return stack.map((serie, keyIndex) => {
9595
return serie.map((entry, entryIndex) => {
96-
const leftMargin = series.length > 1 ? innerBarSpace / 2 : 0;
97-
const x0 = x(entryIndex) + barWidth * stackIndex + leftMargin;
98-
const x1 = x(entryIndex) + barWidth + barWidth * stackIndex - leftMargin;
99-
const y0 = y(entry[1]);
100-
const y1 = y(entry[0]);
101-
const barHeight = y1 - y0;
102-
const borderRadius = initialBorderRadius * 2 > barHeight ? barHeight / 2 : initialBorderRadius;
103-
const showTopBorder = keyIndex === stack.length - 1;
104-
const showBottomBorder = keyIndex === 0;
96+
const leftMargin = series.length > 1 ? innerBarSpace / 2 : 0
97+
const x0 = x(entryIndex) + barWidth * stackIndex + leftMargin
98+
const x1 = x(entryIndex) + barWidth + barWidth * stackIndex - leftMargin
99+
const y0 = y(entry[1])
100+
const y1 = y(entry[0])
101+
const barHeight = y1 - y0
102+
const borderRadius = initialBorderRadius * 2 > barHeight ? barHeight / 2 : initialBorderRadius
103+
const showTopBorder = keyIndex === stack.length - 1
104+
const showBottomBorder = keyIndex === 0
105105
const commands = this.coordinatesToPathCommands(
106-
x0,
107-
y0,
108-
x1,
109-
y1,
110-
borderRadius,
111-
showTopBorder,
112-
showBottomBorder,
113-
);
114-
106+
x0,
107+
y0,
108+
x1,
109+
y1,
110+
borderRadius,
111+
showTopBorder,
112+
showBottomBorder,
113+
)
115114
return {
116-
path: this.commandsToSvgPath(commands),
117-
color: colors[stackIndex][keyIndex],
118-
key: keys[stackIndex][keyIndex],
119-
};
115+
path: this.commandsToSvgPath(commands),
116+
color: colors[stackIndex][keyIndex],
117+
key: keys[stackIndex][keyIndex],
118+
}
120119
})
121120
})
122121
})
@@ -133,68 +132,68 @@ class StackedBarGrouped extends PureComponent {
133132
borderRadius,
134133
showTopBorder,
135134
showBottomBorder,
136-
) => {
137-
const commands = [];
138-
commands.push({ marker: 'M', values: [x0, y0] });
135+
) => {
136+
const commands = []
137+
commands.push({ marker: 'M', values: [ x0, y0 ] })
139138

140139
if (showTopBorder) {
141-
const topLeft1 = [x0 + borderRadius, y0];
142-
const topLeft2 = [x0, y0 + borderRadius];
143-
commands.push({ marker: 'L', values: topLeft1 });
140+
const topLeft1 = [ x0 + borderRadius, y0 ]
141+
const topLeft2 = [ x0, y0 + borderRadius ]
142+
commands.push({ marker: 'L', values: topLeft1 })
144143
commands.push({
145-
marker: 'C',
146-
values: [...topLeft1, x0, y0, ...topLeft2],
147-
});
148-
commands.push({ marker: 'L', values: topLeft2 });
144+
marker: 'C',
145+
values: [ ...topLeft1, x0, y0, ...topLeft2 ],
146+
})
147+
commands.push({ marker: 'L', values: topLeft2 })
149148
} else {
150-
commands.push({ marker: 'L', values: [x0, y0] });
149+
commands.push({ marker: 'L', values: [ x0, y0 ] })
151150
}
152151

153152
if (showBottomBorder) {
154-
const bottomLeft1 = [x0, y1 - borderRadius];
155-
const bottomLeft2 = [x0 + borderRadius, y1];
156-
commands.push({ marker: 'L', values: bottomLeft1 });
153+
const bottomLeft1 = [ x0, y1 - borderRadius ]
154+
const bottomLeft2 = [ x0 + borderRadius, y1 ]
155+
commands.push({ marker: 'L', values: bottomLeft1 })
157156
commands.push({
158-
marker: 'C',
159-
values: [...bottomLeft1, x0, y1, ...bottomLeft2],
160-
});
161-
commands.push({ marker: 'L', values: bottomLeft2 });
162-
const bottomRight1 = [x1 - borderRadius, y1];
163-
const bottomRight2 = [x1, y1 - borderRadius];
164-
commands.push({ marker: 'L', values: bottomRight1 });
157+
marker: 'C',
158+
values: [ ...bottomLeft1, x0, y1, ...bottomLeft2 ],
159+
})
160+
commands.push({ marker: 'L', values: bottomLeft2 })
161+
const bottomRight1 = [ x1 - borderRadius, y1 ]
162+
const bottomRight2 = [ x1, y1 - borderRadius ]
163+
commands.push({ marker: 'L', values: bottomRight1 })
165164
commands.push({
166-
marker: 'C',
167-
values: [...bottomRight1, x1, y1, ...bottomRight2],
168-
});
169-
commands.push({ marker: 'L', values: bottomRight2 });
165+
marker: 'C',
166+
values: [ ...bottomRight1, x1, y1, ...bottomRight2 ],
167+
})
168+
commands.push({ marker: 'L', values: bottomRight2 })
170169
} else {
171-
commands.push({ marker: 'L', values: [x0, y1] });
172-
commands.push({ marker: 'L', values: [x1, y1] });
170+
commands.push({ marker: 'L', values: [ x0, y1 ] })
171+
commands.push({ marker: 'L', values: [ x1, y1 ] })
173172
}
174173

175174
if (showTopBorder) {
176-
const topRight1 = [x1, y0 + borderRadius];
177-
const topRight2 = [x1 - borderRadius, y0];
178-
commands.push({ marker: 'L', values: topRight1 });
175+
const topRight1 = [ x1, y0 + borderRadius ]
176+
const topRight2 = [ x1 - borderRadius, y0 ]
177+
commands.push({ marker: 'L', values: topRight1 })
179178
commands.push({
180-
marker: 'C',
181-
values: [...topRight1, x1, y0, ...topRight2],
182-
});
183-
commands.push({ marker: 'L', values: topRight2 });
179+
marker: 'C',
180+
values: [ ...topRight1, x1, y0, ...topRight2 ],
181+
})
182+
commands.push({ marker: 'L', values: topRight2 })
184183
} else {
185-
commands.push({ marker: 'L', values: [x1, y0] });
184+
commands.push({ marker: 'L', values: [ x1, y0 ] })
186185
}
187186

188-
commands.push({ marker: 'Z', values: [] });
187+
commands.push({ marker: 'Z', values: [] })
189188

190-
return commands;
189+
return commands
191190
};
192191

193192
commandsToSvgPath = commands =>
194193
commands
195-
.map(command => `${command.marker} ${command.values.join(',')}`)
196-
.join(' ')
197-
.trim();
194+
.map(command => `${command.marker} ${command.values.join(',')}`)
195+
.join(' ')
196+
.trim()
198197

199198
calcExtent(values) {
200199
const {

‎src/x-axis.js

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ class XAxis extends PureComponent {
8383
const extraProps = {
8484
x,
8585
ticks,
86+
width,
8687
height,
8788
formatLabel,
8889
}

‎src/y-axis.js

+1
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ class YAxis extends PureComponent {
9696
y,
9797
ticks,
9898
width,
99+
height,
99100
formatLabel,
100101
}
101102

0 commit comments

Comments
 (0)