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

package/dist/esm/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/esm/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/esm/components/PieChart/Pie.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arc, pie } from 'd3-shape';
+import { Fragment } from 'react';
+export function Pie({ data, hoveredIndex, radius, innerRadius, segmentsShift, onMouseOut, label, style, segmentsStyle, onMouseOver, onMouseDown, }) {
+    const pieSegments = pie()
+        .sort(null)
+        .value((d) => d.value)(data);
+    const getHoveredPath = 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 = arc()
+        .outerRadius(radius)
+        .innerRadius(innerRadius)
+        .startAngle(d => d.startAngle + Math.PI / 2)
+        .endAngle(d => d.endAngle + Math.PI / 2)
+        .padAngle(segmentsShift);
+    return (_jsx("svg", { viewBox: '0 0 100 100', width: '100%', height: '100%', style: style, children: _jsx("g", { transform: 'translate(50,50)', children: pieSegments.map((segment, index) => (_jsxs(Fragment, { children: [_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/esm/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/esm/components/PieChart/PieChart.js

@@ -0,0 +1,62 @@
+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 { truncateString } from '@cloud-ru/ft-formatters';
+import cn from 'classnames';
+import { useCallback, useMemo, useState } from 'react';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Scroll } from '@snack-uikit/scroll';
+import { Typography } from '@snack-uikit/typography';
+import { CHART_SERIES_COLORS, SERIES_COLORS } from '../../constants/colors';
+import { Legend } from './Legend';
+import { Pie } from './Pie';
+import styles from './styles.module.css';
+export 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] = useState(undefined);
+    const colorizedData = useMemo(() => data.map((x, index) => {
+        const colorsKey = Object.values(SERIES_COLORS);
+        const chartColor = CHART_SERIES_COLORS[colorsKey[index % colorsKey.length]];
+        return Object.assign(Object.assign({}, x), { color: x.color || chartColor });
+    }), [data]);
+    const pieStyles = useMemo(() => ({ overflow: 'overlay' }), []);
+    const segmentStyles = useMemo(() => ({ transition: 'all .3s', cursor: 'pointer' }), []);
+    const onMouseOverCallback = useCallback((_, index) => setHovered(index), []);
+    const onMouseOutCallback = useCallback(() => setHovered(undefined), []);
+    const onMouseDownCallback = useCallback((event, index) => {
+        event.preventDefault();
+        if (onPieSegmentClick) {
+            onPieSegmentClick(data[index]);
+        }
+    }, [data, onPieSegmentClick]);
+    const onColorizedLegendItemClick = useMemo(() => {
+        if (!onLegendItemClick) {
+            return undefined;
+        }
+        return (event, item) => {
+            event.preventDefault();
+            onLegendItemClick(item);
+        };
+    }, [onLegendItemClick]);
+    const onAggregatedItemClick = 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 = useCallback(({ dataEntry, dataIndex }) => (_jsxs(_Fragment, { children: [_jsx("text", { className: styles.svgText, x: 0, y: -4, "data-hovered": hovered === dataIndex || undefined, children: truncateString(String(dataEntry.label), 15) }, `${dataIndex}_label`), _jsx("text", { className: styles.svgText, x: 0, y: 4, "data-hovered": hovered === dataIndex || undefined, "data-bolder": 'true', children: dataEntry.value }, `${dataIndex}_value`)] })), [hovered]);
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { className: cn(className, styles.wrapper), style: { '--width': width ? `${width}px` : undefined, '--height': height ? `${height}px` : undefined }, children: [_jsx(Typography, { purpose: 'title', family: 'sans', size: typographySize, className: styles.title, children: title }), _jsxs("div", { className: styles.contentWrapper, children: [_jsx("div", { className: styles.legendWrapper, children: _jsx(Scroll, { size: 's', children: _jsx(Legend, { data: colorizedData, legendTitle: legendTitle, onItemClick: onColorizedLegendItemClick, typographySize: typographySize }) }) }), _jsx("div", { className: styles.pieWrapper, children: _jsx(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 && (_jsx("div", { className: styles.legendWrapper, children: _jsx(Scroll, { size: 's', children: _jsx(Legend, { data: aggregatedLegend.data, legendTitle: aggregatedLegend.title, onItemClick: onAggregatedItemClick, typographySize: typographySize }) }) }))] })] })));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/PieChart/types.js

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

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

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

package/dist/esm/components/index.js

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

package/dist/esm/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/esm/constants/colors.js

@@ -0,0 +1,56 @@
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+export const COLOR_CONTAINER_CLASSNAME = 'interactive-chart-wrapper';
+export const 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',
+};
+export const CHART_SERIES_COLORS = {
+    [SERIES_COLORS.Green1]: themeVars.sys.green.accentDefault,
+    [SERIES_COLORS.Green2]: themeVars.sys.green.textLight,
+    [SERIES_COLORS.Green3]: themeVars.sys.green.textDisabled,
+    [SERIES_COLORS.Green4]: themeVars.sys.green.decorActivated,
+    [SERIES_COLORS.Blue1]: themeVars.sys.blue.accentDefault,
+    [SERIES_COLORS.Blue2]: themeVars.sys.blue.textLight,
+    [SERIES_COLORS.Blue3]: themeVars.sys.blue.textDisabled,
+    [SERIES_COLORS.Blue4]: themeVars.sys.blue.decorActivated,
+    [SERIES_COLORS.Violet1]: themeVars.sys.violet.accentDefault,
+    [SERIES_COLORS.Violet2]: themeVars.sys.violet.textLight,
+    [SERIES_COLORS.Violet3]: themeVars.sys.violet.textDisabled,
+    [SERIES_COLORS.Violet4]: themeVars.sys.violet.decorActivated,
+    [SERIES_COLORS.Crimson1]: themeVars.sys.pink.accentDefault,
+    [SERIES_COLORS.Crimson2]: themeVars.sys.pink.textLight,
+    [SERIES_COLORS.Crimson3]: themeVars.sys.pink.textDisabled,
+    [SERIES_COLORS.Crimson4]: themeVars.sys.pink.decorActivated,
+};
+export const OTHER_COLORS = {
+    ShadowColor: 'shadowColor',
+    LineColor: 'lineColor',
+    TooltipBackgroundColor: 'tooltipBackgroundColor',
+    TooltipColor: 'tooltipColor',
+    ColumnHighlightColor: 'columnHighlightColor',
+    AxisColor: 'axisColor',
+    LabelColor: 'labelColor',
+};
+export const CHART_OTHER_COLORS = {
+    [OTHER_COLORS.ShadowColor]: themeVars.sys.neutral.accentDefault,
+    [OTHER_COLORS.LineColor]: themeVars.sys.neutral.onAccent,
+    [OTHER_COLORS.TooltipBackgroundColor]: themeVars.sys.invertNeutral.background,
+    [OTHER_COLORS.TooltipColor]: themeVars.sys.invertNeutral.textMain,
+    [OTHER_COLORS.ColumnHighlightColor]: themeVars.sys.neutral.decorDefault,
+    [OTHER_COLORS.AxisColor]: themeVars.sys.neutral.decorDefault,
+    [OTHER_COLORS.LabelColor]: themeVars.sys.neutral.textSupport,
+};

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-charts",
   "title": "React Charts",
-  "version": "0.13.12",
+  "version": "0.13.13",
   "sideEffects": [
     "*.css",
     "*.scss",
@@ -31,6 +31,7 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
@@ -38,8 +39,8 @@
   "scripts": {},
   "dependencies": {
     "@cloud-ru/ft-formatters": "1.0.1",
-    "@cloud-ru/uikit-product-localization": "0.13.12",
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-localization": "0.13.13",
+    "@cloud-ru/uikit-product-utils": "7.0.1",
     "@snack-uikit/divider": "3.2.3",
     "@snack-uikit/link": "0.15.9",
     "@snack-uikit/scroll": "0.9.3",
@@ -63,5 +64,5 @@
     "@types/lodash.merge": "4.6.6",
     "@types/lodash.range": "3.2.6"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "9c11b1e33e716c874534a1c162266c8591f2ed03"
 }