@oliasoft-open-source/charts-library 3.4.5-beta-2 → 3.4.6

package/dist/index.js

@@ -13161,7 +13161,9 @@ const ANNOTATION_DASH = [10, 2];
 const DEFAULT_FONT_SIZE = 13;
 const DEFAULT_FONT_FAMILY = '"Lato", sans-serif';
 const DEFAULT_COLOR = "rgba(0,0,0,.87)";
-const LEGEND_LABEL_BOX_SIZE = 6;
+const LEGEND_LABEL_BOX_SIZE = 12;
+const TOOLTIP_PADDING = 8;
+const TOOLTIP_BOX_PADDING = 4;
 const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
 const COLORS = [
   "#3366cc",
@@ -22168,7 +22170,8 @@ const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
   return `${axisType}${i2}`;
 };
 const getAxisTypeFromKey = (string) => {
-  return string.match(/[^0-9/]+/gi)[0];
+  var _a2;
+  return ((_a2 = string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) || "";
 };
 const generateKey = (values) => {
   const key = values.join("");
@@ -23734,17 +23737,18 @@ const reducer = (state, action) => {
       return state;
   }
 };
-const AxesOptionsPopover = ({
-  initialAxesRanges,
-  axes,
-  controlsAxesLabels,
-  onUpdateAxes,
-  onResetAxes,
-  close,
-  depthType,
-  translations
-}) => {
+const AxesOptionsPopover = (optionsPopover) => {
   var _a2;
+  const {
+    initialAxesRanges,
+    axes,
+    controlsAxesLabels,
+    onUpdateAxes,
+    onResetAxes,
+    close,
+    depthType,
+    translations
+  } = optionsPopover;
   const [depthTypeState, setDepthTypeState] = useState(
     depthType == null ? void 0 : depthType.selectedDepthType
   );
@@ -23759,14 +23763,20 @@ const AxesOptionsPopover = ({
   const { errors, valid } = validateAxes(formState);
   const onEditValue = ({ name: name2, value, id }) => {
     dispatch({
-      type: actionTypes.valueUpdated,
+      type: actionTypes.ValueUpdated,
+      payload: { name: name2, value, id }
+    });
+  };
+  const onEditUnit = ({ name: name2, value, id }) => {
+    dispatch({
+      type: actionTypes.UnitUpdated,
       payload: { name: name2, value, id }
     });
   };
   const onDone = (e2) => {
     e2.preventDefault();
     if (valid) {
-      const sanitizedFormState = formState.map((axis, i2) => ({
+      const sanitizedFormState = formState.map((axis) => ({
         ...axis,
         min: toNum(axis.min),
         max: toNum(axis.max)
@@ -23774,6 +23784,13 @@ const AxesOptionsPopover = ({
       onUpdateAxes({
         axes: sanitizedFormState
       });
+      sanitizedFormState.forEach((el, i2) => {
+        var _a3, _b2, _c2;
+        const selectedUnit = (_a3 = el.unit) == null ? void 0 : _a3.selectedUnit;
+        if (selectedUnit) {
+          (_c2 = (_b2 = axes == null ? void 0 : axes[i2]) == null ? void 0 : _b2.unit) == null ? void 0 : _c2.setSelectedUnit(selectedUnit);
+        }
+      });
       if (depthType) {
         depthType.setSelectedDepthType(depthTypeState);
       }
@@ -23782,13 +23799,14 @@ const AxesOptionsPopover = ({
   };
   const onReset = () => {
     dispatch({
-      type: actionTypes.reset,
+      type: actionTypes.Reset,
       payload: { axes, initialAxesRanges }
     });
-    initialAxesRanges.map((el, i2) => {
-      var _a3;
-      if ((_a3 = el == null ? void 0 : el.unit) == null ? void 0 : _a3.selectedUnit) {
-        axes[i2].unit.setSelectedUnit(el.unit.selectedUnit);
+    initialAxesRanges.forEach((el, i2) => {
+      var _a3, _b2, _c2;
+      const selectedUnit = (_a3 = el == null ? void 0 : el.unit) == null ? void 0 : _a3.selectedUnit;
+      if (selectedUnit) {
+        (_c2 = (_b2 = axes == null ? void 0 : axes[i2]) == null ? void 0 : _b2.unit) == null ? void 0 : _c2.setSelectedUnit(selectedUnit);
       }
     });
     onResetAxes();
@@ -23847,10 +23865,15 @@ const AxesOptionsPopover = ({
             name: "selectedUnit",
             options: (_i2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _i2.options,
             value: unit == null ? void 0 : unit.selectedUnit,
-            onChange: unit == null ? void 0 : unit.setSelectedUnit,
+            onChange: (e2) => {
+              onEditUnit({
+                name: e2.target.name,
+                value: e2.target.value,
+                id: axis.id
+              });
+            },
             autoLayerWidth: true,
-            width: "15%",
-            native: true
+            width: "15%"
           }
         ) : null
       ] }) }, i2);
@@ -23897,15 +23920,16 @@ const AxesOptionsPopover = ({
     ] })
   ] });
 };
-const AxesOptions = ({
-  initialAxesRanges,
-  axes,
-  controlsAxesLabels,
-  onUpdateAxes,
-  onResetAxes,
-  depthType,
-  translations
-}) => {
+const AxesOptions = (optionsPopover) => {
+  const {
+    initialAxesRanges,
+    axes,
+    controlsAxesLabels,
+    onUpdateAxes,
+    onResetAxes,
+    depthType,
+    translations
+  } = optionsPopover;
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -24833,77 +24857,37 @@ const getSuggestedAxisRange = ({
     max: round$2(maxAxisValue, DECIMAL_POINT_TOLERANCE)
   };
 };
-const checkMultiAxis = (scalesKeys) => {
-  let counts = {
-    x: 0,
-    y: 0
-  };
-  scalesKeys.forEach((axeKey) => {
-    const key = getAxisTypeFromKey(axeKey);
-    counts[key]++;
-  });
-  const res = counts.x > counts.y && AxisType.X || counts.y > counts.x && AxisType.Y || counts.x === counts.y && null;
-  return res;
-};
 const getAnnotationsData = (data) => {
-  return data.reduce((acc, obj) => {
+  return data == null ? void 0 : data.reduce((acc, obj) => {
     return {
       ...acc,
       [obj.annotationAxis]: [...acc[obj.annotationAxis] || [], +obj.value]
     };
   }, {});
 };
-const getAxesData = (scalesKeys, datasets, annotationsData) => {
-  const allData = (datasets == null ? void 0 : datasets.reduce((acc, item) => [...acc, ...item.data], [])) ?? [];
-  const getData = () => {
-    return scalesKeys.reduce((acc, axeKey) => {
-      const key = getAxisTypeFromKey(axeKey);
-      const data = getAnnotationsData(annotationsData);
-      const formData = allData == null ? void 0 : allData.map((val) => val == null ? void 0 : val[key]).concat(data[key] || []);
-      return {
-        ...acc,
-        [axeKey]: [...new Set(formData)]
-      };
-    }, {});
-  };
-  const getDataForMultiAxes = () => {
-    const multiAxesKey = checkMultiAxis(scalesKeys);
-    const axes = (scalesKeys == null ? void 0 : scalesKeys.filter((key) => key == null ? void 0 : key.includes(multiAxesKey))) ?? [];
-    const data = getAnnotationsData(annotationsData);
-    const [first, second] = axes;
-    const reduceData = (arr, key) => arr.reduce((acc, { [key]: value }) => [...acc, value], []);
-    return datasets.reduce(
-      (acc, obj) => {
-        const key = Object.values(obj).find((val) => axes.includes(val)) ?? multiAxesKey;
-        return key ? {
-          ...acc,
-          [key]: [
-            .../* @__PURE__ */ new Set([
-              ...acc[key],
-              ...reduceData(obj == null ? void 0 : obj.data, multiAxesKey),
-              ...key === multiAxesKey && (data == null ? void 0 : data[multiAxesKey]) || []
-            ])
-          ]
-        } : acc;
-      },
-      { [first]: [], [second]: [] }
-    );
-  };
-  return {
-    ...getData(),
-    ...getDataForMultiAxes()
-  };
+const getAxesDataFromMetasets = (chartRef, scalesKeys, annotationsData) => {
+  var _a2;
+  if (!chartRef || !scalesKeys)
+    return {};
+  const metasets = ((_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.getSortedVisibleDatasetMetas()) ?? [];
+  const annotData = getAnnotationsData(annotationsData);
+  return metasets && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+    const data = metasets.filter((dataset) => Object.values(dataset).includes(key)).flatMap((dataset) => dataset._parsed).map((parsedData) => parsedData[getAxisTypeFromKey(key)]).concat((annotData == null ? void 0 : annotData[key]) ?? []);
+    return {
+      ...acc,
+      [key]: [...new Set(data)]
+    };
+  }, {}));
 };
-const autoScale = (options, state, generatedDatasets) => {
-  const { additionalAxesOptions = {}, annotations = {} } = options || {};
-  const { annotationsData = [] } = annotations || {};
+const autoScale = (options, state, generatedDatasets, chartRef) => {
+  const { additionalAxesOptions = {}, annotations: { annotationsData } = {} } = options || {};
   const scales = getLineChartScales(options, state) || {};
   if (!(additionalAxesOptions == null ? void 0 : additionalAxesOptions.autoAxisPadding) && !estimateDataSeriesHaveCloseValues(generatedDatasets)) {
     return scales;
   }
   const scalesKeys = Object.keys(scales) ?? [];
-  const data = getAxesData(scalesKeys, generatedDatasets, annotationsData) ?? {};
-  const adjustedScales = scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+  const data = getAxesDataFromMetasets(chartRef, scalesKeys, annotationsData);
+  const adjustedScales = data && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
     const { min: propMin = void 0, max: propMax = void 0 } = scales[key];
     const { min, max } = getSuggestedAxisRange({
       data: data[key],
@@ -24918,7 +24902,7 @@ const autoScale = (options, state, generatedDatasets) => {
       }
     };
     return { ...acc, ...res };
-  }, {});
+  }, {}));
   return adjustedScales ?? scales;
 };
 const getCondition = (x2, y2, left2, right2, bottom2) => {
@@ -25037,6 +25021,11 @@ const getAnnotation = (options, state) => {
   const annotations = shouldGenerateAnnotations ? generateAnnotations(options, state) : null;
   return { annotations };
 };
+const getUnitsFromLabel = (label) => {
+  const matches = label.match(/\[(.*)\]/g);
+  const units = matches && matches.length > 0 ? matches[0] : "";
+  return units;
+};
 const getLineChartToolTips = (options) => {
   const getTooltipLabels = (dataset) => {
     var _a2, _b2;
@@ -25071,7 +25060,7 @@ const getLineChartToolTips = (options) => {
     return `${roundedValue} ${titleAxisLabel}`;
   };
   const labelCallback = (tooltipItem) => {
-    const { showLabelsInTooltips, hideSimulationName } = options.tooltip;
+    const { showLabelsInTooltips } = options.tooltip;
     let label = tooltipItem.dataset.label || "";
     const labels = getTooltipLabels(tooltipItem.dataset);
     const { valueLabel, valueAxisLabel } = labels;
@@ -25082,18 +25071,20 @@ const getLineChartToolTips = (options) => {
         roundScientificCoefficient: 4
       }) : displayNumber(labelNumber);
     };
-    const splitValueAxisLabel = valueAxisLabel.split(" ");
-    const newValueAxisLabel = hideSimulationName ? splitValueAxisLabel[splitValueAxisLabel.length - 1] : valueAxisLabel;
     const tooltipItemValue = getTooltipItemValue();
-    const valAxisLabel = label === valueAxisLabel || valueAxisLabel.includes(label) ? "" : newValueAxisLabel;
+    const units = getUnitsFromLabel(valueAxisLabel);
     const tooltipLabel = getTooltipLabel(tooltipItem, showLabelsInTooltips);
-    return `${label}: ${tooltipItemValue} ${valAxisLabel}${tooltipLabel}`;
+    return `${label}: ${tooltipItemValue} ${units} ${tooltipLabel}`;
   };
   return {
     enabled: options.tooltip.tooltips,
     mode: ChartHoverMode.Nearest,
     intersect: true,
-    padding: 8,
+    padding: TOOLTIP_PADDING,
+    usePointStyle: true,
+    boxWidth: LEGEND_LABEL_BOX_SIZE,
+    boxHeight: LEGEND_LABEL_BOX_SIZE,
+    boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
       title: titleCallback,
       label: labelCallback,
@@ -25180,7 +25171,7 @@ const useChartOptions = ({
     [legendEnabled]
   );
   const scales = useMemo(
-    () => autoScale(options, state, generatedDatasets),
+    () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets]
   );
   const dragData = useMemo(
@@ -26075,7 +26066,12 @@ const PieChart = (props) => {
           const formattedValue = Math.abs(labelValue) < 1 ? roundNumberToPrecision(labelValue, { n: 3 }) : round$2(labelValue, 3);
           return `${dataLabel} ${formattedValue} ${unit}`;
         }
-      }
+      },
+      padding: TOOLTIP_PADDING,
+      boxWidth: LEGEND_LABEL_BOX_SIZE,
+      boxHeight: LEGEND_LABEL_BOX_SIZE,
+      boxPadding: TOOLTIP_BOX_PADDING,
+      usePointStyle: true
     };
   };
   return /* @__PURE__ */ jsx(
@@ -38753,7 +38749,10 @@ const getBarChartToolTips = (options) => {
     enabled: options.tooltip.tooltips,
     mode: ChartHoverMode.Nearest,
     intersect: true,
-    padding: 8,
+    padding: TOOLTIP_PADDING,
+    boxWidth: LEGEND_LABEL_BOX_SIZE,
+    boxHeight: LEGEND_LABEL_BOX_SIZE,
+    boxPadding: TOOLTIP_BOX_PADDING,
     callbacks: {
       title: titleCallback,
       label: labelCallback,