@semcore/d3-chart 17.0.0-prerelease.9 → 17.0.1

package/lib/esm/component/ChartLegend/LegendItem/LegendItem.mjs

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Flex, Box } from "@semcore/base-components";
 import Checkbox from "@semcore/checkbox";
 import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
@@ -14,27 +14,27 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendItem_30ip2_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_30ip2_gg_:hover{cursor:pointer}.___SLegendItem_30ip2_gg_.__disabled_30ip2_gg_:hover{cursor:default}}.___SPointShape_30ip2_gg_.__color_30ip2_gg_{background-color:var(--color_30ip2);margin-right:8px;flex-shrink:0}.___SPointShape_30ip2_gg_._shape_Circle_30ip2_gg_._size_l_30ip2_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_30ip2_gg_._shape_Circle_30ip2_gg_._size_m_30ip2_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_30ip2_gg_._shape_Line_30ip2_gg_._size_l_30ip2_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_30ip2_gg_._shape_Line_30ip2_gg_._size_m_30ip2_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_30ip2_gg_._shape_Square_30ip2_gg_._size_l_30ip2_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_30ip2_gg_._shape_Square_30ip2_gg_._size_m_30ip2_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_30ip2_gg_._shape_Pattern_30ip2_gg_{background-color:transparent;margin-right:4px}.___SIcon_30ip2_gg_{line-height:0;margin-right:4px}.___SIcon_30ip2_gg_._size_l_30ip2_gg_{margin-top:4px}.___SIcon_30ip2_gg_._size_m_30ip2_gg_{margin-top:2px}.___SLabel_30ip2_gg_{min-width:0}.___SAdditionalLabel_30ip2_gg_._size_l_30ip2_gg_,.___SCount_30ip2_gg_._size_l_30ip2_gg_,.___SLabel_30ip2_gg_._size_l_30ip2_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_30ip2_gg_._size_m_30ip2_gg_,.___SCount_30ip2_gg_._size_m_30ip2_gg_,.___SLabel_30ip2_gg_._size_m_30ip2_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_30ip2_gg_,.___SCount_30ip2_gg_{margin-left:4px}.___SAdditionalLabel_30ip2_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_30ip2_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_30ip2_gg_._size_l_30ip2_gg_::before{margin-top:10px}.___SAdditionalLabel_30ip2_gg_._size_m_30ip2_gg_::before{margin-top:8px}.___SPatternSymbol_30ip2_gg_{transform:scale(.8)}',
+    '.___SLegendItem_11yr1_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_11yr1_gg_:hover{cursor:pointer}.___SLegendItem_11yr1_gg_.__disabled_11yr1_gg_:hover{cursor:default}}.___SPointShape_11yr1_gg_.__color_11yr1_gg_{background-color:var(--color_11yr1);margin-right:8px;flex-shrink:0}.___SPointShape_11yr1_gg_._shape_Circle_11yr1_gg_._size_l_11yr1_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_11yr1_gg_._shape_Circle_11yr1_gg_._size_m_11yr1_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_11yr1_gg_._shape_Line_11yr1_gg_._size_l_11yr1_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_11yr1_gg_._shape_Line_11yr1_gg_._size_m_11yr1_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_11yr1_gg_._shape_Square_11yr1_gg_._size_l_11yr1_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_11yr1_gg_._shape_Square_11yr1_gg_._size_m_11yr1_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_11yr1_gg_._shape_Pattern_11yr1_gg_{background-color:transparent;margin-right:4px}.___SIcon_11yr1_gg_{line-height:0;margin-right:4px}.___SIcon_11yr1_gg_._size_l_11yr1_gg_{margin-top:4px}.___SIcon_11yr1_gg_._size_m_11yr1_gg_{margin-top:2px}.___SLabel_11yr1_gg_{min-width:0}.___SAdditionalLabel_11yr1_gg_._size_l_11yr1_gg_,.___SCount_11yr1_gg_._size_l_11yr1_gg_,.___SLabel_11yr1_gg_._size_l_11yr1_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SAdditionalLabel_11yr1_gg_._size_m_11yr1_gg_,.___SCount_11yr1_gg_._size_m_11yr1_gg_,.___SLabel_11yr1_gg_._size_m_11yr1_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SAdditionalLabel_11yr1_gg_,.___SCount_11yr1_gg_{margin-left:4px}.___SAdditionalLabel_11yr1_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_11yr1_gg_::before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary, #6c6e79);height:4px;width:4px;border-radius:2px;margin-right:4px}.___SAdditionalLabel_11yr1_gg_._size_l_11yr1_gg_::before{margin-top:10px}.___SAdditionalLabel_11yr1_gg_._size_m_11yr1_gg_::before{margin-top:8px}.___SPatternSymbol_11yr1_gg_{transform:scale(.8)}',
     /*__inner_css_end__*/
