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

package/dist/esm/components/BagelChart/BagelChart.js

@@ -0,0 +1,25 @@
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { PieChart } from 'react-minimal-pie-chart';
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { NumberFormatter } from '@sbercloud/uikit-product-localization';
+import { error, extractSupportProps } from '@sbercloud/uikit-product-utils';
+import styles from './styles.module.css';
+import { getSegmentColor } from './utils';
+export function BagelChart(_a) {
+    var { value, total, title, className } = _a, rest = __rest(_a, ["value", "total", "title", "className"]);
+    error('Value is too long', value > 9999999);
+    error('Total is too long', total > 999999999);
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [title && _jsx("div", { className: styles.titleWrapper, children: title }), _jsx(PieChart, { data: [{ value, color: getSegmentColor({ value, total }) }], totalValue: total, background: themeVars.sys.neutral.decorDefault, startAngle: 270, lineWidth: 15, label: () => (_jsxs(_Fragment, { children: [_jsx("text", { className: styles.value, x: 50, y: 45, children: _jsx(NumberFormatter, { value: value }) }), _jsx("text", { className: styles.limit, x: 50, y: 65, children: _jsx(NumberFormatter, { value: total }) })] })), labelPosition: 0 })] })));
+}

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

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

package/dist/esm/components/BagelChart/index.js

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

package/dist/esm/components/BagelChart/styles.module.css

