@oliasoft-open-source/charts-library 4.4.0-beta-1 → 4.4.0

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

@@ -51,6 +51,7 @@ export interface IBarChartBaseData {
 }
 export interface IBarChartData extends ICommonData {
     testId?: string;
+    controlsPortalId?: string;
     data: IBarChartBaseData;
     options: IBarOptions;
 }
@@ -59,6 +60,7 @@ export interface IBarChartProps {
 }
 export interface IBarDefaultProps {
     testId: string;
+    controlsPortalId: string;
     data: IBarChartBaseData;
     options: {
         title?: string | string[];

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

@@ -157,7 +157,7 @@ export namespace CustomLegend {
                 export namespace legend {
                     namespace customLegend {
                         export const customLegendPlugin: {
-                            afterUpdate(chart: import("chart.js").Chart<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>, _args: import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("../../../node_modules/chart.js/dist/types/basic").AnyObject>, _options: import("chart.js").ChartConfiguration<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>): void;
+                            afterUpdate(chart: import("chart.js").Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>, _args: import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("../../../node_modules/chart.js/dist/types/basic").AnyObject>, _options: import("chart.js").ChartConfiguration<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>): void;
                         };
                         export { customLegendContainerID };
                     }
@@ -195,6 +195,14 @@ export namespace StackedSelectedAxis {
     }
     export { args_24 as args };
 }
+export function WaterfallChart(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace WaterfallChart {
+    export namespace args_25 {
+        export { waterfallChart as chart };
+    }
+    export { args_25 as args };
+}
+export function ControlsPortal(): import("react/jsx-runtime").JSX.Element;
 import { BarChart } from './bar-chart';
 declare namespace singleChart { }
 declare namespace multipleBarData {
@@ -715,3 +723,26 @@ declare namespace stackedData {
     }
     export { options_21 as options };
 }
+declare namespace waterfallChart {
+    export namespace data_24 {
+        const labels_1: string[];
+        export { labels_1 as labels };
+        const datasets_24: {
+            label: string;
+            data: (number | number[])[];
+            backgroundColor: string[];
+        }[];
+        export { datasets_24 as datasets };
+    }
+    export { data_24 as data };
+    export namespace options_22 {
+        const title_21: string;
+        export { title_21 as title };
+        export namespace graph_1 {
+            const showDataLabels_1: boolean;
+            export { showDataLabels_1 as showDataLabels };
+        }
+        export { graph_1 as graph };
+    }
+    export { options_22 as options };
+}

package/dist/src/components/bar-chart/utils/get-bar-chart-data-labels.d.ts

@@ -1,6 +1,6 @@
 import { IBarOptions } from '../bar-chart.interface.ts';
 type ExtendedDisplayOptions = 'auto' | boolean;
-interface IExtendedDataLabelsOptions {
+export interface IExtendedDataLabelsOptions {
     display: ExtendedDisplayOptions;
 }
 /**

package/dist/src/components/bar-chart/utils/use-bar-chart-options.d.ts

@@ -0,0 +1,54 @@
+import { MutableRefObject } from 'react';
+import { Chart } from 'chart.js';
+import { AxisType, ChartHoverMode } from '../../common/helpers/enums';
+import { IBarDefaultProps } from '../bar-chart.interface';
+export interface IUseBarChartOptionsProps {
+    chart: IBarDefaultProps;
+    chartRef: MutableRefObject<Chart | null>;
+}
+export declare const useBarChartOptions: ({ chart, chartRef, }: IUseBarChartOptionsProps) => {
+    onClick: (_evt: import("chart.js").ChartEvent, _elements: import("chart.js").ActiveElement[], chartInstance: Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>) => void;
+    onHover: (evt: import("chart.js").ChartEvent, hoveredItems: import("../../common/common.interface").ICommonHoveredItems[]) => void;
+    indexAxis: AxisType;
+    maintainAspectRatio: boolean | undefined;
+    animation: false | {
+        duration: number;
+    } | undefined;
+    hover: {
+        mode: ChartHoverMode;
+        intersect: boolean;
+    };
+    scales: any;
+    plugins: {
+        title: {
+            display: boolean;
+            text: string | string[] | undefined;
+        } | {
+            display?: undefined;
+            text?: undefined;
+        };
+        datalabels: import("./get-bar-chart-data-labels").IExtendedDataLabelsOptions;
+        annotation: {
+            annotations: {};
+        };
+        tooltip: Record<string, any>;
+        legend: {
+            display: boolean;
+            position: any;
+            align: "end" | "start" | "center";
+            labels: {
+                boxHeight: number;
+                boxWidth: number | undefined;
+                usePointStyle: boolean | undefined;
+            };
+            onClick: (_: any, legendItem: import("chart.js").LegendItem) => void;
+        };
+        customLegendPlugin: {
+            htmlLegend: any;
+        };
+        chartAreaBorder: {
+            borderColor: string;
+        };
+        dragData: false | object | import("../../common/helpers/get-draggableData").IDraggableData | undefined;
+    };
+};

package/dist/src/components/common/common.interface.d.ts

@@ -1,5 +1,6 @@
 import { ChartEvent, ChartTypeRegistry, LinearScaleOptions, Plugin } from 'chart.js';
 import { LabelOptions } from 'chartjs-plugin-annotation';
+import { GradientDirection } from '../common/plugins/gradient-background-plugin/enums';
 import { AlignOptions, Position } from './helpers/enums';
 export type TAxisPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface ICommonDataValue {
@@ -51,8 +52,6 @@ export interface ICommonAnnotationsData {
     annotationAxis: 'x' | 'y';
     color: string;
     endValue: number;
-    borderWidth?: number;
-    backgroundColor?: string;
     label: string;
     labelConfig?: Record<string, any>;
     type: string;
@@ -69,12 +68,22 @@ export interface ICommonAnnotationsData {
     onDrag?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
     onDragEnd?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
 }
+export interface ICommonGradientColor {
+    offset: number;
+    color: string;
+}
+export interface ICommonGradient {
+    display: boolean;
+    gradientColors?: ICommonGradientColor[];
+    direction?: GradientDirection;
+}
 export interface ICommonStyling {
     width?: number | string;
     height?: number | string;
     maintainAspectRatio?: boolean;
     staticChartHeight?: boolean;
     performanceMode?: boolean;
+    gradient?: ICommonGradient;
 }
 export interface ICommonLegend {
     display: boolean;

package/dist/src/components/common/helpers/chart-consts.d.ts

@@ -1,3 +1,4 @@
+import { ICommonGradientColor } from '../../common/common.interface';
 export declare const BORDER_WIDTH: {
     INITIAL: number;
     HOVERED: number;
@@ -34,3 +35,4 @@ export declare const DEFAULT_CHART_NAME = "new_chart";
 export declare const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
 export declare const DECIMAL_POINT_TOLERANCE = 9;
 export declare const MAX_DECIMAL_DIFF: number;
+export declare const GRADIENT_COLORS: ICommonGradientColor[];

package/dist/src/components/common/helpers/get-chart-annotation.d.ts

@@ -34,7 +34,7 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     } | {
         backgroundColor: any;
         content: string;
-        display: boolean;
+        display: any;
         position: any;
         color: any;
         font: any;

package/dist/src/components/common/helpers/get-draggableData.d.ts

@@ -1,5 +1,5 @@
 import { ICommonOptions } from '../common.interface';
-interface IDraggableDataOptions {
+export interface IDraggableDataOptions {
     dragX: boolean;
     dragY: boolean;
     round: boolean;
@@ -8,7 +8,7 @@ interface IDraggableDataOptions {
     onDrag: () => void;
     onDragEnd: () => void;
 }
-interface IDraggableData {
+export interface IDraggableData {
     dragData: IDraggableDataOptions;
 }
 /**

package/dist/src/components/common/plugins/gradient-background-plugin/enums.d.ts

@@ -0,0 +1,10 @@
+export declare enum GradientDirection {
+    TopToBottom = 0,
+    BottomToTop = 1,
+    LeftToRight = 2,
+    RightToLeft = 3,
+    TopLeftToBottomRight = 4,
+    BottomRightToTopLeft = 5,
+    BottomLeftToTopRight = 6,
+    TopRightToBottomLeft = 7
+}

package/dist/src/components/common/plugins/gradient-background-plugin/gradient-background-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'chart.js';
+export declare const gradientBackgroundPlugin: Plugin<'bubble'>;

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

@@ -679,7 +679,7 @@ export namespace CustomLegend {
                 export namespace legend_4 {
                     namespace customLegend {
                         export const customLegendPlugin: {
-                            afterUpdate(chart: import("chart.js").Chart<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>, _args: import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("../../../node_modules/chart.js/dist/types/basic").AnyObject>, _options: import("chart.js").ChartConfiguration<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | import("chart.js").BubbleDataPoint | null)[], unknown>): void;
+                            afterUpdate(chart: import("chart.js").Chart<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>, _args: import("chart.js").Plugin<keyof import("chart.js").ChartTypeRegistry, import("../../../node_modules/chart.js/dist/types/basic").AnyObject>, _options: import("chart.js").ChartConfiguration<keyof import("chart.js").ChartTypeRegistry, (number | import("chart.js").Point | [number, number] | import("chart.js").BubbleDataPoint | null)[], unknown>): void;
                         };
                         export { customLegendContainerID };
                     }
@@ -1328,71 +1328,6 @@ export namespace DragAnnotations {
     }
     export { args_45 as args };
 }
-export function EllipsisAnnotations(args: any): import("react/jsx-runtime").JSX.Element;
-export namespace EllipsisAnnotations {
-    export namespace args_46 {
-        export namespace chart_44 {
-            export namespace data_24 {
-                const datasets_24: {
-                    label: string;
-                    data: {
-                        x: number;
-                        y: number;
-                    }[];
-                }[];
-                export { datasets_24 as datasets };
-            }
-            export { data_24 as data };
-            export namespace options_37 {
-                export namespace additionalAxesOptions_6 {
-                    export namespace range_3 {
-                        export namespace x_8 {
-                            const min_5: number;
-                            export { min_5 as min };
-                            const max_5: number;
-                            export { max_5 as max };
-                        }
-                        export { x_8 as x };
-                        export namespace y_7 {
-                            const min_6: number;
-                            export { min_6 as min };
-                            const max_6: number;
-                            export { max_6 as max };
-                        }
-                        export { y_7 as y };
-                    }
-                    export { range_3 as range };
-                }
-                export { additionalAxesOptions_6 as additionalAxesOptions };
-                export namespace legend_6 {
-                    const display_3: boolean;
-                    export { display_3 as display };
-                }
-                export { legend_6 as legend };
-                export namespace annotations_6 {
-                    const showAnnotations_6: boolean;
-                    export { showAnnotations_6 as showAnnotations };
-                    const annotationsData_6: {
-                        type: string;
-                        xMin: number;
-                        xMax: number;
-                        yMin: number;
-                        yMax: number;
-                        backgroundColor: string;
-                        rotation: number;
-                        borderWidth: number;
-                        color: string;
-                    }[];
-                    export { annotationsData_6 as annotationsData };
-                }
-                export { annotations_6 as annotations };
-            }
-            export { options_37 as options };
-        }
-        export { chart_44 as chart };
-    }
-    export { args_46 as args };
-}
 import { LineChart } from './line-chart';
 declare namespace basicChart { }
 declare const customLegendContainerID: "custom-legend-container";

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

@@ -1,7 +1,7 @@
 import { ChartEvent } from 'chart.js';
 import { IPieChartDataset, IPieOptions } from './pie-chart.interface';
 import { AlignOptions, Position } from '../common/helpers/enums';
-interface IDefaultChartStyling {
+export interface IDefaultChartStyling {
     width?: number | string;
     height?: number | string;
     maintainAspectRatio: boolean;

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

@@ -0,0 +1,112 @@
+import { ActiveElement, AnimationSpec, Chart, ChartEvent } from 'chart.js';
+import { IScatterChartDefaultProps } from '../../scatter-chart/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: (_: any, 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;
+                position: any;
+                align: "end" | "start" | "center";
+                labels: {
+                    boxHeight: number;
+                    boxWidth: number | undefined;
+                    usePointStyle: boolean | undefined;
+                };
+                onClick: (_: any, 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: (tooltipItem: import('../../scatter-chart/utils/get-tooltip-config').IScatterTooltipItem) => string;
+                };
+                backgroundColor: string;
+                displayColors: boolean;
+                padding: number;
+            };
+        };
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        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

@@ -2,7 +2,7 @@ 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';
-interface IDefaultChartStyling {
+export interface IDefaultChartStyling {
     width?: number | string;
     height?: number | string;
     maintainAspectRatio: boolean;
@@ -27,10 +27,11 @@ interface IDefaultChartOptions {
     enableZoom: boolean;
     enablePan: boolean;
 }
-interface IDefaultInteractions {
+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[];

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

@@ -55,6 +55,13 @@ export namespace WithAxesLabels {
     }
     export { args_7 as args };
 }
+export function WithGradient(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace WithGradient {
+    export namespace args_8 {
+        export { scatterWithGradient as chart };
+    }
+    export { args_8 as args };
+}
 import { ScatterChart } from './scatter-chart';
 declare namespace singleScatterChart {
     namespace data {
@@ -202,4 +209,17 @@ declare namespace scatterWithAxesLabels {
     }
     export { options_4 as options };
 }
+declare namespace scatterWithGradient {
+    export namespace options_5 {
+        const title_6: string;
+        export { title_6 as title };
+        export namespace chartStyling_1 {
+            namespace gradient {
+                const display: boolean;
+            }
+        }
+        export { chartStyling_1 as chartStyling };
+    }
+    export { options_5 as options };
+}
 declare const labels1: string[];

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

@@ -4,7 +4,7 @@ interface IRawData {
     x: number;
     y: number;
 }
-interface IScatterTooltipItem extends TooltipItem<'scatter'> {
+export interface IScatterTooltipItem extends TooltipItem<'scatter'> {
     raw: IRawData;
 }
 export declare const getTooltipsConfig: (options: IDefaultScatterOptions) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "4.4.0-beta-1",
+  "version": "4.4.0",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "resolutions": {
@@ -59,7 +59,7 @@
     "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@oliasoft-open-source/react-ui-library": "^4.0.0",
+    "@oliasoft-open-source/react-ui-library": "^4.6.16",
     "@oliasoft-open-source/units": "^3.4.2",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-docs": "^7.0.18",
@@ -89,12 +89,13 @@
     "eslint-plugin-vitest-globals": "^1.3.1",
     "http-server": "^14.1.1",
     "husky": "^8.0.1",
-    "immer": "^10.0.2",
+    "immer": "^9",
     "jsdom": "^22.1.0",
     "less": "^4.1.3",
     "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
     "prettier": "3.0.3",
+    "prop-types": "^15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -103,15 +104,20 @@
     "vite": "^4.3.9",
     "vite-plugin-css-injected-by-js": "^3.1.1",
     "vite-plugin-dts": "3.6.0",
+    "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "@oliasoft-open-source/react-ui-library": "^4.0.0",
     "@oliasoft-open-source/units": "^3.4.2",
+    "ajv": "^8.12.0",
+    "ajv-errors": "^3.0.0",
+    "ajv-keywords": "^5.1.0",
     "classnames": "^2.3.2",
-    "immer": "^10.0.2",
+    "immer": "^9",
     "lodash": "^4.17.21",
+    "prop-types": "^15",
     "react": "^17",
     "react-dom": "^17"
   }

package/dist/src/components/common/plugins/ellipsis-annotation-plugin/ellipsis-annotation-plugin.d.ts

@@ -1,5 +0,0 @@
-import { Chart } from 'chart.js';
-export declare const ellipsisAnnotationPlugin: {
-    id: string;
-    afterDraw: (chart: Chart<any>) => void;
-};