@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.
Files changed (149) hide show
  1. package/dist/cjs/components/ChartInner/index.js +1 -0
  2. package/dist/cjs/components/ChartInner/useChartInnerProps.d.ts +1 -0
  3. package/dist/cjs/components/ChartInner/useChartInnerProps.js +12 -5
  4. package/dist/cjs/core/brush/index.d.ts +2 -0
  5. package/dist/cjs/core/brush/index.js +2 -0
  6. package/dist/cjs/{hooks/useBrush → core/brush}/types.d.ts +2 -2
  7. package/dist/{esm/hooks/useBrush → cjs/core/brush}/utils.d.ts +1 -1
  8. package/dist/cjs/core/chart/index.d.ts +1 -0
  9. package/dist/cjs/core/chart/index.js +1 -0
  10. package/dist/cjs/core/chart/types.d.ts +8 -0
  11. package/dist/cjs/core/index.d.ts +3 -0
  12. package/dist/cjs/core/index.js +3 -0
  13. package/dist/cjs/core/layout/chart-dimensions.d.ts +1 -1
  14. package/dist/cjs/core/range-slider/index.d.ts +2 -0
  15. package/dist/cjs/core/range-slider/index.js +2 -0
  16. package/dist/cjs/core/range-slider/types.d.ts +4 -0
  17. package/dist/cjs/{hooks/useRangeSlider → core/range-slider}/utils.d.ts +5 -5
  18. package/dist/cjs/{hooks/useRangeSlider → core/range-slider}/utils.js +1 -1
  19. package/dist/cjs/core/scales/x-scale.d.ts +2 -2
  20. package/dist/cjs/core/scales/y-scale.js +21 -0
  21. package/dist/cjs/core/series/prepare-legend.d.ts +1 -1
  22. package/dist/cjs/core/shapes/area/prepare-data.js +6 -1
  23. package/dist/cjs/core/shapes/area/renderer.js +8 -14
  24. package/dist/cjs/core/shapes/area/types.d.ts +6 -5
  25. package/dist/cjs/core/shapes/bar-x/renderer.js +6 -12
  26. package/dist/cjs/core/shapes/bar-y/renderer.js +6 -12
  27. package/dist/cjs/core/shapes/data-labels.d.ts +15 -0
  28. package/dist/cjs/core/shapes/data-labels.js +15 -0
  29. package/dist/cjs/core/shapes/funnel/renderer.js +6 -11
  30. package/dist/cjs/core/shapes/heatmap/prepare-data.js +1 -0
  31. package/dist/cjs/core/shapes/heatmap/renderer.js +6 -11
  32. package/dist/cjs/core/shapes/heatmap/types.d.ts +1 -0
  33. package/dist/cjs/core/shapes/line/prepare-data.js +9 -1
  34. package/dist/cjs/core/shapes/line/renderer.js +7 -13
  35. package/dist/cjs/core/shapes/line/types.d.ts +5 -4
  36. package/dist/cjs/core/shapes/radar/renderer.js +8 -12
  37. package/dist/cjs/core/shapes/sankey/renderer.js +6 -12
  38. package/dist/cjs/core/shapes/utils.d.ts +24 -0
  39. package/dist/cjs/core/shapes/utils.js +48 -0
  40. package/dist/cjs/core/shapes/waterfall/renderer.js +6 -12
  41. package/dist/cjs/core/shapes/x-range/renderer.js +7 -13
  42. package/dist/cjs/core/types/chart/base.d.ts +17 -3
  43. package/dist/cjs/core/types/chart/tooltip.d.ts +3 -3
  44. package/dist/cjs/core/types/formatter.d.ts +1 -40
  45. package/dist/cjs/core/utils/format.d.ts +2 -2
  46. package/dist/cjs/core/utils/get-closest-data.js +13 -8
  47. package/dist/cjs/core/zoom/index.d.ts +2 -0
  48. package/dist/cjs/core/zoom/index.js +2 -0
  49. package/dist/{esm/hooks/useZoom → cjs/core/zoom}/utils.d.ts +3 -3
  50. package/dist/{esm/hooks/useZoom → cjs/core/zoom}/utils.js +1 -1
  51. package/dist/cjs/core/zoom/zoom.d.ts +3 -3
  52. package/dist/cjs/hooks/index.d.ts +2 -2
  53. package/dist/cjs/hooks/index.js +2 -2
  54. package/dist/cjs/hooks/types.d.ts +2 -8
  55. package/dist/cjs/hooks/useBrush/index.d.ts +1 -1
  56. package/dist/cjs/hooks/useBrush/index.js +1 -1
  57. package/dist/cjs/hooks/useRangeSlider/index.js +3 -3
  58. package/dist/cjs/hooks/useRangeSlider/types.d.ts +5 -7
  59. package/dist/cjs/hooks/useShapes/index.d.ts +1 -1
  60. package/dist/cjs/hooks/useShapes/utils.d.ts +1 -1
  61. package/dist/cjs/hooks/useZoom/index.d.ts +1 -1
  62. package/dist/cjs/hooks/useZoom/index.js +1 -1
  63. package/dist/cjs/index.d.ts +1 -0
  64. package/dist/cjs/index.js +1 -0
  65. package/dist/cjs/libs/format-number/index.js +82 -14
  66. package/dist/cjs/libs/format-number/presets.d.ts +40 -0
  67. package/dist/cjs/libs/format-number/presets.js +66 -0
  68. package/dist/cjs/libs/format-number/types.d.ts +82 -3
  69. package/dist/esm/components/ChartInner/index.js +1 -0
  70. package/dist/esm/components/ChartInner/useChartInnerProps.d.ts +1 -0
  71. package/dist/esm/components/ChartInner/useChartInnerProps.js +12 -5
  72. package/dist/esm/core/brush/index.d.ts +2 -0
  73. package/dist/esm/core/brush/index.js +2 -0
  74. package/dist/esm/{hooks/useBrush → core/brush}/types.d.ts +2 -2
  75. package/dist/esm/core/brush/types.js +1 -0
  76. package/dist/{cjs/hooks/useBrush → esm/core/brush}/utils.d.ts +1 -1
  77. package/dist/esm/core/chart/index.d.ts +1 -0
  78. package/dist/esm/core/chart/index.js +1 -0
  79. package/dist/esm/core/chart/types.d.ts +8 -0
  80. package/dist/esm/core/chart/types.js +1 -0
  81. package/dist/esm/core/index.d.ts +3 -0
  82. package/dist/esm/core/index.js +3 -0
  83. package/dist/esm/core/layout/chart-dimensions.d.ts +1 -1
  84. package/dist/esm/core/range-slider/index.d.ts +2 -0
  85. package/dist/esm/core/range-slider/index.js +2 -0
  86. package/dist/esm/core/range-slider/types.d.ts +4 -0
  87. package/dist/esm/core/range-slider/types.js +1 -0
  88. package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.d.ts +5 -5
  89. package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.js +1 -1
  90. package/dist/esm/core/scales/x-scale.d.ts +2 -2
  91. package/dist/esm/core/scales/y-scale.js +21 -0
  92. package/dist/esm/core/series/prepare-legend.d.ts +1 -1
  93. package/dist/esm/core/shapes/area/prepare-data.js +6 -1
  94. package/dist/esm/core/shapes/area/renderer.js +8 -14
  95. package/dist/esm/core/shapes/area/types.d.ts +6 -5
  96. package/dist/esm/core/shapes/bar-x/renderer.js +6 -12
  97. package/dist/esm/core/shapes/bar-y/renderer.js +6 -12
  98. package/dist/esm/core/shapes/data-labels.d.ts +15 -0
  99. package/dist/esm/core/shapes/data-labels.js +15 -0
  100. package/dist/esm/core/shapes/funnel/renderer.js +6 -11
  101. package/dist/esm/core/shapes/heatmap/prepare-data.js +1 -0
  102. package/dist/esm/core/shapes/heatmap/renderer.js +6 -11
  103. package/dist/esm/core/shapes/heatmap/types.d.ts +1 -0
  104. package/dist/esm/core/shapes/line/prepare-data.js +9 -1
  105. package/dist/esm/core/shapes/line/renderer.js +7 -13
  106. package/dist/esm/core/shapes/line/types.d.ts +5 -4
  107. package/dist/esm/core/shapes/radar/renderer.js +8 -12
  108. package/dist/esm/core/shapes/sankey/renderer.js +6 -12
  109. package/dist/esm/core/shapes/utils.d.ts +24 -0
  110. package/dist/esm/core/shapes/utils.js +48 -0
  111. package/dist/esm/core/shapes/waterfall/renderer.js +6 -12
  112. package/dist/esm/core/shapes/x-range/renderer.js +7 -13
  113. package/dist/esm/core/types/chart/base.d.ts +17 -3
  114. package/dist/esm/core/types/chart/tooltip.d.ts +3 -3
  115. package/dist/esm/core/types/formatter.d.ts +1 -40
  116. package/dist/esm/core/utils/format.d.ts +2 -2
  117. package/dist/esm/core/utils/get-closest-data.js +13 -8
  118. package/dist/esm/core/zoom/index.d.ts +2 -0
  119. package/dist/esm/core/zoom/index.js +2 -0
  120. package/dist/esm/core/zoom/types.js +1 -0
  121. package/dist/{cjs/hooks/useZoom → esm/core/zoom}/utils.d.ts +3 -3
  122. package/dist/{cjs/hooks/useZoom → esm/core/zoom}/utils.js +1 -1
  123. package/dist/esm/core/zoom/zoom.d.ts +3 -3
  124. package/dist/esm/hooks/index.d.ts +2 -2
  125. package/dist/esm/hooks/index.js +2 -2
  126. package/dist/esm/hooks/types.d.ts +2 -8
  127. package/dist/esm/hooks/useBrush/index.d.ts +1 -1
  128. package/dist/esm/hooks/useBrush/index.js +1 -1
  129. package/dist/esm/hooks/useRangeSlider/index.js +3 -3
  130. package/dist/esm/hooks/useRangeSlider/types.d.ts +5 -7
  131. package/dist/esm/hooks/useShapes/index.d.ts +1 -1
  132. package/dist/esm/hooks/useShapes/utils.d.ts +1 -1
  133. package/dist/esm/hooks/useZoom/index.d.ts +1 -1
  134. package/dist/esm/hooks/useZoom/index.js +1 -1
  135. package/dist/esm/index.d.ts +1 -0
  136. package/dist/esm/index.js +1 -0
  137. package/dist/esm/libs/format-number/index.js +82 -14
  138. package/dist/esm/libs/format-number/presets.d.ts +40 -0
  139. package/dist/esm/libs/format-number/presets.js +66 -0
  140. package/dist/esm/libs/format-number/types.d.ts +82 -3
  141. package/package.json +1 -1
  142. /package/dist/cjs/{hooks/useBrush → core/brush}/types.js +0 -0
  143. /package/dist/cjs/{hooks/useBrush → core/brush}/utils.js +0 -0
  144. /package/dist/cjs/{hooks/useZoom → core/chart}/types.js +0 -0
  145. /package/dist/{esm/hooks/useBrush → cjs/core/range-slider}/types.js +0 -0
  146. /package/dist/cjs/{hooks/useZoom → core/zoom}/types.d.ts +0 -0
  147. /package/dist/{esm/hooks/useZoom → cjs/core/zoom}/types.js +0 -0
  148. /package/dist/esm/{hooks/useBrush → core/brush}/utils.js +0 -0
  149. /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
