@gravity-ui/chartkit 3.1.3 → 3.2.0

package/build/plugins/d3/renderer/hooks/useTooltip/index.d.ts

@@ -0,0 +1,13 @@
+import type { TooltipHoveredData } from '../../../../../types/widget-data';
+import { PreparedTooltip } from '../useChartOptions/types';
+import type { PointerPosition, OnSeriesMouseMove, OnSeriesMouseLeave } from './types';
+type Args = {
+    tooltip: PreparedTooltip;
+};
+export declare const useTooltip: ({ tooltip }: Args) => {
+    hovered: TooltipHoveredData<any> | undefined;
+    pointerPosition: PointerPosition | undefined;
+    handleSeriesMouseMove: OnSeriesMouseMove | undefined;
+    handleSeriesMouseLeave: OnSeriesMouseLeave | undefined;
+};
+export {};

package/build/plugins/d3/renderer/hooks/useTooltip/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+export const useTooltip = ({ tooltip }) => {
+    const [hovered, setTooltipHoveredData] = React.useState();
+    const [pointerPosition, setPointerPosition] = React.useState();
+    const handleSeriesMouseMove = React.useCallback(({ pointerPosition: nextPointerPosition, hovered: nextHovered }) => {
+        setTooltipHoveredData(nextHovered);
+        setPointerPosition(nextPointerPosition);
+    }, []);
+    const handleSeriesMouseLeave = React.useCallback(() => {
+        setTooltipHoveredData(undefined);
+        setPointerPosition(undefined);
+    }, []);
+    return {
+        hovered,
+        pointerPosition,
+        handleSeriesMouseMove: tooltip.enabled ? handleSeriesMouseMove : undefined,
+        handleSeriesMouseLeave: tooltip.enabled ? handleSeriesMouseLeave : undefined,
+    };
+};

package/build/plugins/d3/renderer/hooks/useTooltip/types.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipHoveredData } from '../../../../../types/widget-data';
+export type PointerPosition = [number, number];
+export type OnSeriesMouseMove = (args: {
+    hovered: TooltipHoveredData;
+    pointerPosition?: PointerPosition;
+}) => void;
+export type OnSeriesMouseLeave = () => void;

package/build/plugins/d3/renderer/hooks/useTooltip/types.js

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

package/build/plugins/d3/renderer/utils/index.d.ts

@@ -0,0 +1,18 @@
+import type { AxisDomain } from 'd3';
+import type { ChartKitWidgetSeries, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels } from '../../../../types/widget-data';
+export declare const isAxisRelatedSeries: (series: ChartKitWidgetSeries) => boolean;
+export declare const getDomainDataXBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+export declare const getDomainDataYBySeries: (series: ChartKitWidgetSeries[]) => unknown[];
+export declare const getSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
+export declare const getVisibleSeriesNames: (series: ChartKitWidgetSeries[]) => string[];
+export declare const getOnlyVisibleSeries: <T extends ChartKitWidgetSeries<any>>(series: T[]) => T[];
+export declare const parseTransformStyle: (style: string | null) => {
+    x?: number | undefined;
+    y?: number | undefined;
+};
+export declare const formatAxisTickLabel: (args: {
+    axisType: ChartKitWidgetAxisType;
+    value: AxisDomain;
+    dateFormat?: ChartKitWidgetAxisLabels['dateFormat'];
+    numberFormat?: ChartKitWidgetAxisLabels['numberFormat'];
+}) => string;

package/build/plugins/d3/renderer/utils/index.js

