@oliasoft-open-source/charts-library 3.3.8 → 3.4.0

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

@@ -0,0 +1,121 @@
+import { LinearScaleOptions } from 'chart.js';
+import { IChartAnnotations, IChartDraggableData, IChartInteractions, IChartLegend, IChartStyling } from '../../helpers/chart-interface';
+export interface IChartOptions {
+    showPoints: boolean;
+    enableZoom: boolean;
+    enablePan: boolean;
+    closeOnOutsideClick: boolean;
+    showLine: boolean;
+}
+export interface ILineChartGraph {
+    lineTension: number;
+    spanGaps: boolean;
+    showDataLabels: boolean;
+    showMinorGridlines: boolean;
+}
+export interface ILineChartTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+    hideSimulationName: boolean;
+}
+export interface IChartRange {
+    min: number;
+    max: number;
+}
+export interface ILineChartAdditionalAxesOptions {
+    chartScaleType: 'linear' | 'logarithmic';
+    reverse: boolean;
+    beginAtZero: boolean;
+    stepSize: number;
+    suggestedMin: number;
+    suggestedMax: number;
+    range: {
+        x: IChartRange;
+        y: IChartRange;
+    };
+    autoAxisPadding: boolean;
+}
+export interface IUnitOptions {
+    options: string[];
+    selectedUnit: string;
+    setSelectedUnit: () => void;
+}
+export interface ILineChartAxis<PositionType> {
+    label: string;
+    position: PositionType;
+    color: string;
+    unit: IUnitOptions;
+}
+export interface ILineChartAxes {
+    x: ILineChartAxis<'top' | 'bottom'>[];
+    y: ILineChartAxis<'left' | 'right'>[];
+}
+export interface ILineScales {
+    x: LinearScaleOptions;
+    y: LinearScaleOptions;
+}
+export interface IDepthType {
+    options: string[];
+    selectedUnit: string;
+    setSelectedUnit: () => void;
+}
+export interface IChartDragData {
+    enableDragData: boolean;
+    showTooltip: boolean;
+    roundPoints: boolean;
+    dragX: boolean;
+    dragY: boolean;
+    onDragStart: () => any;
+    onDrag: () => any;
+    onDragEnd: () => any;
+}
+export interface ILineChartOptions {
+    title: string | string[];
+    axes: any;
+    scales: any;
+    additionalAxesOptions: any;
+    chartStyling: IChartStyling;
+    tooltip: ILineChartTooltip;
+    graph: ILineChartGraph;
+    annotations: IChartAnnotations;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+    depthType: IDepthType;
+    draggableData: IChartDraggableData;
+    dragData: IChartDragData;
+}
+export interface IDataPoint {
+    x: number;
+    y: number;
+    label?: string[];
+}
+export interface ILineChartDataset {
+    label?: string;
+    lineTension?: number;
+    borderColor?: string;
+    pointBackgroundColor?: string;
+    backgroundColor?: string;
+    pointRadius?: number;
+    pointHoverRadius?: number;
+    pointHitRadius?: number;
+    borderWidth?: number;
+    fill?: boolean;
+    yAxisID?: string;
+    formation?: boolean;
+    data: IDataPoint[];
+}
+export interface ILineChartData {
+    testId: string | null;
+    data: {
+        labels?: string[];
+        datasets: ILineChartDataset[];
+    } | any;
+    options: ILineChartOptions;
+    persistenceId: string;
+    controlsPortalId: string | null;
+}
+export interface ILineChartProps {
+    chart: ILineChartData;
+    table?: any;
+}

package/dist/src/components/line-chart/plugins/chart-area-text-plugin.d.ts

@@ -0,0 +1,4 @@
+export declare const chartAreaTextPlugin: {
+    id: string;
+    beforeDraw: (chart: any, _args: any, options: any) => void;
+};

package/dist/src/components/line-chart/plugins/line-chart.minor-gridlines-plugin.d.ts

@@ -0,0 +1,7 @@
+export declare const getLargestMajorTickWidth: (majorTickPositions: any) => any;
+export declare const isValidPosition: (minorTickPosition: any, majorTickPositions: any, scale: any) => boolean;
+export declare const getMinorTickPositions: (majorTickPositions: Array<number>, scale: any) => number[];
+export declare const chartMinorGridlinesPlugin: {
+    id: string;
+    beforeDatasetsDraw: (chart: any) => void;
+};

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

