@cloud-ru/uikit-product-charts 0.13.12 → 0.13.13

package/dist/cjs/components/InteractiveChart/plugins/wheelZoomPlugin.d.ts

@@ -0,0 +1,5 @@
+export declare function wheelZoomPlugin(opts: any): {
+    hooks: {
+        ready: (u: any) => void;
+    };
+};

package/dist/cjs/components/InteractiveChart/plugins/wheelZoomPlugin.js

@@ -0,0 +1,96 @@
+"use strict";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wheelZoomPlugin = wheelZoomPlugin;
+function wheelZoomPlugin(opts) {
+    const factor = opts.factor || 0.75;
+    let xMin, xMax, yMin, yMax, xRange, yRange;
+    function clamp(nRange, nMin, nMax, fRange, fMin, fMax) {
+        if (nRange > fRange) {
+            nMin = fMin;
+            nMax = fMax;
+        }
+        else if (nMin < fMin) {
+            nMin = fMin;
+            nMax = fMin + nRange;
+        }
+        else if (nMax > fMax) {
+            nMax = fMax;
+            nMin = fMax - nRange;
+        }
+        return [nMin, nMax];
+    }
+    return {
+        hooks: {
+            ready: u => {
+                xMin = u.scales.x.min;
+                xMax = u.scales.x.max;
+                yMin = u.scales.y.min;
+                yMax = u.scales.y.max;
+                xRange = xMax - xMin;
+                yRange = yMax - yMin;
+                const plot = u.root.querySelector('.u-over');
+                const rect = plot.getBoundingClientRect();
+                // wheel drag pan
+                plot.addEventListener('mousedown', e => {
+                    if (e.button == 1) {
+                        //	plot.style.cursor = "move";
+                        e.preventDefault();
+                        const left0 = e.clientX;
+                        //	let top0 = e.clientY;
+                        const scXMin0 = u.scales.x.min;
+                        const scXMax0 = u.scales.x.max;
+                        const xUnitsPerPx = u.posToVal(1, 'x') - u.posToVal(0, 'x');
+                        function onmove(e) {
+                            e.preventDefault();
+                            const left1 = e.clientX;
+                            //	let top1 = e.clientY;
+                            const dx = xUnitsPerPx * (left1 - left0);
+                            u.setScale('x', {
+                                min: scXMin0 - dx,
+                                max: scXMax0 - dx,
+                            });
+                        }
+                        function onup(e) {
+                            document.removeEventListener('mousemove', onmove);
+                            document.removeEventListener('mouseup', onup);
+                        }
+                        document.addEventListener('mousemove', onmove);
+                        document.addEventListener('mouseup', onup);
+                    }
+                });
+                // wheel scroll zoom
+                plot.addEventListener('wheel', e => {
+                    e.preventDefault();
+                    const { left, top } = u.cursor;
+                    const leftPct = left / rect.width;
+                    const btmPct = 1 - top / rect.height;
+                    const xVal = u.posToVal(left, 'x');
+                    const yVal = u.posToVal(top, 'y');
+                    const oxRange = u.scales.x.max - u.scales.x.min;
+                    const oyRange = u.scales.y.max - u.scales.y.min;
+                    const nxRange = e.deltaY < 0 ? oxRange * factor : oxRange / factor;
+                    let nxMin = xVal - leftPct * nxRange;
+                    let nxMax = nxMin + nxRange;
+                    [nxMin, nxMax] = clamp(nxRange, nxMin, nxMax, xRange, xMin, xMax);
+                    const nyRange = e.deltaY < 0 ? oyRange * factor : oyRange / factor;
+                    let nyMin = yVal - btmPct * nyRange;
+                    let nyMax = nyMin + nyRange;
+                    [nyMin, nyMax] = clamp(nyRange, nyMin, nyMax, yRange, yMin, yMax);
+                    u.batch(() => {
+                        u.setScale('x', {
+                            min: nxMin,
+                            max: nxMax,
+                        });
+                        u.setScale('y', {
+                            min: nyMin,
+                            max: nyMax,
+                        });
+                    });
+                });
+            },
+        },
+    };
+}

package/dist/cjs/components/InteractiveChart/styles.module.css

