@gravity-ui/charts 1.8.0 → 1.10.0

package/dist/cjs/constants/index.js

@@ -1,74 +1,8 @@
 export * from './defaults';
 export * from './misc';
-export const SeriesType = {
-    Area: 'area',
-    BarX: 'bar-x',
-    BarY: 'bar-y',
-    Line: 'line',
-    Pie: 'pie',
-    Scatter: 'scatter',
-    Treemap: 'treemap',
-    Waterfall: 'waterfall',
-    Sankey: 'sankey',
-    Radar: 'radar',
-};
-export var DashStyle;
-(function (DashStyle) {
-    DashStyle["Dash"] = "Dash";
-    DashStyle["DashDot"] = "DashDot";
-    DashStyle["Dot"] = "Dot";
-    DashStyle["LongDash"] = "LongDash";
-    DashStyle["LongDashDot"] = "LongDashDot";
-    DashStyle["LongDashDotDot"] = "LongDashDotDot";
-    DashStyle["ShortDash"] = "ShortDash";
-    DashStyle["ShortDashDot"] = "ShortDashDot";
-    DashStyle["ShortDashDotDot"] = "ShortDashDotDot";
-    DashStyle["ShortDot"] = "ShortDot";
-    DashStyle["Solid"] = "Solid";
-})(DashStyle || (DashStyle = {}));
-export var SymbolType;
-(function (SymbolType) {
-    SymbolType["Circle"] = "circle";
-    SymbolType["Diamond"] = "diamond";
-    SymbolType["Square"] = "square";
-    SymbolType["Triangle"] = "triangle";
-    SymbolType["TriangleDown"] = "triangle-down";
-})(SymbolType || (SymbolType = {}));
-export var LineCap;
-(function (LineCap) {
-    LineCap["Butt"] = "butt";
-    LineCap["Round"] = "round";
-    LineCap["Square"] = "square";
-    LineCap["None"] = "none";
-})(LineCap || (LineCap = {}));
-export var LayoutAlgorithm;
-(function (LayoutAlgorithm) {
-    LayoutAlgorithm["Binary"] = "binary";
-    LayoutAlgorithm["Dice"] = "dice";
-    LayoutAlgorithm["Slice"] = "slice";
-    LayoutAlgorithm["SliceDice"] = "slice-dice";
-    LayoutAlgorithm["Squarify"] = "squarify";
-})(LayoutAlgorithm || (LayoutAlgorithm = {}));
-export const DEFAULT_PALETTE = [
-    '#4DA2F1',
-    '#FF3D64',
-    '#8AD554',
-    '#FFC636',
-    '#FFB9DD',
-    '#84D1EE',
-    '#FF91A1',
-    '#54A520',
-    '#DB9100',
-    '#BA74B3',
-    '#1F68A9',
-    '#ED65A9',
-    '#0FA08D',
-    '#FF7E00',
-    '#E8B0A4',
-    '#52A6C5',
-    '#BE2443',
-    '#70C1AF',
-    '#FFB46C',
-    '#DCA3D7',
-];
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
+export * from './chart-types';
+export * from './line-styles';
+export * from './symbol-types';
+export * from './layout-algorithms';
+export * from './palette';
+export * from './typography';

package/dist/cjs/constants/layout-algorithms.d.ts

@@ -0,0 +1,7 @@
+export declare enum LayoutAlgorithm {
+    Binary = "binary",
+    Dice = "dice",
+    Slice = "slice",
+    SliceDice = "slice-dice",
+    Squarify = "squarify"
+}

package/dist/cjs/constants/layout-algorithms.js

@@ -0,0 +1,8 @@
+export var LayoutAlgorithm;
+(function (LayoutAlgorithm) {
+    LayoutAlgorithm["Binary"] = "binary";
+    LayoutAlgorithm["Dice"] = "dice";
+    LayoutAlgorithm["Slice"] = "slice";
+    LayoutAlgorithm["SliceDice"] = "slice-dice";
+    LayoutAlgorithm["Squarify"] = "squarify";
+})(LayoutAlgorithm || (LayoutAlgorithm = {}));

package/dist/cjs/constants/line-styles.d.ts

