@gravity-ui/chartkit 3.4.2 → 3.5.0

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/plugins/indicator/renderer/IndicatorItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import block from 'bem-cn-lite';
-const b = block('chartkit-indicator');
+import { block } from '../../../utils/cn';
+const b = block('indicator');
 export const IndicatorItem = (props) => {
     const { formatNumber, content, color, defaultColor, size, title, nowrap } = props;
     const mods = { size, nowrap };

package/build/plugins/indicator/renderer/IndicatorWidget.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import block from 'bem-cn-lite';
 import { isEmpty } from 'lodash';
 import { i18n } from '../../../i18n';
 import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
 import { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from '../../../constants';
 import { getChartPerformanceDuration, getRandomCKId, markChartPerformance } from '../../../utils';
+import { block } from '../../../utils/cn';
 import { IndicatorItem } from './IndicatorItem';
 import './IndicatorWidget.css';
-const b = block('chartkit-indicator');
+const b = block('indicator');
 const IndicatorWidget = React.forwardRef(
 // _ref needs to avoid this React warning:
 // "forwardRef render functions accept exactly two parameters: props and ref"

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

@@ -11,7 +11,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;

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

@@ -1,4 +1,7 @@
+import type { ChartKitWidgetLegend } from './legend';
 export type BaseSeries = {
+    /** Individual series legend options. Has higher priority than legend options in widget data */
+    legend?: ChartKitWidgetLegend;
     /** Initial visibility of the series */
     visible?: boolean;
 };

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

@@ -1,10 +1,27 @@
 import type { BaseSeries, BaseSeriesData } from './base';
 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;
 };
 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;
 };

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

@@ -11,7 +11,7 @@ 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;

package/build/utils/cn.d.ts

@@ -0,0 +1,3 @@
+export declare const NAMESPACE = "chartkit-";
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/build/utils/cn.js

@@ -0,0 +1,4 @@
+import { withNaming } from '@bem-react/classname';
+export const NAMESPACE = 'chartkit-';
+export const cn = withNaming({ e: '__', m: '_' });
+export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -15,9 +15,9 @@
     "access": "public"
   },
   "dependencies": {
+    "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^1.4.1",
-    "@gravity-ui/yagr": "^3.7.9",
-    "bem-cn-lite": "^4.1.0",
+    "@gravity-ui/yagr": "^3.7.10",
     "d3": "^7.8.5",
     "lodash": "^4.17.21",
     "react-split-pane": "^0.1.92"
@@ -31,7 +31,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.0.0",
+    "@gravity-ui/uikit": "^5.6.0",
     "@storybook/addon-essentials": "^7.0.26",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/cli": "^7.0.26",
@@ -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/useScales/index.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
-import get from 'lodash/get';
-import { getOnlyVisibleSeries, getDomainDataXBySeries, getDomainDataYBySeries } from '../../utils';
-const isNumericalArrayData = (data) => {
-    return data.every((d) => typeof d === 'number' || d === null);
-};
-const filterCategoriesByVisibleSeries = (categories, series) => {
-    return categories.filter((category) => {
-        return series.some((s) => {
-            return s.data.some((d) => 'category' in d && d.category === category);
-        });
-    });
-};
-export const useScales = (args) => {
-    const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
-    const scales = React.useMemo(() => {
-        const xMin = get(xAxis, 'min');
-        const xType = get(xAxis, 'type', 'linear');
-        const xCategories = get(xAxis, 'categories');
-        const xTimestamps = get(xAxis, 'timestamps');
-        const yType = get(yAxis[0], 'type', 'linear');
-        const yMin = get(yAxis[0], 'min');
-        const yCategories = get(yAxis[0], 'categories');
-        const yTimestamps = get(xAxis, 'timestamps');
-        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;
-        let xScale;
-        let yScale;
-        switch (xType) {
-            case 'linear': {
-                const domain = getDomainDataXBySeries(visibleSeries);
-                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
-                if (isNumericalArrayData(domain)) {
-                    const [domainXMin, xMax] = extent(domain);
-                    const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                    xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
-                }
-                break;
-            }
-            case 'category': {
-                if (xCategories) {
-                    const filteredCategories = filterCategoriesByVisibleSeries(xCategories, visibleSeries);
-                    xScale = scaleBand().domain(filteredCategories).range([0, boundsWidth]);
-                }
-                break;
-            }
-            case 'datetime': {
-                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
-                if (xTimestamps) {
-                    const [xMin, xMax] = extent(xTimestamps);
-                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
-                }
-                else {
-                    const domain = getDomainDataXBySeries(visibleSeries);
-                    if (isNumericalArrayData(domain)) {
-                        const [xMin, xMax] = extent(domain);
-                        xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
-                    }
-                }
-                break;
-            }
-        }
-        if (!xScale) {
-            throw new Error('Failed to create xScale');
-        }
-        switch (yType) {
-            case 'linear': {
-                const domain = getDomainDataYBySeries(visibleSeries);
-                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
-                if (isNumericalArrayData(domain)) {
-                    const [domainYMin, yMax] = extent(domain);
-                    const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                    yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
-                }
-                break;
-            }
-            case 'category': {
-                if (yCategories) {
-                    const filteredCategories = filterCategoriesByVisibleSeries(yCategories, visibleSeries);
-                    yScale = scaleBand().domain(filteredCategories).range([boundsHeight, 0]);
-                }
-                break;
-            }
-            case 'datetime': {
-                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
-                if (yTimestamps) {
-                    const [yMin, yMax] = extent(yTimestamps);
-                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
-                }
-                else {
-                    const domain = getDomainDataYBySeries(visibleSeries);
-                    if (isNumericalArrayData(domain)) {
-                        const [yMin, yMax] = extent(domain);
-                        yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
-                    }
-                }
-                break;
-            }
-        }
-        if (!yScale) {
-            throw new Error('Failed to create yScale');
-        }
-        return { xScale, yScale };
-    }, [boundsWidth, boundsHeight, series, xAxis, yAxis]);
-    return scales;
-};