@oliasoft-open-source/charts-library 5.2.0 → 5.2.1-beta-2

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

@@ -0,0 +1,55 @@
+import { MutableRefObject } from '../../../../node_modules/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) => 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[];
+        } | {
+            display?: undefined;
+            text?: undefined;
+        };
+        datalabels: import('./get-bar-chart-data-labels').IExtendedDataLabelsOptions;
+        annotation: {
+            annotations: {};
+        };
+        tooltip: Record<string, any>;
+        legend: {
+            display: boolean;
+            events: never[];
+            position: any;
+            align: "center" | "start" | "end";
+            labels: {
+                boxHeight: number;
+                boxWidth: number | undefined;
+                usePointStyle: boolean | undefined;
+            };
+            onClick: (_: import('../../common/common.interface').UnusedParameter, legendItem: import('chart.js').LegendItem) => void;
+        };
+        customLegendPlugin: {
+            htmlLegend: any;
+        };
+        chartAreaBorder: {
+            borderColor: string;
+        };
+        dragData: false | object | import('../../common/helpers/get-draggableData').IDraggableData | undefined;
+    };
+};

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

@@ -0,0 +1,210 @@
+import { ChartEvent, ChartTypeRegistry, LinearScaleOptions, Plugin } from 'chart.js';
+import { LabelOptions } from 'chartjs-plugin-annotation';
+import { GradientDirection } from './plugins/gradient-background-plugin/enums';
+import { AnnotationType, DragAxis } from './plugins/annotation-dragger-plugin/enums';
+import { AlignOptions, Position } from './helpers/enums';
+export type TAxisPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface ICommonDataValue {
+    x: number;
+    y: number;
+    label?: string;
+}
+export interface ICommonDataset {
+    label?: string;
+    borderColor?: string;
+    backgroundColor?: string | string[];
+    borderWidth?: number;
+    data: ICommonDataValue[];
+    hidden?: boolean;
+}
+export interface ICommonScales extends Partial<Record<string, LinearScaleOptions>> {
+    x: LinearScaleOptions;
+    y: LinearScaleOptions;
+}
+export interface ICommonAnnotationElement {
+    display: boolean;
+    annotationIndex: number;
+    label: {
+        options: LabelOptions;
+        content: string;
+    };
+    options: {
+        id?: string;
+        scaleID?: string;
+        borderColor?: string;
+        borderWidth?: number;
+        radius?: number;
+        label?: {
+            content?: string;
+            position?: string;
+            enabled?: boolean;
+            xAdjust?: number;
+        };
+    };
+}
+export interface ICoordinates {
+    x: number;
+    y: number;
+}
+export interface ICommonAnnotationsData {
+    display?: boolean;
+    hideLegend?: boolean;
+    id?: string;
+    adjustScaleRange: boolean;
+    annotationAxis: 'x' | 'y';
+    rotation: number;
+    color: string;
+    endValue: number;
+    borderWidth?: number;
+    backgroundColor?: string;
+    label: string;
+    labelConfig?: Record<string, any>;
+    type: AnnotationType;
+    value: number;
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    xValue?: number;
+    yValue?: number;
+    radius?: number;
+    enableDrag?: boolean;
+    onDragStart?: (coordinates: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    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];
+    };
+    displayDragCoordinates?: boolean;
+    xScaleID?: string;
+    yScaleID?: string;
+}
+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;
+    position: Position;
+    align: AlignOptions;
+}
+export interface ICommonTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+    scientificNotation: boolean;
+}
+export interface ICommonAdditionalAxesOptions {
+    chartScaleType?: 'linear' | 'logarithmic';
+    reverse: boolean;
+    beginAtZero: boolean;
+    stepSize?: number;
+    stacked?: boolean;
+    suggestedMin?: number;
+    suggestedMax?: number;
+    min?: number;
+    max?: number;
+}
+export interface ICommonAnnotation {
+    showLabel: boolean;
+    text: string | string[];
+    position: string;
+    fontSize: number;
+    xOffset: number;
+    yOffset: number;
+    maxWidth: number;
+    lineHeight: number;
+}
+export interface ICommonAnnotations {
+    showAnnotations?: boolean;
+    controlAnnotation?: boolean;
+    enableDragAnnotation?: boolean;
+    annotationsData?: ICommonAnnotationsData[];
+    labelAnnotation?: ICommonAnnotation;
+}
+export interface ICommonGraph {
+    lineTension?: number;
+    spanGaps?: boolean;
+    showDataLabels?: boolean;
+    showMinorGridlines?: boolean;
+}
+export interface ICommonInteractions {
+    onLegendClick?: (text: string, hidden: boolean) => void;
+    onHover?: (event?: ChartEvent, datasetIndex?: number, index?: number, generatedDataset?: any[]) => void;
+    onUnhover?: (event?: ChartEvent, datasetIndex?: number, index?: number, generatedDataset?: any[]) => void;
+}
+export interface ICommonCustomLegend<T extends keyof ChartTypeRegistry> {
+    customLegendPlugin: Plugin<T> | null;
+    customLegendContainerID: string;
+}
+export interface ICommonChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+export interface ICommonDragData {
+    enableDragData?: boolean;
+    showTooltip?: boolean;
+    roundPoints?: boolean;
+    dragX?: boolean;
+    dragY?: boolean;
+    onDragStart?: () => void;
+    onDrag?: () => void;
+    onDragEnd?: () => void;
+}
+export interface ICommonOptions {
+    title?: string | string[];
+    chartStyling?: ICommonStyling;
+    tooltip?: ICommonTooltip;
+    legend?: ICommonLegend;
+    chartOptions?: ICommonChartOptions;
+    interactions?: ICommonInteractions;
+    dragData?: ICommonDragData;
+    annotations?: ICommonAnnotations;
+}
+export interface ICommonData {
+    testId?: string;
+    data?: {
+        labels?: string[];
+        datasets?: ICommonDataset[];
+    };
+    options: ICommonOptions;
+}
+export interface ICommonHoveredItems {
+    index: number;
+    datasetIndex: number;
+}
+export interface ICommonChartPlugins {
+    legend: {
+        position: TAxisPosition;
+    };
+    title: {
+        display: boolean;
+        text: string;
+    };
+}
+export interface ICommonAxis<PositionType = any> {
+    label: string;
+    position: PositionType;
+    color: string | string[];
+    unit?: string;
+    gridLines?: boolean;
+    stepSize?: number;
+}
+export type UnusedParameter = unknown | any;
+export type TPrimitive = string | number | boolean | null;