@@ -0,0 +1,25 @@
+:global .interactive-chart-wrapper{
+}
+:global .interactive-chart-wrapper .uplot{
+  font-family:inherit;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:16px 0;
+  border-radius:8px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+:global .interactive-chart-wrapper .uplot .u-title{
+  font-size:20px;
+  text-align:unset;
+  padding-left:24px;
+}
+:global .interactive-chart-wrapper .u-hz .u-cursor-x, :global .interactive-chart-wrapper .u-vt .u-cursor-y, :global .interactive-chart-wrapper .u-hz .u-cursor-y, :global .interactive-chart-wrapper .u-vt .u-cursor-x{
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
+:global .interactive-chart-wrapper .u-select{
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+:global .interactive-chart-wrapper table .u-series .u-marker{
+  width:16px;
+  height:16px;
+  border-radius:16px;
+}

package/dist/cjs/components/InteractiveChart/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { DRAW_STYLES, LINE_INTERPOLATIONS, PLOT_TYPES } from './constants';
+export type PlotType = ValueOf<typeof PLOT_TYPES>;
+export type LineInterpolation = ValueOf<typeof LINE_INTERPOLATIONS>;
+export type DrawStyle = ValueOf<typeof DRAW_STYLES>;

package/dist/cjs/components/InteractiveChart/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/PieChart/Legend/Legend.d.ts

@@ -0,0 +1,21 @@
+import { MouseEvent } from 'react';
+import { TextLike } from '../types';
+type LegendItem = {
+    label: TextLike;
+    value: TextLike;
+    color?: string;
+    id?: string;
+};
+type LegendItemProps = LegendItem & {
+    size: 's' | 'm' | 'l';
+    onItemClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+declare function LegendItem({ color, label, value, size, onItemClick }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
+type LegendProps = {
+    data: Array<LegendItem>;
+    typographySize: 's' | 'm' | 'l';
+    legendTitle?: string;
+    onItemClick?: (event: MouseEvent<HTMLAnchorElement>, data: LegendItem) => void;
+};
+export declare function Legend({ data, legendTitle, typographySize, onItemClick }: LegendProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/PieChart/Legend/Legend.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Legend = Legend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const divider_1 = require("@snack-uikit/divider");
+const link_1 = require("@snack-uikit/link");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function LegendItem({ color, label, value, size, onItemClick }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.legendItemWrapper, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.legendItemTitle, children: [color && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.dot, style: { '--color': color } }), (0, jsx_runtime_1.jsx)(link_1.Link, { onClick: onItemClick, text: String(label), size: size })] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.legendValue, children: value })] }));
+}
+function Legend({ data, legendTitle, typographySize, onItemClick }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.legend, children: [legendTitle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { purpose: 'label', family: 'sans', size: typographySize, children: legendTitle }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.legendDividerWrapper, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) })] })), data.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LegendItem, Object.assign({}, item, { size: typographySize, onItemClick: onItemClick ? event => onItemClick(event, item) : undefined })), index !== data.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.legendDividerWrapper, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }))] }, `legend_${item.label}_${index}`)))] }));
+}

package/dist/cjs/components/PieChart/Legend/index.d.ts

@@ -0,0 +1 @@
+export * from './Legend';

package/dist/cjs/components/PieChart/Legend/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Legend"), exports);

package/dist/cjs/components/PieChart/Legend/styles.module.css

