@kubit-ui-web/react-charts 1.8.0 → 1.9.0

package/dist/esm/charts/lineChart/lineChartStructure.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, useEffect, useMemo, useState } from 'react';
 import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { buildViewBox } from '../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { useId } from '../../hooks/useId/useId';
+import { useResponsiveCanvas } from '../../hooks/useResponsiveCanvas/useResponsiveCanvas';
 import { DefaultCanvasConfig } from '../../types/canvas.type';
 import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
-import { getCanvasDimensions } from '../../utils/getCanvasDimensions/getCanvasDimensions';
 import { getChildrenAttr } from '../../utils/getChildrenAttr/getChildrenAttr';
 import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
-import { parseStringToNumberPx } from '../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
 import { buildLineContextValue } from './context/buildLineContextValue';
 import { LineChartContext } from './context/lineChartContext';
 import { LineChartXAxis } from './fragments/lineChartXAxis';
@@ -42,17 +41,16 @@ import { useHover } from './hook/useHover';
  *
  * @returns The rendered LineChart component.
  */
-export const LineChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId = 'line-chart', getPathArea, height = '100%', onErrors, role, tabIndex, width = '100%', xKey, ...props }) => {
-    const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth } = canvasConfig;
+export const LineChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId: dataTestIdProp = 'line-chart', getPathArea, height = '100%', onErrors, role, tabIndex, width = '100%', xKey, ...props }) => {
+    const dataTestId = useId(dataTestIdProp);
     const [childrenYKeys, setChildrenYKey] = useState('');
-    const [parsedCanvas, setParsedCanvas] = useState({
-        height: 0,
-        width: 0,
+    // Use the responsive canvas hook for dimension management
+    const { parsedCanvas, parsedCanvasExtraSpace, viewBox } = useResponsiveCanvas({
+        canvasConfig,
+        dataTestId,
+        height,
+        width,
     });
-    const parsedCanvasExtraSpace = canvasExtraSpace
-        ? parseStringToNumberPx(canvasExtraSpace)
-        : undefined;
-    const viewBox = buildViewBox(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
     // Set the default axis for the chart
     const defaultAxis = [
         _jsx(LineChartXAxis, {}, "default-x-axis"),
@@ -95,21 +93,6 @@ export const LineChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = Defau
         canvasHeight: parsedCanvas.height,
         canvasWidth: parsedCanvas.width,
     });
-    useEffect(() => {
-        const svgElement = document.querySelector('[data-kbt-svg]');
-        if (!svgElement) {
-            return;
-        }
-        const { parsedCanvasHeight, parsedCanvasWidth } = getCanvasDimensions({
-            canvasHeight,
-            canvasWidth,
-            svgElement,
-        });
-        setParsedCanvas({
-            height: parsedCanvasHeight,
-            width: parsedCanvasWidth,
-        });
-    }, [canvasWidth, canvasHeight]);
     useEffect(() => {
         getPathArea?.({
             x1: contextValue.xAxisCoordinates.coordinates.x1,

package/dist/esm/charts/pieChart/pieChart.type.d.ts

@@ -16,6 +16,9 @@ export interface PieChartProps {
     ariaLabel?: string;
     ariaHidden?: boolean;
     caption?: string;
+    /**
+     * @deprecated Use `width` and `height` props instead to define chart dimensions.
+     */
     canvasConfig?: CanvasConfig;
     dataTestId?: string;
     width?: string;

package/dist/esm/charts/pieChart/pieChart.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pieChart.type.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChart.type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"pieChart.type.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChart.type.ts"],"names":[],"mappings":"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"}

package/dist/esm/charts/pieChart/pieChartStructure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pieChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA8B,MAAM,OAAO,CAAC;AAY5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,aAAa,CA8E/C,CAAC"}
+{"version":3,"file":"pieChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/pieChart/pieChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAA8B,MAAM,OAAO,CAAC;AAY5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,aAAa,CAgF/C,CAAC"}

package/dist/esm/charts/pieChart/pieChartStructure.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { buildViewBox } from '../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { useId } from '../../hooks/useId/useId';
+import { useResponsiveCanvas } from '../../hooks/useResponsiveCanvas/useResponsiveCanvas';
 import { DefaultCanvasConfig } from '../../types/canvas.type';
 import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
 import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
-import { parseStringToNumberPx } from '../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
 import { buildPieContextValue } from './context/buildPieContextValue';
 import { PieChartContext } from './context/pieChartContext';
 /**
@@ -38,16 +38,17 @@ import { PieChartContext } from './context/pieChartContext';
  * @param {ChartData[]} props.data - The data for the pie chart.
  * @returns {ReactElement} The rendered pie chart component.
  */
-export const PieChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId = 'pie-chart', halfChart, height = '100%', onErrors, radius = '50%', role, tabIndex, width = '100%', ...props }) => {
-    // Destructure the canvas configuration to obtain width, height, and extra space.
-    const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth } = canvasConfig;
-    const parsedCanvasWidth = parseStringToNumberPx(canvasWidth);
-    const parsedCanvasHeight = parseStringToNumberPx(canvasHeight);
-    const parsedCanvasExtraSpace = canvasExtraSpace
-        ? parseStringToNumberPx(canvasExtraSpace)
-        : undefined;
-    // Build the viewBox string based on canvas dimensions and extra space.
-    const viewBox = buildViewBox(parsedCanvasWidth, parsedCanvasHeight, parsedCanvasExtraSpace);
+export const PieChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId: dataTestIdProp = 'pie-chart', halfChart, height = '100%', onErrors, radius = '50%', role, tabIndex, width = '100%', ...props }) => {
+    const dataTestId = useId(dataTestIdProp);
+    // Use the responsive canvas hook for dimension management
+    const { parsedCanvas, viewBox } = useResponsiveCanvas({
+        canvasConfig,
+        dataTestId,
+        height,
+        width,
+    });
+    const parsedCanvasWidth = parsedCanvas.width;
+    const parsedCanvasHeight = parsedCanvas.height;
     const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
     // Create a fingerprint of the data to avoid unnecessary contextValue updates
     const dataFingerprint = getDataFingerprint(data);
@@ -63,7 +64,7 @@ export const PieChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = Defaul
             children,
             halfChart,
         });
-    }, [canvasHeight, canvasWidth, halfChart, dataFingerprint, errorAccumulator]);
+    }, [parsedCanvasHeight, parsedCanvasWidth, halfChart, dataFingerprint, errorAccumulator]);
     return (_jsx(SvgContainer, { ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: classNames, dataTestId: dataTestId, height: height, radius: radius, role: role, tabIndex: tabIndex, viewBox: viewBox, width: width, ...props, children: _jsx(PieChartContext.Provider, { value: {
                 ...contextValue,
                 canvasHeight: parsedCanvasHeight,

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

@@ -1,6 +1,5 @@
 export { useDragInteraction } from './useDragInteraction';
 export { useKeyboardNavigation } from './useKeyboardNavigation';
-export { useResponsiveCanvas } from './useResponsiveCanvas';
 export { useZoomAreaFocus } from './useZoomAreaFocus';
 export { useZoomData } from './useZoomData';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/zoomArea/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/zoomArea/hooks/index.js

@@ -1,5 +1,4 @@
 export { useDragInteraction } from './useDragInteraction';
 export { useKeyboardNavigation } from './useKeyboardNavigation';
-export { useResponsiveCanvas } from './useResponsiveCanvas';
 export { useZoomAreaFocus } from './useZoomAreaFocus';
 export { useZoomData } from './useZoomData';

package/dist/esm/components/zoomArea/zoomArea.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { SvgContainer } from '../../components/svgContainer/svgContainer';
+import { useResponsiveCanvas } from '../../hooks/useResponsiveCanvas/useResponsiveCanvas';
 import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
 import { FocusRing } from '../focusRing/focusRing';
 import { LineRenderer } from './components/LineRenderer';
@@ -8,7 +9,6 @@ import { SelectionArea } from './components/SelectionArea';
 import { ZoomHandler } from './components/ZoomHandler';
 import { useDragInteraction } from './hooks/useDragInteraction';
 import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
-import { useResponsiveCanvas } from './hooks/useResponsiveCanvas';
 import { useZoomAreaFocus } from './hooks/useZoomAreaFocus';
 import { useZoomData } from './hooks/useZoomData';
 import { generateAccessibilityLabels } from './utils/accessibilityLabels';

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

@@ -1,3 +1,5 @@
 export * from './useFocus/useFocus';
 export * from './useHover/useHover';
+export * from './useId/useId';
+export * from './useResponsiveCanvas/useResponsiveCanvas';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,2CAA2C,CAAC"}

package/dist/esm/hooks/index.js

@@ -1,2 +1,4 @@
 export * from './useFocus/useFocus';
 export * from './useHover/useHover';
+export * from './useId/useId';
+export * from './useResponsiveCanvas/useResponsiveCanvas';

package/dist/esm/hooks/useId/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useId';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/useId/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useId/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/esm/hooks/useId/index.js

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

package/dist/esm/hooks/useId/useId.d.ts

@@ -0,0 +1,2 @@
+export declare const useId: (prefix?: string) => string;
+//# sourceMappingURL=useId.d.ts.map

package/dist/esm/hooks/useId/useId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useId.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useId/useId.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,KAAK,GAAI,SAAS,MAAM,KAAG,MAIvC,CAAC"}

package/dist/esm/hooks/useId/useId.js

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+const DEFAULT_PREFIX = '$component$';
+const uniqueId = {};
+const generateUniqueId = (prefix) => {
+    if (!uniqueId[prefix]) {
+        uniqueId[prefix] = 0;
+    }
+    return uniqueId[prefix]++;
+};
+export const useId = (prefix) => {
+    const [id] = useState(() => generateUniqueId(prefix || DEFAULT_PREFIX));
+    return `${prefix}${id}`;
+};

package/dist/esm/hooks/useResponsiveCanvas/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useResponsiveCanvas';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/useResponsiveCanvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useResponsiveCanvas/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/esm/hooks/useResponsiveCanvas/index.js

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

package/dist/esm/{components/zoomArea/hooks → hooks/useResponsiveCanvas}/useResponsiveCanvas.d.ts

@@ -1,4 +1,4 @@
-import type { CanvasConfig } from '../../../types/canvas.type';
+import type { CanvasConfig } from '../../types/canvas.type';
 /**
  * Universal responsive canvas hook for chart components.
  *
@@ -56,6 +56,8 @@ interface UseResponsiveCanvasReturn {
     };
     /** SVG viewBox string */
     viewBox: string;
+    /** Parsed extra space in pixels (optional) */
+    parsedCanvasExtraSpace?: number;
 }
 export declare const useResponsiveCanvas: ({ canvasConfig, dataTestId, extraSpace, height, width, }: UseResponsiveCanvasParams) => UseResponsiveCanvasReturn;
 export {};

package/dist/esm/hooks/useResponsiveCanvas/useResponsiveCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveCanvas.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useResponsiveCanvas/useResponsiveCanvas.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,UAAU,yBAAyB;IACjC,yCAAyC;IACzC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,mBAAmB,GAAI,0DAMjC,yBAAyB,KAAG,yBA+F9B,CAAC"}

package/dist/{cjs/components/zoomArea/hooks → esm/hooks/useResponsiveCanvas}/useResponsiveCanvas.js

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react';
-import { buildViewBox } from '../../../components/svgContainer/utils/buildViewBox/buildViewBox';
-import { getCanvasDimensions } from '../../../utils/getCanvasDimensions/getCanvasDimensions';
-import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
-import { isBrowser, safeQuerySelector } from '../../../utils/ssr/ssr';
+import { buildViewBox } from '../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { getCanvasDimensions } from '../../utils/getCanvasDimensions/getCanvasDimensions';
+import { parseStringToNumberPx } from '../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+import { isBrowser, safeQuerySelector } from '../../utils/ssr/ssr';
 export const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height, width, }) => {
     // State for parsed/calculated dimensions
     const [parsedCanvas, setParsedCanvas] = useState({
@@ -70,6 +70,7 @@ export const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0,
     }, [parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace]);
     return {
         parsedCanvas,
+        parsedCanvasExtraSpace,
         viewBox,
     };
 };