Skip to content

Commit 06f58b9

Browse files
MarcusNotheisMarcusNotheis
authored
fix(Charts - New): configurable animation and rendering improvements (#501)
1 parent fe5bf97 commit 06f58b9

File tree

16 files changed

+374
-1742
lines changed

16 files changed

+374
-1742
lines changed

‎packages/charts/src/components/BarChart/BarChart.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
9898
loading,
9999
dataset,
100100
noLegend = false,
101+
noAnimation = false,
101102
onDataPointClick,
102103
onLegendClick,
103104
style,
@@ -224,6 +225,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
224225
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
225226
barSize={element.width}
226227
onClick={onDataPointClickInternal}
228+
isAnimationActive={noAnimation === false}
227229
/>
228230
);
229231
})}

‎packages/charts/src/components/BarChart/BarRechart.stories.tsx‎

Lines changed: 109 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export const renderStory = () => {
1313
return (
1414
<BarChart
1515
loading={boolean('loading', false)}
16+
noLegend={boolean('noLegend', false)}
17+
noAnimation={boolean('noAnimation', false)}
1618
onDataPointClick={action('onDataPointClick')}
1719
onLegendClick={action('onLegendClick')}
1820
dataset={complexDataSet}
@@ -51,6 +53,9 @@ renderStory.story = {
5153

5254
export const renderStoryWithCustomColor = () => (
5355
<BarChart
56+
loading={boolean('loading', false)}
57+
noLegend={boolean('noLegend', false)}
58+
noAnimation={boolean('noAnimation', false)}
5459
onDataPointClick={action('onDataPointClick')}
5560
dimensions={[{ accessor: 'name' }]}
5661
measures={[{ accessor: 'users', color: 'red' }]}
@@ -65,6 +70,9 @@ renderStoryWithCustomColor.story = {
6570

6671
export const withSecondaryDimension = () => (
6772
<BarChart
73+
loading={boolean('loading', false)}
74+
noLegend={boolean('noLegend', false)}
75+
noAnimation={boolean('noAnimation', false)}
6876
onDataPointClick={action('onDataPointClick')}
6977
dimensions={[{ accessor: 'name' }, { accessor: 'dimension' }]}
7078
measures={[{ accessor: 'users', color: 'red' }]}
@@ -77,63 +85,65 @@ withSecondaryDimension.story = {
7785
name: 'With secondary dimension'
7886
};
7987

80-
export const renderLabelStory = () => {
81-
return (
82-
<BarChart
83-
onDataPointClick={action('onDataPointClick')}
84-
onLegendClick={action('onLegendClick')}
85-
dimensions={[{ accessor: 'name' }]}
86-
measures={[
87-
{
88-
accessor: 'users'
89-
},
90-
{
91-
accessor: 'sessions'
92-
},
93-
{
94-
accessor: 'volume'
95-
}
96-
]}
97-
dataset={complexDataSet}
98-
style={{ width: '95%', height: '40vh' }}
99-
chartConfig={{
100-
zoomingTool: true
101-
}}
102-
/>
103-
);
104-
};
88+
export const renderLabelStory = () => (
89+
<BarChart
90+
loading={boolean('loading', false)}
91+
noLegend={boolean('noLegend', false)}
92+
noAnimation={boolean('noAnimation', false)}
93+
onDataPointClick={action('onDataPointClick')}
94+
onLegendClick={action('onLegendClick')}
95+
dimensions={[{ accessor: 'name' }]}
96+
measures={[
97+
{
98+
accessor: 'users'
99+
},
100+
{
101+
accessor: 'sessions'
102+
},
103+
{
104+
accessor: 'volume'
105+
}
106+
]}
107+
dataset={complexDataSet}
108+
style={{ width: '95%', height: '40vh' }}
109+
chartConfig={{
110+
zoomingTool: true
111+
}}
112+
/>
113+
);
105114

106115
renderLabelStory.story = {
107116
name: 'With data labels'
108117
};
109118

110-
export const renderCustomDataLabelStory = () => {
111-
return (
112-
<BarChart
113-
onDataPointClick={action('onDataPointClick')}
114-
onLegendClick={action('onLegendClick')}
115-
dataset={complexDataSet}
116-
dimensions={[{ accessor: 'name', formatter: (element: string) => element.slice(0, 3) }]}
117-
measures={[
118-
{
119-
accessor: 'users',
120-
formatter: (element: number) => `${element / 10}`,
121-
label: 'number of users'
122-
},
123-
{
124-
accessor: 'sessions'
125-
},
126-
{
127-
accessor: 'volume'
128-
}
129-
]}
130-
style={{ width: '95%', height: '100vh' }}
131-
chartConfig={{
132-
zoomingTool: true
133-
}}
134-
/>
135-
);
136-
};
119+
export const renderCustomDataLabelStory = () => (
120+
<BarChart
121+
loading={boolean('loading', false)}
122+
noLegend={boolean('noLegend', false)}
123+
noAnimation={boolean('noAnimation', false)}
124+
onDataPointClick={action('onDataPointClick')}
125+
onLegendClick={action('onLegendClick')}
126+
dataset={complexDataSet}
127+
dimensions={[{ accessor: 'name', formatter: (element: string) => element.slice(0, 3) }]}
128+
measures={[
129+
{
130+
accessor: 'users',
131+
formatter: (element: number) => `${element / 10}`,
132+
label: 'number of users'
133+
},
134+
{
135+
accessor: 'sessions'
136+
},
137+
{
138+
accessor: 'volume'
139+
}
140+
]}
141+
style={{ width: '95%', height: '100vh' }}
142+
chartConfig={{
143+
zoomingTool: true
144+
}}
145+
/>
146+
);
137147

138148
renderCustomDataLabelStory.story = {
139149
name: 'With formatter'
@@ -145,53 +155,53 @@ loadingPlaceholder.story = {
145155
name: 'Loading placeholder'
146156
};
147157

148-
export const withReferenceLineStory = () => {
149-
return (
150-
<BarChart
151-
onDataPointClick={action('onDataPointClick')}
152-
onLegendClick={action('onLegendClick')}
153-
dataset={complexDataSet}
154-
dimensions={[{ accessor: 'name' }]}
155-
measures={[
156-
{
157-
accessor: 'users',
158-
stackId: 'A'
159-
},
160-
{
161-
accessor: 'sessions',
162-
stackId: 'A'
163-
},
164-
{
165-
accessor: 'volume'
166-
}
167-
]}
168-
style={{
169-
width: '95%',
170-
height: '70vh',
171-
'--sapChart_OrderedColor_1': '#0f828f',
172-
'--sapChart_OrderedColor_2': '#5ac2ce',
173-
'--sapChart_OrderedColor_3': '#03734d',
174-
'--sapChart_OrderedColor_4': '#66c2a3',
175-
'--sapChart_OrderedColor_5': '#3c6372',
176-
'--sapChart_OrderedColor_6': '#adbcc3',
177-
'--sapChart_OrderedColor_7': '#144b7f',
178-
'--sapChart_OrderedColor_8': '#698caf',
179-
'--sapChart_OrderedColor_9': '#d62f2f',
180-
'--sapChart_OrderedColor_10': '#f8a6a6',
181-
'--sapChart_OrderedColor_11': '#921473'
182-
}}
183-
noLegend={false}
184-
loading
185-
chartConfig={{
186-
referenceLine: {
187-
color: 'red',
188-
label: 'MAX',
189-
value: 650
190-
}
191-
}}
192-
/>
193-
);
194-
};
158+
export const withReferenceLineStory = () => (
159+
<BarChart
160+
loading={boolean('loading', false)}
161+
noLegend={boolean('noLegend', false)}
162+
noAnimation={boolean('noAnimation', false)}
163+
onDataPointClick={action('onDataPointClick')}
164+
onLegendClick={action('onLegendClick')}
165+
dataset={complexDataSet}
166+
dimensions={[{ accessor: 'name' }]}
167+
measures={[
168+
{
169+
accessor: 'users',
170+
stackId: 'A'
171+
},
172+
{
173+
accessor: 'sessions',
174+
stackId: 'A'
175+
},
176+
{
177+
accessor: 'volume'
178+
}
179+
]}
180+
style={{
181+
width: '95%',
182+
height: '70vh',
183+
'--sapChart_OrderedColor_1': '#0f828f',
184+
'--sapChart_OrderedColor_2': '#5ac2ce',
185+
'--sapChart_OrderedColor_3': '#03734d',
186+
'--sapChart_OrderedColor_4': '#66c2a3',
187+
'--sapChart_OrderedColor_5': '#3c6372',
188+
'--sapChart_OrderedColor_6': '#adbcc3',
189+
'--sapChart_OrderedColor_7': '#144b7f',
190+
'--sapChart_OrderedColor_8': '#698caf',
191+
'--sapChart_OrderedColor_9': '#d62f2f',
192+
'--sapChart_OrderedColor_10': '#f8a6a6',
193+
'--sapChart_OrderedColor_11': '#921473'
194+
}}
195+
loading
196+
chartConfig={{
197+
referenceLine: {
198+
color: 'red',
199+
label: 'MAX',
200+
value: 650
201+
}
202+
}}
203+
/>
204+
);
195205

196206
withReferenceLineStory.story = {
197207
name: 'With reference line'

‎packages/charts/src/components/ColumnChart/ColumnChart.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
9696
loading,
9797
dataset,
9898
noLegend = false,
99+
noAnimation = false,
99100
onDataPointClick,
100101
onLegendClick,
101102
style,
@@ -235,6 +236,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
235236
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
236237
barSize={element.width}
237238
onClick={onDataPointClickInternal}
239+
isAnimationActive={noAnimation === false}
238240
/>
239241
);
240242
})}

0 commit comments

Comments
 (0)