@oliasoft-open-source/charts-library 5.0.0-beta-2 → 5.0.0-beta-3

package/dist/src/components/line-chart/utils/get-line-chart-tooltips.d.ts

@@ -0,0 +1,20 @@
+import { TooltipItem } from 'chart.js';
+import { ChartHoverMode } from '../../common/helpers/enums';
+import { ILineChartOptions } from '../line-chart.interface';
+export declare const getUnitsFromLabel: (label: string) => string;
+declare const getLineChartToolTips: (options: ILineChartOptions) => {
+    enabled: boolean;
+    mode: ChartHoverMode;
+    intersect: boolean;
+    padding: number;
+    usePointStyle: boolean;
+    boxWidth: number;
+    boxHeight: number;
+    boxPadding: number;
+    callbacks: {
+        title: (tooltipItem: TooltipItem<any>[]) => string;
+        label: (tooltipItem: TooltipItem<any>) => string;
+        afterLabel: (tooltipItem: Record<string, any>) => string;
+    };
+};
+export default getLineChartToolTips;

package/dist/src/components/line-chart/utils/line-chart-utils.d.ts

@@ -0,0 +1,32 @@
+import { ILineRange } from '../line-chart.interface';
+import { TPrimitive } from '../../common/common.interface';
+export declare const toNum: (value: string | number) => any;
+export declare const isLessThanMax: (value: string | number, max: string | number) => boolean;
+export declare const isGreaterThanMin: (value: string | number, min: string | number) => boolean;
+/**
+ *
+ * @param {'x'|'y'} axisType
+ * @param {number} [index] - axis index; optional, 0 by default
+ * @param {boolean} [hasMultiAxes] - optional, false by default
+ * @return {string} - e.g. x if chart has singular axes; x, x2 - in case of multiple axes
+ */
+export declare const generateAxisId: (axisType: string, index?: number, hasMultiAxes?: boolean) => string;
+/**
+ Get axis type from a key string.
+ @param {string} string - The key string to extract from.
+ @returns {string} e.g. x1 => x
+ */
+export declare const getAxisTypeFromKey: (string: string) => string;
+/**
+ * Generates a key based on an array of values. The key changes
+ * if any of the values in the array change.
+ */
+export declare const generateKey: (values: Array<any>) => string;
+/**
+ * Checks if a value is a primitive value (which includes strings, numbers, booleans, and null).
+ */
+export declare const isPrimitiveValue: (value: TPrimitive) => value is string | number | boolean | null;
+/**
+ * Validates a range object to ensure none of its properties are null, undefined, or empty strings.
+ */
+export declare const isRangeValid: (r?: ILineRange) => boolean;

package/dist/src/components/line-chart/utils/translations/get-translations.d.ts

@@ -0,0 +1,8 @@
+import { defaultTranslations } from '../../constants/default-translations';
+/**
+ * Merges custom getTranslations with the default getTranslations.
+ * If a custom translation is provided for a key, it will override the default one.
+ * @param {object} translations - Custom getTranslations.
+ * @returns {object} - The resulting getTranslations object, containing both default and custom getTranslations.
+ */
+export declare const getTranslations: (translations?: Partial<Record<keyof typeof defaultTranslations, string>>) => {};

package/dist/src/components/pie-chart/pie-chart-defalut-props.interface.d.ts

@@ -0,0 +1,50 @@
+import { ChartEvent } from 'chart.js';
+import { ICommonTooltip } from '../common/common.interface';
+import { IPieChartDataset, IPieOptions } from './pie-chart.interface';
+import { AlignOptions, Position } from '../common/helpers/enums';
+export interface IDefaultChartStyling {
+    width?: number | string;
+    height?: number | string;
+    maintainAspectRatio: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+}
+interface IDefaultPieGraph {
+    showDataLabels: boolean;
+    stacked: boolean;
+    cutout: number | string;
+}
+interface IDefaultPieLegend {
+    display: boolean;
+    useDataset: boolean;
+    position: Position;
+    align: AlignOptions;
+}
+interface IDefaultChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+interface IDefaultInteractions {
+    onLegendClick?: (text: string, hidden: boolean) => void;
+    onHover?: (event?: ChartEvent, datasetIndex?: number, index?: number, generatedDataset?: IPieChartDataset[]) => void;
+    onUnhover?: (event?: ChartEvent, datasetIndex?: number, index?: number, generatedDataset?: IPieChartDataset[]) => void;
+}
+interface IDefaultChartData {
+    labels: string[];
+    datasets: IPieChartDataset[];
+}
+interface IDefaultPieOptions extends IPieOptions {
+    title: string | string[];
+    chartStyling: IDefaultChartStyling;
+    tooltip: ICommonTooltip;
+    graph: IDefaultPieGraph;
+    legend: IDefaultPieLegend;
+    chartOptions: IDefaultChartOptions;
+    interactions: IDefaultInteractions;
+}
+export interface IPieChartDefaultProps {
+    testId: string | null;
+    data: IDefaultChartData;
+    options: IDefaultPieOptions;
+}
+export {};