@@ -0,0 +1,50 @@
+.legend{
+  display:flex;
+  flex-direction:column;
+  color:var(--sys-neutral-text-support, #6d707f);
+  padding-right:8px;
+}
+
+.legendItemWrapper{
+  color:var(--sys-neutral-text-main, #41424e);
+  display:flex;
+  align-items:center;
+  flex-direction:row;
+  gap:8px;
+  justify-content:space-between;
+}
+
+.dot{
+  display:inline-block;
+  min-width:8px;
+  min-height:8px;
+  width:8px;
+  height:8px;
+  border-radius:100%;
+  margin-right:12px;
+  background-color:var(--color);
+}
+
+.legendDividerWrapper{
+  margin:16px 0;
+}
+
+.legendItemTitle{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  align-items:center;
+}
+
+.legendValue{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}

package/dist/cjs/components/PieChart/Pie.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, MouseEvent } from 'react';
+import { DataType, LabelRenderFunction } from './types';
+type PieProps = {
+    data: DataType[];
+    label: LabelRenderFunction<DataType>;
+    onMouseOut: () => void;
+    onMouseOver: (event: MouseEvent<SVGPathElement>, dataIndex: number) => void;
+    onMouseDown: (event: MouseEvent<SVGPathElement>, dataIndex: number) => void;
+    radius: number;
+    innerRadius: number;
+    segmentsShift: number;
+    segmentsStyle: CSSProperties;
+    hoveredIndex?: number;
+    style: CSSProperties;
+};
+export declare function Pie({ data, hoveredIndex, radius, innerRadius, segmentsShift, onMouseOut, label, style, segmentsStyle, onMouseOver, onMouseDown, }: PieProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/PieChart/Pie.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pie = Pie;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const d3_shape_1 = require("d3-shape");
+const react_1 = require("react");
+function Pie({ data, hoveredIndex, radius, innerRadius, segmentsShift, onMouseOut, label, style, segmentsStyle, onMouseOver, onMouseDown, }) {
+    const pieSegments = (0, d3_shape_1.pie)()
+        .sort(null)
+        .value((d) => d.value)(data);
+    const getHoveredPath = (0, d3_shape_1.arc)()
+        .outerRadius(radius + 1)
+        .innerRadius(innerRadius + 1)
+        .startAngle(d => d.startAngle + Math.PI / 2)
+        .endAngle(d => d.endAngle + Math.PI / 2)
+        .padAngle(segmentsShift);
+    const getPath = (0, d3_shape_1.arc)()
+        .outerRadius(radius)
+        .innerRadius(innerRadius)
+        .startAngle(d => d.startAngle + Math.PI / 2)
+        .endAngle(d => d.endAngle + Math.PI / 2)
+        .padAngle(segmentsShift);
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: '0 0 100 100', width: '100%', height: '100%', style: style, children: (0, jsx_runtime_1.jsx)("g", { transform: 'translate(50,50)', children: pieSegments.map((segment, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { onMouseOver: e => onMouseOver(e, index), onMouseOut: onMouseOut, onMouseDown: e => onMouseDown(e, index), fill: segment.data.color, d: hoveredIndex === index ? String(getHoveredPath(segment)) : String(getPath(segment)), style: segmentsStyle }), label({ dataEntry: segment.data, dataIndex: index })] }, index))) }) }));
+}

package/dist/cjs/components/PieChart/PieChart.d.ts