package/dist/common/controls-portal.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from '../../../node_modules/react';
+interface ControlsPortalProps {
+    children: ReactElement;
+    controlsPortalId: string;
+}
+declare const ControlsPortal: ({ children, controlsPortalId, }: ControlsPortalProps) => import("react/jsx-runtime").JSX.Element;
+export default ControlsPortal;

package/dist/common/enums.d.ts

@@ -0,0 +1,10 @@
+export declare enum ChartType {
+    LINE = "line",
+    BAR = "bar",
+    PIE = "pie",
+    SCATTER = "scatter"
+}
+export declare enum ChartDirection {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}

package/dist/common/helpers/chart-border-plugin.d.ts

@@ -0,0 +1,16 @@
+import { Chart } from 'chart.js';
+import { UnusedParameter } from '../common.interface';
+interface IChartAreaBorderPluginOptions {
+    borderColor: string;
+    borderWidth: number;
+    borderDash: number[];
+    borderDashOffset?: number;
+}
+/**
+ * Chart border plugin config
+ */
+export declare const chartAreaBorderPlugin: {
+    id: string;
+    beforeDraw(chart: Chart, _: UnusedParameter, options: IChartAreaBorderPluginOptions): void;
+};
+export {};

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

@@ -0,0 +1,39 @@
+import { ICommonGradientColor } from '../common.interface';
+export declare const BORDER_WIDTH: {
+    ZERO: number;
+    INITIAL: number;
+    HOVERED: number;
+    POINT_HOVERED: number;
+};
+export declare const BORDER_COLOR = "rgba(0,0,0,0.1)";
+export declare const ANNOTATION_DASH: number[];
+export declare const DEFAULT_FONT_SIZE = 12;
+export declare const DEFAULT_FONT_FAMILY = "\"Roobert\", \"Noto Sans\", sans-serif";
+export declare const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
+export declare const LEGEND_LABEL_BOX_SIZE = 12;
+export declare const TOOLTIP_PADDING = 8;
+export declare const TOOLTIP_BOX_PADDING = 4;
+export declare const TRANSPARENT = "transparent";
+export declare const LOGARITHMIC_STEPS: number[];
+export declare const COLORS: string[];
+/**
+ * @type {string}
+ * @desc equivalent of 0.6 rgba alpha chanel
+ */
+export declare const ALPHA_CHANEL = "99";
+/**
+ * @type {number}
+ * @desc #FFFFFF as decimal number
+ */
+export declare const WHITE_COLOR_AS_DECIMAL = 16777215;
+export declare const AUTO = "auto";
+export declare const ANIMATION_DURATION: {
+    NO: number;
+    SLOW: number;
+    FAST: number;
+};
+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/common/helpers/chart-utils.d.ts

