@oliasoft-open-source/charts-library 5.13.0 → 5.14.0-beta-1

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

@@ -0,0 +1,53 @@
+import { Chart } from 'chart.js';
+import { ICommonAnnotationsData } from '../../common.interface';
+import { IScales } from './annotation-dragger-plugin';
+import { AnnotationType, DragAxis } from './enums';
+export declare const getMousePosition: (event: MouseEvent, canvas: HTMLCanvasElement) => {
+    x: number;
+    y: number;
+};
+export declare const getMousePositionInCoordinates: (event: MouseEvent, canvas: HTMLCanvasElement, scales: IScales, xScaleID: string, yScaleID: string) => {
+    x: number;
+    y: number;
+};
+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, xScaleID: string, yScaleID: string) => {
+    centerX: number | undefined;
+    centerY: number | undefined;
+    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;
+    xScaleID: string;
+    yScaleID: string;
+}
+export declare const isWithinChartArea: ({ x, y, chartArea, scales, metrics, resizable, dragRange, annotationType, xScaleID, yScaleID, }: IIsWithinChartAreaProps) => boolean;
+export declare const updateAnnotationPositionWithinBounds: (axis: DragAxis, newPosition: number, activeAnnotation: ICommonAnnotationsData, chart: Chart, scales: IScales, xScaleID: string, yScaleID: string, metrics?: {
+    width?: number;
+    height?: number;
+}) => void;
+export declare const setAnnotationBorderWidth: (chart: Chart, annotationId?: string, borderWidth?: number) => void;

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

@@ -0,0 +1,5 @@
+import { IScales } from './annotation-dragger-plugin';
+import { ICommonAnnotationsData } from '../../common.interface';
+export declare const annotationLabel: (ctx: CanvasRenderingContext2D, annotations: Record<string, ICommonAnnotationsData & {
+    label: Record<string, any>;
+}>, scales: IScales) => void;

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

@@ -0,0 +1,9 @@
+import { Scale } from 'chart.js';
+import { IEllipsePoints } from './ellipsis-annotation-plugin.ts';
+export declare const computeEllipseGeometry: (ellipsePoints: IEllipsePoints, xScale: Scale, yScale: Scale) => {
+    cx: number;
+    cy: number;
+    radiusX: number;
+    radiusY: number;
+    angle: number;
+};

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

@@ -0,0 +1,18 @@
+import { Chart, ChartDataset, ScatterDataPoint } from 'chart.js';
+export interface IPoint {
+    x: number;
+    y: number;
+}
+export interface IEllipsePoints {
+    major: [IPoint, IPoint];
+    minor: [IPoint, IPoint];
+}
+export interface ICustomDataPoint extends ScatterDataPoint {
+    ellipsePoints?: IEllipsePoints;
+}
+export interface ICustomDataset extends ChartDataset<any, ICustomDataPoint[]> {
+}
+export declare const ellipsisAnnotationPlugin: {
+    id: string;
+    afterDatasetsDraw(chart: Chart<"scatter">): void;
+};

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/constants/default-translations.d.ts

@@ -0,0 +1,25 @@
+export declare enum defaultTranslations {
+    label = "Label",
+    pointsLines = "Points & lines",
+    linesOnly = "Lines only",
+    pointsOnly = "Points only",
+    axesOptions = "Axes options",
+    resetAxes = "Reset Axes",
+    done = "Done",
+    downloadAsPNG = "Download as PNG",
+    showChart = "Show chart",
+    showTable = "Show table",
+    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",
+    mustHaveAValue = "Must have a value",
+    mustBeANumber = "Must be a number",
+    mustBeLessThanMax = "Must be less than max",
+    mustBeGreaterThanMin = "Must be greater than min",
+    doubleClickToReset = "Double click on canvas to reset",
+    orDoubleClickToCanvas = "or double click on canvas"
+}

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

@@ -0,0 +1,13 @@
+export declare const DEFAULT_POINT_RADIUS = 2;
+export declare const DEFAULT_HOVER_RADIUS = 5;
+export declare const DEFAULT_BORDER_WIDTH = 1;
+export declare const BORDER_JOIN_STYLE = "round";
+export declare const DEFAULT_BACKGROUND_COLOR = "transparent";
+export declare const ZOOM_BOX_BACKGROUND_COLOR = "rgba(0, 0, 0, 0.1)";
+export declare const DOUBLE_CLICK = "dblclick";
+export declare const INIT_KEYS: {
+    TRANSLATIONS: string;
+    LANGUAGE_KEY: string;
+};
+export declare const LOWER_BOUND = 0.0001;
+export declare const UPPER_BOUND = 10000000;

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

