@oliasoft-open-source/charts-library 4.0.4 → 4.1.0-beta-1

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

@@ -1,3 +1,3 @@
 import { IBarChartProps } from './bar-chart.interface';
-declare const BarChart: (props: IBarChartProps) => import("react/jsx-runtime").JSX.Element;
-export { BarChart };
+declare const BarChartWithLegend: (props: IBarChartProps) => import("react/jsx-runtime").JSX.Element;
+export { BarChartWithLegend as BarChart };

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

@@ -1,5 +1,7 @@
-import { ICommonAdditionalAxesOptions, ICommonAnnotations, ICommonAnnotationsData, ICommonAxis, ICommonChartOptions, ICommonCustomLegend, ICommonData, ICommonDataset, ICommonDragData, ICommonGraph, ICommonInteractions, ICommonLegend, ICommonOptions, ICommonScales, ICommonStyling, ICommonTooltip } from '../common/common.interface';
+import { ChartDataset } from 'chart.js';
+import { ICommonAdditionalAxesOptions, ICommonAnnotations, ICommonAnnotationsData, ICommonAxis, ICommonChartOptions, ICommonCustomLegend, ICommonData, ICommonDataset, ICommonDataValue, ICommonDragData, ICommonGraph, ICommonInteractions, ICommonLegend, ICommonOptions, ICommonScales, ICommonStyling, ICommonTooltip } from '../common/common.interface';
 import { IChartGraph } from '../common/helpers/chart-utils';
