@optifye/dashboard-core 6.10.44 → 6.10.46

package/dist/index.js

@@ -30331,9 +30331,9 @@ var HourlyOutputChartComponent = ({
       return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
     }
     if (containerWidth >= 760) {
-      return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
+      return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
     }
-    return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
+    return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
   }, [containerWidth]);
   const formatHour = React26__namespace.default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
@@ -30544,7 +30544,7 @@ var HourlyOutputChartComponent = ({
               right: 10,
               bottom: 10,
               // Small bottom margin
-              left: 0
+              left: 6
             },
             barCategoryGap: "25%",
             children: [
@@ -30566,7 +30566,7 @@ var HourlyOutputChartComponent = ({
                 {
                   yAxisId: "default",
                   tickMargin: 8,
-                  width: 35,
+                  width: 48,
                   domain: [0, maxYValue],
                   ticks: generateYAxisTicks(),
                   tickFormatter: (value) => value,
@@ -30575,7 +30575,7 @@ var HourlyOutputChartComponent = ({
                     return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
                       "text",
                       {
-                        x: 0,
+                        x: -2,
                         y: 0,
                         dy: 4,
                         textAnchor: "end",
@@ -32567,13 +32567,37 @@ var HourlyUptimeChartComponent = ({
   }, []);
   const xAxisConfig = React26__namespace.default.useMemo(() => {
     if (containerWidth >= 960) {
-      return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
+      return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12, labelMode: "full" };
     }
     if (containerWidth >= 760) {
-      return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
+      return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8, labelMode: "compact" };
     }
-    return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
+    return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
   }, [containerWidth]);
+  const formatXAxisTick = React26__namespace.default.useCallback((raw) => {
+    const label = typeof raw === "string" ? raw : String(raw);
+    if (xAxisConfig.labelMode === "full") return label;
+    const parts = label.split("-");
+    if (parts.length !== 2) return label;
+    const parsePart = (part) => {
+      const match = part.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/);
+      if (!match) return null;
+      const [, hh, mm, meridiem] = match;
+      const time2 = mm ? `${hh}:${mm}` : hh;
+      const merShort = meridiem === "AM" ? "A" : "P";
+      return { time: time2, meridiem, merShort };
+    };
+    const start = parsePart(parts[0]);
+    const end = parsePart(parts[1]);
+    if (!start || !end) return label;
+    if (xAxisConfig.labelMode === "start") {
+      return `${start.time}${start.merShort}`;
+    }
+    if (start.meridiem === end.meridiem) {
+      return `${start.time}-${end.time}${end.merShort}`;
+    }
+    return `${start.time}${start.merShort}-${end.time}${end.merShort}`;
+  }, [xAxisConfig.labelMode]);
   if (!hasAggregateData && !uptimeSeries.hasData) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center text-sm text-gray-500 ${className}`, children: "No uptime data available." });
   }
@@ -32611,7 +32635,8 @@ var HourlyUptimeChartComponent = ({
                   angle: xAxisConfig.angle,
                   textAnchor: "end",
                   tickMargin: xAxisConfig.tickMargin,
-                  height: xAxisConfig.height
+                  height: xAxisConfig.height,
+                  tickFormatter: formatXAxisTick
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.mjs

@@ -30302,9 +30302,9 @@ var HourlyOutputChartComponent = ({
       return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
     }
     if (containerWidth >= 760) {
-      return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
+      return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
     }
-    return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
+    return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
   }, [containerWidth]);
   const formatHour = React26__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
@@ -30515,7 +30515,7 @@ var HourlyOutputChartComponent = ({
               right: 10,
               bottom: 10,
               // Small bottom margin
-              left: 0
+              left: 6
             },
             barCategoryGap: "25%",
             children: [
@@ -30537,7 +30537,7 @@ var HourlyOutputChartComponent = ({
                 {
                   yAxisId: "default",
                   tickMargin: 8,
-                  width: 35,
+                  width: 48,
                   domain: [0, maxYValue],
                   ticks: generateYAxisTicks(),
                   tickFormatter: (value) => value,
@@ -30546,7 +30546,7 @@ var HourlyOutputChartComponent = ({
                     return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx(
                       "text",
                       {
-                        x: 0,
+                        x: -2,
                         y: 0,
                         dy: 4,
                         textAnchor: "end",
@@ -32538,13 +32538,37 @@ var HourlyUptimeChartComponent = ({
   }, []);
   const xAxisConfig = React26__default.useMemo(() => {
     if (containerWidth >= 960) {
-      return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
+      return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12, labelMode: "full" };
     }
     if (containerWidth >= 760) {
-      return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
+      return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8, labelMode: "compact" };
     }
-    return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
+    return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
   }, [containerWidth]);
+  const formatXAxisTick = React26__default.useCallback((raw) => {
+    const label = typeof raw === "string" ? raw : String(raw);
+    if (xAxisConfig.labelMode === "full") return label;
+    const parts = label.split("-");
+    if (parts.length !== 2) return label;
+    const parsePart = (part) => {
+      const match = part.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/);
+      if (!match) return null;
+      const [, hh, mm, meridiem] = match;
+      const time2 = mm ? `${hh}:${mm}` : hh;
+      const merShort = meridiem === "AM" ? "A" : "P";
+      return { time: time2, meridiem, merShort };
+    };
+    const start = parsePart(parts[0]);
+    const end = parsePart(parts[1]);
+    if (!start || !end) return label;
+    if (xAxisConfig.labelMode === "start") {
+      return `${start.time}${start.merShort}`;
+    }
+    if (start.meridiem === end.meridiem) {
+      return `${start.time}-${end.time}${end.merShort}`;
+    }
+    return `${start.time}${start.merShort}-${end.time}${end.merShort}`;
+  }, [xAxisConfig.labelMode]);
   if (!hasAggregateData && !uptimeSeries.hasData) {
     return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center text-sm text-gray-500 ${className}`, children: "No uptime data available." });
   }
@@ -32582,7 +32606,8 @@ var HourlyUptimeChartComponent = ({
                   angle: xAxisConfig.angle,
                   textAnchor: "end",
                   tickMargin: xAxisConfig.tickMargin,
-                  height: xAxisConfig.height
+                  height: xAxisConfig.height,
+                  tickFormatter: formatXAxisTick
                 }
               ),
               /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.10.44",
+  "version": "6.10.46",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",