@oliasoft-open-source/charts-library 4.7.0-beta-5 → 4.7.0-beta-7

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

@@ -178,7 +178,7 @@ export namespace CustomLegend {
                 export namespace legend {
                     namespace customLegend {
                         export const customLegendPlugin: {
-                            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;
+                            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;
                         };
                         export { customLegendContainerID };
                     }

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

@@ -7,7 +7,7 @@ export interface IUseBarChartOptionsProps {
     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;
+    onClick: (_evt: import("chart.js").ChartEvent, _elements: import("chart.js").ActiveElement[], chartInstance: Chart<keyof import("chart.js").ChartTypeRegistry, (number | [number, number] | import("chart.js").Point | 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;

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

@@ -1,7 +1,7 @@
 import { ChartEvent, ChartTypeRegistry, LinearScaleOptions, Plugin } from 'chart.js';
 import { LabelOptions } from 'chartjs-plugin-annotation';
 import { GradientDirection } from '../common/plugins/gradient-background-plugin/enums';
-import { DragAxis } from '../common/plugins/annotation-dragger-plugin/enums';
+import { AnnotationType, DragAxis } from '../common/plugins/annotation-dragger-plugin/enums';
 import { AlignOptions, Position } from './helpers/enums';
 export type TAxisPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface ICommonDataValue {
@@ -55,7 +55,7 @@ export interface ICommonAnnotationsData {
     endValue: number;
     label: string;
     labelConfig?: Record<string, any>;
-    type: string;
+    type: AnnotationType;
     value: number;
     xMin: number;
     xMax: number;
@@ -69,6 +69,12 @@ export interface ICommonAnnotationsData {
     onDrag?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
     onDragEnd?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
     dragAxis?: DragAxis;
+    pointStyle?: string;
+    resizable?: boolean;
+    dragRange?: {
+        x?: [number, number];
+        y?: [number, number];
+    };
 }
 export interface ICommonGradientColor {
     offset: number;

package/dist/src/components/common/helpers/enums.d.ts

@@ -53,7 +53,10 @@ export declare enum AnnotationType {
     Text = "text"
 }
 export declare enum PointStyle {
-    Circle = "circle"
+    Circle = "circle",
+    Square = "rect",
+    Diamond = "rectRot",
+    Triangle = "triangle"
 }
 export declare enum ChartHoverMode {
     Nearest = "nearest"

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

@@ -1,4 +1,5 @@
 import { Chart } from 'chart.js';
+import { AnnotationType } from '../../common/plugins/annotation-dragger-plugin/enums';
 import { Position } from './enums';
 import { ICommonAnnotationElement, ICommonAnnotationsData, ICoordinates } from '../common.interface';
 export interface IGetAnnotationsProps {
@@ -46,7 +47,7 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     borderColor: string;
     borderWidth: number;
     borderDash: number[] | undefined;
-    type: string;
+    type: AnnotationType;
     adjustScaleRange: boolean;
     enter: ({ element, }: {
         element: ICommonAnnotationElement;
@@ -61,6 +62,8 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     onDragStart: () => (cord: ICoordinates, annotation: ICommonAnnotationsData) => void;
     onDrag: () => (cord: ICoordinates, annotation: ICommonAnnotationsData) => void;
     onDragEnd: () => (cord: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    pointStyle: string;
+    resizable: boolean;
     hideLegend?: boolean | undefined;
     annotationAxis: "x" | "y";
     color: string;
@@ -76,5 +79,9 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     radius?: number | undefined;
     enableDrag?: boolean | undefined;
     dragAxis?: import('../../common/plugins/annotation-dragger-plugin/enums').DragAxis | undefined;
+    dragRange?: {
+        x?: [number, number] | undefined;
+        y?: [number, number] | undefined;
+    } | undefined;
 }[];
 export default getAnnotation;

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

@@ -1,5 +1,7 @@
+import { Chart } from 'chart.js';
 import { ICommonAnnotationsData } from '../../../common/common.interface';
 import { IScales } from '../../../common/plugins/annotation-dragger-plugin/annotation-dragger-plugin';
+import { AnnotationType, DragAxis } from './enums';
 export declare const getMousePosition: (event: MouseEvent, canvas: HTMLCanvasElement) => {
     x: number;
     y: number;
@@ -20,3 +22,29 @@ export declare const calculateAnnotationMetricsInValuesInPixels: (annotation: IC
     width: number | undefined;
     height: number | undefined;
 };
+export interface IIsWithinChartAreaProps {
+    x?: number;
+    y?: number;
+    chartArea: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    scales: IScales;
+    metrics: {
+        width?: number;
+        height?: number;
+    };
+    resizable?: boolean;
+    dragRange?: {
+        x?: [number, number];
+        y?: [number, number];
+    } | null;
+    annotationType: AnnotationType;
+}
+export declare const isWithinChartArea: ({ x, y, chartArea, scales, metrics, resizable, dragRange, annotationType, }: IIsWithinChartAreaProps) => boolean;
+export declare const updateAnnotationPositionWithinBounds: (axis: DragAxis, newPosition: number, activeAnnotation: ICommonAnnotationsData, chart: Chart, scales: IScales, metrics?: {
+    width?: number;
+    height?: number;
+}) => void;

package/dist/src/components/line-chart/controls/drag-options.d.ts

@@ -1,30 +1,23 @@
+import { IMenuSection } from '@oliasoft-open-source/react-ui-library';
 import { IDragOptions } from './drag-options-interfaces';
 export declare function getDragOptions({ onTogglePan, onToggleZoom, panEnabled, zoomEnabled, enableDragPoints, enableDragAnnotation, isDragDataAllowed, isDragAnnotationAllowed, onToggleDragAnnotation, onToggleDragPoints, onDisableDragOptions, translations: { dragToZoom, doubleClickToReset, dragToPan, dragToMovePoints, dragDisabled, dragToMoveAnnotation, }, }: IDragOptions): ({
-    buttonLabel: string;
     label: string;
+    description: string;
     icon: import("react/jsx-runtime").JSX.Element;
     selected: boolean;
     type: string;
     onClick: () => void;
-    disabled?: undefined;
 } | {
     label: string;
     icon: import("react/jsx-runtime").JSX.Element;
     selected: boolean | undefined;
     type: string;
     onClick: () => void;
-    buttonLabel?: undefined;
-    disabled?: undefined;
-} | {
-    label: import("react/jsx-runtime").JSX.Element;
-    type: string;
-    disabled: boolean;
-    buttonLabel?: undefined;
-    icon?: undefined;
-    selected?: undefined;
-    onClick?: undefined;
+    description?: undefined;
 })[];
 /**
  * @param {import('./drag-options-interfaces').IDragOptions} obj
  */
-export declare const DragOptions: ({ onTogglePan, onToggleZoom, panEnabled, zoomEnabled, enableDragPoints, enableDragAnnotation, isDragDataAllowed, isDragAnnotationAllowed, onToggleDragAnnotation, onToggleDragPoints, onDisableDragOptions, translations: { dragToZoom, doubleClickToReset, dragToPan, dragToMovePoints, dragDisabled, dragToMoveAnnotation, }, }: IDragOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const DragOptions: ({ options }: {
+    options: IMenuSection[];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import { IMenuSection } from '@oliasoft-open-source/react-ui-library';
 interface ILineOptions {
     lineEnabled: boolean;
     onToggleLine: () => void;
@@ -12,5 +13,7 @@ export declare function getLineOptions({ lineEnabled, onToggleLine, onTogglePoin
     selected: boolean;
     onClick: () => void;
 }[];
-export declare const LineOptions: ({ lineEnabled, onToggleLine, onTogglePoints, pointsEnabled, translations, }: ILineOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const LineOptions: ({ options }: {
+    options: IMenuSection[];
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

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 | 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;
+                            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;
                         };
                         export { customLegendContainerID };
                     }
@@ -1261,6 +1261,9 @@ export namespace DragAnnotations {
                         radius?: undefined;
                         labelConfig?: undefined;
                         dragAxis?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
                     } | {
                         enableDrag: boolean;
                         type: string;
@@ -1280,6 +1283,9 @@ export namespace DragAnnotations {
                         radius?: undefined;
                         labelConfig?: undefined;
                         dragAxis?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
                     } | {
                         enableDrag: boolean;
                         type: string;
@@ -1299,6 +1305,9 @@ export namespace DragAnnotations {
                         radius?: undefined;
                         labelConfig?: undefined;
                         dragAxis?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
                     } | {
                         type: string;
                         enableDrag: boolean;
@@ -1321,6 +1330,9 @@ export namespace DragAnnotations {
                         yMin?: undefined;
                         yMax?: undefined;
                         dragAxis?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
                     } | {
                         enableDrag: boolean;
                         dragAxis: string;
@@ -1340,6 +1352,56 @@ export namespace DragAnnotations {
                         yValue?: undefined;
                         radius?: undefined;
                         labelConfig?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
+                    } | {
+                        type: string;
+                        enableDrag: boolean;
+                        dragAxis: string;
+                        xValue: number;
+                        yValue: number;
+                        radius: number;
+                        color: string;
+                        label: string;
+                        dragRange: {
+                            x: number[];
+                            y: number[];
+                        };
+                        annotationAxis?: undefined;
+                        value?: undefined;
+                        xMin?: undefined;
+                        xMax?: undefined;
+                        yMin?: undefined;
+                        yMax?: undefined;
+                        onDragStart?: undefined;
+                        onDrag?: undefined;
+                        onDragEnd?: undefined;
+                        labelConfig?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
+                    } | {
+                        type: string;
+                        enableDrag: boolean;
+                        pointStyle: string;
+                        dragAxis: string;
+                        xValue: number;
+                        yValue: number;
+                        radius: number;
+                        color: string;
+                        label: string;
+                        annotationAxis?: undefined;
+                        value?: undefined;
+                        xMin?: undefined;
+                        xMax?: undefined;
+                        yMin?: undefined;
+                        yMax?: undefined;
+                        onDragStart?: undefined;
+                        onDrag?: undefined;
+                        onDragEnd?: undefined;
+                        labelConfig?: undefined;
+                        dragRange?: undefined;
+                        resizable?: undefined;
                     } | {
                         type: string;
                         enableDrag: boolean;
@@ -1359,6 +1421,56 @@ export namespace DragAnnotations {
                         onDrag?: undefined;
                         onDragEnd?: undefined;
                         labelConfig?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
+                    } | {
+                        enableDrag: boolean;
+                        resizable: boolean;
+                        type: string;
+                        xMin: number;
+                        xMax: number;
+                        yMin: number;
+                        yMax: number;
+                        color: string;
+                        label: string;
+                        annotationAxis?: undefined;
+                        value?: undefined;
+                        onDragStart?: undefined;
+                        onDrag?: undefined;
+                        onDragEnd?: undefined;
+                        xValue?: undefined;
+                        yValue?: undefined;
+                        radius?: undefined;
+                        labelConfig?: undefined;
+                        dragAxis?: undefined;
+                        dragRange?: undefined;
+                        pointStyle?: undefined;
+                    } | {
+                        enableDrag: boolean;
+                        dragAxis: string;
+                        dragRange: {
+                            x: number[];
+                            y?: undefined;
+                        };
+                        type: string;
+                        xMin: number;
+                        xMax: number;
+                        yMin: number;
+                        yMax: number;
+                        color: string;
+                        label: string;
+                        annotationAxis?: undefined;
+                        value?: undefined;
+                        onDragStart?: undefined;
+                        onDrag?: undefined;
+                        onDragEnd?: undefined;
+                        xValue?: undefined;
+                        yValue?: undefined;
+                        radius?: undefined;
+                        labelConfig?: undefined;
+                        pointStyle?: undefined;
+                        resizable?: undefined;
                     })[];
                     export { annotationsData_5 as annotationsData };
                 }

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

@@ -0,0 +1,28 @@
+declare namespace _default {
+    export const title: string;
+    export { LineChart as component };
+    export namespace args {
+        export { basicChart as chart };
+    }
+}
+export default _default;
+export function TestLegendDropzoneResizing(): import("react/jsx-runtime").JSX.Element;
+import { LineChart } from './line-chart';
+declare namespace basicChart {
+    namespace data {
+        const datasets: {
+            label: string;
+            data: {
+                x: number;
+                y: number;
+            }[];
+        }[];
+    }
+    namespace options {
+        const title_1: string;
+        export { title_1 as title };
+        export namespace chartStyling {
+            const height: string;
+        }
+    }
+}

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

@@ -9,7 +9,7 @@ import { UnusedParameter } from '../../common/common.interface';
  */
 declare const getLineChartDataLabels: (options: ILineChartOptions) => {
     display: string;
-    align: (context: import("./datalabels-alignment/datalabels-alignment.interface").IAlignmentContext) => import("../../common/helpers/enums").AlignOptions.End | import("../../common/helpers/enums").AlignOptions.Start | import("../../common/helpers/enums").AlignOptions.Right | import("../../common/helpers/enums").AlignOptions.Left;
+    align: (context: import("./datalabels-alignment/datalabels-alignment.interface").IAlignmentContext) => import("../../../..").AlignOptions.End | import("../../../..").AlignOptions.Start | import("../../../..").AlignOptions.Right | import("../../../..").AlignOptions.Left;
     formatter: (_: UnusedParameter, context: TooltipItem<any>) => any;
 } | {
     display: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "4.7.0-beta-5",
+  "version": "4.7.0-beta-7",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "resolutions": {
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@fontsource/noto-sans": "^5.0.18",
-    "chart.js": "^4.2.1",
-    "chartjs-plugin-annotation": "^3.0.1",
-    "chartjs-plugin-datalabels": "^2.1.0",
-    "chartjs-plugin-dragdata": "^2.2.5",
+    "chart.js": "^4.4.6",
+    "chartjs-plugin-annotation": "^3.1.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "chartjs-plugin-dragdata": "2.2.5",
     "chartjs-plugin-zoom": "^2.0.1",
     "fast-deep-equal": "^3.1.3",
     "html-to-image": "^1.11.11",
@@ -59,8 +59,8 @@
     "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@oliasoft-open-source/react-ui-library": "^4.10.4",
-    "@oliasoft-open-source/units": "^3.14.0",
+    "@oliasoft-open-source/react-ui-library": "^4.16.0",
+    "@oliasoft-open-source/units": "^4.2.1",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-docs": "^7.0.18",
     "@storybook/addon-mdx-gfm": "^7.0.23",
@@ -101,16 +101,16 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.0.18",
     "storybook-dark-mode": "^3.0.0",
-    "vite": "^4.3.9",
+    "vite": "^5.4.11",
     "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"
+    "vitest": "^2.1.4"
   },
   "peerDependencies": {
-    "@oliasoft-open-source/react-ui-library": "^4.10.4",
-    "@oliasoft-open-source/units": "^3.14.0",
+    "@oliasoft-open-source/react-ui-library": "^4.16.0",
+    "@oliasoft-open-source/units": "^4.2.1",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
     "ajv-keywords": "^5.1.0",