@gravity-ui/chartkit 4.20.1 → 5.1.0

package/build/plugins/d3/renderer/hooks/useShapes/area/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { color, line as lineGenerator, area as areaGenerator, select } from 'd3';
+import { area as areaGenerator, color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
-import { setActiveState } from '../utils';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState } from '../utils';
 const b = block('d3-area');
 export const AreaSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;

package/build/plugins/d3/renderer/hooks/useShapes/area/prepare-data.d.ts

@@ -1,6 +1,6 @@
-import type { PreparedAreaSeries } from '../../useSeries/types';
-import type { PreparedAxis } from '../../useChartOptions/types';
 import type { ChartScale } from '../../useAxisScales';
+import type { PreparedAxis } from '../../useChartOptions/types';
+import type { PreparedAreaSeries } from '../../useSeries/types';
 import type { PreparedAreaData } from './types';
 export declare const prepareAreaData: (args: {
     series: PreparedAreaSeries[];

package/build/plugins/d3/renderer/hooks/useShapes/area/prepare-data.js

@@ -1,6 +1,6 @@
 import { group, sort } from 'd3';
-import { getXValue, getYValue } from '../utils';
 import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
     const style = series.dataLabels.style;

package/build/plugins/d3/renderer/hooks/useShapes/area/types.d.ts

@@ -1,6 +1,6 @@
-import { PreparedAreaSeries } from '../../useSeries/types';
 import { AreaSeriesData } from '../../../../../../types';
 import { LabelData } from '../../../types';
+import { PreparedAreaSeries } from '../../useSeries/types';
 export type PointData = {
     y0: number;
     x: number;

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import get from 'lodash/get';
 import { color, select } from 'd3';
+import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
 export { prepareBarXData } from './prepare-data';
@@ -27,7 +27,8 @@ export const BarXSeriesShapes = (args) => {
             .attr('y', (d) => d.y)
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.data.color || d.series.color);
+            .attr('fill', (d) => d.data.color || d.series.color)
+            .attr('opacity', (d) => d.opacity);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
         if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
             dataLabels = filterOverlappingLabels(dataLabels);

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/prepare-data.js

@@ -117,6 +117,7 @@ export const prepareBarXData = (args) => {
                     y: y - stackHeight,
                     width: rectWidth,
                     height,
+                    opacity: get(yValue.data, 'opacity', null),
                     data: yValue.data,
                     series: yValue.series,
                 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-x/types.d.ts

@@ -1,11 +1,12 @@
 import { TooltipDataChunkBarX } from '../../../../../../types';
-import { PreparedBarXSeries } from '../../useSeries/types';
 import { LabelData } from '../../../types';
+import { PreparedBarXSeries } from '../../useSeries/types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     x: number;
     y: number;
     width: number;
     height: number;
+    opacity: number | null;
     series: PreparedBarXSeries;
     label?: LabelData;
 };

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import get from 'lodash/get';
 import { color, select } from 'd3';
+import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 export { prepareBarYData } from './prepare-data';
 const DEFAULT_LABEL_PADDING = 7;
@@ -23,7 +23,8 @@ export const BarYSeriesShapes = (args) => {
             .attr('y', (d) => d.y)
             .attr('height', (d) => d.height)
             .attr('width', (d) => d.width)
-            .attr('fill', (d) => d.color);
+            .attr('fill', (d) => d.color)
+            .attr('opacity', (d) => d.data.opacity || null);
         const dataLabels = preparedData.filter((d) => d.series.dataLabels.enabled);
         const labelSelection = svgElement
             .selectAll('text')

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/prepare-data.js

@@ -104,6 +104,7 @@ export const prepareBarYData = (args) => {
                     width,
                     height: barHeight,
                     color: data.color || s.color,
+                    opacity: get(data, 'opacity', null),
                     data,
                     series: s,
                 });

package/build/plugins/d3/renderer/hooks/useShapes/bar-y/types.d.ts

@@ -6,5 +6,6 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarX, 'series'> & {
     width: number;
     height: number;
     color: string;
+    opacity: number | null;
     series: PreparedBarYSeries;
 };

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Dispatch } from 'd3';
-import type { PreparedAxis } from '../useChartOptions/types';
-import type { ChartScale } from '../useAxisScales';
 import type { PreparedSeries, PreparedSeriesOptions } from '../';
+import type { ChartScale } from '../useAxisScales';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedAreaData } from './area/types';
 import type { PreparedBarXData } from './bar-x';
-import type { PreparedScatterData } from './scatter/types';
-import type { PreparedPieData } from './pie/types';
-import type { PreparedLineData } from './line/types';
 import type { PreparedBarYData } from './bar-y/types';
+import type { PreparedLineData } from './line/types';
+import type { PreparedPieData } from './pie/types';
+import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
-import type { PreparedAreaData } from './area/types';
 import './styles.css';
 export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData;
 type Args = {

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
+import { AreaSeriesShapes } from './area';
+import { prepareAreaData } from './area/prepare-data';
 import { BarXSeriesShapes, prepareBarXData } from './bar-x';
-import { ScatterSeriesShape, prepareScatterData } from './scatter';
+import { BarYSeriesShapes, prepareBarYData } from './bar-y';
+import { LineSeriesShapes } from './line';
+import { prepareLineData } from './line/prepare-data';
 import { PieSeriesShapes } from './pie';
 import { preparePieData } from './pie/prepare-data';
-import { prepareLineData } from './line/prepare-data';
-import { LineSeriesShapes } from './line';
-import { BarYSeriesShapes, prepareBarYData } from './bar-y';
-import { AreaSeriesShapes } from './area';
-import { prepareAreaData } from './area/prepare-data';
+import { ScatterSeriesShape, prepareScatterData } from './scatter';
 import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import './styles.css';

package/build/plugins/d3/renderer/hooks/useShapes/line/index.js

@@ -3,8 +3,8 @@ import { color, line as lineGenerator, select } from 'd3';
 import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
 import { filterOverlappingLabels } from '../../../utils';
-import { getLineDashArray, setActiveState } from '../utils';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { getLineDashArray, setActiveState } from '../utils';
 const b = block('d3-line');
 export const LineSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions } = args;
@@ -31,7 +31,8 @@ export const LineSeriesShapes = (args) => {
             .attr('stroke-width', (d) => d.width)
             .attr('stroke-linejoin', (d) => d.linecap)
             .attr('stroke-linecap', (d) => d.linecap)
-            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width));
+            .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.width))
+            .attr('opacity', (d) => d.opacity);
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.d.ts

