@gravity-ui/chartkit 4.20.0 → 5.0.0

package/build/components/ChartKit.css

@@ -8,25 +8,25 @@
 }
 
 .chartkit-theme_common {
-  --highcarts-navigator-border: var(--yc-color-line-generic);
-  --highcarts-navigator-track: var(--yc-color-base-generic);
-  --highcarts-navigator-body: var(--yc-color-scroll-handle);
-  --highcharts-series-border: var(--yc-color-base-background);
-  --highcharts-grid-line: var(--yc-color-line-generic);
-  --highcharts-axis-line: var(--yc-color-line-generic);
-  --highcharts-tick: var(--yc-color-line-generic);
-  --highcharts-title: var(--yc-color-text-primary);
-  --highcharts-axis-labels: var(--yc-color-text-secondary);
-  --highcharts-data-labels: var(--yc-color-text-complementary);
-  --highcharts-plot-line-label: var(--yc-color-text-complementary);
-  --highcharts-legend-item: var(--yc-color-text-secondary);
-  --highcharts-legend-item-hover: var(--yc-color-text-primary);
-  --highcharts-legend-item-hidden: var(--yc-color-text-hint);
-  --highcharts-floating-bg: var(--yc-color-infographics-tooltip-bg);
-  --highcharts-tooltip-text: var(--yc-color-text-primary);
+  --highcarts-navigator-border: var(--g-color-line-generic);
+  --highcarts-navigator-track: var(--g-color-base-generic);
+  --highcarts-navigator-body: var(--g-color-scroll-handle);
+  --highcharts-series-border: var(--g-color-base-background);
+  --highcharts-grid-line: var(--g-color-line-generic);
+  --highcharts-axis-line: var(--g-color-line-generic);
+  --highcharts-tick: var(--g-color-line-generic);
+  --highcharts-title: var(--g-color-text-primary);
+  --highcharts-axis-labels: var(--g-color-text-secondary);
+  --highcharts-data-labels: var(--g-color-text-secondary);
+  --highcharts-plot-line-label: var(--g-color-text-secondary);
+  --highcharts-legend-item: var(--g-color-text-secondary);
+  --highcharts-legend-item-hover: var(--g-color-text-primary);
+  --highcharts-legend-item-hidden: var(--g-color-text-hint);
+  --highcharts-floating-bg: var(--g-color-infographics-tooltip-bg);
+  --highcharts-tooltip-text: var(--g-color-text-primary);
   --highcharts-tooltip-bg: var(--highcharts-floating-bg);
-  --highcharts-tooltip-alternate-bg: var(--yc-color-base-generic);
-  --highcharts-tooltip-text-complementary: var(--yc-color-text-complementary);
-  --highcharts-holiday-band: var(--yc-color-base-generic);
-  --d3-data-labels: var(--yc-color-text-complementary);
+  --highcharts-tooltip-alternate-bg: var(--g-color-base-generic);
+  --highcharts-tooltip-text-complementary: var(--g-color-text-secondary);
+  --highcharts-holiday-band: var(--g-color-base-generic);
+  --d3-data-labels: var(--g-color-text-secondary);
 }

package/build/components/ChartKit.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChartKitType, ChartKitRef, ChartKitProps } from '../types';
+import type { ChartKitProps, ChartKitRef, ChartKitType } from '../types';
 import './ChartKit.css';
 type ChartKitComponentProps<T extends ChartKitType> = Omit<ChartKitProps<T>, 'onError'> & {
     instanceRef?: React.ForwardedRef<ChartKitRef | undefined>;
@@ -16,7 +16,7 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     onError?: import("../types").ChartKitOnError | undefined;
     renderError?: import("../types").RenderError | undefined;
     renderPluginLoader?: import("../types").ChartKitRenderPluginLoader | undefined;
-} & (Omit<import("../types").ChartKitWidget[T], "data" | "widget"> extends infer T_1 ? { [key in keyof T_1]: import("../types").ChartKitWidget[T][key]; } : never) & {
+} & { [key in keyof Omit<import("../types").ChartKitWidget[T], "data" | "widget">]: import("../types").ChartKitWidget[T][key]; } & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;
 }) => ReturnType<typeof ChartKitComponent>;
 export {};

package/build/components/ErrorBoundary/ErrorBoundary.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { getErrorMessage } from '../../utils/getErrorMessage';
 import { CHARTKIT_ERROR_CODE } from '../../libs';