+import { ChartType } from '../common/helpers/enums';
 export interface IBarStyling extends ICommonStyling {
     squareAspectRatio?: boolean;
     layoutPadding?: string | number | {
@@ -37,7 +39,7 @@ export interface IBarChartDataset extends ICommonDataset {
     yAxisID?: string;
     hidden?: boolean;
     displayGroup?: string | number;
-    type?: 'bar';
+    type?: ChartType.Bar;
 }
 export interface IBarChartBaseData {
     labels: string[];
@@ -74,3 +76,15 @@ export interface IBarDefaultProps {
         dragData: ICommonDragData;
     };
 }
+export interface IGenerateBarChartDataset extends ChartDataset<'bar', ICommonDataValue[]> {
+    borderColor: string;
+    backgroundColor: string | string[];
+    borderDash?: number[];
+    borderWidth?: number;
+    annotationType?: string;
+    hideLegend?: boolean;
+    displayGroup?: boolean;
+    isAnnotation?: boolean;
+    annotationIndex?: number;
+}
+export type TGenerateBarChartDatasets = IGenerateBarChartDataset[];

package/dist/src/components/bar-chart/utils/use-bar-chart-config.d.ts

@@ -1,24 +1,13 @@
-import { MutableRefObject } from 'react';
-import { ActiveElement, Chart, ChartDataset, ChartEvent, LegendItem } from 'chart.js';
-import { IBarChartDataset, IBarDefaultProps, IBarOptions } from '../bar-chart.interface';
-import { ICommonDataValue, ICommonHoveredItems } from '../../common/common.interface';
+import { RefObject } from 'react';
+import { ActiveElement, Chart, ChartEvent } from 'chart.js';
+import { IBarDefaultProps, IBarOptions, TGenerateBarChartDatasets } from '../bar-chart.interface';
+import { ICommonHoveredItems } from '../../common/common.interface';
 export interface IGenerateBarChartDatasetsProps {
-    datasets: IBarChartDataset[];
+    datasets: TGenerateBarChartDatasets;
     options: IBarOptions;
 }
-export interface IGenerateBarChartDatasets extends ChartDataset<'bar', ICommonDataValue[]> {
-    borderWidth: number;
-    borderColor: string | string[];
-    backgroundColor: string | string[];
-}
-export interface IUseBarChartConfigProps {
-    chart: IBarDefaultProps;
-    chartRef: MutableRefObject<Chart | null>;
-}
-export declare const useBarChartConfig: ({ chart, chartRef, }: IUseBarChartConfigProps) => {
-    generatedDatasets: IGenerateBarChartDatasets[];
-    legendClick: (_e: ChartEvent, legendItem: LegendItem) => void;
+export declare const useBarChartConfig: (chartRef: RefObject<Chart>, chart: IBarDefaultProps) => {
+    generatedDatasets: TGenerateBarChartDatasets;
     onClick: (_evt: ChartEvent, _elements: ActiveElement[], chartInstance: Chart) => void;
     onHover: (evt: ChartEvent, hoveredItems: ICommonHoveredItems[]) => void;
-    visibleAnnotationsIndexes: number[];
 };

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

@@ -1,4 +1,5 @@
 import { ChartEvent, ChartTypeRegistry, LinearScaleOptions, Plugin } from 'chart.js';
+import { LabelOptions } from 'chartjs-plugin-annotation';
 import { AlignOptions, Position } from './helpers/enums';
 export type TAxisPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface ICommonDataValue {
@@ -17,7 +18,26 @@ export interface ICommonScales extends Partial<Record<string, LinearScaleOptions
     x: LinearScaleOptions;
     y: LinearScaleOptions;
 }
+export interface ICommonAnnotationElement {
+    display: boolean;
+    annotationIndex: number;
+    label: {
+        options: LabelOptions;
+    };
+    options: {
+        scaleID?: string;
+        borderColor?: string;
+        borderWidth?: number;
+        label?: {
+            content?: string;
+            position?: string;
+            enabled?: boolean;
+            xAdjust?: number;
+        };
+    };
+}
 export interface ICommonAnnotationsData {
+    display?: boolean;
     adjustScaleRange: boolean;
     annotationAxis: 'x' | 'y';
     color: string;
@@ -110,6 +130,7 @@ export interface ICommonOptions {
     chartOptions?: ICommonChartOptions;
     interactions?: ICommonInteractions;
     dragData?: ICommonDragData;
+    annotations?: ICommonAnnotations;
 }
 export interface ICommonData {
     testId?: string;

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

@@ -0,0 +1,5 @@
+export declare enum ChartType {
+    LINE = "line",
+    BAR = "bar",
+    PIE = "pie"
+}

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

@@ -83,7 +83,7 @@ export declare const getLegend: (options: IOptions, clickHandler: (_: UnusedPara
 };
 export declare const afterLabelCallback: (tooltipItem: Record<string, any>) => string;
 export declare const getTooltipLabel: (tooltipItem: Record<string, any>, showLabelsInTooltips: boolean) => string;
-export declare const getChartFileName: (axes: IAxis[]) => string;
+export declare const getChartFileName: (axes?: IAxis[]) => string;
 export declare const setDefaultTheme: () => void;
 export declare const isNilOrEmpty: <T>(value: T | null | undefined) => boolean;
 export {};

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

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+import { Chart } from 'chart.js';
+import { IState } from '../../line-chart/state/state.interfaces';
+export declare const downloadPgn: (chartRef: RefObject<Chart>, state?: IState) => void;

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

@@ -1,22 +1,54 @@
-interface IAnnotationData {
-    annotationAxis?: string;
-    color?: string;
-    type?: string;
-    adjustScaleRange?: boolean;
-    label?: string;
-    value?: number;
+import { Chart } from 'chart.js';
+import { Position } from './enums';
+import { ICommonAnnotationElement, ICommonAnnotationsData } from '../common.interface';
+export interface IGetAnnotationsProps {
+    showAnnotations: boolean;
+    annotationsData: ICommonAnnotationsData[];
+    visibleAnnotationsIndexes: number[];
 }
-interface IAnnotations {
-    annotationsData?: IAnnotationData[];
-    showAnnotations?: boolean;
-}
-interface IOptions {
-    annotations?: IAnnotations;
-}
-interface IState {
-    showAnnotationLineIndex?: number[];
-}
-declare const getAnnotation: (options: IOptions, state: IState) => {
-    annotations: IAnnotationData | undefined;
-};
+declare const getAnnotation: ({ showAnnotations, annotationsData, visibleAnnotationsIndexes, }: IGetAnnotationsProps) => ICommonAnnotationElement[] | ({
+    display: boolean;
+    annotationIndex: number;
+    id: string;
+    scaleID: "x" | "y";
+    label: {
+        backgroundColor: string;
+        content: string;
+        display: boolean;
+        position: Position;
+        font?: undefined;
+    } | {
+        content: string;
+        display: boolean;
+        font: {
+            weight: string;
+        };
+        backgroundColor?: undefined;
+        position?: undefined;
+    };
+    backgroundColor: string;
+    borderColor: string;
+    borderWidth: number;
+    borderDash: number[];
+    type: string;
+    adjustScaleRange: boolean;
+    enter: ({ element, }: {
+        element: ICommonAnnotationElement;
+    }, { chart, }: {
+        chart: Chart;
+    }) => void;
+    leave: ({ element, }: {
+        element: ICommonAnnotationElement;
+    }, { chart, }: {
+        chart: Chart;
+    }) => void;
+    annotationAxis: "x" | "y";
+    color: string;
+    endValue: number;
+    value: number;
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+} | undefined)[];
 export default getAnnotation;

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

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

package/dist/src/components/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/src/components/{line-chart → common}/hooks/use-legend-state.d.ts

@@ -1,13 +1,9 @@
-import { Dispatch, RefObject } from 'react';
+import { RefObject } from 'react';
 import { Chart, LegendItem } from 'chart.js';
-import { UnusedParameter } from '../../common/common.interface';
-import { ILineChartOptions } from '../line-chart.interface';
-import { IState } from '../state/state.interfaces';
+import { UnusedParameter } from '../common.interface';
 export interface IUseLegendStateProps {
     chartRef: RefObject<Chart>;
-    options: ILineChartOptions;
-    state: IState;
-    dispatch: Dispatch<any>;
+    options: any;
 }
 export type THiddenState = {
     label: string;
@@ -17,7 +13,7 @@ export type THiddenState = {
 /**
  * Custom hook to manage legend state.
  */
-export declare const useLegendState: ({ chartRef, options, state, dispatch, }: IUseLegendStateProps) => {
+export declare const useLegendState: ({ chartRef, options }: IUseLegendStateProps) => {
     legendClick: (_: UnusedParameter, legendItem: LegendItem) => void;
     hiddenStates: THiddenState[];
     legend: {
@@ -32,10 +28,8 @@ export declare const useLegendState: ({ chartRef, options, state, dispatch, }: I
         onClick: (_: any, legendItem: LegendItem) => void;
     };
     customLegendPlugin: {
-        htmlLegend: {
-            containerID: string;
-        } | null | undefined;
+        htmlLegend: any;
     };
     upsertHiddenState: ({ label, datasetIndex, hidden }: THiddenState) => void;
-    clearNonExistentDatasets: (datasets: Record<string, any>[]) => void;
+    visibleAnnotationsIndexes: number[];
 };

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useLegend: () => {
+    state: import("../legend-component/state/legend-state-reducer").ILegendState;
+    dispatch: import("react").Dispatch<any>;
+};

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

@@ -0,0 +1,46 @@
+import { MouseEventHandler, RefObject } from 'react';
+import { Chart, ChartArea } from 'chart.js';
+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;
+export type TLegendDatasets = TGeneratedLineChartDatasets | TGenerateBarChartDatasets | TGeneratedPieChartDatasets;
+export type TChartsOption = ILineChartOptions | IBarOptions | IPieOptions;
+export interface ILegendItem {
+    hidden: boolean;
+    dataset: TLegendDataset;
+    handleClick: MouseEventHandler<HTMLDivElement>;
+    chartType: ChartType;
+}
+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/src/components/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/src/components/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, }: ILegendItem) => import("react/jsx-runtime").JSX.Element;
+export default LegendItem;

package/dist/src/components/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/src/components/common/legend-component/state/legend-action-types.d.ts

@@ -0,0 +1,3 @@
+export declare const UPSERT_HIDDEN_STATE = "UPSERT_HIDDEN_STATE";
+export declare const CLEAR_NON_EXISTENT_DATASETS = "CLEAR_NON_EXISTENT_DATASETS";
+export declare const TOGGLE_ANNOTATION_VISIBILITY = "TOGGLE_ANNOTATION_VISIBILITY";

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

@@ -0,0 +1,12 @@
+import 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/src/components/common/legend-component/state/legend-state-reducer.d.ts

@@ -0,0 +1,26 @@
+import { CLEAR_NON_EXISTENT_DATASETS, TOGGLE_ANNOTATION_VISIBILITY, UPSERT_HIDDEN_STATE } from './legend-action-types';
+import { ICommonAnnotationElement } from '../../common.interface';
+import { THiddenState } from '../../hooks/use-legend-state';
+export interface ILegendState {
+    hiddenStates: THiddenState[];
+    annotation: ICommonAnnotationElement[];
+    visibleAnnotationsIndexes: number[];
+}
+export type TLegendAction = {
+    type: typeof UPSERT_HIDDEN_STATE;
+    payload: {
+        label: string;
+        hidden: boolean;
+        datasetIndex: number;
+    };
+} | {
+    type: typeof CLEAR_NON_EXISTENT_DATASETS;
+    payload: Array<{
+        label: string;
+    }>;
+} | {
+    type: typeof TOGGLE_ANNOTATION_VISIBILITY;
+    payload: number;
+};
+export declare const legendInitialState: ILegendState;
+export declare const legendReducer: (state: ILegendState, action: TLegendAction) => ILegendState;

package/dist/src/components/{line-chart/legend → common/legend-component/utils}/create-style-object.d.ts

@@ -1,4 +1,5 @@
-import { Position } from '../../common/helpers/enums';
+import { Position } from '../../helpers/enums';
+export declare const LEGEND_MARGIN = 4;
 interface IChartArea {
     top: number;
     left: number;
@@ -22,5 +23,5 @@ interface ILegendStyle {
 /**
  * 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) => ILegendStyle;
+export declare const createLegendStyle: (legendPosition: Position, chart: IChart | null) => ILegendStyle;
 export {};

package/dist/src/components/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/src/components/line-chart/line-chart.d.ts

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

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

@@ -13,6 +13,7 @@ export interface ILineChartGraph {
 }
 export interface ILineChartTooltip extends ICommonTooltip {
     hideSimulationName: boolean;
+    scientificNotation: boolean;
 }
 export interface ILineChartRange {
     min: number;
@@ -137,6 +138,7 @@ export interface IGeneratedLineChartDataset {
     annotationBorderWidth?: number;
     displayGroup?: boolean;
     hideLegend?: boolean;
+    pointStyle?: string;
     xAxisID?: string;
     yAxisID?: string;
 }

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

@@ -1,8 +1,3 @@
 import { IPieChartProps } from './pie-chart.interface';
-/**
- * this is a pie chart component
- * @param {props: IPieChartProps} IPieChartProps
- * ./pie-chart.interface
- */
-declare const PieChart: (props: IPieChartProps) => import("react/jsx-runtime").JSX.Element;
-export { PieChart };
+declare const PieChartWithLegend: (props: IPieChartProps) => import("react/jsx-runtime").JSX.Element;
+export { PieChartWithLegend as PieChart };

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

@@ -59,5 +59,12 @@ export interface IGeneratedPieChartDataset {
     backgroundColor: string[];
     borderColor: string[];
     borderWidth: number;
+    borderDash: number[];
+    annotationType?: string;
     data: IPieDataValue[];
+    hideLegend?: boolean;
+    displayGroup?: boolean;
+    isAnnotation?: boolean;
+    annotationIndex?: number;
 }
+export type TGeneratedPieChartDatasets = IGeneratedPieChartDataset[];

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

@@ -1,12 +1,12 @@
 import { ActiveElement, Chart, Chart as ChartJS, ChartEvent, LegendItem, Plugin, TooltipItem } from 'chart.js';
-import { IGeneratedPieChartDataset, IPieDataValue, IPiesDataLabelsOptions } from './pie-chart.interface';
+import { IPieDataValue, IPiesDataLabelsOptions } from './pie-chart.interface';
 import { IPieChartDefaultProps } from './pie-chart-defalut-props.interface';
 import { UnusedParameter } from '../common/common.interface';
 interface ILegendPlugin extends Plugin {
     chart?: Chart;
 }
 export declare const usePieChartConfig: (chart: IPieChartDefaultProps) => {
-    generatedDatasets: IGeneratedPieChartDataset[] | {
+    generatedDatasets: {
         borderWidth: number;
         borderColor: string | string[];
         backgroundColor: string | string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "4.0.4",
+  "version": "4.1.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": {
@@ -110,8 +110,8 @@
     "@oliasoft-open-source/units": "^3.4.2",
     "classnames": "^2.3.2",
     "immer": "^10.0.2",
+    "lodash": "^4.17.21",
     "react": "^17",
-    "react-dom": "^17",
-    "lodash": "^4.17.21"
+    "react-dom": "^17"
   }
 }

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

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

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

@@ -1 +0,0 @@
-export declare const LEGEND_MARGIN = 4;

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

@@ -1,39 +0,0 @@
-import { Dispatch, MouseEventHandler, RefObject } from 'react';
-import { Chart, ChartArea } from 'chart.js';
-import { IState } from '../state/state.interfaces';
-import { ILineChartDataset, ILineChartOptions, TGeneratedLineChartDatasets } from '../line-chart.interface';
-import { Position } from '../../common/helpers/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 interface ILegendItem {
-    hidden: boolean;
-    dataset: ILineChartDataset;
-    handleClick: MouseEventHandler<HTMLDivElement>;
-}
-export interface ILegend {
-    chartRef: RefObject<Chart>;
-    state: IState;
-    options: ILineChartOptions;
-    dispatch: Dispatch<any>;
-    generatedDatasets: TGeneratedLineChartDatasets;
-    translations?: Record<string, string>;
-}
-export interface ILegendPanel extends ILegend {
-    legendPosition: Position;
-    isDragging: boolean;
-}

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

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

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

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