@@ -0,0 +1,71 @@
+import { dateTime } from '@gravity-ui/date-utils';
+import { formatNumber } from '../../../shared';
+const CHARTS_WITHOUT_AXIS = ['pie'];
+// Сhecks whether the series should be drawn with axes
+export const isAxisRelatedSeries = (series) => {
+    return !CHARTS_WITHOUT_AXIS.includes(series.type);
+};
+export const getDomainDataXBySeries = (series) => {
+    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
+        acc.push(...s.data.map((d) => 'x' in d && d.x));
+        return acc;
+    }, []);
+};
+export const getDomainDataYBySeries = (series) => {
+    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
+        acc.push(...s.data.map((d) => 'y' in d && d.y));
+        return acc;
+    }, []);
+};
+// Uses to get all series names array (except `pie` charts)
+export const getSeriesNames = (series) => {
+    return series.reduce((acc, s) => {
+        if ('name' in s && typeof s.name === 'string') {
+            acc.push(s.name);
+        }
+        return acc;
+    }, []);
+};
+// Uses to get all visible series names array (except `pie` charts)
+export const getVisibleSeriesNames = (series) => {
+    return series.reduce((acc, s) => {
+        var _a;
+        const visible = (_a = s.visible) !== null && _a !== void 0 ? _a : true;
+        if ('name' in s && typeof s.name === 'string' && visible) {
+            acc.push(s.name);
+        }
+        return acc;
+    }, []);
+};
+export const getOnlyVisibleSeries = (series) => {
+    return series.filter((s) => s.visible);
+};
+export const parseTransformStyle = (style) => {
+    var _a;
+    if (!style) {
+        return {};
+    }
+    const stringifiedValue = ((_a = style.match(/\((.*?)\)/)) === null || _a === void 0 ? void 0 : _a[1]) || '';
+    const [xString, yString] = stringifiedValue.split(',');
+    const x = Number.isNaN(Number(xString)) ? undefined : Number(xString);
+    const y = Number.isNaN(Number(yString)) ? undefined : Number(yString);
+    return { x, y };
+};
+const defaultFormatNumberOptions = {
+    precision: 0,
+};
+export const formatAxisTickLabel = (args) => {
+    const { axisType, value, dateFormat = 'DD.MM.YY', numberFormat = defaultFormatNumberOptions, } = args;
+    switch (axisType) {
+        case 'category': {
+            return value;
+        }
+        case 'datetime': {
+            return dateTime({ input: value }).format(dateFormat);
+        }
+        case 'linear':
+        default: {
+            return formatNumber(value, numberFormat);
+        }
+    }
+};

package/build/plugins/d3/types.d.ts

@@ -0,0 +1,4 @@
+import type { ChartKitWidgetData } from '../../types/widget-data';
+export type D3WidgetData = {
+    data: ChartKitWidgetData;
+};

package/build/plugins/d3/types.js

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

package/build/types/widget-data/axis.d.ts

@@ -0,0 +1,22 @@
+import type { FormatNumberOptions } from '../../plugins/shared';
+import type { BaseTextStyle } from './base';
+export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear';
+export type ChartKitWidgetAxisLabels = {
+    /** Enable or disable the axis labels */
+    enabled?: boolean;
+    /** The pixel padding for axis labels */
+    padding?: number;
+    dateFormat?: string;
+    numberFormat?: FormatNumberOptions;
+    style?: Partial<BaseTextStyle>;
+};
+export type ChartKitWidgetAxis = {
+    categories?: string[];
+    timestamps?: number[];
+    type?: ChartKitWidgetAxisType;
+    /** The axis labels show the number or category for each tick */
+    labels?: ChartKitWidgetAxisLabels;
+    title?: {
+        text?: string;
+    };
+};

package/build/types/widget-data/axis.js

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

package/build/types/widget-data/base.d.ts

@@ -0,0 +1,15 @@
+export type BaseSeries = {
+    /** Initial visibility of the series */
+    visible?: boolean;
+};
+export type BaseSeriesData<T = any> = {
+    /**
+     * A reserved subspace to store options and values for customized functionality
+     *
+     * Here you can add additional data for your own event callbacks and formatter callbacks
+     */
+    custom?: T;
+};
+export type BaseTextStyle = {
+    fontSize: string;
+};

package/build/types/widget-data/base.js

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

package/build/types/widget-data/chart.d.ts

@@ -0,0 +1,9 @@
+export type ChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type ChartKitWidgetChart = {
+    margin?: Partial<ChartMargin>;
+};

package/build/types/widget-data/chart.js

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

package/build/types/widget-data/index.d.ts

@@ -0,0 +1,24 @@
+import type { ChartKitWidgetAxis } from './axis';
+import type { ChartKitWidgetChart } from './chart';
+import type { ChartKitWidgetLegend } from './legend';
+import type { ChartKitWidgetSeries } from './series';
+import type { ChartKitWidgetTitle } from './title';
+import type { ChartKitWidgetTooltip } from './tooltip';
+export * from './axis';
+export * from './base';
+export * from './chart';
+export * from './legend';
+export * from './pie';
+export * from './scatter';
+export * from './series';
+export * from './title';
+export * from './tooltip';
+export type ChartKitWidgetData<T = any> = {
+    chart?: ChartKitWidgetChart;
+    legend?: ChartKitWidgetLegend;
+    series: ChartKitWidgetSeries<T>[];
+    title?: ChartKitWidgetTitle;
+    tooltip?: ChartKitWidgetTooltip<T>;
+    xAxis?: ChartKitWidgetAxis;
+    yAxis?: ChartKitWidgetAxis[];
+};

