cr-ui-lib 1.1.6 → 1.1.8

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,33 +1119,32 @@ var MultiLineGraph = ({
     }),
     [datasets, xAxisLabels]
   );
-  const dashedGridPlugin = React.useMemo(
-    () => ({
-      id: "customGridAndLabels",
-      afterDatasetsDraw: (chart) => {
-        const ctx = chart.ctx;
-        const yAxis = chart.scales.y;
-        const xAxis = chart.scales.x;
-        if (!yAxis || !xAxis) return;
-        ctx.save();
+  const dashedGridPlugin = {
+    id: "customGridAndLabels",
+    afterDraw(chart) {
+      var _a;
+      const ctx = chart.ctx;
+      const yAxis = chart.scales.y;
+      const xAxis = chart.scales.x;
+      if (!yAxis || !xAxis) return;
+      ctx.save();
+      ctx.setLineDash([4, 4]);
+      ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
+      ctx.lineWidth = 1;
+      const ticks = yAxis.ticks || ((_a = yAxis.getTicks) == null ? void 0 : _a.call(yAxis)) || [];
+      ticks.forEach((tick, index) => {
+        var _a2;
+        if (index === 0) return;
+        const yValue = (_a2 = tick.value) != null ? _a2 : tick;
+        const yPosition = yAxis.getPixelForValue(yValue);
         ctx.beginPath();
-        ctx.setLineDash([4, 4]);
-        ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
-        ctx.lineWidth = 1;
-        yAxis.getTicks().forEach((tick, index) => {
-          if (index === 0) {
-            return;
-          }
-          const yPosition = yAxis.getPixelForValue(tick.value);
-          ctx.moveTo(xAxis.left, yPosition);
-          ctx.lineTo(xAxis.right, yPosition);
-        });
+        ctx.moveTo(xAxis.left, yPosition);
+        ctx.lineTo(xAxis.right, yPosition);
         ctx.stroke();
-        ctx.restore();
-      }
-    }),
-    []
-  );
+      });
+      ctx.restore();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(" w-full h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     reactChartjs2.Line,
     {
@@ -1412,33 +1408,32 @@ var SingleLineGraph = ({
     }),
     [months, values]
   );
-  const dashedGridPlugin = React.useMemo(
-    () => ({
-      id: "customGridAndLabels",
-      afterDatasetsDraw: (chart) => {
-        const ctx = chart.ctx;
-        const yAxis = chart.scales.y;
-        const xAxis = chart.scales.x;
-        if (!yAxis || !xAxis) return;
-        ctx.save();
+  const dashedGridPlugin = {
+    id: "customGridAndLabels",
+    afterDraw(chart) {
+      var _a;
+      const ctx = chart.ctx;
+      const yAxis = chart.scales.y;
+      const xAxis = chart.scales.x;
+      if (!yAxis || !xAxis) return;
+      ctx.save();
+      ctx.setLineDash([4, 4]);
+      ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
+      ctx.lineWidth = 1;
+      const ticks = yAxis.ticks || ((_a = yAxis.getTicks) == null ? void 0 : _a.call(yAxis)) || [];
+      ticks.forEach((tick, index) => {
+        var _a2;
+        if (index === 0) return;
+        const yValue = (_a2 = tick.value) != null ? _a2 : tick;
+        const yPosition = yAxis.getPixelForValue(yValue);
         ctx.beginPath();
-        ctx.setLineDash([4, 4]);
-        ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
-        ctx.lineWidth = 1;
-        yAxis.getTicks().forEach((tick, index) => {
-          if (index === 0) {
-            return;
-          }
-          const yPosition = yAxis.getPixelForValue(tick.value);
-          ctx.moveTo(xAxis.left, yPosition);
-          ctx.lineTo(xAxis.right, yPosition);
-        });
+        ctx.moveTo(xAxis.left, yPosition);
+        ctx.lineTo(xAxis.right, yPosition);
         ctx.stroke();
-        ctx.restore();
-      }
-    }),
-    []
-  );
+      });
+      ctx.restore();
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("w-full h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     reactChartjs2.Line,
     {