- svgElement
32
- .append('g')
33
- .selectAll()
34
- .data(preparedData.labels)
35
- .join('text')
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 = svgElement
32
- .selectAll('text')
33
- .data(dataLabels)
34
- .join('text')
35
- .html((d) => d.text)
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
- svgElement
52
- .selectAll(`text.${b('label')}`)
53
- .data(svgLabels)
54
- .join('text')
55
- .attr('class', b('label'))
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 { CustomFormat, ValueFormat } from './base';
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 | CustomFormat;
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 | CustomFormat;
170
+ headerFormat?: ValueFormat;
171
171
  /** Settings for totals block in tooltip */
172
172
  totals?: {
173
173
  /**
@@ -1,40 +1 @@
1
- export interface FormatOptions {
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 { CustomFormat, ValueFormat } from '../../types';
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 | CustomFormat;
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
- Array.prototype.push.apply(acc, d.points.map((p) => ({
90
- data: p.data,
91
- series: p.series,
92
- x: p.x,
93
- y0: p.y0,
94
- y1: p.y,
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 +1,3 @@
1
+ export * from './types';
2
+ export * from './utils';
1
3
  export * from './zoom';
@@ -1 +1,3 @@
1
+ export * from './types';
2
+ export * from './utils';
1
3
  export * from './zoom';
@@ -1,7 +1,7 @@
1
1
  import type { BrushSelection } from 'd3-brush';
2
- import type { ZoomType } from '../../core/constants';
3
- import type { ChartScale } from '../../core/scales/types';
4
- import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
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,4 +1,4 @@
1
- import { ZOOM_TYPE } from '../../core/constants';
1
+ import { ZOOM_TYPE } from '../constants';
2
2
  export function selectionToZoomBounds(args) {
3
3
  const { selection, xAxis, xScale, yAxes, yScales, zoomType } = args;
4
4
  const zoomState = {};
@@ -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 './useBrush/types';
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 './useZoom/types';
18
+ export * from '../core/zoom/types';
19
19
  export * from './types';
@@ -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 './useBrush/types';
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 './useZoom/types';
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, ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
2
+ import type { BaseTextStyle, ChartData, ChartTitle } from '../types';
3
3
  import type { HtmlItem } from '../types/chart-ui';
4
- export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
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,3 +1,3 @@
1
- import type { UseBrushProps } from './types';
1
+ import type { UseBrushProps } from '../../core/brush/types';
2
2
  import './styles.css';
3
3
  export declare function useBrush(props: UseBrushProps): void;
@@ -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
- import type { PreparedChart } from '../types';
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);
@@ -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';