package/build/types/widget-data/index.js

@@ -0,0 +1,9 @@
+export * from './axis';
+export * from './base';
+export * from './chart';
+export * from './legend';
+export * from './pie';
+export * from './scatter';
+export * from './series';
+export * from './title';
+export * from './tooltip';

package/build/types/widget-data/legend.d.ts

@@ -0,0 +1,3 @@
+export type ChartKitWidgetLegend = {
+    enabled?: boolean;
+};

package/build/types/widget-data/legend.js

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

package/build/types/widget-data/pie.d.ts

@@ -0,0 +1,10 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+export type PieSeriesData<T = any> = BaseSeriesData<T> & {
+    value: number;
+    color: string;
+    name: string;
+};
+export type PieSeries<T = any> = BaseSeries & {
+    type: 'pie';
+    data: PieSeriesData<T>[];
+};

package/build/types/widget-data/pie.js

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

package/build/types/widget-data/scatter.d.ts

@@ -0,0 +1,20 @@
+import type { BaseSeries, BaseSeriesData } from './base';
+export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
+    /** The x value of the point */
+    x?: number;
+    /** The y value of the point */
+    y?: number;
+    /** Corresponding value of axis category */
+    category?: string;
+    radius?: number;
+};
+export type ScatterSeries<T = any> = BaseSeries & {
+    type: 'scatter';
+    data: ScatterSeriesData<T>[];
+    /** The name of the series (used in legend) */
+    name: string;
+    /** The main color of the series (hex, rgba) */
+    color?: string;
+    /** A predefined shape or symbol for the dot */
+    symbol?: string;
+};

package/build/types/widget-data/scatter.js

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

package/build/types/widget-data/series.d.ts

@@ -0,0 +1,4 @@
+import type { PieSeries, PieSeriesData } from './pie';
+import type { ScatterSeries, ScatterSeriesData } from './scatter';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T>;

package/build/types/widget-data/series.js

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

package/build/types/widget-data/title.d.ts

@@ -0,0 +1,5 @@
+import type { BaseTextStyle } from './base';
+export type ChartKitWidgetTitle = {
+    text: string;
+    style?: Partial<BaseTextStyle>;
+};

package/build/types/widget-data/title.js

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

package/build/types/widget-data/tooltip.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ChartKitWidgetSeries, ChartKitWidgetSeriesData } from './series';
+export type TooltipHoveredData<T = any> = {
+    data: ChartKitWidgetSeriesData<T>;
+    series: ChartKitWidgetSeries;
+};
+export type ChartKitWidgetTooltip<T = any> = {
+    enabled?: boolean;
+    renderer?: (data: {
+        hovered: TooltipHoveredData<T>;
+    }) => React.ReactElement;
+};

package/build/types/widget-data/tooltip.js

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

package/build/types/widget.d.ts

@@ -2,6 +2,7 @@
 import type { CustomTooltipProps, Yagr, YagrWidgetData } from '../plugins/yagr/types';
 import type { IndicatorWidgetData } from '../plugins/indicator/types';
 import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
+import type { ChartKitWidgetData } from './widget-data';
 export interface ChartKitWidget {
     yagr: {
         data: YagrWidgetData;
@@ -28,4 +29,8 @@ export interface ChartKitWidget {
             forceUpdate: boolean;
         }, callExternalOnChange?: boolean) => void;
     };
+    d3: {
+        data: ChartKitWidgetData;
+        widget: never;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -14,8 +14,9 @@
   },
   "dependencies": {
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.7.7",
+    "@gravity-ui/yagr": "^3.7.8",
     "bem-cn-lite": "^4.1.0",
+    "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"
   },
@@ -35,6 +36,7 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.26",
     "@storybook/react-webpack5": "^7.0.26",
+    "@types/d3": "^7.4.0",
     "@types/jest": "^28.1.3",
     "@types/lodash": "^4.14.177",
     "@types/node": "^18.0.0",