@@ -0,0 +1,11 @@
+export declare const TextLabelPosition: {
+    TOP_LEFT: string;
+    TOP_CENTER: string;
+    TOP_RIGHT: string;
+    MIDDLE_LEFT: string;
+    MIDDLE_CENTER: string;
+    MIDDLE_RIGHT: string;
+    BOTTOM_LEFT: string;
+    BOTTOM_CENTER: string;
+    BOTTOM_RIGHT: string;
+};

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

@@ -0,0 +1,9 @@
+import { Position } from '../../../helpers/enums';
+export interface IDrawText {
+    ctx: CanvasRenderingContext2D;
+    lines: Array<string>;
+    lineHeight: number;
+    x: number;
+    y: number;
+    position: typeof Position;
+}

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

@@ -0,0 +1,12 @@
+export declare const TOGGLE_ZOOM = "TOGGLE_ZOOM";
+export declare const TOGGLE_PAN = "TOGGLE_PAN";
+export declare const TOGGLE_POINTS = "TOGGLE_POINTS";
+export declare const TOGGLE_LINE = "TOGGLE_LINE";
+export declare const TOGGLE_LEGEND = "TOGGLE_LEGEND";
+export declare const TOGGLE_ANNOTATION = "TOGGLE_ANNOTATION";
+export declare const TOGGLE_TABLE = "TOGGLE_TABLE";
+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 DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";

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

@@ -0,0 +1,18 @@
+/**
+ Initial chart state for the line chart.
+
+ @param {Object} options - The chart options.
+ @return {Object} The initial chart state.
+ */
+declare const initialState: ({ options, persistenceId }: any) => {
+    zoomEnabled: any;
+    panEnabled: any;
+    pointsEnabled: any;
+    lineEnabled: any;
+    legendEnabled: any;
+    axes: any[];
+    showAnnotationLineIndex: number[];
+    showTable: boolean;
+    enableDragPoints: any;
+};
+export default initialState;

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

@@ -0,0 +1 @@
+export declare const reducer: (state: any, action: any) => (base?: ((draft: any) => void) | undefined, ...args: unknown[]) => (draft: any) => void;

package/dist/src/components/line-chart/state/manage-state-in-local-storage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Retrieves the chart state from local storage.
+ *
+ * @param {string|''} persistenceId - The chart persistenceId.
+ * @returns {object|null} The chart state object or null if not found.
+ */
+export declare const getChartStateFromStorage: (persistenceId: string) => any;
+/**
+ * Stores the chart state in local storage.
+ *
+ * @param {object} state - The chart state object to store.
+ * @param {string|''} persistenceId - The chart persistenceId.
+ */
+export declare const storeChartStateInStorage: (state: any, persistenceId: string) => void;

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

@@ -0,0 +1,8 @@
+export interface IUseChartState {
+    chartRef: any;
+    options: any;
+    state: any;
+    generatedDatasets: Array<any>;
+    dispatch: () => void;
+    persistenceId: any;
+}

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

@@ -0,0 +1,12 @@
+import { IUseChartState } from './state.interfaces';
+/**
+ * Hook for managing the state of the chart.
+ *
+ * @param chartRef - The reference to the chart.
+ * @param options - The chart options.
+ * @param state - The chart state.
+ * @param {Array} generatedDatasets - An array of generated datasets for the chart.
+ * @param dispatch - The dispatch function for state management.
+ * @param persistenceId - The chart persistenceId.
+ */
+export declare const useChartState: ({ chartRef, options, state, generatedDatasets, dispatch, persistenceId, }: IUseChartState) => void;

package/dist/src/components/line-chart/utils/axis-formatting/axis-formatting.d.ts

@@ -0,0 +1 @@
+export declare const formatAxisLabelNumbers: (tickValue: number, ticks: Array<any>, locale?: string) => string;

package/dist/src/components/line-chart/utils/axis-scales/axis-scales.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Auto scales axis ranges (mix, max) if no explicit range is set
+ * - overrides some edge cases not handled well by default chart.js
+ * - supports optional padding when `autoAxisPadding` is set
+ * - otherwise does not set min/max (falls back to chart.js default)
+ *
+ * @function autoScale
+ * @return {object} scales
+ */
+export declare const autoScale: (options: any, state: any, generatedDatasets: any) => any;

