@gravity-ui/chartkit 3.4.3 → 3.6.0

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

@@ -1,19 +1,39 @@
+import { select } from 'd3';
+import get from 'lodash/get';
 import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
+export * from './math';
 const CHARTS_WITHOUT_AXIS = ['pie'];
-// Сhecks whether the series should be drawn with axes
-export const isAxisRelatedSeries = (series) => {
+/**
+ * Checks whether the series should be drawn with axes.
+ *
+ * @param series - The series object to check.
+ * @returns `true` if the series should be drawn with axes, `false` otherwise.
+ */
+export function isAxisRelatedSeries(series) {
     return !CHARTS_WITHOUT_AXIS.includes(series.type);
-};
+}
+export function isSeriesWithNumericalXValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithNumericalYValues(series) {
+    return isAxisRelatedSeries(series);
+}
+export function isSeriesWithCategoryValues(series) {
+    return isAxisRelatedSeries(series);
+}
 export const getDomainDataXBySeries = (series) => {
-    return series.filter(isAxisRelatedSeries).reduce((acc, s) => {
-        acc.push(...s.data.map((d) => 'x' in d && d.x));
+    return series.reduce((acc, s) => {
+        if (isSeriesWithNumericalXValues(s)) {
+            acc.push(...s.data.map((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 series.filter(isSeriesWithNumericalYValues).reduce((acc, s) => {
+        acc.push(...s.data.map((d) => d.y));
         return acc;
     }, []);
 };
@@ -26,17 +46,6 @@ export const getSeriesNames = (series) => {
         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);
 };
@@ -69,3 +78,26 @@ export const formatAxisTickLabel = (args) => {
         }
     }
 };
+/**
+ * Calculates the height of a text element in a horizontal SVG layout.
+ *
+ * @param {Object} args - The arguments for the function.
+ * @param {string} args.text - The text to be measured.
+ * @param {Partial<BaseTextStyle>} args.style - Optional style properties for the text element.
+ * @return {number} The height of the text element.
+ */
+export const getHorisontalSvgTextHeight = (args) => {
+    const { text, style } = args;
+    const textSelection = select(document.body).append('text').text(text);
+    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
+    let height = 0;
+    if (fontSize) {
+        textSelection.style('font-size', fontSize);
+    }
+    textSelection
+        .each(function () {
+        height = this.getBoundingClientRect().height;
+    })
+        .remove();
+    return height;
+};

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

@@ -0,0 +1,23 @@
+/**
+ * Calculates a numeric property based on the given arguments.
+ *
+ * @param {Object} args - The arguments for the calculation.
+ * @param {string | number | null} args.value - The value to calculate the property for.
+ * @param {number} args.base - The base value to use in the calculation.
+ * @return {number | undefined} The calculated numeric property, or undefined if the value is invalid.
+ * @example
+ * const result1 = calculateNumericProperty({value: 1});
+ * console.log(result1); // Output: 1
+ * const result2 = calculateNumericProperty({value: '10px'});
+ * console.log(result2); // Output: 10
+ * const result3 = calculateNumericProperty({value: '50%', base: 200});
+ * console.log(result3); // Output: 100
+ * const result4 = calculateNumericProperty({value: '50%'});
+ * console.log(result4); // Output: undefined
+ * const result5 = calculateNumericProperty({value: 'invalid_value'});
+ * console.log(result5); // Output: undefined
+ */
+export declare const calculateNumericProperty: (args: {
+    value?: string | number | null;
+    base?: number;
+}) => number | undefined;

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

@@ -0,0 +1,43 @@
+import isNil from 'lodash/isNil';
+const isStringValueInPercent = (value = '') => {
+    return value.endsWith('%') && !Number.isNaN(Number.parseFloat(value));
+};
+const isStringValueInPixel = (value = '') => {
+    return value.endsWith('px') && !Number.isNaN(Number.parseFloat(value));
+};
+/**
+ * Calculates a numeric property based on the given arguments.
+ *
+ * @param {Object} args - The arguments for the calculation.
+ * @param {string | number | null} args.value - The value to calculate the property for.
+ * @param {number} args.base - The base value to use in the calculation.
+ * @return {number | undefined} The calculated numeric property, or undefined if the value is invalid.
+ * @example
+ * const result1 = calculateNumericProperty({value: 1});
+ * console.log(result1); // Output: 1
+ * const result2 = calculateNumericProperty({value: '10px'});
+ * console.log(result2); // Output: 10
+ * const result3 = calculateNumericProperty({value: '50%', base: 200});
+ * console.log(result3); // Output: 100
+ * const result4 = calculateNumericProperty({value: '50%'});
+ * console.log(result4); // Output: undefined
+ * const result5 = calculateNumericProperty({value: 'invalid_value'});
+ * console.log(result5); // Output: undefined
+ */
+export const calculateNumericProperty = (args) => {
+    const { value = '', base } = args;
+    if (isNil(value)) {
+        return undefined;
+    }
+    if (typeof value === 'string') {
+        if (isStringValueInPercent(value) && typeof base === 'number') {
+            const fraction = Number.parseFloat(value) / 100;
+            return base * fraction;
+        }
+        if (isStringValueInPixel(value)) {
+            return Number.parseFloat(value);
+        }
+        return undefined;
+    }
+    return value;
+};

package/build/plugins/highcharts/renderer/components/HighchartsComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
+import HighchartsReact from './HighchartsReact';
 import get from 'lodash/get';
 import { settings } from '../../../../libs';
 import { settingsEventEmitter } from '../../../../libs/settings/settings';

package/build/plugins/highcharts/renderer/components/HighchartsReact.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import Highcharts from 'highcharts';
+interface HighchartsReactRefObject {
+    chart: Highcharts.Chart | null | undefined;
+    container: React.RefObject<HTMLDivElement | undefined>;
+}
+interface HighchartsReactProps {
+    [key: string]: any;
+    constructorType?: keyof typeof Highcharts;
+    containerProps?: {
+        [key: string]: any;
+    };
+    highcharts?: typeof Highcharts;
+    options: Highcharts.Options;
+    callback?: Highcharts.ChartCallbackFunction;
+}
+export declare const HighchartsReact: React.ForwardRefExoticComponent<React.PropsWithoutRef<HighchartsReactProps> & React.RefAttributes<HighchartsReactRefObject>>;
+export default HighchartsReact;

package/build/plugins/highcharts/renderer/components/HighchartsReact.js

@@ -0,0 +1,46 @@
+/* eslint no-console: ["error", { allow: ["warn", "error"]}] */
+import React from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
+export const HighchartsReact = React.memo(React.forwardRef(function HighchartsReact(props, ref) {
+    const containerRef = React.useRef(null);
+    const chartRef = React.useRef();
+    useIsomorphicLayoutEffect(() => {
+        function createChart() {
+            const { highcharts: HighchartsComponent } = props;
+            const constructorType = props.constructorType || 'chart';
+            if (!HighchartsComponent) {
+                console.warn('The "highcharts" property was not passed.');
+            }
+            else if (!HighchartsComponent[constructorType]) {
+                console.warn('The "constructorType" property is incorrect or some ' +
+                    'required module is not imported.');
+            }
+            else if (props.options) {
+                chartRef.current = HighchartsComponent[constructorType](containerRef.current, props.options, props.callback);
+            }
+            else {
+                console.warn('The "options" property was not passed.');
+            }
+        }
+        if (!chartRef.current) {
+            createChart();
+        }
+    }, [props.options, props.allowChartUpdate, props.containerProps, props.highcharts, props.constructorType]);
+    useIsomorphicLayoutEffect(() => {
+        return () => {
+            if (chartRef.current) {
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+    }, []);
+    React.useImperativeHandle(ref, () => ({
+        get chart() {
+            return chartRef.current;
+        },
+        container: containerRef,
+    }), []);
+    return React.createElement("div", Object.assign({}, props.containerProps, { ref: containerRef }));
+}));
+HighchartsReact.displayName = 'HighchartsReact';
+export default HighchartsReact;

package/build/plugins/index.d.ts

@@ -4,3 +4,4 @@ export { IndicatorPlugin } from './indicator';
 export type { IndicatorWidgetData } from './indicator/types';
 export { HighchartsPlugin } from './highcharts';
 export * from './highcharts/types';
+export { HighchartsReact } from './highcharts/renderer/components/HighchartsReact';

package/build/plugins/index.js

@@ -3,3 +3,4 @@ export * from './yagr/types';
 export { IndicatorPlugin } from './indicator';
 export { HighchartsPlugin } from './highcharts';
 export * from './highcharts/types';
+export { HighchartsReact } from './highcharts/renderer/components/HighchartsReact';

package/build/types/widget-data/bar-x.d.ts

@@ -1,5 +1,6 @@
 import type { BaseSeries, BaseSeriesData } from './base';
 import type { ChartKitWidgetSeriesOptions } from './series';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     /** The x value of the point */
     x?: number;
@@ -11,7 +12,7 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
 export type BarXSeries<T = any> = BaseSeries & {
     type: 'bar-x';
     data: BarXSeriesData<T>[];
-    /** The name of the series (used in legend) */
+    /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
@@ -28,4 +29,8 @@ export type BarXSeries<T = any> = BaseSeries & {
         /** Whether to align the data label inside the box or to the actual value point */
         inside?: boolean;
     };
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

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

@@ -1,6 +1,18 @@
 export type BaseSeries = {
     /** Initial visibility of the series */
     visible?: boolean;
+    /**
+     * Options for the series data labels, appearing next to each data point.
+     *
+     * Note: now this option is supported only for `pie` charts.
+     * */
+    dataLabels?: {
+        /**
+         * Enable or disable the data labels
+         * @default true
+         */
+        enabled?: boolean;
+    };
 };
 export type BaseSeriesData<T = any> = {
     /**

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

@@ -1,3 +1,35 @@
 export type ChartKitWidgetLegend = {
     enabled?: boolean;
+    /** The horizontal alignment of the legend box within the chart area.
+     *
+     * @default center
+     * */
+    align?: 'left' | 'center' | 'right';
+    /** Defines the pixel distance between each legend item
+     *
+     * @default 20
+     * */
+    itemDistance?: number;
+};
+export type BaseLegendSymbol = {
+    /** The pixel padding between the legend item symbol and the legend item text.
+     *
+     * @default 5
+     * */
+    padding?: number;
+};
+export type RectLegendSymbolOptions = BaseLegendSymbol & {
+    /** The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    width?: number;
+    /** The pixel width of the symbol for series types that use a rectangle in the legend
+     *
+     * @default 10
+     * */
+    height?: number;
+    /** The border radius of the symbol for series types that use a rectangle in the legend.
+     * Defaults to half the symbolHeight, effectively creating a circle. */
+    radius?: number;
 };

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

@@ -1,10 +1,46 @@
 import type { BaseSeries, BaseSeriesData } from './base';
+import { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type PieSeriesData<T = any> = BaseSeriesData<T> & {
+    /** The value of the pie segment. */
     value: number;
-    color: string;
+    /** The name of the pie segment (used in legend, tooltip etc). */
     name: string;
+    /** Individual color for the pie segment. */
+    color?: string;
+    /** Initial visibility of the pie segment. */
+    visible?: boolean;
+    /** Initial data label of the pie segment. If not specified, the value is used. */
+    label?: string;
 };
 export type PieSeries<T = any> = BaseSeries & {
     type: 'pie';
     data: PieSeriesData<T>[];
+    /**
+     * The color of the border surrounding each segment.
+     * @default `--g-color-base-background` from @gravity-ui/uikit.
+     */
+    borderColor?: string;
+    /**
+     * The width of the border surrounding each segment.
+     * @default '1px'
+     */
+    borderWidth?: number;
+    /**
+     * The corner radius of the border surrounding each segment.
+     * @default 0
+     */
+    borderRadius?: number;
+    /** The center of the pie chart relative to the chart area. */
+    center?: [string | number | null, string | number | null];
+    /**
+     * The inner radius of the pie.
+     * @default 0
+     */
+    innerRadius?: string | number;
+    /** The radius of the pie relative to the chart area. The default behaviour is to scale to the chart area. */
+    radius?: string | number;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

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

@@ -1,4 +1,5 @@
 import type { BaseSeries, BaseSeriesData } from './base';
+import type { ChartKitWidgetLegend, RectLegendSymbolOptions } from './legend';
 export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
     /** The x value of the point */
     x?: number;
@@ -11,10 +12,14 @@ export type ScatterSeriesData<T = any> = BaseSeriesData<T> & {
 export type ScatterSeries<T = any> = BaseSeries & {
     type: 'scatter';
     data: ScatterSeriesData<T>[];
-    /** The name of the series (used in legend) */
+    /** The name of the series (used in legend, tooltip etc) */
     name: string;
     /** The main color of the series (hex, rgba) */
     color?: string;
     /** A predefined shape or symbol for the dot */
     symbol?: string;
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend & {
+        symbol?: RectLegendSymbolOptions;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.4.3",
+  "version": "3.6.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -54,7 +54,6 @@
     "gulp-replace": "^1.1.3",
     "gulp-typescript": "^5.0.1",
     "highcharts": "^8.2.2",
-    "highcharts-react-official": "^3.2.0",
     "husky": "^4.2.5",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.2",
@@ -77,7 +76,6 @@
   "peerDependencies": {
     "@gravity-ui/uikit": "^5.0.0",
     "highcharts": "^8.2.2",
-    "highcharts-react-official": "^3.2.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {

package/build/plugins/d3/renderer/hooks/useChartOptions/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const DEFAULT_AXIS_LABEL_FONT_SIZE = "11px";
-export declare const DEFAULT_AXIS_LABEL_PADDING = 10;
-export declare const DEFAULT_AXIS_TITLE_FONT_SIZE = "14px";

package/build/plugins/d3/renderer/hooks/useChartOptions/constants.js

@@ -1,3 +0,0 @@
-export const DEFAULT_AXIS_LABEL_FONT_SIZE = '11px';
-export const DEFAULT_AXIS_LABEL_PADDING = 10;
-export const DEFAULT_AXIS_TITLE_FONT_SIZE = '14px';

package/build/plugins/d3/renderer/hooks/useChartOptions/utils.d.ts

@@ -1,5 +0,0 @@
-import type { BaseTextStyle } from '../../../../../types/widget-data';
-export declare const getHorisontalSvgTextDimensions: (args: {
-    text: string;
-    style?: Partial<BaseTextStyle>;
-}) => number;

package/build/plugins/d3/renderer/hooks/useChartOptions/utils.js

@@ -1,18 +0,0 @@
-import { select } from 'd3';
-import get from 'lodash/get';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE } from './constants';
-export const getHorisontalSvgTextDimensions = (args) => {
-    const { text, style } = args;
-    const textSelection = select(document.body).append('text').text(text);
-    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
-    let height = 0;
-    if (fontSize) {
-        textSelection.style('font-size', fontSize);
-    }
-    textSelection
-        .each(function () {
-        height = this.getBoundingClientRect().height;
-    })
-        .remove();
-    return height;
-};

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

@@ -1,13 +0,0 @@
-import type { ChartKitWidgetSeries } from '../../../../../types/widget-data';
-export type OnLegendItemClick = (data: {
-    name: string;
-    metaKey: boolean;
-}) => void;
-type Args = {
-    series: ChartKitWidgetSeries[];
-};
-export declare const useLegend: (args: Args) => {
-    activeLegendItems: string[];
-    handleLegendItemClick: OnLegendItemClick;
-};
-export {};

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { getVisibleSeriesNames } from '../../utils';
-export const useLegend = (args) => {
-    const { series } = args;
-    const [activeLegendItems, setActiveLegendItems] = React.useState(getVisibleSeriesNames(series));
-    const handleLegendItemClick = React.useCallback(({ name, metaKey }) => {
-        const onlyItemSelected = activeLegendItems.length === 1 && activeLegendItems.includes(name);
-        let nextActiveLegendItems;
-        if (metaKey && activeLegendItems.includes(name)) {
-            nextActiveLegendItems = activeLegendItems.filter((item) => item !== name);
-        }
-        else if (metaKey && !activeLegendItems.includes(name)) {
-            nextActiveLegendItems = activeLegendItems.concat(name);
-        }
-        else if (onlyItemSelected) {
-            nextActiveLegendItems = getVisibleSeriesNames(series);
-        }
-        else {
-            nextActiveLegendItems = [name];
-        }
-        setActiveLegendItems(nextActiveLegendItems);
-    }, [series, activeLegendItems]);
-    // FIXME: remove effect. It initiates extra rerender
-    React.useEffect(() => {
-        setActiveLegendItems(getVisibleSeriesNames(series));
-    }, [series]);
-    return { activeLegendItems, handleLegendItemClick };
-};