@semcore/d3-chart 17.2.0 → 17.3.0

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

@@ -14,27 +14,27 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendItem_uk6mx_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_uk6mx_gg_:hover{cursor:pointer}.___SLegendItem_uk6mx_gg_.__disabled_uk6mx_gg_:hover{cursor:default}}.___SPointShape_uk6mx_gg_.__color_uk6mx_gg_{background-color:var(--color_uk6mx);margin-right:8px;flex-shrink:0}.___SPointShape_uk6mx_gg_._shape_Circle_uk6mx_gg_._size_l_uk6mx_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_uk6mx_gg_._shape_Circle_uk6mx_gg_._size_m_uk6mx_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_uk6mx_gg_._shape_Line_uk6mx_gg_._size_l_uk6mx_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_uk6mx_gg_._shape_Line_uk6mx_gg_._size_m_uk6mx_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_uk6mx_gg_._shape_Square_uk6mx_gg_._size_l_uk6mx_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_uk6mx_gg_._shape_Square_uk6mx_gg_._size_m_uk6mx_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_uk6mx_gg_._shape_Pattern_uk6mx_gg_{background-color:initial;margin-right:4px}.___SIcon_uk6mx_gg_{line-height:0;margin-right:4px}.___SIcon_uk6mx_gg_._size_l_uk6mx_gg_{margin-top:4px}.___SIcon_uk6mx_gg_._size_m_uk6mx_gg_{margin-top:2px}.___SLabel_uk6mx_gg_{min-width:0}.___SAdditionalLabel_uk6mx_gg_._size_l_uk6mx_gg_,.___SCount_uk6mx_gg_._size_l_uk6mx_gg_,.___SLabel_uk6mx_gg_._size_l_uk6mx_gg_{font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%)}.___SAdditionalLabel_uk6mx_gg_._size_m_uk6mx_gg_,.___SCount_uk6mx_gg_._size_m_uk6mx_gg_,.___SLabel_uk6mx_gg_._size_m_uk6mx_gg_{font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%)}.___SAdditionalLabel_uk6mx_gg_,.___SCount_uk6mx_gg_{margin-left:4px}.___SAdditionalLabel_uk6mx_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_uk6mx_gg_:before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary,#00030095);height:4px;width:4px;border-radius:2px;margin-right:4px}@supports (color:color(display-p3 0 0 0%)){.___SAdditionalLabel_uk6mx_gg_:before{background-color:var(--intergalactic-text-secondary,#00030095)}@media (color-gamut:p3){.___SAdditionalLabel_uk6mx_gg_:before{background-color:var(--intergalactic-text-secondary,color(display-p3 .00228 .01289 .00252/.583))}}}.___SAdditionalLabel_uk6mx_gg_._size_l_uk6mx_gg_:before{margin-top:10px}.___SAdditionalLabel_uk6mx_gg_._size_m_uk6mx_gg_:before{margin-top:8px}.___SPatternSymbol_uk6mx_gg_{transform:scale(.8)}',
+    '.___SLegendItem_e035q_gg_{min-width:0;align-items:flex-start}@media (hover:hover){.___SLegendItem_e035q_gg_:hover{cursor:pointer}.___SLegendItem_e035q_gg_.__disabled_e035q_gg_:hover{cursor:default}}.___SPointShape_e035q_gg_.__color_e035q_gg_{background-color:var(--color_e035q);margin-right:8px;flex-shrink:0}.___SPointShape_e035q_gg_._shape_Circle_e035q_gg_._size_l_e035q_gg_{width:16px;height:16px;border-radius:8px;margin-top:4px}.___SPointShape_e035q_gg_._shape_Circle_e035q_gg_._size_m_e035q_gg_{width:12px;height:12px;border-radius:6px;margin-top:4px}.___SPointShape_e035q_gg_._shape_Line_e035q_gg_._size_l_e035q_gg_{width:16px;height:4px;border-radius:3px;margin-top:9px}.___SPointShape_e035q_gg_._shape_Line_e035q_gg_._size_m_e035q_gg_{width:12px;height:4px;border-radius:3px;margin-top:8px}.___SPointShape_e035q_gg_._shape_Square_e035q_gg_._size_l_e035q_gg_{width:16px;height:16px;border-radius:2px;margin-top:4px}.___SPointShape_e035q_gg_._shape_Square_e035q_gg_._size_m_e035q_gg_{width:12px;height:12px;border-radius:2px;margin-top:4px}.___SPointShape_e035q_gg_._shape_Pattern_e035q_gg_{background-color:initial;margin-right:4px}.___SIcon_e035q_gg_{line-height:0;margin-right:4px}.___SIcon_e035q_gg_._size_l_e035q_gg_{margin-top:4px}.___SIcon_e035q_gg_._size_m_e035q_gg_{margin-top:2px}.___SLabel_e035q_gg_{min-width:0}.___SAdditionalLabel_e035q_gg_._size_l_e035q_gg_,.___SCount_e035q_gg_._size_l_e035q_gg_,.___SLabel_e035q_gg_._size_l_e035q_gg_{font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,150%)}.___SAdditionalLabel_e035q_gg_._size_m_e035q_gg_,.___SCount_e035q_gg_._size_m_e035q_gg_,.___SLabel_e035q_gg_._size_m_e035q_gg_{font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,142%)}.___SAdditionalLabel_e035q_gg_,.___SCount_e035q_gg_{margin-left:4px}.___SAdditionalLabel_e035q_gg_{white-space:nowrap;display:flex;align-items:flex-start}.___SAdditionalLabel_e035q_gg_:before{content:"";display:inline-block;background-color:var(--intergalactic-text-secondary,#00030095);height:4px;width:4px;border-radius:2px;margin-right:4px}@media (color-gamut:p3){.___SAdditionalLabel_e035q_gg_:before{background-color:var(--intergalactic-text-secondary,oklch(.088 .026 147.7/.583))}}.___SAdditionalLabel_e035q_gg_._size_l_e035q_gg_:before{margin-top:10px}.___SAdditionalLabel_e035q_gg_._size_m_e035q_gg_:before{margin-top:8px}.___SPatternSymbol_e035q_gg_{transform:scale(.8)}',
     /*__inner_css_end__*/
