Skip to content

Commit a763bb8

Browse files
kleinju1017kleinju1017
authored
feat(Charts - New): improve autoscaling of axis ticks (#447)
1 parent 2ed6a98 commit a763bb8

File tree

11 files changed

+807
-29
lines changed

11 files changed

+807
-29
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const formatYAxisTicks = (tick) => {
3434
};
3535

3636
const dimensionDefaults = {
37-
formatter: formatYAxisTicks
37+
formatter: formatYAxisTicks,
38+
interval: 0
3839
};
3940

4041
const measureDefaults = {
@@ -64,7 +65,7 @@ interface DimensionConfig extends IChartDimension {
6465
interval?: number;
6566
}
6667

67-
interface BarChartProps extends RechartBaseProps {
68+
export interface BarChartProps extends RechartBaseProps {
6869
dimensions: DimensionConfig[];
6970
/**
7071
* An array of config objects. Each object is defining one bar in the chart.
@@ -169,6 +170,8 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
169170
chartConfig.zoomingTool
170171
);
171172

173+
const XAxisLabel = useAxisLabel(primaryMeasure?.formatter);
174+
172175
return (
173176
<ChartContainer
174177
dataset={dataset}
@@ -188,8 +191,9 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
188191
/>
189192
{(chartConfig.xAxisVisible ?? true) && (
190193
<XAxis
191-
interval={0}
194+
interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
192195
type="number"
196+
tick={XAxisLabel}
193197
axisLine={chartConfig.xAxisVisible ?? true}
194198
tickFormatter={primaryMeasure?.formatter}
195199
/>
@@ -202,11 +206,11 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
202206
: useAxisLabel(dimension.formatter, true);
203207
return (
204208
<YAxis
209+
interval={'preserveStartEnd'}
205210
type="category"
206211
key={dimension.accessor}
207212
dataKey={dimension.accessor}
208213
xAxisId={index}
209-
interval={dimension.interval ?? isBigDataSet ? 2 : 0}
210214
tick={YAxisLabel}
211215
tickLine={index < 1}
212216
axisLine={index < 1}
@@ -215,7 +219,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
215219
);
216220
})}
217221
{measures.map((element, index) => {
218-
const ColumnDataLabel = useDataLabel(
222+
const BarDataLabel = useDataLabel(
219223
!element.hideDataLabel,
220224
element.DataLabel,
221225
element.formatter,
@@ -230,7 +234,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
230234
key={element.accessor}
231235
name={element.label ?? element.accessor}
232236
strokeOpacity={element.opacity}
233-
label={isBigDataSet ? false : ColumnDataLabel}
237+
label={BarDataLabel}
234238
type="monotone"
235239
dataKey={element.accessor}
236240
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
@@ -251,7 +255,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
251255
<Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
252256
{chartConfig.zoomingTool && (
253257
<Brush
254-
y={0}
258+
y={10}
255259
dataKey={primaryDimensionAccessor}
256260
stroke={ThemingParameters.sapObjectHeader_BorderColor}
257261
travellerWidth={10}

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

Lines changed: 2 additions & 2 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',
@@ -128,7 +128,7 @@ export const renderCustomDataLabelStory = () => {
128128
accessor: 'volume'
129129
}
130130
]}
131-
style={{ width: '95%', height: '40vh' }}
131+
style={{ width: '95%', height: '100vh' }}
132132
chartConfig={{
133133
zoomingTool: true
134134
}}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ interface DimensionConfig extends IChartDimension {
4444
interval?: number;
4545
}
4646

47-
interface ColumnChartProps extends RechartBaseProps {
47+
export interface ColumnChartProps extends RechartBaseProps {
4848
dimensions: DimensionConfig[];
4949
/**
5050
* An array of config objects. Each object is defining one column in the chart.
@@ -197,7 +197,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
197197
key={dimension.accessor}
198198
dataKey={dimension.accessor}
199199
xAxisId={index}
200-
interval={dimension.interval ?? isBigDataSet ? 2 : 0}
200+
interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
201201
tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
202202
tickLine={index < 1}
203203
axisLine={index < 1}
@@ -209,7 +209,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
209209
tickLine={false}
210210
yAxisId="left"
211211
tickFormatter={primaryMeasure?.formatter}
212-
interval={0}
212+
interval={'preserveStart'}
213213
/>
214214
{chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
215215
<YAxis
@@ -237,7 +237,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
237237
key={element.accessor}
238238
name={element.label ?? element.accessor}
239239
strokeOpacity={element.opacity}
240-
label={isBigDataSet ? false : ColumnDataLabel}
240+
label={ColumnDataLabel}
241241
type="monotone"
242242
dataKey={element.accessor}
243243
fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
@@ -259,7 +259,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
259259
<Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
260260
{chartConfig.zoomingTool && (
261261
<Brush
262-
y={0}
262+
y={10}
263263
dataKey={primaryDimensionAccessor}
264264
stroke={ThemingParameters.sapObjectHeader_BorderColor}
265265
travellerWidth={10}

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

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

77
export default {
@@ -160,12 +160,13 @@ export const withReferenceLineStory = () => {
160160
<ComposedChart
161161
onDataPointClick={action('onDataPointClick')}
162162
onLegendClick={action('onLegendClick')}
163-
dataset={complexDataSet}
163+
dataset={bigDataSet}
164164
dimensions={[{ accessor: 'name' }]}
165165
measures={[
166166
{
167167
accessor: 'users',
168-
type: 'bar'
168+
type: 'bar',
169+
width: 2
169170
},
170171
{
171172
accessor: 'sessions',
@@ -180,6 +181,7 @@ export const withReferenceLineStory = () => {
180181
noLegend={false}
181182
loading
182183
chartConfig={{
184+
zoomingTool: true,
183185
referenceLine: {
184186
color: 'red',
185187
label: 'MAX',

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ interface DimensionConfig extends IChartDimension {
6060
interval?: number;
6161
}
6262

63-
interface ComposedChartProps extends RechartBaseProps {
63+
export interface ComposedChartProps extends RechartBaseProps {
6464
dimensions: DimensionConfig[];
6565
/**
6666
* An array of config objects. Each object is defining one element in the chart.
@@ -238,7 +238,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
238238
key={dimension.accessor}
239239
dataKey={dimension.accessor}
240240
xAxisId={index}
241-
interval={dimension.interval ?? isBigDataSet ? 2 : 0}
241+
interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
242242
tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
243243
tickLine={index < 1}
244244
axisLine={index < 1}
@@ -251,7 +251,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
251251
tickLine={false}
252252
yAxisId="left"
253253
tickFormatter={primaryMeasure?.formatter}
254-
interval={0}
254+
interval={'preserveStart'}
255255
/>
256256
{chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
257257
<YAxis
@@ -285,6 +285,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
285285
};
286286
chartElementProps.strokeWidth = element.width ?? 1;
287287
chartElementProps.strokeOpacity = element.opacity;
288+
chartElementProps.dot = !isBigDataSet;
288289
break;
289290
case 'bar':
290291
chartElementProps.fillOpacity = element.opacity;
@@ -294,6 +295,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
294295
chartElementProps.stackId = element.stackId ?? undefined;
295296
break;
296297
case 'area':
298+
chartElementProps.dot = !isBigDataSet;
297299
chartElementProps.fillOpacity = 0.3;
298300
chartElementProps.strokeOpacity = element.opacity;
299301
chartElementProps.onClick = onDataPointClickInternal;
@@ -316,7 +318,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
316318
})}
317319
{chartConfig.zoomingTool && (
318320
<Brush
319-
y={0}
321+
y={10}
320322
dataKey={primaryDimensionAccessor}
321323
stroke={ThemingParameters.sapObjectHeader_BorderColor}
322324
travellerWidth={10}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ interface DimensionConfig extends IChartDimension {
4141
interval?: number;
4242
}
4343

44-
interface LineChartProps extends RechartBaseProps {
44+
export interface LineChartProps extends RechartBaseProps {
4545
dimensions: DimensionConfig[];
4646
/**
4747
* An array of config objects. Each object is defining one line in the chart.
@@ -192,7 +192,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
192192
key={dimension.accessor}
193193
dataKey={dimension.accessor}
194194
xAxisId={index}
195-
interval={dimension.interval ?? isBigDataSet ? 2 : 0}
195+
interval={primaryDimension?.interval ?? isBigDataSet ? 'preserveStart' : 0}
196196
tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
197197
tickLine={index < 1}
198198
axisLine={index < 1}
@@ -227,6 +227,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
227227
);
228228
return (
229229
<Line
230+
dot={!isBigDataSet}
230231
yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
231232
key={element.accessor}
232233
name={element.label ?? element.accessor}
@@ -252,7 +253,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
252253
<Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
253254
{chartConfig.zoomingTool && (
254255
<Brush
255-
y={0}
256+
y={10}
256257
dataKey={primaryDimensionAccessor}
257258
stroke={ThemingParameters.sapObjectHeader_BorderColor}
258259
travellerWidth={10}

‎packages/charts/src/components/LineChart/LineRechart.stories.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
22
import { boolean } from '@storybook/addon-knobs';
33
import { LineChart } from '@ui5/webcomponents-react-charts/lib/next/LineChart';
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 / LineChart',
@@ -96,6 +96,7 @@ export const renderLabelStory = () => {
9696
]}
9797
dataset={complexDataSet}
9898
style={{ width: '95%', height: '40vh' }}
99+
loading={true}
99100
chartConfig={{
100101
zoomingTool: true
101102
}}
@@ -150,7 +151,7 @@ export const withReferenceLineStory = () => {
150151
<LineChart
151152
onDataPointClick={action('onDataPointClick')}
152153
onLegendClick={action('onLegendClick')}
153-
dataset={complexDataSet}
154+
dataset={bigDataSet}
154155
dimensions={[{ accessor: 'name' }]}
155156
measures={[
156157
{

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils'
33
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
44
import { PieChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/PieChartPlaceholder';
55
import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
6-
import React, { FC, forwardRef, Ref, useCallback, useMemo, ComponentType, CSSProperties } from 'react';
6+
import React, { FC, forwardRef, Ref, useCallback, useMemo, CSSProperties } from 'react';
77
import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip } from 'recharts';
88
import { usePieDataLabel } from '../../hooks/useLabelElements';
99
import { IChartMeasure } from '../../interfaces/IChartMeasure';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ interface DimensionConfig extends IChartDimension {
3333
interval?: number;
3434
}
3535

36-
interface RadarChartProps extends RechartBaseProps {
36+
export interface RadarChartProps extends RechartBaseProps {
3737
dimensions: DimensionConfig[];
3838
/**
3939
* An array of config objects. Each object is defining one radar in the chart.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
66
import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
77
import { PolarAngleAxis, RadialBar, RadialBarChart as RadialBarChartLib } from 'recharts';
88

9-
interface RadialChartProps extends CommonProps {
9+
export interface RadialChartProps extends CommonProps {
1010
value?: number;
1111
maxValue?: number;
1212
displayValue?: number | string;

0 commit comments

Comments
 (0)