Skip to content

Commit 45096da

Browse files
kuzmadomkuzmadom
authored
feat: tooltip value format settings (#64)
1 parent 4fd8078 commit 45096da

32 files changed

+136
-105
lines changed

‎src/__stories__/__data__/area/playground.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ function prepareData(): ChartData {
2222
stacking: 'normal',
2323
dataLabels: {
2424
enabled: true,
25-
numberFormat: {
25+
format: {
26+
type: 'number',
2627
precision: 2,
2728
},
2829
},

‎src/__stories__/__data__/bar-x/playground.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function prepareData(): ChartData {
2121
borderRadius: 8,
2222
dataLabels: {
2323
enabled: true,
24-
numberFormat: {precision: 1},
24+
format: {type: 'number', precision: 1},
2525
},
2626
},
2727
],

‎src/__stories__/__data__/pie/continuous-legend.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function prepareData(): ChartData {
2222
type: 'pie',
2323
data,
2424
dataLabels: {
25-
numberFormat: {unit: 'auto'},
25+
format: {type: 'number', unit: 'auto'},
2626
},
2727
},
2828
],
@@ -37,6 +37,12 @@ function prepareData(): ChartData {
3737
stops,
3838
},
3939
},
40+
tooltip: {
41+
valueFormat: {
42+
type: 'number',
43+
unit: 'k',
44+
},
45+
},
4046
};
4147
}
4248

‎src/__stories__/__data__/radar/basic.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ function prepareData(): ChartData {
3333
title: {
3434
text: 'Heroes of Might and Magic 3 Units (dragons)',
3535
},
36+
tooltip: {
37+
valueFormat: {type: 'number'},
38+
},
3639
};
3740
}
3841

‎src/__stories__/__data__/treemap/playground.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const prepareData = (): ChartData => {
88
name: 'Example',
99
dataLabels: {
1010
enabled: true,
11-
numberFormat: {precision: 1},
11+
format: {type: 'number', precision: 1},
1212
},
1313
layoutAlgorithm: 'binary',
1414
levels: [

‎src/__stories__/__data__/waterfall/playground.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ function prepareData(): ChartData {
2424
{total: true, x: 12},
2525
],
2626
name: 'Profit',
27-
dataLabels: {enabled: true, numberFormat: {precision: 2}},
27+
dataLabels: {enabled: true, format: {type: 'number', precision: 2}},
2828
},
2929
],
3030
},

‎src/components/Tooltip/ChartTooltipContent.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ export interface ChartTooltipContentProps {
1111
xAxis?: ChartXAxis;
1212
yAxis?: ChartYAxis;
1313
renderer?: ChartTooltip['renderer'];
14+
valueFormat?: ChartTooltip['valueFormat'];
1415
}
1516