@@ -0,0 +1,39 @@
+.wrapper{
+  min-width:100px;
+}
+
+.titleWrapper{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-support, #6d707f);
+  margin-bottom:8px;
+  display:flex;
+  justify-content:center;
+  gap:4px;
+}
+
+.value{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  fill:var(--sys-neutral-text-main, #41424e);
+  text-anchor:middle;
+}
+
+.limit{
+  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);
+  fill:var(--sys-neutral-text-support, #6d707f);
+  text-anchor:middle;
+}

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

@@ -0,0 +1,4 @@
+export declare function getSegmentColor({ value, total }: {
+    value: number;
+    total: number;
+}): string;

package/dist/esm/components/BagelChart/utils.js

@@ -0,0 +1,12 @@
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+export function getSegmentColor({ value, total }) {
+    const occupancyPercent = (value / total) * 100;
+    let segmentColor = themeVars.sys.green.accentDefault;
+    if (occupancyPercent > 50 && occupancyPercent <= 75) {
+        segmentColor = themeVars.sys.yellow.accentDefault;
+    }
+    else if (occupancyPercent > 75) {
+        segmentColor = themeVars.sys.red.accentDefault;
+    }
+    return segmentColor;
+}

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

@@ -0,0 +1,7 @@
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { XAxisPosition } from './constants';
+import { HeatMapChartProps } from './types';
+export declare function HeatMapChart({ data, options, className, ...rest }: WithSupportProps<HeatMapChartProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace HeatMapChart {
+    var xAxisPositions: typeof XAxisPosition;
+}

package/dist/esm/components/HeatMapChart/HeatMapChart.js

@@ -0,0 +1,83 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { scaleLinear } from 'd3-scale';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { HeatMapGrid } from 'react-grid-heatmap';
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { extractSupportProps, useTheme } from '@sbercloud/uikit-product-utils';
+import { Divider } from '@snack-uikit/divider';
+import { useLayoutEffect } from '@snack-uikit/utils';
+import { XAxisPosition } from './constants';
+import { getComputedColor, getContrastColor, getStyles, getTickValues } from './helpers';
+import { DEFAULT_CHART_HEIGHT, LEGEND_HEIGHT, TICKS_SIZE, TITLE_HEIGHT, X_AXIS_LABEL_HEIGHT, } from './helpers/constants';
+import styles from './styles.module.css';
+export function HeatMapChart(_a) {
+    var _b;
+    var { data, options, className } = _a, rest = __rest(_a, ["data", "options", "className"]);
+    const { title, height = DEFAULT_CHART_HEIGHT, axes = {}, formatter, legend, domain, cellRender, styles: stylesProp, } = options;
+    const { xAxis, yAxis } = axes;
+    const xAxisPosition = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.position) || XAxisPosition.Bottom;
+    const isLegendEnabled = (_b = legend === null || legend === void 0 ? void 0 : legend.show) !== null && _b !== void 0 ? _b : true;
+    const colorContainerRef = useRef(null);
+    // TODO https://jira.sbercloud.tech/browse/FF-6024
+    const { theme } = useTheme();
+    const [colorRange, setColorRange] = useState(['#ffffff', '#000000']);
+    const [lightTextColor, setLightTextColor] = useState('#ffffff');
+    const [darkTextColor, setDarkTextColor] = useState('#000000');
+    useLayoutEffect(() => {
+        if (!colorContainerRef.current) {
+            return;
+        }
+        const rangeStart = getComputedColor(colorContainerRef.current, '--range-start');
+        const rangeEnd = getComputedColor(colorContainerRef.current, '--range-end');
+        const lightTextColor = getComputedColor(colorContainerRef.current, '--light-text');
+        const darkTextColor = getComputedColor(colorContainerRef.current, '--dark-text');
+        setColorRange([rangeStart, rangeEnd]);
+        setLightTextColor(lightTextColor);
+        setDarkTextColor(darkTextColor);
+    }, [theme]);
+    const colorScale = useMemo(() => scaleLinear(colorRange).domain(domain), [colorRange, domain]);
+    const commonStyles = useMemo(() => getStyles(colorScale, data), [colorScale, data]);
+    const legendTicks = useMemo(() => getTickValues(domain), [domain]);
+    const cellHeight = useMemo(() => {
+        var _a;
+        const titleHeight = title ? TITLE_HEIGHT : 0;
+        const xLabelsHeight = ((_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _a === void 0 ? void 0 : _a.length) ? TICKS_SIZE : 0;
+        const xAxisLabelHeight = (yAxis === null || yAxis === void 0 ? void 0 : yAxis.ticks) ? X_AXIS_LABEL_HEIGHT : 0;
+        const legendHeight = isLegendEnabled ? LEGEND_HEIGHT : 0;
+        const chartHeight = height - 48 - titleHeight - xLabelsHeight - xAxisLabelHeight - legendHeight;
+        return `${chartHeight / data.length}px`;
+    }, [data, height, title, xAxis, yAxis, isLegendEnabled]);
+    const gradient = useMemo(() => {
+        const parts = colorRange.map((color, i) => `${color} ${i * (100 / (colorRange.length - 1))}%`);
+        return `linear-gradient(90deg, ${parts})`;
+    }, [colorRange]);
+    const formatValue = useCallback((value) => (formatter && typeof formatter === 'function' ? formatter(value) : value), [formatter]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { ref: colorContainerRef, style: {
+            '--range-start': themeVars.sys.primary.decorDisabled,
+            '--range-end': themeVars.sys.primary.accentDefault,
+            '--light-text': themeVars.ref.brand['90'],
+            '--dark-text': themeVars.ref.brand['30'],
+        }, children: [title && _jsx("h3", { className: styles.title, children: title }), (xAxis === null || xAxis === void 0 ? void 0 : xAxis.label) && xAxisPosition === XAxisPosition.Top && _jsx("div", { className: styles.xAxisLabel, children: xAxis.label }), _jsxs("div", { className: styles.gridWrapper, "data-grid": Boolean(yAxis === null || yAxis === void 0 ? void 0 : yAxis.label) || undefined, children: [(yAxis === null || yAxis === void 0 ? void 0 : yAxis.label) && (_jsx("div", { className: styles.yAxisLabel, "data-x-axis-position": xAxisPosition, children: yAxis.label })), _jsx(HeatMapGrid, { data: data, xLabels: xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks, yLabels: yAxis === null || yAxis === void 0 ? void 0 : yAxis.ticks, xLabelsPos: xAxisPosition, yLabelsPos: 'left', cellRender: 
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        cellRender ||
+                            ((x, y, value) => (_jsx("h5", { className: styles.cell, title: String(value), style: {
+                                    '--color': getContrastColor({
+                                        lightColor: lightTextColor,
+                                        darkColor: darkTextColor,
+                                        rgb: colorScale(value),
+                                    }),
+                                }, children: formatValue(value) }))), xLabelsStyle: (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.xLabelsStyle) || commonStyles.xLabelsStyle, yLabelsStyle: (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.yLabelsStyle) || commonStyles.yLabelsStyle, cellStyle: (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.cellStyle) || commonStyles.cellStyle, cellHeight: cellHeight })] }), (xAxis === null || xAxis === void 0 ? void 0 : xAxis.label) && xAxisPosition === XAxisPosition.Bottom && _jsx("div", { className: styles.xAxisLabel, children: xAxis.label }), isLegendEnabled && (_jsxs("div", { className: styles.legend, children: [_jsx(Divider, {}), _jsx("div", { className: styles.gradient, style: { '--gradient': gradient } }), _jsx("div", { className: styles.legendTicksWrapper, children: legendTicks.map((tick) => (_jsx("span", { className: styles.tick, children: tick }, tick))) })] }))] })));
+}
+HeatMapChart.xAxisPositions = XAxisPosition;

