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

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",
@@ -23734,17 +23736,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 +23762,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 +23783,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 +23798,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 +23864,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 +23919,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,
     {
@@ -25037,6 +25060,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 +25099,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 +25110,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,
@@ -26075,7 +26105,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 +38788,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,