@kubit-ui-web/react-charts 1.11.0 → 1.11.2

package/dist/esm/charts/constants/chartDefaults.js

@@ -1,96 +1,19 @@
-/**
- * Shared default configuration constants for chart components.
- *
- * These constants provide standardized default values that are common across
- * different chart types, as well as type-specific constants with clear naming.
- */
-/**
- * Default canvas dimensions used as fallback when invalid dimensions are provided
- */
-export const CHART_CANVAS_DEFAULTS = {
-    /** Default canvas height when invalid height is provided */
-    SAFE_HEIGHT: 100,
-    /** Default canvas width when invalid width is provided */
-    SAFE_WIDTH: 100,
-};
-/**
- * Axis validation constants for tick values and positioning
- */
-export const AXIS_VALIDATION = {
-    /** Minimum number of tick values required for a valid axis */
-    MIN_TICK_COUNT: 2,
-    /** Number used to detect when all tick values are identical */
-    UNIQUE_VALUE_THRESHOLD: 1,
-};
-/**
- * Default spacing and positioning values
- */
-export const CHART_SPACING_DEFAULTS = {
-    /** Default spacing value when no spacing is specified */
-    DEFAULT_SPACE: 0,
-};
-/**
- * Break axis default values
- */
-export const BREAK_AXIS_DEFAULTS = {
-    /** Default value when no custom break axis is specified */
-    DEFAULT_BREAK_VALUE: 0,
-};
-/**
- * Shared fallback data points used across different chart types
- */
-export const SHARED_FALLBACK_DATA = {
-    /** First fallback primary key value (used for axis labels) */
-    FALLBACK_PKEY_FIRST: '0',
-    /** Second fallback primary key value (used for axis labels) */
-    FALLBACK_PKEY_SECOND: '1',
-};
-/**
- * Bar Chart specific default configuration values
- */
-export const BAR_CHART_DEFAULTS = {
-    /** Default width for bar elements when not specified */
-    BAR_WIDTH: 20,
-};
-/**
- * Bar Chart specific fallback data points used when bar chart data is invalid or empty
- */
-export const BAR_CHART_FALLBACK_DATA = {
-    /** Default x value for fallback data points */
-    DEFAULT_X_VALUE: 0,
-    /** Generic secondary key for fallback data when dataKey is needed */
-    FALLBACK_SECONDARY_KEY: 'fallbackData',
-};
-/**
- * Line Chart specific fallback data points used when line chart data is invalid or empty
- */
-export const LINE_CHART_FALLBACK_DATA = {
-    /** First X value for line chart fallback data */
-    FALLBACK_X_FIRST: '0',
-    /** Second X value for line chart fallback data */
-    FALLBACK_X_SECOND: '1',
-    /** First Y value for line chart fallback data */
-    FALLBACK_Y_FIRST: 0,
-    /** Second Y value for line chart fallback data */
-    FALLBACK_Y_SECOND: 1,
-};
-/**
- * Pie Chart specific default configuration values
- */
-export const PIE_CHART_DEFAULTS = {
-    /** Default radius percentage when not specified */
-    DEFAULT_RADIUS_PERCENTAGE: 50,
-    /** Minimum number of segments required for a valid pie chart */
-    MIN_SEGMENTS: 1,
-};
-/**
- * Pie Chart specific fallback data points used when pie chart data is invalid or empty
- */
-export const PIE_CHART_FALLBACK_DATA = {
-    /** Generic data key for fallback data */
-    FALLBACK_DATA_KEY: 'fallbackSegments',
-    /** Default segment name for fallback data */
-    FALLBACK_SEGMENT_NAME: 'fallback',
-    /** Default segment value for fallback data */
-    FALLBACK_SEGMENT_VALUE: 100,
-};
+const CHART_CANVAS_DEFAULTS = {
+	SAFE_HEIGHT: 100,
+	SAFE_WIDTH: 100
+}, AXIS_VALIDATION = {
+	MIN_TICK_COUNT: 2,
+	UNIQUE_VALUE_THRESHOLD: 1
+}, CHART_SPACING_DEFAULTS = { DEFAULT_SPACE: 0 }, BREAK_AXIS_DEFAULTS = { DEFAULT_BREAK_VALUE: 0 }, SHARED_FALLBACK_DATA = {
+	FALLBACK_PKEY_FIRST: "0",
+	FALLBACK_PKEY_SECOND: "1"
+}, BAR_CHART_DEFAULTS = { BAR_WIDTH: 20 }, BAR_CHART_FALLBACK_DATA = {
+	DEFAULT_X_VALUE: 0,
+	FALLBACK_SECONDARY_KEY: "fallbackData"
+}, LINE_CHART_FALLBACK_DATA = {
+	FALLBACK_X_FIRST: "0",
+	FALLBACK_X_SECOND: "1",
+	FALLBACK_Y_FIRST: 0,
+	FALLBACK_Y_SECOND: 1
+};
+export { AXIS_VALIDATION, BAR_CHART_DEFAULTS, BAR_CHART_FALLBACK_DATA, BREAK_AXIS_DEFAULTS, CHART_CANVAS_DEFAULTS, CHART_SPACING_DEFAULTS, LINE_CHART_FALLBACK_DATA, SHARED_FALLBACK_DATA };