package/dist/src/components/line-chart/utils/datalabels-alignment/get-alignment-condition.d.ts

@@ -0,0 +1,9 @@
+/** returning boolean condition depends on label position and chart area
+ *
+ * @return {object} - returning object with boolean props
+ */
+export declare const getCondition: (x: number, y: number, left: number, right: number, bottom: number) => {
+    overLeftSide: boolean;
+    overRightSide: boolean;
+    overBottomSide: boolean;
+};

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

@@ -0,0 +1,11 @@
+/** returning destructured data from context
+ *
+ * @return {object}
+ */
+export declare const getAlignmentData: (context: any) => {
+    x: any;
+    y: any;
+    left: any;
+    right: any;
+    bottom: any;
+};

package/dist/src/components/line-chart/utils/datalabels-alignment/get-datalabels-position.d.ts

@@ -0,0 +1,5 @@
+/** returning position depends on condition
+ *
+ * @return {string} - position
+ */
+export declare const getPosition: () => (context: any) => "left" | "right" | "start" | "end";

package/dist/src/components/line-chart/utils/generate-line-chart-datasets.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generates line chart datasets based on the provided datasets, state, and options.
+ *
+ * @param {Array} datasets - The initial datasets for the line chart.
+ * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
+ * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
+ * @param {Object} translations - The getTranslations object with the label property
+ * @returns {Array} - The generated line chart datasets with applied settings and configurations.
+ */
+export declare const generateLineChartDatasets: (datasets: Array<any>, state: any, options: any, { label }: any) => any[];

package/dist/src/components/line-chart/utils/get-axes-ranges-from-chart.d.ts

@@ -0,0 +1,6 @@
+export declare const getAxesRangesFromChart: (chartRef: any, axes: any) => {
+    unit?: any;
+    id: any;
+    min: any;
+    max: any;
+}[];

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

@@ -0,0 +1,17 @@
+import { ILineChartOptions } from '../line-chart.interface';
+/**
+ * adjusts the position of the label depends on chart area
+ *
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
+ * @return {object} - returning position, if label exist in datasets item
+ */
+declare const getLineChartDataLabels: (options: ILineChartOptions) => {
+    display: string;
+    align: (context: any) => "left" | "right" | "start" | "end";
+    formatter: (_value: any, context: any) => any;
+} | {
+    display: boolean;
+    align?: undefined;
+    formatter?: undefined;
+};
+export default getLineChartDataLabels;

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

@@ -0,0 +1,9 @@
+import { ILineChartOptions } from '../line-chart.interface';
+import { IInitialState } from '../../../helpers/chart-interface';
+/**
+ *
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {import('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ */
+declare const getLineChartScales: (options: ILineChartOptions, state: IInitialState) => any;
+export default getLineChartScales;

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

@@ -0,0 +1,16 @@
+import { ILineChartOptions } from '../line-chart.interface';
+/**
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
+ */
+declare const getLineChartToolTips: (options: ILineChartOptions) => {
+    enabled: boolean;
+    mode: "nearest";
+    intersect: boolean;
+    padding: number;
+    callbacks: {
+        title: (tooltipItem: any, _data: any) => string;
+        label: (tooltipItem: any) => string;
+        afterLabel: (tooltipItem: any) => string;
+    };
+};
+export default getLineChartToolTips;

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

@@ -0,0 +1,31 @@
+export declare const toNum: (value: string | number) => any;
+export declare const isLessThanMax: (value: string | number, max: string | number) => boolean;
+export declare const isGreaterThanMin: (value: string | number, min: string | number) => boolean;
+/**
+ *
+ * @param {'x'|'y'} axisType
+ * @param {number} [index] - axis index; optional, 0 by default
+ * @param {boolean} [hasMultiAxes] - optional, false by default
+ * @return {string} - e.g. x if chart has singular axes; x, x2 - in case of multiple axes
+ */
+export declare const generateAxisId: (axisType: string, index?: number, hasMultiAxes?: boolean) => string;
+/**
+ Get axis type from a key string.
+ @param {string} string - The key string to extract from.
+ @returns {string} e.g. x1 => x
+ */
+export declare const getAxisTypeFromKey: (string: string) => string;
+/**
+ * Generates a key based on an array of values. The key changes
+ * if any of the values in the array change.
+ *
+ * @param {Array} values - The array of values to base the key on.
+ * @returns {String} The key.
+ */
+export declare const generateKey: (values: Array<any>) => string;
+/**
+ * Checks if a value is a primitive value (which includes strings, numbers, booleans, and null).
+ * @param {*} value - The value to check.
+ * @returns {boolean} - Returns true if the value is a primitive value, otherwise false.
+ */
+export declare const isPrimitiveValue: (value: any) => boolean;

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

