@oliasoft-open-source/charts-library 4.2.0 → 4.3.0-beta-1

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

@@ -29,6 +29,7 @@ export interface ICommonAnnotationElement {
         scaleID?: string;
         borderColor?: string;
         borderWidth?: number;
+        radius?: number;
         label?: {
             content?: string;
             position?: string;
@@ -37,6 +38,10 @@ export interface ICommonAnnotationElement {
         };
     };
 }
+export interface ICoordinates {
+    x: number;
+    y: number;
+}
 export interface ICommonAnnotationsData {
     display?: boolean;
     hideLegend?: boolean;
@@ -51,6 +56,12 @@ export interface ICommonAnnotationsData {
     xMax: number;
     yMin: number;
     yMax: number;
+    xValue?: number;
+    yValue?: number;
+    enableDrag?: boolean;
+    onDragStart?: (coordinates: ICoordinates) => void;
+    onDrag?: (coordinates: ICoordinates) => void;
+    onDragEnd?: (coordinates: ICoordinates) => void;
 }
 export interface ICommonStyling {
     width?: number | string;
@@ -92,6 +103,7 @@ export interface ICommonAnnotation {
 export interface ICommonAnnotations {
     showAnnotations?: boolean;
     controlAnnotation?: boolean;
+    enableDragAnnotation?: boolean;
     annotationsData?: ICommonAnnotationsData[];
     labelAnnotation?: ICommonAnnotation;
 }

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

@@ -1,6 +1,6 @@
 import { Chart } from 'chart.js';
 import { Position } from './enums';
-import { ICommonAnnotationElement, ICommonAnnotationsData } from '../common.interface';
+import { ICommonAnnotationElement, ICommonAnnotationsData, ICoordinates } from '../common.interface';
 export interface IGetAnnotationsProps {
     showAnnotations: boolean;
     annotationsData: ICommonAnnotationsData[];
@@ -28,7 +28,7 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     backgroundColor: string;
     borderColor: string;
     borderWidth: number;
-    borderDash: number[];
+    borderDash: number[] | undefined;
     type: string;
     adjustScaleRange: boolean;
     enter: ({ element, }: {
@@ -41,6 +41,9 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     }, { chart, }: {
         chart: Chart;
     }) => void;
+    onDragStart: () => (cord: ICoordinates) => void;
+    onDrag: () => (cord: ICoordinates) => void;
+    onDragEnd: () => (cord: ICoordinates) => void;
     hideLegend?: boolean | undefined;
     annotationAxis: "x" | "y";
     color: string;
@@ -50,5 +53,8 @@ declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotat
     xMax: number;
     yMin: number;
     yMax: number;
+    xValue?: number | undefined;
+    yValue?: number | undefined;
+    enableDrag?: boolean | undefined;
 }[];
 export default getAnnotation;

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

@@ -0,0 +1,14 @@
+import { ChartType, Plugin, Scale } from 'chart.js';
+export interface IScales {
+    x: Scale;
+    y: Scale;
+}
+export interface AnnotationDraggerPluginOptions {
+    enabled: boolean;
+}
+declare module 'chart.js' {
+    interface PluginOptionsByType<TType extends ChartType> {
+        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
+    }
+}
+export declare const annotationDraggerPlugin: Plugin;

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

@@ -0,0 +1,15 @@
+export declare enum FontStyle {
+    DEFAULT = "14px Arial",
+    CUSTOM = "16px Arial"
+}
+export declare enum MouseEvents {
+    MOUSEDOWN = "mousedown",
+    MOUSEMOVE = "mousemove",
+    MOUSEUP = "mouseup"
+}
+export declare enum AnnotationType {
+    POINT = "point",
+    BOX = "box",
+    LINE = "line",
+    ELLIPSE = "ellipse"
+}

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

@@ -0,0 +1,6 @@
+import { Chart } from 'chart.js';
+import { IScales } from '../../../common/plugins/annotation-dragger-plugin/annotation-dragger-plugin';
+import { ICommonAnnotationsData } from '../../../common/common.interface';
+export declare const handleAnnotationMouseDown: (event: MouseEvent, canvas: HTMLCanvasElement, scales: IScales, annotations: Record<string, ICommonAnnotationsData>, setDraggingState: (isDragging: boolean, annotation: ICommonAnnotationsData | null, dragStartX: number, dragStartY: number) => void) => void;
+export declare const handleAnnotationMouseMove: (event: MouseEvent, canvas: HTMLCanvasElement, scales: IScales, isDragging: boolean, activeAnnotation: ICommonAnnotationsData | null, dragStartX: number, dragStartY: number, chart: Chart) => void;
+export declare const handleAnnotationMouseUp: (isDragging: boolean, activeAnnotation: ICommonAnnotationsData | null, chart: Chart, setDraggingState: (isDragging: boolean, annotation: ICommonAnnotationsData | null) => void) => void;

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

@@ -0,0 +1,23 @@
+import { ICommonAnnotationsData } from '../../../common/common.interface';
+import { IScales } from '../../../common/plugins/annotation-dragger-plugin/annotation-dragger-plugin';
+export declare const getMousePosition: (event: MouseEvent, canvas: HTMLCanvasElement) => {
+    x: number;
+    y: number;
+};
+export declare const getMousePositionInCoordinates: (event: MouseEvent, canvas: HTMLCanvasElement, scales: IScales) => {
+    x: number;
+    y: number;
+};
+export declare const getActiveAnnotation: (x: number, y: number, annotations: Record<string, ICommonAnnotationsData>) => ICommonAnnotationsData;
+export declare const calculateAnnotationMetricsInValues: (annotation: ICommonAnnotationsData) => {
+    centerX: number | undefined;
+    centerY: number | undefined;
+    width: number | undefined;
+    height: number | undefined;
+};
+export declare const calculateAnnotationMetricsInValuesInPixels: (annotation: ICommonAnnotationsData, scales: IScales) => {
+    centerX: number | undefined;
+    centerY: number | undefined;
+    width: number | undefined;
+    height: number | undefined;
+};

package/dist/src/components/line-chart/constants/default-translations.d.ts

@@ -12,6 +12,7 @@ export declare enum defaultTranslations {
     dragToZoom = "Drag to zoom",
     dragToPan = "Drag to pan",
     dragToMovePoints = "Drag to move points",
+    dragToMoveAnnotation = "Drag to move annotation",
     dragDisabled = "Drag disabled",
     hideLegend = "Hide Legend",
     showLegend = "Show Legend",

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

@@ -3,8 +3,11 @@ export interface IDragOptions {
     onToggleZoom: () => void;
     panEnabled: boolean;
     zoomEnabled: boolean;
-    enableDragPoints: boolean;
+    enableDragPoints?: boolean;
+    enableDragAnnotation?: boolean;
     isDragDataAllowed?: boolean;
+    isDragAnnotationAllowed?: boolean;
+    onToggleDragAnnotation: () => void;
     onToggleDragPoints: () => void;
     onDisableDragOptions: () => void;
     translations: Record<string, string>;

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

@@ -2,4 +2,4 @@ import { IDragOptions } from './drag-options-interfaces';
 /**
  * @param {import('./drag-options-interfaces').IDragOptions} obj
  */
-export declare const DragOptions: ({ onTogglePan, onToggleZoom, panEnabled, zoomEnabled, enableDragPoints, isDragDataAllowed, onToggleDragPoints, onDisableDragOptions, translations: { dragToZoom, doubleClickToReset, dragToPan, orDoubleClickToCanvas, dragToMovePoints, dragDisabled, }, }: IDragOptions) => import("react/jsx-runtime").JSX.Element;
+export declare const DragOptions: ({ onTogglePan, onToggleZoom, panEnabled, zoomEnabled, enableDragPoints, enableDragAnnotation, isDragDataAllowed, isDragAnnotationAllowed, onToggleDragAnnotation, onToggleDragPoints, onDisableDragOptions, translations: { dragToZoom, doubleClickToReset, dragToPan, orDoubleClickToCanvas, dragToMovePoints, dragDisabled, dragToMoveAnnotation, }, }: IDragOptions) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,5 +7,6 @@ export declare const useToggleHandlers: (dispatch: Dispatch<any>) => {
     onToggleTable: () => void;
     onToggleZoom: () => void;
     onToggleDragPoints: () => void;
+    onToggleDragAnnotation: () => void;
     onDisableDragOptions: () => void;
 };

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

@@ -1228,6 +1228,99 @@ export function FilterAnnotationWhenLegendClick(): import("react/jsx-runtime").J
 export function GroupedDS(): import("react/jsx-runtime").JSX.Element;
 export function SimilarValuesWithAnnotation(): import("react/jsx-runtime").JSX.Element;
 export function HideSpecificDatasetAndAnnotation(): import("react/jsx-runtime").JSX.Element;
+export function DragAnnotations(args: any): import("react/jsx-runtime").JSX.Element;
+export namespace DragAnnotations {
+    export namespace args_45 {
+        export namespace chart_43 {
+            export namespace options_36 {
+                export namespace legend_5 {
+                    const display_2: boolean;
+                    export { display_2 as display };
+                }
+                export { legend_5 as legend };
+                export namespace annotations_5 {
+                    const showAnnotations_5: boolean;
+                    export { showAnnotations_5 as showAnnotations };
+                    export const enableDragAnnotation: boolean;
+                    const annotationsData_5: ({
+                        annotationAxis: string;
+                        label: string;
+                        value: number;
+                        enableDrag?: undefined;
+                        type?: undefined;
+                        xMin?: undefined;
+                        xMax?: undefined;
+                        yMin?: undefined;
+                        yMax?: undefined;
+                        color?: undefined;
+                        onDragStart?: undefined;
+                        onDrag?: undefined;
+                        onDragEnd?: undefined;
+                        xValue?: undefined;
+                        yValue?: undefined;
+                        radius?: undefined;
+                    } | {
+                        enableDrag: boolean;
+                        type: string;
+                        xMin: number;
+                        xMax: number;
+                        yMin: number;
+                        yMax: number;
+                        color: string;
+                        onDragStart: (cord: any) => void;
+                        onDrag: (cord: any) => void;
+                        onDragEnd: (cord: any) => void;
+                        annotationAxis?: undefined;
+                        label?: undefined;
+                        value?: undefined;
+                        xValue?: undefined;
+                        yValue?: undefined;
+                        radius?: undefined;
+                    } | {
+                        enableDrag: boolean;
+                        type: string;
+                        xMin: number;
+                        xMax: number;
+                        yMin: number;
+                        yMax: number;
+                        color: string;
+                        annotationAxis?: undefined;
+                        label?: undefined;
+                        value?: undefined;
+                        onDragStart?: undefined;
+                        onDrag?: undefined;
+                        onDragEnd?: undefined;
+                        xValue?: undefined;
+                        yValue?: undefined;
+                        radius?: undefined;
+                    } | {
+                        type: string;
+                        enableDrag: boolean;
+                        xValue: number;
+                        yValue: number;
+                        radius: number;
+                        color: string;
+                        onDragStart: (cord: any) => void;
+                        onDrag: (cord: any) => void;
+                        onDragEnd: (cord: any) => void;
+                        annotationAxis?: undefined;
+                        label?: undefined;
+                        value?: undefined;
+                        xMin?: undefined;
+                        xMax?: undefined;
+                        yMin?: undefined;
+                        yMax?: undefined;
+                    })[];
+                    export { annotationsData_5 as annotationsData };
+                }
+                export { annotations_5 as annotations };
+            }
+            export { options_36 as options };
+        }
+        export { chart_43 as chart };
+    }
+    export { args_45 as args };
+}
 import { LineChart } from './line-chart';
 declare namespace basicChart { }
 declare const customLegendContainerID: "custom-legend-container";

package/dist/src/components/line-chart/state/action-types.d.ts

@@ -8,4 +8,5 @@ export declare const SAVE_INITIAL_AXES_RANGES = "SAVE_INITIAL_AXES_RANGES";
 export declare const RESET_AXES_RANGES = "RESET_AXES_RANGES";
 export declare const UPDATE_AXES_RANGES = "UPDATE_AXES_RANGES";
 export declare const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
+export declare const TOGGLE_DRAG_ANNOTATION = "TOGGLE_DRAG_ANNOTATION";
 export declare const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";

package/dist/src/components/line-chart/state/state.interfaces.d.ts

@@ -17,6 +17,7 @@ export interface InitialState {
     showAnnotationLineIndex?: number[];
     showTable: boolean;
     enableDragPoints: boolean;
+    enableDragAnnotation: boolean;
 }
 export interface IInitAxisRange {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "4.2.0",
+  "version": "4.3.0-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": {