-    "uk6mx_gg_"
+    "e035q_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendItem": "___SLegendItem_uk6mx_gg_",
-    "_disabled": "__disabled_uk6mx_gg_",
-    "__SPointShape": "___SPointShape_uk6mx_gg_",
-    "_color": "__color_uk6mx_gg_",
-    "--color": "--color_uk6mx",
-    "_shape_Circle": "_shape_Circle_uk6mx_gg_",
-    "_size_l": "_size_l_uk6mx_gg_",
-    "_size_m": "_size_m_uk6mx_gg_",
-    "_shape_Line": "_shape_Line_uk6mx_gg_",
-    "_shape_Square": "_shape_Square_uk6mx_gg_",
-    "_shape_Pattern": "_shape_Pattern_uk6mx_gg_",
-    "__SIcon": "___SIcon_uk6mx_gg_",
-    "__SLabel": "___SLabel_uk6mx_gg_",
-    "__SAdditionalLabel": "___SAdditionalLabel_uk6mx_gg_",
-    "__SCount": "___SCount_uk6mx_gg_",
-    "__SPatternSymbol": "___SPatternSymbol_uk6mx_gg_"
+    "__SLegendItem": "___SLegendItem_e035q_gg_",
+    "_disabled": "__disabled_e035q_gg_",
+    "__SPointShape": "___SPointShape_e035q_gg_",
+    "_color": "__color_e035q_gg_",
+    "--color": "--color_e035q",
+    "_shape_Circle": "_shape_Circle_e035q_gg_",
+    "_size_l": "_size_l_e035q_gg_",
+    "_size_m": "_size_m_e035q_gg_",
+    "_shape_Line": "_shape_Line_e035q_gg_",
+    "_shape_Square": "_shape_Square_e035q_gg_",
+    "_shape_Pattern": "_shape_Pattern_e035q_gg_",
+    "__SIcon": "___SIcon_e035q_gg_",
+    "__SLabel": "___SLabel_e035q_gg_",
+    "__SAdditionalLabel": "___SAdditionalLabel_e035q_gg_",
+    "__SCount": "___SCount_e035q_gg_",
+    "__SPatternSymbol": "___SPatternSymbol_e035q_gg_"
   })
 );
 const enhance = [resolveColorEnhance(), uniqueIDEnhancement()];

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

