Skip to content

Commit acd79b8

Browse files
MarcusNotheisMarcusNotheis
authored
feat:(Charts - News): add cursor pointer to clickable elements (#505)
1 parent 8390186 commit acd79b8

7 files changed

Lines changed: 109 additions & 66 deletions

File tree

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
YAxis
2121
} from 'recharts';
2222
import { useChartMargin } from '../../hooks/useChartMargin';
23+
import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
2324
import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
2425
import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
2526
import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
@@ -28,7 +29,6 @@ import { IChartMeasure } from '../../interfaces/IChartMeasure';
2829
import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
2930
import { defaultFormatter } from '../../internal/defaults';
3031
import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
31-
import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
3232

3333
const dimensionDefaults = {
3434
formatter: defaultFormatter
@@ -175,7 +175,13 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
175175
tooltip={tooltip}
176176
slot={slot}
177177
>
178-
<BarChartLib margin={marginChart} layout="vertical" data={dataset} barGap={chartConfig.barGap}>
178+
<BarChartLib
179+
margin={marginChart}
180+
layout="vertical"
181+
data={dataset}
182+
barGap={chartConfig.barGap}
183+
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
184+
>
179185
<CartesianGrid
180186
vertical={chartConfig.gridVertical}
181187
horizontal={chartConfig.gridHorizontal}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,12 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
180180
tooltip={tooltip}
181181
slot={slot}
182182
>
183-
<ColumnChartLib margin={marginChart} data={dataset} barGap={chartConfig.barGap}>
183+
<ColumnChartLib
184+
margin={marginChart}
185+
data={dataset}
186+
barGap={chartConfig.barGap}
187+
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
188+
>
184189
<CartesianGrid
185190
vertical={chartConfig.gridVertical}
186191
horizontal={chartConfig.gridHorizontal}

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

Lines changed: 62 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -160,34 +160,34 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
160160
(payload, eventOrIndex, event) => {
161161
if (payload.name) {
162162
typeof onDataPointClick === 'function' &&
163-
onDataPointClick(
164-
enrichEventWithDetails(event ?? eventOrIndex, {
165-
value: payload.value.length ? payload.value[1] - payload.value[0] : payload.value,
166-
dataIndex: payload.index ?? eventOrIndex,
167-
dataKey: payload.value.length
168-
? Object.keys(payload).filter((key) =>
169-
payload.value.length
170-
? payload[key] === payload.value[1] - payload.value[0]
171-
: payload[key] === payload.value && key !== 'value'
172-
)[0]
173-
: payload.dataKey ??
174-
Object.keys(payload).find((key) => payload[key] === payload.value && key !== 'value'),
175-
payload: payload.payload
176-
})
177-
);
163+
onDataPointClick(
164+
enrichEventWithDetails(event ?? eventOrIndex, {
165+
value: payload.value.length ? payload.value[1] - payload.value[0] : payload.value,
166+
dataIndex: payload.index ?? eventOrIndex,
167+
dataKey: payload.value.length
168+
? Object.keys(payload).filter((key) =>
169+
payload.value.length
170+
? payload[key] === payload.value[1] - payload.value[0]
171+
: payload[key] === payload.value && key !== 'value'
172+
)[0]
173+
: payload.dataKey ??
174+
Object.keys(payload).find((key) => payload[key] === payload.value && key !== 'value'),
175+
payload: payload.payload
176+
})
177+
);
178178
} else {
179179
typeof onDataPointClick === 'function' &&
180-
onDataPointClick(
181-
enrichEventWithDetails(
182-
{},
183-
{
184-
value: eventOrIndex.value,
185-
dataKey: eventOrIndex.dataKey,
186-
dataIndex: eventOrIndex.index,
187-
payload: eventOrIndex.payload
188-
}
189-
)
190-
);
180+
onDataPointClick(
181+
enrichEventWithDetails(
182+
{},
183+
{
184+
value: eventOrIndex.value,
185+
dataKey: eventOrIndex.dataKey,
186+
dataIndex: eventOrIndex.index,
187+
payload: eventOrIndex.payload
188+
}
189+
)
190+
);
191191
}
192192
},
193193
[onDataPointClick]
@@ -211,7 +211,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
211211
};
212212