package/dist/src/components/pie-chart/pie-chart-get-default-props.d.ts

@@ -0,0 +1,3 @@
+import { IPieChartProps } from './pie-chart.interface';
+import { IPieChartDefaultProps } from './pie-chart-defalut-props.interface';
+export declare const getDefaultProps: (props: IPieChartProps) => IPieChartDefaultProps;

package/dist/src/components/pie-chart/pie-chart.d.ts

@@ -0,0 +1,3 @@
+import { IPieChartProps } from './pie-chart.interface';
+declare const PieChartWithLegend: (props: IPieChartProps) => import("react/jsx-runtime").JSX.Element;
+export { PieChartWithLegend as PieChart };

package/dist/src/components/pie-chart/pie-chart.interface.d.ts

@@ -0,0 +1,70 @@
+import { ICommonData, ICommonDataset, ICommonDataValue, ICommonLegend, ICommonOptions } from '../common/common.interface';
+export interface IPieLegend extends ICommonLegend {
+    useDataset?: boolean;
+}
+export interface IPieGraph {
+    showDataLabels?: boolean;
+    stacked?: boolean;
+    cutout?: number | string;
+}
+export interface IPieOptions extends ICommonOptions {
+    graph?: IPieGraph;
+    legend?: IPieLegend;
+}
+export interface IPieDataValue extends ICommonDataValue {
+    label: string;
+    borderWidth: string | number;
+    value: number;
+    backgroundColor?: string | string[];
+    borderColor?: string;
+    labels: string[];
+}
+export interface IPieChartDataset extends ICommonDataset {
+    data: IPieDataValue[];
+    hideLegend?: boolean;
+}
+export interface IPieData {
+    labels?: string[];
+    datasets?: IPieChartDataset[];
+    xUnit?: string;
+    yUnit?: string;
+}
+export interface IPieChartData extends ICommonData {
+    data: IPieData;
+    options: IPieOptions;
+}
+export interface IPieChartProps {
+    chart: IPieChartData;
+    testId?: string | null;
+}
+export interface IPieGeneratedLabel {
+    text: string;
+    fillStyle: string;
+    strokeStyle: string;
+    index: number;
+}
+export interface IPieLegendItemFilter {
+    index: number;
+    datasetIndex: number;
+    hidden: boolean;
+}
+export interface IPiesDataLabelsOptions {
+    display?: 'auto' | boolean;
+    align?: 'center';
+    anchor?: 'center';
+    formatter?: (_value: any, context: any) => any;
+}
+export interface IGeneratedPieChartDataset {
+    label: string;
+    backgroundColor: string[];
+    borderColor: string;
+    borderWidth: number;
+    borderDash: number[];
+    annotationType?: string;
+    data: IPieDataValue[];
+    hideLegend?: boolean;
+    displayGroup?: string | number;
+    isAnnotation?: boolean;
+    annotationIndex?: number;
+}
+export type TGeneratedPieChartDatasets = IGeneratedPieChartDataset[];

package/dist/src/components/pie-chart/use-pie-chart-config.d.ts

@@ -0,0 +1,41 @@
+import { ActiveElement, Chart, Chart as ChartJS, ChartEvent, LegendItem, Plugin, TooltipItem } from 'chart.js';
+import { IPieDataValue, IPiesDataLabelsOptions } from './pie-chart.interface';
+import { IPieChartDefaultProps } from './pie-chart-defalut-props.interface';
+import { UnusedParameter } from '../common/common.interface';
+interface ILegendPlugin extends Plugin {
+    chart?: Chart;
+}
+export declare const usePieChartConfig: (chart: IPieChartDefaultProps) => {
+    generatedDatasets: {
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string | string[];
+        data: IPieDataValue[];
+        hideLegend?: boolean;
+        label?: string;
+    }[];
+    getTitle: () => {
+        display: boolean;
+        text: string | string[];
+    } | {
+        display?: undefined;
+        text?: undefined;
+    };
+    legendClick: (_: UnusedParameter, legendItem?: LegendItem, legend?: ILegendPlugin) => void;
+    onClick: (_evt: ChartEvent, _elements: ActiveElement[], chartInstance: ChartJS) => void;
+    onHover: (evt: ChartEvent, hoveredItems: ActiveElement[]) => void;
+    getDatalabels: () => IPiesDataLabelsOptions;
+    getLegend: () => object;
+    getToolTips: () => {
+        callbacks: {
+            title: (tooltipItem: TooltipItem<any>[]) => string;
+            label: (tooltipItem: TooltipItem<any>) => string;
+        };
+        padding: number;
+        boxWidth: number;
+        boxHeight: number;
+        boxPadding: number;
+        usePointStyle: boolean;
+    };
+};
+export {};