@@ -0,0 +1,86 @@
+import { ChartTypeRegistry, LegendItem, Plugin } from 'chart.js';
+import { ICommonCustomLegend, UnusedParameter } from '../common.interface';
+import { Position } from './enums';
+export interface IChartGraph {
+    showMinorGridlines: boolean;
+}
+interface IOptions {
+    title?: string | string[];
+    legend?: {
+        position: Position;
+        display?: boolean;
+        align?: string;
+        usePointStyle?: boolean;
+    };
+}
+interface IStyling {
+    width?: string | number;
+    height?: string | number;
+    squareAspectRatio?: number | boolean;
+    maintainAspectRatio?: boolean;
+    staticChartHeight?: boolean;
+    performanceMode?: boolean;
+}
+interface IAxis {
+    label?: string;
+}
+interface ILegend {
+    customLegend?: ICommonCustomLegend<any>;
+}
+/**
+ * @param { graph } graph - graph data from chart options
+ * @param { legend } legend
+ * @return {[]}
+ */
+export declare const getPlugins: <T extends keyof ChartTypeRegistry>(graph: IChartGraph, legend: ILegend) => Plugin<T>[] | any;
+/**
+ * @param {string[]} colors - color schema
+ * @return {string} - random color
+ */
+export declare const generateRandomColor: (colors: string[]) => string[];
+/**
+ * @param {ICommonChartOptions} options - chart options object
+ * @return {{color: (string|undefined), display: boolean, text}|{}}
+ */
+export declare const getTitle: (options: IOptions) => {
+    display: boolean;
+    text: string | string[];
+} | {
+    display?: undefined;
+    text?: undefined;
+};
+/**
+ * @function isVertical
+ */
+export declare const isVertical: (direction: "vertical" | "horizontal") => direction is "vertical";
+/**
+ * @param {'x'|'y'} axisType
+ * @param {number} i - index
+ * @return {'top'|'bottom'|'left'|'right'|*}
+ */
+export declare const getAxisPosition: (axisType: string, i: number) => Position;
+/**
+ * @param {chartStyling} chartStyling
+ * @param {Object} styles - styles imported form .less file
+ * @return {string} - class name
+ */
+export declare const getClassName: (chartStyling: IStyling, styles: Record<string, string>) => string;
+export declare const getLegend: (options: IOptions, clickHandler: (_: UnusedParameter, legendItem: LegendItem) => void) => {
+    position: any;
+    display: boolean | undefined;
+    align: "center" | "start" | "end";
+    labels: {
+        boxHeight: number;
+        boxWidth: number | undefined;
+        usePointStyle: boolean | undefined;
+    };
+    onClick: (_: UnusedParameter, legendItem: LegendItem) => void;
+};
+export declare const afterLabelCallback: (tooltipItem: Record<string, any>) => string;
+export declare const getTooltipLabel: (tooltipItem: Record<string, any>, showLabelsInTooltips: boolean) => string;
+export declare const sanitize: (str: string) => string;
+export declare const getChartFileName: (axes?: IAxis[]) => string;
+export declare const setDefaultTheme: () => void;
+export declare const isNilOrEmpty: <T>(value: T | null | undefined) => boolean;
+export declare const isEmptyString: (value: string) => value is "";
+export {};

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

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactNode } from '../../../../node_modules/react';
+interface ContainerProps {
+    style?: CSSProperties;
+    children: ReactNode;
+    margin?: boolean;
+    deprecatedMessage?: string;
+    warningMessage?: string;
+}
+export declare const Container: {
+    ({ style, children, margin, deprecatedMessage, warningMessage, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        style: {};
+        margin: boolean;
+        deprecatedMessage: null;
+        warningMessage: null;
+    };
+};
+export {};

package/dist/common/helpers/custom-format-number.d.ts

@@ -0,0 +1 @@
+export declare const customFormatNumber: (labelNumber: number, scientificNotation: boolean) => string;

package/dist/common/helpers/download-pgn.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from '../../../../node_modules/react';
+import { Chart } from 'chart.js';
+export declare const downloadPgn: (chartRef: RefObject<Chart>) => void;

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

@@ -0,0 +1,80 @@
+export declare enum AxisType {
+    X = "x",
+    Y = "y"
+}
+export declare enum Position {
+    Bottom = "bottom",
+    Top = "top",
+    Left = "left",
+    Right = "right",
+    TopRight = "top-right",
+    TopLeft = "top-left",
+    BottomLeft = "bottom-left",
+    BottomRight = "bottom-right"
+}
+export declare enum ChartType {
+    Line = "line",
+    Bar = "bar"
+}
+export declare enum CursorStyle {
+    Pointer = "pointer",
+    Initial = "initial",
+    Grab = "grab",
+    Grabbing = "grabbing",
+    Crosshair = "crosshair",
+    Move = "move"
+}
+export declare enum ScaleType {
+    Category = "category",
+    Linear = "linear",
+    Logarithmic = "logarithmic"
+}
+export declare enum ChartDirection {
+    Vertical = "vertical"
+}
+export declare enum TooltipLabel {
+    Y = "yLabel",
+    X = "xLabel"
+}
+export declare enum AlignOptions {
+    End = "end",
+    Start = "start",
+    Center = "center",
+    Right = "right",
+    Left = "left"
+}
+export declare enum PointType {
+    Casing = "casing"
+}
+export declare enum AnnotationType {
+    Box = "box",
+    Ellipse = "ellipse",
+    Line = "line",
+    Text = "text"
+}
+export declare enum PointStyle {
+    Circle = "circle",
+    Square = "rect",
+    Diamond = "rectRot",
+    Triangle = "triangle"
+}
+export declare enum ChartHoverMode {
+    Nearest = "nearest"
+}
+export declare enum PanZoomMode {
+    X = "x",
+    Y = "y",
+    XY = "xy",
+    Z = "z"
+}
+export declare enum Key {
+    Shift = "Shift"
+}
+export declare enum Events {
+    Mousemove = "mousemove",
+    Mouseout = "mouseout",
+    Click = "click",
+    Touchstart = "touchstart",
+    Touchmove = "touchmove",
+    Dblclick = "dblclick"
+}

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

@@ -0,0 +1,91 @@
+import { Chart } from 'chart.js';
+import { AnnotationType } from '../plugins/annotation-dragger-plugin/enums';
+import { Position } from './enums';
+import { ICommonAnnotationElement, ICommonAnnotationsData, ICoordinates } from '../common.interface';
+export interface IGetAnnotationsProps {
+    showAnnotations: boolean;
+    annotationsData: ICommonAnnotationsData[];
+}
+interface TChart extends Chart {
+    hoveredAnnotationId?: string | null;
+}
+declare const getAnnotation: ({ showAnnotations, annotationsData, }: IGetAnnotationsProps) => ICommonAnnotationElement[] | {
+    display: boolean | undefined;
+    annotationIndex: number;
+    id: string;
+    scaleID: "x" | "y";
+    label: {
+        content: string;
+        display: boolean;
+        font: {
+            weight: string;
+        };
+    } | {
+        backgroundColor: string;
+        content: string;
+        display: boolean;
+        position: Position;
+        color?: undefined;
+        font?: undefined;
+        borderWidth?: undefined;
+        padding?: undefined;
+        borderRadius?: undefined;
+        borderColor?: undefined;
+    } | {
+        backgroundColor: any;
+        content: string;
+        display: any;
+        position: any;
+        color: any;
+        font: any;
+        borderWidth: number;
+        padding: number;
+        borderRadius: number;
+        borderColor: any;
+    };
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    borderDash: number[] | undefined;
+    type: AnnotationType;
+    adjustScaleRange: boolean;
+    enter: ({ element, }: {
+        element: ICommonAnnotationElement;
+    }, { chart, }: {
+        chart: TChart;
+    }) => void;
+    leave: ({ element, }: {
+        element: ICommonAnnotationElement;
+    }, { chart, }: {
+        chart: TChart;
+    }) => void;
+    onDragStart: () => (cord: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    onDrag: () => (cord: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    onDragEnd: () => (cord: ICoordinates, annotation: ICommonAnnotationsData) => void;
+    pointStyle: string;
+    resizable: boolean;
+    displayDragCoordinates: boolean;
+    hideLegend?: boolean;
+    annotationAxis: "x" | "y";
+    rotation: number;
+    color: string;
+    endValue: number;
+    labelConfig?: Record<string, any>;
+    value: number;
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    xValue?: number;
+    yValue?: number;
+    radius?: number;
+    enableDrag?: boolean;
+    dragAxis?: import('../plugins/annotation-dragger-plugin/enums').DragAxis;
+    dragRange?: {
+        x?: [number, number];
+        y?: [number, number];
+    };
+    xScaleID?: string;
+    yScaleID?: string;
+}[];
+export default getAnnotation;

package/dist/common/helpers/get-custom-legend-plugin-example.d.ts

@@ -0,0 +1,8 @@
+import { Chart, ChartConfiguration, Plugin } from 'chart.js';
+/**
+ * Gets an example custom legend plugin for use in storybook.
+ * @param {string} customLegendContainerID - the id of the div container to put the generated legend in
+ */
+export declare const getCustomLegendPlugin: (customLegendContainerID: string) => {
+    afterUpdate(chart: Chart, _args: Plugin, _options: ChartConfiguration): void;
+};

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

@@ -0,0 +1,18 @@
+import { ICommonOptions } from '../common.interface';
+export interface IDraggableDataOptions {
+    dragX: boolean;
+    dragY: boolean;
+    round: boolean;
+    showTooltip: boolean;
+    onDragStart: () => void;
+    onDrag: () => void;
+    onDragEnd: () => void;
+}
+export interface IDraggableData {
+    dragData: IDraggableDataOptions;
+}
+/**
+ * @param {ICommonChartOptions} options - line chart options object
+ */
+declare const getDraggableData: (options: ICommonOptions) => IDraggableData | object;
+export default getDraggableData;

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;