@@ -9,16 +9,16 @@ const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SLegendTable_1vvs7_gg_.__columns-count_1vvs7_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_1vvs7_gg_._size_l_1vvs7_gg_{font-size:var(--intergalactic-fs-300,16px);text-align:right}.___SColumnItem_1vvs7_gg_._size_m_1vvs7_gg_{font-size:var(--intergalactic-fs-200,14px);text-align:right}',
+    '.___SLegendTable_11u3t_gg_.__columns-count_11u3t_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_11u3t_gg_._size_l_11u3t_gg_{font-size:var(--intergalactic-fs-300,16px);text-align:right}.___SColumnItem_11u3t_gg_._size_m_11u3t_gg_{font-size:var(--intergalactic-fs-200,14px);text-align:right}',
     /*__inner_css_end__*/
-    "1vvs7_gg_"
+    "11u3t_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SLegendTable": "___SLegendTable_1vvs7_gg_",
-    "_columns-count": "__columns-count_1vvs7_gg_",
-    "__SColumnItem": "___SColumnItem_1vvs7_gg_",
-    "_size_l": "_size_l_1vvs7_gg_",
-    "_size_m": "_size_m_1vvs7_gg_"
+    "__SLegendTable": "___SLegendTable_11u3t_gg_",
+    "_columns-count": "__columns-count_11u3t_gg_",
+    "__SColumnItem": "___SColumnItem_11u3t_gg_",
+    "_size_l": "_size_l_11u3t_gg_",
+    "_size_m": "_size_m_11u3t_gg_"
   })
 );
 class LegendTableRoot extends BaseLegend {

package/lib/esm/style/abstract-chart.shadow.css

@@ -1,3 +1,10 @@
+SChart {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
 STooltipChildrenWrapper {
   display: grid;
   column-gap: var(--intergalactic-spacing-2x, 8px);

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

@@ -12,6 +12,8 @@ export type ChartState = {
     }>;
     highlightedLine: number;
     withTrend: boolean;
+    plotWidth: number;
+    plotHeight: number;
 };
 export declare const NOT_A_VALUE = "n/a";
 export declare abstract class AbstractChart<Data extends ListData | ObjectData, Props extends BaseChartProps<Data>, Enhancers extends readonly ((...args: any[]) => any)[] = [], InnerProps = {}, State extends ChartState = ChartState, DefaultProps extends Intergalactic.InternalTypings.ValidDefaultProps<DefaultProps, Props & InnerProps> = never> extends Component<Props, Enhancers, Readonly<{}>, InnerProps, State, DefaultProps> {
@@ -23,8 +25,19 @@ export declare abstract class AbstractChart<Data extends ListData | ObjectData,
      */
     protected plotPadding: number;
     protected dataHints: import("../../a11y/hints").DataStructureHints;
+    protected chartRef: React.RefObject<HTMLElement>;
+    protected legendRef: React.RefObject<HTMLDivElement>;
+    private observer;
     constructor(props: Props);
+    componentDidMount(): void;
     componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    protected get plotWidth(): State["plotWidth"] | NonNullable<({
+        Root: React.ForwardRefExoticComponent<import("@semcore/core").IRootNodeProps & Intergalactic.InternalTypings.ComponentPropsNesting<any>>;
+    } & Readonly<Props & import("@semcore/core").IRootComponentProps<{}, {}, {}> & Intergalactic.InternalTypings.ExtractEnhanceType<Enhancers> & InnerProps> & Intergalactic.InternalTypings.EfficientOmit<React.AllHTMLAttributes<any>, keyof import("@semcore/core").IRootComponentProps<{}, {}, {}> | keyof Props | keyof Intergalactic.InternalTypings.ExtractEnhanceType<Enhancers> | keyof InnerProps> & ([DefaultProps] extends [never] ? {} : Intergalactic.InternalTypings.MappedDefaultProps<DefaultProps, Props & InnerProps>))["plotWidth"]>;
+    protected get plotHeight(): State["plotHeight"] | NonNullable<({
+        Root: React.ForwardRefExoticComponent<import("@semcore/core").IRootNodeProps & Intergalactic.InternalTypings.ComponentPropsNesting<any>>;
+    } & Readonly<Props & import("@semcore/core").IRootComponentProps<{}, {}, {}> & Intergalactic.InternalTypings.ExtractEnhanceType<Enhancers> & InnerProps> & Intergalactic.InternalTypings.EfficientOmit<React.AllHTMLAttributes<any>, keyof import("@semcore/core").IRootComponentProps<{}, {}, {}> | keyof Props | keyof Intergalactic.InternalTypings.ExtractEnhanceType<Enhancers> | keyof InnerProps> & ([DefaultProps] extends [never] ? {} : Intergalactic.InternalTypings.MappedDefaultProps<DefaultProps, Props & InnerProps>))["plotHeight"]>;
     protected getDefaultDataDefinitions(): Array<LegendItem & {
         columns: React.ReactNode[];
     }>;
@@ -56,4 +69,5 @@ export declare abstract class AbstractChart<Data extends ListData | ObjectData,
     }): React.ReactNode;
     protected renderTooltipTotalLine<D extends ObjectData>(dataItem: D): React.JSX.Element | null;
     render(): React.ReactNode;
+    private handleResize;
 }

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