@@ -0,0 +1,57 @@
+import { RefObject } from 'react';
+import { Chart } from 'chart.js';
+import { IUnitOptions } from '../../line-chart.interface';
+import { IAxisState, IState } from '../../state/state.interfaces';
+export interface IDepthType {
+    selectedDepthType?: string;
+    setSelectedDepthType?: (type: string) => void;
+    options?: Array<string>;
+}
+export interface IAxisControlLabel {
+    id: string;
+    label: string;
+}
+export interface IAxesOptions {
+    chartRef: RefObject<Chart>;
+    state: IState;
+    controlsAxesLabels: IAxisControlLabel[];
+    onUpdateAxes: ({ axes }: {
+        axes: IAxisState;
+    }) => void;
+    onResetAxes: () => void;
+    onUpdateEdited: (edited: boolean) => void;
+    depthType?: IDepthType | object;
+    close?: () => void;
+}
+export interface IOnEdit {
+    name?: string;
+    value?: string;
+    id?: string;
+}
+export interface IAxisFormState {
+    id: string;
+    min: number | string;
+    max: number | string;
+    unit?: string | IUnitOptions;
+}
+export type IInitializeAxisFormState = IAxisFormState[];
+export interface IError {
+    id: string;
+    min: string[];
+    max: string[];
+}
+export interface IFormState extends IInitializeAxisFormState {
+    errors?: IError[];
+    valid?: boolean;
+}
+type ActionType = 'reset' | 'valueUpdated' | 'unitUpdated';
+export type AxisKey = 'min' | 'max' | 'unit';
+interface ActionPayload extends IOnEdit {
+    axes?: IAxisState[];
+    chartRef?: RefObject<Chart>;
+}
+export interface IAction {
+    type: ActionType;
+    payload: ActionPayload;
+}
+export {};

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

@@ -0,0 +1,6 @@
+import { IAxesOptions } from './axes-options-interfaces';
+interface IAxesOptionsWithTranslations extends IAxesOptions {
+    translations: Record<string, string>;
+}
+export declare const AxesOptions: (optionsPopover: IAxesOptionsWithTranslations) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { IAxisFormState, IError } from './axes-options-interfaces';
+/**
+ * Validate axes and return errors along with a validity flag.
+ */
+export declare const validateAxes: (axes: IAxisFormState[]) => {
+    errors: IError[];
+    valid: boolean;
+};

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

@@ -0,0 +1,19 @@
+import { Dispatch, ReactNode, RefObject } from 'react';
+import { Chart } from 'chart.js';
+import { ILineChartOptions } from '../line-chart.interface';
+import { IState } from '../state/state.interfaces';
+export interface IControls {
+    headerComponent?: ReactNode;
+    subheaderComponent?: ReactNode;
+    table?: ReactNode;
+    chartRef: RefObject<Chart>;
+    state: IState;
+    options: ILineChartOptions;
+    dispatch: Dispatch<any>;
+    translations: Record<string, string>;
+    controlsPortalId?: string;
+}
+export interface AxisControls {
+    id?: string;
+    label?: string;
+}

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

@@ -0,0 +1,3 @@
+import { IControls } from './controls-interfaces';
+declare const Controls: ({ table, headerComponent, subheaderComponent, chartRef, state, options, dispatch, translations, controlsPortalId, }: IControls) => import("react/jsx-runtime").JSX.Element;
+export default Controls;

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