package/dist/src/components/scatter-chart/hooks/use-scatter-chart-config.d.ts

@@ -0,0 +1,113 @@
+import { ActiveElement, AnimationSpec, Chart, ChartEvent } from 'chart.js';
+import { IScatterChartDefaultProps } from '../scatter-chart-default-props.interface';
+import { MutableRefObject } from 'react';
+import { ICommonHoveredItems } from '../../common/common.interface';
+import { TGeneratedScatterChartDatasets } from '../scatter-chart.interface';
+export declare const useScatterChartConfig: (chart: IScatterChartDefaultProps, chartRef: MutableRefObject<Chart | null>) => {
+    generatedDatasets: TGeneratedScatterChartDatasets;
+    scatterOptions: {
+        interactions: {
+            onLegendClick: (_: import('../../common/common.interface').UnusedParameter, legendItem: import('chart.js').LegendItem) => void;
+            onHover: (evt: ChartEvent, hoveredItems: ICommonHoveredItems[]) => void;
+        };
+        scales: {
+            x: {
+                type: "linear";
+                position: any;
+                beginAtZero: boolean;
+                reverse: boolean;
+                suggestedMax: number | undefined;
+                suggestedMin: number | undefined;
+                min: number | undefined;
+                max: number | undefined;
+                title: {
+                    display: boolean;
+                    text: string | undefined;
+                    padding: number;
+                };
+                ticks: {
+                    includeBounds: boolean;
+                    font: {
+                        size: number;
+                    };
+                    stepSize: number | undefined;
+                };
+                grid: {};
+            };
+            y: {
+                type: "linear";
+                position: any;
+                beginAtZero: boolean;
+                reverse: boolean;
+                suggestedMax: number | undefined;
+                suggestedMin: number | undefined;
+                min: number | undefined;
+                max: number | undefined;
+                title: {
+                    display: boolean;
+                    text: string | undefined;
+                    padding: number;
+                };
+                ticks: {
+                    includeBounds: boolean;
+                    font: {
+                        size: number;
+                    };
+                    stepSize: number | undefined;
+                };
+                grid: {};
+            };
+        };
+        animation: Partial<AnimationSpec<"scatter">>;
+        plugins: {
+            legend: {
+                display: boolean;
+                events: never[];
+                position: any;
+                align: "center" | "start" | "end";
+                labels: {
+                    boxHeight: number;
+                    boxWidth: number | undefined;
+                    usePointStyle: boolean | undefined;
+                };
+                onClick: (_: import('../../common/common.interface').UnusedParameter, legendItem: import('chart.js').LegendItem) => void;
+            };
+            customLegendPlugin: {
+                htmlLegend: any;
+            };
+            title: {
+                display: boolean;
+                text: string | string[] | undefined;
+            } | {
+                display?: undefined;
+                text?: undefined;
+            };
+            annotation: {
+                annotations: {};
+            };
+            chartAreaBorder: {
+                borderColor: string;
+            };
+            datalabels: {
+                display: boolean;
+            };
+            tooltip: {
+                enabled: boolean;
+                callbacks: {
+                    title: (tooltipItems: import('chart.js').TooltipItem<"scatter">[]) => string | undefined;
+                    label: (tooltipItems: import('../utils/get-tooltip-config').IScatterTooltipItem) => string;
+                };
+                backgroundColor: string;
+                displayColors: boolean;
+                padding: number;
+            };
+        };
+        width?: number | string;
+        height?: number | string;
+        maintainAspectRatio: boolean;
+        staticChartHeight: boolean;
+        performanceMode: boolean;
+        onClick: (_evt: ChartEvent, _elements: ActiveElement[], chartInstance: Chart) => void;
+        onHover: (evt: ChartEvent, hoveredItems: ICommonHoveredItems[]) => void;
+    };
+};

package/dist/src/components/scatter-chart/scatter-chart-default-props.interface.d.ts

