cr-ui-lib 1.1.6 → 1.1.7

package/dist/index.js

@@ -953,7 +953,6 @@ var MultiLineGraph = ({
           },
           ticks: {
             display: true
-            // 👈 Add this to hide the number labels
           }
         }
       },
@@ -1057,7 +1056,6 @@ var MultiLineGraph = ({
       },
       interaction: {
         intersect: false,
-        // 👇 CHANGE THIS LINE
         mode: "nearest"
       },
       elements: {
@@ -1077,7 +1075,7 @@ var MultiLineGraph = ({
   const verticalHoverLine = React.useMemo(
     () => ({
       id: "verticalLine",
-      afterDraw: (chart) => {
+      beforeDatasetsDraw: (chart) => {
         var _a;
         const tooltip = chart.tooltip;
         if ((_a = tooltip == null ? void 0 : tooltip._active) == null ? void 0 : _a.length) {
@@ -1114,7 +1112,6 @@ var MultiLineGraph = ({
           pointBackgroundColor: "#ffffff",
           pointBorderColor: dataset.pointLabelColor || colors.point,
           tension: 0.5,
-          // 👇 ADD THESE TWO LINES to make the line thicker on hover
           borderWidth: 2,
           hoverBorderWidth: 3.5
         };
@@ -1122,28 +1119,28 @@ var MultiLineGraph = ({
     }),
     [datasets, xAxisLabels]
   );
-  const dashedGridPlugin = React.useMemo(
+  const alternativeDashedGridPlugin = React.useMemo(
     () => ({
-      id: "customGridAndLabels",
+      id: "dashedGrid",
       afterDatasetsDraw: (chart) => {
-        const ctx = chart.ctx;
-        const yAxis = chart.scales.y;
-        const xAxis = chart.scales.x;
-        if (!yAxis || !xAxis) return;
+        const { ctx, scales: { x, y } } = chart;
+        if (!ctx || !x || !y) return;
         ctx.save();
-        ctx.beginPath();
-        ctx.setLineDash([4, 4]);
+        ctx.globalCompositeOperation = "destination-over";
         ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
         ctx.lineWidth = 1;
-        yAxis.getTicks().forEach((tick, index) => {
-          if (index === 0) {
-            return;
+        ctx.setLineDash([4, 4]);
+        const yTicks = y.ticks || [];
+        yTicks.forEach((tick, index) => {
+          if (index === 0) return;
+          const yPos = y.getPixelForValue(tick.value);
+          if (typeof yPos === "number" && !isNaN(yPos)) {
+            ctx.beginPath();
+            ctx.moveTo(x.left, yPos);
+            ctx.lineTo(x.right, yPos);
+            ctx.stroke();
           }
-          const yPosition = yAxis.getPixelForValue(tick.value);
-          ctx.moveTo(xAxis.left, yPosition);
-          ctx.lineTo(xAxis.right, yPosition);
         });
-        ctx.stroke();
         ctx.restore();
       }
     }),
@@ -1155,7 +1152,7 @@ var MultiLineGraph = ({
       ref: chartRef,
       options,
       data: lineData,
-      plugins: [verticalHoverLine, dashedGridPlugin]
+      plugins: [verticalHoverLine, alternativeDashedGridPlugin]
     },
     chartKey
   ) });
@@ -1412,28 +1409,28 @@ var SingleLineGraph = ({
     }),
     [months, values]
   );
-  const dashedGridPlugin = React.useMemo(
+  const alternativeDashedGridPlugin = React.useMemo(
     () => ({
-      id: "customGridAndLabels",
+      id: "dashedGrid",
       afterDatasetsDraw: (chart) => {
-        const ctx = chart.ctx;
-        const yAxis = chart.scales.y;
-        const xAxis = chart.scales.x;
-        if (!yAxis || !xAxis) return;
+        const { ctx, scales: { x, y } } = chart;
+        if (!ctx || !x || !y) return;
         ctx.save();
-        ctx.beginPath();
-        ctx.setLineDash([4, 4]);
+        ctx.globalCompositeOperation = "destination-over";
         ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
         ctx.lineWidth = 1;
-        yAxis.getTicks().forEach((tick, index) => {
-          if (index === 0) {
-            return;
+        ctx.setLineDash([4, 4]);
+        const yTicks = y.ticks || [];
+        yTicks.forEach((tick, index) => {
+          if (index === 0) return;
+          const yPos = y.getPixelForValue(tick.value);
+          if (typeof yPos === "number" && !isNaN(yPos)) {
+            ctx.beginPath();
+            ctx.moveTo(x.left, yPos);
+            ctx.lineTo(x.right, yPos);
+            ctx.stroke();
           }
-          const yPosition = yAxis.getPixelForValue(tick.value);
-          ctx.moveTo(xAxis.left, yPosition);
-          ctx.lineTo(xAxis.right, yPosition);
         });
-        ctx.stroke();
         ctx.restore();
       }
     }),
@@ -1445,7 +1442,7 @@ var SingleLineGraph = ({
       ref: chartRef,
       options,
       data: lineData,
-      plugins: [verticalHoverLine, dashedGridPlugin]
+      plugins: [verticalHoverLine, alternativeDashedGridPlugin]
     },
     chartKey
   ) });