@oliasoft-open-source/charts-library 5.0.0-beta-2 → 5.0.0

package/dist/common/helpers/range/estimate-close-values.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/common/helpers/range/estimate-data-series-have-close-values.d.ts

@@ -0,0 +1,8 @@
+import { TGeneratedLineChartDatasets } from '../../../line-chart/line-chart.interface';
+/**
+ * Estimates whether any of the data series has values that are all close together
+ * - checks only the first and last values in each series (i.e. assumes they are ordered)
+ * - uses an equality check with tolerance for decimal precision noise
+ * - this is just an inexpensive "guesstimate" (full min/max detection can be used afterwards)
+ */
+export declare const estimateDataSeriesHaveCloseValues: (generatedDatasets: TGeneratedLineChartDatasets) => boolean;

package/dist/common/helpers/range/range.d.ts

@@ -0,0 +1,33 @@
+interface IGetSuggestedAxisRange {
+    data: number[];
+    beginAtZero: boolean;
+    autoAxisPadding: boolean;
+}
+/**
+ * Overrides the default chart.js axis range for some edge-cases:
+ * - when no data -> default range
+ * - when all values are close to zero -> default range
+ * - when all values are close to each other -> custom 5% padding
+ * - when autoAxisPadding is set -> custom 5% padding
+ * - all other cases fall back to chart.js default behaviour
+ *
+ * `autoAxisPadding` feature requirements:
+ * - specified by Truls and ported by Mark+Oleg
+ * - numbers that are equal (within tolerance) shall be presented as a straight line
+ * - all other data series shall use 90% of width of axis (5% padding each side)
+ * - the padding on each side shall be symmetric
+ *
+ * @param {object} args
+ * @param {array<number|null>} args.data
+ * @param {boolean} [args.beginAtZero]
+ * @param {boolean>} [args.autoAxisPadding]
+ * @returns {object} returns {min, max} pair
+ */
+export declare const getSuggestedAxisRange: ({ data, beginAtZero, autoAxisPadding, }: IGetSuggestedAxisRange) => {
+    min: number;
+    max: number;
+} | {
+    min: undefined;
+    max: undefined;
+};
+export {};

package/dist/common/helpers/range/range.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/common/helpers/text.d.ts

@@ -0,0 +1 @@
+export declare const getTextWidth: (text: string, font: string) => number | undefined;

package/dist/common/helpers/to-annotation.d.ts

@@ -0,0 +1,4 @@
+import { ICommonAnnotationElement } from '../common.interface';
+export declare const toAnnotationObject: (annotationArr?: ICommonAnnotationElement[]) => {
+    annotations: {};
+};

package/dist/common/hooks/use-generated-labels.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+import { Chart } from 'chart.js';
+import { TLegendDatasets } from '../legend-component/legend-interface';
+export declare const useGeneratedLabels: (chartRef: RefObject<Chart>, generatedDatasets: TLegendDatasets) => any[];

package/dist/common/hooks/use-legend-state.d.ts

@@ -0,0 +1,28 @@
+import { RefObject } from 'react';
+import { Chart, LegendItem } from 'chart.js';
+import { UnusedParameter } from '../common.interface';
+export interface IUseLegendStateProps {
+    chartRef: RefObject<Chart>;
+    options: any;
+}
+/**
+ * Custom hook to manage legend state.
+ */
+export declare const useLegendState: ({ chartRef, options }: IUseLegendStateProps) => {
+    legendClick: (_: UnusedParameter, legendItem: LegendItem) => void;
+    annotation: import('../common.interface').ICommonAnnotationElement[];
+    legend: {
+        position: any;
+        display: boolean | undefined;
+        align: "center" | "start" | "end";
+        labels: {
+            boxHeight: number;
+            boxWidth: number | undefined;
+            usePointStyle: boolean | undefined;
+        };
+        onClick: (_: UnusedParameter, legendItem: LegendItem) => void;
+    };
+    customLegendPlugin: {
+        htmlLegend: any;
+    };
+};

package/dist/common/hooks/use-legend.d.ts