@@ -0,0 +1,71 @@
+import { ChartEvent } from 'chart.js';
+import { ICommonAdditionalAxesOptions, ICommonAnnotations, ICommonCustomLegend, ICommonLegend } from '../common/common.interface';
+import { ChartDirection } from '../common/enums';
+import { IScatterAxes, IScatterChartDataset } from './scatter-chart.interface';
+export interface IDefaultChartStyling {
+    width?: number | string;
+    height?: number | string;
+    maintainAspectRatio: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+}
+interface IDefaultTooltip {
+    enabled: boolean;
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+    backgroundColor: string;
+    displayColors: boolean;
+    scientificNotation: boolean;
+}
+interface IDefaultScatterGraph {
+    showMinorGridlines: boolean;
+    showDataLabels: boolean;
+}
+export interface IDefaultScatterLegend extends ICommonLegend {
+    customLegend?: ICommonCustomLegend<any>;
+}
+interface IDefaultChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+export interface IDefaultInteractions {
+    onLegendClick?: (text: string, hidden: boolean) => void;
+    onHover?: (event?: ChartEvent, datasetIndex?: number, index?: number, generatedDataset?: IScatterChartDataset[]) => void;
+    onUnhover?: (event?: ChartEvent, datasetIndex?: number, index?: number, generatedDataset?: any[]) => void;
+    onAnimationComplete?: () => void;
+}
+interface IDefaultChartData {
+    labels: string[];
+    datasets: IScatterChartDataset[];
+}
+export interface IDefaultScatterOptions {
+    title: string | string[];
+    chartStyling: IDefaultChartStyling;
+    tooltip: IDefaultTooltip;
+    graph: IDefaultScatterGraph;
+    axes: IScatterAxes;
+    additionalAxesOptions: ICommonAdditionalAxesOptions;
+    legend: IDefaultScatterLegend;
+    chartOptions: IDefaultChartOptions;
+    interactions: IDefaultInteractions;
+    annotations?: ICommonAnnotations;
+    direction: ChartDirection;
+}
+export interface IScatterChartDefaultProps {
+    testId: string | null;
+    data: IDefaultChartData;
+    options: {
+        title: string | string[];
+        chartStyling: IDefaultChartStyling;
+        tooltip: IDefaultTooltip;
+        graph: IDefaultScatterGraph;
+        axes: IScatterAxes;
+        additionalAxesOptions: ICommonAdditionalAxesOptions;
+        legend: IDefaultScatterLegend;
+        chartOptions: IDefaultChartOptions;
+        interactions: IDefaultInteractions;
+        annotations?: ICommonAnnotations;
+        direction: ChartDirection;
+    };
+}
+export {};

package/dist/src/components/scatter-chart/scatter-chart-get-default-props.d.ts

@@ -0,0 +1,3 @@
+import { IScatterChartDefaultProps } from './scatter-chart-default-props.interface';
+import { IScatterChartProps } from './scatter-chart.interface';
+export declare const getDefaultProps: (props: IScatterChartProps) => IScatterChartDefaultProps;

package/dist/src/components/scatter-chart/scatter-chart.d.ts

@@ -0,0 +1,3 @@
+import { IScatterChartProps } from './scatter-chart.interface';
+declare const ScatterChartWithLegend: (props: IScatterChartProps) => import("react/jsx-runtime").JSX.Element;
+export { ScatterChartWithLegend as ScatterChart };

package/dist/src/components/scatter-chart/scatter-chart.interface.d.ts