-    "30ip2_gg_"
+    "11yr1_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendItem": "___SLegendItem_30ip2_gg_",
-    "_disabled": "__disabled_30ip2_gg_",
-    "__SPointShape": "___SPointShape_30ip2_gg_",
-    "_color": "__color_30ip2_gg_",
-    "--color": "--color_30ip2",
-    "_shape_Circle": "_shape_Circle_30ip2_gg_",
-    "_size_l": "_size_l_30ip2_gg_",
-    "_size_m": "_size_m_30ip2_gg_",
-    "_shape_Line": "_shape_Line_30ip2_gg_",
-    "_shape_Square": "_shape_Square_30ip2_gg_",
-    "_shape_Pattern": "_shape_Pattern_30ip2_gg_",
-    "__SIcon": "___SIcon_30ip2_gg_",
-    "__SLabel": "___SLabel_30ip2_gg_",
-    "__SAdditionalLabel": "___SAdditionalLabel_30ip2_gg_",
-    "__SCount": "___SCount_30ip2_gg_",
-    "__SPatternSymbol": "___SPatternSymbol_30ip2_gg_"
+    "__SLegendItem": "___SLegendItem_11yr1_gg_",
+    "_disabled": "__disabled_11yr1_gg_",
+    "__SPointShape": "___SPointShape_11yr1_gg_",
+    "_color": "__color_11yr1_gg_",
+    "--color": "--color_11yr1",
+    "_shape_Circle": "_shape_Circle_11yr1_gg_",
+    "_size_l": "_size_l_11yr1_gg_",
+    "_size_m": "_size_m_11yr1_gg_",
+    "_shape_Line": "_shape_Line_11yr1_gg_",
+    "_shape_Square": "_shape_Square_11yr1_gg_",
+    "_shape_Pattern": "_shape_Pattern_11yr1_gg_",
+    "__SIcon": "___SIcon_11yr1_gg_",
+    "__SLabel": "___SLabel_11yr1_gg_",
+    "__SAdditionalLabel": "___SAdditionalLabel_11yr1_gg_",
+    "__SCount": "___SCount_11yr1_gg_",
+    "__SPatternSymbol": "___SPatternSymbol_11yr1_gg_"
   })
 );
 const enhance = [resolveColorEnhance(), uniqueIDEnhancement()];

package/lib/esm/component/ChartLegend/LegendTable/LegendTable.mjs

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps } from "@semcore/core";
+import { sstyled, assignProps, createComponent } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import React from "react";
 import { BaseLegend } from "../BaseLegend.mjs";
