Skip to content

Commit b8dc9e1

Browse files
markov00markov00
authored
feat: add chart size type overrides (#317)
Now the Chart size prop takes multiple types as input: basic string or number, a tuple of string or number or undefined, an object with width and height (string, number or optionals). fix #177
1 parent f9f13dd commit b8dc9e1

File tree

6 files changed

+165
-4
lines changed

6 files changed

+165
-4
lines changed

‎.playground/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
.chart {
2424
position: relative;
2525
width: 100%;
26-
height: 50%;
26+
height: 100%;
2727
}
2828
</style>
2929
</head>

‎src/components/chart.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ import { LegendButton } from './legend/legend_button';
1313
import { ReactiveChart as ReactChart } from './react_canvas/reactive_chart';
1414
import { Tooltips } from './tooltips';
1515
import { CursorEvent } from '../specs/settings';
16+
import { ChartSize, getChartSize } from '../utils/chart_size';
1617

1718
interface ChartProps {
1819
/** The type of rendered
1920
* @default 'canvas'
2021
*/
2122
renderer: 'svg' | 'canvas';
22-
size?: [number, number];
23+
size?: ChartSize;
2324
className?: string;
2425
}
2526

@@ -60,8 +61,7 @@ export class Chart extends React.Component<ChartProps> {
6061
if (size) {
6162
containerStyle = {
6263
position: 'relative',
63-
width: size[0],
64-
height: size[1],
64+
...getChartSize(size),
6565
};
6666
} else {
6767
containerStyle = {};

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './specs';
22
export { Chart } from './components/chart';
3+
export { ChartSize, ChartSizeArray, ChartSizeObject } from './utils/chart_size';
34
export { TooltipType, TooltipValue, TooltipValueFormatter } from './chart_types/xy_chart/utils/interactions';
45
export { SpecId, GroupId, AxisId, AnnotationId, getAxisId, getGroupId, getSpecId, getAnnotationId } from './utils/ids';
56
export { ScaleType } from './utils/scales/scales';

‎src/utils/chart_size.test.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { getChartSize } from './chart_size';
2+
3+
describe('chart size utilities', () => {
4+
test('array', () => {
5+
expect(getChartSize([100, 100])).toEqual({
6+
width: 100,
7+
height: 100,
8+
});
9+
expect(getChartSize([undefined, 100])).toEqual({
10+
width: '100%',
11+
height: 100,
12+
});
13+
expect(getChartSize([100, undefined])).toEqual({
14+
width: 100,
15+
height: '100%',
16+
});
17+
expect(getChartSize([undefined, undefined])).toEqual({
18+
width: '100%',
19+
height: '100%',
20+
});
21+
expect(getChartSize([0, '100em'])).toEqual({
22+
width: 0,
23+
height: '100em',
24+
});
25+
});
26+
test('value', () => {
27+
expect(getChartSize(1)).toEqual({
28+
width: 1,
29+
height: 1,
30+
});
31+
expect(getChartSize('100em')).toEqual({
32+
width: '100em',
33+
height: '100em',
34+
});
35+
expect(getChartSize(0)).toEqual({
36+
width: 0,
37+
height: 0,
38+
});
39+
});
40+
test('object', () => {
41+
expect(getChartSize({ width: 100, height: 100 })).toEqual({
42+
width: 100,
43+
height: 100,
44+
});
45+
expect(getChartSize({ height: 100 })).toEqual({
46+
width: '100%',
47+
height: 100,
48+
});
49+
expect(getChartSize({ width: 100 })).toEqual({
50+
width: 100,
51+
height: '100%',
52+
});
53+
expect(getChartSize({})).toEqual({
54+
width: '100%',
55+
height: '100%',
56+
});
57+
expect(getChartSize({ width: 0, height: '100em' })).toEqual({
58+
width: 0,
59+
height: '100em',
60+
});
61+
});
62+
});

‎src/utils/chart_size.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export type ChartSizeArray = [number | string | undefined, number | string | undefined];
2+
export interface ChartSizeObject {
3+
width?: number | string;
4+
height?: number | string;
5+
}
6+
7+
export type ChartSize = number | string | ChartSizeArray | ChartSizeObject;
8+
9+
export function getChartSize(size: ChartSize) {
10+
if (Array.isArray(size)) {
11+
return {
12+
width: size[0] === undefined ? '100%' : size[0],
13+
height: size[1] === undefined ? '100%' : size[1],
14+
};
15+
} else if (typeof size === 'object') {
16+
return {
17+
width: size.width === undefined ? '100%' : size.width,
18+
height: size.height === undefined ? '100%' : size.height,
19+
};
20+
}
21+
const sameSize = size === undefined ? '100%' : size;
22+
return {
23+
width: sameSize,
24+
height: sameSize,
25+
};
26+
}

‎stories/styling.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import {
2121
Settings,
2222
BaseThemeTypes,
2323
LineSeriesStyle,
24+
TooltipType,
25+
RecursivePartial,
26+
Theme,
2427
} from '../src/';
2528
import * as TestDatasets from '../src/utils/data_samples/test_dataset';
2629
import { palettes } from '../src/utils/themes/colors';
@@ -103,6 +106,75 @@ const data2 = dg.generateSimpleSeries(40);
103106
const data3 = dg.generateSimpleSeries(40);
104107

105108
storiesOf('Stylings', module)
109+
.add('chart size', () => {
110+
const theme: RecursivePartial<Theme> = {
111+
chartMargins: {
112+
bottom: 0,
113+
left: 0,
114+
top: 0,
115+
right: 0,
116+
},
117+
};
118+
return (
119+
<div>
120+
<Chart className={'story-chart'} size={{ width: 100, height: 50 }}>
121+
<Settings tooltip={TooltipType.None} theme={theme} />
122+
<BarSeries
123+
id={getSpecId('bars')}
124+
xScaleType={ScaleType.Linear}
125+
yScaleType={ScaleType.Linear}
126+
xAccessor="x"
127+
yAccessors={['y']}
128+
data={data2}
129+
/>
130+
</Chart>
131+
<Chart className={'story-chart'} size={{ height: 50 }}>
132+
<Settings tooltip={TooltipType.None} theme={theme} />
133+
<BarSeries
134+
id={getSpecId('bars')}
135+
xScaleType={ScaleType.Linear}
136+
yScaleType={ScaleType.Linear}
137+
xAccessor="x"
138+
yAccessors={['y']}
139+
data={data2}
140+
/>
141+
</Chart>
142+
<Chart className={'story-chart'} size={['50%', 50]}>
143+
<Settings tooltip={TooltipType.None} theme={theme} />
144+
<BarSeries
145+
id={getSpecId('bars')}
146+
xScaleType={ScaleType.Linear}
147+
yScaleType={ScaleType.Linear}
148+
xAccessor="x"
149+
yAccessors={['y']}
150+
data={data2}
151+
/>
152+
</Chart>
153+
<Chart className={'story-chart'} size={[undefined, 50]}>
154+
<Settings tooltip={TooltipType.None} theme={theme} />
155+
<BarSeries
156+
id={getSpecId('bars')}
157+
xScaleType={ScaleType.Linear}
158+
yScaleType={ScaleType.Linear}
159+
xAccessor="x"
160+
yAccessors={['y']}
161+
data={data2}
162+
/>
163+
</Chart>
164+
<Chart className={'story-chart'} size={50}>
165+
<Settings tooltip={TooltipType.None} theme={theme} />
166+
<BarSeries
167+
id={getSpecId('bars')}
168+
xScaleType={ScaleType.Linear}
169+
yScaleType={ScaleType.Linear}
170+
xAccessor="x"
171+
yAccessors={['y']}
172+
data={data2}
173+
/>
174+
</Chart>
175+
</div>
176+
);
177+
})
106178
.add('margins and paddings', () => {
107179
const theme: PartialTheme = {
108180
chartMargins: {

0 commit comments

Comments
 (0)