@kubit-ui-web/react-charts 0.1.0

package/dist/cjs/charts/lineChart/lineChart.type.d.ts

@@ -0,0 +1,164 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { XAxisProps } from '../../components/axisChart/xAxis/xAxis.types';
+import type { YAxisProps } from '../../components/axisChart/yAxis/yAxis.types';
+import type { LineProps } from '../../components/line/line.types';
+import type { NodePathProps, PathProps, StyleProps } from '../../components/path/path.types';
+import type { TickData } from '../../components/tick/tick.types';
+import type { CanvasConfig } from '../../types/canvas.type';
+import type { ChartError, ChartErrorCollection } from '../../types/errors.type';
+import type { Positions } from '../../types/position.enum';
+import type { ValueFormatter } from '../../types/valueFormatter.type';
+export type ChildrenType = ReactNode | ReactElement<PathProps | XAxisProps | YAxisProps>;
+export interface IDataPoint {
+    [key: string]: any;
+}
+export interface LineChartCoordinates {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}
+export interface LineChartCoordinatesData {
+    coordinates: LineChartCoordinates;
+    tickValues: TickData[];
+}
+export interface LineChartExtraSpacings {
+    extraSpaceBottomY: number;
+    extraSpaceTopY: number;
+    extraSpaceLeftX: number;
+    extraSpaceRightX: number;
+    securityXSpace: number;
+    securityYSpace: number;
+    lineChartXPosition: (typeof Positions)[keyof typeof Positions];
+    lineChartYPosition: (typeof Positions)[keyof typeof Positions];
+    xData: string[];
+    yData: string[];
+    xBreakAxis?: number;
+    yBreakAxis?: number;
+    xAxisText: number;
+    yAxisText: number;
+}
+type OmitLineProps = 'lineChartXPosition' | 'lineChartYPosition' | 'xData' | 'yData' | 'xBreakAxis' | 'yBreakAxis';
+export type LineChartContextType = Omit<LineChartExtraSpacings, OmitLineProps> & {
+    data: IDataPoint[];
+    xKey: string;
+    canvasWidth: string | number;
+    canvasHeight: string | number;
+    canvasExtraSpace: number | undefined;
+    dataTestId?: string;
+    xAxisCoordinates: LineChartCoordinatesData;
+    yAxisCoordinates: LineChartCoordinatesData;
+    crossYAxis: boolean;
+    crossXAxis: boolean;
+    xCursor: number;
+    yCursor: number;
+    error?: ChartError;
+};
+export interface LineChartProps {
+    children: ChildrenType;
+    role?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    width?: string | number;
+    height?: string | number;
+    data: IDataPoint[];
+    xKey: string;
+    canvasConfig?: CanvasConfig;
+    dataTestId?: string;
+    caption?: string;
+    tabIndex?: number;
+    classNames?: string;
+    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onDoubleClick?: (eevent: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onFocus?: (event: React.FocusEvent<SVGElement>) => void;
+    onBlur?: (event: React.FocusEvent<SVGElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<SVGSVGElement>) => void;
+    getPathArea?: (coordinates: LineChartCoordinates) => void;
+    onErrors?: (errors: ChartErrorCollection) => void;
+}
+export interface TickNumeric {
+    max: number;
+    step: number;
+    min?: number;
+    breakAxis?: number;
+}
+export interface TickCustom {
+    values: string[];
+    breakAxis?: string;
+}
+export interface TickValuesAxisProps {
+    custom?: TickCustom;
+    numeric?: TickNumeric;
+}
+type OmitProps = 'x1' | 'x2' | 'y1' | 'y2' | 'tickValues' | 'cursor';
+export interface LineChartXAxisProps extends Omit<XAxisProps, OmitProps | 'ariaLabel'>, React.AriaAttributes {
+    tickValues?: TickValuesAxisProps;
+    valueFormatter?: ValueFormatter;
+    /**
+     * @deprecated Use aria-label instead for better accessibility standards
+     */
+    ariaLabel?: string;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+export interface LineChartYAxisProps extends Omit<YAxisProps, OmitProps | 'ariaLabel'>, React.AriaAttributes {
+    /**
+     * TODO: This prop is defined in the interface but NOT IMPLEMENTED in LineChartYAxis component.
+     * The component currently ignores this prop and uses auto-generated tick values from context.
+     * Implementation needed in lineChartYAxis.tsx to properly handle custom tick values.
+     */
+    tickValues?: TickValuesAxisProps;
+    valueFormatter?: ValueFormatter;
+    /**
+     * @deprecated Use aria-label instead for better accessibility standards
+     */
+    ariaLabel?: string;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+export interface LineChartSeparatorProps {
+    topSeparator?: StyleProps;
+    rightSeparator?: StyleProps;
+    areaSeparator?: StyleProps;
+    dataTestId?: string;
+    xBreakAxis?: string;
+    yBreakAxis?: string;
+}
+export interface LineChartProjectionProps {
+    curved?: boolean;
+    dataKey: string;
+    points: [number, number][];
+    lineProjection: LineChartProjections;
+    svgHeight: number;
+}
+export interface LineChartProjection extends StyleProps {
+    xProjection?: number;
+    yProjection?: number;
+}
+export interface LineChartProjections {
+    shapeColor: string;
+    upper?: LineChartProjection;
+    lower?: LineChartProjection;
+}
+type IndicatorOmitProps = 'onClick' | 'onKeyDown' | 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave';
+export interface LineChartPathProps extends Omit<PathProps, 'ariaLabel'>, React.AriaAttributes {
+    indicatorConfig?: Omit<NodePathProps, IndicatorOmitProps> & {
+        autoClick?: boolean;
+        lineIndicator?: Omit<LineProps, 'x1' | 'x2' | 'y1' | 'y2'>;
+    };
+    lineProjection?: LineChartProjections;
+    closestClick?: boolean;
+    getNodesCoords?: (coords: [number, number][]) => void;
+    getNodeFocusInfo?: (info: {
+        x: string;
+        y: string;
+    }) => void;
+    /**
+     * @deprecated Use aria-label instead for better accessibility standards
+     */
+    ariaLabel?: string;
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+export {};
+//# sourceMappingURL=lineChart.type.d.ts.map

package/dist/cjs/charts/lineChart/lineChart.type.d.ts.map

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/charts/lineChart/lineChartStructure.d.ts

@@ -0,0 +1,33 @@
+import { type FC } from 'react';
+import type { LineChartProps } from './lineChart.type';
+/**
+ * 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 declare const LineChartStructure: FC<LineChartProps>;
+//# sourceMappingURL=lineChartStructure.d.ts.map

package/dist/cjs/charts/lineChart/lineChartStructure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChartStructure.d.ts","sourceRoot":"","sources":["../../../../src/charts/lineChart/lineChartStructure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,EAAE,EAAmD,MAAM,OAAO,CAAC;AAgB3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,cAAc,CA+IjD,CAAC"}

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

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChartStructure = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const svgContainer_1 = require("../../components/svgContainer/svgContainer");
+const buildViewBox_1 = require("../../components/svgContainer/utils/buildViewBox/buildViewBox");
+const canvas_type_1 = require("../../types/canvas.type");
+const errors_type_1 = require("../../types/errors.type");
+const getCanvasDimensions_1 = require("../../utils/getCanvasDimensions/getCanvasDimensions");
+const getChildrenAttr_1 = require("../../utils/getChildrenAttr/getChildrenAttr");
+const getDataFingerprint_1 = require("../../utils/getDataFingerprint/getDataFingerprint");
+const parseStringToNumberPx_1 = require("../../utils/parseStringToNumberPx.ts/parseStringToNumberPx");
+const buildLineContextValue_1 = require("./context/buildLineContextValue");
+const lineChartContext_1 = require("./context/lineChartContext");
+const lineChartXAxis_1 = require("./fragments/lineChartXAxis");
+const lineChartYAxis_1 = require("./fragments/lineChartYAxis");
+const useHover_1 = require("./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.
+ */
+const LineChartStructure = ({ ariaHidden, ariaLabel, canvasConfig = canvas_type_1.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;
+    const [childrenYKeys, setChildrenYKey] = (0, react_1.useState)('');
+    const [parsedCanvas, setParsedCanvas] = (0, react_1.useState)({
+        height: 0,
+        width: 0,
+    });
+    const parsedCanvasExtraSpace = canvasExtraSpace
+        ? (0, parseStringToNumberPx_1.parseStringToNumberPx)(canvasExtraSpace)
+        : undefined;
+    const viewBox = (0, buildViewBox_1.buildViewBox)(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
+    // Set the default axis for the chart
+    const defaultAxis = [
+        (0, jsx_runtime_1.jsx)(lineChartXAxis_1.LineChartXAxis, {}, "default-x-axis"),
+        (0, jsx_runtime_1.jsx)(lineChartYAxis_1.LineChartYAxis, {}, "default-y-axis"),
+    ];
+    const arrayChildren = (react_1.Children.toArray(children) || []);
+    const chidrenWithDefaultAxis = defaultAxis.concat(arrayChildren);
+    const maxValue = Math.max(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace ?? 0);
+    const ajustedX = isNaN(parsedCanvas.width / maxValue) ? 0 : parsedCanvas.width / maxValue;
+    const ajustedY = isNaN(parsedCanvas.height / maxValue) ? 0 : parsedCanvas.height / maxValue;
+    // watch the Y childs keys
+    (0, getChildrenAttr_1.getChildrenAttr)({
+        attrName: 'dataKey',
+        children: chidrenWithDefaultAxis,
+        originalValue: childrenYKeys,
+        updateValue: setChildrenYKey,
+    });
+    // Create a fingerprint of the data to avoid unnecessary contextValue updates
+    const dataFingerprint = (0, getDataFingerprint_1.getDataFingerprint)(data);
+    // Build the context value
+    const contextValue = (0, react_1.useMemo)(() => {
+        return (0, buildLineContextValue_1.buildLineContextValue)({
+            ajustedX,
+            ajustedY,
+            canvasHeight: parsedCanvas.height,
+            canvasWidth: parsedCanvas.width,
+            children: chidrenWithDefaultAxis,
+            data,
+            viewBox,
+            xKey,
+        });
+    }, [parsedCanvas.width, parsedCanvas.height, dataFingerprint, xKey, childrenYKeys]);
+    (0, react_1.useEffect)(() => {
+        if (contextValue.error && onErrors) {
+            onErrors({
+                [errors_type_1.ErrorType.GENERIC]: contextValue.error,
+            });
+        }
+    }, [contextValue.error, onErrors]);
+    const { svgRef, xCursor, yCursor } = (0, useHover_1.useHover)({
+        canvasHeight: parsedCanvas.height,
+        canvasWidth: parsedCanvas.width,
+    });
+    (0, react_1.useEffect)(() => {
+        const svgElement = document.querySelector('[data-kbt-svg]');
+        if (!svgElement) {
+            return;
+        }
+        const { parsedCanvasHeight, parsedCanvasWidth } = (0, getCanvasDimensions_1.getCanvasDimensions)({
+            canvasHeight,
+            canvasWidth,
+            svgElement,
+        });
+        setParsedCanvas({
+            height: parsedCanvasHeight,
+            width: parsedCanvasWidth,
+        });
+    }, [canvasWidth, canvasHeight]);
+    (0, react_1.useEffect)(() => {
+        getPathArea?.({
+            x1: contextValue.extraSpaceLeftX,
+            x2: parsedCanvas.width - contextValue.extraSpaceRightX,
+            y1: contextValue.extraSpaceTopY,
+            y2: parsedCanvas.height - contextValue.extraSpaceBottomY,
+        });
+    }, [parsedCanvas.width, parsedCanvas.height]);
+    return ((0, jsx_runtime_1.jsx)(svgContainer_1.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: (0, jsx_runtime_1.jsx)(lineChartContext_1.LineChartContext.Provider, { value: {
+                ...contextValue,
+                canvasExtraSpace: parsedCanvasExtraSpace,
+                canvasHeight: parsedCanvas.height,
+                canvasWidth: parsedCanvas.width,
+                data,
+                dataTestId,
+                xCursor,
+                xKey,
+                yCursor,
+            }, children: children }) }));
+};
+exports.LineChartStructure = LineChartStructure;

package/dist/cjs/charts/lineChart/utils/accessibilityTemplateProcessor.d.ts

@@ -0,0 +1,14 @@
+export declare const TEMPLATE_KEYS: {
+    readonly DATA_KEY: "{{dataKey}}";
+    readonly INDEX: "{{index}}";
+    readonly X_VALUE: "{{xValue}}";
+    readonly Y_VALUE: "{{yValue}}";
+};
+export interface NodeTemplateData {
+    index: number;
+    dataValue?: string | number | Array<Record<string, unknown>>;
+    dataKey?: string;
+    xKey?: string;
+}
+export declare const processAccessibilityTemplate: (template: string, nodeData: NodeTemplateData, dataValue?: string | number | Array<Record<string, unknown>>) => string | undefined;
+//# sourceMappingURL=accessibilityTemplateProcessor.d.ts.map

package/dist/cjs/charts/lineChart/utils/accessibilityTemplateProcessor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibilityTemplateProcessor.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/accessibilityTemplateProcessor.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAqDD,eAAO,MAAM,4BAA4B,GACvC,UAAU,MAAM,EAChB,UAAU,gBAAgB,EAC1B,YAAY,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAC3D,MAAM,GAAG,SAaX,CAAC"}

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processAccessibilityTemplate = exports.TEMPLATE_KEYS = void 0;
+// Template keys for accessibility labels
+exports.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(exports.TEMPLATE_KEYS.DATA_KEY, 'g'), nodeData.dataKey);
+    }
+    // Always replace xValue and yValue placeholders, even with empty strings
+    result = result.replace(new RegExp(exports.TEMPLATE_KEYS.X_VALUE, 'g'), xValue);
+    result = result.replace(new RegExp(exports.TEMPLATE_KEYS.Y_VALUE, 'g'), yValue);
+    if (nodeData.index !== undefined) {
+        result = result.replace(new RegExp(exports.TEMPLATE_KEYS.INDEX, 'g'), (nodeData.index + 1).toString());
+    }
+    return result;
+};
+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);
+};
+exports.processAccessibilityTemplate = processAccessibilityTemplate;