@@ -0,0 +1,7 @@
+/**
+ * Merges custom getTranslations with the default getTranslations.
+ * If a custom translation is provided for a key, it will override the default one.
+ * @param {object} translations - Custom getTranslations.
+ * @returns {object} - The resulting getTranslations object, containing both default and custom getTranslations.
+ */
+export declare const getTranslations: (translations?: any) => {};

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

@@ -0,0 +1,39 @@
+import { IPieChartProps } from './pie-chart.interface';
+export declare const getDefaultProps: (props: IPieChartProps) => {
+    testId: string | null;
+    data: import("./pie-chart.interface").IChartData;
+    options: {
+        title: string | string[];
+        chartStyling: {
+            width: string | number;
+            height: string | number;
+            maintainAspectRatio: boolean;
+            staticChartHeight: boolean;
+            performanceMode: boolean;
+        };
+        tooltip: {
+            tooltips: boolean;
+            showLabelsInTooltips: boolean;
+        };
+        graph: {
+            showDataLabels: boolean;
+            stacked: boolean;
+            cutout: string | number;
+        };
+        legend: {
+            display: boolean;
+            useDataset: boolean;
+            position: "top" | "bottom" | "right";
+            align: "start" | "center" | "end";
+        };
+        chartOptions: {
+            enableZoom: boolean;
+            enablePan: boolean;
+        };
+        interactions: {
+            onLegendClick: (legendItem: string, hidden: boolean) => any;
+            onPieHover: (evt: Event, datasetIndex: string | number, index: string | number, generatedDataset: any) => any;
+            onPieUnhover: (evt: Event) => any;
+        };
+    };
+};

package/dist/src/components/pie-chart/pie-chart-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const colors: string[];
+export declare const generateRandomColor: () => string;

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

@@ -0,0 +1,9 @@
+import { IPieChartProps } from './pie-chart.interface';
+/**
+ * this is a pie chart component
+ * @param {} props
+ * @param {import('./pie-chart.interface').IPieChartProps} IPieChartProps
+ * ./pie-chart.interface
+ */
+declare const PieChart: (props: IPieChartProps) => JSX.Element;
+export { PieChart };

package/dist/src/components/pie-chart/pie-chart.interface.d.ts

@@ -0,0 +1,54 @@
+export interface IChartInteractions {
+    onLegendClick: (legendItem: string, hidden: boolean) => any;
+    onPointHover: () => any;
+    onPointUnhover: () => any;
+    onPieHover: (evt: Event, datasetIndex: string | number, index: string | number, generatedDataset: any) => any;
+    onPieUnhover: (evt: Event) => any;
+}
+export interface IChartOptions {
+    enableZoom: boolean;
+    enablePan: boolean;
+}
+export interface IChartLegend {
+    display: boolean;
+    position: 'top' | 'bottom' | 'right';
+    align: 'start' | 'center' | 'end';
+    useDataset: boolean;
+}
+export interface IChartGraph {
+    showDataLabels: boolean;
+    stacked: boolean;
+    cutout: number | string;
+}
+export interface IChartTooltip {
+    tooltips: boolean;
+    showLabelsInTooltips: boolean;
+}
+export interface IChartStyling {
+    width: number | string;
+    height: number | string;
+    maintainAspectRatio: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+}
+export interface IOptions {
+    title: string | string[];
+    chartStyling: IChartStyling;
+    tooltip: IChartTooltip;
+    graph: IChartGraph;
+    legend: IChartLegend;
+    chartOptions: IChartOptions;
+    interactions: IChartInteractions;
+}
+export interface IChartData {
+    labels: string;
+    datasets: any[];
+}
+export interface IChartProps {
+    testId: string | null;
+    data: IChartData;
+    options: IOptions;
+}
+export interface IPieChartProps {
+    chart: IChartProps;
+}

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

