@oliasoft-open-source/charts-library 3.5.3 → 3.5.4-beta-2

package/dist/index.js

@@ -22275,9 +22275,12 @@ const initialState = ({ options, persistenceId }) => {
   } = options;
   const getStateAxesByType = (axisType, customAxesRange2) => {
     var _a2, _b2, _c2, _d2, _e2;
+    console.log("axisType", axisType);
+    console.log("axes", axes);
     if (!axes[axisType]) {
       return [];
     }
+    console.log("getStateAxesByType");
     if (((_a2 = axes[axisType]) == null ? void 0 : _a2.length) > 1) {
       return axes[axisType].map(
         (axisObj, index2) => {
@@ -22300,6 +22303,7 @@ const initialState = ({ options, persistenceId }) => {
       const customMin = (_b2 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _b2.min;
       const customMax = (_c2 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _c2.max;
       const unit = (_e2 = (_d2 = axes == null ? void 0 : axes[id]) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.unit;
+      console.log("id", id);
       return [
         {
           id,
@@ -22314,6 +22318,7 @@ const initialState = ({ options, persistenceId }) => {
   const xStateAxes = getStateAxesByType(AxisType.X, customAxesRange);
   const yStateAxes = getStateAxesByType(AxisType.Y, customAxesRange);
   const stateAxes = [...xStateAxes, ...yStateAxes];
+  console.log("stateAxes", stateAxes);
   const {
     zoomEnabled,
     panEnabled,
@@ -23711,9 +23716,9 @@ const useChartFunctions = ({
   const onResetAxes = useCallback(() => {
     dispatch({ type: RESET_AXES_RANGES });
   }, []);
-  const onUpdateAxes = useCallback(({ axes: axes2 }) => {
+  const onUpdateAxes = ({ axes: axes2 }) => {
     dispatch({ type: UPDATE_AXES_RANGES, payload: { axes: axes2 } });
-  }, []);
+  };
   return {
     legendClick,
     resetZoom: resetZoom2,
@@ -24539,122 +24544,116 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
-const defaultAxes$1 = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [],
-  y: (axes == null ? void 0 : axes.y) || []
-});
-const defaultAdditionalAxesOptions$1 = (options) => ({
-  chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
-  reverse: (options == null ? void 0 : options.reverse) || false,
-  beginAtZero: (options == null ? void 0 : options.beginAtZero) ?? false,
-  stepSize: options == null ? void 0 : options.stepSize,
-  suggestedMin: options == null ? void 0 : options.suggestedMin,
-  suggestedMax: options == null ? void 0 : options.suggestedMax,
-  range: (options == null ? void 0 : options.range) || null,
-  autoAxisPadding: (options == null ? void 0 : options.autoAxisPadding) ?? false
-});
-const defaultChartStyling$2 = (options) => ({
-  width: options == null ? void 0 : options.width,
-  height: options == null ? void 0 : options.height,
-  maintainAspectRatio: (options == null ? void 0 : options.maintainAspectRatio) ?? false,
-  staticChartHeight: (options == null ? void 0 : options.staticChartHeight) ?? false,
-  performanceMode: (options == null ? void 0 : options.performanceMode) ?? true,
-  squareAspectRatio: options == null ? void 0 : options.squareAspectRatio,
-  layoutPadding: (options == null ? void 0 : options.layoutPadding) || {
-    top: 0,
-    bottom: 20,
-    left: 0,
-    right: 0
-  }
-});
-const defaultTooltip$2 = (tooltip) => ({
-  tooltips: (tooltip == null ? void 0 : tooltip.tooltips) ?? true,
-  showLabelsInTooltips: (tooltip == null ? void 0 : tooltip.showLabelsInTooltips) ?? false,
-  hideSimulationName: (tooltip == null ? void 0 : tooltip.hideSimulationName) ?? false
-});
-const defaultGraph$2 = (graph) => ({
-  lineTension: (graph == null ? void 0 : graph.lineTension) ?? 0.01,
-  spanGaps: (graph == null ? void 0 : graph.spanGaps) ?? false,
-  showDataLabels: (graph == null ? void 0 : graph.showDataLabels) ?? false,
-  showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
-});
-const defaultAnnotations$1 = (annotations) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
-  return {
-    labelAnnotation: {
-      showLabel: ((_a2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
-      text: ((_b2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
-      position: ((_c2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
-      fontSize: ((_d2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
-      xOffset: ((_e2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
-      yOffset: ((_f2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
-      maxWidth: ((_g2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
-      lineHeight: ((_h2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
-    },
-    showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
-    controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
-    annotationsData: (annotations == null ? void 0 : annotations.annotationsData) ?? []
-  };
-};
-const defaultLegend$2 = (legend2) => ({
-  display: (legend2 == null ? void 0 : legend2.display) ?? true,
-  position: (legend2 == null ? void 0 : legend2.position) ?? Position.BottomLeft,
-  align: (legend2 == null ? void 0 : legend2.align) ?? AlignOptions.Center,
-  customLegend: (legend2 == null ? void 0 : legend2.customLegend) ?? {
-    customLegendPlugin: null,
-    customLegendContainerID: ""
-  },
-  usePointStyle: (legend2 == null ? void 0 : legend2.usePointStyle) ?? true
-});
-const defaultChartOptions$2 = (options) => ({
-  showPoints: (options == null ? void 0 : options.showPoints) ?? true,
-  enableZoom: (options == null ? void 0 : options.enableZoom) ?? true,
-  enablePan: (options == null ? void 0 : options.enablePan) ?? false,
-  showLine: (options == null ? void 0 : options.showLine) ?? true,
-  closeOnOutsideClick: (options == null ? void 0 : options.closeOnOutsideClick) ?? false
-});
-const defaultInteractions$2 = (interactions) => ({
-  onLegendClick: interactions == null ? void 0 : interactions.onLegendClick,
-  onHover: interactions == null ? void 0 : interactions.onHover,
-  onUnhover: interactions == null ? void 0 : interactions.onUnhover,
-  onAnimationComplete: interactions == null ? void 0 : interactions.onAnimationComplete
-});
-const defaultDragData$1 = (dragData) => ({
-  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) ?? false,
-  showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
-  roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
-  dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
-  dragY: (dragData == null ? void 0 : dragData.dragY) ?? true,
-  onDragStart: dragData == null ? void 0 : dragData.onDragStart,
-  onDrag: dragData == null ? void 0 : dragData.onDrag,
-  onDragEnd: dragData == null ? void 0 : dragData.onDragEnd
-});
 const getDefaultProps$2 = (props) => {
-  const chart2 = (props == null ? void 0 : props.chart) || {};
-  const options = (chart2 == null ? void 0 : chart2.options) || {};
-  return {
-    persistenceId: (chart2 == null ? void 0 : chart2.persistenceId) ?? "",
-    controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
-    data: chart2 == null ? void 0 : chart2.data,
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
+  props.chart.options = props.chart.options || {};
+  props.chart.options.axes = props.chart.options.axes || {};
+  props.chart.options.additionalAxesOptions = props.chart.options.additionalAxesOptions || {};
+  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
+  props.chart.options.tooltip = props.chart.options.tooltip || {};
+  props.chart.options.graph = props.chart.options.graph || {};
+  props.chart.options.annotations = props.chart.options.annotations || {};
+  props.chart.options.legend = props.chart.options.legend || {};
+  props.chart.options.legend.customLegend = props.chart.options.legend.customLegend || { customLegendPlugin: null, customLegendContainerID: "" };
+  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
+  props.chart.options.interactions = props.chart.options.interactions || {};
+  props.chart.options.dragData = props.chart.options.dragData || {};
+  const chart2 = {
+    persistenceId: props.chart.persistenceId ?? "",
+    controlsPortalId: props.chart.controlsPortalId ?? null,
+    testId: props.chart.testId ?? null,
+    data: props.chart.data,
     options: {
-      title: (options == null ? void 0 : options.title) ?? "",
-      scales: (options == null ? void 0 : options.scales) ?? {},
-      axes: defaultAxes$1(options == null ? void 0 : options.axes),
-      additionalAxesOptions: defaultAdditionalAxesOptions$1(
-        options == null ? void 0 : options.additionalAxesOptions
-      ),
-      chartStyling: defaultChartStyling$2(options == null ? void 0 : options.chartStyling),
-      tooltip: defaultTooltip$2(options == null ? void 0 : options.tooltip),
-      graph: defaultGraph$2(options == null ? void 0 : options.graph),
-      annotations: defaultAnnotations$1(options == null ? void 0 : options.annotations),
-      legend: defaultLegend$2(options == null ? void 0 : options.legend),
-      chartOptions: defaultChartOptions$2(options == null ? void 0 : options.chartOptions),
-      interactions: defaultInteractions$2(options == null ? void 0 : options.interactions),
-      dragData: defaultDragData$1(options == null ? void 0 : options.dragData),
-      depthType: (options == null ? void 0 : options.depthType) ?? {}
+      title: props.chart.options.title || "",
+      scales: props.chart.options.scales || {},
+      axes: {
+        x: props.chart.options.axes.x || [{}],
+        y: props.chart.options.axes.y || [{}]
+      },
+      additionalAxesOptions: {
+        chartScaleType: props.chart.options.additionalAxesOptions.chartScaleType || "linear",
+        reverse: props.chart.options.additionalAxesOptions.reverse || false,
+        beginAtZero: props.chart.options.additionalAxesOptions.beginAtZero || false,
+        stepSize: props.chart.options.additionalAxesOptions.stepSize,
+        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
+        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
+        range: props.chart.options.additionalAxesOptions.range,
+        autoAxisPadding: props.chart.options.additionalAxesOptions.autoAxisPadding ?? false
+      },
+      chartStyling: {
+        width: props.chart.options.chartStyling.width,
+        height: props.chart.options.chartStyling.height,
+        maintainAspectRatio: props.chart.options.chartStyling.maintainAspectRatio || false,
+        staticChartHeight: props.chart.options.chartStyling.staticChartHeight || false,
+        performanceMode: props.chart.options.chartStyling.performanceMode ?? true,
+        squareAspectRatio: props.chart.options.chartStyling.squareAspectRatio || false,
+        layoutPadding: props.chart.options.chartStyling.layoutPadding || {
+          top: 0,
+          bottom: 20,
+          left: 0,
+          right: 0
+        }
+      },
+      tooltip: {
+        tooltips: props.chart.options.tooltip.tooltips ?? true,
+        showLabelsInTooltips: props.chart.options.tooltip.showLabelsInTooltips || false,
+        hideSimulationName: props.chart.options.tooltip.hideSimulationName || false
+      },
+      graph: {
+        lineTension: props.chart.options.graph.lineTension || 0.01,
+        spanGaps: props.chart.options.graph.spanGaps || false,
+        showDataLabels: props.chart.options.graph.showDataLabels || false,
+        showMinorGridlines: props.chart.options.graph.showMinorGridlines || false
+      },
+      annotations: {
+        labelAnnotation: {
+          showLabel: ((_a2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
+          text: ((_b2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
+          position: ((_c2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
+          fontSize: ((_d2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
+          xOffset: ((_e2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
+          yOffset: ((_f2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
+          maxWidth: ((_g2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
+          lineHeight: ((_h2 = props.chart.options.annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
+        },
+        showAnnotations: props.chart.options.annotations.showAnnotations ?? false,
+        controlAnnotation: props.chart.options.annotations.controlAnnotation || false,
+        annotationsData: props.chart.options.annotations.annotationsData || []
+      },
+      legend: {
+        display: props.chart.options.legend.display ?? true,
+        position: props.chart.options.legend.position || "bottom-left",
+        align: props.chart.options.legend.align || "center",
+        customLegend: props.chart.options.legend.customLegend,
+        usePointStyle: props.chart.options.legend.usePointStyle ?? true
+      },
+      chartOptions: {
+        showPoints: props.chart.options.chartOptions.showPoints ?? true,
+        enableZoom: props.chart.options.chartOptions.enableZoom || true,
+        enablePan: props.chart.options.chartOptions.enablePan || false,
+        showLine: props.chart.options.chartOptions.showLine ?? true,
+        closeOnOutsideClick: props.chart.options.chartOptions.closeOnOutsideClick || false
+      },
+      interactions: {
+        onLegendClick: props.chart.options.interactions.onLegendClick,
+        onPointHover: (_i2 = props.chart.options.interactions) == null ? void 0 : _i2.onPointHover,
+        onPointUnhover: (_j2 = props.chart.options.interactions) == null ? void 0 : _j2.onPointUnhover,
+        onAnimationComplete: props.chart.options.interactions.onAnimationComplete
+      },
+      depthType: props.chart.options.depthType,
+      dragData: {
+        enableDragData: props.chart.options.dragData.enableDragData ?? false,
+        showTooltip: props.chart.options.dragData.showTooltip ?? true,
+        roundPoints: props.chart.options.dragData.roundPoints ?? true,
+        dragX: props.chart.options.dragData.dragX ?? true,
+        dragY: props.chart.options.dragData.dragY ?? true,
+        onDragStart: props.chart.options.dragData.onDragStart,
+        onDrag: props.chart.options.dragData.onDrag,
+        onDragEnd: props.chart.options.dragData.onDragEnd
+      }
     }
   };
+  return chart2;
 };
 const DEFAULT_POINT_RADIUS = 2;
 const DEFAULT_HOVER_RADIUS = 5;
@@ -25265,7 +25264,7 @@ const useChartOptions = ({
   );
   const scales = useMemo(
     () => autoScale(options, state, generatedDatasets, chartRef),
-    [options, state, generatedDatasets]
+    [options, state, generatedDatasets, chartRef]
   );
   const dragData = useMemo(
     () => enableDragPoints && getDraggableData(options),
@@ -25348,7 +25347,7 @@ const useChartOptions = ({
       plugins,
       events: Object.values(Events)
     }),
-    [state, options]
+    [state, options, chartRef]
   );
 };
 const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
@@ -25423,25 +25422,31 @@ const useStoreChartStateInStorage = (memoState, persistenceId) => {
   ]);
 };
 const useUpdateAxesRanges = (range, dispatch) => {
-  const prevAxes = useRef(null);
-  const axes = range && isRangeValid(range) ? Object.entries(range).map(([key, { min, max }]) => ({
-    id: key,
-    min: min ?? 0,
-    max: max ?? 0
-  })) : null;
-  if (!isEqual(axes, prevAxes.current)) {
-    dispatch({
-      type: UPDATE_AXES_RANGES,
-      payload: { axes }
-    });
-    prevAxes.current = axes;
-  }
+  const prevRange = useRef();
+  const updateAxesRanges = useCallback(() => {
+    if (range && isRangeValid(range) && !isEqual(range, prevRange.current)) {
+      const axes = Object.entries(range).map(([key, { min, max }]) => ({
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0
+      }));
+      dispatch({
+        type: UPDATE_AXES_RANGES,
+        payload: { axes }
+      });
+      prevRange.current = range;
+    }
+  }, [range]);
+  useEffect(() => {
+    updateAxesRanges();
+  }, [updateAxesRanges]);
 };
 const useSaveInitialAxesRanges = (chartRef, axes, generatedDatasets, dispatch) => {
   const prevGeneratedDatasets = useRef();
   const saveInitialAxesRanges = useCallback(() => {
     if (chartRef && !isEqual(generatedDatasets, prevGeneratedDatasets.current)) {
       const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
+      console.log("initialAxesRanges", initialAxesRanges);
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
         payload: { initialAxesRanges }
@@ -25464,7 +25469,7 @@ const useChartState = ({
   const memoState = useMemo(() => state, [state]);
   const memoOptions = useMemo(() => options, [options]);
   const {
-    additionalAxesOptions: { range = null },
+    additionalAxesOptions: { range = void 0 },
     axes
   } = memoOptions;
   useStoreChartStateInStorage(memoState, persistenceId);
@@ -25724,6 +25729,8 @@ const LineChart = (props) => {
     generatedDatasets
   });
   const usePlugins = useChartPlugins({ options, resetZoom: resetZoom2 });
+  console.log("State", state);
+  console.log("options", options);
   return /* @__PURE__ */ jsxs(
     "div",
     {