@@ -0,0 +1,14 @@
+export interface IDragOptions {
+    onTogglePan: () => void;
+    onToggleZoom: () => void;
+    panEnabled: boolean;
+    zoomEnabled: 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

@@ -0,0 +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): ({
+    label: string;
+    description: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    selected: boolean;
+    type: string;
+    onClick: () => void;
+} | {
+    label: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    selected: boolean | undefined;
+    type: string;
+    onClick: () => void;
+    description?: undefined;
+})[];
+/**
+ * @param {import('./drag-options-interfaces').IDragOptions} obj
+ */
+export declare const DragOptions: ({ options }: {
+    options: IMenuSection[];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { IMenuSection } from '@oliasoft-open-source/react-ui-library';
+interface ILineOptions {
+    lineEnabled: boolean;
+    onToggleLine: () => void;
+    onTogglePoints: () => void;
+    pointsEnabled: boolean;
+    translations: Record<string, string>;
+}
+export declare function getLineOptions({ lineEnabled, onToggleLine, onTogglePoints, pointsEnabled, translations, }: ILineOptions): {
+    type: string;
+    label: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    selected: boolean;
+    onClick: () => void;
+}[];
+export declare const LineOptions: ({ options }: {
+    options: IMenuSection[];
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,32 @@
+import { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
+import { Chart, ChartEvent } from 'chart.js';
+import { ICommonDataValue, ICommonHoveredItems } from '../../common/common.interface';
+import { ILineChartOptions, TGeneratedLineChartDatasets } from '../line-chart.interface';
+import { IAxisState, IState } from '../state/state.interfaces';
+interface IUseChartFunctions {
+    chartRef: RefObject<Chart>;
+    state: IState;
+    options: ILineChartOptions;
+    dispatch: Dispatch<any>;
+}
+/**
+ * Custom hook that encapsulates the chart-related functions and their dependencies
+ */
+export declare const useChartFunctions: ({ chartRef, state, options, dispatch, }: IUseChartFunctions) => {
+    resetZoom: () => void;
+    onHover: (hoveredPoint: ICommonDataValue | null, setHoveredPoint: Dispatch<SetStateAction<ICommonDataValue | null>>, datasets: TGeneratedLineChartDatasets) => (evt: ChartEvent, hoveredItems: ICommonHoveredItems[]) => void;
+    handleDownload: () => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    handleKeyUp: (event: KeyboardEvent<HTMLDivElement>) => void;
+    controlsAxesLabels: {
+        id: string;
+        label: string;
+    }[];
+    updateAxesRangesFromChart: () => void;
+    onResetAxes: () => void;
+    onUpdateAxes: ({ axes }: {
+        axes: IAxisState;
+    }) => void;
+    onUpdateEdited: (edited: boolean) => void;
+};
+export {};

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

@@ -0,0 +1,19 @@
+import { Dispatch, RefObject } from 'react';
+import { Chart } from 'chart.js';
+import { IState } from '../state/state.interfaces';
+import { ILineChartOptions, TGeneratedLineChartDatasets } from '../line-chart.interface';
+interface IUseChartOptions {
+    chartRef: RefObject<Chart>;
+    state: IState;
+    options: ILineChartOptions;
+    dispatch: Dispatch<any>;
+    generatedDatasets: TGeneratedLineChartDatasets;
+    persistenceId?: string;
+}
+/**
+ * Custom hook to generate chart options.
+ */
+export declare const useChartOptions: ({ chartRef, state, options, dispatch, generatedDatasets, persistenceId, }: IUseChartOptions) => import('node_modules/chart.js/dist/types/utils')._DeepPartialObject<import('chart.js').CoreChartOptions<"line"> & import('chart.js').ElementChartOptions<"line"> & import('chart.js').PluginChartOptions<"line"> & import('chart.js').DatasetChartOptions<"line"> & import('chart.js').ScaleChartOptions<"line"> & import('chart.js').LineControllerChartOptions> & {
+    persistenceId?: string;
+};
+export {};

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

@@ -0,0 +1,7 @@
+import { ILineChartOptions } from '../line-chart.interface';
+interface IUseChartPlugins {
+    options: ILineChartOptions;
+    resetZoom: () => void;
+}
+export declare const useChartPlugins: ({ options, resetZoom }: IUseChartPlugins) => any[];
+export {};

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

@@ -0,0 +1,12 @@
+import { IState } from '../state/state.interfaces';
+import { ILineChartOptions } from '../line-chart.interface';
+interface IUseChartState {
+    options: ILineChartOptions;
+    state: IState;
+    persistenceId?: string;
+}
+/**
+ * Hook for managing the state of the chart.
+ */
+export declare const useChartState: ({ options, state, persistenceId, }: IUseChartState) => void;
+export {};

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

@@ -0,0 +1,12 @@
+import { Dispatch } from 'react';
+export declare const useToggleHandlers: (dispatch: Dispatch<any>) => {
+    onToggleLegend: () => void;
+    onToggleLine: () => void;
+    onTogglePan: () => void;
+    onTogglePoints: () => void;
+    onToggleTable: () => void;
+    onToggleZoom: () => void;
+    onToggleDragPoints: () => void;
+    onToggleDragAnnotation: () => void;
+    onDisableDragOptions: () => void;
+};

package/dist/src/components/line-chart/initialize/config.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Retrieve the value for the given key from the config object.
+ * @param {string} key - The key to access the corresponding value in the config object.
+ * @returns {*} - The value associated with the given key in the config object or config.
+ */
+export declare const getConfig: (key?: string) => any;
+/**
+ * Set a new value for the given key in the config object.
+ * @param {string} key - The key to access the corresponding value in the config object.
+ * @param {*} newValue - The new value to be set for the given key.
+ */
+export declare const setConfig: (key: string, newValue: string | Record<string, string>) => void;

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

@@ -0,0 +1,12 @@
+/**
+ * Initialize the charts library with the provided configurations.
+ * This function will store the configuration options in a config object.
+ * @param {object} options - An object containing the configuration options for the library.
+ * @param {object} options.translations - The translations to be used in the library.
+ * @param {string} options.languageKey - The language key to be stored in the config object, used for translations.
+ * @param {...object} options - Any additional options to be stored in the config object.
+ */
+export declare const initializeLineChart: ({ languageKey, ...options }: {
+    [x: string]: any;
+    languageKey?: string | undefined;
+}) => void;

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

@@ -0,0 +1,3 @@
+import { ILineChartData, ILineChartOptionsInput, ILineChartProps } from './line-chart.interface';
+export declare const normalizeLineChartOptions: (options?: ILineChartOptionsInput) => ILineChartData["options"];
+export declare const getDefaultProps: (props: ILineChartProps) => ILineChartData;

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

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