@@ -0,0 +1,81 @@
+import { ChartDirection } from '../common/enums.ts';
+import { ICommonAdditionalAxesOptions, ICommonAxis, ICommonData, ICommonDataset, ICommonDataValue, ICommonLegend, ICommonOptions } from '../common/common.interface';
+export interface IScatterLegend extends ICommonLegend {
+    useDataset?: boolean;
+}
+export interface IScatterGraph {
+    showMinorGridlines?: boolean;
+    showDataLabels?: boolean;
+}
+export interface IScatterTooltip {
+    enabled?: boolean;
+    tooltips?: boolean;
+    showLabelsInTooltips: boolean;
+    backgroundColor?: string;
+    displayColors?: boolean;
+    scientificNotation?: boolean;
+}
+export interface IScatterAxes {
+    x: ICommonAxis<'top' | 'bottom'>[];
+    y: ICommonAxis<'left' | 'right'>[];
+    [key: string]: ICommonAxis[];
+}
+export interface IScatterOptions extends ICommonOptions {
+    graph?: IScatterGraph;
+    legend?: IScatterLegend;
+    axes?: IScatterAxes;
+    additionalAxesOptions?: ICommonAdditionalAxesOptions;
+    direction: ChartDirection;
+}
+export interface IScatterDataValue extends ICommonDataValue {
+    label?: string;
+}
+export interface IScatterChartDataset extends ICommonDataset {
+    data: IScatterDataValue[];
+    hideLegend?: boolean;
+}
+export interface IScatterData {
+    labels?: string[];
+    datasets?: IScatterChartDataset[];
+    xUnit?: string;
+    yUnit?: string;
+}
+export interface IScatterChartData extends ICommonData {
+    data: IScatterData;
+    options: IScatterOptions;
+}
+export interface IScatterChartProps {
+    chart: IScatterChartData;
+    testId?: string | null;
+}
+export interface IScatterGeneratedLabel {
+    text: string;
+    fillStyle: string;
+    strokeStyle: string;
+    index: number;
+}
+export interface IScatterLegendItemFilter {
+    index: number;
+    datasetIndex: number;
+    hidden: boolean;
+}
+export interface IScatterDataLabelsOptions {
+    display?: 'auto' | boolean;
+    align?: 'center';
+    anchor?: 'center';
+    formatter?: (_value: any, context: any) => any;
+}
+export interface IGeneratedScatterChartDataset {
+    label: string;
+    backgroundColor: string[];
+    borderColor: string;
+    borderWidth: number;
+    borderDash: number[];
+    annotationType?: string;
+    data: IScatterDataValue[];
+    hideLegend?: boolean;
+    displayGroup?: string | number;
+    isAnnotation?: boolean;
+    annotationIndex?: number;
+}
+export type TGeneratedScatterChartDatasets = IGeneratedScatterChartDataset[];

package/dist/src/components/scatter-chart/utils/get-scales-config.d.ts

@@ -0,0 +1,49 @@
+import { IDefaultScatterOptions } from '../scatter-chart-default-props.interface';
+export declare const getScatterChartScales: (options: IDefaultScatterOptions) => {
+    x: {
+        type: "linear";
+        position: any;
+        beginAtZero: boolean;
+        reverse: boolean;
+        suggestedMax: number | undefined;
+        suggestedMin: number | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        title: {
+            display: boolean;
+            text: string | undefined;
+            padding: number;
+        };
+        ticks: {
+            includeBounds: boolean;
+            font: {
+                size: number;
+            };
+            stepSize: number | undefined;
+        };
+        grid: {};
+    };
+    y: {
+        type: "linear";
+        position: any;
+        beginAtZero: boolean;
+        reverse: boolean;
+        suggestedMax: number | undefined;
+        suggestedMin: number | undefined;
+        min: number | undefined;
+        max: number | undefined;
+        title: {
+            display: boolean;
+            text: string | undefined;
+            padding: number;
+        };
+        ticks: {
+            includeBounds: boolean;
+            font: {
+                size: number;
+            };
+            stepSize: number | undefined;
+        };
+        grid: {};
+    };
+};

package/dist/src/components/scatter-chart/utils/get-tooltip-config.d.ts

@@ -0,0 +1,21 @@
+import { TooltipItem } from 'chart.js';
+import { IDefaultScatterOptions } from '../scatter-chart-default-props.interface';
+interface IRawData {
+    x: number;
+    y: number;
+    label?: string;
+}
+export interface IScatterTooltipItem extends TooltipItem<'scatter'> {
+    raw: IRawData;
+}
+export declare const getTooltipsConfig: (options: IDefaultScatterOptions) => {
+    enabled: boolean;
+    callbacks: {
+        title: (tooltipItems: TooltipItem<"scatter">[]) => string | undefined;
+        label: (tooltipItems: IScatterTooltipItem) => string;
+    };
+    backgroundColor: string;
+    displayColors: boolean;
+    padding: number;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "5.0.0-beta-2",
+  "version": "5.0.0-beta-3",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "resolutions": {
@@ -23,7 +23,7 @@
     "dist/**/*"
   ],
   "scripts": {
-    "build:package": "vite build --config vite.config.ts",
+    "build:package": "tsc && vite build --config vite.config.ts",
     "build": "yarn build:package && storybook build --quiet --output-dir ./public",
     "dev:storybook": "storybook dev -p 6006",
     "lint:check": "eslint .",
@@ -70,6 +70,7 @@
     "@storybook/react-vite": "^8.6.7",
     "@storybook/testing-library": "^0.2.2",
     "@types/lodash": "^4.17.16",
+    "@types/node": "^22.13.10",
     "@types/react": "^18.2.24",
     "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-react-swc": "^3.8.0",