Skip to content

feat: tooltip value format settings #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kuzmadom merged 1 commit into from
May 12, 2025
Merged

feat: tooltip value format settings #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/__stories__/__data__/area/playground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ function prepareData(): ChartData {
stacking: 'normal',
dataLabels: {
enabled: true,
numberFormat: {
format: {
type: 'number',
precision: 2,
},
},
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/__data__/bar-x/playground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function prepareData(): ChartData {
borderRadius: 8,
dataLabels: {
enabled: true,
numberFormat: {precision: 1},
format: {type: 'number', precision: 1},
},
},
],
Expand Down
8 changes: 7 additions & 1 deletion src/__stories__/__data__/pie/continuous-legend.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function prepareData(): ChartData {
type: 'pie',
data,
dataLabels: {
numberFormat: {unit: 'auto'},
format: {type: 'number', unit: 'auto'},
},
},
],
Expand All @@ -37,6 +37,12 @@ function prepareData(): ChartData {
stops,
},
},
tooltip: {
valueFormat: {
type: 'number',
unit: 'k',
},
},
};
}

Expand Down
3 changes: 3 additions & 0 deletions src/__stories__/__data__/radar/basic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ function prepareData(): ChartData {
title: {
text: 'Heroes of Might and Magic 3 Units (dragons)',
},
tooltip: {
valueFormat: {type: 'number'},
},
};
}

Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/__data__/treemap/playground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const prepareData = (): ChartData => {
name: 'Example',
dataLabels: {
enabled: true,
numberFormat: {precision: 1},
format: {type: 'number', precision: 1},
},
layoutAlgorithm: 'binary',
levels: [
Expand Down
2 changes: 1 addition & 1 deletion src/__stories__/__data__/waterfall/playground.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function prepareData(): ChartData {
{total: true, x: 12},
],
name: 'Profit',
dataLabels: {enabled: true, numberFormat: {precision: 2}},
dataLabels: {enabled: true, format: {type: 'number', precision: 2}},
},
],
},
Expand Down
5 changes: 3 additions & 2 deletions src/components/Tooltip/ChartTooltipContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ export interface ChartTooltipContentProps {
xAxis?: ChartXAxis;
yAxis?: ChartYAxis;
renderer?: ChartTooltip['renderer'];
valueFormat?: ChartTooltip['valueFormat'];
}