package/dist/esm/components/HeatMapChart/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum XAxisPosition {
+    Top = "top",
+    Bottom = "bottom"
+}

package/dist/esm/components/HeatMapChart/constants.js

@@ -0,0 +1,5 @@
+export var XAxisPosition;
+(function (XAxisPosition) {
+    XAxisPosition["Top"] = "top";
+    XAxisPosition["Bottom"] = "bottom";
+})(XAxisPosition || (XAxisPosition = {}));

package/dist/esm/components/HeatMapChart/helpers/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const TITLE_HEIGHT = 74;
+export declare const TICKS_SIZE = 34;
+export declare const X_AXIS_LABEL_HEIGHT = 32;
+export declare const LEGEND_HEIGHT = 94;
+export declare const DEFAULT_CHART_HEIGHT = 700;
+export declare const DEFAULT_LEGEND_TICKS_NUM = 5;

package/dist/esm/components/HeatMapChart/helpers/constants.js

@@ -0,0 +1,6 @@
+export const TITLE_HEIGHT = 74;
+export const TICKS_SIZE = 34;
+export const X_AXIS_LABEL_HEIGHT = 32;
+export const LEGEND_HEIGHT = 94;
+export const DEFAULT_CHART_HEIGHT = 700;
+export const DEFAULT_LEGEND_TICKS_NUM = 5;

package/dist/esm/components/HeatMapChart/helpers/getComputedColor.d.ts

@@ -0,0 +1 @@
+export declare function getComputedColor(el: HTMLElement, prop: string): string;

package/dist/esm/components/HeatMapChart/helpers/getComputedColor.js

@@ -0,0 +1,4 @@
+export function getComputedColor(el, prop) {
+    const styles = getComputedStyle(el);
+    return styles.getPropertyValue(prop);
+}

package/dist/esm/components/HeatMapChart/helpers/getContrastColor.d.ts

@@ -0,0 +1,5 @@
+export declare const getContrastColor: ({ rgb, darkColor, lightColor, }: {
+    rgb: string;
+    lightColor: string;
+    darkColor: string;
+}) => string;

package/dist/esm/components/HeatMapChart/helpers/getContrastColor.js

@@ -0,0 +1,7 @@
+export const getContrastColor = ({ rgb, darkColor, lightColor, }) => {
+    // https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/
+    const bgColor = rgb.split(/\(([^)]+)\)/)[1].replace(/ /g, '');
+    const [r, g, b] = bgColor.split(',');
+    const yiq = (Math.round(parseInt(r) * 299) + Math.round(parseInt(g) * 587) + Math.round(parseInt(b) * 114)) / 1000;
+    return yiq >= 152 ? darkColor : lightColor;
+};

package/dist/esm/components/HeatMapChart/helpers/getStyles.d.ts

@@ -0,0 +1,3 @@
+import { ScaleLinear } from 'd3-scale';
+import { HeatMapChartStyles } from '../types';
+export declare const getStyles: (colorScale: ScaleLinear<string, string>, data: number[][]) => HeatMapChartStyles;

package/dist/esm/components/HeatMapChart/helpers/getStyles.js

