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

package/dist/cjs/charts/lineChart/hook/useIndicator.js

@@ -1,31 +1 @@
-import { useEffect, useRef } from 'react';
-export const useIndicator = (xPosition, implement) => {
-    const pathRef = useRef(null);
-    const indicatorRef = useRef(null);
-    useEffect(() => {
-        if (!implement || !pathRef.current || !indicatorRef.current) {
-            return;
-        }
-        const path = pathRef.current;
-        const indicator = indicatorRef.current;
-        const pathLength = path.getTotalLength();
-        let start = 0;
-        let end = pathLength;
-        let mid, points;
-        // find the point on the path where the x position is, using binary search
-        while (end - start > 0.01) {
-            mid = (start + end) / 2;
-            points = path.getPointAtLength(mid);
-            if (points.x < xPosition) {
-                start = mid;
-            }
-            else {
-                end = mid;
-            }
-        }
-        const point = path.getPointAtLength(end);
-        indicator.setAttribute('transform', `translate(${point.x}, ${point.y})`);
-        indicator.setAttribute('pointer-events', 'none');
-    }, [xPosition]);
-    return { indicatorRef, pathRef };
-};
+let e=require(`react`);exports.useIndicator=(t,n)=>{let r=(0,e.useRef)(null),i=(0,e.useRef)(null);return(0,e.useEffect)(()=>{if(!n||!r.current||!i.current)return;let e=r.current,a=i.current,o=e.getTotalLength(),s=0,c=o,l,u;for(;c-s>.01;)l=(s+c)/2,u=e.getPointAtLength(l),u.x<t?s=l:c=l;let d=e.getPointAtLength(c);a.setAttribute(`transform`,`translate(${d.x}, ${d.y})`),a.setAttribute(`pointer-events`,`none`)},[t]),{indicatorRef:i,pathRef:r}};

package/dist/cjs/charts/lineChart/index.js

@@ -1 +1 @@
-export * from './lineChart';
+module.exports = { ...module.exports, ...require('./lineChart.js') };

package/dist/cjs/charts/lineChart/lineChart.js

@@ -1,13 +1 @@
-import { LineChartPath } from './fragments/lineChartPath';
-import { LineChartSeparator } from './fragments/lineChartSeparator';
-import { LineChartXAxis } from './fragments/lineChartXAxis';
-import { LineChartYAxis } from './fragments/lineChartYAxis';
-import { LineChartStructure } from './lineChartStructure';
-const LineChart = Object.assign(LineChartStructure, {
-    Path: LineChartPath,
-    Separator: LineChartSeparator,
-    XAxis: LineChartXAxis,
-    YAxis: LineChartYAxis,
-});
-export { LineChart };
-export * from './lineChart.type';
+const e=require(`./fragments/lineChartPath2.js`),t=require(`./fragments/lineChartSeparator.js`),n=require(`./fragments/lineChartXAxis.js`),r=require(`./fragments/lineChartYAxis.js`),i=require(`./lineChartStructure.js`);var a=Object.assign(i.LineChartStructure,{Path:e.LineChartPath,Separator:t.LineChartSeparator,XAxis:n.LineChartXAxis,YAxis:r.LineChartYAxis});exports.LineChart=a;

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