export const ChartTooltipContent = (props: ChartTooltipContentProps) => {
const {hovered, xAxis, yAxis, renderer} = props;
const {hovered, xAxis, yAxis, renderer, valueFormat} = props;

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

return isNil(customTooltip) ? (
<DefaultContent hovered={hovered} xAxis={xAxis} yAxis={yAxis} />
<DefaultContent hovered={hovered} xAxis={xAxis} yAxis={yAxis} valueFormat={valueFormat} />
) : (
customTooltip
);
Expand Down
47 changes: 39 additions & 8 deletions src/components/Tooltip/DefaultContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,19 @@ import type {
TooltipDataChunkRadar,
TooltipDataChunkSankey,
TreemapSeriesData,
ValueFormat,
WaterfallSeriesData,
} from '../../types';
import {block, getDataCategoryValue, getWaterfallPointSubtotal} from '../../utils';
import {getFormattedValue} from '../../utils/chart/format';

const b = block('tooltip');

type Props = {
hovered: TooltipDataChunk[];
xAxis?: ChartXAxis;
yAxis?: ChartYAxis;
valueFormat?: ValueFormat;
};

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

export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
export const DefaultContent = ({hovered, xAxis, yAxis, valueFormat}: Props) => {
const measureValue = getMeasureValue(hovered, xAxis, yAxis);

return (
Expand All @@ -91,9 +94,13 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
case 'line':
case 'area':
case 'bar-x': {
const formattedValue = getFormattedValue({
value: getYRowData(data, yAxis),
format: valueFormat,
});
const value = (
<React.Fragment>
{series.name}: {getYRowData(data, yAxis)}
{series.name}: {formattedValue}
</React.Fragment>
);
return (
Expand All @@ -105,10 +112,18 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
}
case 'waterfall': {
const isTotal = get(data, 'total', false);
const subTotal = getWaterfallPointSubtotal(
const subTotalValue = getWaterfallPointSubtotal(
data as WaterfallSeriesData,
series as PreparedWaterfallSeries,
);
const subTotal = getFormattedValue({
value: subTotalValue,
format: valueFormat,
});
const formattedValue = getFormattedValue({
value: getYRowData(data, yAxis),
format: valueFormat,
});

return (
<div key={`${id}_${get(data, 'x')}`}>
Expand All @@ -119,7 +134,7 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
</div>
<div className={b('content-row')}>
<span>{series.name}&nbsp;</span>
<span>{getYRowData(data, yAxis)}</span>
<span>{formattedValue}</span>
</div>
</React.Fragment>
)}
Expand All @@ -130,9 +145,13 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
);
}
case 'bar-y': {
const formattedValue = getFormattedValue({
value: getXRowData(data, xAxis),
format: valueFormat,
});
const value = (
<React.Fragment>
{series.name}: {getXRowData(data, xAxis)}
{series.name}: {formattedValue}
</React.Fragment>
);
return (
Expand All @@ -145,18 +164,26 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
case 'pie':
case 'treemap': {
const seriesData = data as PreparedPieSeries | TreemapSeriesData;
const formattedValue = getFormattedValue({
value: seriesData.value,
format: valueFormat,
});

return (
<div key={id} className={b('content-row')}>
<div className={b('color')} style={{backgroundColor: color}} />
<span>{seriesData.name || seriesData.id}&nbsp;</span>
<span>{seriesData.value}</span>
<span>{formattedValue}</span>
</div>
);
}
case 'sankey': {
const {target, data: source} = seriesItem as TooltipDataChunkSankey;
const value = source.links.find((d) => d.name === target?.name)?.value;
const formattedValue = getFormattedValue({
value,
format: valueFormat,
});

return (
<div key={id} className={b('content-row')}>
Expand All @@ -165,19 +192,23 @@ export const DefaultContent = ({hovered, xAxis, yAxis}: Props) => {
style={{backgroundColor: source.color}}
/>
<div style={{display: 'flex', gap: 8, verticalAlign: 'center'}}>
{source.name} <span>→</span> {target?.name}: {value}
{source.name} <span>→</span> {target?.name}: {formattedValue}
</div>
</div>
);
}
case 'radar': {
const radarSeries = series as PreparedRadarSeries;
const seriesData = data as RadarSeriesData;
const formattedValue = getFormattedValue({
value: seriesData.value,
format: valueFormat,
});

const value = (
<React.Fragment>
<span>{radarSeries.name || radarSeries.id}&nbsp;</span>
<span>{seriesData.value}</span>
<span>{formattedValue}</span>
</React.Fragment>
);

Expand Down
1 change: 1 addition & 0 deletions src/components/Tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const Tooltip = (props: TooltipProps) => {
xAxis={xAxis}
yAxis={yAxis as ChartYAxis}
renderer={tooltip.renderer}
valueFormat={tooltip.valueFormat}
/>
</div>
</Popup>
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-area.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,7 @@ export function prepareArea(args: PrepareAreaSeriesArgs) {
padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
allowOverlap: get(series, 'dataLabels.allowOverlap', false),
html: get(series, 'dataLabels.html', false),
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
},
marker: prepareMarker(series, seriesOptions),
cursor: get(series, 'cursor', null),
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-bar-x.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@ export function prepareBarXSeries(args: PrepareBarXSeriesArgs): PreparedSeries[]
allowOverlap: series.dataLabels?.allowOverlap || false,
padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
html: get(series, 'dataLabels.html', false),
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
},
cursor: get(series, 'cursor', null),
yAxis: get(series, 'yAxis', 0),
Expand Down
9 changes: 3 additions & 6 deletions src/hooks/useSeries/prepare-bar-y.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import get from 'lodash/get';

import type {BarYSeries, ChartSeriesOptions} from '../../types';
import {getLabelsSize, getUniqId} from '../../utils';
import {getFormattedDataLabel} from '../useShapes/data-labels';
import {getFormattedValue} from '../../utils/chart/format';

import {DEFAULT_DATALABELS_STYLE} from './constants';
import type {PreparedBarYSeries, PreparedLegend, PreparedSeries} from './types';
Expand All @@ -21,9 +21,7 @@ function prepareDataLabels(series: BarYSeries) {
const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, series.dataLabels?.style);
const html = get(series, 'dataLabels.html', false);
const labels = enabled
? series.data.map((d) =>
getFormattedDataLabel({value: d.x || d.label, ...series.dataLabels}),
)
? series.data.map((d) => getFormattedValue({value: d.x || d.label, ...series.dataLabels}))
: [];
const {maxHeight = 0, maxWidth = 0} = getLabelsSize({
labels,
Expand All @@ -39,8 +37,7 @@ function prepareDataLabels(series: BarYSeries) {
maxHeight,
maxWidth,
html,
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
};
}

Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-line.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,7 @@ export function prepareLineSeries(args: PrepareLineSeriesArgs) {
padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
allowOverlap: get(series, 'dataLabels.allowOverlap', false),
html: get(series, 'dataLabels.html', false),
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
},
marker: prepareMarker(series, seriesOptions),
dashStyle: dashStyle as DashStyle,
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-pie.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ export function preparePieSeries(args: PreparePieSeriesArgs) {
distance: get(series, 'dataLabels.distance', 25),
connectorCurve: get(series, 'dataLabels.connectorCurve', 'basic'),
html: get(series, 'dataLabels.html', false),
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
},
label: dataItem.label,
value: dataItem.value,
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-radar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,7 @@ export function prepareRadarSeries(args: PrepareRadarSeriesArgs) {
padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
allowOverlap: get(series, 'dataLabels.allowOverlap', false),
html: get(series, 'dataLabels.html', false),
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
},
cursor: get(series, 'cursor', null),
marker: prepareMarker(series, seriesOptions),
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-sankey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ export function prepareSankeySeries(args: PrepareSankeySeriesArgs) {
dataLabels: {
enabled: get(s, 'dataLabels.enabled', true),
style: Object.assign({}, DEFAULT_DATALABELS_STYLE, s.dataLabels?.style),
numberFormat: s.dataLabels?.numberFormat,
dateFormat: s.dataLabels?.dateFormat,
format: s.dataLabels?.format,
},
id,
type: s.type,
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-treemap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@ export function prepareTreemap(args: PrepareTreemapSeriesArgs) {
allowOverlap: get(s, 'dataLabels.allowOverlap', false),
html: get(s, 'dataLabels.html', false),
align: get(s, 'dataLabels.align', 'left'),
numberFormat: s.dataLabels?.numberFormat,
dateFormat: s.dataLabels?.dateFormat,
format: s.dataLabels?.format,
},
id,
type: s.type,
Expand Down
3 changes: 1 addition & 2 deletions src/hooks/useSeries/prepare-waterfall.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@ export function prepareWaterfallSeries(args: PrepareWaterfallSeriesArgs): Prepar
allowOverlap: series.dataLabels?.allowOverlap || false,
padding: get(series, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
html: get(series, 'dataLabels.html', false),
numberFormat: series.dataLabels?.numberFormat,
dateFormat: series.dataLabels?.dateFormat,
format: series.dataLabels?.format,
},
cursor: get(series, 'cursor', null),
};
Expand Down
Loading
Loading