@@ -0,0 +1,20 @@
+export declare const DASH_STYLE: {
+    readonly Dash: "Dash";
+    readonly DashDot: "DashDot";
+    readonly Dot: "Dot";
+    readonly LongDash: "LongDash";
+    readonly LongDashDot: "LongDashDot";
+    readonly LongDashDotDot: "LongDashDotDot";
+    readonly ShortDash: "ShortDash";
+    readonly ShortDashDot: "ShortDashDot";
+    readonly ShortDashDotDot: "ShortDashDotDot";
+    readonly ShortDot: "ShortDot";
+    readonly Solid: "Solid";
+};
+export type DashStyle = keyof typeof DASH_STYLE;
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square",
+    None = "none"
+}

package/dist/cjs/constants/line-styles.js

@@ -0,0 +1,20 @@
+export const DASH_STYLE = {
+    Dash: 'Dash',
+    DashDot: 'DashDot',
+    Dot: 'Dot',
+    LongDash: 'LongDash',
+    LongDashDot: 'LongDashDot',
+    LongDashDotDot: 'LongDashDotDot',
+    ShortDash: 'ShortDash',
+    ShortDashDot: 'ShortDashDot',
+    ShortDashDotDot: 'ShortDashDotDot',
+    ShortDot: 'ShortDot',
+    Solid: 'Solid',
+};
+export var LineCap;
+(function (LineCap) {
+    LineCap["Butt"] = "butt";
+    LineCap["Round"] = "round";
+    LineCap["Square"] = "square";
+    LineCap["None"] = "none";
+})(LineCap || (LineCap = {}));

package/dist/cjs/constants/palette.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_PALETTE: string[];

package/dist/cjs/constants/palette.js

@@ -0,0 +1,22 @@
+export const DEFAULT_PALETTE = [
+    '#4DA2F1',
+    '#FF3D64',
+    '#8AD554',
+    '#FFC636',
+    '#FFB9DD',
+    '#84D1EE',
+    '#FF91A1',
+    '#54A520',
+    '#DB9100',
+    '#BA74B3',
+    '#1F68A9',
+    '#ED65A9',
+    '#0FA08D',
+    '#FF7E00',
+    '#E8B0A4',
+    '#52A6C5',
+    '#BE2443',
+    '#70C1AF',
+    '#FFB46C',
+    '#DCA3D7',
+];

package/dist/cjs/constants/symbol-types.d.ts

@@ -0,0 +1,7 @@
+export declare enum SymbolType {
+    Circle = "circle",
+    Diamond = "diamond",
+    Square = "square",
+    Triangle = "triangle",
+    TriangleDown = "triangle-down"
+}

package/dist/cjs/constants/symbol-types.js

@@ -0,0 +1,8 @@
+export var SymbolType;
+(function (SymbolType) {
+    SymbolType["Circle"] = "circle";
+    SymbolType["Diamond"] = "diamond";
+    SymbolType["Square"] = "square";
+    SymbolType["Triangle"] = "triangle";
+    SymbolType["TriangleDown"] = "triangle-down";
+})(SymbolType || (SymbolType = {}));

package/dist/cjs/constants/typography.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";

package/dist/cjs/constants/typography.js

@@ -0,0 +1 @@
+export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';

package/dist/cjs/hooks/hooks-utils/index.d.ts

@@ -0,0 +1 @@
+export * from './zoom';

package/dist/cjs/hooks/hooks-utils/index.js

@@ -0,0 +1 @@
+export * from './zoom';

package/dist/cjs/hooks/hooks-utils/zoom.d.ts