package/dist/esm/charts/customBackgroundChart/context/customBackgroundChartContext.js

@@ -1,3 +1,3 @@
-import { createContext } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const CustomBackgroundChartContext = createContext({});
+import { createContext } from "react";
+const CustomBackgroundChartContext = createContext({});
+export { CustomBackgroundChartContext };

package/dist/esm/charts/customBackgroundChart/customBackgroundChart.js

@@ -1,7 +1,4 @@
-import { CustomBackgroundChartStructure } from './customBackgroundChartStructure';
-import { CustomBackgroundChartPlot } from './fragments/customBackgroundChartPlot';
-const CustomBackgroundChart = Object.assign(CustomBackgroundChartStructure, {
-    Plot: CustomBackgroundChartPlot,
-});
+import { CustomBackgroundChartStructure } from "./customBackgroundChartStructure.js";
+import { CustomBackgroundChartPlot } from "./fragments/customBackgroundChartPlot.js";
+var CustomBackgroundChart = Object.assign(CustomBackgroundChartStructure, { Plot: CustomBackgroundChartPlot });
 export { CustomBackgroundChart };
-export * from './customBackgroundChart.type';

package/dist/esm/charts/customBackgroundChart/customBackgroundChartStructure.js

@@ -1,41 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { SvgContainer } from '../../components/svgContainer/svgContainer';
-import { useId } from '../../hooks/useId/useId';
-import { createErrorAccumulator } from '../../utils/createErrorAccumulator';
-import { CustomBackgroundChartContext } from './context/customBackgroundChartContext';
-export const CustomBackgroundChartStructure = ({ ariaHidden, ariaLabel, backgroundUrl, caption, children, className, data, dataTestId: dataTestIdProp = 'custom-background-chart', height = '100%', onBlur, onClick, onDoubleClick, onErrors, onFocus, onKeyDown, onKeyUp, onMouseEnter, onMouseLeave, role = 'img', tabIndex, viewBox, width = '100%', ...props }) => {
-    const dataTestId = useId(dataTestIdProp);
-    // Build viewBox string for SVG
-    const viewBoxString = `0 0 ${viewBox.width} ${viewBox.height}`;
-    // Error accumulator (existing pattern)
-    const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
-    // Validate props
-    useEffect(() => {
-        if (Object.keys(data).length === 0) {
-            errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
-                error: new Error('Data object is empty. At least one data point is required.'),
-            });
-        }
-        if (!backgroundUrl || backgroundUrl.trim() === '') {
-            errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
-                error: new Error('backgroundUrl is required and cannot be empty.'),
-            });
-        }
-        if (viewBox.width <= 0 || viewBox.height <= 0) {
-            errorAccumulator.addError('CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR', {
-                error: new Error(`Invalid viewBox dimensions: width=${viewBox.width}, height=${viewBox.height} (both must be > 0)`),
-            });
-        }
-    }, [data, backgroundUrl, viewBox, errorAccumulator]);
-    // Context value
-    const contextValue = useMemo(() => ({
-        addError: (errorType, error) => {
-            errorAccumulator.addError(errorType, error);
-        },
-        data,
-        dataTestId,
-        viewBox,
-    }), [viewBox, data, dataTestId, errorAccumulator]);
-    return (_jsx(SvgContainer, { ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: className, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBoxString, width: width, onBlur: onBlur, onClick: onClick, onDoubleClick: onDoubleClick, onFocus: onFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...props, children: _jsxs(CustomBackgroundChartContext.Provider, { value: contextValue, children: [_jsx("image", { "data-testid": `${dataTestId}-background`, height: viewBox.height, href: backgroundUrl, preserveAspectRatio: "xMidYMid meet", width: viewBox.width, x: 0, y: 0 }), _jsx("g", { "data-testid": `${dataTestId}-plots`, children: children })] }) }));
+import { SvgContainer } from "../../components/svgContainer/svgContainer.js";
+import { useId } from "../../hooks/useId/useId.js";
+import { createErrorAccumulator } from "../../utils/createErrorAccumulator/createErrorAccumulator.js";
+import { CustomBackgroundChartContext } from "./context/customBackgroundChartContext.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const CustomBackgroundChartStructure = ({ ariaHidden: n, ariaLabel: r, backgroundUrl: i, caption: a, children: o, className: s, data: c, dataTestId: l = "custom-background-chart", height: u = "100%", onBlur: d, onClick: f, onDoubleClick: p, onErrors: m, onFocus: h, onKeyDown: g, onKeyUp: _, onMouseEnter: v, onMouseLeave: y, role: b = "img", tabIndex: x, viewBox: S, width: C = "100%", ...w }) => {
+	let T = useId(l), E = `0 0 ${S.width} ${S.height}`, D = useMemo(() => createErrorAccumulator(m), [m]);
+	useEffect(() => {
+		Object.keys(c).length === 0 && D.addError("CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR", { error: /* @__PURE__ */ Error("Data object is empty. At least one data point is required.") }), (!i || i.trim() === "") && D.addError("CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR", { error: /* @__PURE__ */ Error("backgroundUrl is required and cannot be empty.") }), (S.width <= 0 || S.height <= 0) && D.addError("CUSTOM_BACKGROUND_CHART_CONTEXT_ERROR", { error: /* @__PURE__ */ Error(`Invalid viewBox dimensions: width=${S.width}, height=${S.height} (both must be > 0)`) });
+	}, [
+		c,
+		i,
+		S,
+		D
+	]);
+	let O = useMemo(() => ({
+		addError: (e, t) => {
+			D.addError(e, t);
+		},
+		data: c,
+		dataTestId: T,
+		viewBox: S
+	}), [
+		S,
+		c,
+		T,
+		D
+	]);
+	return /* @__PURE__ */ jsx(SvgContainer, {
+		ariaHidden: n,
+		ariaLabel: r,
+		caption: a,
+		className: s,
+		dataTestId: T,
+		height: u,
+		role: b,
+		tabIndex: x,
+		viewBox: E,
+		width: C,
+		onBlur: d,
+		onClick: f,
+		onDoubleClick: p,
+		onFocus: h,
+		onKeyDown: g,
+		onKeyUp: _,
+		onMouseEnter: v,
+		onMouseLeave: y,
+		...w,
+		children: /* @__PURE__ */ jsxs(CustomBackgroundChartContext.Provider, {
+			value: O,
+			children: [/* @__PURE__ */ jsx("image", {
+				"data-testid": `${T}-background`,
+				height: S.height,
+				href: i,
+				preserveAspectRatio: "xMidYMid meet",
+				width: S.width,
+				x: 0,
+				y: 0
+			}), /* @__PURE__ */ jsx("g", {
+				"data-testid": `${T}-plots`,
+				children: o
+			})]
+		})
+	});
 };
