@oliasoft-open-source/charts-library 3.8.0-beta-3 → 3.8.1-beta-1

package/dist/src/components/line-chart/hooks/use-chart-options.d.ts

@@ -0,0 +1,302 @@
+import { Dispatch, RefObject } from 'react';
+import { Chart } from 'chart.js';
+import { IState } from '../state/state.interfaces';
+import { ILineChartDataset, ILineChartOptions } from '../line-chart.interface';
+import { ChartHoverMode, Events, PanZoomMode, PointStyle } from '../../common/helpers/enums';
+interface IUseChartOptions {
+    chartRef: RefObject<Chart>;
+    state: IState;
+    options: ILineChartOptions;
+    dispatch: Dispatch<any>;
+    generatedDatasets: ILineChartDataset[];
+}
+/**
+ * Custom hook to generate chart options.
+ */
+export declare const useChartOptions: ({ chartRef, state, options, dispatch, generatedDatasets, }: IUseChartOptions) => {
+    layout: {
+        padding: string | number | {
+            top: number;
+            bottom: number;
+            left: number;
+            right: number;
+        } | undefined;
+    };
+    onHover: (evt: import("chart.js").ChartEvent, hoveredItems: import("../../common/common.interface").ICommonHoveredItems[]) => void;
+    maintainAspectRatio: boolean | undefined;
+    aspectRatio: number;
+    animation: boolean | {
+        duration: number;
+        onComplete: (() => void) | undefined;
+    };
+    hover: {
+        mode: ChartHoverMode;
+        intersect: boolean;
+    };
+    elements: {
+        line: {
+            pointStyle: PointStyle;
+            showLine: boolean;
+        };
+    };
+    scales: any;
+    plugins: {
+        datalabels: {
+            display: string;
+            align: (context: any) => import("../../common/helpers/enums").AlignOptions.End | import("../../common/helpers/enums").AlignOptions.Start | import("../../common/helpers/enums").AlignOptions.Right | import("../../common/helpers/enums").AlignOptions.Left;
+            formatter: (_value: any, context: import("chart.js").TooltipItem<any>) => any;
+        } | {
+            display: boolean;
+            align?: undefined;
+            formatter?: undefined;
+        };
+        annotation: {
+            annotations: {
+                annotationAxis?: string | undefined;
+                color?: string | undefined;
+                type?: string | undefined;
+                adjustScaleRange?: boolean | undefined;
+                label?: string | undefined;
+                value?: number | undefined;
+            };
+        };
+        zoom: {
+            pan: {
+                enabled: boolean;
+                mode: PanZoomMode;
+                onPanComplete(): void;
+            };
+            zoom: {
+                mode: PanZoomMode;
+                drag: {
+                    enabled: boolean;
+                    threshold: number;
+                    backgroundColor: string;
+                    borderColor: string;
+                    borderWidth: number;
+                };
+                onZoomComplete(): void;
+            };
+        };
+        tooltip: {
+            enabled: boolean;
+            mode: ChartHoverMode;
+            intersect: boolean;
+            padding: number;
+            usePointStyle: boolean;
+            boxWidth: number;
+            boxHeight: number;
+            boxPadding: number;
+            callbacks: {
+                title: (tooltipItem: any, _data: any) => string;
+                label: (tooltipItem: any) => string;
+                afterLabel: (tooltipItem: Record<string, any>) => string;
+            };
+        };
+        legend: {
+            display: boolean;
+            position: import("../../common/helpers/enums").Position;
+            align: string | undefined;
+            labels: {
+                boxHeight: number;
+                boxWidth: number | undefined;
+                usePointStyle: boolean | undefined;
+            };
+            onClick: (_e: any, legendItem: any) => void;
+        };
+        customLegendPlugin: {
+            htmlLegend: {
+                containerID: string;
+            } | null | undefined;
+        };
+        chartAreaBorder: {
+            borderColor: string;
+        };
+        chartAreaText: {
+            showLabel: boolean | undefined;
+            text: string | string[] | undefined;
+            position: string | undefined;
+            fontSize: number | undefined;
+            xOffset: number | undefined;
+            yOffset: number | undefined;
+            maxWidth: number | undefined;
+            lineHeight: number | undefined;
+        };
+    } | {
+        dragData: {
+            dragX: boolean | undefined;
+            dragY: boolean | undefined;
+            round: boolean | undefined;
+            showTooltip: boolean | undefined;
+            onDragStart: () => void;
+            onDrag: () => void;
+            onDragEnd: () => void;
+        };
+        datalabels: {
+            display: string;
+            align: (context: any) => import("../../common/helpers/enums").AlignOptions.End | import("../../common/helpers/enums").AlignOptions.Start | import("../../common/helpers/enums").AlignOptions.Right | import("../../common/helpers/enums").AlignOptions.Left;
+            formatter: (_value: any, context: import("chart.js").TooltipItem<any>) => any;
+        } | {
+            display: boolean;
+            align?: undefined;
+            formatter?: undefined;
+        };
+        annotation: {
+            annotations: {
+                annotationAxis?: string | undefined;
+                color?: string | undefined;
+                type?: string | undefined;
+                adjustScaleRange?: boolean | undefined;
+                label?: string | undefined;
+                value?: number | undefined;
+            };
+        };
+        zoom: {
+            pan: {
+                enabled: boolean;
+                mode: PanZoomMode;
+                onPanComplete(): void;
+            };
+            zoom: {
+                mode: PanZoomMode;
+                drag: {
+                    enabled: boolean;
+                    threshold: number;
+                    backgroundColor: string;
+                    borderColor: string;
+                    borderWidth: number;
+                };
+                onZoomComplete(): void;
+            };
+        };
+        tooltip: {
+            enabled: boolean;
+            mode: ChartHoverMode;
+            intersect: boolean;
+            padding: number;
+            usePointStyle: boolean;
+            boxWidth: number;
+            boxHeight: number;
+            boxPadding: number;
+            callbacks: {
+                title: (tooltipItem: any, _data: any) => string;
+                label: (tooltipItem: any) => string;
+                afterLabel: (tooltipItem: Record<string, any>) => string;
+            };
+        };
+        legend: {
+            display: boolean;
+            position: import("../../common/helpers/enums").Position;
+            align: string | undefined;
+            labels: {
+                boxHeight: number;
+                boxWidth: number | undefined;
+                usePointStyle: boolean | undefined;
+            };
+            onClick: (_e: any, legendItem: any) => void;
+        };
+        customLegendPlugin: {
+            htmlLegend: {
+                containerID: string;
+            } | null | undefined;
+        };
+        chartAreaBorder: {
+            borderColor: string;
+        };
+        chartAreaText: {
+            showLabel: boolean | undefined;
+            text: string | string[] | undefined;
+            position: string | undefined;
+            fontSize: number | undefined;
+            xOffset: number | undefined;
+            yOffset: number | undefined;
+            maxWidth: number | undefined;
+            lineHeight: number | undefined;
+        };
+    } | {
+        dragData?: undefined;
+        datalabels: {
+            display: string;
+            align: (context: any) => import("../../common/helpers/enums").AlignOptions.End | import("../../common/helpers/enums").AlignOptions.Start | import("../../common/helpers/enums").AlignOptions.Right | import("../../common/helpers/enums").AlignOptions.Left;
+            formatter: (_value: any, context: import("chart.js").TooltipItem<any>) => any;
+        } | {
+            display: boolean;
+            align?: undefined;
+            formatter?: undefined;
+        };
+        annotation: {
+            annotations: {
+                annotationAxis?: string | undefined;
+                color?: string | undefined;
+                type?: string | undefined;
+                adjustScaleRange?: boolean | undefined;
+                label?: string | undefined;
+                value?: number | undefined;
+            };
+        };
+        zoom: {
+            pan: {
+                enabled: boolean;
+                mode: PanZoomMode;
+                onPanComplete(): void;
+            };
+            zoom: {
+                mode: PanZoomMode;
+                drag: {
+                    enabled: boolean;
+                    threshold: number;
+                    backgroundColor: string;
+                    borderColor: string;
+                    borderWidth: number;
+                };
+                onZoomComplete(): void;
+            };
+        };
+        tooltip: {
+            enabled: boolean;
+            mode: ChartHoverMode;
+            intersect: boolean;
+            padding: number;
+            usePointStyle: boolean;
+            boxWidth: number;
+            boxHeight: number;
+            boxPadding: number;
+            callbacks: {
+                title: (tooltipItem: any, _data: any) => string;
+                label: (tooltipItem: any) => string;
+                afterLabel: (tooltipItem: Record<string, any>) => string;
+            };
+        };
+        legend: {
+            display: boolean;
+            position: import("../../common/helpers/enums").Position;
+            align: string | undefined;
+            labels: {
+                boxHeight: number;
+                boxWidth: number | undefined;
+                usePointStyle: boolean | undefined;
+            };
+            onClick: (_e: any, legendItem: any) => void;
+        };
+        customLegendPlugin: {
+            htmlLegend: {
+                containerID: string;
+            } | null | undefined;
+        };
+        chartAreaBorder: {
+            borderColor: string;
+        };
+        chartAreaText: {
+            showLabel: boolean | undefined;
+            text: string | string[] | undefined;
+            position: string | undefined;
+            fontSize: number | undefined;
+            xOffset: number | undefined;
+            yOffset: number | undefined;
+            maxWidth: number | undefined;
+            lineHeight: number | undefined;
+        };
+    };
+    events: Events[];
+};
+export {};

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