@@ -0,0 +1,3 @@
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { PieChartProps } from './types';
+export declare function PieChart({ options: { width, height, title, legendTitle, typographySize }, data, aggregatedLegend, onPieSegmentClick, onLegendItemClick, className, ...rest }: WithSupportProps<PieChartProps>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PieChart/PieChart.js

@@ -0,0 +1,68 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = PieChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ft_formatters_1 = require("@cloud-ru/ft-formatters");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const scroll_1 = require("@snack-uikit/scroll");
+const typography_1 = require("@snack-uikit/typography");
+const colors_1 = require("../../constants/colors");
+const Legend_1 = require("./Legend");
+const Pie_1 = require("./Pie");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PieChart(_a) {
+    var { options: { width, height, title, legendTitle, typographySize = 'l' }, data, aggregatedLegend, onPieSegmentClick, onLegendItemClick, className } = _a, rest = __rest(_a, ["options", "data", "aggregatedLegend", "onPieSegmentClick", "onLegendItemClick", "className"]);
+    const [hovered, setHovered] = (0, react_1.useState)(undefined);
+    const colorizedData = (0, react_1.useMemo)(() => data.map((x, index) => {
+        const colorsKey = Object.values(colors_1.SERIES_COLORS);
+        const chartColor = colors_1.CHART_SERIES_COLORS[colorsKey[index % colorsKey.length]];
+        return Object.assign(Object.assign({}, x), { color: x.color || chartColor });
+    }), [data]);
+    const pieStyles = (0, react_1.useMemo)(() => ({ overflow: 'overlay' }), []);
+    const segmentStyles = (0, react_1.useMemo)(() => ({ transition: 'all .3s', cursor: 'pointer' }), []);
+    const onMouseOverCallback = (0, react_1.useCallback)((_, index) => setHovered(index), []);
+    const onMouseOutCallback = (0, react_1.useCallback)(() => setHovered(undefined), []);
+    const onMouseDownCallback = (0, react_1.useCallback)((event, index) => {
+        event.preventDefault();
+        if (onPieSegmentClick) {
+            onPieSegmentClick(data[index]);
+        }
+    }, [data, onPieSegmentClick]);
+    const onColorizedLegendItemClick = (0, react_1.useMemo)(() => {
+        if (!onLegendItemClick) {
+            return undefined;
+        }
+        return (event, item) => {
+            event.preventDefault();
+            onLegendItemClick(item);
+        };
+    }, [onLegendItemClick]);
+    const onAggregatedItemClick = (0, react_1.useMemo)(() => {
+        const handleClick = aggregatedLegend === null || aggregatedLegend === void 0 ? void 0 : aggregatedLegend.onAggregatedLegendItemClick;
+        if (!handleClick) {
+            return undefined;
+        }
+        return (event, item) => {
+            event.preventDefault();
+            handleClick(item);
+        };
+    }, [aggregatedLegend]);
+    const labelRenderer = (0, react_1.useCallback)(({ dataEntry, dataIndex }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("text", { className: styles_module_scss_1.default.svgText, x: 0, y: -4, "data-hovered": hovered === dataIndex || undefined, children: (0, ft_formatters_1.truncateString)(String(dataEntry.label), 15) }, `${dataIndex}_label`), (0, jsx_runtime_1.jsx)("text", { className: styles_module_scss_1.default.svgText, x: 0, y: 4, "data-hovered": hovered === dataIndex || undefined, "data-bolder": 'true', children: dataEntry.value }, `${dataIndex}_value`)] })), [hovered]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { className: (0, classnames_1.default)(className, styles_module_scss_1.default.wrapper), style: { '--width': width ? `${width}px` : undefined, '--height': height ? `${height}px` : undefined }, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { purpose: 'title', family: 'sans', size: typographySize, className: styles_module_scss_1.default.title, children: title }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.legendWrapper, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 's', children: (0, jsx_runtime_1.jsx)(Legend_1.Legend, { data: colorizedData, legendTitle: legendTitle, onItemClick: onColorizedLegendItemClick, typographySize: typographySize }) }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pieWrapper, children: (0, jsx_runtime_1.jsx)(Pie_1.Pie, { style: pieStyles, radius: 46, innerRadius: 23, label: labelRenderer, data: colorizedData, segmentsStyle: segmentStyles, segmentsShift: 0.015, hoveredIndex: hovered, onMouseOver: onMouseOverCallback, onMouseOut: onMouseOutCallback, onMouseDown: onMouseDownCallback }) }), aggregatedLegend && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.legendWrapper, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { size: 's', children: (0, jsx_runtime_1.jsx)(Legend_1.Legend, { data: aggregatedLegend.data, legendTitle: aggregatedLegend.title, onItemClick: onAggregatedItemClick, typographySize: typographySize }) }) }))] })] })));
+}

package/dist/cjs/components/PieChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PieChart';
+export type { PieChartProps } from './types';

package/dist/cjs/components/PieChart/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PieChart"), exports);

package/dist/cjs/components/PieChart/styles.module.css