@@ -1,121 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, useEffect, useMemo, useState } 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 { getChildrenAttr } from '../../utils/getChildrenAttr/getChildrenAttr';
-import { getDataFingerprint } from '../../utils/getDataFingerprint/getDataFingerprint';
-import { buildLineContextValue } from './context/buildLineContextValue';
-import { LineChartContext } from './context/lineChartContext';
-import { LineChartXAxis } from './fragments/lineChartXAxis';
-import { LineChartYAxis } from './fragments/lineChartYAxis';
-import { useHover } from './hook/useHover';
-/**
- * Renders a line chart component.
- *
- * @component
- * @example
- * ```
- * <LineChart
- *   caption="Line Chart"
- *   canvasConfig={DefaultCanvasConfig}
- *   dataTestId="line-chart"
- *   width="100%"
- *   height="70%"
- *   data={chartData}
- * >
- *  {chartChildren}
- * </LineChart>
- * ```
- *
- * @param props - `LineChartProps` include:
- * - `width`: The width of the chart (default is '100%').
- * - `height`: The height of the chart (default is '100%').
- * - `data`: The data for the chart.
- * - `xKey`: The key for the x-axis data.
- * - `canvasConfig`: The configuration for the chart canvas (default is `DefaultCanvasConfig`).
- * - `dataTestId`: The data test ID for the chart (default is 'line-chart').
- * - `caption`: The caption for the chart (default is 'Line chart').
- *
- * @returns The rendered LineChart component.
- */
-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('');
-    // Use the responsive canvas hook for dimension management
-    const { parsedCanvas, parsedCanvasExtraSpace, viewBox } = useResponsiveCanvas({
-        canvasConfig,
-        dataTestId,
-        height,
-        width,
-    });
-    // Set the default axis for the chart
-    const defaultAxis = [
-        _jsx(LineChartXAxis, {}, "default-x-axis"),
-        _jsx(LineChartYAxis, {}, "default-y-axis"),
-    ];
-    const arrayChildren = (Children.toArray(children) || []);
-    const chidrenWithDefaultAxis = defaultAxis.concat(arrayChildren);
-    // watch the Y childs keys
-    getChildrenAttr({
-        attrName: 'dataKey',
-        children: chidrenWithDefaultAxis,
-        originalValue: childrenYKeys,
-        updateValue: setChildrenYKey,
-    });
-    const errorAccumulator = useMemo(() => createErrorAccumulator(onErrors), [onErrors]);
-    const dataFingerprint = getDataFingerprint(data);
-    const contextValue = useMemo(() => {
-        // Clear previous errors before building new context
-        errorAccumulator.clearErrors();
-        return buildLineContextValue({
-            addError: (errorType, error) => {
-                errorAccumulator.addError(errorType, error);
-            },
-            canvasHeight: parsedCanvas.height,
-            canvasWidth: parsedCanvas.width,
-            children: chidrenWithDefaultAxis,
-            data,
-            viewBox,
-            xKey,
-        });
-    }, [
-        parsedCanvas.width,
-        parsedCanvas.height,
-        dataFingerprint,
-        xKey,
-        childrenYKeys,
-        errorAccumulator.addError,
-    ]);
-    const { svgRef, xCursor, yCursor } = useHover({
-        canvasHeight: parsedCanvas.height,
-        canvasWidth: parsedCanvas.width,
-    });
-    useEffect(() => {
-        getPathArea?.({
-            x1: contextValue.xAxisCoordinates.coordinates.x1,
-            y1: contextValue.yAxisCoordinates.coordinates.y1,
-            x2: contextValue.xAxisCoordinates.coordinates.x2,
-            y2: contextValue.yAxisCoordinates.coordinates.y2,
-        });
-    }, [
-        contextValue.xAxisCoordinates.coordinates.x1,
-        contextValue.yAxisCoordinates.coordinates.y1,
-        contextValue.xAxisCoordinates.coordinates.x2,
-        contextValue.yAxisCoordinates.coordinates.y2,
-        getPathArea,
-    ]);
-    return (_jsx(SvgContainer, { ref: svgRef, ariaHidden: ariaHidden, ariaLabel: ariaLabel, caption: caption, className: classNames, "data-kbt-svg": true, dataTestId: dataTestId, height: height, role: role, tabIndex: tabIndex, viewBox: viewBox, width: width, ...props, children: _jsx(LineChartContext.Provider, { value: {
-                ...contextValue,
-                canvasExtraSpace: parsedCanvasExtraSpace,
-                canvasHeight: parsedCanvas.height,
-                canvasWidth: parsedCanvas.width,
-                data,
-                dataTestId,
-                xCursor,
-                xKey,
-                yCursor,
-            }, children: children }) }));
-};
+const e=require(`../../components/svgContainer/svgContainer.js`),t=require(`../../hooks/useId/useId.js`),n=require(`../../hooks/useResponsiveCanvas/useResponsiveCanvas.js`),r=require(`../../types/canvas.type.js`),i=require(`../../utils/createErrorAccumulator/createErrorAccumulator.js`),a=require(`../../utils/getDataFingerprint/getDataFingerprint.js`),o=require(`./hook/useHover.js`),s=require(`./context/lineChartContext.js`),c=require(`./fragments/lineChartXAxis.js`),l=require(`./fragments/lineChartYAxis.js`),u=require(`../../utils/getChildrenAttr/getChildrenAttr.js`),d=require(`./context/buildLineContextValue.js`);let f=require(`react`),p=require(`react/jsx-runtime`);exports.LineChartStructure=({ariaHidden:m,ariaLabel:h,canvasConfig:g=r.DefaultCanvasConfig,caption:_,children:v,classNames:y,data:b,dataTestId:x=`line-chart`,getPathArea:S,height:C=`100%`,onErrors:w,role:T,tabIndex:E,width:D=`100%`,xKey:O,...k})=>{let A=t.useId(x),[j,M]=(0,f.useState)(``),{parsedCanvas:N,parsedCanvasExtraSpace:P,viewBox:F}=n.useResponsiveCanvas({canvasConfig:g,dataTestId:A,height:C,width:D}),I=[(0,p.jsx)(c.LineChartXAxis,{},`default-x-axis`),(0,p.jsx)(l.LineChartYAxis,{},`default-y-axis`)],L=f.Children.toArray(v)||[],R=I.concat(L);u.getChildrenAttr({attrName:`dataKey`,children:R,originalValue:j,updateValue:M});let z=(0,f.useMemo)(()=>i.createErrorAccumulator(w),[w]),B=a.getDataFingerprint(b),V=(0,f.useMemo)(()=>(z.clearErrors(),d.buildLineContextValue({addError:(e,t)=>{z.addError(e,t)},canvasHeight:N.height,canvasWidth:N.width,children:R,data:b,viewBox:F,xKey:O})),[N.width,N.height,B,O,j,z.addError]),{svgRef:H,xCursor:U,yCursor:W}=o.useHover({canvasHeight:N.height,canvasWidth:N.width});return(0,f.useEffect)(()=>{S?.({x1:V.xAxisCoordinates.coordinates.x1,y1:V.yAxisCoordinates.coordinates.y1,x2:V.xAxisCoordinates.coordinates.x2,y2:V.yAxisCoordinates.coordinates.y2})},[V.xAxisCoordinates.coordinates.x1,V.yAxisCoordinates.coordinates.y1,V.xAxisCoordinates.coordinates.x2,V.yAxisCoordinates.coordinates.y2,S]),(0,p.jsx)(e.SvgContainer,{ref:H,ariaHidden:m,ariaLabel:h,caption:_,className:y,"data-kbt-svg":!0,dataTestId:A,height:C,role:T,tabIndex:E,viewBox:F,width:D,...k,children:(0,p.jsx)(s.LineChartContext.Provider,{value:{...V,canvasExtraSpace:P,canvasHeight:N.height,canvasWidth:N.width,data:b,dataTestId:A,xCursor:U,xKey:O,yCursor:W},children:v})})};