@@ -54,12 +54,14 @@ export type BaseChartProps<T extends ListData | ObjectData> = FlexProps & {
     data: T;
     /**
      * Width of plot
+     * @default width is 100% of the parent element.
      */
-    plotWidth: number;
+    plotWidth?: number;
     /**
      * Height of plot
+     * @default height is 100% of the parent element.
      */
-    plotHeight: number;
+    plotHeight?: number;
     /** Enables charts patterns that enhances charts accessibility */
     patterns?: PatternsConfig;
     /**
@@ -146,6 +148,13 @@ export type BaseChartProps<T extends ListData | ObjectData> = FlexProps & {
      * Flag to show/hide legend
      */
     showLegend?: boolean;
+    /**
+     * Relation between height and width dimensions block.
+     * height = width / aspect, so an aspect could be set as `16 / 9` for example.
+     */
+    aspect?: number;
+    /** Callback which will be called after changing the block size */
+    onResize?: (size: [number, number], entries: ResizeObserverEntry[]) => void;
     /**
      * Props for Legend
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "Semrush D3 Chart Component",
-  "version": "17.2.0",
+  "version": "17.3.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@formatjs/intl": "2.3.0",
-    "@semcore/checkbox": "^17.2.0",
-    "@semcore/divider": "^17.2.0",
-    "@semcore/typography": "^17.2.0",
+    "@formatjs/intl": "4.1.13",
+    "@semcore/checkbox": "^17.2.1",
+    "@semcore/divider": "^17.2.1",
+    "@semcore/typography": "^17.2.1",
     "@types/d3-shape": "3.1.7",
     "@upsetjs/venn.js": "2.0.0",
     "d3-array": "3.1.6",
@@ -31,7 +31,7 @@
     "hoist-non-react-statics": "3.3.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.2.0",
+    "@semcore/base-components": "^17.2.1",
     "@semcore/icon": "^17.2.0"
   },
   "repository": {
@@ -44,16 +44,16 @@
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-transition": "^3.0.9",
-    "@semcore/core": "17.2.0",
-    "@semcore/button": "17.2.0",
-    "@semcore/base-components": "17.2.0",
-    "@semcore/checkbox": "17.2.0",
-    "@semcore/divider": "17.2.0",
-    "@semcore/dropdown-menu": "17.2.0",
-    "@semcore/ellipsis": "17.2.0",
+    "@semcore/core": "17.2.1",
+    "@semcore/base-components": "17.2.1",
+    "@semcore/divider": "17.2.1",
+    "@semcore/checkbox": "17.2.1",
+    "@semcore/ellipsis": "17.2.1",
+    "@semcore/button": "17.2.1",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "17.2.0",
-    "@semcore/typography": "17.2.0"
+    "@semcore/typography": "17.2.1",
+    "@semcore/dropdown-menu": "17.3.0",
+    "@semcore/icon": "17.2.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"

package/vitest.config.mts

@@ -0,0 +1,17 @@
+import { resolve as resolvePath } from 'node:path';
+
+import { defineConfig } from 'vitest/config';
+
+import { vitestPlugins, vitestResolve } from '../../vitest.config.mts';
+
+export default defineConfig({
+  plugins: vitestPlugins,
+  resolve: vitestResolve,
+  test: {
+    include: [
+      '__tests__/**/*.test.tsx',
+    ],
+    environment: 'jsdom',
+    setupFiles: [resolvePath(__dirname, '../../tools/testing-utils/setupTests')],
+  },
+});