+import { getErrorMessage } from '../../utils/getErrorMessage';
 export class ErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);

package/build/libs/settings/settings.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitPlugin, ChartKitLang, ChartKitHolidays } from '../../types';
+import type { ChartKitHolidays, ChartKitLang, ChartKitPlugin } from '../../types';
 import { EventEmitter } from './eventEmitter';
 interface Settings {
     plugins: ChartKitPlugin[];

package/build/libs/settings/settings.js

@@ -1,6 +1,6 @@
+import { configure } from '@gravity-ui/uikit';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { configure } from '@gravity-ui/uikit';
 import { i18nFactory } from '../../i18n';
 import { EventEmitter } from './eventEmitter';
 export const settingsEventEmitter = new EventEmitter();

package/build/plugins/d3/examples/area/PercentStacking.js

@@ -1,5 +1,5 @@
-import { groups } from 'd3';
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
 import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';

package/build/plugins/d3/examples/area/StackedArea.js

@@ -1,5 +1,5 @@
-import { groups } from 'd3';
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
 import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';

package/build/plugins/d3/examples/combined/LineAndBarX.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { groups, max, min, median } from 'd3';
+import { groups, max, median, min } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
 import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';

package/build/plugins/d3/examples/pie/DonutWithTotals.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { CustomShapeRenderer } from '../../utils';
 import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { CustomShapeRenderer } from '../../utils';
 function prepareData() {
     const gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
     return gamesByPlatform.map(([value, games]) => ({

package/build/plugins/d3/renderer/D3Widget.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ChartKitWidgetRef } from '../../../types';
 declare const D3Widget: React.ForwardRefExoticComponent<{
     type: "d3";
-    data: import("../../../types").ChartKitWidgetData<any>;
+    data: import("../../../types").ChartKitWidgetData;
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"d3"> | undefined) => void) | undefined;

package/build/plugins/d3/renderer/D3Widget.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import afterFrame from 'afterframe';
 import { select } from 'd3';
 import debounce from 'lodash/debounce';
-import afterFrame from 'afterframe';
 import { getRandomCKId, measurePerformance } from '../../../utils';
 import { Chart } from './components';
 import { validateData } from './validation';

package/build/plugins/d3/renderer/components/AxisX.d.ts

@@ -6,5 +6,5 @@ type Props = {
     height: number;
     scale: ChartScale;
 };
-export declare const AxisX: React.MemoExoticComponent<({ axis, width, height, scale }: Props) => React.JSX.Element>;
+export declare const AxisX: React.NamedExoticComponent<Props>;
 export {};

package/build/plugins/d3/renderer/components/AxisX.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, getClosestPointsRange, setEllipsisForOverflowText, getTicksCount, getScaleTicks, getMaxTickCount, } from '../utils';
+import { formatAxisTickLabel, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, setEllipsisForOverflowText, } from '../utils';
 import { axisBottom } from '../utils/axis-generators';
 const b = block('d3-axis');
 function getLabelFormatter({ axis, scale }) {
@@ -18,7 +18,7 @@ function getLabelFormatter({ axis, scale }) {
         });
     };
 }
