Skip to content

Commit 9c4c176

Browse files
kleinju1017kleinju1017
authored
feat(Charts - New): new formatters and support large datasets (#410)
1 parent 4003065 commit 9c4c176

File tree

19 files changed

+740
-126
lines changed

19 files changed

+740
-126
lines changed

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,10 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
4141
noLegend = false,
4242
onDataPointClick,
4343
onLegendClick,
44-
xAxisFormatter = (el) => el,
45-
yAxisFormatter = (el) => formatYAxisTicks(el),
46-
dataLabelFormatter = (d) => d,
44+
labels,
45+
axisInterval,
46+
labelFormatter = (el) => formatYAxisTicks(el),
47+
valueFormatter = (el) => el,
4748
dataLabelCustomElement = undefined,
4849
chartConfig = {
4950
margin: {},
@@ -55,7 +56,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
5556
gridHorizontal: true,
5657
gridVertical: false,
5758
legendPosition: 'top',
58-
barSize: 10,
59+
barSize: undefined,
5960
barGap: 3,
6061
zoomingTool: false,
6162
strokeOpacity: 1,
@@ -112,24 +113,25 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
112113
const BarDataLabel = useDataLabel(
113114
chartConfig.dataLabel,
114115
dataLabelCustomElement,
115-
dataLabelFormatter,
116+
valueFormatter,
116117
chartConfig.stacked,
117118
true
118119
);
119120

120121
const marginChart = useChartMargin(
121122
dataset,
122-
yAxisFormatter,
123+
labelFormatter,
123124
labelKey,
124125
chartConfig.margin,
125126
true,
126127
secondaryDimensionKey,
127128
chartConfig.zoomingTool
128129
);
129130

130-
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
131-
const YAxisLabel = useAxisLabel(yAxisFormatter, chartConfig.yAxisUnit, true);
132-
const SecondaryDimensionLabel = useSecondaryDimensionLabel(true, yAxisFormatter);
131+
const XAxisLabel = useAxisLabel(valueFormatter, chartConfig.xAxisUnit);
132+
const YAxisLabel = useAxisLabel(labelFormatter, chartConfig.yAxisUnit, true);
133+
const SecondaryDimensionLabel = useSecondaryDimensionLabel(true, labelFormatter);
134+
const bigDataSet = dataset?.length > 30 ?? false;
133135

134136
return (
135137
<ChartContainer
@@ -158,7 +160,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
158160
tick={YAxisLabel}
159161
type="category"
160162
dataKey={labelKey}
161-
interval={0}
163+
interval={axisInterval ?? bigDataSet ? 2 : 0}
162164
yAxisId={0}
163165
/>
164166
{secondaryDimensionKey && (
@@ -179,7 +181,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
179181
fillOpacity={chartConfig.fillOpacity}
180182
label={BarDataLabel}
181183
key={key}
182-
name={key}
184+
name={labels?.[key] || key}
183185
dataKey={key}
184186
fill={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
185187
stroke={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
@@ -195,7 +197,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
195197
label={chartConfig.referenceLine.label}
196198
/>
197199
)}
198-
<Tooltip cursor={{ fillOpacity: 0.3 }} />
200+
<Tooltip cursor={{ fillOpacity: 0.3 }} labelFormatter={valueFormatter} />
199201
{chartConfig.zoomingTool && (
200202
<Brush y={0} dataKey={labelKey} stroke={`var(--sapUiChartAccent6)`} travellerWidth={10} height={20} />
201203
)}

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
22
import { boolean, text } from '@storybook/addon-knobs';
33
import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';
44
import React from 'react';
5-
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
5+
import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
66

77
export default {
88
title: 'Charts - Unstable / BarChart',
@@ -31,9 +31,9 @@ export const withCustomColor = () => (
3131
dataset={simpleDataSet}
3232
labelKey={'name'}
3333
color={'red'}
34-
width={text('width', '95%')}
35-
height={text('height', '70vh')}
36-
chartConfig={{ dataLabel: true, barSize: 20 }}
34+
width={'100%'}
35+
height={'90vh'}
36+
chartConfig={{ dataLabel: true }}
3737
/>
3838
);
3939

@@ -52,7 +52,7 @@ export const defaultStackedStory = () => (
5252
onDataPointClick={action('onDataPointClick')}
5353
onLegendClick={action('onLegendClick')}
5454
labelKey={'name'}
55-
width={'91%'}
55+
width={'100%'}
5656
dataset={complexDataSet}
5757
chartConfig={{
5858
gridStroke: 'white',
@@ -81,7 +81,6 @@ export const defaultFormatterStory = () => (
8181
width={'91%'}
8282
height={'90vh'}
8383
dataset={complexDataSet}
84-
dataLabelFormatter={(d) => `${d / 10}%`}
8584
xAxisFormatter={(el) => el / 10}
8685
yAxisFormatter={(el) => el.slice(0, 3)}
8786
chartConfig={{
@@ -109,13 +108,13 @@ export const withReferenceLineStory = () => (
109108
onLegendClick={action('onLegendClick')}
110109
labelKey={'name'}
111110
width={'91%'}
112-
dataset={complexDataSet}
111+
height={'100vh'}
112+
dataset={bigDataSet}
113113
chartConfig={{
114114
gridStroke: 'white',
115115
gridVertical: false,
116116
fillOpacity: 0.7,
117117
strokeOpacity: 1,
118-
barSize: 20,
119118
xAxisVisible: true,
120119
yAxisVisible: true,
121120
zoomingTool: true,
@@ -143,7 +142,6 @@ export const withSecondardDimension = () => (
143142
color={'lightblue'}
144143
width={'100%'}
145144
height={'60vh'}
146-
chartConfig={{ dataLabel: true, barSize: 20 }}
147145
/>
148146
);
149147

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

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,13 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
3838
height = '300px',
3939
dataset,
4040
dataKeys,
41+
labels,
4142
noLegend = false,
4243
onDataPointClick,
4344
onLegendClick,
44-
xAxisFormatter = (el) => el,
45-
yAxisFormatter = (el) => el,
46-
dataLabelFormatter = (d) => d,
45+
axisInterval,
46+
valueFormatter = (el) => el,
47+
labelFormatter = (el) => el,
4748
dataLabelCustomElement = undefined,
4849
chartConfig = {
4950
margin: {},
@@ -56,7 +57,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
5657
gridVertical: false,
5758
yAxisColor: ThemingParameters.sapList_BorderColor,
5859
legendPosition: 'top',
59-
barSize: 15,
60+
barSize: undefined,
6061
barGap: 3,
6162
zoomingTool: false,
6263
strokeOpacity: 1,
@@ -116,19 +117,22 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
116117
const ColumnDataLabel = useDataLabel(
117118
chartConfig.dataLabel,
118119
dataLabelCustomElement,
119-
dataLabelFormatter,
120+
labelFormatter,
120121
chartConfig.stacked,
122+
false,
121123
false
122124
);
123125

126+
const bigDataSet = dataset?.length > 30 ?? false;
127+
124128
const SecondaryDimensionLabel = useSecondaryDimensionLabel();
125129

126-
const XAxisLabel = useAxisLabel(xAxisFormatter, chartConfig.xAxisUnit);
130+
const XAxisLabel = useAxisLabel(valueFormatter, chartConfig.xAxisUnit);
127131

128132
const marginChart = useChartMargin(
129133
dataset,
130134
labelKey,
131-
yAxisFormatter,
135+
labelFormatter,
132136
chartConfig.margin,
133137
false,
134138
secondaryDimensionKey,
@@ -154,19 +158,21 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
154158
horizontal={chartConfig.gridHorizontal}
155159
stroke={chartConfig.gridStroke ?? ThemingParameters.sapList_BorderColor}
156160
/>
157-
{(chartConfig.xAxisVisible ?? true) && <XAxis interval={0} tick={XAxisLabel} dataKey={labelKey} xAxisId={0} />}
161+
{(chartConfig.xAxisVisible ?? true) && (
162+
<XAxis interval={axisInterval ?? bigDataSet ? 2 : 0} tick={XAxisLabel} dataKey={labelKey} xAxisId={0} />
163+
)}
158164
{secondaryDimensionKey && (
159165
<XAxis
160166
interval={0}
161-
dataKey={'dimension'}
167+
dataKey={secondaryDimensionKey}
162168
tickLine={false}
163169
tick={SecondaryDimensionLabel}
164170
axisLine={false}
165171
xAxisId={1}
166172
/>
167173
)}
168174
<YAxis
169-
tickFormatter={yAxisFormatter}
175+
tickFormatter={labelFormatter}
170176
unit={chartConfig.yAxisUnit}
171177
axisLine={chartConfig.yAxisVisible ?? false}
172178
tickLine={false}
@@ -191,7 +197,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
191197
fillOpacity={chartConfig.fillOpacity}
192198
label={ColumnDataLabel}
193199
key={key}
194-
name={key}
200+
name={labels?.[key] || key}
195201
dataKey={key}
196202
fill={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
197203
stroke={color ?? `var(--sapUiChartAccent${(index % 12) + 1})`}
@@ -208,7 +214,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
208214
yAxisId={'left'}
209215
/>
210216
)}
211-
<Tooltip cursor={{ fillOpacity: 0.3 }} />
217+
<Tooltip cursor={{ fillOpacity: 0.3 }} labelFormatter={valueFormatter} />
212218
{chartConfig.zoomingTool && (
213219
<Brush y={1} dataKey={labelKey} stroke={`var(--sapUiChartAccent6)`} travellerWidth={10} height={20} />
214220
)}

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { action } from '@storybook/addon-actions';
22
import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/next/ColumnChart';
33
import React from 'react';
4-
import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
4+
import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
55

66
export default {
77
title: 'Charts - Unstable / ColumnChart',
@@ -71,7 +71,6 @@ export const defaultStackedStory = () => (
7171
gridVertical: false,
7272
fillOpacity: 0.7,
7373
strokeOpacity: 1,
74-
barSize: 35,
7574
xAxisVisible: true,
7675
yAxisVisible: true,
7776
zoomingTool: true,
@@ -92,21 +91,17 @@ export const defaultFormatedStory = () => (
9291
labelKey={'name'}
9392
dataset={complexDataSet}
9493
width={'97%'}
95-
dataLabelFormatter={(d) => d / 100}
9694
xAxisFormatter={(el) => el.slice(0, 3)}
9795
yAxisFormatter={(el) => el / 100}
9896
chartConfig={{
9997
gridStroke: 'white',
10098
gridVertical: false,
101-
yAxisUnit: '/100',
10299
fillOpacity: 0.7,
103100
strokeOpacity: 1,
104-
barSize: 35,
105101
xAxisVisible: true,
106102
yAxisVisible: true,
107103
zoomingTool: true,
108-
stacked: true,
109-
dataLabel: true
104+
stacked: true
110105
}}
111106
/>
112107
);
@@ -120,20 +115,18 @@ export const defaultReferenceLineStory = () => (
120115
onDataPointClick={action('onDataPointClick')}
121116
onLegendClick={action('onLegendClick')}
122117
labelKey={'name'}
123-
dataset={complexDataSet}
118+
dataset={bigDataSet}
124119
width={'97%'}
125-
dataLabelFormatter={(d) => d / 100}
126120
chartConfig={{
127121
gridStroke: 'white',
128122
gridVertical: false,
129123
fillOpacity: 0.7,
130124
strokeOpacity: 1,
131-
barSize: 35,
132125
xAxisVisible: true,
133126
yAxisVisible: true,
134127
zoomingTool: true,
135-
stacked: true,
136128
dataLabel: true,
129+
stacked: true,
137130
referenceLine: {
138131
color: 'red',
139132
label: 'MAX',

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99

1010
export const renderComposedChart = () => (
1111
<ComposedChart
12-
width={'95%'}
12+
width={'100%'}
1313
height={'300px'}
1414
dataset={complexDataSet}
1515
onLegendClick={action('onLegendClick')}
@@ -181,6 +181,7 @@ export const renderFormatedComposedChart = () => (
181181
width={'95%'}
182182
height={'40vh'}
183183
dataset={complexDataSet}
184+
labels={{ users: 'numbers of users' }}
184185
xAxisFormatter={(el) => el.slice(0, 3)}
185186
yAxisFormatter={(el) => el / 10}
186187
onLegendClick={action('onLegendClick')}
@@ -197,11 +198,11 @@ export const renderFormatedComposedChart = () => (
197198
{
198199
type: 'line',
199200
accessor: 'users',
200-
dataLabelFormatter: (el) => ''
201+
dataValueFormatter: (el) => ''
201202
},
202203
{
203204
type: 'line',
204-
dataLabelFormatter: (d) => `${d}/unit`,
205+
dataValueFormatter: (d) => `${d}/unit`,
205206
accessor: 'volume'
206207
}
207208
]}

0 commit comments

Comments
 (0)