@kubit-ui-web/react-charts 1.10.0 → 1.11.1

package/dist/cjs/utils/logger/logger.js

@@ -1,140 +1 @@
-/**
- * Logger utility for @kubit/web-ui-charts
- *
- * Provides a centralized logging system that:
- * - Respects NODE_ENV (disabled in production builds)
- * - Supports different log levels
- * - Can be configured/disabled by consumers
- * - Will be stripped out in production builds via terser
- */
-/**
- * Detect if we're in a production build
- * Uses globalThis to be compatible with different environments (browser, Node, SSR)
- */
-const isProduction = () => {
-    // Check if globalThis.process exists (Node/SSR environments)
-    if (typeof globalThis !== 'undefined' && 'process' in globalThis) {
-        const proc = globalThis.process;
-        return proc?.env?.NODE_ENV === 'production';
-    }
-    // In browser or other environments, assume development unless explicitly set
-    return false;
-};
-const DEFAULT_CONFIG = {
-    enabled: !isProduction(),
-    minLevel: 'info',
-    prefix: '[Kubit Charts]',
-};
-let config = { ...DEFAULT_CONFIG };
-const LOG_LEVELS = {
-    debug: 0,
-    error: 3,
-    info: 1,
-    warn: 2,
-};
-/**
- * Configure the logger behavior
- * @param newConfig - Partial configuration to merge with current settings
- *
- * @example
- * ```ts
- * // Disable all logging
- * configureLogger({ enabled: false });
- *
- * // Enable debug logs in development
- * configureLogger({ minLevel: 'debug' });
- * ```
- */
-export const configureLogger = (newConfig) => {
-    config = { ...config, ...newConfig };
-};
-/**
- * Reset logger to default configuration
- */
-export const resetLogger = () => {
-    config = { ...DEFAULT_CONFIG };
-};
-/**
- * Check if a log level should be output based on configuration
- */
-const shouldLog = (level) => {
-    if (!config.enabled) {
-        return false;
-    }
-    return LOG_LEVELS[level] >= LOG_LEVELS[config.minLevel];
-};
-/**
- * Format log message with prefix
- */
-const formatMessage = (message) => {
-    return `${config.prefix} ${message}`;
-};
-/**
- * Log debug messages (development only)
- * Useful for detailed debugging information
- *
- * @example
- * ```ts
- * logger.debug('Chart dimensions calculated', { width: 400, height: 300 });
- * ```
- */
-const debug = (message, ...args) => {
-    if (shouldLog('debug')) {
-        // eslint-disable-next-line no-console
-        console.debug(formatMessage(message), ...args);
-    }
-};
-/**
- * Log informational messages
- *
- * @example
- * ```ts
- * logger.info('Chart rendered successfully');
- * ```
- */
-const info = (message, ...args) => {
-    if (shouldLog('info')) {
-        // eslint-disable-next-line no-console
-        console.info(formatMessage(message), ...args);
-    }
-};
-/**
- * Log warning messages
- * Use for non-breaking issues that developers should be aware of
- *
- * @example
- * ```ts
- * logger.warn('Invalid gradient angle, falling back to default', angle);
- * ```
- */
-const warn = (message, ...args) => {
-    if (shouldLog('warn')) {
-        // eslint-disable-next-line no-console
-        console.warn(formatMessage(message), ...args);
-    }
-};
-/**
- * Log error messages
- * Use for errors that don't prevent execution but indicate problems
- *
- * @example
- * ```ts
- * logger.error('Failed to calculate text bounds, using fallback', error);
- * ```
- */
-const error = (message, ...args) => {
-    if (shouldLog('error')) {
-        // eslint-disable-next-line no-console
-        console.error(formatMessage(message), ...args);
-    }
-};
-/**
- * Main logger object
- * Export as singleton to ensure consistent configuration
- */
-export const logger = {
-    debug,
-    error,
-    info,
-    warn,
-};
+var e={enabled:!(typeof globalThis<`u`&&`process`in globalThis&&globalThis.process?.env?.NODE_ENV===`production`),minLevel:`info`,prefix:`[Kubit Charts]`},t={debug:0,error:3,info:1,warn:2},n=n=>e.enabled?t[n]>=t[e.minLevel]:!1,r=t=>`${e.prefix} ${t}`;exports.logger={debug:(e,...t)=>{n(`debug`)&&console.debug(r(e),...t)},error:(e,...t)=>{n(`error`)&&console.error(r(e),...t)},info:(e,...t)=>{n(`info`)&&console.info(r(e),...t)},warn:(e,...t)=>{n(`warn`)&&console.warn(r(e),...t)}};

