@gravity-ui/chartkit 4.20.1 → 5.1.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) => {
@@ -60,6 +60,15 @@ export const Chart = (props) => {
         yScale,
         svgContainer: svgRef.current,
     });
+    React.useEffect(() => {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click) {
+            dispatcher.on('click-chart', (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.click);
+        }
+        return () => {
+            dispatcher.on('click-chart', null);
+        };
+    }, [dispatcher]);
     const boundsOffsetTop = chart.margin.top;
     const boundsOffsetLeft = chart.margin.left + getWidthOccupiedByYAxis({ preparedAxis: yAxis });
     return (React.createElement(React.Fragment, null,

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);
@@ -101,7 +101,7 @@ export const TooltipTriggerArea = (args) => {
         });
         return sort(result, (item) => item.y);
     }, [shapesData]);
-    const handleMouseMove = (e) => {
+    const getShapeData = (point) => {
         var _a, _b;
         const { left: ownLeft, top: ownTop } = ((_a = rectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
             left: 0,
@@ -111,9 +111,9 @@ export const TooltipTriggerArea = (args) => {
             left: 0,
             top: 0,
         };
-        const [pointerX, pointerY] = pointer(e, svgContainer);
-        const hoverShapeData = [];
-        hoverShapeData === null || hoverShapeData === void 0 ? void 0 : hoverShapeData.push(...getBarXShapeData({
+        const [pointerX, pointerY] = point; //pointer(e, svgContainer);
+        const result = [];
+        result === null || result === void 0 ? void 0 : result.push(...getBarXShapeData({
             shapesData,
             point: [pointerX, pointerY],
             left: ownLeft - containerLeft,
@@ -127,6 +127,11 @@ export const TooltipTriggerArea = (args) => {
             data: barYData,
             point: [pointerX - (ownLeft - containerLeft), pointerY - (ownTop - containerTop)],
         }));
+        return result;
+    };
+    const handleMouseMove = (e) => {
+        const [pointerX, pointerY] = pointer(e, svgContainer);
+        const hoverShapeData = getShapeData([pointerX, pointerY]);
         if (hoverShapeData.length) {
             const position = [pointerX, pointerY];
             dispatcher.call('hover-shape', e.target, hoverShapeData, position);
@@ -137,5 +142,12 @@ export const TooltipTriggerArea = (args) => {
         throttledHandleMouseMove.cancel();
         dispatcher.call('hover-shape', {}, undefined);
     };
-    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave }));
+    const handleClick = (e) => {
+        const [pointerX, pointerY] = pointer(e, svgContainer);
+        const shapeData = getShapeData([pointerX, pointerY]);
+        if (shapeData.length) {
+            dispatcher.call('click-chart', undefined, { point: get(shapeData, '[0].data'), series: get(shapeData, '[0].series') }, e);
+        }
+    };
+    return (React.createElement("rect", { ref: rectRef, width: boundsWidth, height: boundsHeight, fill: "transparent", onMouseMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleClick }));
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import isNil from 'lodash/isNil';
 import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
+import isNil from 'lodash/isNil';
 import { block } from '../../../../../utils/cn';
 import { DefaultContent } from './DefaultContent';
 export * from './TooltipTriggerArea';

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

@@ -76,7 +76,7 @@
 }
 
 .chartkit-d3-tooltip[class] {
-  --yc-popup-border-width: 0;
+  --g-popup-border-width: 0;
   pointer-events: none;
 }
 

package/build/plugins/d3/renderer/d3-dispatcher.js

@@ -1,4 +1,4 @@
 import { dispatch } from 'd3';
 export const getD3Dispatcher = () => {
-    return dispatch('hover-shape');
+    return dispatch('hover-shape', 'click-chart');
 };

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;
@@ -72,6 +72,7 @@ export function prepareLineSeries(args) {
             marker: prepareMarker(series, seriesOptions),
             dashStyle: dashStyle,
             linecap: prepareLinecap(dashStyle, series, seriesOptions),
+            opacity: get(series, 'opacity', null),
         };
         return prepared;
     }, []);

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) {
@@ -52,6 +52,7 @@ export function preparePieSeries(args) {
                 },
             },
             renderCustomShape: series.renderCustomShape,
+            opacity: get(dataItem, 'opacity', null),
         };
         return result;
     });

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>;
@@ -130,6 +130,7 @@ export type PreparedPieSeries = {
         };
     };
     renderCustomShape?: PieSeries['renderCustomShape'];
+    opacity: number | null;
 } & BasePreparedSeries;
 export type PreparedLineSeries = {
     type: LineSeries['type'];
@@ -161,6 +162,7 @@ export type PreparedLineSeries = {
     };
     dashStyle: DashStyle;
     linecap: LineCap;
+    opacity: number | null;
 } & BasePreparedSeries;
 export type PreparedAreaSeries = {
     type: AreaSeries['type'];

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) {