package/dist/cjs/charts/lineChart/utils/accessibilityTemplateProcessor.js

@@ -1,56 +1 @@
-// Template keys for accessibility labels
-export const TEMPLATE_KEYS = {
-    DATA_KEY: '{{dataKey}}',
-    INDEX: '{{index}}',
-    X_VALUE: '{{xValue}}',
-    Y_VALUE: '{{yValue}}',
-};
-/**
- * Processes template string in accessibility labels by replacing placeholders with actual values
- *
- * @param template - The template string with placeholders (e.g., "Point {{index}}: {{dataKey}} = {{yValue}}")
- * @param nodeData - Contains index, dataValue, dataKey, and xKey for the current node
- * @param dataValue - The actual data array or value (optional, uses nodeData.dataValue if not provided)
- * @returns The processed string with placeholders replaced by actual values
- *
- * @example
- * ```typescript
- * const template = "Data point {{index}}: {{dataKey}} = {{yValue}}";
- * const nodeData = { index: 0, dataKey: "sales", xKey: "month" };
- * const dataValue = [{ month: "Jan", sales: 100 }];
- *
- * const result = processAccessibilityTemplate(template, nodeData, dataValue);
- * // Result: "Data point 1: sales = 100"
- * ```
- */
-const extractValuesFromDataPoint = (dataPoint, nodeData) => {
-    const xValue = dataPoint && nodeData.xKey ? (dataPoint[nodeData.xKey]?.toString() ?? '') : '';
-    const yValue = dataPoint && nodeData.dataKey ? (dataPoint[nodeData.dataKey]?.toString() ?? '') : '';
-    return { xValue, yValue };
-};
-const replaceTemplatePlaceholders = (template, nodeData, xValue, yValue) => {
-    let result = template;
-    if (nodeData.dataKey !== undefined) {
-        result = result.replace(new RegExp(TEMPLATE_KEYS.DATA_KEY, 'g'), nodeData.dataKey);
-    }
-    // Always replace xValue and yValue placeholders, even with empty strings
-    result = result.replace(new RegExp(TEMPLATE_KEYS.X_VALUE, 'g'), xValue);
-    result = result.replace(new RegExp(TEMPLATE_KEYS.Y_VALUE, 'g'), yValue);
-    if (nodeData.index !== undefined) {
-        result = result.replace(new RegExp(TEMPLATE_KEYS.INDEX, 'g'), (nodeData.index + 1).toString());
-    }
-    return result;
-};
-export const processAccessibilityTemplate = (template, nodeData, dataValue) => {
-    if (!template) {
-        return undefined;
-    }
-    // Use provided dataValue or fall back to nodeData.dataValue
-    const actualDataValue = dataValue ?? nodeData.dataValue;
-    // Get the actual data point for this node
-    const dataPoint = Array.isArray(actualDataValue) ? actualDataValue[nodeData.index] : undefined;
-    // Extract values
-    const { xValue, yValue } = extractValuesFromDataPoint(dataPoint, nodeData);
-    // Replace template placeholders
-    return replaceTemplatePlaceholders(template, nodeData, xValue, yValue);
-};
+const e={DATA_KEY:`{{dataKey}}`,INDEX:`{{index}}`,X_VALUE:`{{xValue}}`,Y_VALUE:`{{yValue}}`};var t=(e,t)=>({xValue:e&&t.xKey?e[t.xKey]?.toString()??``:``,yValue:e&&t.dataKey?e[t.dataKey]?.toString()??``:``}),n=(t,n,r,i)=>{let a=t;return n.dataKey!==void 0&&(a=a.replace(new RegExp(e.DATA_KEY,`g`),n.dataKey)),a=a.replace(new RegExp(e.X_VALUE,`g`),r),a=a.replace(new RegExp(e.Y_VALUE,`g`),i),n.index!==void 0&&(a=a.replace(new RegExp(e.INDEX,`g`),(n.index+1).toString())),a};exports.processAccessibilityTemplate=(e,r,i)=>{if(!e)return;let a=i??r.dataValue,{xValue:o,yValue:s}=t(Array.isArray(a)?a[r.index]:void 0,r);return n(e,r,o,s)};

package/dist/cjs/charts/lineChart/utils/findSurroundingNumber.js