package/dist/cjs/charts/lineChart/utils/findSurroundingNumber.d.ts

@@ -0,0 +1,8 @@
+interface FSReturnValue {
+    idx: number;
+    match: boolean;
+}
+export declare const findSurroundingNumber: (points: number[], xPosition: number) => FSReturnValue;
+export declare const findClosestNumber: (points: number[], xPosition: number) => number;
+export {};
+//# sourceMappingURL=findSurroundingNumber.d.ts.map

package/dist/cjs/charts/lineChart/utils/findSurroundingNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findSurroundingNumber.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/findSurroundingNumber.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,EAAE,EAAE,WAAW,MAAM,KAAG,aAc3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,EAAE,EAAE,WAAW,MAAM,KAAG,MAavE,CAAC"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findClosestNumber = exports.findSurroundingNumber = void 0;
+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 };
+};
+exports.findSurroundingNumber = findSurroundingNumber;
+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 = findClosestNumber;

package/dist/cjs/charts/lineChart/utils/getDataValues.d.ts

@@ -0,0 +1,8 @@
+import type { TickValuesAxisProps } from '../lineChart.type';
+/**
+ * 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 declare const getDataValues: (data: TickValuesAxisProps) => string[] | undefined;
+//# sourceMappingURL=getDataValues.d.ts.map

package/dist/cjs/charts/lineChart/utils/getDataValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDataValues.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getDataValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,mBAAmB,KAAG,MAAM,EAAE,GAAG,SAoBpE,CAAC"}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDataValues = void 0;
+/**
+ * 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.
+ */
+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 = getDataValues;

package/dist/cjs/charts/lineChart/utils/getExtraSpacing.d.ts

@@ -0,0 +1,19 @@
+import type { ChildrenType, IDataPoint, LineChartExtraSpacings } from '../lineChart.type';
+interface GetExtraSpacing {
+    children: ChildrenType;
+    data: IDataPoint[];
+    xKey: string;
+    ajustedX: number;
+    ajustedY: number;
+    viewBox: string;
+    canvasHeight: number;
+    canvasWidth: number;
+}
+/**
+ * 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 declare const getExtraSpacing: ({ ajustedX, ajustedY, canvasHeight, canvasWidth, children, data, viewBox, xKey, }: GetExtraSpacing) => LineChartExtraSpacings;
+export {};
+//# sourceMappingURL=getExtraSpacing.d.ts.map

package/dist/cjs/charts/lineChart/utils/getExtraSpacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getExtraSpacing.d.ts","sourceRoot":"","sources":["../../../../../src/charts/lineChart/utils/getExtraSpacing.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAkH1F,UAAU,eAAe;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,mFAS7B,eAAe,KAAG,sBAmCpB,CAAC"}