-export const AxisX = React.memo(({ axis, width, height, scale }) => {
+export const AxisX = React.memo(function AxisX({ axis, width, height, scale }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { axisLeft, select } from 'd3';
 import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, getClosestPointsRange, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, getTicksCount, getScaleTicks, calculateSin, calculateCos, } from '../utils';
+import { calculateCos, calculateSin, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getTicksCount, parseTransformStyle, setEllipsisForOverflowText, setEllipsisForOverflowTexts, } from '../utils';
 const b = block('d3-axis');
 function transformLabel(node, axis) {
     let topOffset = axis.labels.lineHeight / 2;

package/build/plugins/d3/renderer/components/Chart.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { block } from '../../../../utils/cn';
 import { getD3Dispatcher } from '../d3-dispatcher';
 import { useAxisScales, useChartDimensions, useChartOptions, useSeries, useShapes, useTooltip, } from '../hooks';
-import { AxisY } from './AxisY';
+import { getWidthOccupiedByYAxis } from '../hooks/useChartDimensions/utils';
+import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
+import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
 import { AxisX } from './AxisX';
+import { AxisY } from './AxisY';
 import { Legend } from './Legend';
 import { Title } from './Title';
 import { Tooltip, TooltipTriggerArea } from './Tooltip';
-import { getPreparedXAxis } from '../hooks/useChartOptions/x-axis';
-import { getWidthOccupiedByYAxis } from '../hooks/useChartDimensions/utils';
-import { getPreparedYAxis } from '../hooks/useChartOptions/y-axis';
 import './styles.css';
 const b = block('d3');
 export const Chart = (props) => {

package/build/plugins/d3/renderer/components/Legend.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { OnLegendItemClick, PreparedLegend, PreparedSeries, LegendItem, LegendConfig } from '../hooks';
+import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../hooks';
 type Props = {
     boundsWidth: number;
     chartSeries: PreparedSeries[];

package/build/plugins/d3/renderer/components/Legend.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { symbol, select, line as lineGenerator } from 'd3';
-import { getSymbol } from '../utils';
+import { line as lineGenerator, select, symbol } from 'd3';
 import { block } from '../../../../utils/cn';
 import { getLineDashArray } from '../hooks/useShapes/utils';
+import { getSymbol } from '../utils';
 const b = block('d3-legend');
 const getLegendPosition = (args) => {
     const { align, offsetWidth, width, contentWidth } = args;

package/build/plugins/d3/renderer/components/Tooltip/DefaultContent.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import get from 'lodash/get';
 import { dateTime } from '@gravity-ui/date-utils';
+import get from 'lodash/get';
 import { formatNumber } from '../../../../shared';
 import { getDataCategoryValue } from '../../utils';
 const DEFAULT_DATE_FORMAT = 'DD.MM.YY';

package/build/plugins/d3/renderer/components/Tooltip/TooltipTriggerArea.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { bisector, group, pointer, sort } from 'd3';
+import get from 'lodash/get';
 import throttle from 'lodash/throttle';
-import { bisector, pointer, sort, group } from 'd3';
 import { extractD3DataFromNode, isNodeContainsD3Data } from '../../utils';
-import get from 'lodash/get';
 const THROTTLE_DELAY = 50;
 const isNodeContainsData = (node) => {
     return isNodeContainsD3Data(node);

package/build/plugins/d3/renderer/components/Tooltip/index.js

@@ -1,40 +1,16 @@
 import React from 'react';
+import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import isNil from 'lodash/isNil';
 import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
 export * from './TooltipTriggerArea';
 const b = block('d3-tooltip');
-const POINTER_OFFSET_X = 20;
 export const Tooltip = (props) => {
-    const { tooltip, svgContainer, xAxis, yAxis, hovered, pointerPosition } = props;
-    const ref = React.useRef(null);
-    const size = React.useMemo(() => {
-        if (ref.current && hovered) {
-            const { width, height } = ref.current.getBoundingClientRect();
-            return { width, height };
-        }
-        return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hovered, pointerPosition]);
-    const position = React.useMemo(() => {
-        if (hovered && pointerPosition && size) {
-            const { clientWidth } = document.documentElement;
-            const { width, height } = size;
-            const rect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
-            const [pointerLeft, pointetTop] = pointerPosition;
-            const outOfRightBoudary = pointerLeft + width + rect.left + POINTER_OFFSET_X >= clientWidth;
-            const outOfTopBoundary = pointetTop - height / 2 <= 0;
-            const left = outOfRightBoudary
-                ? pointerLeft - width - POINTER_OFFSET_X
-                : pointerLeft + POINTER_OFFSET_X;
-            const top = outOfTopBoundary ? 0 : pointetTop - height / 2;
-            return { left, top };
-        }
-        else if (hovered && pointerPosition) {
-            return { left: -1000, top: -1000 };
-        }
-        return undefined;
-    }, [hovered, pointerPosition, size, svgContainer]);
+    const { tooltip, xAxis, yAxis, hovered, svgContainer, pointerPosition } = props;
+    const containerRect = (svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) || { left: 0, top: 0 };
+    const left = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[0]) || 0) + containerRect.left;
+    const top = ((pointerPosition === null || pointerPosition === void 0 ? void 0 : pointerPosition[1]) || 0) + containerRect.top;
+    const anchorRef = useVirtualElementRef({ rect: { top, left } });
     const content = React.useMemo(() => {
         var _a;
         if (!hovered) {
@@ -43,14 +19,9 @@ export const Tooltip = (props) => {
         const customTooltip = (_a = tooltip.renderer) === null || _a === void 0 ? void 0 : _a.call(tooltip, { hovered });
         return isNil(customTooltip) ? (React.createElement(DefaultContent, { hovered: hovered, xAxis: xAxis, yAxis: yAxis })) : (customTooltip);
     }, [hovered, tooltip, xAxis, yAxis]);
-    if (!position || !hovered) {
-        return null;
-    }
-    const { left, top } = position;
-    const style = {
-        position: 'absolute',
-        top,
-        left: left,
-    };
-    return (React.createElement("div", { ref: ref, className: b(), style: style }, content));
+    React.useEffect(() => {
+        window.dispatchEvent(new CustomEvent('scroll'));
+    }, [left, top]);
+    return hovered ? (React.createElement(Popup, { className: b(), open: true, anchorRef: anchorRef, offset: [0, 20], placement: ['right', 'left', 'top', 'bottom'], modifiers: [{ name: 'preventOverflow', options: { padding: 10, altAxis: true } }] },
+        React.createElement("div", { className: b('content') }, content))) : null;
 };

package/build/plugins/d3/renderer/components/styles.css

@@ -75,13 +75,22 @@
   fill: var(--g-color-text-primary);
 }
 
-.chartkit-d3-tooltip {
-  position: absolute;
+.chartkit-d3-tooltip[class] {
+  --g-popup-border-width: 0;
+  pointer-events: none;
+}
+
+.chartkit-d3-tooltip[class] > div {
+  animation-duration: unset;
+  animation-timing-function: unset;
+  animation-fill-mode: unset;
+}
+
+.chartkit-d3-tooltip__content {
   padding: 10px 14px;
   background-color: var(--g-color-infographics-tooltip-bg);
   border: 1px solid var(--g-color-line-generic);
   border-radius: 3px;
   box-shadow: 0 2px 12px var(--g-color-sfx-shadow);
-  z-index: 100001;
   text-wrap: nowrap;
 }

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

@@ -1,7 +1,7 @@
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3';
+import { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
 import type { PreparedAxis } from '../useChartOptions/types';
 import { PreparedSeries } from '../useSeries/types';
-import { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
 export type ChartScale = ScaleLinear<number, number> | ScaleBand<string> | ScaleTime<number, number>;
 type Args = {
     boundsWidth: number;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { scaleBand, scaleLinear, scaleUtc, extent } from 'd3';
+import { extent, scaleBand, scaleLinear, scaleUtc } from 'd3';
 import get from 'lodash/get';
-import { getOnlyVisibleSeries, getDataCategoryValue, getDomainDataYBySeries, getDomainDataXBySeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
+import { getDataCategoryValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };

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

@@ -1,4 +1,4 @@
-import type { BaseTextStyle, ChartKitWidgetData, ChartKitWidgetAxis, ChartKitWidgetAxisType, ChartKitWidgetAxisLabels, ChartMargin } from '../../../../../types';
+import type { BaseTextStyle, ChartKitWidgetAxis, ChartKitWidgetAxisLabels, ChartKitWidgetAxisType, ChartKitWidgetData, ChartMargin } from '../../../../../types';
 type PreparedAxisLabels = Omit<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartKitWidgetAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation'>> & {
     style: BaseTextStyle;
     rotation: number;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.d.ts

@@ -1,4 +1,4 @@
-import type { ChartKitWidgetSeries, ChartKitWidgetAxis } from '../../../../../types';
+import type { ChartKitWidgetAxis, ChartKitWidgetSeries } from '../../../../../types';
 import type { PreparedAxis } from './types';
 export declare const getPreparedXAxis: ({ xAxis, series, width, }: {
     xAxis?: ChartKitWidgetAxis | undefined;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -1,5 +1,5 @@
 import get from 'lodash/get';
-import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, xAxisTitleDefaults, } from '../../constants';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
 import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 function getLabelSettings({ axis, series, width, autoRotation = true, }) {

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
-import { axisLabelsDefaults, DEFAULT_AXIS_LABEL_FONT_SIZE, yAxisTitleDefaults, } from '../../constants';
-import { getHorisontalSvgTextHeight, formatAxisTickLabel, getClosestPointsRange, getScaleTicks, getLabelsSize, } from '../../utils';
+import { DEFAULT_AXIS_LABEL_FONT_SIZE, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
+import { formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = (args) => {
     const { axis, series } = args;

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

@@ -1,6 +1,6 @@
 import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
-import type { PreparedSeries, OnLegendItemClick } from './types';
+import type { OnLegendItemClick, PreparedSeries } from './types';
 type Args = {
     chartWidth: number;
     chartHeight: number;

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { group, scaleOrdinal } from 'd3';
 import { DEFAULT_PALETTE } from '../../constants';
 import { getSeriesNames } from '../../utils';
-import { getActiveLegendItems, getAllLegendItems } from './utils';
-import { getPreparedLegend, getLegendComponents } from './prepare-legend';
+import { getLegendComponents, getPreparedLegend } from './prepare-legend';
 import { getPreparedOptions } from './prepare-options';
 import { prepareSeries } from './prepareSeries';
+import { getActiveLegendItems, getAllLegendItems } from './utils';
 export const useSeries = (args) => {
     const { chartWidth, chartHeight, chartMargin, legend, preparedYAxis, series: { data: series, options: seriesOptions }, } = args;
     const preparedLegend = React.useMemo(() => getPreparedLegend({ legend, series }), [legend, series]);

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

@@ -1,5 +1,5 @@
 import { ScaleOrdinal } from 'd3';
-import { ChartKitWidgetSeriesOptions, AreaSeries } from '../../../../../types';
+import { AreaSeries, ChartKitWidgetSeriesOptions } from '../../../../../types';
 import { PreparedAreaSeries, PreparedLegend } from './types';
 export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_MARKER: {

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export const DEFAULT_LINE_WIDTH = 1;
 export const DEFAULT_MARKER = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: false });

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

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import { getRandomCKId } from '../../../../../utils';
-import { getSeriesStackId, prepareLegendSymbol } from './utils';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
+import { getSeriesStackId, prepareLegendSymbol } from './utils';
 export function prepareBarXSeries(args) {
     const { colorScale, series: seriesList, legend } = args;
     return seriesList.map((series) => {

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

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
 import { getRandomCKId } from '../../../../../utils';
-import { getSeriesStackId, prepareLegendSymbol } from './utils';
-import { DEFAULT_DATALABELS_STYLE } from './constants';
 import { getLabelsSize } from '../../utils';
+import { DEFAULT_DATALABELS_STYLE } from './constants';
+import { getSeriesStackId, prepareLegendSymbol } from './utils';
 function prepareDataLabels(series) {
     var _a;
     const enabled = get(series, 'dataLabels.enabled', false);

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.d.ts

@@ -1,6 +1,6 @@
 import type { ChartKitWidgetData } from '../../../../../types';
 import type { PreparedAxis, PreparedChart } from '../useChartOptions/types';
-import type { PreparedLegend, PreparedSeries, LegendItem } from './types';
+import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare const getPreparedLegend: (args: {
     legend: ChartKitWidgetData['legend'];
     series: ChartKitWidgetData['series']['data'];

package/build/plugins/d3/renderer/hooks/useSeries/prepare-legend.js

@@ -1,7 +1,7 @@
+import { select } from 'd3';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { select } from 'd3';
 import { legendDefaults } from '../../constants';
 import { getHorisontalSvgTextHeight } from '../../utils';
 import { getBoundsWidth } from '../useChartDimensions';

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

@@ -1,7 +1,7 @@
 import { ScaleOrdinal } from 'd3';
 import { DashStyle } from '../../../../../constants';
 import { ChartKitWidgetSeriesOptions, LineSeries } from '../../../../../types';
-import { PreparedLineSeries, PreparedLegend } from './types';
+import { PreparedLegend, PreparedLineSeries } from './types';
 export declare const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export declare const DEFAULT_LINE_WIDTH = 1;
 export declare const DEFAULT_DASH_STYLE = DashStyle.Solid;

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

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { DashStyle, LineCap } from '../../../../../constants';
-import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE, DEFAULT_HALO_OPTIONS, DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 export const DEFAULT_LEGEND_SYMBOL_SIZE = 16;
 export const DEFAULT_LINE_WIDTH = 1;
 export const DEFAULT_DASH_STYLE = DashStyle.Solid;

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

@@ -1,7 +1,7 @@
 import { scaleOrdinal } from 'd3';
-import { DEFAULT_PALETTE } from '../../constants';
-import { getRandomCKId } from '../../../../../utils';
 import get from 'lodash/get';
+import { getRandomCKId } from '../../../../../utils';
+import { DEFAULT_PALETTE } from '../../constants';
 import { DEFAULT_DATALABELS_PADDING, DEFAULT_DATALABELS_STYLE } from './constants';
 import { prepareLegendSymbol } from './utils';
 export function preparePieSeries(args) {
@@ -10,7 +10,7 @@ export function preparePieSeries(args) {
     const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE);
     const stackId = getRandomCKId();
     const seriesHoverState = get(seriesOptions, 'pie.states.hover');
-    const preparedSeries = series.data.map((dataItem) => {
+    const preparedSeries = series.data.map((dataItem, i) => {
         var _a, _b, _c;
         const result = {
             type: 'pie',
@@ -29,7 +29,7 @@ export function preparePieSeries(args) {
             value: dataItem.value,
             visible: typeof dataItem.visible === 'boolean' ? dataItem.visible : true,
             name: dataItem.name,
-            id: '',
+            id: `Series ${i}`,
             color: dataItem.color || colorScale(dataItem.name),
             legend: {
                 enabled: get(series, 'legend.enabled', legend.enabled),

package/build/plugins/d3/renderer/hooks/useSeries/prepare-scatter.d.ts

@@ -1,6 +1,6 @@
 import { ScaleOrdinal } from 'd3';
-import type { PreparedLegend, PreparedScatterSeries } from './types';
 import type { ChartKitWidgetSeriesOptions, ScatterSeries } from '../../../../../types';
+import type { PreparedLegend, PreparedScatterSeries } from './types';
 interface PrepareScatterSeriesArgs {
     colorScale: ScaleOrdinal<string, string>;
     series: ScatterSeries[];

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

@@ -1,9 +1,9 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
+import { getRandomCKId } from '../../../../../utils';
 import { getSymbolType } from '../../utils';
-import { prepareLegendSymbol } from './utils';
 import { DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS } from './constants';
-import { getRandomCKId } from '../../../../../utils';
+import { prepareLegendSymbol } from './utils';
 function prepareMarker(series, seriesOptions, index) {
     const seriesHoverState = get(seriesOptions, 'scatter.states.hover');
     const markerNormalState = Object.assign(Object.assign({}, DEFAULT_POINT_MARKER_OPTIONS), { enabled: true, symbol: series.symbolType || getSymbolType(index) });

package/build/plugins/d3/renderer/hooks/useSeries/prepareSeries.js

@@ -1,9 +1,9 @@
 import { ChartKitError } from '../../../../../libs';
-import { prepareLineSeries } from './prepare-line';
+import { prepareArea } from './prepare-area';
 import { prepareBarXSeries } from './prepare-bar-x';
 import { prepareBarYSeries } from './prepare-bar-y';
+import { prepareLineSeries } from './prepare-line';
 import { preparePieSeries } from './prepare-pie';
-import { prepareArea } from './prepare-area';
 import { prepareScatterSeries } from './prepare-scatter';
 import { prepareTreemap } from './prepare-treemap';
 export function prepareSeries(args) {

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

@@ -1,6 +1,6 @@
-import { BarXSeries, BarXSeriesData, BaseTextStyle, ChartKitWidgetLegend, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, BarYSeries, BarYSeriesData, LineSeries, LineSeriesData, ConnectorShape, ConnectorCurve, PathLegendSymbolOptions, SymbolLegendSymbolOptions, AreaSeries, AreaSeriesData, TreemapSeries, TreemapSeriesData } from '../../../../../types';
-import type { SeriesOptionsDefaults } from '../../constants';
 import { DashStyle, LayoutAlgorithm, LineCap, SymbolType } from '../../../../../constants';
+import { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartKitWidgetLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RectLegendSymbolOptions, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData } from '../../../../../types';
+import type { SeriesOptionsDefaults } from '../../constants';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;

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

@@ -1,6 +1,6 @@
-import { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
-import { ChartKitWidgetSeries } from '../../../../../types';
 import { SymbolType } from '../../../../../constants';
+import { ChartKitWidgetSeries } from '../../../../../types';
+import { PreparedLegendSymbol, PreparedSeries, StackedSeries } from './types';
 export declare const getActiveLegendItems: (series: PreparedSeries[]) => string[];
 export declare const getAllLegendItems: (series: PreparedSeries[]) => string[];
 export declare function prepareLegendSymbol(series: ChartKitWidgetSeries, symbolType?: `${SymbolType}`): PreparedLegendSymbol;

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

@@ -1,7 +1,7 @@
 import memoize from 'lodash/memoize';
+import { SymbolType } from '../../../../../constants';
 import { getRandomCKId } from '../../../../../utils';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
-import { SymbolType } from '../../../../../constants';
 export const getActiveLegendItems = (series) => {
     return series.reduce((acc, s) => {
         if (s.legend.enabled && s.visible) {

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;