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

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.13.14 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.13.13 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.13.12 (2025-11-12)
 
 
@@ -592,7 +612,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.8.22](https://gitverse.ru/cloud-ru-tech/uikit-product/compare/@cloud-ru/uikit-product-charts@0.8.21...@cloud-ru/uikit-product-charts@0.8.22) (2022-07-07)
 
-**Note:** Version bump only for package @cloud-ru/uikit-product-charts
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-localization@0.13.13](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/localization/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
 
 ## [0.8.21](https://gitverse.ru/cloud-ru-tech/uikit-product/compare/@cloud-ru/uikit-product-charts@0.8.20...@cloud-ru/uikit-product-charts@0.8.21) (2022-06-08)
 

package/dist/cjs/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;

package/dist/cjs/components/BagelChart/BagelChart.js

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

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

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

package/dist/cjs/components/BagelChart/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("./BagelChart"), exports);

package/dist/cjs/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/cjs/components/BagelChart/utils.d.ts

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSegmentColor = getSegmentColor;
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+function getSegmentColor({ value, total }) {
+    const occupancyPercent = (value / total) * 100;
+    let segmentColor = figma_tokens_cloud_platform_1.themeVars.sys.green.accentDefault;
+    if (occupancyPercent > 50 && occupancyPercent <= 75) {
+        segmentColor = figma_tokens_cloud_platform_1.themeVars.sys.yellow.accentDefault;
+    }
+    else if (occupancyPercent > 75) {
+        segmentColor = figma_tokens_cloud_platform_1.themeVars.sys.red.accentDefault;
+    }
+    return segmentColor;
+}

package/dist/cjs/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/cjs/components/HeatMapChart/HeatMapChart.js

@@ -0,0 +1,89 @@
+"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.HeatMapChart = HeatMapChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const d3_scale_1 = require("d3-scale");
+const react_1 = require("react");
+const react_grid_heatmap_1 = require("react-grid-heatmap");
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const divider_1 = require("@snack-uikit/divider");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const helpers_1 = require("./helpers");
+const constants_2 = require("./helpers/constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function HeatMapChart(_a) {
+    var _b;
+    var { data, options, className } = _a, rest = __rest(_a, ["data", "options", "className"]);
+    const { title, height = constants_2.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) || constants_1.XAxisPosition.Bottom;
+    const isLegendEnabled = (_b = legend === null || legend === void 0 ? void 0 : legend.show) !== null && _b !== void 0 ? _b : true;
+    const colorContainerRef = (0, react_1.useRef)(null);
+    // TODO https://jira.sbercloud.tech/browse/FF-6024
+    const { theme } = (0, uikit_product_utils_1.useTheme)();
+    const [colorRange, setColorRange] = (0, react_1.useState)(['#ffffff', '#000000']);
+    const [lightTextColor, setLightTextColor] = (0, react_1.useState)('#ffffff');
+    const [darkTextColor, setDarkTextColor] = (0, react_1.useState)('#000000');
+    (0, utils_1.useLayoutEffect)(() => {
+        if (!colorContainerRef.current) {
+            return;
+        }
+        const rangeStart = (0, helpers_1.getComputedColor)(colorContainerRef.current, '--range-start');
+        const rangeEnd = (0, helpers_1.getComputedColor)(colorContainerRef.current, '--range-end');
+        const lightTextColor = (0, helpers_1.getComputedColor)(colorContainerRef.current, '--light-text');
+        const darkTextColor = (0, helpers_1.getComputedColor)(colorContainerRef.current, '--dark-text');
+        setColorRange([rangeStart, rangeEnd]);
+        setLightTextColor(lightTextColor);
+        setDarkTextColor(darkTextColor);
+    }, [theme]);
+    const colorScale = (0, react_1.useMemo)(() => (0, d3_scale_1.scaleLinear)(colorRange).domain(domain), [colorRange, domain]);
+    const commonStyles = (0, react_1.useMemo)(() => (0, helpers_1.getStyles)(colorScale, data), [colorScale, data]);
+    const legendTicks = (0, react_1.useMemo)(() => (0, helpers_1.getTickValues)(domain), [domain]);
+    const cellHeight = (0, react_1.useMemo)(() => {
+        var _a;
+        const titleHeight = title ? constants_2.TITLE_HEIGHT : 0;
+        const xLabelsHeight = ((_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _a === void 0 ? void 0 : _a.length) ? constants_2.TICKS_SIZE : 0;
+        const xAxisLabelHeight = (yAxis === null || yAxis === void 0 ? void 0 : yAxis.ticks) ? constants_2.X_AXIS_LABEL_HEIGHT : 0;
+        const legendHeight = isLegendEnabled ? constants_2.LEGEND_HEIGHT : 0;
+        const chartHeight = height - 48 - titleHeight - xLabelsHeight - xAxisLabelHeight - legendHeight;
+        return `${chartHeight / data.length}px`;
+    }, [data, height, title, xAxis, yAxis, isLegendEnabled]);
+    const gradient = (0, react_1.useMemo)(() => {
+        const parts = colorRange.map((color, i) => `${color} ${i * (100 / (colorRange.length - 1))}%`);
+        return `linear-gradient(90deg, ${parts})`;
+    }, [colorRange]);
+    const formatValue = (0, react_1.useCallback)((value) => (formatter && typeof formatter === 'function' ? formatter(value) : value), [formatter]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { ref: colorContainerRef, style: {
+            '--range-start': figma_tokens_cloud_platform_1.themeVars.sys.primary.decorDisabled,
+            '--range-end': figma_tokens_cloud_platform_1.themeVars.sys.primary.accentDefault,
+            '--light-text': figma_tokens_cloud_platform_1.themeVars.ref.brand['90'],
+            '--dark-text': figma_tokens_cloud_platform_1.themeVars.ref.brand['30'],
+        }, children: [title && (0, jsx_runtime_1.jsx)("h3", { className: styles_module_scss_1.default.title, children: title }), (xAxis === null || xAxis === void 0 ? void 0 : xAxis.label) && xAxisPosition === constants_1.XAxisPosition.Top && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.xAxisLabel, children: xAxis.label }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.gridWrapper, "data-grid": Boolean(yAxis === null || yAxis === void 0 ? void 0 : yAxis.label) || undefined, children: [(yAxis === null || yAxis === void 0 ? void 0 : yAxis.label) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.yAxisLabel, "data-x-axis-position": xAxisPosition, children: yAxis.label })), (0, jsx_runtime_1.jsx)(react_grid_heatmap_1.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) => ((0, jsx_runtime_1.jsx)("h5", { className: styles_module_scss_1.default.cell, title: String(value), style: {
+                                    '--color': (0, helpers_1.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 === constants_1.XAxisPosition.Bottom && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.xAxisLabel, children: xAxis.label }), isLegendEnabled && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.legend, children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.gradient, style: { '--gradient': gradient } }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.legendTicksWrapper, children: legendTicks.map((tick) => ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.tick, children: tick }, tick))) })] }))] })));
+}
+HeatMapChart.xAxisPositions = constants_1.XAxisPosition;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XAxisPosition = void 0;
+var XAxisPosition;
+(function (XAxisPosition) {
+    XAxisPosition["Top"] = "top";
+    XAxisPosition["Bottom"] = "bottom";
+})(XAxisPosition || (exports.XAxisPosition = XAxisPosition = {}));