package/dist/cjs/utils/parseStringToNumberPx.ts/parseStringToNumberPx.js

@@ -1,29 +1 @@
-import { Unit } from '../../types/unit.enum';
-const UNIT_VALUE_REGEX = /^(\d+(\.\d+)?)(px|rem|%)?$/;
-const MATCH_VALUE_INDEX = 1;
-const MATCH_UNIT_INDEX = 3;
-/**
- * Parses a string or number to a pixel value.
- * If the input is a string, it can be in the format '2px', '2rem', or '2'.
- * If the input is a number, it returns the number as is.
- *
- * @param value - The value to parse (string or number).
- * @returns The parsed pixel value as a number.
- * @throws Will throw an error if the string format is invalid.
- */
-export const parseStringToNumberPx = (value) => {
-    if (typeof value === 'number') {
-        return value;
-    }
-    //detect if the value is '2px' or '2rem' or '2'
-    const match = value.match(UNIT_VALUE_REGEX);
-    if (!match) {
-        throw new Error(`Invalid string format: "${value}"`);
-    }
-    const number = match[MATCH_VALUE_INDEX]; // match for group (\d+(\.\d+)?)
-    const unit = match[MATCH_UNIT_INDEX]; // match for group (px|rem|%)
-    if (unit === Unit.REM) {
-        return parseFloat(number) * 16;
-    }
-    return parseFloat(number);
-};
+const e=require(`../../types/unit.enum.js`);var t=/^(\d+(\.\d+)?)(px|rem|%)?$/,n=1,r=3;exports.parseStringToNumberPx=i=>{if(typeof i==`number`)return i;let a=i.match(t);if(!a)throw Error(`Invalid string format: "${i}"`);let o=a[n];return a[r]===e.Unit.REM?parseFloat(o)*16:parseFloat(o)};

package/dist/cjs/utils/pickCustomAttributes/pickCustomAttributes.js

@@ -1,47 +1 @@
-/**
- * Filters and extracts only aria-*, data-* and role attributes from a given object,
- * converting all values to strings for HTML compatibility.
- *
- * This function is useful for extracting accessibility and data attributes
- * from props or configuration objects and ensuring they are properly formatted
- * for HTML rendering.
- *
- * @param attributes - An optional object containing key-value pairs of attributes.
- *   - Keys can be strings representing attribute names.
- *   - Values can be strings, booleans, numbers, or any other type.
- *
- * @returns A new object containing only aria-*, data-* and role attributes:
- *   - Only includes attributes that start with `aria-` or `data-` or are exactly `role`.
- *   - All values are converted to strings for HTML compatibility.
- *   - Null and undefined values are excluded.
- *
- * @example
- * ```typescript
- * const props = {
- *   'aria-label': 'Button',
- *   'data-testid': 'my-button',
- *   'onClick': () => {},g
- *   'className': 'btn',
- *   'aria-hidden': true,
- *   'role': 'button',
- * };
- *
- * const result = pickCustomAttributes(props);
- * // Result: { 'aria-label': 'Button', 'data-testid': 'my-button', 'aria-hidden': 'true', 'role': 'button' }
- * ```
- */
-export const pickCustomAttributes = (
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-attributes) => {
-    if (!attributes) {
-        return {};
-    }
-    return Object.entries(attributes).reduce((acc, [key, value]) => {
-        if ((key.startsWith('aria-') || key.startsWith('data-') || key === 'role') &&
-            value !== null &&
-            value !== undefined) {
-            acc[key] = String(value);
-        }
-        return acc;
-    }, {});
-};
+exports.pickCustomAttributes=e=>e?Object.entries(e).reduce((e,[t,n])=>((t.startsWith(`aria-`)||t.startsWith(`data-`)||t===`role`)&&n!=null&&(e[t]=String(n)),e),{}):{};