@@ -1,4 +1,4 @@
-import { ICommonAnnotations, ICommonChartOptions, ICommonCustomLegend, ICommonData, ICommonDataset, ICommonDragData, ICommonInteractions, ICommonLegend, ICommonOptions, ICommonScales, ICommonStyling, ICommonTooltip } from '../common/common.interface';
+import { ICommonAnnotations, ICommonChartOptions, ICommonCustomLegend, ICommonData, ICommonDataset, ICommonDataValue, ICommonDragData, ICommonInteractions, ICommonLegend, ICommonOptions, ICommonScales, ICommonStyling, ICommonTooltip } from '../common/common.interface';
 export interface ILChartOptions extends ICommonChartOptions {
     showPoints: boolean;
     closeOnOutsideClick: boolean;
@@ -67,16 +67,6 @@ export interface ILineLegend extends ICommonLegend {
     customLegend?: ICommonCustomLegend<any>;
     usePointStyle?: boolean;
 }
-interface IPointEllipsisAnnotation {
-    radiusX?: number;
-    radiusY?: number;
-    color?: string;
-    rotation?: number;
-    lineWidth?: number;
-}
-export interface ILineAnnotation extends ICommonAnnotations {
-    pointEllipsisAnnotation?: IPointEllipsisAnnotation;
-}
 export interface ILineChartOptions extends ICommonOptions {
     title?: string | string[];
     axes: ILineChartAxes;
@@ -85,13 +75,22 @@ export interface ILineChartOptions extends ICommonOptions {
     chartStyling: ILineChartStyling;
     tooltip: ILineChartTooltip;
     graph: ILineChartGraph;
-    annotations: ILineAnnotation;
+    annotations: ICommonAnnotations;
     legend: ILineLegend;
     chartOptions: ILChartOptions;
     interactions: ILineInteractions;
     dragData?: ICommonDragData;
     depthType?: IDepthType | object;
 }
+export interface IEllipseAnnotation {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    borderColor?: string;
+    backgroundColor?: string;
+    rotation?: number;
+}
 export interface ILineChartDataset extends ICommonDataset {
     lineTension?: number;
     pointBackgroundColor?: string;
@@ -103,6 +102,10 @@ export interface ILineChartDataset extends ICommonDataset {
     formation?: boolean;
     displayGroup?: any;
     pointStyle?: string;
+    borderDash?: number[];
+    showPoints?: boolean;
+    showLine?: boolean;
+    ellipseAnnotations?: IEllipseAnnotation[];
 }
 export interface ILineChartData extends ICommonData {
     data?: {
@@ -116,16 +119,20 @@ export interface ILineChartProps {
     chart: ILineChartData;
     table?: any;
 }
-export interface IEllipseOptions {
-    radiusX?: number;
-    radiusY?: number;
-    rotation?: number;
-    lineWidth?: number;
-    color?: string;
-}
-export interface IDatasetDataPoint {
-    x: number;
-    y: number;
-    ellipseOptions?: IEllipseOptions;
-}
-export {};
+export interface IGeneratedLineChartDataset {
+    label: string;
+    data: ICommonDataValue[];
+    showLine: boolean;
+    lineTension: number;
+    spanGaps: boolean;
+    borderWidth: number;
+    borderDash: number[];
+    borderJoinStyle: 'round' | 'bevel' | 'miter';
+    borderColor: string;
+    backgroundColor: string | string[];
+    pointBackgroundColor: string;
+    pointRadius: number;
+    pointHoverRadius: number;
+    pointHitRadius: number;
+}
+export type TGeneratedLineChartDatasets = IGeneratedLineChartDataset[];

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

@@ -546,50 +546,18 @@ export namespace PointEllipsisAnnotation {
             export namespace data_11 {
                 const datasets_11: {
                     label: string;
-                    showEllipsesAnnotation: boolean;
                     data: {
                         x: number;
                         y: number;
-                        ellipseOptions: {
-                            radiusX: number;
-                            radiusY: number;
-                            rotation: number;
-                        };
                     }[];
                 }[];
                 export { datasets_11 as datasets };
             }
             export { data_11 as data };
             export namespace options_18 {
-                export namespace additionalAxesOptions_4 {
-                    export namespace range_1 {
-                        export namespace x_5 {
-                            const min_2: number;
-                            export { min_2 as min };
-                            const max_2: number;
-                            export { max_2 as max };
-                        }
-                        export { x_5 as x };
-                        export namespace y_4 {
-                            const min_3: number;
-                            export { min_3 as min };
-                            const max_3: number;
-                            export { max_3 as max };
-                        }
-                        export { y_4 as y };
-                    }
-                    export { range_1 as range };
-                }
-                export { additionalAxesOptions_4 as additionalAxesOptions };
                 export namespace annotations_1 {
                     const showAnnotations_1: boolean;
                     export { showAnnotations_1 as showAnnotations };
-                    export namespace pointEllipsisAnnotation {
-                        export { DEGTORAD as rotation };
-                        export const radiusX: number;
-                        export const radiusY: number;
-                        export const lineWidth: number;
-                    }
                 }
                 export { annotations_1 as annotations };
             }
@@ -918,26 +886,26 @@ export namespace HideIrregularMajorAxisTicks {
                     export { showMinorGridlines_1 as showMinorGridlines };
                 }
                 export { graph_2 as graph };
-                export namespace additionalAxesOptions_5 {
-                    export namespace range_2 {
-                        export namespace x_6 {
-                            const min_4: number;
-                            export { min_4 as min };
-                            const max_4: number;
-                            export { max_4 as max };
+                export namespace additionalAxesOptions_4 {
+                    export namespace range_1 {
+                        export namespace x_5 {
+                            const min_2: number;
+                            export { min_2 as min };
+                            const max_2: number;
+                            export { max_2 as max };
                         }
-                        export { x_6 as x };
-                        export namespace y_5 {
-                            const min_5: number;
-                            export { min_5 as min };
-                            const max_5: number;
-                            export { max_5 as max };
+                        export { x_5 as x };
+                        export namespace y_4 {
+                            const min_3: number;
+                            export { min_3 as min };
+                            const max_3: number;
+                            export { max_3 as max };
                         }
-                        export { y_5 as y };
+                        export { y_4 as y };
                     }
-                    export { range_2 as range };
+                    export { range_1 as range };
                 }
-                export { additionalAxesOptions_5 as additionalAxesOptions };
+                export { additionalAxesOptions_4 as additionalAxesOptions };
             }
             export { options_29 as options };
         }
@@ -1030,14 +998,14 @@ export namespace TestLongTooltip {
                 }
                 export { chartStyling_8 as chartStyling };
                 export namespace axes_4 {
-                    const x_7: {
+                    const x_6: {
                         label: string;
                     }[];
-                    export { x_7 as x };
-                    const y_6: {
+                    export { x_6 as x };
+                    const y_5: {
                         label: string;
                     }[];
-                    export { y_6 as y };
+                    export { y_5 as y };
                 }
                 export { axes_4 as axes };
             }
@@ -1106,22 +1074,22 @@ export namespace PartialRange {
             }
             export { data_20 as data };
             export namespace options_33 {
-                export namespace additionalAxesOptions_6 {
-                    export namespace range_3 {
-                        export namespace x_8 {
-                            const max_6: number;
-                            export { max_6 as max };
+                export namespace additionalAxesOptions_5 {
+                    export namespace range_2 {
+                        export namespace x_7 {
+                            const max_4: number;
+                            export { max_4 as max };
                         }
-                        export { x_8 as x };
-                        export namespace y_7 {
-                            const min_6: number;
-                            export { min_6 as min };
+                        export { x_7 as x };
+                        export namespace y_6 {
+                            const min_4: number;
+                            export { min_4 as min };
                         }
-                        export { y_7 as y };
+                        export { y_6 as y };
                     }
-                    export { range_3 as range };
+                    export { range_2 as range };
                 }
-                export { additionalAxesOptions_6 as additionalAxesOptions };
+                export { additionalAxesOptions_5 as additionalAxesOptions };
             }
             export { options_33 as options };
         }
@@ -1207,6 +1175,5 @@ export namespace Tension {
 }
 import { LineChart } from './line-chart';
 declare namespace basicChart { }
-import { DEGTORAD } from './plugins/plugin-constants';
 declare const customLegendContainerID: "custom-legend-container";
 declare const testComponent: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/line-chart/plugins/plugin-constants.d.ts

@@ -9,4 +9,3 @@ export declare const TextLabelPosition: {
     BOTTOM_CENTER: string;
     BOTTOM_RIGHT: string;
 };
-export declare const DEGTORAD = 90;

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

@@ -1,7 +1,7 @@
 type TCustomOptionType = {
     [key: string]: string;
 } | string | string[];
-type TDataType = Record<string, unknown> | Array<any>;
+export type TDataType = Record<string, unknown> | Array<any>;
 /**
  * Checks if a single dataset or an array of datasets has a custom option.
  * Iterates through each custom option defined in the customOptions parameter.

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

@@ -0,0 +1 @@
+export declare const ellipsisAnnotation: (datasets: any[]) => Record<string, any>;

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

@@ -1,12 +1,7 @@
 import { IState } from '../state/state.interfaces';
-import { ILineChartOptions } from '../line-chart.interface';
+import { ILineChartDataset, ILineChartOptions, TGeneratedLineChartDatasets } from '../line-chart.interface';
 /**
  * Generates line chart datasets based on the provided datasets, state, and options.
- *
- * @param {Array} datasets - The initial datasets for the line chart.
- * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
- * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
- * @param {Object} translations - The getTranslations object with the label property
- * @returns {Array} - The generated line chart datasets with applied settings and configurations.
+ * datasets - The initial datasets for the line chart.
  */
-export declare const generateLineChartDatasets: (datasets: Array<any>, state: IState, options: ILineChartOptions, { label }: any) => any[];
+export declare const generateLineChartDatasets: (datasets: ILineChartDataset[], state: IState, options: ILineChartOptions, { label }: any) => TGeneratedLineChartDatasets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "3.8.0-beta-3",
+  "version": "3.8.1-beta-1",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "resolutions": {

package/dist/src/components/line-chart/plugins/custom-point-ellipsis-plugin.d.ts

@@ -1,6 +0,0 @@
-import { Chart } from 'chart.js';
-import { ILineChartOptions } from '../line-chart.interface';
-export declare const customPointEllipsisPlugin: (options?: ILineChartOptions) => {
-    id: string;
-    afterDatasetsDraw: (chart: Chart<'line', number[], unknown>) => void;
-};