@@ -9,21 +9,20 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendTable_1jxzo_gg_.__columns-count_1jxzo_gg_{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_1jxzo_gg_._size_l_1jxzo_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_1jxzo_gg_._size_m_1jxzo_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
+    '.___SLegendTable_1ep80_gg_.__columns-count_1ep80_gg_{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto .2fr;align-items:center;height:-moz-fit-content;height:fit-content;grid-column-gap:16px;grid-row-gap:8px}.___SColumnItem_1ep80_gg_._size_l_1ep80_gg_{font-size:var(--intergalactic-fs-300, 16px);text-align:right}.___SColumnItem_1ep80_gg_._size_m_1ep80_gg_{font-size:var(--intergalactic-fs-200, 14px);text-align:right}',
     /*__inner_css_end__*/
-    "1jxzo_gg_"
+    "1ep80_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendTable": "___SLegendTable_1jxzo_gg_",
-    "_columns-count": "__columns-count_1jxzo_gg_",
-    "__SColumnItem": "___SColumnItem_1jxzo_gg_",
-    "_size_l": "_size_l_1jxzo_gg_",
-    "_size_m": "_size_m_1jxzo_gg_"
+    "__SLegendTable": "___SLegendTable_1ep80_gg_",
+    "_columns-count": "__columns-count_1ep80_gg_",
+    "__SColumnItem": "___SColumnItem_1ep80_gg_",
+    "_size_l": "_size_l_1ep80_gg_",
+    "_size_m": "_size_m_1ep80_gg_"
   })
 );
 class LegendTableRoot extends BaseLegend {
   render() {
-    var _a;
     var _ref = this.asProps, _ref3;
     const SLegendTable = Box;
     const {
@@ -32,7 +31,7 @@ class LegendTableRoot extends BaseLegend {
       size = "m",
       items
     } = this.asProps;
-    const columnsCount = (_a = items[0]) == null ? void 0 : _a.columns.length;
+    const columnsCount = items[0]?.columns.length;
     return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLegendTable, _ref3.cn("SLegendTable", {
       ...assignProps({
         "columns-count": columnsCount + 1,

package/lib/esm/component/ChartLegend/index.mjs

@@ -1,5 +1,7 @@
 import { LegendFlex } from "./LegendFlex/LegendFlex.mjs";
+import { LegendTable } from "./LegendTable/LegendTable.mjs";
 export {
   LegendFlex as ChartLegend,
+  LegendTable as ChartLegendTable,
   LegendFlex as default
 };

package/lib/esm/component/Cigarette/Cigarette.mjs

@@ -30,12 +30,11 @@ class CigaretteBarRoot extends Component {
       }
     });
     _defineProperty(this, "setCursor", (value) => {
-      var _a;
       const {
         onClick
       } = this.asProps;
       if (onClick) {
-        (_a = this.refElement.current) == null ? void 0 : _a.style.setProperty("cursor", value);
+        this.refElement.current?.style.setProperty("cursor", value);
       }
     });
   }

package/lib/esm/component/StackGroupBar/StackGroupBar.mjs

@@ -6,7 +6,7 @@ import React from "react";
 import Bar, { MIN_HEIGHT } from "../../Bar.mjs";
 import createElement from "../../createElement.mjs";
 import { scaleToBand, getChartDefaultColorName } from "../../utils.mjs";
-const XY0 = Symbol("XY0");
+const XY0 = /* @__PURE__ */ Symbol("XY0");
 class StackGroupBarRoot extends Component {
   constructor(props) {
     super(props);
@@ -40,11 +40,10 @@ class StackGroupBarRoot extends Component {
     this.forceUpdate();
   }
   getSeries(group) {
-    var _a, _b;
     const {
       data
     } = this.asProps;
-    return (_b = (_a = this.stacks)[group]) == null ? void 0 : _b.call(_a, data);
+    return this.stacks[group]?.(data);
   }
   getBarProps({
     y,

package/lib/esm/createElement.mjs

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createComponent, createBaseComponent, CONTEXT_COMPONENT } from "@semcore/core";
+import { CONTEXT_COMPONENT, createBaseComponent, createComponent } from "@semcore/core";
 import assignProps from "@semcore/core/lib/utils/assignProps";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";

package/lib/esm/index.mjs

@@ -1,4 +1,5 @@
 import { default as default2 } from "./Plot.mjs";
+import "./component/ChartLegend/index.mjs";
 import { default as default3 } from "./component/Chart/index.mjs";
 import { default as default4 } from "./component/StackGroupBar/StackGroupBar.mjs";
 import { SvgElement } from "./component/SvgElement.mjs";

package/lib/esm/style/bubble.shadow.css

@@ -18,6 +18,10 @@ g[visible='false'] {
   display: none;
 }
 
+SBubble[clickable] {
+  cursor: pointer;
+}
+
 SBubble[color] {
   fill: var(--color);
 }

package/lib/esm/utils.mjs

@@ -1,6 +1,6 @@
 import EventEmitter from "@semcore/core/lib/utils/eventEmitter";
 import { extent, bisector } from "d3-array";
-import { scaleSqrt, scaleBand, scaleQuantize } from "d3-scale";
+import { scaleQuantize, scaleBand, scaleSqrt } from "d3-scale";
 const eventToPoint = (event, svgRoot) => {
   const node = event.currentTarget || event.target;
   const rect = svgRoot.getBoundingClientRect();
@@ -163,7 +163,7 @@ const measureText = memoize((text, fontSize) => {
 });
 let idCounter = 0;
 const uniqueId = (prefix = "id-") => `${prefix}${idCounter++}`;
-const interpolateValue = Symbol("intergalactic-d3-chart-line-interpolate");
+const interpolateValue = /* @__PURE__ */ Symbol("intergalactic-d3-chart-line-interpolate");
 const getChartDefaultColorName = (index) => {
   index++;
   if (index < 1) index = 1;
@@ -205,7 +205,7 @@ const calculateBubbleDomain = (data, key, range) => {
   const maxValueShift = valueScale(maxestValue) * pixelRatio;
   min -= minValueShift * 2;
   max += maxValueShift * 2;
-  return [min, max];
+  return [Math.floor(min), Math.floor(max)];
 };
 const PlotEventEmitter = EventEmitter;
 export {

package/lib/types/a11y/PlotA11yView.d.ts

@@ -11,4 +11,4 @@ export type A11yViewProps = {
     triggerRef: React.RefObject<HTMLElement>;
     onCloseHandler: () => void;
 };
-export declare const PlotA11yView: React.FC<A11yViewProps>;
+export declare function PlotA11yView({ id, payload: providedData, hints, plotLabel, triggerRef, plotRef, config: providedConfig, locale, onCloseHandler, }: A11yViewProps): React.ReactElement;

package/lib/types/component/Chart/AbstractChart.d.ts

@@ -5,7 +5,7 @@ import type { BaseChartProps, BaseLegendProps, ListData, ObjectData } from './Ab
 import type { HoverLine, HoverRect } from '../..';
 import { interpolateValue } from '../../utils';
 import type { LegendItem } from '../ChartLegend/LegendItem/LegendItem.type';
-type ChartState = {
+export type ChartState = {
     dataDefinitions: Array<LegendItem & {
         columns: React.ReactNode[];
     }>;
@@ -13,7 +13,7 @@ type ChartState = {
     withTrend: boolean;
 };
 export declare const NOT_A_VALUE = "n/a";
-export declare abstract class AbstractChart<D extends ListData | ObjectData, T extends BaseChartProps<D>, E extends readonly ((...args: any[]) => any)[] = []> extends Component<T, E, Readonly<{}>, {}, ChartState> {
+export declare abstract class AbstractChart<Data extends ListData | ObjectData, Props extends BaseChartProps<Data>, Enhancers extends readonly ((...args: any[]) => any)[] = [], DefaultProps = {}, State extends ChartState = ChartState> extends Component<Props, Enhancers, Readonly<{}>, DefaultProps, State> {
     static style: {
         [key: string]: string;
     };
@@ -23,9 +23,8 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
      */
     protected plotPadding: number;
     protected dataHints: import("../../a11y/hints").DataStructureHints;
-    state: ChartState;
-    constructor(props: T);
-    componentDidUpdate(prevProps: T): void;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
     protected getDefaultDataDefinitions(): Array<LegendItem & {
         columns: React.ReactNode[];
     }>;
@@ -40,7 +39,6 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
     protected get flatValues(): Set<number>;
     protected get maxStackedValue(): number;
     protected totalValue(data: ObjectData): number;
-    protected percentValue(data: ObjectData, key: string): string;
     protected getValueScale(values: number[]): number;
     protected setHighlightedLine(index: number): void;
     protected handleChangeVisible(id: string, isVisible: boolean): void;
@@ -59,4 +57,3 @@ export declare abstract class AbstractChart<D extends ListData | ObjectData, T e
     protected renderTooltipTotalLine<D extends ObjectData>(dataItem: D): React.JSX.Element | null;
     render(): React.ReactNode;
 }
-export {};

package/lib/types/component/Chart/CigaretteChart.type.d.ts

@@ -2,8 +2,8 @@ import type { Intergalactic } from '@semcore/core';
 import type React from 'react';
 import type { BaseChartProps } from './AbstractChart.type';
 import type { interpolateValue } from '../../utils';
-type DataKey = string;
-export type CigaretteChartData = Record<DataKey, number | typeof interpolateValue>;
+export type CigaretteChartDataKey = string;
+export type CigaretteChartData = Record<CigaretteChartDataKey, number | typeof interpolateValue>;
 export type CigaretteChartProps = Intergalactic.InternalTypings.EfficientOmit<BaseChartProps<CigaretteChartData>, 'xScale' | 'yScale'> & {
     /** Title text displayed in the tooltip */
     tooltipTitle?: string;
@@ -11,12 +11,15 @@ export type CigaretteChartProps = Intergalactic.InternalTypings.EfficientOmit<Ba
     tooltipViewType?: 'all' | 'single';
     /** Show percent value in tooltip */
     showPercentValueInTooltip?: boolean;
+    /** Custom percent formatter. */
+    percentFormatter?: (value: number) => number;
     /** Header content for the chart */
     header?: React.ReactNode;
     /** Animation duration in milliseconds */
     duration?: number;
     /** Click handler that receives the data key and event */
-    onClick?: (key: DataKey, event: React.SyntheticEvent) => void;
+    onClick?: (key: CigaretteChartDataKey, event: React.SyntheticEvent) => void;
+    /** Minimal bar width in pixels. Default is `2`. */
+    minimalBarWidth?: number;
 };
 export type CigaretteChartType = Intergalactic.Component<'div', CigaretteChartProps>;
-export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "Semrush D3 Chart Component",
-  "version": "17.0.0-prerelease.9",
+  "version": "17.0.1",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -9,15 +9,15 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "exports": {
-    "require": "./lib/cjs/index.js",
+    "types": "./lib/types/index.d.ts",
     "import": "./lib/esm/index.mjs",
-    "types": "./lib/types/index.d.ts"
+    "require": "./lib/cjs/index.js"
   },
   "dependencies": {
     "@formatjs/intl": "2.3.0",
-    "@semcore/checkbox": "16.2.2",
-    "@semcore/divider": "16.0.11",
-    "@semcore/typography": "16.3.3-prerelease.9",
+    "@semcore/checkbox": "^17.0.1",
+    "@semcore/divider": "^17.0.1",
+    "@semcore/typography": "^17.0.1",
     "@types/d3-shape": "^3.1.7",
     "@upsetjs/venn.js": "1.4.2",
     "d3-array": "3.1.6",
@@ -31,8 +31,8 @@
     "hoist-non-react-statics": "3.3.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.4.3-prerelease.9",
-    "@semcore/icon": "^16.7.2-prerelease.9"
+    "@semcore/base-components": "^17.0.1",
+    "@semcore/icon": "^17.0.1"
   },
   "repository": {
     "type": "git",
@@ -44,16 +44,16 @@
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-transition": "^3.0.9",
-    "@semcore/core": "16.5.1",
-    "@semcore/base-components": "16.4.3-prerelease.9",
-    "@semcore/button": "16.0.13-prerelease.9",
-    "@semcore/checkbox": "16.2.2",
-    "@semcore/divider": "16.0.11",
-    "@semcore/dropdown-menu": "16.2.2",
-    "@semcore/ellipsis": "16.0.12",
+    "@semcore/core": "17.0.1",
+    "@semcore/base-components": "17.0.1",
+    "@semcore/icon": "17.0.1",
+    "@semcore/button": "17.0.1",
+    "@semcore/checkbox": "17.0.1",
+    "@semcore/divider": "17.0.1",
+    "@semcore/dropdown-menu": "17.0.1",
+    "@semcore/ellipsis": "17.0.1",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/typography": "16.3.2",
-    "@semcore/icon": "16.7.2-prerelease.9"
+    "@semcore/typography": "17.0.1"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"