package/dist/cjs/utils/shadowSvg/shadowSvg.js

@@ -1,4 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ShadowSvg = ({ height = '140%', width = '140%', x = '-20%', y = '-20%', ...props }) => {
-    return (_jsx("defs", { children: _jsx("filter", { height: height, id: props.id, width: width, x: x, y: y, children: _jsx("feDropShadow", { ...props.shadowSvgConfig }) }) }));
-};
+let e=require(`react/jsx-runtime`);exports.ShadowSvg=({height:t=`140%`,width:n=`140%`,x:r=`-20%`,y:i=`-20%`,...a})=>(0,e.jsx)(`defs`,{children:(0,e.jsx)(`filter`,{height:t,id:a.id,width:n,x:r,y:i,children:(0,e.jsx)(`feDropShadow`,{...a.shadowSvgConfig})})});

package/dist/cjs/utils/ssr/ssr.js

@@ -1,117 +1 @@
-/**
- * SSR (Server-Side Rendering) utilities
- *
- * Provides safe access to browser APIs when rendering on the server.
- * Compatible with Next.js, Remix, Gatsby, and other SSR frameworks.
- */
-/**
- * Check if code is running in a browser environment
- * @returns true if window is defined (browser), false otherwise (SSR)
- */
-export const isBrowser = () => {
-    return typeof window !== 'undefined' && typeof document !== 'undefined';
-};
-/**
- * Check if code is running in a server environment
- * @returns true if running on server (no window), false otherwise
- */
-export const isServer = () => {
-    return !isBrowser();
-};
-/**
- * Safely access window object
- * @returns window object if in browser, undefined if on server
- */
-export const safeWindow = () => {
-    return isBrowser() ? window : undefined;
-};
-/**
- * Safely access document object
- * @returns document object if in browser, undefined if on server
- */
-export const safeDocument = () => {
-    return isBrowser() ? document : undefined;
-};
-/**
- * Safely execute code that requires browser APIs
- * Returns undefined on server, executes callback in browser
- *
- * @param callback - Function to execute in browser environment
- * @returns Result of callback if in browser, undefined if on server
- *
- * @example
- * ```ts
- * const width = safeExecute(() => window.innerWidth) ?? 0;
- * ```
- */
-export const safeExecute = (callback) => {
-    if (!isBrowser()) {
-        return undefined;
-    }
-    try {
-        return callback();
-    }
-    catch (error) {
-        return undefined;
-    }
-};
-/**
- * Safely execute code with a fallback value for SSR
- *
- * @param callback - Function to execute in browser environment
- * @param fallback - Value to return if on server or if callback fails
- * @returns Result of callback if in browser, fallback otherwise
- *
- * @example
- * ```ts
- * const fontSize = safeExecuteWithFallback(
- *   () => parseFloat(getComputedStyle(document.documentElement).fontSize),
- *   16
- * );
- * ```
- */
-export const safeExecuteWithFallback = (callback, fallback) => {
-    return safeExecute(callback) ?? fallback;
-};
-/**
- * Create an SVG element safely (browser-only)
- * Returns undefined on server
- *
- * @param tagName - SVG element tag name
- * @returns SVG element if in browser, undefined if on server
- */
-export const createSVGElement = (tagName) => {
-    const doc = safeDocument();
-    if (!doc) {
-        return undefined;
-    }
-    return doc.createElementNS('http://www.w3.org/2000/svg', tagName);
-};
-/**
- * Get computed style safely
- * Returns undefined on server
- *
- * @param element - Element to get computed style for
- * @returns CSSStyleDeclaration if in browser, undefined if on server
- */
-export const safeGetComputedStyle = (element) => {
-    const win = safeWindow();
-    if (!win) {
-        return undefined;
-    }
-    return win.getComputedStyle(element);
-};
-/**
- * Query selector safely
- * Returns null on server or if not found
- *
- * @param selector - CSS selector string
- * @returns Element if found in browser, null otherwise
- */
-export const safeQuerySelector = (selector) => {
-    const doc = safeDocument();
-    if (!doc) {
-        return null;
-    }
-    return doc.querySelector(selector);
-};
+const e=()=>typeof window<`u`&&typeof document<`u`,t=()=>e()?window:void 0,n=()=>e()?document:void 0;exports.createSVGElement=e=>{let t=n();if(t)return t.createElementNS(`http://www.w3.org/2000/svg`,e)},exports.isBrowser=e,exports.safeDocument=n,exports.safeGetComputedStyle=e=>{let n=t();if(n)return n.getComputedStyle(e)},exports.safeQuerySelector=e=>{let t=n();return t?t.querySelector(e):null};

