@cere/cere-design-system 0.0.22 → 0.0.23

package/dist/index.d.mts

@@ -1939,6 +1939,13 @@ interface TimeSeriesGraphProps {
      * while the header remains visible and interactive.
      */
     loading?: boolean;
+    /**
+     * Override the x-axis date format string (date-fns format tokens).
+     * When omitted, the format is auto-detected from the data's time span:
+     * - <= 24 hours → `'HH:mm'`
+     * - > 24 hours  → `'do MMM'`
+     */
+    xAxisFormat?: string;
 }
 /**
  * A reusable time series graph component that displays one or more data lines
@@ -1973,7 +1980,7 @@ interface TimeSeriesGraphProps {
  *
  * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
  */
-declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
+declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
 
 interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
     /**

package/dist/index.d.ts

@@ -1939,6 +1939,13 @@ interface TimeSeriesGraphProps {
      * while the header remains visible and interactive.
      */
     loading?: boolean;
+    /**
+     * Override the x-axis date format string (date-fns format tokens).
+     * When omitted, the format is auto-detected from the data's time span:
+     * - <= 24 hours → `'HH:mm'`
+     * - > 24 hours  → `'do MMM'`
+     */
+    xAxisFormat?: string;
 }
 /**
  * A reusable time series graph component that displays one or more data lines
@@ -1973,7 +1980,7 @@ interface TimeSeriesGraphProps {
  *
  * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
  */
-declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
+declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
 
 interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
     /**

package/dist/index.js

@@ -7492,6 +7492,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) => {
@@ -7517,7 +7523,8 @@ var TimeSeriesGraph = ({
   summaryItems,
   showSummary = true,
   headerAction,
-  loading = false
+  loading = false,
+  xAxisFormat
 }) => {
   const theme2 = (0, import_material67.useTheme)();
   const [hiddenSeries, setHiddenSeries] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
@@ -7546,6 +7553,10 @@ var TimeSeriesGraph = ({
       max: new Date(Math.max(...timestamps))
     };
   }, [dataset]);
+  const resolvedXAxisFormat = (0, import_react33.useMemo)(
+    () => 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__ */ (0, import_jsx_runtime89.jsxs)(import_material67.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
@@ -7613,7 +7624,7 @@ var TimeSeriesGraph = ({
                     max: timeBounds.max,
                     disableLine: true,
                     disableTicks: true,
-                    valueFormatter: (date) => (0, import_date_fns3.format)(date, "do MMM"),
+                    valueFormatter: (date) => (0, import_date_fns3.format)(date, resolvedXAxisFormat),
                     tickLabelStyle: {
                       fontSize: 10
                     }