@@ -1,25 +1 @@
-export const findSurroundingNumber = (points, xPosition) => {
-    let idx = 0;
-    let match = false;
-    // TODO: performance the init and last point
-    for (let i = 0; i < points.length; i++) {
-        if (Math.round(points[i]) === Math.round(xPosition)) {
-            match = true;
-            idx = i;
-            break;
-        }
-    }
-    return { idx, match };
-};
-export const findClosestNumber = (points, xPosition) => {
-    let closest = 0;
-    let minDiff = Math.abs(points[0] - xPosition);
-    for (let i = 1; i < points.length; i++) {
-        const diff = Math.abs(points[i] - xPosition);
-        if (diff < minDiff) {
-            closest = i;
-            minDiff = diff;
-        }
-    }
-    return closest;
-};
+exports.findClosestNumber=(e,t)=>{let n=0,r=Math.abs(e[0]-t);for(let i=1;i<e.length;i++){let a=Math.abs(e[i]-t);a<r&&(n=i,r=a)}return n},exports.findSurroundingNumber=(e,t)=>{let n=0,r=!1;for(let i=0;i<e.length;i++)if(Math.round(e[i])===Math.round(t)){r=!0,n=i;break}return{idx:n,match:r}};

package/dist/cjs/charts/lineChart/utils/getCoordinates.js

@@ -1,55 +1 @@
-import { Positions } from '../../../types/position.enum';
-export const getXCoordinates = ({ lineChartXPosition, lineChartYPosition, canvasHeight, canvasWidth, customBreakAxis, xAxisLeftSpacing, xAxisTopSpacing, xAxisRightSpacing, xAxisBottomSpacing, yAxisLeftSpacing, yAxisTopSpacing, yAxisRightSpacing, yAxisBottomSpacing, }) => {
-    const x1 = lineChartYPosition === Positions.LEFT ? Math.max(yAxisLeftSpacing, xAxisLeftSpacing) : 0;
-    const x2 = lineChartYPosition === Positions.RIGHT
-        ? canvasWidth - Math.max(yAxisRightSpacing, xAxisRightSpacing)
-        : canvasWidth;
-    if (lineChartXPosition === Positions.TOP) {
-        return {
-            x1,
-            x2,
-            y1: Math.max(yAxisTopSpacing, xAxisTopSpacing),
-            y2: Math.max(yAxisTopSpacing, xAxisTopSpacing),
-        };
-    }
-    if (lineChartXPosition === Positions.CENTER) {
-        return { x1, x2, y1: canvasHeight / 2, y2: canvasHeight / 2 };
-    }
-    if (lineChartXPosition === Positions.CUSTOM) {
-        return { x1, x2, y1: customBreakAxis, y2: customBreakAxis };
-    }
-    // BOTTOM
-    return {
-        x1,
-        x2,
-        y1: canvasHeight - Math.max(yAxisBottomSpacing, xAxisBottomSpacing),
-        y2: canvasHeight - Math.max(yAxisBottomSpacing, xAxisBottomSpacing),
-    };
-};
-export const getYCoordinates = ({ lineChartXPosition, lineChartYPosition, canvasHeight, canvasWidth, customBreakAxis, xAxisLeftSpacing, xAxisTopSpacing, xAxisRightSpacing, xAxisBottomSpacing, yAxisLeftSpacing, yAxisTopSpacing, yAxisRightSpacing, yAxisBottomSpacing, }) => {
-    const y1 = lineChartXPosition === Positions.TOP ? Math.max(yAxisTopSpacing, xAxisTopSpacing) : 0;
-    const y2 = lineChartXPosition === Positions.BOTTOM
-        ? canvasHeight - Math.max(yAxisBottomSpacing, xAxisBottomSpacing)
-        : canvasHeight;
-    if (lineChartYPosition === Positions.RIGHT) {
-        return {
-            x1: canvasWidth - Math.max(yAxisRightSpacing, xAxisRightSpacing),
-            x2: canvasWidth - Math.max(yAxisRightSpacing, xAxisRightSpacing),
-            y1,
-            y2,
-        };
-    }
-    if (lineChartYPosition === Positions.CENTER) {
-        return { x1: canvasWidth / 2, x2: canvasWidth / 2, y1, y2 };
-    }
-    if (lineChartYPosition === Positions.CUSTOM) {
-        return { x1: customBreakAxis, x2: customBreakAxis, y1, y2 };
-    }
-    // LEFT
-    return {
-        x1: Math.max(yAxisLeftSpacing, xAxisLeftSpacing),
-        x2: Math.max(yAxisLeftSpacing, xAxisLeftSpacing),
-        y1,
-        y2,
-    };
-};
+const e=require(`../../../types/position.enum.js`);exports.getXCoordinates=({lineChartXPosition:t,lineChartYPosition:n,canvasHeight:r,canvasWidth:i,customBreakAxis:a,xAxisLeftSpacing:o,xAxisTopSpacing:s,xAxisRightSpacing:c,xAxisBottomSpacing:l,yAxisLeftSpacing:u,yAxisTopSpacing:d,yAxisRightSpacing:f,yAxisBottomSpacing:p})=>{let m=n===e.Positions.LEFT?Math.max(u,o):0,h=n===e.Positions.RIGHT?i-Math.max(f,c):i;return t===e.Positions.TOP?{x1:m,x2:h,y1:Math.max(d,s),y2:Math.max(d,s)}:t===e.Positions.CENTER?{x1:m,x2:h,y1:r/2,y2:r/2}:t===e.Positions.CUSTOM?{x1:m,x2:h,y1:a,y2:a}:{x1:m,x2:h,y1:r-Math.max(p,l),y2:r-Math.max(p,l)}},exports.getYCoordinates=({lineChartXPosition:t,lineChartYPosition:n,canvasHeight:r,canvasWidth:i,customBreakAxis:a,xAxisLeftSpacing:o,xAxisTopSpacing:s,xAxisRightSpacing:c,xAxisBottomSpacing:l,yAxisLeftSpacing:u,yAxisTopSpacing:d,yAxisRightSpacing:f,yAxisBottomSpacing:p})=>{let m=t===e.Positions.TOP?Math.max(d,s):0,h=t===e.Positions.BOTTOM?r-Math.max(p,l):r;return n===e.Positions.RIGHT?{x1:i-Math.max(f,c),x2:i-Math.max(f,c),y1:m,y2:h}:n===e.Positions.CENTER?{x1:i/2,x2:i/2,y1:m,y2:h}:n===e.Positions.CUSTOM?{x1:a,x2:a,y1:m,y2:h}:{x1:Math.max(u,o),x2:Math.max(u,o),y1:m,y2:h}};