213213
const Placeholder = useCallback(() => {
214-
return <ComposedChartPlaceholder layout={layout} measures={measures}/>;
214+
return <ComposedChartPlaceholder layout={layout} measures={measures} />;
215215
}, [layout, measures]);
216216
return (
217217
<ChartContainer
@@ -224,50 +224,55 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
224224
tooltip={tooltip}
225225
slot={slot}
226226
>
227-
<ComposedChartLib margin={marginChart} data={dataset} layout={layout}>
227+
<ComposedChartLib
228+
margin={marginChart}
229+
data={dataset}
230+
layout={layout}
231+
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
232+
>
228233
<CartesianGrid
229234
vertical={chartConfig.gridVertical}
230235
horizontal={chartConfig.gridHorizontal}
231236
stroke={chartConfig.gridStroke}
232237
/>
233238
{chartConfig.xAxisVisible &&
234-
dimensions.map((dimension, index) => {
235-
let AxisComponent;
236-
const axisProps: any = {
237-
dataKey: dimension.accessor,
238-
interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
239-
tickLine: index < 1,
240-
axisLine: index < 1,
241-
allowDuplicatedCategory: index === 0,
242-
scale: dimensions.length === 1 ? 'band' : 'auto'
243-
};
239+
dimensions.map((dimension, index) => {
240+
let AxisComponent;
241+
const axisProps: any = {
242+
dataKey: dimension.accessor,
243+
interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
244+
tickLine: index < 1,
245+
axisLine: index < 1,
246+
allowDuplicatedCategory: index === 0,
247+
scale: dimensions.length === 1 ? 'band' : 'auto'
248+
};
244249

245-
if (layout === 'vertical') {
246-
axisProps.type = 'category';
247-
axisProps.tick = <YAxisTicks config={dimension}/>;
248-
axisProps.yAxisId = index;
249-
axisProps.width = yAxisWidth;
250-
AxisComponent = YAxis;
251-
} else {
252-
axisProps.dataKey = dimension.accessor;
253-
axisProps.tick = <XAxisTicks config={dimension}/>;
254-
axisProps.xAxisId = index;
255-
axisProps.height = xAxisHeights[index];
256-
AxisComponent = XAxis;
257-
}
250+
if (layout === 'vertical') {
251+
axisProps.type = 'category';
252+
axisProps.tick = <YAxisTicks config={dimension} />;
253+
axisProps.yAxisId = index;
254+
axisProps.width = yAxisWidth;
255+
AxisComponent = YAxis;
256+
} else {
257+
axisProps.dataKey = dimension.accessor;
258+
axisProps.tick = <XAxisTicks config={dimension} />;
259+
axisProps.xAxisId = index;
260+
axisProps.height = xAxisHeights[index];
261+
AxisComponent = XAxis;
262+
}
258263

259-
return <AxisComponent key={dimension.accessor} {...axisProps} />;
260-
})}
264+
return <AxisComponent key={dimension.accessor} {...axisProps} />;
265+
})}
261266
{layout === 'horizontal' && (
262267
<YAxis
263268
{...measureAxisProps}
264269
yAxisId="primary"
265270
width={yAxisWidth}
266-
tick={<YAxisTicks config={primaryMeasure}/>}
271+
tick={<YAxisTicks config={primaryMeasure} />}
267272
/>
268273
)}
269274
{layout === 'vertical' && (
270-
<XAxis {...measureAxisProps} xAxisId="primary" type="number" tick={<XAxisTicks config={primaryMeasure}/>}/>
275+
<XAxis {...measureAxisProps} xAxisId="primary" type="number" tick={<XAxisTicks config={primaryMeasure} />} />
271276
)}
272277

