cr-ui-lib 1.1.54 → 1.1.56

package/dist/index.d.mts

@@ -87,8 +87,9 @@ interface MultiLineGraphProps {
     /** Determines the default position of the tooltip. Defaults to 'top'. */
     tooltipPosition?: "top" | "bottom";
     svg?: string;
+    tab?: "Month" | "Week" | "Day" | "Hourly" | null;
 }
-declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, svg, }: MultiLineGraphProps) => JSX.Element;
+declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, svg, tab, }: MultiLineGraphProps) => JSX.Element;
 
 interface SingleLineGraphProps {
     data: number[];
@@ -99,11 +100,12 @@ interface SingleLineGraphProps {
     labelPopupTitle?: string;
     lineColor?: string;
     className?: string;
-    /** Determines the default position of the tooltip. Defaults to 'top'. */
     tooltipPosition?: "top" | "bottom";
     svg?: string;
+    /** NEW — Determines label formatting logic */
+    tab?: "Month" | "Week" | "Day" | "Hourly" | null;
 }
-declare const SingleLineGraph: ({ data, label, lineColor, gradientColor1, gradientColor0, pointLabelColor, labelPopupTitle, className, tooltipPosition, svg, }: SingleLineGraphProps) => JSX.Element;
+declare const SingleLineGraph: ({ data, label, lineColor, gradientColor1, gradientColor0, pointLabelColor, labelPopupTitle, className, tooltipPosition, svg, tab, }: SingleLineGraphProps) => JSX.Element;
 
 interface DataSet {
     data: number[];
@@ -118,8 +120,9 @@ interface MultiBarGraphProps {
     tooltipPosition?: "top" | "bottom";
     /** The maximum value for the Y-axis. Defaults to undefined, allowing Chart.js to auto-calculate. */
     yAxisMax?: number;
+    tab?: "Month" | "Week" | "Day" | "Hourly" | null;
 }
-declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, }: MultiBarGraphProps) => JSX.Element;
+declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, tab, }: MultiBarGraphProps) => JSX.Element;
 
 interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;

package/dist/index.d.ts

@@ -87,8 +87,9 @@ interface MultiLineGraphProps {
     /** Determines the default position of the tooltip. Defaults to 'top'. */
     tooltipPosition?: "top" | "bottom";
     svg?: string;
+    tab?: "Month" | "Week" | "Day" | "Hourly" | null;
 }
-declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, svg, }: MultiLineGraphProps) => JSX.Element;
+declare const MultiLineGraph: ({ datasets, xAxisLabels, className, tooltipPosition, svg, tab, }: MultiLineGraphProps) => JSX.Element;
 
 interface SingleLineGraphProps {
     data: number[];
@@ -99,11 +100,12 @@ interface SingleLineGraphProps {
     labelPopupTitle?: string;
     lineColor?: string;
     className?: string;
-    /** Determines the default position of the tooltip. Defaults to 'top'. */
     tooltipPosition?: "top" | "bottom";
     svg?: string;
+    /** NEW — Determines label formatting logic */
+    tab?: "Month" | "Week" | "Day" | "Hourly" | null;
 }
-declare const SingleLineGraph: ({ data, label, lineColor, gradientColor1, gradientColor0, pointLabelColor, labelPopupTitle, className, tooltipPosition, svg, }: SingleLineGraphProps) => JSX.Element;
+declare const SingleLineGraph: ({ data, label, lineColor, gradientColor1, gradientColor0, pointLabelColor, labelPopupTitle, className, tooltipPosition, svg, tab, }: SingleLineGraphProps) => JSX.Element;
 
 interface DataSet {
     data: number[];
@@ -118,8 +120,9 @@ interface MultiBarGraphProps {
     tooltipPosition?: "top" | "bottom";
     /** The maximum value for the Y-axis. Defaults to undefined, allowing Chart.js to auto-calculate. */
     yAxisMax?: number;
+    tab?: "Month" | "Week" | "Day" | "Hourly" | null;
 }
-declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, }: MultiBarGraphProps) => JSX.Element;
+declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, tab, }: MultiBarGraphProps) => JSX.Element;
 
 interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;