package/dist/cjs/charts/lineChart/utils/getDataValues.js

@@ -1,24 +1 @@
-/**
- * Retrieves the data values from the given TickValuesAxisProps object.
- * @param data - The TickValuesAxisProps object containing the data values.
- * @returns An array of string values representing the data, or undefined if the data is invalid.
- */
-export const getDataValues = (data) => {
-    if (data.custom) {
-        return data.custom?.values;
-    }
-    if (data.numeric) {
-        const { max, min = 0, step } = data.numeric;
-        // Verify if the step is larger or equal than the range
-        const range = Math.abs(max - min);
-        if (step >= range || step <= 0) {
-            return [min.toString(), max.toString()];
-        }
-        const stepper = [];
-        for (let i = min; i <= max; i += step) {
-            stepper.push(i.toString());
-        }
-        return stepper;
-    }
-    return undefined;
-};
+exports.getDataValues=e=>{if(e.custom)return e.custom?.values;if(e.numeric){let{max:t,min:n=0,step:r}=e.numeric;if(r>=Math.abs(t-n)||r<=0)return[n.toString(),t.toString()];let i=[];for(let e=n;e<=t;e+=r)i.push(e.toString());return i}};

package/dist/cjs/charts/lineChart/utils/getExtraSpacing.js

@@ -1,141 +1 @@
-import { Children, isValidElement } from 'react';
-import { Positions } from '../../../types/position.enum';
-import { buildTickValues } from '../../../utils/buildTickValues/buildTickValues';
-import { textBound } from '../../../utils/textBound/textBound';
-import { LineChartXAxis } from '../fragments/lineChartXAxis';
-import { LineChartYAxis } from '../fragments/lineChartYAxis';
-import { getDataValues } from './getDataValues';
-import { getYKeyRoundMaxValue } from './getRoundedMaxValue';
-import { getXAxisLeftTextSpacing, getXAxisRightTextSpacing, getYAxisLeftTextSpacing, getYAxisRightTextSpacing, } from './tickTextPosition';
-const getBreakAxis = ({ tickValues, tickText }) => {
-    if (tickValues?.numeric) {
-        return tickValues.numeric.breakAxis ?? 0;
-    }
-    return tickText?.custom?.breakAxis ?? 0;
-};
-const handleLineChartXAxis = (child, data, xKey, viewBox, canvasHeight, canvasWidth) => {
-    const { position = Positions.BOTTOM, tickText, tickValues, valueFormatter } = child.props;
-    const fontSize = tickText?.fontSize ?? 0;
-    const xData = tickValues ? getDataValues(tickValues) : data.map(d => d[xKey]);
-    // Apply the valueFormatter if provided to get the actual rendered text width
-    const formattedXData = valueFormatter ? xData.map(valueFormatter) : xData;
-    const textWidth = textBound({
-        bound: 'width',
-        data: formattedXData,
-        fontSize,
-        svgHeight: `${canvasHeight}`,
-        svgWidth: `${canvasWidth}`,
-        viewBox,
-    });
-    const textHeight = textBound({
-        bound: 'height',
-        data: formattedXData,
-        fontSize,
-        svgHeight: `${canvasHeight}`,
-        svgWidth: `${canvasWidth}`,
-        viewBox,
-    });
-    const xAxisBottomSpacing = position === Positions.BOTTOM ? textHeight + (tickText?.top ?? 0) : 0;
-    const xAxisTopSpacing = position === Positions.TOP ? textHeight + (tickText?.bottom ?? 0) : 0;
-    const xBreakAxis = getBreakAxis({ tickValues, tickText });
-    return {
-        xAxisLeftSpacing: getXAxisLeftTextSpacing({
-            textWidth,
-            tickText,
-        }),
-        xAxisTopSpacing,
-        xAxisRightSpacing: getXAxisRightTextSpacing({
-            textWidth,
-            tickText,
-        }),
-        xAxisBottomSpacing,
-        lineChartXPosition: position,
-        xBreakAxis,
-        xData,
-    };
-};
-const handleLineChartYAxis = (child, data, xKey, viewBox, canvasHeight, canvasWidth) => {
-    const { position = Positions.LEFT, tickText, tickValues, valueFormatter } = child.props;
-    const fontSize = tickText?.fontSize ?? 0;
-    const dataValues = tickValues ||
-        buildTickValues([...new Set(getYKeyRoundMaxValue(data, xKey))]);
-    const yData = getDataValues(dataValues);
-    // Apply the valueFormatter if provided to get the actual rendered text width
-    const formattedYData = valueFormatter ? yData.map(valueFormatter) : yData;
-    const yAxisText = textBound({
-        bound: 'width',
-        data: formattedYData,
-        fontSize: fontSize,
-        svgHeight: `${canvasHeight}`,
-        svgWidth: `${canvasWidth}`,
-        viewBox,
-    });
-    const textHeight = textBound({
-        bound: 'height',
-        data: formattedYData,
-        fontSize,
-        svgHeight: `${canvasHeight}`,
-        svgWidth: `${canvasWidth}`,
-        viewBox,
-    });
-    return {
-        yAxisLeftSpacing: getYAxisLeftTextSpacing({
-            tickText,
-            textWidth: yAxisText,
-            yAxisPosition: position,
-        }),
-        yAxisTopSpacing: textHeight,
-        yAxisRightSpacing: getYAxisRightTextSpacing({
-            tickText,
-            textWidth: yAxisText,
-            yAxisPosition: position,
-        }),
-        yAxisBottomSpacing: 0,
-        lineChartYPosition: position,
-        yAxisText,
-        yBreakAxis: getBreakAxis({ tickValues, tickText }),
-        yData,
-    };
-};
-/**
- * Calculates the extra spacing required for a line chart.
- * @param {GetExtraSpacing} options - The options for calculating extra spacing.
- * @returns {LineChartExtraSpacings} - The calculated extra spacings for the line chart.
- */
-export const getExtraSpacing = ({ canvasHeight, canvasWidth, children, data, viewBox, xKey, }) => {
-    let result = {
-        xAxisLeftSpacing: 0,
-        xAxisTopSpacing: 0,
-        xAxisRightSpacing: 0,
-        xAxisBottomSpacing: 0,
-        yAxisLeftSpacing: 0,
-        yAxisTopSpacing: 0,
-        yAxisRightSpacing: 0,
-        yAxisBottomSpacing: 0,
-        lineChartXPosition: Positions.BOTTOM,
-        lineChartYPosition: Positions.LEFT,
-        xAxisText: 0,
-        xBreakAxis: 0,
-        xData: [],
-        yAxisText: 0,
-        yBreakAxis: 0,
-        yData: [],
-    };
-    Children.forEach(children, (child) => {
-        if (isValidElement(child)) {
-            if (child.type === LineChartXAxis) {
-                result = {
-                    ...result,
-                    ...handleLineChartXAxis(child, data, xKey, viewBox, canvasHeight, canvasWidth),
-                };
-            }
-            else if (child.type === LineChartYAxis) {
-                result = {
-                    ...result,
-                    ...handleLineChartYAxis(child, data, xKey, viewBox, canvasHeight, canvasWidth),
-                };
-            }
-        }
-    });
-    return result;
-};
+const e=require(`../../../types/position.enum.js`),t=require(`../../../utils/buildTickValues/buildTickValues.js`),n=require(`../../../utils/textBound/textBound.js`),r=require(`../fragments/lineChartXAxis.js`),i=require(`./tickTextPosition.js`),a=require(`../fragments/lineChartYAxis.js`),o=require(`./getDataValues.js`),s=require(`./getRoundedMaxValue.js`);let c=require(`react`);var l=({tickValues:e,tickText:t})=>e?.numeric?e.numeric.breakAxis??0:t?.custom?.breakAxis??0,u=(t,r,a,s,c,u)=>{let{position:d=e.Positions.BOTTOM,tickText:f,tickValues:p,valueFormatter:m}=t.props,h=f?.fontSize??0,g=p?o.getDataValues(p):r.map(e=>e[a]),_=m?g.map(m):g,v=n.textBound({bound:`width`,data:_,fontSize:h,svgHeight:`${c}`,svgWidth:`${u}`,viewBox:s}),y=n.textBound({bound:`height`,data:_,fontSize:h,svgHeight:`${c}`,svgWidth:`${u}`,viewBox:s}),b=d===e.Positions.BOTTOM?y+(f?.top??0):0,x=d===e.Positions.TOP?y+(f?.bottom??0):0,S=l({tickValues:p,tickText:f});return{xAxisLeftSpacing:i.getXAxisLeftTextSpacing({textWidth:v,tickText:f}),xAxisTopSpacing:x,xAxisRightSpacing:i.getXAxisRightTextSpacing({textWidth:v,tickText:f}),xAxisBottomSpacing:b,lineChartXPosition:d,xBreakAxis:S,xData:g}},d=(r,a,c,u,d,f)=>{let{position:p=e.Positions.LEFT,tickText:m,tickValues:h,valueFormatter:g}=r.props,_=m?.fontSize??0,v=o.getDataValues(h||t.buildTickValues([...new Set(s.getYKeyRoundMaxValue(a,c))])),y=g?v.map(g):v,b=n.textBound({bound:`width`,data:y,fontSize:_,svgHeight:`${d}`,svgWidth:`${f}`,viewBox:u}),x=n.textBound({bound:`height`,data:y,fontSize:_,svgHeight:`${d}`,svgWidth:`${f}`,viewBox:u});return{yAxisLeftSpacing:i.getYAxisLeftTextSpacing({tickText:m,textWidth:b,yAxisPosition:p}),yAxisTopSpacing:x,yAxisRightSpacing:i.getYAxisRightTextSpacing({tickText:m,textWidth:b,yAxisPosition:p}),yAxisBottomSpacing:0,lineChartYPosition:p,yAxisText:b,yBreakAxis:l({tickValues:h,tickText:m}),yData:v}};exports.getExtraSpacing=({canvasHeight:t,canvasWidth:n,children:i,data:o,viewBox:s,xKey:l})=>{let f={xAxisLeftSpacing:0,xAxisTopSpacing:0,xAxisRightSpacing:0,xAxisBottomSpacing:0,yAxisLeftSpacing:0,yAxisTopSpacing:0,yAxisRightSpacing:0,yAxisBottomSpacing:0,lineChartXPosition:e.Positions.BOTTOM,lineChartYPosition:e.Positions.LEFT,xAxisText:0,xBreakAxis:0,xData:[],yAxisText:0,yBreakAxis:0,yData:[]};return c.Children.forEach(i,e=>{(0,c.isValidElement)(e)&&(e.type===r.LineChartXAxis?f={...f,...u(e,o,l,s,t,n)}:e.type===a.LineChartYAxis&&(f={...f,...d(e,o,l,s,t,n)}))}),f};