@@ -0,0 +1,29 @@
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { TICKS_SIZE } from './constants';
+export const getStyles = (colorScale, data) => ({
+    cellStyle: (x, y) => ({
+        backgroundColor: colorScale(data[x][y]),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        padding: '4px',
+        borderColor: themeVars.sys.neutral.background1Level,
+    }),
+    xLabelsStyle: () => ({
+        fontSize: '12px',
+        lineHeight: '10px',
+        fontWeight: 400,
+        marginTop: '12px',
+        color: themeVars.sys.neutral.textSupport,
+        padding: 0,
+        height: `${TICKS_SIZE - 12}px`,
+    }),
+    yLabelsStyle: () => ({
+        width: `${TICKS_SIZE - 8}px`,
+        fontSize: '12px',
+        marginRight: '8px',
+        padding: '0',
+        color: themeVars.sys.neutral.textSupport,
+    }),
+});

package/dist/esm/components/HeatMapChart/helpers/getTickValues.d.ts

@@ -0,0 +1,2 @@
+import { HeatMapChartOptions } from '../types';
+export declare const getTickValues: (domain: HeatMapChartOptions["domain"]) => string[];

package/dist/esm/components/HeatMapChart/helpers/getTickValues.js

@@ -0,0 +1,61 @@
+import range from 'lodash.range';
+import { DEFAULT_LEGEND_TICKS_NUM } from './constants';
+/**
+ * Returns a "nice" number approximately equal to range Rounds
+ * the number if round = true Takes the ceiling if round = false.
+ *
+ * @param range the data range
+ * @param round whether to round the result
+ * @return a "nice" number to be used for the data range
+ */
+const niceNum = (range, round) => {
+    let niceFraction;
+    const exponent = Math.floor(Math.log10(range));
+    const fraction = range / Math.pow(10, exponent);
+    if (round) {
+        if (fraction < 1.5)
+            niceFraction = 1;
+        else if (fraction < 3)
+            niceFraction = 2;
+        else if (fraction < 7)
+            niceFraction = 5;
+        else
+            niceFraction = 10;
+    }
+    else {
+        if (fraction <= 1)
+            niceFraction = 1;
+        else if (fraction <= 2)
+            niceFraction = 2;
+        else if (fraction <= 5)
+            niceFraction = 5;
+        else
+            niceFraction = 10;
+    }
+    return niceFraction * Math.pow(10, exponent);
+};
+/**
+ * Calculate and update values for tick spacing and nice
+ * minimum and maximum data points on the axis.
+ */
+const calculateTicks = (maxTicks, minPoint, maxPoint) => {
+    const range = niceNum(maxPoint - minPoint, false);
+    const tickSpacing = niceNum(range / (maxTicks - 1), true);
+    const niceMin = Math.floor(minPoint / tickSpacing) * tickSpacing;
+    const niceMax = Math.ceil(maxPoint / tickSpacing) * tickSpacing;
+    return [tickSpacing, niceMin, niceMax];
+};
+export const getTickValues = (domain) => {
+    const [min, max] = domain;
+    const [tickSpacing, niceMin, niceMax] = calculateTicks(DEFAULT_LEGEND_TICKS_NUM, min, max);
+    const rangeValues = range(niceMin, niceMax, tickSpacing).filter(v => (v > 1 ? Math.floor(v) > min : v > min));
+    return [...new Set([min, ...rangeValues, max])].map(value => {
+        if (value === 0) {
+            return '0';
+        }
+        if (value < 1) {
+            return value.toFixed(1);
+        }
+        return String(Math.floor(value));
+    });
+};

package/dist/esm/components/HeatMapChart/helpers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getComputedColor';
+export * from './getContrastColor';
+export * from './getStyles';
+export * from './getTickValues';

package/dist/esm/components/HeatMapChart/helpers/index.js

@@ -0,0 +1,4 @@
+export * from './getComputedColor';
+export * from './getContrastColor';
+export * from './getStyles';
+export * from './getTickValues';

package/dist/esm/components/HeatMapChart/index.d.ts

@@ -0,0 +1,2 @@
+export { HeatMapChart } from './HeatMapChart';
+export type { HeatMapChartProps } from './types';

package/dist/esm/components/HeatMapChart/index.js

