cr-ui-lib 1.1.15 → 1.1.16

package/dist/index.js

@@ -887,23 +887,23 @@ var Label = ({ title, classNames }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("p", { className: tailwindMerge.twMerge("text-[14px] font-semibold ", classNames), children: title });
 };
 var Label_default = Label;
+chart_js.Chart.register(
+  chart_js.CategoryScale,
+  chart_js.LinearScale,
+  chart_js.PointElement,
+  chart_js.LineElement,
+  chart_js.Title,
+  chart_js.Tooltip,
+  chart_js.Filler,
+  chart_js.Legend
+);
 var MultiLineGraph = ({
   datasets,
   xAxisLabels,
   className = ""
 }) => {
-  chart_js.Chart.register(
-    chart_js.CategoryScale,
-    chart_js.LinearScale,
-    chart_js.PointElement,
-    chart_js.LineElement,
-    chart_js.Title,
-    chart_js.Tooltip,
-    chart_js.Filler,
-    chart_js.Legend
-  );
   const chartRef = React.useRef(null);
-  const [chartKey, setChartKey] = React.useState(0);
+  const [chartKey, setChartKey] = React.useState(`chart-${Date.now()}`);
   const defaultColors = [
     { line: "#17CA43", point: "#17CA43" },
     { line: "#FF6B6B", point: "#FF4757" },
@@ -914,7 +914,7 @@ var MultiLineGraph = ({
   ];
   React.useEffect(() => {
     const handleResize = () => {
-      setChartKey((prevKey) => prevKey + 1);
+      setChartKey(`chart-${Date.now()}`);
     };
     window.addEventListener("resize", handleResize);
     return () => {
@@ -943,12 +943,12 @@ var MultiLineGraph = ({
         },
         y: {
           display: true,
+          // Set to `false` if you want to hide the y-axis labels
           border: {
             display: false
           },
           grid: {
-            drawBorder: false,
-            drawTicks: false,
+            // This is ignored because our custom plugin below handles drawing
             drawOnChartArea: false
           },
           ticks: {
@@ -997,27 +997,11 @@ var MultiLineGraph = ({
             const innerHtml = `
       <div style="position: relative; background: white; border: 1px solid rgba(16, 30, 115, 0.1); padding: 10px; border-radius: 4px; font-size: 12px; color: #333; min-width: 120px;">
         <div id="tooltip-arrow-border" style="
-          position: absolute;
-          top: 100%;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 0;
-          height: 0;
-          border-left: ${outerArrowSize}px solid transparent;
-          border-right: ${outerArrowSize}px solid transparent;
-          border-top: ${outerArrowSize}px solid rgba(16, 30, 115, 0.1);
-        "></div>
+          position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: ${outerArrowSize}px solid transparent; border-right: ${outerArrowSize}px solid transparent; border-top: ${outerArrowSize}px solid rgba(16, 30, 115, 0.1);">
+        </div>
         <div id="tooltip-arrow" style="
-          position: absolute;
-          top: 100%;
-          left: 50%;
-          transform: translateX(-50%) translateY(-1px);
-          width: 0;
-          height: 0;
-          border-left: ${innerArrowSize}px solid transparent;
-          border-right: ${innerArrowSize}px solid transparent;
-          border-top: ${innerArrowSize}px solid white;
-        "></div>
+          position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-1px); width: 0; height: 0; border-left: ${innerArrowSize}px solid transparent; border-right: ${innerArrowSize}px solid transparent; border-top: ${innerArrowSize}px solid white;">
+        </div>
         <div>
           <p style="color:#757575; margin: 0 0 8px 0;"><strong>${label}</strong></p>
           ${dataPointsHtml}
@@ -1076,10 +1060,9 @@ var MultiLineGraph = ({
     () => ({
       id: "verticalLine",
       beforeDatasetsDraw: (chart) => {
-        var _a;
-        const tooltip = chart.tooltip;
-        if ((_a = tooltip == null ? void 0 : tooltip._active) == null ? void 0 : _a.length) {
-          const activePoint = chart.tooltip._active[0];
+        var _a, _b;
+        if ((_b = (_a = chart.tooltip) == null ? void 0 : _a.getActiveElements()) == null ? void 0 : _b.length) {
+          const activePoint = chart.tooltip.getActiveElements()[0];
           const ctx = chart.ctx;
           const x = activePoint.element.x;
           const topY = chart.scales.y.top;
@@ -1098,6 +1081,32 @@ var MultiLineGraph = ({
     }),
     []
   );
+  const dashedGridPlugin = React.useMemo(
+    () => ({
+      id: "customGridAndLabels",
+      afterDraw(chart) {
+        const ctx = chart.ctx;
+        const yAxis = chart.scales.y;
+        if (!yAxis) return;
+        const { left, right } = chart.chartArea;
+        ctx.save();
+        ctx.setLineDash([4, 4]);
+        ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
+        ctx.lineWidth = 1;
+        const ticks = yAxis.ticks || [];
+        ticks.forEach((tick, index) => {
+          if (index === 0) return;
+          const yPos = yAxis.getPixelForValue(tick.value);
+          ctx.beginPath();
+          ctx.moveTo(left, yPos);
+          ctx.lineTo(right, yPos);
+          ctx.stroke();
+        });
+        ctx.restore();
+      }
+    }),
+    []
+  );
   const lineData = React.useMemo(
     () => ({
       labels: xAxisLabels,
@@ -1119,29 +1128,6 @@ var MultiLineGraph = ({
     }),
     [datasets, xAxisLabels]
   );
-  const dashedGridPlugin = {
-    id: "customGridAndLabels",
-    afterDraw(chart) {
-      const ctx = chart.ctx;
-      const yAxis = chart.scales.y;
-      if (!yAxis) return;
-      const { left, right } = chart.chartArea;
-      ctx.save();
-      ctx.setLineDash([4, 4]);
-      ctx.strokeStyle = "rgba(0, 0, 0, 0.1)";
-      ctx.lineWidth = 1;
-      const ticks = yAxis.ticks || [];
-      ticks.forEach((tick, index) => {
-        if (index === 0) return;
-        const yPos = yAxis.getPixelForValue(tick.value);
-        ctx.beginPath();
-        ctx.moveTo(left, yPos);
-        ctx.lineTo(right, yPos);
-        ctx.stroke();
-      });
-      ctx.restore();
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(" w-full h-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     reactChartjs2.Line,
     {
@@ -1154,6 +1140,16 @@ var MultiLineGraph = ({
   ) });
 };
 var MultiLineGraph_default = MultiLineGraph;
+chart_js.Chart.register(
+  chart_js.CategoryScale,
+  chart_js.LinearScale,
+  chart_js.PointElement,
+  chart_js.LineElement,
+  chart_js.Title,
+  chart_js.Tooltip,
+  chart_js.Filler,
+  chart_js.Legend
+);
 var SingleLineGraph = ({
   data,
   label,
@@ -1164,21 +1160,11 @@ var SingleLineGraph = ({
   labelPopupTitle = "Requests Completed",
   className = ""
 }) => {
-  chart_js.Chart.register(
-    chart_js.CategoryScale,
-    chart_js.LinearScale,
-    chart_js.PointElement,
-    chart_js.LineElement,
-    chart_js.Title,
-    chart_js.Tooltip,
-    chart_js.Filler,
-    chart_js.Legend
-  );
   const chartRef = React.useRef(null);
-  const [chartKey, setChartKey] = React.useState(0);
+  const [chartKey, setChartKey] = React.useState(`chart-${Date.now()}`);
   React.useEffect(() => {
     const handleResize = () => {
-      setChartKey((prevKey) => prevKey + 1);
+      setChartKey(`chart-${Date.now()}`);
     };
     window.addEventListener("resize", handleResize);
     return () => {