package/dist/cjs/charts/lineChart/utils/getPathData.js

@@ -1,33 +1 @@
-/**
- * Generates SVG path data from an array of points.
- * @param points - An array of points, where each point is an array of two numbers representing the x and y coordinates.
- * @param curved - A boolean indicating whether the path should be a cubic Bezier curve (true) or a straight line (false). Defaults to false.
- * @param svgWidth - The width of the SVG container.
- * @param svgHeight - The height of the SVG container.
- * @param extendToBottom - A boolean indicating whether the path should extend to the bottom of the SVG container. Defaults to false.
- * @returns The SVG path data as a string.
- */
-export const getPathData = ({ curved = false, extendToBottom = false, points, svgHeight, }) => {
-    if (points.length === 0) {
-        return '';
-    }
-    const [firstPoint, ...remainingPoints] = points;
-    let pathData = `M ${firstPoint[0]} ${firstPoint[1]}`;
-    if (curved) {
-        pathData += remainingPoints.reduce((data, point, i) => {
-            const [x1, y1] = points[i];
-            const [x2, y2] = point;
-            const dx = (x2 - x1) * 0.3;
-            const controlPoint1 = [x1 + dx, y1];
-            const controlPoint2 = [x2 - dx, y2];
-            return `${data} C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
-        }, '');
-    }
-    else {
-        pathData += remainingPoints.reduce((data, point) => `${data} L ${point[0]} ${point[1]}`, '');
-    }
-    if (extendToBottom) {
-        pathData += ` L ${remainingPoints[remainingPoints.length - 1][0]} ${svgHeight} L ${firstPoint[0]} ${svgHeight} Z`;
-    }
-    return pathData;
-};
+exports.getPathData=({curved:e=!1,extendToBottom:t=!1,points:n,svgHeight:r})=>{if(n.length===0)return``;let[i,...a]=n,o=`M ${i[0]} ${i[1]}`;return e?o+=a.reduce((e,t,r)=>{let[i,a]=n[r],[o,s]=t,c=(o-i)*.3,l=[i+c,a],u=[o-c,s];return`${e} C ${l[0]} ${l[1]}, ${u[0]} ${u[1]}, ${o} ${s}`},``):o+=a.reduce((e,t)=>`${e} L ${t[0]} ${t[1]}`,``),t&&(o+=` L ${a[a.length-1][0]} ${r} L ${i[0]} ${r} Z`),o};

package/dist/cjs/charts/lineChart/utils/getProjection.js

@@ -1,105 +1 @@
-const addXProjection = (point, projection) => {
-    if (!projection) {
-        return point;
-    }
-    const isNegative = projection < 0;
-    const diff = Math.abs(projection);
-    const pointDiff = (point * diff) / 100;
-    return isNegative ? point - pointDiff : point + pointDiff;
-};
-const addYProjection = (point, svgHeight, projection) => {
-    if (!projection) {
-        return point;
-    }
-    const isNegative = projection < 0;
-    const diff = Math.abs(projection);
-    const ref = point === 0 ? svgHeight : point;
-    const pointDiff = (ref * diff) / 100;
-    return isNegative ? point + pointDiff : point - pointDiff;
-};
-/**
- * Generates the SVG path data for a line chart with optional upper and lower projections.
- *
- * @param {Object} params - The parameters for generating the projection.
- * @param {PointType[]} params.points - The data points for the line chart.
- * @param {boolean} params.curved - Whether the line should be curved.
- * @param {number} params.svgHeight - The height of the SVG element.
- * @param {ProjectionType} [params.upperProjection] - The upper projection data.
- * @param {ProjectionType} [params.lowerProjection] - The lower projection data.
- * @returns {GetProjectionReturnType} The generated SVG path data.
- */
-export const getProjection = ({ curved, lowerProjection, points, svgHeight, upperProjection, }) => {
-    const hasProjections = upperProjection || lowerProjection;
-    if (points.length === 0 && !hasProjections) {
-        return { shapePath: '' };
-    }
-    const [firstPoint, ...remainingPoints] = points;
-    const startPath = `M ${firstPoint[0]} ${firstPoint[1]}`;
-    let shapePath = startPath;
-    let upPath = upperProjection ? startPath : undefined;
-    let downPath = lowerProjection ? startPath : undefined;
-    const upperData = [];
-    const lowerData = [];
-    remainingPoints.forEach(([x, y]) => {
-        const lineUp = upperProjection
-            ? [addXProjection(x, upperProjection.x), addYProjection(y, svgHeight, upperProjection.y)]
-            : [x, y];
-        const lineDown = lowerProjection
-            ? [
-                addXProjection(x, -(lowerProjection.x ?? 0)),
-                addYProjection(y, svgHeight, -(lowerProjection.y ?? 0)),
-            ]
-            : [x, y];
-        upperData.push(lineUp);
-        lowerData.push(lineDown);
-    });
-    const hasAllProjections = upperProjection && lowerProjection;
-    const combinedData = hasAllProjections
-        ? [...upperData, remainingPoints.at(-1), ...lowerData.reverse(), firstPoint]
-        : [...upperData, ...lowerData.reverse(), firstPoint];
-    if (curved) {
-        shapePath += combinedData.reduce((data, point, i) => {
-            const start = i === 0 ? firstPoint : combinedData[i - 1];
-            const [x1, y1] = start;
-            const [x2, y2] = point;
-            const dx = (x2 - x1) * 0.3;
-            const controlPoint1 = [x1 + dx, y1];
-            const controlPoint2 = [x2 - dx, y2];
-            return `${data} C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
-        }, '');
-        if (upPath) {
-            upPath += upperData.reduce((data, point, i) => {
-                const start = i === 0 ? firstPoint : upperData[i - 1];
-                const [x1, y1] = start;
-                const [x2, y2] = point;
-                const dx = (x2 - x1) * 0.3;
-                const controlPoint1 = [x1 + dx, y1];
-                const controlPoint2 = [x2 - dx, y2];
-                return `${data} C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
-            }, '');
-        }
-        if (downPath) {
-            downPath += lowerData.reverse().reduce((data, point, i) => {
-                const start = i === 0 ? firstPoint : lowerData[i - 1];
-                const [x1, y1] = start;
-                const [x2, y2] = point;
-                const dx = (x2 - x1) * 0.3;
-                const controlPoint1 = [x1 + dx, y1];
-                const controlPoint2 = [x2 - dx, y2];
-                return `${data} C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
-            }, '');
-        }
-    }
-    else {
-        shapePath += combinedData.reduce((data, point) => `${data} L ${point?.[0]} ${point?.[1]}`, '');
-        if (upPath) {
-            upPath += upperData.reduce((data, point) => `${data} L ${point[0]} ${point[1]}`, '');
-        }
-        if (downPath) {
-            downPath += lowerData
-                .reverse()
-                .reduce((data, point) => `${data} L ${point[0]} ${point[1]}`, '');
-        }
-    }
-    return { downPath, shapePath, upPath };
-};
+var e=(e,t)=>{if(!t)return e;let n=t<0,r=e*Math.abs(t)/100;return n?e-r:e+r},t=(e,t,n)=>{if(!n)return e;let r=n<0,i=(e===0?t:e)*Math.abs(n)/100;return r?e+i:e-i};exports.getProjection=({curved:n,lowerProjection:r,points:i,svgHeight:a,upperProjection:o})=>{if(i.length===0&&!(o||r))return{shapePath:``};let[s,...c]=i,l=`M ${s[0]} ${s[1]}`,u=l,d=o?l:void 0,f=r?l:void 0,p=[],m=[];c.forEach(([n,i])=>{let s=o?[e(n,o.x),t(i,a,o.y)]:[n,i],c=r?[e(n,-(r.x??0)),t(i,a,-(r.y??0))]:[n,i];p.push(s),m.push(c)});let h=o&&r?[...p,c.at(-1),...m.reverse(),s]:[...p,...m.reverse(),s];return n?(u+=h.reduce((e,t,n)=>{let[r,i]=n===0?s:h[n-1],[a,o]=t,c=(a-r)*.3,l=[r+c,i],u=[a-c,o];return`${e} C ${l[0]} ${l[1]}, ${u[0]} ${u[1]}, ${a} ${o}`},``),d&&(d+=p.reduce((e,t,n)=>{let[r,i]=n===0?s:p[n-1],[a,o]=t,c=(a-r)*.3,l=[r+c,i],u=[a-c,o];return`${e} C ${l[0]} ${l[1]}, ${u[0]} ${u[1]}, ${a} ${o}`},``)),f&&(f+=m.reverse().reduce((e,t,n)=>{let[r,i]=n===0?s:m[n-1],[a,o]=t,c=(a-r)*.3,l=[r+c,i],u=[a-c,o];return`${e} C ${l[0]} ${l[1]}, ${u[0]} ${u[1]}, ${a} ${o}`},``))):(u+=h.reduce((e,t)=>`${e} L ${t?.[0]} ${t?.[1]}`,``),d&&(d+=p.reduce((e,t)=>`${e} L ${t[0]} ${t[1]}`,``)),f&&(f+=m.reverse().reduce((e,t)=>`${e} L ${t[0]} ${t[1]}`,``))),{downPath:f,shapePath:u,upPath:d}};