@gravity-ui/charts 1.46.1 → 1.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ChartInner/index.js +1 -0
- package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts +1 -0
- package/dist/cjs/components/ChartInner/useChartInnerProps.js +12 -5
- package/dist/cjs/core/brush/index.d.ts +2 -0
- package/dist/cjs/core/brush/index.js +2 -0
- package/dist/cjs/{hooks/useBrush → core/brush}/types.d.ts +2 -2
- package/dist/{esm/hooks/useBrush → cjs/core/brush}/utils.d.ts +1 -1
- package/dist/cjs/core/chart/index.d.ts +1 -0
- package/dist/cjs/core/chart/index.js +1 -0
- package/dist/cjs/core/chart/types.d.ts +8 -0
- package/dist/cjs/core/index.d.ts +3 -0
- package/dist/cjs/core/index.js +3 -0
- package/dist/cjs/core/layout/chart-dimensions.d.ts +1 -1
- package/dist/cjs/core/range-slider/index.d.ts +2 -0
- package/dist/cjs/core/range-slider/index.js +2 -0
- package/dist/cjs/core/range-slider/types.d.ts +4 -0
- package/dist/cjs/{hooks/useRangeSlider → core/range-slider}/utils.d.ts +5 -5
- package/dist/cjs/{hooks/useRangeSlider → core/range-slider}/utils.js +1 -1
- package/dist/cjs/core/scales/x-scale.d.ts +2 -2
- package/dist/cjs/core/scales/y-scale.js +21 -0
- package/dist/cjs/core/series/prepare-legend.d.ts +1 -1
- package/dist/cjs/core/shapes/area/prepare-data.js +6 -1
- package/dist/cjs/core/shapes/area/renderer.js +8 -14
- package/dist/cjs/core/shapes/area/types.d.ts +6 -5
- package/dist/cjs/core/shapes/bar-x/renderer.js +6 -12
- package/dist/cjs/core/shapes/bar-y/renderer.js +6 -12
- package/dist/cjs/core/shapes/data-labels.d.ts +15 -0
- package/dist/cjs/core/shapes/data-labels.js +15 -0
- package/dist/cjs/core/shapes/funnel/renderer.js +6 -11
- package/dist/cjs/core/shapes/heatmap/prepare-data.js +1 -0
- package/dist/cjs/core/shapes/heatmap/renderer.js +6 -11
- package/dist/cjs/core/shapes/heatmap/types.d.ts +1 -0
- package/dist/cjs/core/shapes/line/prepare-data.js +9 -1
- package/dist/cjs/core/shapes/line/renderer.js +7 -13
- package/dist/cjs/core/shapes/line/types.d.ts +5 -4
- package/dist/cjs/core/shapes/radar/renderer.js +8 -12
- package/dist/cjs/core/shapes/sankey/renderer.js +6 -12
- package/dist/cjs/core/shapes/utils.d.ts +24 -0
- package/dist/cjs/core/shapes/utils.js +48 -0
- package/dist/cjs/core/shapes/waterfall/renderer.js +6 -12
- package/dist/cjs/core/shapes/x-range/renderer.js +7 -13
- package/dist/cjs/core/types/chart/base.d.ts +17 -3
- package/dist/cjs/core/types/chart/tooltip.d.ts +3 -3
- package/dist/cjs/core/types/formatter.d.ts +1 -40
- package/dist/cjs/core/utils/format.d.ts +2 -2
- package/dist/cjs/core/utils/get-closest-data.js +13 -8
- package/dist/cjs/core/zoom/index.d.ts +2 -0
- package/dist/cjs/core/zoom/index.js +2 -0
- package/dist/{esm/hooks/useZoom → cjs/core/zoom}/utils.d.ts +3 -3
- package/dist/{esm/hooks/useZoom → cjs/core/zoom}/utils.js +1 -1
- package/dist/cjs/core/zoom/zoom.d.ts +3 -3
- package/dist/cjs/hooks/index.d.ts +2 -2
- package/dist/cjs/hooks/index.js +2 -2
- package/dist/cjs/hooks/types.d.ts +2 -8
- package/dist/cjs/hooks/useBrush/index.d.ts +1 -1
- package/dist/cjs/hooks/useBrush/index.js +1 -1
- package/dist/cjs/hooks/useRangeSlider/index.js +3 -3
- package/dist/cjs/hooks/useRangeSlider/types.d.ts +5 -7
- package/dist/cjs/hooks/useShapes/index.d.ts +1 -1
- package/dist/cjs/hooks/useShapes/utils.d.ts +1 -1
- package/dist/cjs/hooks/useZoom/index.d.ts +1 -1
- package/dist/cjs/hooks/useZoom/index.js +1 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/libs/format-number/index.js +82 -14
- package/dist/cjs/libs/format-number/presets.d.ts +40 -0
- package/dist/cjs/libs/format-number/presets.js +66 -0
- package/dist/cjs/libs/format-number/types.d.ts +82 -3
- package/dist/esm/components/ChartInner/index.js +1 -0
- package/dist/esm/components/ChartInner/useChartInnerProps.d.ts +1 -0
- package/dist/esm/components/ChartInner/useChartInnerProps.js +12 -5
- package/dist/esm/core/brush/index.d.ts +2 -0
- package/dist/esm/core/brush/index.js +2 -0
- package/dist/esm/{hooks/useBrush → core/brush}/types.d.ts +2 -2
- package/dist/esm/core/brush/types.js +1 -0
- package/dist/{cjs/hooks/useBrush → esm/core/brush}/utils.d.ts +1 -1
- package/dist/esm/core/chart/index.d.ts +1 -0
- package/dist/esm/core/chart/index.js +1 -0
- package/dist/esm/core/chart/types.d.ts +8 -0
- package/dist/esm/core/chart/types.js +1 -0
- package/dist/esm/core/index.d.ts +3 -0
- package/dist/esm/core/index.js +3 -0
- package/dist/esm/core/layout/chart-dimensions.d.ts +1 -1
- package/dist/esm/core/range-slider/index.d.ts +2 -0
- package/dist/esm/core/range-slider/index.js +2 -0
- package/dist/esm/core/range-slider/types.d.ts +4 -0
- package/dist/esm/core/range-slider/types.js +1 -0
- package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.d.ts +5 -5
- package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.js +1 -1
- package/dist/esm/core/scales/x-scale.d.ts +2 -2
- package/dist/esm/core/scales/y-scale.js +21 -0
- package/dist/esm/core/series/prepare-legend.d.ts +1 -1
- package/dist/esm/core/shapes/area/prepare-data.js +6 -1
- package/dist/esm/core/shapes/area/renderer.js +8 -14
- package/dist/esm/core/shapes/area/types.d.ts +6 -5
- package/dist/esm/core/shapes/bar-x/renderer.js +6 -12
- package/dist/esm/core/shapes/bar-y/renderer.js +6 -12
- package/dist/esm/core/shapes/data-labels.d.ts +15 -0
- package/dist/esm/core/shapes/data-labels.js +15 -0
- package/dist/esm/core/shapes/funnel/renderer.js +6 -11
- package/dist/esm/core/shapes/heatmap/prepare-data.js +1 -0
- package/dist/esm/core/shapes/heatmap/renderer.js +6 -11
- package/dist/esm/core/shapes/heatmap/types.d.ts +1 -0
- package/dist/esm/core/shapes/line/prepare-data.js +9 -1
- package/dist/esm/core/shapes/line/renderer.js +7 -13
- package/dist/esm/core/shapes/line/types.d.ts +5 -4
- package/dist/esm/core/shapes/radar/renderer.js +8 -12
- package/dist/esm/core/shapes/sankey/renderer.js +6 -12
- package/dist/esm/core/shapes/utils.d.ts +24 -0
- package/dist/esm/core/shapes/utils.js +48 -0
- package/dist/esm/core/shapes/waterfall/renderer.js +6 -12
- package/dist/esm/core/shapes/x-range/renderer.js +7 -13
- package/dist/esm/core/types/chart/base.d.ts +17 -3
- package/dist/esm/core/types/chart/tooltip.d.ts +3 -3
- package/dist/esm/core/types/formatter.d.ts +1 -40
- package/dist/esm/core/utils/format.d.ts +2 -2
- package/dist/esm/core/utils/get-closest-data.js +13 -8
- package/dist/esm/core/zoom/index.d.ts +2 -0
- package/dist/esm/core/zoom/index.js +2 -0
- package/dist/esm/core/zoom/types.js +1 -0
- package/dist/{cjs/hooks/useZoom → esm/core/zoom}/utils.d.ts +3 -3
- package/dist/{cjs/hooks/useZoom → esm/core/zoom}/utils.js +1 -1
- package/dist/esm/core/zoom/zoom.d.ts +3 -3
- package/dist/esm/hooks/index.d.ts +2 -2
- package/dist/esm/hooks/index.js +2 -2
- package/dist/esm/hooks/types.d.ts +2 -8
- package/dist/esm/hooks/useBrush/index.d.ts +1 -1
- package/dist/esm/hooks/useBrush/index.js +1 -1
- package/dist/esm/hooks/useRangeSlider/index.js +3 -3
- package/dist/esm/hooks/useRangeSlider/types.d.ts +5 -7
- package/dist/esm/hooks/useShapes/index.d.ts +1 -1
- package/dist/esm/hooks/useShapes/utils.d.ts +1 -1
- package/dist/esm/hooks/useZoom/index.d.ts +1 -1
- package/dist/esm/hooks/useZoom/index.js +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/libs/format-number/index.js +82 -14
- package/dist/esm/libs/format-number/presets.d.ts +40 -0
- package/dist/esm/libs/format-number/presets.js +66 -0
- package/dist/esm/libs/format-number/types.d.ts +82 -3
- package/package.json +1 -1
- /package/dist/cjs/{hooks/useBrush → core/brush}/types.js +0 -0
- /package/dist/cjs/{hooks/useBrush → core/brush}/utils.js +0 -0
- /package/dist/cjs/{hooks/useZoom → core/chart}/types.js +0 -0
- /package/dist/{esm/hooks/useBrush → cjs/core/range-slider}/types.js +0 -0
- /package/dist/cjs/{hooks/useZoom → core/zoom}/types.d.ts +0 -0
- /package/dist/{esm/hooks/useZoom → cjs/core/zoom}/types.js +0 -0
- /package/dist/esm/{hooks/useBrush → core/brush}/utils.js +0 -0
- /package/dist/esm/{hooks/useZoom → core/zoom}/types.d.ts +0 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { select } from 'd3-selection';
|
|
2
2
|
import { block } from '../../../utils';
|
|
3
|
+
import { renderDataLabels } from '../data-labels';
|
|
3
4
|
const b = block('sankey');
|
|
4
5
|
export function renderSankey(elements, preparedData, _seriesOptions, dispatcher) {
|
|
5
6
|
const svgElement = select(elements.plot);
|
|
@@ -28,18 +29,11 @@ export function renderSankey(elements, preparedData, _seriesOptions, dispatcher)
|
|
|
28
29
|
.attr('stroke', (d) => d.color)
|
|
29
30
|
.attr('stroke-width', (d) => d.strokeWidth);
|
|
30
31
|
// dataLabels
|
|
31
|
-
|
|
32
|
-
.append('g')
|
|
33
|
-
.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
.html((d) => d.text)
|
|
37
|
-
.attr('class', b('label'))
|
|
38
|
-
.attr('x', (d) => d.x)
|
|
39
|
-
.attr('y', (d) => d.y)
|
|
40
|
-
.attr('dy', '0.35em')
|
|
41
|
-
.attr('text-anchor', (d) => d.textAnchor)
|
|
42
|
-
.attr('fill', (d) => { var _a; return (_a = d.style.fontColor) !== null && _a !== void 0 ? _a : null; });
|
|
32
|
+
renderDataLabels({
|
|
33
|
+
container: svgElement.append('g'),
|
|
34
|
+
data: preparedData.labels,
|
|
35
|
+
className: b('label'),
|
|
36
|
+
}).attr('dy', '0.35em');
|
|
43
37
|
const eventName = `hover-shape.sankey`;
|
|
44
38
|
dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (_data) => {
|
|
45
39
|
// no-op hover handler
|
|
@@ -22,6 +22,30 @@ export declare function getYValue(args: {
|
|
|
22
22
|
yAxis: PreparedYAxis;
|
|
23
23
|
yScale: ChartScale;
|
|
24
24
|
}): number | null;
|
|
25
|
+
/**
|
|
26
|
+
* Hides out-of-range points from line/area path generators via `hiddenInLine`.
|
|
27
|
+
* Neighbors of in-range points are kept as anchors so the path retains its
|
|
28
|
+
* slope at the plot edges instead of stopping abruptly at the visible point.
|
|
29
|
+
*
|
|
30
|
+
* Pixel check alone is not enough: a degenerate/clamped scale domain (see the
|
|
31
|
+
* y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
|
|
32
|
+
* phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
|
|
33
|
+
* points whose raw value is outside the user's intended range.
|
|
34
|
+
*
|
|
35
|
+
* Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
|
|
36
|
+
* value and doesn't reflect where the point actually lands on the plot.
|
|
37
|
+
*/
|
|
38
|
+
export declare function markHiddenPointsOutOfYRange<P extends {
|
|
39
|
+
y: number | null;
|
|
40
|
+
hiddenInLine?: boolean;
|
|
41
|
+
}>(args: {
|
|
42
|
+
points: P[];
|
|
43
|
+
yScale: ChartScale;
|
|
44
|
+
yAxisTop: number;
|
|
45
|
+
axisMin?: number;
|
|
46
|
+
axisMax?: number;
|
|
47
|
+
getDataY?: (point: P) => unknown;
|
|
48
|
+
}): void;
|
|
25
49
|
export declare function shapeKey(d: unknown): string | number;
|
|
26
50
|
export declare function setActiveState<T extends {
|
|
27
51
|
active?: boolean;
|
|
@@ -53,6 +53,54 @@ export function getYValue(args) {
|
|
|
53
53
|
}
|
|
54
54
|
return point.y === null ? null : yLinearScale(point.y);
|
|
55
55
|
}
|
|
56
|
+
// Slack for d3 scale rounding (a `500` edge can come back as `499.9999`).
|
|
57
|
+
// Half a pixel matches the ±0.5 of a 1px centered stroke and far exceeds any
|
|
58
|
+
// plausible float error.
|
|
59
|
+
const Y_RANGE_PIXEL_TOLERANCE = 0.5;
|
|
60
|
+
/**
|
|
61
|
+
* Hides out-of-range points from line/area path generators via `hiddenInLine`.
|
|
62
|
+
* Neighbors of in-range points are kept as anchors so the path retains its
|
|
63
|
+
* slope at the plot edges instead of stopping abruptly at the visible point.
|
|
64
|
+
*
|
|
65
|
+
* Pixel check alone is not enough: a degenerate/clamped scale domain (see the
|
|
66
|
+
* y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
|
|
67
|
+
* phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
|
|
68
|
+
* points whose raw value is outside the user's intended range.
|
|
69
|
+
*
|
|
70
|
+
* Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
|
|
71
|
+
* value and doesn't reflect where the point actually lands on the plot.
|
|
72
|
+
*/
|
|
73
|
+
export function markHiddenPointsOutOfYRange(args) {
|
|
74
|
+
const { points, yScale, yAxisTop, axisMin, axisMax, getDataY } = args;
|
|
75
|
+
const [yRangeA, yRangeB] = yScale.range();
|
|
76
|
+
const yMinPx = yAxisTop + Math.min(yRangeA, yRangeB);
|
|
77
|
+
const yMaxPx = yAxisTop + Math.max(yRangeA, yRangeB);
|
|
78
|
+
const hasDataBoundsCheck = Boolean(getDataY) && (typeof axisMin === 'number' || typeof axisMax === 'number');
|
|
79
|
+
const isInRange = (point) => {
|
|
80
|
+
if (point.y === null) {
|
|
81
|
+
return false;
|
|
82
|
+
}
|
|
83
|
+
if (hasDataBoundsCheck) {
|
|
84
|
+
const dataY = getDataY === null || getDataY === void 0 ? void 0 : getDataY(point);
|
|
85
|
+
if (typeof dataY === 'number') {
|
|
86
|
+
if (typeof axisMin === 'number' && dataY < axisMin) {
|
|
87
|
+
return false;
|
|
88
|
+
}
|
|
89
|
+
if (typeof axisMax === 'number' && dataY > axisMax) {
|
|
90
|
+
return false;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
return (point.y >= yMinPx - Y_RANGE_PIXEL_TOLERANCE &&
|
|
95
|
+
point.y <= yMaxPx + Y_RANGE_PIXEL_TOLERANCE);
|
|
96
|
+
};
|
|
97
|
+
const inRange = points.map(isInRange);
|
|
98
|
+
for (let idx = 0; idx < points.length; idx++) {
|
|
99
|
+
if (!inRange[idx] && !inRange[idx - 1] && !inRange[idx + 1]) {
|
|
100
|
+
points[idx].hiddenInLine = true;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
56
104
|
export function shapeKey(d) {
|
|
57
105
|
return d.id || -1;
|
|
58
106
|
}
|
|
@@ -5,6 +5,7 @@ import get from 'lodash/get';
|
|
|
5
5
|
import { block } from '../../../utils';
|
|
6
6
|
import { DASH_STYLE } from '../../constants';
|
|
7
7
|
import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../utils';
|
|
8
|
+
import { renderDataLabels } from '../data-labels';
|
|
8
9
|
const b = block('waterfall');
|
|
9
10
|
export function renderWaterfall(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
|
|
10
11
|
const svgElement = select(elements.plot);
|
|
@@ -28,18 +29,11 @@ export function renderWaterfall(elements, preparedData, seriesOptions, allowOver
|
|
|
28
29
|
if (!allowOverlapDataLabels) {
|
|
29
30
|
dataLabels = filterOverlappingLabels(dataLabels);
|
|
30
31
|
}
|
|
31
|
-
const labelSelection =
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
.attr('class', b('label'))
|
|
37
|
-
.attr('x', (d) => d.x)
|
|
38
|
-
.attr('y', (d) => d.y)
|
|
39
|
-
.attr('text-anchor', (d) => d.textAnchor)
|
|
40
|
-
.style('font-size', (d) => d.style.fontSize)
|
|
41
|
-
.style('font-weight', (d) => d.style.fontWeight || null)
|
|
42
|
-
.style('fill', (d) => d.style.fontColor || null);
|
|
32
|
+
const labelSelection = renderDataLabels({
|
|
33
|
+
container: svgElement,
|
|
34
|
+
data: dataLabels,
|
|
35
|
+
className: b('label'),
|
|
36
|
+
});
|
|
43
37
|
// Add the connector line between bars
|
|
44
38
|
svgElement
|
|
45
39
|
.selectAll(connectorSelector)
|
|
@@ -4,6 +4,7 @@ import get from 'lodash/get';
|
|
|
4
4
|
import { block } from '../../../utils';
|
|
5
5
|
import { getRectPath } from '../../shapes/utils';
|
|
6
6
|
import { getLineDashArray } from '../../utils';
|
|
7
|
+
import { renderDataLabels } from '../data-labels';
|
|
7
8
|
const b = block('x-range');
|
|
8
9
|
export function renderXRange(elements, preparedData, seriesOptions, dispatcher) {
|
|
9
10
|
const svgElement = select(elements.plot);
|
|
@@ -48,20 +49,13 @@ export function renderXRange(elements, preparedData, seriesOptions, dispatcher)
|
|
|
48
49
|
.attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
|
|
49
50
|
.attr('pointer-events', 'none');
|
|
50
51
|
const svgLabels = preparedData.flatMap((d) => d.svgLabels);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
.attr('x', (d) => d.x)
|
|
57
|
-
.attr('y', (d) => d.y)
|
|
58
|
-
.attr('text-anchor', (d) => d.textAnchor)
|
|
52
|
+
renderDataLabels({
|
|
53
|
+
container: svgElement,
|
|
54
|
+
data: svgLabels,
|
|
55
|
+
className: b('label'),
|
|
56
|
+
})
|
|
59
57
|
.attr('dominant-baseline', 'central')
|
|
60
|
-
.attr('pointer-events', 'none')
|
|
61
|
-
.style('font-size', (d) => d.style.fontSize)
|
|
62
|
-
.style('font-weight', (d) => d.style.fontWeight || null)
|
|
63
|
-
.style('fill', (d) => d.style.fontColor || null)
|
|
64
|
-
.html((d) => d.text);
|
|
58
|
+
.attr('pointer-events', 'none');
|
|
65
59
|
const hoverOptions = get(seriesOptions, 'x-range.states.hover');
|
|
66
60
|
const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
|
|
67
61
|
function handleShapeHover(data) {
|
|
@@ -12,7 +12,6 @@ export type CustomFormat = {
|
|
|
12
12
|
type: 'custom';
|
|
13
13
|
formatter: (args: {
|
|
14
14
|
value: unknown;
|
|
15
|
-
formattedValue?: string;
|
|
16
15
|
}) => string;
|
|
17
16
|
};
|
|
18
17
|
/**
|
|
@@ -20,7 +19,10 @@ export type CustomFormat = {
|
|
|
20
19
|
*
|
|
21
20
|
* - `{ type: 'number' }` — numeric formatting with optional precision, units, percent display, etc.
|
|
22
21
|
* See [FormatNumberOptions](https://gravity-ui.github.io/charts/pages/api/Utilities/interfaces/FormatNumberOptions.html) for all available options.
|
|
23
|
-
* - `{ type: 'date' }` — date/time formatting
|
|
22
|
+
* - `{ type: 'date' }` — date/time formatting.
|
|
23
|
+
* - `{ type: 'custom' }` — user-defined formatter function. Receives the raw `value`
|
|
24
|
+
* and returns the display string. Use it when the built-in number/date formatters
|
|
25
|
+
* are not enough (e.g. bytes → KB/MB/GB, currency with locale, etc.).
|
|
24
26
|
* @example
|
|
25
27
|
* // Two decimal places, shown as percent
|
|
26
28
|
* { type: 'number', precision: 2, format: 'percent' }
|
|
@@ -30,8 +32,20 @@ export type CustomFormat = {
|
|
|
30
32
|
* @example
|
|
31
33
|
* // Date value (Unix ms) formatted as "17 October 2025"
|
|
32
34
|
* { type: 'date', format: 'DD MMMM YYYY' }
|
|
35
|
+
* @example
|
|
36
|
+
* // Bytes → human-readable size
|
|
37
|
+
* {
|
|
38
|
+
* type: 'custom',
|
|
39
|
+
* formatter: ({value}) => {
|
|
40
|
+
* const bytes = Number(value);
|
|
41
|
+
* if (!Number.isFinite(bytes)) return String(value);
|
|
42
|
+
* const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
43
|
+
* const i = Math.min(units.length - 1, Math.floor(Math.log(Math.abs(bytes) || 1) / Math.log(1024)));
|
|
44
|
+
* return `${(bytes / 1024 ** i).toFixed(1)} ${units[i]}`;
|
|
45
|
+
* },
|
|
46
|
+
* }
|
|
33
47
|
*/
|
|
34
|
-
export type ValueFormat = NumberFormat | DateFormat;
|
|
48
|
+
export type ValueFormat = NumberFormat | DateFormat | CustomFormat;
|
|
35
49
|
export interface BaseDataLabels {
|
|
36
50
|
/**
|
|
37
51
|
* Enable or disable the data labels
|
|
@@ -5,7 +5,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
|
|
|
5
5
|
import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
|
|
6
6
|
import type { BarXSeries, BarXSeriesData } from './bar-x';
|
|
7
7
|
import type { BarYSeries, BarYSeriesData } from './bar-y';
|
|
8
|
-
import type {
|
|
8
|
+
import type { ValueFormat } from './base';
|
|
9
9
|
import type { FunnelSeries, FunnelSeriesData } from './funnel';
|
|
10
10
|
import type { HeatmapSeries, HeatmapSeriesData } from './heatmap';
|
|
11
11
|
import type { LineSeries, LineSeriesData } from './line';
|
|
@@ -107,7 +107,7 @@ export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
|
|
|
107
107
|
xAxis?: ChartXAxis | null;
|
|
108
108
|
yAxis?: ChartYAxis;
|
|
109
109
|
/** Formatting settings for tooltip header row (includes computed default). */
|
|
110
|
-
headerFormat?: ValueFormat
|
|
110
|
+
headerFormat?: ValueFormat;
|
|
111
111
|
}
|
|
112
112
|
export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends ChartTooltipRendererArgs<T> {
|
|
113
113
|
}
|
|
@@ -167,7 +167,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
|
|
|
167
167
|
/** Formatting settings for tooltip value. */
|
|
168
168
|
valueFormat?: ValueFormat;
|
|
169
169
|
/** Formatting settings for tooltip header row. */
|
|
170
|
-
headerFormat?: ValueFormat
|
|
170
|
+
headerFormat?: ValueFormat;
|
|
171
171
|
/** Settings for totals block in tooltip */
|
|
172
172
|
totals?: {
|
|
173
173
|
/**
|
|
@@ -1,40 +1 @@
|
|
|
1
|
-
export
|
|
2
|
-
/**
|
|
3
|
-
* Number of decimal places to display.
|
|
4
|
-
* Use `'auto'` to determine precision automatically based on the value magnitude.
|
|
5
|
-
*/
|
|
6
|
-
precision?: number | 'auto';
|
|
7
|
-
/** When `true`, inserts a thousands separator (e.g. `1 500 000`). */
|
|
8
|
-
showRankDelimiter?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* BCP 47 language tag used for locale-aware formatting (e.g. `'en'`, `'ru'`).
|
|
11
|
-
* Defaults to the application locale when omitted.
|
|
12
|
-
*/
|
|
13
|
-
lang?: string;
|
|
14
|
-
/** Internal rendering hint for axis label layout. Not intended for public use. */
|
|
15
|
-
labelMode?: string;
|
|
16
|
-
}
|
|
17
|
-
export interface FormatNumberOptions extends FormatOptions {
|
|
18
|
-
/**
|
|
19
|
-
* Display mode for the numeric value.
|
|
20
|
-
* - `'number'` — plain number (default).
|
|
21
|
-
* - `'percent'` — value is multiplied by 100 and rendered with a `%` suffix.
|
|
22
|
-
*/
|
|
23
|
-
format?: 'number' | 'percent';
|
|
24
|
-
/** Factor applied to the value before formatting. For example, `multiplier: 1000` converts seconds to milliseconds. */
|
|
25
|
-
multiplier?: number;
|
|
26
|
-
/** String prepended to the formatted value (e.g. `'$'`). */
|
|
27
|
-
prefix?: string;
|
|
28
|
-
/** String appended to the formatted value (e.g. `' USD'`). */
|
|
29
|
-
postfix?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Compact unit suffix applied to large numbers.
|
|
32
|
-
* - `'auto'` — picks the most appropriate unit automatically (`k`, `m`, `b`, `t`).
|
|
33
|
-
* - `'k'` — thousands (÷ 1 000).
|
|
34
|
-
* - `'m'` — millions (÷ 1 000 000).
|
|
35
|
-
* - `'b'` — billions (÷ 1 000 000 000).
|
|
36
|
-
* - `'t'` — trillions (÷ 1 000 000 000 000).
|
|
37
|
-
* - `null` — no unit suffix.
|
|
38
|
-
*/
|
|
39
|
-
unit?: 'auto' | 'k' | 'm' | 'b' | 't' | null;
|
|
40
|
-
}
|
|
1
|
+
export type { FormatNumberOptions, FormatOptions, FormatUnitScale, FormatUnitScaleEntry, } from '../../libs/format-number/types';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { AxisDomain } from 'd3-axis';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ValueFormat } from '../../types';
|
|
3
3
|
import type { PreparedAxis } from '../axes/types';
|
|
4
4
|
export declare function getFormattedValue(args: {
|
|
5
5
|
value: string | number | undefined | null;
|
|
6
|
-
format?: ValueFormat
|
|
6
|
+
format?: ValueFormat;
|
|
7
7
|
}): string;
|
|
8
8
|
export declare function formatAxisTickLabel(args: {
|
|
9
9
|
axis: PreparedAxis;
|
|
@@ -68,7 +68,7 @@ export function getClosestPoints(args) {
|
|
|
68
68
|
case 'line': {
|
|
69
69
|
const linePoints = list.reduce((acc, d) => {
|
|
70
70
|
acc.push(...d.points.reduce((accPoints, p) => {
|
|
71
|
-
if (p.y !== null && p.x !== null) {
|
|
71
|
+
if (p.y !== null && p.x !== null && !p.hiddenInLine) {
|
|
72
72
|
accPoints.push({
|
|
73
73
|
data: p.data,
|
|
74
74
|
series: p.series,
|
|
@@ -86,13 +86,18 @@ export function getClosestPoints(args) {
|
|
|
86
86
|
}
|
|
87
87
|
case 'area': {
|
|
88
88
|
const areaPoints = list.reduce((acc, d) => {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
89
|
+
for (const p of d.points) {
|
|
90
|
+
if (p.y === null || p.hiddenInLine) {
|
|
91
|
+
continue;
|
|
92
|
+
}
|
|
93
|
+
acc.push({
|
|
94
|
+
data: p.data,
|
|
95
|
+
series: p.series,
|
|
96
|
+
x: p.x,
|
|
97
|
+
y0: p.y0,
|
|
98
|
+
y1: p.y,
|
|
99
|
+
});
|
|
100
|
+
}
|
|
96
101
|
return acc;
|
|
97
102
|
}, []);
|
|
98
103
|
closestPointsByXValue.push(...areaPoints);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { BrushSelection } from 'd3-brush';
|
|
2
|
-
import type {
|
|
3
|
-
import type {
|
|
4
|
-
import type {
|
|
2
|
+
import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
|
|
3
|
+
import type { ZoomType } from '../constants';
|
|
4
|
+
import type { ChartScale } from '../scales/types';
|
|
5
5
|
import type { ZoomState } from './types';
|
|
6
6
|
export declare function selectionToZoomBounds(args: {
|
|
7
7
|
selection: BrushSelection;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import type { RangeSliderState } from '../../hooks';
|
|
2
|
-
import type { ZoomState } from '../../hooks/useZoom/types';
|
|
3
|
-
import type { ChartXAxis, ChartYAxis } from '../../types';
|
|
4
1
|
import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
|
|
2
|
+
import type { RangeSliderState } from '../range-slider/types';
|
|
5
3
|
import type { PreparedSeries } from '../series';
|
|
4
|
+
import type { ChartXAxis, ChartYAxis } from '../types';
|
|
5
|
+
import type { ZoomState } from './types';
|
|
6
6
|
export declare function getZoomedSeriesData(args: {
|
|
7
7
|
seriesData: PreparedSeries[];
|
|
8
8
|
zoomState: Partial<ZoomState>;
|
|
@@ -3,7 +3,7 @@ export * from '../core/axes/types';
|
|
|
3
3
|
export * from './useAxisScales';
|
|
4
4
|
export * from '../core/scales/types';
|
|
5
5
|
export * from './useBrush';
|
|
6
|
-
export * from '
|
|
6
|
+
export * from '../core/brush/types';
|
|
7
7
|
export * from './useCrosshair';
|
|
8
8
|
export * from './usePrevious';
|
|
9
9
|
export * from './useRangeSlider';
|
|
@@ -15,5 +15,5 @@ export * from '../core/layout/split';
|
|
|
15
15
|
export * from '../core/layout/split-types';
|
|
16
16
|
export * from './useTooltip';
|
|
17
17
|
export * from './useZoom';
|
|
18
|
-
export * from '
|
|
18
|
+
export * from '../core/zoom/types';
|
|
19
19
|
export * from './types';
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export * from '../core/axes/types';
|
|
|
3
3
|
export * from './useAxisScales';
|
|
4
4
|
export * from '../core/scales/types';
|
|
5
5
|
export * from './useBrush';
|
|
6
|
-
export * from '
|
|
6
|
+
export * from '../core/brush/types';
|
|
7
7
|
export * from './useCrosshair';
|
|
8
8
|
export * from './usePrevious';
|
|
9
9
|
export * from './useRangeSlider';
|
|
@@ -15,5 +15,5 @@ export * from '../core/layout/split';
|
|
|
15
15
|
export * from '../core/layout/split-types';
|
|
16
16
|
export * from './useTooltip';
|
|
17
17
|
export * from './useZoom';
|
|
18
|
-
export * from '
|
|
18
|
+
export * from '../core/zoom/types';
|
|
19
19
|
export * from './types';
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import type { TextRowData } from '../components/types';
|
|
2
|
-
import type { BaseTextStyle,
|
|
2
|
+
import type { BaseTextStyle, ChartData, ChartTitle } from '../types';
|
|
3
3
|
import type { HtmlItem } from '../types/chart-ui';
|
|
4
|
-
export type
|
|
5
|
-
brush: ChartBrush;
|
|
6
|
-
}>;
|
|
7
|
-
export type PreparedChart = {
|
|
8
|
-
margin: ChartMargin;
|
|
9
|
-
zoom: PreparedZoom | null;
|
|
10
|
-
};
|
|
4
|
+
export type { PreparedChart, PreparedZoom } from '../core/chart/types';
|
|
11
5
|
export type PreparedTitle = Omit<ChartTitle, 'margin' | 'style'> & {
|
|
12
6
|
height: number;
|
|
13
7
|
margin: number;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { brush, brushX, brushY } from 'd3-brush';
|
|
3
3
|
import { pointer, select } from 'd3-selection';
|
|
4
|
+
import { getDefaultSelection, getNormalizedSelection, setBrushBorder, setBrushHandles, } from '../../core/brush/utils';
|
|
4
5
|
import { block } from '../../utils';
|
|
5
|
-
import { getDefaultSelection, getNormalizedSelection, setBrushBorder, setBrushHandles, } from './utils';
|
|
6
6
|
import './styles.css';
|
|
7
7
|
const b = block('brush');
|
|
8
8
|
export function useBrush(props) {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { pointer } from 'd3-selection';
|
|
3
3
|
import { isEqual } from 'lodash';
|
|
4
|
+
import { getNormalizedSelection, isOneDimensionalSelection } from '../../core/brush/utils';
|
|
4
5
|
import { SERIES_TYPE } from '../../core/constants';
|
|
6
|
+
import { getRangeSliderOffsetTop, getRangeSliderSelection } from '../../core/range-slider/utils';
|
|
5
7
|
import { isBandScale } from '../../core/utils';
|
|
8
|
+
import { selectionToZoomBounds } from '../../core/zoom/utils';
|
|
6
9
|
import { useAxis } from '../useAxis';
|
|
7
10
|
import { useAxisScales } from '../useAxisScales';
|
|
8
|
-
import { getNormalizedSelection, isOneDimensionalSelection } from '../useBrush/utils';
|
|
9
11
|
import { useShapes } from '../useShapes';
|
|
10
|
-
import { selectionToZoomBounds } from '../useZoom/utils';
|
|
11
|
-
import { getRangeSliderOffsetTop, getRangeSliderSelection } from './utils';
|
|
12
12
|
export const EMPTY_PREPARED_SPLIT = {
|
|
13
13
|
plots: [],
|
|
14
14
|
gap: 0,
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
+
import type { PreparedRangeSlider, PreparedXAxis, PreparedYAxis } from '../../core/axes/types';
|
|
2
|
+
import type { BrushSelection, UseBrushProps } from '../../core/brush/types';
|
|
3
|
+
import type { PreparedChart } from '../../core/chart/types';
|
|
4
|
+
import type { RangeSliderState } from '../../core/range-slider/types';
|
|
1
5
|
import type { ChartScale } from '../../core/scales/types';
|
|
2
6
|
import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../../core/series/types';
|
|
3
7
|
import type { ChartXAxis, ChartYAxis, LegendConfig } from '../../types';
|
|
4
|
-
|
|
5
|
-
import type { PreparedRangeSlider, PreparedXAxis, PreparedYAxis } from '../useAxis/types';
|
|
6
|
-
import type { BrushSelection, UseBrushProps } from '../useBrush/types';
|
|
7
|
-
export type RangeSliderState = {
|
|
8
|
-
max: number;
|
|
9
|
-
min: number;
|
|
10
|
-
};
|
|
8
|
+
export type { RangeSliderState };
|
|
11
9
|
export interface RangeSliderProps {
|
|
12
10
|
activeLegendItems: string[];
|
|
13
11
|
boundsOffsetLeft: number;
|
|
@@ -16,8 +16,8 @@ import type { PreparedSankeyData } from '../../core/shapes/sankey/types';
|
|
|
16
16
|
import type { PreparedScatterData } from '../../core/shapes/scatter/types';
|
|
17
17
|
import type { PreparedWaterfallData } from '../../core/shapes/waterfall/types';
|
|
18
18
|
import type { PreparedXRangeData } from '../../core/shapes/x-range/types';
|
|
19
|
+
import type { ZoomState } from '../../core/zoom/types';
|
|
19
20
|
import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
|
|
20
|
-
import type { ZoomState } from '../useZoom/types';
|
|
21
21
|
import './styles.css';
|
|
22
22
|
export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
|
|
23
23
|
export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import type { ZoomState } from '../../core/zoom/types';
|
|
1
2
|
import type { PreparedYAxis } from '../useAxis/types';
|
|
2
|
-
import type { ZoomState } from '../useZoom/types';
|
|
3
3
|
export * from '../../core/shapes/utils';
|
|
4
4
|
export declare function getSeriesClipPathId(args: {
|
|
5
5
|
clipPathId: string;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { PreparedSplit } from '../../core/layout/split-types';
|
|
2
2
|
import type { ChartScale } from '../../core/scales/types';
|
|
3
|
+
import type { ZoomState } from '../../core/zoom/types';
|
|
3
4
|
import type { PreparedZoom } from '../types';
|
|
4
5
|
import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
|
|
5
|
-
import type { ZoomState } from './types';
|
|
6
6
|
interface UseZoomProps {
|
|
7
7
|
node: SVGGElement | null;
|
|
8
8
|
onUpdate: (zoomState: Partial<ZoomState>) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { select } from 'd3-selection';
|
|
3
|
+
import { selectionToZoomBounds } from '../../core/zoom/utils';
|
|
3
4
|
import { useBrush } from '../useBrush';
|
|
4
|
-
import { selectionToZoomBounds } from './utils';
|
|
5
5
|
export function useZoom(props) {
|
|
6
6
|
const { node, onUpdate, plotContainerHeight, plotContainerWidth, preparedSplit, preparedZoom, rangeSliderDomain, xAxis, xScale, yAxis, yScale, } = props;
|
|
7
7
|
const isBrushDisabled = Boolean(!xAxis || !yAxis || !xScale || !yScale);
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { CustomShapeRenderer } from './utils';
|
|
2
2
|
export { getFormattedValue } from './core/utils';
|
|
3
3
|
export { getDefaultTooltipHeaderFormat } from './core/utils/tooltip';
|
|
4
|
+
export { FORMAT_UNITS_BITS, FORMAT_UNITS_BYTES, FORMAT_UNITS_NUMBERS, } from './libs/format-number/presets';
|
|
4
5
|
export * from './components';
|
|
5
6
|
export * from './types';
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { CustomShapeRenderer } from './utils';
|
|
2
2
|
export { getFormattedValue } from './core/utils';
|
|
3
3
|
export { getDefaultTooltipHeaderFormat } from './core/utils/tooltip';
|
|
4
|
+
export { FORMAT_UNITS_BITS, FORMAT_UNITS_BYTES, FORMAT_UNITS_NUMBERS, } from './libs/format-number/presets';
|
|
4
5
|
export * from './components';
|
|
5
6
|
export * from './types';
|