package/dist/cjs/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/cjs/components/HeatMapChart/helpers/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LEGEND_TICKS_NUM = exports.DEFAULT_CHART_HEIGHT = exports.LEGEND_HEIGHT = exports.X_AXIS_LABEL_HEIGHT = exports.TICKS_SIZE = exports.TITLE_HEIGHT = void 0;
+exports.TITLE_HEIGHT = 74;
+exports.TICKS_SIZE = 34;
+exports.X_AXIS_LABEL_HEIGHT = 32;
+exports.LEGEND_HEIGHT = 94;
+exports.DEFAULT_CHART_HEIGHT = 700;
+exports.DEFAULT_LEGEND_TICKS_NUM = 5;

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComputedColor = getComputedColor;
+function getComputedColor(el, prop) {
+    const styles = getComputedStyle(el);
+    return styles.getPropertyValue(prop);
+}

package/dist/cjs/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/cjs/components/HeatMapChart/helpers/getContrastColor.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContrastColor = void 0;
+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;
+};
+exports.getContrastColor = getContrastColor;

package/dist/cjs/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/cjs/components/HeatMapChart/helpers/getStyles.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+const figma_tokens_cloud_platform_1 = require("@sbercloud/figma-tokens-cloud-platform");
+const constants_1 = require("./constants");
+const getStyles = (colorScale, data) => ({
+    cellStyle: (x, y) => ({
+        backgroundColor: colorScale(data[x][y]),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '4px',
+        padding: '4px',
+        borderColor: figma_tokens_cloud_platform_1.themeVars.sys.neutral.background1Level,
+    }),
+    xLabelsStyle: () => ({
+        fontSize: '12px',
+        lineHeight: '10px',
+        fontWeight: 400,
+        marginTop: '12px',
+        color: figma_tokens_cloud_platform_1.themeVars.sys.neutral.textSupport,
+        padding: 0,
+        height: `${constants_1.TICKS_SIZE - 12}px`,
+    }),
+    yLabelsStyle: () => ({
+        width: `${constants_1.TICKS_SIZE - 8}px`,
+        fontSize: '12px',
+        marginRight: '8px',
+        padding: '0',
+        color: figma_tokens_cloud_platform_1.themeVars.sys.neutral.textSupport,
+    }),
+});
+exports.getStyles = getStyles;

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

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

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

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTickValues = void 0;
+const lodash_range_1 = __importDefault(require("lodash.range"));
+const constants_1 = require("./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];
+};
+const getTickValues = (domain) => {
+    const [min, max] = domain;
+    const [tickSpacing, niceMin, niceMax] = calculateTicks(constants_1.DEFAULT_LEGEND_TICKS_NUM, min, max);
+    const rangeValues = (0, lodash_range_1.default)(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));
+    });
+};
+exports.getTickValues = getTickValues;

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

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

package/dist/cjs/components/HeatMapChart/helpers/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("./getComputedColor"), exports);
+__exportStar(require("./getContrastColor"), exports);
+__exportStar(require("./getStyles"), exports);
+__exportStar(require("./getTickValues"), exports);

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeatMapChart = void 0;
+var HeatMapChart_1 = require("./HeatMapChart");
+Object.defineProperty(exports, "HeatMapChart", { enumerable: true, get: function () { return HeatMapChart_1.HeatMapChart; } });

package/dist/cjs/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/cjs/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/cjs/components/HeatMapChart/types.js

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

package/dist/cjs/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;