package/dist/index.js

@@ -258,6 +258,7 @@ var LineChart = ({
         },
         y: {
           display: false,
+          min: 0,
           grid: {
             drawBorder: false,
             drawTicks: false,
@@ -906,7 +907,8 @@ var MultiLineGraph = ({
   tooltipPosition = "top",
   svg = `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M10.0833 0.75H1.91667C1.275 0.75 0.755833 1.275 0.755833 1.91667L0.75 10.0833C0.75 10.725 1.275 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V1.91667C11.25 1.275 10.725 0.75 10.0833 0.75ZM10.0833 10.0833H1.91667V1.91667H10.0833V10.0833ZM5.125 8.91667H6.875V6.875H8.91667V5.125H6.875V3.08333H5.125V5.125H3.08333V6.875H5.125V8.91667Z" fill="#4683B4"/>
-                </svg>`
+                </svg>`,
+  tab = "Month"
 }) => {
   const chartRef = React.useRef(null);
   const [chartKey, setChartKey] = React.useState(`chart-${Date.now()}`);
@@ -918,6 +920,29 @@ var MultiLineGraph = ({
     { line: "#FFA726", point: "#FF6F00" },
     { line: "#AB47BC", point: "#8E24AA" }
   ];
+  const formatLabel = (label) => {
+    const date = new Date(label);
+    switch (tab) {
+      case "Month":
+        return date.toLocaleString("en-US", { month: "long", year: "numeric" });
+      case "Week":
+        const start = new Date(date.getFullYear(), 0, 1);
+        const diff = (date.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24);
+        const weekNum = Math.ceil((diff + start.getDay() + 1) / 7);
+        return `Week: ${date.toLocaleDateString("en-US")} (W${weekNum})`;
+      case "Day":
+        return `Day: ${date.toLocaleDateString("en-US")}`;
+      case "Hourly":
+        return `Hourly: ${date.toLocaleDateString(
+          "en-US"
+        )} ${date.toLocaleTimeString("en-US", {
+          hour: "numeric",
+          minute: "2-digit"
+        })}`;
+      default:
+        return label;
+    }
+  };
   React.useEffect(() => {
     const handleResize = () => {
       setChartKey(`chart-${Date.now()}`);
@@ -950,6 +975,7 @@ var MultiLineGraph = ({
         y: {
           display: true,
           // Set to `false` if you want to hide the y-axis labels
+          min: 0,
           border: {
             display: false
           },
@@ -986,11 +1012,7 @@ var MultiLineGraph = ({
               return;
             }
             const label = (_a = dataPoints[0]) == null ? void 0 : _a.label;
-            const date = new Date(label);
-            const formattedLabel = date.toLocaleString("en-US", {
-              month: "long",
-              year: "numeric"
-            });
+            const formattedLabel = formatLabel(label);
             const dataPointsHtml = dataPoints.map(
               (point, index) => `
               <div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? "4px" : "0"} 0;">
@@ -1204,7 +1226,8 @@ var SingleLineGraph = ({
   tooltipPosition = "top",
   svg = `   <svg width="10" height="10" viewBox="0 0 9 10" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 4px;">
                       <path d="M0.416687 3.36663H2.16669V9.08329H0.416687V3.36663ZM3.68335 0.916626H5.31669V9.08329H3.68335V0.916626ZM6.95002 5.58329H8.58335V9.08329H6.95002V5.58329Z" fill="#4683B4"/>
-                    </svg>`
+                    </svg>`,
+  tab = "Month"
 }) => {
   const chartRef = React.useRef(null);
   const [chartKey, setChartKey] = React.useState(`chart-${Date.now()}`);
@@ -1239,6 +1262,7 @@ var SingleLineGraph = ({
         },
         y: {
           display: true,
+          min: 0,
           border: {
             display: false
           },
@@ -1275,11 +1299,35 @@ var SingleLineGraph = ({
             if (!dataPoint) return;
             const value = dataPoint.parsed.y;
             const label2 = dataPoint.label;
-            const date = new Date(label2);
-            const formattedLabel = date.toLocaleString("en-US", {
-              month: "long",
-              year: "numeric"
-            });
+            let tabType = tab;
+            if (!tabType) {
+              if (/^\w+:\s+\w+\s+\d{4}$/i.test(label2)) tabType = "Month";
+              else if (/^Week:/i.test(label2)) tabType = "Week";
+              else if (/^\d{2}\/\d{2}\/\d{2}$/i.test(label2)) tabType = "Day";
+              else if (/AM|PM/i.test(label2)) tabType = "Hourly";
+              else tabType = "Month";
+            }
+            let formattedLabel = label2;
+            try {
+              if (tabType === "Month") {
+                const match = label2.match(/([A-Za-z]+)\s+(\d{4})/);
+                if (match) formattedLabel = `${match[1]} ${match[2]}`;
+              } else if (tabType === "Week") {
+                const match = label2.match(/(\d{2}\/\d{2}\/\d{2})/);
+                if (match) formattedLabel = `Week of ${match[1]}`;
+              } else if (tabType === "Day") {
+                const date = new Date(label2);
+                formattedLabel = date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "2-digit",
+                  year: "numeric"
+                });
+              } else if (tabType === "Hourly") {
+                formattedLabel = label2.replace(/Hourly:\s*/i, "");
+              }
+            } catch {
+              formattedLabel = label2;
+            }
             const arrowSize = 6;
             const innerArrowSize = 5;
             const isAbove = tooltipPosition === "top";
@@ -1506,8 +1554,9 @@ var MultiBarGraph = ({
   xAxisLabels,
   className = "",
   tooltipPosition = "top",
-  yAxisMax
+  yAxisMax,
   // CHANGED: Added yAxisMax prop
+  tab = "Month"
 }) => {
   const chartRef = React.useRef(null);
   const defaultColors = [
@@ -1574,11 +1623,35 @@ var MultiBarGraph = ({
               (sum, dataset) => sum + (dataset.data[hoveredPoint.dataIndex] || 0),
               0
             );
-            const date = new Date(label);
-            const formattedLabel = date.toLocaleString("en-US", {
-              month: "long",
-              year: "numeric"
-            });
+            let tabType = tab;
+            if (!tabType) {
+              if (/^\w+:\s+\w+\s+\d{4}$/i.test(label)) tabType = "Month";
+              else if (/^Week:/i.test(label)) tabType = "Week";
+              else if (/^\d{2}\/\d{2}\/\d{2}$/i.test(label)) tabType = "Day";
+              else if (/AM|PM/i.test(label)) tabType = "Hourly";
+              else tabType = "Month";
+            }
+            let formattedLabel = label;
+            try {
+              if (tabType === "Month") {
+                const match = label.match(/([A-Za-z]+)\s+(\d{4})/);
+                if (match) formattedLabel = `${match[1]} ${match[2]}`;
+              } else if (tabType === "Week") {
+                const match = label.match(/(\d{2}\/\d{2}\/\d{2})/);
+                if (match) formattedLabel = `Week of ${match[1]}`;
+              } else if (tabType === "Day") {
+                const date = new Date(label);
+                formattedLabel = date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "2-digit",
+                  year: "numeric"
+                });
+              } else if (tabType === "Hourly") {
+                formattedLabel = label.replace(/Hourly:\s*/i, "");
+              }
+            } catch {
+              formattedLabel = label;
+            }
             const percentage = totalBarValue > 0 ? (segmentValue / totalBarValue * 100).toFixed(2) : 0;
             const iconHtml = customSvgIcon || getDefaultSvgIcon();
             tooltipEl.innerHTML = `