@@ -0,0 +1,52 @@
+.wrapper{
+  display:flex;
+  width:var(--width, 100%);
+  height:var(--height, 100%);
+  flex-direction:column;
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-radius:8px;
+  padding:24px;
+}
+
+.title{
+  padding-bottom:24px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.contentWrapper{
+  display:flex;
+  flex-direction:row;
+  gap:24px;
+  height:calc(100% - 50px);
+  justify-content:space-between;
+}
+
+.legendWrapper{
+  min-width:25%;
+  max-width:33%;
+}
+
+.pieWrapper{
+  height:100%;
+  text-align:center;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.svgText{
+  text-anchor:middle;
+  visibility:hidden;
+  width:30px;
+  font-size:5px;
+  word-break:break-all;
+  white-space:nowrap;
+  fill:var(--sys-neutral-text-main, #41424e);
+}
+.svgText[data-hovered]{
+  visibility:visible;
+}
+.svgText[data-bolder]{
+  font-weight:700;
+}

package/dist/cjs/components/PieChart/types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export type TextLike = string | number;
+export type LegendType = {
+    label: TextLike;
+    value: TextLike;
+    id?: string;
+};
+export type DataType = {
+    label: TextLike;
+    value: number;
+    id?: string;
+    color?: string;
+};
+export type PieChartProps = {
+    data: DataType[];
+    options: {
+        title: string;
+        width?: number;
+        height?: number;
+        legendTitle?: string;
+        typographySize?: 's' | 'm' | 'l';
+    };
+    onPieSegmentClick?: (data: DataType) => void;
+    onLegendItemClick?: (data: LegendType) => void;
+    aggregatedLegend?: {
+        data: LegendType[];
+        title: string;
+        onAggregatedLegendItemClick?: (data: LegendType) => void;
+    };
+    className?: string;
+};
+export type LabelRenderProps<DataType> = {
+    dataEntry: DataType;
+    dataIndex: number;
+};
+export type LabelRenderFunction<DataType> = (labelRenderProps: LabelRenderProps<DataType>) => ReactNode;

package/dist/cjs/components/PieChart/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './InteractiveChart';
+export * from './PieChart';
+export * from './HeatMapChart';
+export * from './BagelChart';

package/dist/cjs/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./InteractiveChart"), exports);
+__exportStar(require("./PieChart"), exports);
+__exportStar(require("./HeatMapChart"), exports);
+__exportStar(require("./BagelChart"), exports);

package/dist/cjs/constants/colors.d.ts

@@ -0,0 +1,36 @@
+import { ValueOf } from '@snack-uikit/utils';
+export declare const COLOR_CONTAINER_CLASSNAME = "interactive-chart-wrapper";
+export declare const SERIES_COLORS: {
+    Green1: string;
+    Blue1: string;
+    Violet1: string;
+    Crimson1: string;
+    Green2: string;
+    Blue2: string;
+    Violet2: string;
+    Crimson2: string;
+    Green3: string;
+    Blue3: string;
+    Violet3: string;
+    Crimson3: string;
+    Green4: string;
+    Blue4: string;
+    Violet4: string;
+    Crimson4: string;
+};
+export type SeriesColor = ValueOf<typeof SERIES_COLORS>;
+export type SeriesColorMap = Record<SeriesColor, string>;
+export declare const CHART_SERIES_COLORS: SeriesColorMap;
+export declare const OTHER_COLORS: {
+    ShadowColor: string;
+    LineColor: string;
+    TooltipBackgroundColor: string;
+    TooltipColor: string;
+    ColumnHighlightColor: string;
+    AxisColor: string;
+    LabelColor: string;
+};
+export type OtherColor = ValueOf<typeof OTHER_COLORS>;
+export type OtherColorMap = Record<OtherColor, string>;
+export declare const CHART_OTHER_COLORS: OtherColorMap;
+export type ColorMap = SeriesColorMap & OtherColorMap;

package/dist/cjs/constants/colors.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHART_OTHER_COLORS = exports.OTHER_COLORS = exports.CHART_SERIES_COLORS = exports.SERIES_COLORS = exports.COLOR_CONTAINER_CLASSNAME = void 0;
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+exports.COLOR_CONTAINER_CLASSNAME = 'interactive-chart-wrapper';
+exports.SERIES_COLORS = {
+    Green1: 'green1',
+    Blue1: 'blue1',
+    Violet1: 'violet1',
+    Crimson1: 'crimson1',
+    Green2: 'green2',
+    Blue2: 'blue2',
+    Violet2: 'violet2',
+    Crimson2: 'crimson2',
+    Green3: 'green3',
+    Blue3: 'blue3',
+    Violet3: 'violet3',
+    Crimson3: 'crimson3',
+    Green4: 'green4',
+    Blue4: 'blue4',
+    Violet4: 'violet4',
+    Crimson4: 'crimson4',
+};
+exports.CHART_SERIES_COLORS = {
+    [exports.SERIES_COLORS.Green1]: figma_tokens_cloud_platform_1.themeVars.sys.green.accentDefault,
+    [exports.SERIES_COLORS.Green2]: figma_tokens_cloud_platform_1.themeVars.sys.green.textLight,
+    [exports.SERIES_COLORS.Green3]: figma_tokens_cloud_platform_1.themeVars.sys.green.textDisabled,
+    [exports.SERIES_COLORS.Green4]: figma_tokens_cloud_platform_1.themeVars.sys.green.decorActivated,
+    [exports.SERIES_COLORS.Blue1]: figma_tokens_cloud_platform_1.themeVars.sys.blue.accentDefault,
+    [exports.SERIES_COLORS.Blue2]: figma_tokens_cloud_platform_1.themeVars.sys.blue.textLight,
+    [exports.SERIES_COLORS.Blue3]: figma_tokens_cloud_platform_1.themeVars.sys.blue.textDisabled,
+    [exports.SERIES_COLORS.Blue4]: figma_tokens_cloud_platform_1.themeVars.sys.blue.decorActivated,
+    [exports.SERIES_COLORS.Violet1]: figma_tokens_cloud_platform_1.themeVars.sys.violet.accentDefault,
+    [exports.SERIES_COLORS.Violet2]: figma_tokens_cloud_platform_1.themeVars.sys.violet.textLight,
+    [exports.SERIES_COLORS.Violet3]: figma_tokens_cloud_platform_1.themeVars.sys.violet.textDisabled,
+    [exports.SERIES_COLORS.Violet4]: figma_tokens_cloud_platform_1.themeVars.sys.violet.decorActivated,
+    [exports.SERIES_COLORS.Crimson1]: figma_tokens_cloud_platform_1.themeVars.sys.pink.accentDefault,
+    [exports.SERIES_COLORS.Crimson2]: figma_tokens_cloud_platform_1.themeVars.sys.pink.textLight,
+    [exports.SERIES_COLORS.Crimson3]: figma_tokens_cloud_platform_1.themeVars.sys.pink.textDisabled,
+    [exports.SERIES_COLORS.Crimson4]: figma_tokens_cloud_platform_1.themeVars.sys.pink.decorActivated,
+};
+exports.OTHER_COLORS = {
+    ShadowColor: 'shadowColor',
+    LineColor: 'lineColor',
+    TooltipBackgroundColor: 'tooltipBackgroundColor',
+    TooltipColor: 'tooltipColor',
+    ColumnHighlightColor: 'columnHighlightColor',
+    AxisColor: 'axisColor',
+    LabelColor: 'labelColor',
+};
+exports.CHART_OTHER_COLORS = {
+    [exports.OTHER_COLORS.ShadowColor]: figma_tokens_cloud_platform_1.themeVars.sys.neutral.accentDefault,
+    [exports.OTHER_COLORS.LineColor]: figma_tokens_cloud_platform_1.themeVars.sys.neutral.onAccent,
+    [exports.OTHER_COLORS.TooltipBackgroundColor]: figma_tokens_cloud_platform_1.themeVars.sys.invertNeutral.background,
+    [exports.OTHER_COLORS.TooltipColor]: figma_tokens_cloud_platform_1.themeVars.sys.invertNeutral.textMain,
+    [exports.OTHER_COLORS.ColumnHighlightColor]: figma_tokens_cloud_platform_1.themeVars.sys.neutral.decorDefault,
+    [exports.OTHER_COLORS.AxisColor]: figma_tokens_cloud_platform_1.themeVars.sys.neutral.decorDefault,
+    [exports.OTHER_COLORS.LabelColor]: figma_tokens_cloud_platform_1.themeVars.sys.neutral.textSupport,
+};

package/dist/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/esm/components/BagelChart/BagelChart.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type BagelChartProps = WithSupportProps<{
+    className: string;
+    value: number;
+    total: number;
+    title?: React.ReactNode;
+}>;
+export declare function BagelChart({ value, total, title, className, ...rest }: BagelChartProps): import("react/jsx-runtime").JSX.Element;