package/dist/cjs/utils/textBound/textBound.js

@@ -1,34 +1 @@
-import { createSVGElement, isBrowser, safeDocument } from '../ssr/ssr';
-export const textBound = ({ bound, data, fontSize, svgHeight, svgWidth, viewBox, }) => {
-    // SSR-safe: Return 0 if not in browser or no data
-    if (!isBrowser() || !data.length) {
-        return 0;
-    }
-    const doc = safeDocument();
-    if (!doc) {
-        return 0;
-    }
-    const svgContainer = createSVGElement('svg');
-    if (!svgContainer) {
-        return 0;
-    }
-    svgContainer.setAttribute('style', 'position: absolute; visibility: hidden; top: -9999px; left: -9999px;');
-    svgContainer.setAttribute('viewBox', viewBox);
-    svgContainer.setAttribute('width', svgWidth);
-    svgContainer.setAttribute('height', svgHeight);
-    doc.body.appendChild(svgContainer);
-    const sizes = data.map((d) => {
-        const text = createSVGElement('text');
-        if (!text) {
-            return 0;
-        }
-        text.setAttribute('font-size', fontSize);
-        text.textContent = d;
-        svgContainer.appendChild(text);
-        const size = text.getBBox()[bound];
-        text.remove();
-        return size;
-    });
-    svgContainer.remove();
-    return Math.max(...sizes, 0); // Ensure at least 0 is returned
-};
+const e=require(`../ssr/ssr.js`);exports.textBound=({bound:t,data:n,fontSize:r,svgHeight:i,svgWidth:a,viewBox:o})=>{if(!e.isBrowser()||!n.length)return 0;let s=e.safeDocument();if(!s)return 0;let c=e.createSVGElement(`svg`);if(!c)return 0;c.setAttribute(`style`,`position: absolute; visibility: hidden; top: -9999px; left: -9999px;`),c.setAttribute(`viewBox`,o),c.setAttribute(`width`,a),c.setAttribute(`height`,i),s.body.appendChild(c);let l=n.map(n=>{let i=e.createSVGElement(`text`);if(!i)return 0;i.setAttribute(`font-size`,r),i.textContent=n,c.appendChild(i);let a=i.getBBox()[t];return i.remove(),a});return c.remove(),Math.max(...l,0)};

package/dist/esm/charts/barChart/barChart.js