+export { CustomBackgroundChartStructure };

package/dist/esm/charts/customBackgroundChart/fragments/customBackgroundChartPlot.js

@@ -1,49 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
-import { Plot } from '../../../components/plot/plot';
-import { CustomBackgroundChartContext } from '../context/customBackgroundChartContext';
-import { buildAriaLabel, formatValue } from '../utils/accessibility';
-export const CustomBackgroundChartPlot = ({ ariaLabel, dataKey, formatAriaValue, ...props }) => {
-    const { addError, data, dataTestId: parentTestId, viewBox, } = useContext(CustomBackgroundChartContext);
-    // Access data point by dataKey (PieChart pattern)
-    const dataPoint = useMemo(() => data[dataKey], [data, dataKey]);
-    // Validate dataKey and coordinates
-    useEffect(() => {
-        if (!dataPoint) {
-            addError?.('CUSTOM_BACKGROUND_CHART_PLOT_ERROR', {
-                error: new Error(`dataKey "${dataKey}" not found in data object.`),
-            });
-            return;
-        }
-        const { x, y } = dataPoint;
-        if (x < 0 || x > viewBox.width || y < 0 || y > viewBox.height) {
-            addError?.('CUSTOM_BACKGROUND_CHART_PLOT_ERROR', {
-                error: new Error(`Plot "${dataKey}" coordinates (${x}, ${y}) are outside viewBox bounds (0-${viewBox.width}, 0-${viewBox.height})`),
-            });
-        }
-    }, [dataPoint, dataKey, addError, viewBox.width, viewBox.height]);
-    // Generate accessible label using template system
-    const accessibleLabel = useMemo(() => {
-        if (!dataPoint) {
-            return dataKey;
-        }
-        // Format the value using custom formatter or default
-        const formattedValue = formatAriaValue
-            ? formatAriaValue(dataPoint.value)
-            : formatValue(dataPoint.value);
-        // Build label from template (uses default template if ariaLabel not provided)
-        return buildAriaLabel({
-            ariaLabel,
-            dataKey,
-            formattedValue,
-            name: dataPoint.name,
-            x: dataPoint.x,
-            y: dataPoint.y,
-        });
-    }, [ariaLabel, dataPoint, dataKey, formatAriaValue]);
-    const position = useMemo(() => ({ x: dataPoint?.x ?? 0, y: dataPoint?.y ?? 0 }), [dataPoint?.x, dataPoint?.y]);
-    if (!dataPoint) {
-        return null;
-    }
-    return (_jsx(Plot, { ...props, data: { value: dataPoint.value }, dataTestId: `${parentTestId}-plot-${dataKey}`, label: accessibleLabel, position: position }));
+import { CustomBackgroundChartContext } from "../context/customBackgroundChartContext.js";
+import { Plot } from "../../../components/plot/plot2.js";
+import { buildAriaLabel, formatValue } from "../utils/accessibility.js";
+import { useContext, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+const CustomBackgroundChartPlot = ({ ariaLabel: n, dataKey: r, formatAriaValue: i, ...a }) => {
+	let { addError: o, data: s, dataTestId: c, viewBox: l } = useContext(CustomBackgroundChartContext), u = useMemo(() => s[r], [s, r]);
+	useEffect(() => {
+		if (!u) {
+			o?.("CUSTOM_BACKGROUND_CHART_PLOT_ERROR", { error: /* @__PURE__ */ Error(`dataKey "${r}" not found in data object.`) });
+			return;
+		}
+		let { x: e, y: t } = u;
+		(e < 0 || e > l.width || t < 0 || t > l.height) && o?.("CUSTOM_BACKGROUND_CHART_PLOT_ERROR", { error: /* @__PURE__ */ Error(`Plot "${r}" coordinates (${e}, ${t}) are outside viewBox bounds (0-${l.width}, 0-${l.height})`) });
+	}, [
+		u,
+		r,
+		o,
+		l.width,
+		l.height
+	]);
+	let d = useMemo(() => u ? buildAriaLabel({
+		ariaLabel: n,
+		dataKey: r,
+		formattedValue: i ? i(u.value) : formatValue(u.value),
+		name: u.name,
+		x: u.x,
+		y: u.y
+	}) : r, [
+		n,
+		u,
+		r,
+		i
+	]), f = useMemo(() => ({
+		x: u?.x ?? 0,
+		y: u?.y ?? 0
+	}), [u?.x, u?.y]);
+	return u ? /* @__PURE__ */ jsx(Plot, {
+		...a,
+		data: { value: u.value },
+		dataTestId: `${c}-plot-${r}`,
+		label: d,
+		position: f
+	}) : null;
 };
+export { CustomBackgroundChartPlot };

package/dist/esm/charts/customBackgroundChart/index.js

@@ -1 +1 @@
-export * from './customBackgroundChart';
+export * from './customBackgroundChart.js';

package/dist/esm/charts/customBackgroundChart/utils/accessibility.js

@@ -1,32 +1,13 @@
-export const PLOT_TEMPLATE_KEYS = {
-    DATA_KEY: '{{dataKey}}',
-    NAME: '{{name}}',
-    VALUE: '{{value}}',
-    X: '{{x}}',
-    Y: '{{y}}',
-};
-export const DEFAULT_ARIA_LABEL_TEMPLATE = `${PLOT_TEMPLATE_KEYS.NAME}, ${PLOT_TEMPLATE_KEYS.VALUE}`;
-const DATA_KEY_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.DATA_KEY, 'g');
-const NAME_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.NAME, 'g');
-const VALUE_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.VALUE, 'g');
-const X_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.X, 'g');
-const Y_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.Y, 'g');
-export const buildAriaLabel = ({ ariaLabel, dataKey, name, formattedValue, x, y, }) => {
-    const template = ariaLabel ?? DEFAULT_ARIA_LABEL_TEMPLATE;
-    const displayName = name ?? dataKey;
-    return template
-        .replace(DATA_KEY_REGEXP, dataKey)
-        .replace(NAME_REGEXP, displayName)
-        .replace(VALUE_REGEXP, formattedValue)
-        .replace(X_REGEXP, String(x))
-        .replace(Y_REGEXP, String(y));
-};
-export const formatValue = (value) => {
-    if (typeof value === 'number') {
-        return value.toLocaleString();
-    }
-    if (typeof value === 'string') {
-        return value;
-    }
-    return JSON.stringify(value);
-};
+const PLOT_TEMPLATE_KEYS = {
+	DATA_KEY: "{{dataKey}}",
+	NAME: "{{name}}",
+	VALUE: "{{value}}",
+	X: "{{x}}",
+	Y: "{{y}}"
+}, DEFAULT_ARIA_LABEL_TEMPLATE = `${PLOT_TEMPLATE_KEYS.NAME}, ${PLOT_TEMPLATE_KEYS.VALUE}`;
+var DATA_KEY_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.DATA_KEY, "g"), NAME_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.NAME, "g"), VALUE_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.VALUE, "g"), X_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.X, "g"), Y_REGEXP = new RegExp(PLOT_TEMPLATE_KEYS.Y, "g");
+const buildAriaLabel = ({ ariaLabel: e, dataKey: t, name: n, formattedValue: r, x: i, y: a }) => {
+	let o = e ?? DEFAULT_ARIA_LABEL_TEMPLATE, s = n ?? t;
+	return o.replace(DATA_KEY_REGEXP, t).replace(NAME_REGEXP, s).replace(VALUE_REGEXP, r).replace(X_REGEXP, String(i)).replace(Y_REGEXP, String(a));
+}, formatValue = (e) => typeof e == "number" ? e.toLocaleString() : typeof e == "string" ? e : JSON.stringify(e);
+export { buildAriaLabel, formatValue };