Skip to content

Commit 3666beb

Browse files
kleinju1017kleinju1017
committed
WIP: initial setup
1 parent 073edd3 commit 3666beb

File tree

4 files changed

+507
-0
lines changed

4 files changed

+507
-0
lines changed

‎packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import { action } from '@storybook/addon-actions';
2+
import { boolean } from '@storybook/addon-knobs';
3+
import React from 'react';
4+
import { ScatterChart } from '../../lib/ScatterChart';
5+
import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
6+
7+
export default {
8+
title: 'Charts / ScatterChart',
9+
component: ScatterChart
10+
};
11+
12+
export const renderStory = () => (
13+
<ScatterChart
14+
loading={boolean('loading', false)}
15+
noLegend={boolean('noLegend', false)}
16+
noAnimation={boolean('noAnimation', false)}
17+
onDataPointClick={action('onDataPointClick')}
18+
onLegendClick={action('onLegendClick')}
19+
dataset={complexDataSet}
20+
style={{ width: '100%' }}
21+
dimensions={[
22+
{
23+
accessor: 'name',
24+
formatter: (d) => `${d} 2019`,
25+
interval: 0
26+
}
27+
]}
28+
measures={[
29+
{
30+
accessor: 'users',
31+
label: 'Users',
32+
formatter: (val) => val.toLocaleString()
33+
},
34+
{
35+
accessor: 'sessions',
36+
label: 'Active Sessions',
37+
formatter: (val) => `${val} sessions`,
38+
hideDataLabel: true
39+
},
40+
{
41+
accessor: 'volume',
42+
label: 'Vol.'
43+
}
44+
]}
45+
/>
46+
);
47+
48+
renderStory.story = {
49+
name: 'Default'
50+
};
51+
52+
export const renderStoryWithCustomColor = () => (
53+
<ScatterChart
54+
loading={boolean('loading', false)}
55+
noLegend={boolean('noLegend', false)}
56+
noAnimation={boolean('noAnimation', false)}
57+
onDataPointClick={action('onDataPointClick')}
58+
dimensions={[{ accessor: 'name' }]}
59+
measures={[{ accessor: 'users', color: 'red' }]}
60+
dataset={simpleDataSet}
61+
style={{ width: '95%', height: '40vh' }}
62+
/>
63+
);
64+
65+
renderStoryWithCustomColor.story = {
66+
name: 'With custom color'
67+
};
68+
69+
export const withSecondaryDimension = () => (
70+
<ScatterChart
71+
loading={boolean('loading', false)}
72+
noLegend={boolean('noLegend', false)}
73+
noAnimation={boolean('noAnimation', false)}
74+
onDataPointClick={action('onDataPointClick')}
75+
dimensions={[{ accessor: 'name' }, { accessor: 'dimension' }]}
76+
measures={[{ accessor: 'users', color: 'red' }]}
77+
dataset={secondaryDimensionDataSet}
78+
style={{ width: '95%', height: '60vh' }}
79+
/>
80+
);
81+
82+
withSecondaryDimension.story = {
83+
name: 'With secondary dimension'
84+
};
85+
86+
export const renderLabelStory = () => {
87+
return (
88+
<ScatterChart
89+
loading={boolean('loading', false)}
90+
noLegend={boolean('noLegend', false)}
91+
noAnimation={boolean('noAnimation', false)}
92+
onDataPointClick={action('onDataPointClick')}
93+
onLegendClick={action('onLegendClick')}
94+
dimensions={[{ accessor: 'name' }]}
95+
measures={[
96+
{
97+
accessor: 'users'
98+
},
99+
{
100+
accessor: 'sessions'
101+
},
102+
{
103+
accessor: 'volume'
104+
}
105+
]}
106+
dataset={complexDataSet}
107+
style={{ width: '95%', height: '40vh' }}
108+
chartConfig={{
109+
zoomingTool: true
110+
}}
111+
/>
112+
);
113+
};
114+
115+
renderLabelStory.story = {
116+
name: 'With data labels'
117+
};
118+
119+
export const renderCustomDataLabelStory = () => {
120+
return (
121+
<ScatterChart
122+
loading={boolean('loading', false)}
123+
noLegend={boolean('noLegend', false)}
124+
noAnimation={boolean('noAnimation', false)}
125+
onDataPointClick={action('onDataPointClick')}
126+
onLegendClick={action('onLegendClick')}
127+
dataset={complexDataSet}
128+
dimensions={[{ accessor: 'name', formatter: (element: string) => element.slice(0, 3) }]}
129+
measures={[
130+
{
131+
accessor: 'users',
132+
formatter: (element: number) => `${element / 10}`,
133+
label: 'number of users'
134+
},
135+
{
136+
accessor: 'sessions'
137+
},
138+
{
139+
accessor: 'volume'
140+
}
141+
]}
142+
style={{ width: '95%', height: '40vh' }}
143+
chartConfig={{
144+
zoomingTool: true
145+
}}
146+
/>
147+
);
148+
};
149+
150+
renderCustomDataLabelStory.story = {
151+
name: 'With formatter'
152+
};
153+
154+
export const loadingPlaceholder = () => <LineChart style={{ width: '100%' }} dimensions={[]} measures={[]} />;
155+
156+
loadingPlaceholder.story = {
157+
name: 'Loading placeholder'
158+
};
159+
160+
export const withReferenceLineStory = () => {
161+
return (
162+
<ScatterChart
163+
loading={boolean('loading', false)}
164+
noLegend={boolean('noLegend', false)}
165+
noAnimation={boolean('noAnimation', false)}
166+
onDataPointClick={action('onDataPointClick')}
167+
onLegendClick={action('onLegendClick')}
168+
dataset={bigDataSet}
169+
dimensions={[{ accessor: 'name' }]}
170+
measures={[
171+
{
172+
accessor: 'users'
173+
},
174+
{
175+
accessor: 'sessions'
176+
},
177+
{
178+
accessor: 'volume'
179+
}
180+
]}
181+
style={{ width: '95%', height: '40vh' }}
182+
chartConfig={{
183+
referenceLine: {
184+
color: 'red',
185+
label: 'MAX',
186+
value: 650
187+
}
188+
}}
189+
/>
190+
);
191+
};
192+
193+
withReferenceLineStory.story = {
194+
name: 'With reference line'
195+
};