@@ -1,13 +1,12 @@
-import { BarChartStructure } from './barChartStructure';
-import { BarChartPath } from './fragments/barChartPath';
-import { BarChartSeparator } from './fragments/barChartSeparator';
-import { BarChartXAxis } from './fragments/barChartXAxis';
-import { BarChartYAxis } from './fragments/barChartYAxis';
-const BarChart = Object.assign(BarChartStructure, {
-    Path: BarChartPath,
-    Separator: BarChartSeparator,
-    XAxis: BarChartXAxis,
-    YAxis: BarChartYAxis,
+import { BarChartPath } from "./fragments/barChartPath.js";
+import { BarChartXAxis } from "./fragments/barChartXAxis.js";
+import { BarChartYAxis } from "./fragments/barChartYAxis.js";
+import { BarChartStructure } from "./barChartStructure.js";
+import { BarChartSeparator } from "./fragments/barChartSeparator.js";
+var BarChart = Object.assign(BarChartStructure, {
+	Path: BarChartPath,
+	Separator: BarChartSeparator,
+	XAxis: BarChartXAxis,
+	YAxis: BarChartYAxis
 });
 export { BarChart };
-export * from './barChart.type';

package/dist/esm/charts/barChart/barChartStructure.js

@@ -1,80 +1,69 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, useMemo } from 'react';
-import { SvgContainer } from '../../components/svgContainer/svgContainer';
-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 { BarChartContext } from './context/barChartContext';
-import { buildBarContextValue } from './context/buildBarContextValues';
-import { BarChartXAxis } from './fragments/barChartXAxis';
-import { BarChartYAxis } from './fragments/barChartYAxis';
-import { countBarChildren } from './utils/countBarChildren';
-export const BarChartStructure = ({ canvasConfig = DefaultCanvasConfig, caption, children, classNames, data, dataTestId: dataTestIdProp = 'bar-chart', gapBetweenBars = 0, height = '100%', onErrors, orientation, pKey, role, tabIndex, width = '100%', ...props }) => {
-    const dataTestId = useId(dataTestIdProp);
-    // Use the responsive canvas hook for dimension management
-    const { parsedCanvas, parsedCanvasExtraSpace, viewBox } = useResponsiveCanvas({
-        canvasConfig,
-        dataTestId,
-        height,
-        width,
-    });
-    const parsedCanvasWidth = parsedCanvas.width;
-    const parsedCanvasHeight = parsedCanvas.height;
-    // count how many of bar children exists
-    const barChildrenCount = countBarChildren(children);
-    const secureGap = gapBetweenBars * 2;
-    // Set the default axis for the chart
-    const defaultAxis = [
-        _jsx(BarChartXAxis, {}, "default-x-axis"),
-        _jsx(BarChartYAxis, {}, "default-y-axis"),
-    ];
-    const arrayChildren = (Children.toArray(children) || []);
-    const chidrenWithDefaultAxis = defaultAxis.concat(arrayChildren);
-    const maxValue = Math.max(parsedCanvasWidth, parsedCanvasHeight, parsedCanvasExtraSpace ?? 0);
-    const ajustedX = parsedCanvasWidth / maxValue;
-    const ajustedY = parsedCanvasHeight / maxValue;
-    const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
-    // Create a fingerprint of the data to avoid unnecessary contextValue updates
-    const dataFingerprint = getDataFingerprint(data);
-    // Build the context value
-    const contextValue = useMemo(() => {
-        // Clear previous errors before building new context
-        errorAccumulator.clearErrors();
-        return buildBarContextValue({
-            addError: (errorType, error) => {
-                errorAccumulator.addError(errorType, error);
-            },
-            ajustedX,
-            ajustedY,
-            canvasHeight: parsedCanvasHeight,
-            canvasWidth: parsedCanvasWidth,
-            children: chidrenWithDefaultAxis,
-            data,
-            gapBetweenBars: secureGap,
-            orientation,
-            pKey,
-            viewBox,
-        });
-    }, [
-        parsedCanvasHeight,
-        parsedCanvasWidth,
-        dataFingerprint,
-        pKey,
-        orientation,
-        errorAccumulator.addError,
-    ]);
-    return (_jsx(SvgContainer, { caption: caption, className: classNames, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBox, width: width, ...props, children: _jsx(BarChartContext.Provider, { value: {
-                ...contextValue,
-                barChildrenCount,
-                canvasExtraSpace: parsedCanvasExtraSpace,
-                canvasHeight: parsedCanvasHeight,
-                canvasWidth: parsedCanvasWidth,
-                data,
-                dataTestId,
-                gapBetweenBars,
-                orientation,
-                pKey,
-            }, children: children }) }));
+import { SvgContainer } from "../../components/svgContainer/svgContainer.js";
+import { useId } from "../../hooks/useId/useId.js";
+import { useResponsiveCanvas } from "../../hooks/useResponsiveCanvas/useResponsiveCanvas.js";
+import { DefaultCanvasConfig } from "../../types/canvas.type.js";
+import { createErrorAccumulator } from "../../utils/createErrorAccumulator/createErrorAccumulator.js";
+import { getDataFingerprint } from "../../utils/getDataFingerprint/getDataFingerprint.js";
+import { BarChartContext } from "./context/barChartContext.js";
+import { countBarChildren } from "./utils/countBarChildren.js";
+import { BarChartXAxis } from "./fragments/barChartXAxis.js";
+import { BarChartYAxis } from "./fragments/barChartYAxis.js";
+import { buildBarContextValue } from "./context/buildBarContextValues.js";
+import { Children, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+const BarChartStructure = ({ canvasConfig: n = DefaultCanvasConfig, caption: r, children: i, classNames: a, data: o, dataTestId: s = "bar-chart", gapBetweenBars: c = 0, height: l = "100%", onErrors: u, orientation: d, pKey: f, role: p, tabIndex: m, width: h = "100%", ...g }) => {
+	let _ = useId(s), { parsedCanvas: v, parsedCanvasExtraSpace: y, viewBox: b } = useResponsiveCanvas({
+		canvasConfig: n,
+		dataTestId: _,
+		height: l,
+		width: h
+	}), x = v.width, S = v.height, C = countBarChildren(i), w = c * 2, T = [/* @__PURE__ */ jsx(BarChartXAxis, {}, "default-x-axis"), /* @__PURE__ */ jsx(BarChartYAxis, {}, "default-y-axis")], E = Children.toArray(i) || [], D = T.concat(E), O = Math.max(x, S, y ?? 0), k = x / O, A = S / O, j = useMemo(() => createErrorAccumulator(u), [u]), M = useMemo(() => (j.clearErrors(), buildBarContextValue({
+		addError: (e, t) => {
+			j.addError(e, t);
+		},
+		ajustedX: k,
+		ajustedY: A,
+		canvasHeight: S,
+		canvasWidth: x,
+		children: D,
+		data: o,
+		gapBetweenBars: w,
+		orientation: d,
+		pKey: f,
+		viewBox: b
+	})), [
+		S,
+		x,
+		getDataFingerprint(o),
+		f,
+		d,
+		j.addError
+	]);
+	return /* @__PURE__ */ jsx(SvgContainer, {
+		caption: r,
+		className: a,
+		dataTestId: _,
+		height: l,
+		role: p,
+		tabIndex: m,
+		viewBox: b,
+		width: h,
+		...g,
+		children: /* @__PURE__ */ jsx(BarChartContext.Provider, {
+			value: {
+				...M,
+				barChildrenCount: C,
+				canvasExtraSpace: y,
+				canvasHeight: S,
+				canvasWidth: x,
+				data: o,
+				dataTestId: _,
+				gapBetweenBars: c,
+				orientation: d,
+				pKey: f
+			},
+			children: i
+		})
+	});
 };
+export { BarChartStructure };

package/dist/esm/charts/barChart/context/barChartContext.js

@@ -1,2 +1,3 @@
-import { createContext } from 'react';
-export const BarChartContext = createContext({});
+import { createContext } from "react";
+const BarChartContext = createContext({});
+export { BarChartContext };