@@ -0,0 +1,8 @@
+import type { ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
+import type { ZoomState } from '../useZoom/types';
+export declare function getZoomedSeriesData(args: {
+    seriesData: ChartSeries[];
+    zoomState: Partial<ZoomState>;
+    xAxis?: ChartXAxis;
+    yAxises?: ChartYAxis[];
+}): ChartSeries[];

package/dist/cjs/hooks/hooks-utils/zoom.js

@@ -0,0 +1,81 @@
+// eslint-disable-next-line complexity
+function isValueInRange(args) {
+    const { axis, max, min, value } = args;
+    if (value === undefined) {
+        return false;
+    }
+    const axisType = (axis === null || axis === void 0 ? void 0 : axis.type) || 'linear';
+    switch (axisType) {
+        case 'datetime':
+        case 'linear':
+        case 'logarithmic': {
+            const numValue = typeof value === 'string' ? Number(value) : value;
+            const numMin = typeof min === 'string' ? Number(min) : min;
+            const numMax = typeof max === 'string' ? Number(max) : max;
+            if (Number.isNaN(numValue) || Number.isNaN(numMin) || Number.isNaN(numMax)) {
+                return false;
+            }
+            return numValue >= numMin && numValue <= numMax;
+        }
+        case 'category': {
+            const categories = (axis === null || axis === void 0 ? void 0 : axis.categories) || [];
+            if (typeof value === 'string' && typeof min === 'number' && typeof max === 'number') {
+                const valueIndex = categories.indexOf(value);
+                if (min === -1 || max === -1 || valueIndex === -1) {
+                    return false;
+                }
+                return valueIndex >= Math.min(min, max) && valueIndex <= Math.max(min, max);
+            }
+            if (typeof value === 'number' && typeof min === 'number' && typeof max === 'number') {
+                if (min === -1 || max === -1) {
+                    return false;
+                }
+                return value >= Math.min(min, max) && value <= Math.max(min, max);
+            }
+            return false;
+        }
+        default: {
+            return false;
+        }
+    }
+}
+export function getZoomedSeriesData(args) {
+    const { seriesData, xAxis, yAxises, zoomState } = args;
+    if (Object.keys(zoomState).length < 0) {
+        return seriesData;
+    }
+    return seriesData.map((seriesItem) => {
+        const filteredData = seriesItem.data.reduce((acc, point) => {
+            let inXRange = true;
+            let inYRange = true;
+            if (zoomState.x) {
+                const [xMin, xMax] = zoomState.x;
+                const x = 'x' in point ? point.x : undefined;
+                inXRange = isValueInRange({
+                    axis: xAxis,
+                    value: x,
+                    min: xMin,
+                    max: xMax,
+                });
+            }
+            if (zoomState.y) {
+                const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'
+                    ? seriesItem.yAxis
+                    : 0;
+                const [yMin, yMax] = zoomState.y[yAxisIndex];
+                const y = 'y' in point ? point.y : undefined;
+                inYRange = isValueInRange({
+                    axis: yAxises === null || yAxises === void 0 ? void 0 : yAxises[yAxisIndex],
+                    value: y,
+                    min: yMin,
+                    max: yMax,
+                });
+            }
+            if (inXRange && inYRange) {
+                acc.push(point);
+            }
+            return acc;
+        }, []);
+        return Object.assign(Object.assign({}, seriesItem), { data: filteredData });
+    });
+}

package/dist/cjs/hooks/index.d.ts

@@ -9,3 +9,4 @@ export * from './useShapes';
 export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
+export * from './useCrosshair';

package/dist/cjs/hooks/index.js

@@ -9,3 +9,4 @@ export * from './useShapes';
 export * from './useTooltip';
 export * from './useSplit';
 export * from './useSplit/types';
+export * from './useCrosshair';

package/dist/cjs/hooks/useAxisScales/index.d.ts

@@ -8,16 +8,18 @@ type Args = {
     boundsWidth: number;
     boundsHeight: number;
     series: PreparedSeries[];
-    xAxis: PreparedAxis;
+    xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     split: PreparedSplit;
+    hasZoomX?: boolean;
+    hasZoomY?: boolean;
 };
 type ReturnValue = {
     xScale?: ChartScale;
     yScale?: ChartScale[];
 };
 export declare function createYScale(axis: PreparedAxis, series: PreparedSeries[], boundsHeight: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
-export declare function createXScale(axis: PreparedAxis | ChartAxis, series: (PreparedSeries | ChartSeries)[], boundsWidth: number): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+export declare function createXScale(axis: PreparedAxis | ChartAxis, series: (PreparedSeries | ChartSeries)[], boundsWidth: number, hasZoomX?: boolean): ScaleBand<string> | ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
 /**
  * Uses to create scales for axis related series
  */

package/dist/cjs/hooks/useAxisScales/index.js

@@ -86,7 +86,7 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
-export function createXScale(axis, series, boundsWidth) {
+export function createXScale(axis, series, boundsWidth, hasZoomX) {
     const xMin = get(axis, 'min');
     const xMax = getDefaultMaxXAxisValue(series);
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
@@ -104,7 +104,11 @@ export function createXScale(axis, series, boundsWidth) {
                 const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
                 const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([xMinValue, xMaxValue]).range(xRange).nice();
+                const scale = scaleFn().domain([xMinValue, xMaxValue]).range(xRange);
+                if (!hasZoomX) {
+                    scale.nice();
+                }
+                return scale;
             }
             break;
         }
@@ -126,13 +130,21 @@ export function createXScale(axis, series, boundsWidth) {
         case 'datetime': {
             if (xTimestamps) {
                 const [xMin, xMax] = extent(xTimestamps);
-                return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+                const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
+                if (!hasZoomX) {
+                    scale.nice();
+                }
+                return scale;
             }
             else {
                 const domain = getDomainDataXBySeries(series);
                 if (isNumericalArrayData(domain)) {
                     const [xMin, xMax] = extent(domain);
-                    return scaleUtc().domain([xMin, xMax]).range(xRange).nice();
+                    const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
+                    if (!hasZoomX) {
+                        scale.nice();
+                    }
+                    return scale;
                 }
             }
             break;
@@ -141,13 +153,13 @@ export function createXScale(axis, series, boundsWidth) {
     throw new Error('Failed to create xScale');
 }
 const createScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX } = args;
     let visibleSeries = getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;
     return {
-        xScale: createXScale(xAxis, visibleSeries, boundsWidth),
+        xScale: xAxis ? createXScale(xAxis, visibleSeries, boundsWidth, hasZoomX) : undefined,
         yScale: yAxis.map((axis, index) => {
             const axisSeries = series.filter((s) => {
                 const seriesAxisIndex = get(s, 'yAxis', 0);
@@ -163,7 +175,7 @@ const createScales = (args) => {
  * Uses to create scales for axis related series
  */
 export const useAxisScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split } = args;
+    const { boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY } = args;
     return React.useMemo(() => {
         let xScale;
         let yScale;
@@ -176,8 +188,10 @@ export const useAxisScales = (args) => {
                 xAxis,
                 yAxis,
                 split,
+                hasZoomX,
+                hasZoomY,
             }));
         }
         return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split]);
+    }, [boundsWidth, boundsHeight, series, xAxis, yAxis, split, hasZoomX, hasZoomY]);
 };

package/dist/cjs/hooks/useBrush/index.d.ts

@@ -0,0 +1,3 @@
+import type { UseBrushProps } from './types';
+import './styles.css';
+export declare function useBrush(props: UseBrushProps): void;

package/dist/cjs/hooks/useBrush/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { brush, brushX, brushY, select } from 'd3';
+import { block } from '../../utils';
+import './styles.css';
+const b = block('brush');
+export function useBrush(props) {
+    const { areas, brushOptions, node, type, onBrushStart, onBrush, onBrushEnd } = props;
+    React.useEffect(() => {
+        if (!node || !areas.length) {
+            return () => { };
+        }
+        const brushes = [];
+        const brushGroupSelections = [];
+        const nodeSelection = select(node);
+        areas.forEach((area) => {
+            let brushFn;
+            switch (type) {
+                case 'x': {
+                    brushFn = brushX;
+                    break;
+                }
+                case 'y': {
+                    brushFn = brushY;
+                    break;
+                }
+                case 'xy':
+                default: {
+                    brushFn = brush;
+                    break;
+                }
+            }
+            const brushInstance = brushFn()
+                .extent(area.extent)
+                .on('start', function () {
+                onBrushStart === null || onBrushStart === void 0 ? void 0 : onBrushStart.call(this, brushInstance);
+            })
+                .on('brush', function (event) {
+                onBrush === null || onBrush === void 0 ? void 0 : onBrush.call(this, brushInstance, event.selection);
+            })
+                .on('end', function (event) {
+                onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd.call(this, brushInstance, event.selection);
+            });
+            brushes.push(brushInstance);
+            const brushGroupSelection = nodeSelection
+                .append('g')
+                .attr('class', b())
+                .on('pointerdown', function () {
+                this.setAttribute('data-gc-brush-pressed', 'true');
+            })
+                .on('pointerup', function () {
+                this.removeAttribute('data-gc-brush-pressed');
+            });
+            brushGroupSelection.call(brushInstance);
+            if (brushOptions) {
+                brushGroupSelection
+                    .selectAll('.selection')
+                    .attr('fill-opacity', brushOptions.style.fillOpacity);
+            }
+            brushGroupSelections.push(brushGroupSelection);
+        });
+        return () => {
+            brushes.forEach((brushInstance) => {
+                brushInstance.on('start', null).on('brush', null).on('end', null);
+            });
+            brushGroupSelections.forEach((selection) => {
+                selection === null || selection === void 0 ? void 0 : selection.remove();
+            });
+        };
+    }, [areas, brushOptions, node, type, onBrushStart, onBrush, onBrushEnd]);
+}

package/dist/cjs/hooks/useBrush/styles.css

@@ -0,0 +1,10 @@
+.gcharts-brush {
+  --gcharts-brush-color: rgba(51, 92, 173, 0.25);
+}
+.gcharts-brush:not([data-gc-brush-pressed=true]) .overlay {
+  cursor: default;
+}
+.gcharts-brush .selection {
+  fill: var(--gcharts-brush-color);
+  stroke: none;
+}

package/dist/cjs/hooks/useBrush/types.d.ts

@@ -0,0 +1,24 @@
+import type { BrushBehavior } from 'd3';
+import type { PreparedZoom } from '../useChartOptions/types';
+type BrushType = PreparedZoom['type'];
+type BrushSelection = [number, number] | [[number, number], [number, number]];
+export interface BrushArea {
+    /**
+     * Array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner
+     * and [x1, y1] is the bottom-right corner.
+     *
+     * The brush extent determines the size of the invisible overlay and also constrains the brush selection;
+     * the brush selection cannot go outside the brush extent.
+     */
+    extent: [[number, number], [number, number]];
+}
+export interface UseBrushProps {
+    areas: BrushArea[];
+    node: SVGGElement | null;
+    type?: BrushType;
+    brushOptions?: PreparedZoom['brush'];
+    onBrushStart?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>) => void;
+    onBrush?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection) => void;
+    onBrushEnd?: (this: SVGGElement, brushInstance: BrushBehavior<unknown>, selection: BrushSelection | null) => void;
+}
+export {};

package/dist/cjs/hooks/useBrush/types.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/hooks/useChartDimensions/index.d.ts

@@ -5,9 +5,9 @@ type Args = {
     width: number;
     height: number;
     margin: ChartMargin;
-    preparedLegend: PreparedLegend;
-    preparedXAxis: PreparedAxis;
-    preparedYAxis: PreparedAxis[];
+    preparedLegend: PreparedLegend | null;
+    preparedXAxis: PreparedAxis | null;
+    preparedYAxis: PreparedAxis[] | null;
     preparedSeries: PreparedSeries[];
 };
 export declare const useChartDimensions: (args: Args) => {

package/dist/cjs/hooks/useChartDimensions/index.js

@@ -5,10 +5,10 @@ export { getBoundsWidth } from './utils';
 const getBottomOffset = (args) => {
     const { hasAxisRelatedSeries, preparedLegend, preparedXAxis } = args;
     let result = 0;
-    if (preparedLegend.enabled) {
+    if (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) {
         result += preparedLegend.height + preparedLegend.margin;
     }
-    if (!preparedXAxis.visible) {
+    if (!(preparedXAxis === null || preparedXAxis === void 0 ? void 0 : preparedXAxis.visible)) {
         return result;
     }
     if (hasAxisRelatedSeries) {

package/dist/cjs/hooks/useChartDimensions/utils.d.ts

@@ -2,9 +2,9 @@ import type { PreparedAxis, PreparedChart } from '../../hooks';
 export declare const getBoundsWidth: (args: {
     chartWidth: number;
     chartMargin: PreparedChart["margin"];
-    preparedYAxis: PreparedAxis[];
+    preparedYAxis: PreparedAxis[] | null;
 }) => number;
 export declare function getYAxisWidth(axis: PreparedAxis | undefined): number;
 export declare function getWidthOccupiedByYAxis(args: {
-    preparedAxis: PreparedAxis[];
+    preparedAxis: PreparedAxis[] | null;
 }): number;

package/dist/cjs/hooks/useChartOptions/chart.d.ts

@@ -1,6 +1,7 @@
-import type { ChartData } from '../../types';
+import type { ChartData, ChartSeries } from '../../types';
 import type { PreparedChart, PreparedTitle } from './types';
 export declare const getPreparedChart: (args: {
     chart: ChartData["chart"];
+    seriesData: ChartSeries[];
     preparedTitle?: PreparedTitle;
 }) => PreparedChart;