1617
export const ChartTooltipContent = (props: ChartTooltipContentProps) => {
17-
const {hovered, xAxis, yAxis, renderer} = props;
18+
const {hovered, xAxis, yAxis, renderer, valueFormat} = props;
1819

1920
if (!hovered) {
2021
return null;
@@ -23,7 +24,7 @@ export const ChartTooltipContent = (props: ChartTooltipContentProps) => {
2324
const customTooltip = renderer?.({hovered, xAxis, yAxis});
2425

2526
return isNil(customTooltip) ? (
26-
<DefaultContent hovered={hovered} xAxis={xAxis} yAxis={yAxis} />
27+
<DefaultContent hovered={hovered} xAxis={xAxis} yAxis={yAxis} valueFormat={valueFormat} />
2728
) : (
2829
customTooltip
2930
);

‎src/components/Tooltip/DefaultContent.tsx‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,19 @@ import type {
1414
TooltipDataChunkRadar,
1515
TooltipDataChunkSankey,
1616
TreemapSeriesData,
17+
ValueFormat,
1718
WaterfallSeriesData,
1819
} from '../../types';
1920
import {block, getDataCategoryValue, getWaterfallPointSubtotal} from '../../utils';
21+
import {getFormattedValue} from '../../utils/chart/format';
2022

2123
const b = block('tooltip');
2224

2325
type Props = {
2426
hovered: TooltipDataChunk[];
2527
xAxis?: ChartXAxis;
2628
yAxis?: ChartYAxis;
29+
valueFormat?: ValueFormat;
2730
};
2831

2932
const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
@@ -75,7 +78,7 @@ const getMeasureValue = (data: TooltipDataChunk[], xAxis?: ChartXAxis, yAxis?: C
7578
return getXRowData(data[0]?.data, xAxis);
7679
};
7780

78-
export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
81+
export const DefaultContent = ({hovered, xAxis, yAxis, valueFormat}: Props) => {
7982
const measureValue = getMeasureValue(hovered, xAxis, yAxis);
8083

8184
return (
@@ -91,9 +94,13 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
9194
case 'line':
9295
case 'area':
9396
case 'bar-x': {
97+
const formattedValue = getFormattedValue({
98+
value: getYRowData(data, yAxis),
99+
format: valueFormat,
100+
});
94101
const value = (
95102
<React.Fragment>
96-
{series.name}: {getYRowData(data, yAxis)}
103+
{series.name}: {formattedValue}
97104
</React.Fragment>
98105
);
99106
return (
@@ -105,10 +112,18 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
105112
}
106113
case 'waterfall': {
107114
const isTotal = get(data, 'total', false);
108-
const subTotal = getWaterfallPointSubtotal(
115+
const subTotalValue = getWaterfallPointSubtotal(
109116
data as WaterfallSeriesData,
110117
series as PreparedWaterfallSeries,
111118
);
119+
const subTotal = getFormattedValue({
120+
value: subTotalValue,
121+
format: valueFormat,
122+
});
123+
const formattedValue = getFormattedValue({
124+
value: getYRowData(data, yAxis),
125+
format: valueFormat,
126+
});
112127

113128
return (
114129
<div key={`${id}_${get(data, 'x')}`}>
@@ -119,7 +134,7 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
119134
</div>
120135
<div className={b('content-row')}>
121136
<span>{series.name}&nbsp;</span>
122-
<span>{getYRowData(data, yAxis)}</span>
137+
<span>{formattedValue}</span>
123138
</div>
124139
</React.Fragment>
125140
)}
@@ -130,9 +145,13 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
130145
);
131146
}
132147
case 'bar-y': {
148+
const formattedValue = getFormattedValue({
149+
value: getXRowData(data, xAxis),
150+
format: valueFormat,
151+
});
133152
const value = (
134153
<React.Fragment>
135-
{series.name}: {getXRowData(data, xAxis)}
154+
{series.name}: {formattedValue}
136155
</React.Fragment>
137156
);
138157
return (
@@ -145,18 +164,26 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
145164
case 'pie':
146165
case 'treemap': {
147166
const seriesData = data as PreparedPieSeries | TreemapSeriesData;
167+
const formattedValue = getFormattedValue({
168+
value: seriesData.value,
169+
format: valueFormat,
170+
});
148171

149172
return (
150173
<div key={id} className={b('content-row')}>
151174
<div className={b('color')} style={{backgroundColor: color}} />
152175
<span>{seriesData.name || seriesData.id}&nbsp;</span>
153-
<span>{seriesData.value}</span>
176+
<span>{formattedValue}</span>
154177
</div>
155178
);
156179
}
157180
case 'sankey': {
158181
const {target, data: source} = seriesItem as TooltipDataChunkSankey;
159182
const value = source.links.find((d) => d.name === target?.name)?.value;
183+
const formattedValue = getFormattedValue({
184+
value,
185+
format: valueFormat,
186+
});
160187

161188
return (
162189
<div key={id} className={b('content-row')}>
@@ -165,19 +192,23 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
165192
style={{backgroundColor: source.color}}
166193
/>
167194
<div style={{display: 'flex', gap: 8, verticalAlign: 'center'}}>
168-
{source.name} <span>→</span> {target?.name}: {value}
195+
{source.name} <span>→</span> {target?.name}: {formattedValue}
169196
</div>
170197
</div>
171198
);
172199
}
173200
case 'radar': {
174201
const radarSeries = series as PreparedRadarSeries;
175202
const seriesData = data as RadarSeriesData;
203+
const formattedValue = getFormattedValue({
204+
value: seriesData.value,
205+
format: valueFormat,
206+
});
176207

177208
const value = (
178209
<React.Fragment>
179210
<span>{radarSeries.name || radarSeries.id}&nbsp;</span>
180-
<span>{seriesData.value}</span>
211+
<span>{formattedValue}</span>
181212
</React.Fragment>
182213
);
183214

‎src/components/Tooltip/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const Tooltip = (props: TooltipProps) => {
6161
xAxis={xAxis}
6262
yAxis={yAxis as ChartYAxis}
6363
renderer={tooltip.renderer}
64+
valueFormat={tooltip.valueFormat}
6465
/>
6566
</div>
6667
</Popup>

‎src/hooks/useSeries/prepare-area.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,7 @@ export function prepareArea(args: PrepareAreaSeriesArgs) {
8484
padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
8585
allowOverlap: get(series, 'dataLabels.allowOverlap', false),
8686
html: get(series, 'dataLabels.html', false),
87-
numberFormat: series.dataLabels?.numberFormat,
88-
dateFormat: series.dataLabels?.dateFormat,
87+
format: series.dataLabels?.format,
8988
},
9089
marker: prepareMarker(series, seriesOptions),
9190
cursor: get(series, 'cursor', null),

0 commit comments

Comments
 (0)