273278
{chartConfig.secondYAxis?.dataKey && layout === 'horizontal' && (
@@ -301,7 +306,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
301306
xAxisId={layout === 'vertical' ? 'primary' : undefined}
302307
/>
303308
)}
304-
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle}/>
309+
<Tooltip cursor={tooltipFillOpacity} formatter={tooltipValueFormatter} contentStyle={tooltipContentStyle} />
305310
{!noLegend && (
306311
<Legend
307312
verticalAlign={chartConfig.legendPosition}
@@ -360,7 +365,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
360365
name={element.label ?? element.accessor}
361366
label={
362367
isBigDataSet ? null : (
363-
<ChartDataLabel config={element} chartType={element.type} position={labelPosition}/>
368+
<ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
364369
)
365370
}
366371
stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,12 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
170170
tooltip={tooltip}
171171
slot={slot}
172172
>
173-
<LineChartLib margin={marginChart} data={dataset} onClick={onDataPointClickInternal}>
173+
<LineChartLib
174+
margin={marginChart}
175+
data={dataset}
176+
onClick={onDataPointClickInternal}
177+
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
178+
>
174179
<CartesianGrid
175180
vertical={chartConfig.gridVertical}
176181
horizontal={chartConfig.gridHorizontal}

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from
77
import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip } from 'recharts';
88
import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
99
import { IChartMeasure } from '../../interfaces/IChartMeasure';
10-
import { IPolarChartConfig } from "../../interfaces/IPolarChartConfig";
10+
import { IPolarChartConfig } from '../../interfaces/IPolarChartConfig';
1111
import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
1212
import { defaultFormatter } from '../../internal/defaults';
1313
import { tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
@@ -102,7 +102,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
102102
);
103103

104104
const label = useMemo(() => {
105-
if(measure.hideDataLabel) return null;
105+
if (measure.hideDataLabel) return null;
106106
return {
107107
position: 'outside',
108108
content: measure.DataLabel,
@@ -143,7 +143,11 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
143143
tooltip={tooltip}
144144
slot={slot}
145145
>
146-
<PieChartLib onClick={onDataPointClickInternal} margin={chartConfig.margin}>
146+
<PieChartLib
147+
onClick={onDataPointClickInternal}
148+
margin={chartConfig.margin}
149+
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
150+
>
147151
<Pie
148152
innerRadius={chartConfig.innerRadius}
149153
outerRadius={chartConfig.outerRadius}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
22
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
33
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
4+
import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
45
import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
56
import { PieChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/PieChartPlaceholder';
67
import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
@@ -19,7 +20,6 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
1920
import { IChartDimension } from '../../interfaces/IChartDimension';
2021
import { IChartMeasure } from '../../interfaces/IChartMeasure';
2122
import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
22-
import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
2323
import { defaultFormatter } from '../../internal/defaults';
2424
import { tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
2525

@@ -141,7 +141,11 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
141141
tooltip={tooltip}
142142
slot={slot}
143143
>
144-
<RadarChartLib data={dataset} margin={chartConfig.margin}>
144+
<RadarChartLib
145+
data={dataset}
146+
margin={chartConfig.margin}
147+
className={typeof onDataPointClick === 'function' ? 'has-click-handler' : undefined}
148+
>
145149
<PolarGrid gridType={chartConfig.polarGridType} />
146150
<PolarAngleAxis
147151
dataKey={primaryDimensionAccessor}

‎packages/charts/src/internal/ChartContainer.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
12
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
23
import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
34
import { Loader } from '@ui5/webcomponents-react/lib/Loader';
@@ -18,8 +19,21 @@ const loaderStyles: CSSProperties = {
1819
right: 0
1920
};
2021

22+
const chartContainerStyles = {
23+
'@global': {
24+
'.has-click-handler': {
25+
'& .recharts-pie-sector, .recharts-bar-rectangles, .recharts-active-dot, .recharts-area-dot': {
26+
cursor: 'pointer'
27+
}
28+
}
29+
}
30+
};
31+
32+
const useStyles = createComponentStyles(chartContainerStyles, { name: 'ChartContainer' });
33+
2134
const ChartContainer: FC<ContainerProps> = forwardRef((props: ContainerProps, ref: Ref<any>) => {
2235
const { Placeholder, loading = false, dataset, style, className, tooltip, slot, children } = props;
36+
useStyles();
2337

2438
const internalStyles: CSSProperties = useMemo(() => {
2539
return {

0 commit comments

Comments
 (0)