@oliasoft-open-source/charts-library 3.3.5 → 3.3.6-beta-2

package/dist/index.js

@@ -13059,7 +13059,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",
@@ -37542,12 +37544,22 @@ const getLineChartToolTips = (options) => {
       };
     }
   };
+  const truncateMiddle = (string) => {
+    const STRING_MAX_LENGTH = 30;
+    if (string.length <= STRING_MAX_LENGTH) {
+      return string;
+    }
+    const start = string.substring(0, STRING_MAX_LENGTH / 2).trim();
+    const end = string.substring(string.length - STRING_MAX_LENGTH / 2).trim();
+    return `${start}…${end}`;
+  };
   const titleCallback = (tooltipItem, data) => {
     const labels = getTooltipLabels(tooltipItem[0].dataset);
     const { titleLabel, titleAxisLabel } = labels;
     const formattedValue = titleLabel === TooltipLabel.Y ? tooltipItem[0].parsed.y : tooltipItem[0].parsed.x;
     const roundedValue = Math.abs(formattedValue) < 1 ? formattedValue.toPrecision(3) : formattedValue.toFixed(2);
-    return `${roundedValue} ${titleAxisLabel}`;
+    const title = `${roundedValue} ${titleAxisLabel}`;
+    return truncateMiddle(title);
   };
   const labelCallback = (tooltipItem) => {
     const { showLabelsInTooltips, hideSimulationName } = options.tooltip;
@@ -37558,18 +37570,22 @@ const getLineChartToolTips = (options) => {
       const labelNumber = valueLabel === TooltipLabel.X ? tooltipItem.parsed.x : tooltipItem.parsed.y;
       return Math.abs(labelNumber) < 1 ? labelNumber.toPrecision(3) : labelNumber.toFixed(3);
     };
-    const splitValueAxisLabel = valueAxisLabel.split(" ");
-    const newValueAxisLabel = hideSimulationName ? splitValueAxisLabel[splitValueAxisLabel.length - 1] : valueAxisLabel;
     const tooltipItemValue = getTooltipItemValue();
-    const valAxisLabel = label === valueAxisLabel || valueAxisLabel.includes(label) ? "" : newValueAxisLabel;
     const tooltipLabel = getTooltipLabel(tooltipItem, showLabelsInTooltips);
-    return `${label}: ${tooltipItemValue} ${valAxisLabel}${tooltipLabel}`;
+    const matches = valueAxisLabel.match(/\[(.*?)\]/g);
+    const units = matches && matches.length > 0 ? matches[0] : "";
+    const truncatedLabel = truncateMiddle(label);
+    return `${truncatedLabel}: ${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,
@@ -38593,7 +38609,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(
@@ -39010,7 +39031,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,