@cere/cere-design-system 0.0.22 → 0.0.23

package/dist/index.mjs

@@ -7463,6 +7463,12 @@ var formatYAxisValue = (value) => {
   }
   return String(value);
 };
+var TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1e3;
+var inferXAxisFormat = (min, max) => {
+  if (!min || !max) return "do MMM";
+  const spanMs = max.getTime() - min.getTime();
+  return spanMs <= TWENTY_FOUR_HOURS_MS ? "HH:mm" : "do MMM";
+};
 var buildDataset = (series, hiddenSeries) => {
   const timestampMap = /* @__PURE__ */ new Map();
   series.forEach((s) => {
@@ -7488,7 +7494,8 @@ var TimeSeriesGraph = ({
   summaryItems,
   showSummary = true,
   headerAction,
-  loading = false
+  loading = false,
+  xAxisFormat
 }) => {
   const theme2 = useTheme5();
   const [hiddenSeries, setHiddenSeries] = useState10(/* @__PURE__ */ new Set());
@@ -7517,6 +7524,10 @@ var TimeSeriesGraph = ({
       max: new Date(Math.max(...timestamps))
     };
   }, [dataset]);
+  const resolvedXAxisFormat = useMemo2(
+    () => xAxisFormat ?? inferXAxisFormat(timeBounds.min, timeBounds.max),
+    [xAxisFormat, timeBounds.min, timeBounds.max]
+  );
   const hasData = dataset.length > 0;
   const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
   const headerActionElement = /* @__PURE__ */ jsxs41(Stack7, { direction: "row", spacing: 1, alignItems: "center", children: [
@@ -7584,7 +7595,7 @@ var TimeSeriesGraph = ({
                     max: timeBounds.max,
                     disableLine: true,
                     disableTicks: true,
-                    valueFormatter: (date) => format3(date, "do MMM"),
+                    valueFormatter: (date) => format3(date, resolvedXAxisFormat),
                     tickLabelStyle: {
                       fontSize: 10
                     }