@@ -0,0 +1,7 @@
+import { IScatterChartProps } from './scatter-chart.intefrace';
+/**
+ *
+ * @param {import('./scatter-chart.intefrace').IScatterChartProps} props
+ */
+declare const ScatterChart: (props: IScatterChartProps) => JSX.Element;
+export default ScatterChart;

package/dist/src/components/scatter-chart/scatter-chart.intefrace.d.ts

@@ -0,0 +1,28 @@
+import { IChartPlugins } from '../../helpers/chart-interface';
+export interface IScatterChartOptions {
+    responsive: boolean;
+    maintainAspectRatio: boolean;
+    plugins: IChartPlugins;
+}
+export interface IScatterChartPoint {
+    x: number | string;
+    y: number | string;
+    label?: string;
+}
+export interface IScatterChartDataset {
+    label: string;
+    data: IScatterChartPoint[];
+    borderColor: string;
+    backgroundColor: string;
+    showLine: Boolean;
+}
+export interface IScatterChartData {
+    testId: string | null;
+    data: {
+        datasets: IScatterChartDataset[];
+    };
+    options: IScatterChartOptions;
+}
+export interface IScatterChartProps {
+    chart: IScatterChartData;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Chart border plugin config
+ */
+export declare const chartAreaBorderPlugin: {
+    id: string;
+    beforeDraw(chart: any, args: any, options: any): void;
+};

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

@@ -0,0 +1,32 @@
+export declare const BORDER_WIDTH: {
+    INITIAL: number;
+    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 = 13;
+export declare const DEFAULT_FONT_FAMILY = "\"Lato\", sans-serif";
+export declare const DEFAULT_COLOR = "rgba(0,0,0,.87)";
+export declare const LEGEND_LABEL_BOX_SIZE = 6;
+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;

package/dist/src/helpers/chart-interface.d.ts

@@ -0,0 +1,85 @@
+import { Plugin } from 'chart.js';
+export interface IChartDraggableData {
+    enableDragData: boolean;
+    showTooltip: boolean;
+    roundPoints: boolean;
+    dragX: boolean;
+    dragY: boolean;
+    onDragStart: () => any;
+    onDrag: () => any;
+    onDragEnd: () => any;
+}
+export interface IChartAnnotationsData {
+    adjustScaleRange: boolean;
+    annotationAxis: 'x' | 'y';
+    color: string;
+    endValue: number;
+    label: string;
+    type: string;
+    value: number;
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+}
+export interface ILabelAnnotation {
+    showLabel: boolean;
+    text: string | string[];
+    position?: string;
+    fontSize?: number;
+    xOffset?: number;
+    yOffset?: number;
+    maxWidth?: number;
+    lineHeight?: number;
+}
+export interface IChartAnnotations {
+    showAnnotations: boolean;
+    controlAnnotation: boolean;
+    annotationsData: IChartAnnotationsData[];
+    labelAnnotation: ILabelAnnotation;
+}
+export interface IChartStyling {
+    width: number | string;
+    height: number | string;
+    maintainAspectRatio: boolean;
+    squareAspectRatio?: boolean;
+    staticChartHeight: boolean;
+    performanceMode: boolean;
+    layoutPadding: any;
+}
+export interface ICustomLegend {
+    customLegendPlugin: Plugin | null;
+    customLegendContainerID: string;
+}
+export interface IChartLegend {
+    display: boolean;
+    position: 'top' | 'bottom' | 'right';
+    align: 'start' | 'center' | 'end';
+    customLegend?: ICustomLegend;
+    usePointStyle: boolean;
+}
+export interface IChartInteractions {
+    onLegendClick: () => any;
+    onPointHover: () => any;
+    onPointUnhover: () => any;
+    onAnimationComplete: () => any;
+}
+export interface IInitialState {
+    zoomEnabled?: boolean;
+    panEnabled?: boolean;
+    pointsEnabled?: boolean;
+    lineEnabled?: boolean;
+    legendEnabled?: boolean;
+    axes?: any;
+    showAnnotationLineIndex: [];
+    enableDragData?: boolean;
+}
+export interface IChartPlugins {
+    legend: {
+        position: 'top' | 'right' | 'bottom' | 'left';
+    };
+    title: {
+        display: boolean;
+        text: string;
+    };
+}