@@ -1,6 +1,6 @@
-import { PreparedLineSeries } from '../../useSeries/types';
-import { PreparedAxis } from '../../useChartOptions/types';
 import { ChartScale } from '../../useAxisScales';
+import { PreparedAxis } from '../../useChartOptions/types';
+import { PreparedLineSeries } from '../../useSeries/types';
 import { PreparedLineData } from './types';
 export declare const prepareLineData: (args: {
     series: PreparedLineSeries[];

package/build/plugins/d3/renderer/hooks/useShapes/line/prepare-data.js

@@ -1,5 +1,5 @@
-import { getXValue, getYValue } from '../utils';
 import { getLabelsSize, getLeftPosition } from '../../../utils';
+import { getXValue, getYValue } from '../utils';
 function getLabelData(point, series, xMax) {
     const text = String(point.data.label || point.data.y);
     const style = series.dataLabels.style;
@@ -63,6 +63,7 @@ export const prepareLineData = (args) => {
             id: s.id,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
+            opacity: s.opacity,
         };
         acc.push(result);
         return acc;

package/build/plugins/d3/renderer/hooks/useShapes/line/types.d.ts

@@ -1,7 +1,7 @@
-import { PreparedLineSeries } from '../../useSeries/types';
+import { DashStyle, LineCap } from '../../../../../../constants';
 import { LineSeriesData } from '../../../../../../types';
 import { LabelData } from '../../../types';
-import { DashStyle, LineCap } from '../../../../../../constants';
+import { PreparedLineSeries } from '../../useSeries/types';
 export type PointData = {
     x: number;
     y: number;
@@ -25,4 +25,5 @@ export type PreparedLineData = {
     labels: LabelData[];
     dashStyle: DashStyle;
     linecap: LineCap;
+    opacity: number | null;
 };

package/build/plugins/d3/renderer/hooks/useShapes/marker.d.ts

@@ -1,6 +1,6 @@
 import { BaseType, Selection } from 'd3';
-import { MarkerData as LineMarkerData } from './line/types';
 import { MarkerData as AreaMarkerData } from './area/types';
+import { MarkerData as LineMarkerData } from './line/types';
 import { MarkerData as ScatterMarkerData } from './scatter/types';
 type MarkerData = LineMarkerData | AreaMarkerData | ScatterMarkerData;
 export declare function renderMarker<T extends MarkerData>(selection: Selection<BaseType | SVGGElement, T, SVGGElement, unknown>): Selection<BaseType | SVGGElement, T, SVGGElement, unknown>;

package/build/plugins/d3/renderer/hooks/useShapes/marker.js

@@ -1,8 +1,8 @@
 import { symbol } from 'd3';
-import { block } from '../../../../../utils/cn';
+import get from 'lodash/get';
 import { SymbolType } from '../../../../../constants';
+import { block } from '../../../../../utils/cn';
 import { getSymbol } from '../../utils';
-import get from 'lodash/get';
 const b = block('d3-marker');
 const haloClassName = b('halo');
 const symbolClassName = b('symbol');
@@ -36,7 +36,14 @@ export function renderMarker(selection) {
 }
 export function getMarkerVisibility(d) {
     const markerStates = d.point.series.marker.states;
-    const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled;
+    let enabled;
+    if (d.hovered) {
+        enabled = markerStates.hover.enabled && d.hovered;
+    }
+    else {
+        enabled =
+            markerStates.normal.enabled || get(d.point.data, 'marker.states.normal.enabled', false);
+    }
     return enabled ? '' : 'hidden';
 }
 export function getMarkerHaloVisibility(d) {

package/build/plugins/d3/renderer/hooks/useShapes/pie/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
+import { arc, color, line as lineGenerator, pointer, select } from 'd3';
 import get from 'lodash/get';
-import { arc, color, pointer, select } from 'd3';
 import { block } from '../../../../../../utils/cn';
-import { setActiveState } from '../utils';
-import { line as lineGenerator } from 'd3-shape';
 import { setEllipsisForOverflowTexts } from '../../../utils';
+import { setActiveState } from '../utils';
 import { getCurveFactory } from './utils';
 const b = block('d3-pie');
 export function getHaloVisibility(d) {
@@ -69,7 +68,8 @@ export function PieSeriesShapes(args) {
             return arcGenerator(d);
         })
             .attr('class', b('segment'))
-            .attr('fill', (d) => d.data.color);
+            .attr('fill', (d) => d.data.color)
+            .attr('opacity', (d) => d.data.opacity);
         shapesSelection
             .selectAll('text')
             .data((pieData) => pieData.labels)
@@ -115,17 +115,20 @@ export function PieSeriesShapes(args) {
                 nodes[index].append(customShape);
             }
         });
+        const getSelectedSegment = (element) => {
+            const datum = select(element).datum();
+            const seriesId = get(datum, 'data.series.id', get(datum, 'series.id'));
+            return preparedData.reduce((result, pie) => {
+                var _a;
+                return result || ((_a = pie.segments.find((s) => s.data.series.id === seriesId)) === null || _a === void 0 ? void 0 : _a.data);
+            }, undefined);
+        };
         const eventName = `hover-shape.pie`;
         const hoverOptions = get(seriesOptions, 'pie.states.hover');
         const inactiveOptions = get(seriesOptions, 'pie.states.inactive');
         svgElement
             .on('mousemove', (e) => {
-            const datum = select(e.target).datum();
-            const seriesId = get(datum, 'data.series.id', get(datum, 'series.id'));
-            const currentSegment = preparedData.reduce((result, pie) => {
-                var _a;
-                return (result || ((_a = pie.segments.find((s) => s.data.series.id === seriesId)) === null || _a === void 0 ? void 0 : _a.data));
-            }, undefined);
+            const currentSegment = getSelectedSegment(e.target);
             if (currentSegment) {
                 const data = {
                     series: {
@@ -133,13 +136,19 @@ export function PieSeriesShapes(args) {
                         type: 'pie',
                         name: currentSegment.series.name,
                     },
-                    data: currentSegment.series,
+                    data: currentSegment.series.data,
                 };
                 dispatcher.call('hover-shape', {}, [data], pointer(e, svgContainer));
             }
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
+        })
+            .on('click', (e) => {
+            const selectedSegment = getSelectedSegment(e.target);
+            if (selectedSegment) {
+                dispatcher.call('click-chart', undefined, { point: selectedSegment.series.data, series: selectedSegment.series }, e);
+            }
         });
         dispatcher.on(eventName, (data) => {
             const selectedSeriesId = data === null || data === void 0 ? void 0 : data[0].series.id;

package/build/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.js

@@ -45,6 +45,7 @@ export function preparePieData(args) {
             return {
                 value: item.value,
                 color: item.color,
+                opacity: item.opacity,
                 series: item,
                 hovered: false,
                 active: true,

package/build/plugins/d3/renderer/hooks/useShapes/pie/types.d.ts

@@ -1,10 +1,11 @@
 import type { PieArcDatum } from 'd3';
-import { PreparedPieSeries } from '../../useSeries/types';
-import { LabelData } from '../../../types';
 import { ConnectorCurve } from '../../../../../../types';
+import { LabelData } from '../../../types';
+import { PreparedPieSeries } from '../../useSeries/types';
 export type SegmentData = {
     value: number;
     color: string;
+    opacity: number | null;
     series: PreparedPieSeries;
     hovered: boolean;
     active: boolean;

package/build/plugins/d3/renderer/hooks/useShapes/pie/utils.js

@@ -1,4 +1,4 @@
-import { pie, curveBasis, curveLinear } from 'd3';
+import { curveBasis, curveLinear, pie } from 'd3';
 export const pieGenerator = pie()
     .value((d) => d.value)
     .sort(null);

package/build/plugins/d3/renderer/hooks/useShapes/scatter/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import get from 'lodash/get';
 import { pointer, select } from 'd3';
+import get from 'lodash/get';
 import { block } from '../../../../../../utils/cn';
-import { setActiveState, shapeKey } from '../utils';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
+import { setActiveState, shapeKey } from '../utils';
 export { prepareScatterData } from './prepare-data';
 const b = block('d3-scatter');
 export function ScatterSeriesShape(props) {
@@ -22,10 +22,14 @@ export function ScatterSeriesShape(props) {
             .data(preparedData, shapeKey)
             .join('g')
             .call(renderMarker)
-            .attr('fill', (d) => d.point.data.color || d.point.series.color || '');
+            .attr('fill', (d) => d.point.data.color || d.point.series.color || '')
+            .attr('opacity', (d) => d.point.opacity);
+        const getSelectedPoint = (element) => {
+            return select(element).datum();
+        };
         svgElement
             .on('mousemove', (e) => {
-            const datum = select(e.target).datum();
+            const datum = getSelectedPoint(e.target);
             if (!datum) {
                 return;
             }
@@ -42,6 +46,12 @@ export function ScatterSeriesShape(props) {
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
+        })
+            .on('click', (e) => {
+            const datum = getSelectedPoint(e.target);
+            if (datum) {
+                dispatcher.call('click-chart', undefined, { point: datum.point.data, series: datum.point.series }, e);
+            }
         });
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;

package/build/plugins/d3/renderer/hooks/useShapes/scatter/prepare-data.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import { getXValue, getYValue } from '../utils';
 const getFilteredLinearScatterData = (data) => {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
@@ -15,6 +16,7 @@ export const prepareScatterData = (args) => {
                     series: s,
                     x: getXValue({ point: d, xAxis, xScale }),
                     y: getYValue({ point: d, yAxis, yScale }),
+                    opacity: get(d, 'opacity', null),
                 },
                 hovered: false,
                 active: true,

package/build/plugins/d3/renderer/hooks/useShapes/scatter/types.d.ts

@@ -3,6 +3,7 @@ import { PreparedScatterSeries } from '../../useSeries/types';
 type PointData = {
     x: number;
     y: number;
+    opacity: number | null;
     data: ScatterSeriesData;
     series: PreparedScatterSeries;
 };

package/build/plugins/d3/renderer/hooks/useShapes/treemap/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { color, pointer, select } from 'd3';
 import get from 'lodash/get';
-import { setEllipsisForOverflowTexts } from '../../../utils';
 import { block } from '../../../../../../utils/cn';
+import { setEllipsisForOverflowTexts } from '../../../utils';
 const b = block('d3-treemap');
 export const TreemapSeriesShape = (props) => {
     const { dispatcher, preparedData, seriesOptions, svgContainer } = props;
@@ -44,17 +44,24 @@ export const TreemapSeriesShape = (props) => {
             .style('font-weight', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontWeight) || null; })
             .style('fill', () => { var _a; return ((_a = series.dataLabels.style) === null || _a === void 0 ? void 0 : _a.fontColor) || null; })
             .call(setEllipsisForOverflowTexts, (d) => d.width);
-        const eventName = `hover-shape.pie`;
+        const getSelectedPart = (node) => {
+            const hoveredRect = select(node);
+            return hoveredRect.datum();
+        };
+        const eventName = `hover-shape.treemap`;
         const hoverOptions = get(seriesOptions, 'treemap.states.hover');
         const inactiveOptions = get(seriesOptions, 'treemap.states.inactive');
         svgElement
             .on('mousemove', (e) => {
-            const hoveredRect = select(e.target);
-            const datum = hoveredRect.datum();
+            const datum = getSelectedPart(e.target);
             dispatcher.call('hover-shape', {}, [{ data: datum.data, series }], pointer(e, svgContainer));
         })
             .on('mouseleave', () => {
             dispatcher.call('hover-shape', {}, undefined);
+        })
+            .on('click', (e) => {
+            const datum = getSelectedPart(e.target);
+            dispatcher.call('click-chart', undefined, { point: datum.data, series }, e);
         });
         dispatcher.on(eventName, (data) => {
             const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;

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

@@ -1,8 +1,8 @@
 import type { BaseType } from 'd3';
+import { DashStyle } from '../../../../../constants';
 import type { BasicInactiveState } from '../../../../../types';
 import type { ChartScale } from '../useAxisScales';
 import type { PreparedAxis } from '../useChartOptions/types';
-import { DashStyle } from '../../../../../constants';
 export declare function getXValue(args: {
     point: {
         x?: number | string;

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

@@ -7,7 +7,7 @@ type Args = {
     tooltip: PreparedTooltip;
 };
 export declare const useTooltip: ({ dispatcher, tooltip }: Args) => {
-    hovered: TooltipDataChunk<any>[] | undefined;
+    hovered: TooltipDataChunk[] | undefined;
     pointerPosition: PointerPosition | undefined;
 };
 export {};

package/build/plugins/d3/renderer/utils/axis-generators/bottom.js

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { getXAxisItems, getXAxisOffset, getXTickPosition } from '../axis';
-import { getLabelsSize, setEllipsisForOverflowText } from '../text';
 import { calculateCos, calculateSin } from '../math';
+import { getLabelsSize, setEllipsisForOverflowText } from '../text';
 function addDomain(selection, options) {
     const { size, color } = options;
     selection

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

@@ -1,5 +1,5 @@
-import { PreparedAxis } from '../hooks';
 import { AxisDomain, AxisScale, ScaleBand } from 'd3';
+import { PreparedAxis } from '../hooks';
 export declare function getTicksCount({ axis, range }: {
     axis: PreparedAxis;
     range: number;

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

@@ -1,12 +1,12 @@
+import { dateTime } from '@gravity-ui/date-utils';
 import { group, select } from 'd3';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
-import { dateTime } from '@gravity-ui/date-utils';
 import { formatNumber } from '../../../shared';
-import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 import { getNumberUnitRate } from '../../../shared/format-number/format-number';
-import { getDefaultDateFormat } from './time';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../constants';
 import { getSeriesStackId } from '../hooks/useSeries/utils';
+import { getDefaultDateFormat } from './time';
 export * from './math';
 export * from './text';
 export * from './time';

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

@@ -1,4 +1,4 @@
-import { symbolDiamond2, symbolCircle, symbolSquare, symbolTriangle2 } from 'd3';
+import { symbolCircle, symbolDiamond2, symbolSquare, symbolTriangle2 } from 'd3';
 import { SymbolType } from '../../../../constants';
 export const getSymbolType = (index) => {
     const scatterStyles = Object.values(SymbolType);

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

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import { SeriesType } from '../../../../constants';
-import { ChartKitError, CHARTKIT_ERROR_CODE } from '../../../../libs';
 import { i18n } from '../../../../i18n';
+import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../../libs';
 import { DEFAULT_AXIS_TYPE } from '../constants';
 const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
 const validateXYSeries = (args) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Highcharts, { ChartCallbackFunction, Options, Chart } from 'highcharts';
+import Highcharts, { Chart, ChartCallbackFunction, Options } from 'highcharts';
 import type { ChartKitProps } from '../../../../types';
 import type { HighchartsWidgetData, StringParams } from '../../types';
 import './HighchartsComponent.css';

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import Highcharts from 'highcharts';
-import HighchartsReact from './HighchartsReact';
 import get from 'lodash/get';
 import { settings } from '../../../../libs';
 import { settingsEventEmitter } from '../../../../libs/settings/settings';
-import { markChartPerformance, getChartPerformanceDuration, getRandomCKId } from '../../../../utils';
+import { getChartPerformanceDuration, getRandomCKId, markChartPerformance } from '../../../../utils';
 import { getGraph } from '../helpers/graph';
 import { initHighchartsLangOptions } from '../helpers/highcharts/highcharts';
+import HighchartsReact from './HighchartsReact';
 import { withSplitPane } from './withSplitPane/withSplitPane';
 import './HighchartsComponent.css';
 const HighcharsReactWithSplitPane = withSplitPane(HighchartsReact);

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

@@ -26,7 +26,13 @@ export const HighchartsReact = React.memo(React.forwardRef(function HighchartsRe
         if (!chartRef.current) {
             createChart();
         }
-    }, [props.options, props.allowChartUpdate, props.containerProps, props.highcharts, props.constructorType]);
+    }, [
+        props.options,
+        props.allowChartUpdate,
+        props.containerProps,
+        props.highcharts,
+        props.constructorType,
+    ]);
     useIsomorphicLayoutEffect(() => {
         return () => {
             if (chartRef.current) {

package/build/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.css

@@ -1,5 +1,5 @@
 .styled-split-pane__pane-resizer {
-  background: var(--yc-color-base-generic);
+  background: var(--g-color-base-generic);
   z-index: 1;
   box-sizing: border-box;
   position: relative;