@@ -0,0 +1,4 @@
+export declare const useLegend: () => {
+    state: import('../legend-component/state/legend-state-reducer').ILegendState;
+    dispatch: React.Dispatch<any>;
+};

package/dist/common/hooks/use-reset.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch } from 'react';
+import { ILegendState } from '../legend-component/state/legend-state-reducer';
+export declare const useReset: (state: ILegendState, dispatch: Dispatch<any>, dependencies: any[]) => void;

package/dist/common/legend-component/legend-dropzone.d.ts

@@ -0,0 +1,3 @@
+import { ILegendDropZones } from './legend-interface';
+declare const LegendDropZones: (legendDropZonesProps: ILegendDropZones) => import("react/jsx-runtime").JSX.Element;
+export default LegendDropZones;

package/dist/common/legend-component/legend-interface.d.ts

@@ -0,0 +1,48 @@
+import { MouseEventHandler, RefObject } from 'react';
+import { Chart, ChartArea } from 'chart.js';
+import { IGeneratedScatterChartDataset, TGeneratedScatterChartDatasets, IScatterOptions } from '../../scatter-chart/scatter-chart.interface';
+import { Position } from '../helpers/enums';
+import { IGeneratedLineChartDataset, ILineChartOptions, TGeneratedLineChartDatasets } from '../../line-chart/line-chart.interface';
+import { IBarOptions, IGenerateBarChartDataset, TGenerateBarChartDatasets } from '../../bar-chart/bar-chart.interface';
+import { IGeneratedPieChartDataset, IPieOptions, TGeneratedPieChartDatasets } from '../../pie-chart/pie-chart.interface';
+import { ChartType } from '../enums';
+export interface ILegendDropZone {
+    position: Position;
+    onDrop: () => void;
+    placeholderSize?: {
+        width?: number;
+        height?: number;
+    };
+}
+export interface ILegendDropZones {
+    chartArea?: ChartArea;
+    setLegendPosition: (position: Position) => void;
+    isDragging: boolean;
+    placeholderSize?: {
+        width?: number;
+        height?: number;
+    };
+}
+export type TLegendDataset = IGeneratedLineChartDataset | IGenerateBarChartDataset | IGeneratedPieChartDataset | IGeneratedScatterChartDataset;
+export type TLegendDatasets = TGeneratedLineChartDatasets | TGenerateBarChartDatasets | TGeneratedPieChartDatasets | TGeneratedScatterChartDatasets;
+export type TChartsOption = ILineChartOptions | IBarOptions | IPieOptions | IScatterOptions;
+export interface ILegendItem {
+    hidden: boolean;
+    dataset: TLegendDataset;
+    handleClick: MouseEventHandler<HTMLDivElement>;
+    chartType: ChartType;
+    index: number;
+}
+export interface ILegendConfig {
+    options: TChartsOption;
+    generatedDatasets: TLegendDatasets;
+    chartType: ChartType;
+}
+export interface ILegend {
+    chartRef: RefObject<Chart>;
+    legendConfig: ILegendConfig;
+}
+export interface ILegendPanel extends ILegend {
+    legendPosition: Position;
+    isDragging: boolean;
+}

package/dist/common/legend-component/legend-item/LegendItemLine.d.ts

@@ -0,0 +1,5 @@
+import { IGeneratedLineChartDataset } from '../../../line-chart/line-chart.interface';
+export interface ILineLegendItemProp {
+    dataset: IGeneratedLineChartDataset;
+}
+export declare const LegendItemLine: ({ dataset }: Record<string, any>) => import("react/jsx-runtime").JSX.Element;

package/dist/common/legend-component/legend-item/legend-item.d.ts

@@ -0,0 +1,3 @@
+import { ILegendItem } from '../legend-interface';
+declare const LegendItem: ({ hidden, dataset, handleClick, chartType, index, }: ILegendItem) => import("react/jsx-runtime").JSX.Element;
+export default LegendItem;

package/dist/common/legend-component/legend-panel.d.ts