@@ -0,0 +1 @@
+export { HeatMapChart } from './HeatMapChart';

package/dist/esm/components/HeatMapChart/styles.module.css

@@ -0,0 +1,98 @@
+.wrapper{
+  padding:24px;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-radius:8px;
+}
+
+.gridWrapper{
+  position:relative;
+  display:block;
+}
+.gridWrapper[data-grid]{
+  display:grid;
+  grid-auto-rows:minmax(min-content, max-content);
+  grid-template-columns:auto 1fr;
+}
+
+.title{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  margin-bottom:24px;
+  font-size:20px;
+  font-weight:bold;
+  color:var(--sys-neutral-text-main, #41424e);
+  height:50px;
+}
+
+.legend{
+  margin-top:24px;
+  height:70px;
+}
+
+.gradient{
+  height:20px;
+  margin:24px 0 8px;
+  background:var(--gradient);
+  background-color:var(--sys-red-accent-default, #cb3f3e) !important;
+  border-radius:4px;
+}
+
+.legendTicksWrapper{
+  display:flex;
+  justify-content:space-between;
+}
+
+.tick{
+  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);
+  color:var(--sys-neutral-text-support, #6d707f);
+  font-size:12px;
+}
+
+.cell{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  color:var(--color);
+  text-overflow:ellipsis;
+  overflow:hidden;
+}
+
+.xAxisLabel{
+  display:flex;
+  justify-content:center;
+  margin-top:8px;
+  color:var(--sys-neutral-text-support, #6d707f);
+  font-size:12px;
+  font-weight:600;
+  height:24px;
+  margin-left:6px;
+}
+
+.yAxisLabel{
+  margin-right:16px;
+  transform:rotate(180deg);
+  transform-origin:right, top;
+  writing-mode:vertical-rl;
+  text-align:center;
+  font-size:12px;
+  font-weight:600;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.yAxisLabel[data-x-axis-position=top]{
+  margin-top:34px;
+}
+.yAxisLabel[data-x-axis-position=bottom]{
+  margin-bottom:34px;
+}

package/dist/esm/components/HeatMapChart/types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { XAxisPosition } from './constants';
+export type HeatMapChartAxisOptions = {
+    label?: string;
+    ticks?: string[];
+};
+export type HeatMapChartLegendOptions = {
+    show?: boolean;
+};
+export type HeatMapChartAxesOptions = {
+    xAxis?: HeatMapChartAxisOptions & {
+        position?: XAxisPosition;
+    };
+    yAxis?: HeatMapChartAxisOptions;
+};
+export type HeatMapChartStyles = {
+    xLabelsStyle: (index: number) => Record<string, string | number>;
+    yLabelsStyle: (index: number) => Record<string, string | number>;
+    cellStyle: (x: number, y: number, ratio: number) => Record<string, string | number>;
+};
+export type HeatMapChartOptions = {
+    title?: string;
+    height?: number;
+    formatter?: (value: number) => string;
+    axes?: HeatMapChartAxesOptions;
+    domain: [number, number];
+    cellRender?: (x: number, y: number, value: number) => ReactNode;
+    legend?: HeatMapChartLegendOptions;
+    styles?: Partial<HeatMapChartStyles>;
+};
+export type HeatMapChartProps = {
+    data: number[][];
+    options: HeatMapChartOptions;
+    className?: string;
+};

package/dist/esm/components/HeatMapChart/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import 'uplot/dist/uPlot.min.css';
+import './styles.module.scss';
+import uPlot from 'uplot';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { PlotType } from './types';
+export type InteractiveChartProps = {
+    data: uPlot.AlignedData;
+    options?: Partial<uPlot.Options>;
+    type?: PlotType;
+    className?: string;
+};
+export declare function InteractiveChart({ data, options, type, className, ...rest }: WithSupportProps<InteractiveChartProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/InteractiveChart/InteractiveChart.js

@@ -0,0 +1,42 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'uplot/dist/uPlot.min.css';
+import './styles.module.css';
+import cn from 'classnames';
+import merge from 'lodash.merge';
+import { useMemo } from 'react';
+import UPlotReact from 'uplot-react';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { CHART_OTHER_COLORS, CHART_SERIES_COLORS, COLOR_CONTAINER_CLASSNAME, } from '../../constants/colors';
+import { getBoxPlotOptions, getDefaultPlotOptions } from './configurations';
+import { PLOT_TYPES } from './constants';
+import { useComputedColors } from './hooks/useComputedColors';
+function chooseBaseOptions({ type, computedColors, }) {
+    switch (type) {
+        case PLOT_TYPES.BoxPlot:
+            return getBoxPlotOptions({ computedColors });
+        case PLOT_TYPES.Default:
+        default:
+            return getDefaultPlotOptions({ computedColors });
+    }
+}
+export function InteractiveChart(_a) {
+    var { data, options, type = PLOT_TYPES.Default, className } = _a, rest = __rest(_a, ["data", "options", "type", "className"]);
+    const style = useMemo(() => Object.entries(Object.assign(Object.assign({}, CHART_SERIES_COLORS), CHART_OTHER_COLORS)).reduce((styles, [key, value]) => {
+        styles[`--${key}`] = value;
+        return styles;
+    }, {}), []);
+    const computedColors = useComputedColors();
+    const resultOptions = useMemo(() => merge({}, chooseBaseOptions({ type, computedColors }), options), [computedColors, options, type]);
+    return (_jsx("div", Object.assign({}, extractSupportProps(rest), { className: cn(COLOR_CONTAINER_CLASSNAME, className), style: style, children: _jsx(UPlotReact, { options: resultOptions, data: data }) })));
+}

package/dist/esm/components/InteractiveChart/configurations/boxPlot.d.ts

@@ -0,0 +1,5 @@
+import uPlot from 'uplot';
+import { ColorMap } from '../../../constants/colors';
+export declare const getBoxPlotOptions: ({ computedColors }: {
+    computedColors: ColorMap;
+}) => uPlot.Options;

package/dist/esm/components/InteractiveChart/configurations/boxPlot.js

@@ -0,0 +1,71 @@
+import { boxPlotPlugin } from '../plugins/boxPlotPlugin';
+import { columnHighlightPlugin } from '../plugins/columnHighlightPlugin';
+import { legendAsTooltipPlugin } from '../plugins/legendAsTooltipPlugin';
+export const getBoxPlotOptions = ({ computedColors }) => ({
+    id: 'boxPlot',
+    title: 'Distribution of object predictions by bin',
+    width: 800,
+    height: 600,
+    cursor: {
+        drag: {
+            x: false,
+            y: false,
+        },
+    },
+    plugins: [
+        boxPlotPlugin({ computedColors }),
+        columnHighlightPlugin({ computedColors }),
+        legendAsTooltipPlugin({ computedColors }),
+    ],
+    series: [
+        {
+            label: 'bin',
+        },
+        {
+            label: 'X1',
+        },
+        {
+            label: 'Q1',
+        },
+        {
+            label: 'Median',
+        },
+        {
+            label: 'Q3',
+        },
+        {
+            label: 'X2',
+        },
+    ],
+    scales: {
+        x: {
+            distr: 2,
+            time: false,
+            range: (self, fromMin, fromMax) => [fromMin - 1, fromMax + 1],
+        },
+        y: {
+            time: false,
+            auto: true,
+        },
+    },
+    axes: [
+        {
+            label: 'Bin Number',
+            labelSize: 30,
+            stroke: '#808080',
+            grid: {
+                stroke: 'rgba(128, 128, 128, 0.15)',
+                width: 1 / devicePixelRatio,
+            },
+        },
+        {
+            label: 'Prediction',
+            labelSize: 30,
+            stroke: '#808080',
+            grid: {
+                stroke: 'rgba(128, 128, 128, 0.15)',
+                width: 1 / devicePixelRatio,
+            },
+        },
+    ],
+});

package/dist/esm/components/InteractiveChart/configurations/defaultPlot.d.ts

@@ -0,0 +1,5 @@
+import uPlot from 'uplot';
+import { ColorMap } from '../../../constants/colors';
+export declare const getDefaultPlotOptions: ({ computedColors }: {
+    computedColors: ColorMap;
+}) => uPlot.Options;