‎packages/charts/src/components/ScatterChart/ScatterChart.test.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { action } from '@storybook/addon-actions';
2+
import { boolean } from '@storybook/addon-knobs';
3+
import { mount } from 'enzyme';
4+
import * as React from 'react';
5+
import { complexDataSet } from '../../resources/DemoProps';
6+
import { LineChart } from './LineChart';
7+
8+
describe('LineChart', () => {
9+
test('Renders with data', () => {
10+
expect(
11+
mount(
12+
<LineChart
13+
loading={boolean('loading', false)}
14+
onDataPointClick={action('onDataPointClick')}
15+
onLegendClick={action('onLegendClick')}
16+
dataset={complexDataSet}
17+
style={{ width: '100%' }}
18+
dimensions={[
19+
{
20+
accessor: 'name',
21+
formatter: (d) => `${d} 2019`,
22+
interval: 0
23+
}
24+
]}
25+
measures={[
26+
{
27+
accessor: 'users',
28+
label: 'Users',
29+
formatter: (val) => val.toLocaleString()
30+
},
31+
{
32+
accessor: 'sessions',
33+
label: 'Active Sessions',
34+
formatter: (val) => `${val} sessions`,
35+
hideDataLabel: true
36+
},
37+
{
38+
accessor: 'volume',
39+
label: 'Vol.'
40+
}
41+
]}
42+
/>
43+
).render()
44+
).toMatchSnapshot();
45+
});
46+
47+
test('loading placeholder', () => {
48+
const wrapper = mount(<LineChart style={{ width: '30%' }} dimensions={[]} measures={[]} />);
49+
expect(wrapper.render()).toMatchSnapshot();
50+
});
51+
});

0 commit comments

Comments
 (0)