@@ -0,0 +1,3 @@
+import { ILegendPanel } from './legend-interface';
+declare const LegendPanel: import('react').ForwardRefExoticComponent<ILegendPanel & import('react').RefAttributes<HTMLDivElement>>;
+export default LegendPanel;

package/dist/common/legend-component/legend.d.ts

@@ -0,0 +1,3 @@
+import { ILegend } from './legend-interface';
+declare const Legend: ({ chartRef, legendConfig }: ILegend) => import("react/jsx-runtime").JSX.Element;
+export default Legend;

package/dist/common/legend-component/state/legend-action-types.d.ts

@@ -0,0 +1,2 @@
+export declare const TOGGLE_DATA_VISIBILITY = "TOGGLE_DATA_VISIBILITY";
+export declare const RESET_STATE = "RESET_STATE";

package/dist/common/legend-component/state/legend-context.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactNode } from 'react';
+import { ILegendState } from './legend-state-reducer';
+import { TChartsOption } from '../legend-interface';
+export declare const LegendContext: React.Context<{
+    state: ILegendState;
+    dispatch: React.Dispatch<any>;
+} | undefined>;
+export interface ILegendProviderProps {
+    children: ReactNode;
+    options: TChartsOption;
+}
+export declare const LegendProvider: ({ children, options }: ILegendProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/common/legend-component/state/legend-state-reducer.d.ts

@@ -0,0 +1,26 @@
+import { Chart } from 'chart.js';
+import { TLegendDataset, TLegendDatasets } from '../legend-interface';
+import { RESET_STATE, TOGGLE_DATA_VISIBILITY } from './legend-action-types';
+import { ICommonAnnotationElement } from '../../common.interface';
+export interface ILegendState {
+    annotation: ICommonAnnotationElement[];
+}
+export type TLegendAction = {
+    type: typeof TOGGLE_DATA_VISIBILITY;
+    payload: {
+        chartInstance: Chart;
+        dsConfig: {
+            datasetIndex: number;
+            dataset: TLegendDataset;
+            datasets: TLegendDatasets;
+        };
+        annotationConfig: {
+            annotationIndex: number;
+        };
+    };
+} | {
+    type: typeof RESET_STATE;
+    payload: ILegendState;
+};
+export declare const legendInitialState: ILegendState;
+export declare const legendReducer: (state: ILegendState, action: TLegendAction) => ILegendState;

package/dist/common/legend-component/utils/create-style-object.d.ts

@@ -0,0 +1,27 @@
+import { Position } from '../../helpers/enums';
+export declare const LEGEND_MARGIN = 4;
+interface IChartArea {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+interface IChart {
+    height?: number;
+    width?: number;
+    chartArea: IChartArea;
+}
+interface ILegendStyle {
+    left: number | undefined;
+    right: number | undefined;
+    top: number | undefined;
+    bottom: number | undefined;
+    maxHeight: number;
+    maxWidth: number;
+    margin: number;
+}
+/**
+ * Creates a style object for positioning and sizing the legend panel based on the chart dimensions and legend position.
+ */
+export declare const createLegendStyle: (legendPosition: Position, chart: IChart | null) => ILegendStyle;
+export {};

package/dist/common/legend-component/utils/get-generated-labels.d.ts

@@ -0,0 +1,2 @@
+import { Chart, LegendItem } from 'chart.js';
+export declare const getGeneratedLabels: (chart: Chart) => LegendItem[];

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

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

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

@@ -0,0 +1,20 @@
+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"
+}
+export declare enum DragAxis {
+    X = "x",
+    Y = "y",
+    Both = "both"
+}

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

@@ -0,0 +1,6 @@
+import { Chart } from 'chart.js';
+import { IScales } from './annotation-dragger-plugin';
+import { ICommonAnnotationsData } from '../../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, hoveredAnnotationId: string | null) => 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, canvas: HTMLCanvasElement, setDraggingState: (isDragging: boolean, annotation: ICommonAnnotationsData | null) => void) => void;

package/dist/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/common/plugins/annotation-dragger-plugin/helpers.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/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/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/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/favicon.svg

@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
+  <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
+  </svg>
+  <style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
+</svg>