@prorobotech/openapi-k8s-toolkit 1.2.0-alpha.19 → 1.2.0-alpha.20

package/dist/openapi-k8s-toolkit.umd.js

@@ -75664,7 +75664,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     range = "1h",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const {
       data: series,
@@ -75702,11 +75703,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AreaChart, { data: chartData, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { dataKey: "timestamp", tickFormatter: formatTimestamp }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: formatBytes }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v), labelFormatter: (v) => formatTimestamp(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: valueFormatter }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v), labelFormatter: (v) => formatTimestamp(v) }),
       series?.map((s, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         Area,
         {
@@ -75752,7 +75754,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     range = "1h",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data = [], isLoading, error } = usePromMatrixToLineSingle({ baseUrl, query, range, refetchInterval });
     if (isLoading) {
@@ -75764,6 +75767,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AreaChart, { data, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -75781,8 +75785,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: (value) => formatBytes(value) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (value) => formatBytes(value), labelFormatter: (value) => formatTimestamp(value) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: (value) => valueFormatter(value) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (value) => valueFormatter(value), labelFormatter: (value) => formatTimestamp(value) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Area,
         {
@@ -75822,7 +75826,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     range = "1h",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data: series = [], isLoading, error } = usePromMatrixToLineMulti({ baseUrl, query, range, refetchInterval });
     const chartData = React$1.useMemo(() => matrixToStackedAreaData(series), [series]);
@@ -75835,11 +75840,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AreaChart, { data: chartData, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { dataKey: "timestamp", tickFormatter: formatTimestamp }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: formatBytes }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v), labelFormatter: (v) => formatTimestamp(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: valueFormatter }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v), labelFormatter: (v) => formatTimestamp(v) }),
       series.map((s, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         Area,
         {
@@ -75864,7 +75870,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     range = "1h",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const {
       data: series,
@@ -75902,11 +75909,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(LineChart, { data: chartData, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { dataKey: "timestamp", tickFormatter: formatTimestamp }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: formatBytes }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v), labelFormatter: (v) => formatTimestamp(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: valueFormatter }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v), labelFormatter: (v) => formatTimestamp(v) }),
       series?.map((s, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         Line,
         {
@@ -75928,7 +75936,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     range = "1h",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const {
       data = [],
@@ -75949,6 +75958,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(LineChart, { data, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -75966,8 +75976,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: (value) => formatBytes(value) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (value) => formatBytes(value), labelFormatter: (value) => formatTimestamp(value) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: (value) => valueFormatter(value) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (value) => valueFormatter(value), labelFormatter: (value) => formatTimestamp(value) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Line,
         {
@@ -76033,7 +76043,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     refetchInterval,
     mode = "avg",
     width,
-    height
+    height,
+    formatValue
   }) => {
     const {
       data: series = [],
@@ -76058,8 +76069,14 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(BarChart, { data: reduced, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { dataKey: "id" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (value) => `${value} bytes`, labelFormatter: (label) => `Series: ${label}` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: formatValue }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Tooltip,
+        {
+          formatter: (value) => formatValue ? formatValue(Number(value)) : `${value} bytes`,
+          labelFormatter: (label) => `Series: ${label}`
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { dataKey: "value", children: reduced.map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { fill: `hsl(${i * 35 % 360}, 70%, 55%)` }, `cell-${i}`)) })
     ] }) }) });
   };
@@ -76069,7 +76086,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     query = "container_memory_usage_bytes",
     range = "1h",
     refetchInterval,
-    title = "Memory usage (min / max / current)"
+    title = "Memory usage (min / max / current)",
+    formatValue
   }) => {
     const {
       data: series = [],
@@ -76109,6 +76127,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         };
       });
     }, [series]);
+    const valueFormatter = formatValue ?? formatBytes;
     const columns = React$1.useMemo(
       () => [
         {
@@ -76127,7 +76146,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           dataIndex: "min",
           key: "min",
           align: "right",
-          render: (v) => v == null ? "—" : formatBytes(v),
+          render: (v) => v == null ? "-" : valueFormatter(v),
           sorter: (a, b) => (a.min ?? -Infinity) - (b.min ?? -Infinity),
           defaultSortOrder: void 0
         },
@@ -76136,7 +76155,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           dataIndex: "max",
           key: "max",
           align: "right",
-          render: (v) => v == null ? "—" : formatBytes(v),
+          render: (v) => v == null ? "-" : valueFormatter(v),
           sorter: (a, b) => (a.max ?? -Infinity) - (b.max ?? -Infinity)
         },
         {
@@ -76144,7 +76163,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           dataIndex: "current",
           key: "current",
           align: "right",
-          render: (v) => v == null ? "—" : formatBytes(v),
+          render: (v) => v == null ? "-" : valueFormatter(v),
           sorter: (a, b) => (a.current ?? -Infinity) - (b.current ?? -Infinity),
           defaultSortOrder: "descend"
         },
@@ -76157,7 +76176,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           sorter: (a, b) => (a.currentTs ?? -Infinity) - (b.currentTs ?? -Infinity)
         }
       ],
-      []
+      [valueFormatter]
     );
     if (error) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -76226,7 +76245,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     refetchInterval,
     topN = 10,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data, isLoading, error } = usePromVector({ baseUrl, query, refetchInterval });
     const items = React$1.useMemo(() => {
@@ -76242,11 +76262,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(BarChart, { data: items, layout: "vertical", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { type: "number", tickFormatter: formatBytes }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { type: "number", tickFormatter: valueFormatter }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { type: "category", dataKey: "id", width: 160 }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { dataKey: "value", children: items.map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { fill: `hsl(${i * 35 % 360}, 70%, 55%)` }, `cell-${i}`)) })
     ] }) }) });
   };
@@ -76283,7 +76304,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     query = "container_memory_usage_bytes",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data, isLoading, error } = usePromVector({ baseUrl, query, refetchInterval });
     const items = React$1.useMemo(() => data ? vectorToBarHorizontal(data) : [], [data]);
@@ -76296,11 +76318,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(BarChart, { data: items, layout: "vertical", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { type: "number", tickFormatter: formatBytes }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { type: "number", tickFormatter: valueFormatter }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { type: "category", dataKey: "id", width: 140 }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { dataKey: "value", children: items.map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { fill: `hsl(${i * 35 % 360}, 70%, 55%)` }, `cell-${i}`)) })
     ] }) }) });
   };
@@ -76310,7 +76333,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     query = "container_memory_usage_bytes",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data, isLoading, error } = usePromVector({ baseUrl, query, refetchInterval });
     const items = React$1.useMemo(() => data ? vectorToBarVertical(data) : [], [data]);
@@ -76323,11 +76347,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(BarChart, { data: items, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CartesianGrid, { strokeDasharray: "3 3" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(XAxis, { dataKey: "id" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: formatBytes }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(YAxis, { tickFormatter: valueFormatter }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { dataKey: "value", children: items.map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { fill: `hsl(${i * 35 % 360}, 70%, 55%)` }, `cell-${i}`)) })
     ] }) }) });
   };
@@ -76351,7 +76376,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     min = 0,
     max = 1,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data, isLoading, error } = usePromVector({ baseUrl, query, refetchInterval });
     const gauge = React$1.useMemo(() => data ? vectorToGaugeRadial(data) : null, [data]);
@@ -76360,6 +76386,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     const filled = clamped - min;
     const total = max - min;
     const rest = Math.max(0, total - filled);
+    const displayValue = formatValue ? formatValue(value) : String(value);
     const chartData = React$1.useMemo(
       () => [
         { name: "value", value: filled },
@@ -76383,7 +76410,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           ":"
         ] }),
         " ",
-        String(value)
+        displayValue
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 8, $samespace: true }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(PieChart, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -76425,7 +76452,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     query = "container_memory_usage_bytes",
     refetchInterval,
     width,
-    height
+    height,
+    formatValue
   }) => {
     const { data, isLoading, error } = usePromVector({ baseUrl, query, refetchInterval });
     const slices = React$1.useMemo(() => data ? vectorToPie(data) : [], [data]);
@@ -76438,8 +76466,9 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         error.message
       ] });
     }
+    const valueFormatter = formatValue ?? formatBytes;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(WidthHeightDiv, { $width: width, $height: height, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResponsiveContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(PieChart, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => formatBytes(v) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { formatter: (v) => valueFormatter(v) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Pie, { data: slices, dataKey: "value", nameKey: "id", label: true, children: slices.map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { fill: `hsl(${i * 60 % 360}, 70%, 55%)` }, `cell-${i}`)) })
     ] }) }) });
   };
@@ -76462,6 +76491,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     baseUrl,
     query = "container_memory_usage_bytes",
     refetchInterval,
+    formatValue,
     title = "Vector → Table"
   }) => {
     const { data, isLoading, error } = usePromVector({ baseUrl, query, refetchInterval });
@@ -76469,6 +76499,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
       const rows = data ? vectorToTableRows(data) : [];
       return rows.map((r) => ({ key: r.id, ...r }));
     }, [data]);
+    const valueFormatter = formatValue ?? formatBytes;
     const columns = React$1.useMemo(
       () => [
         {
@@ -76484,7 +76515,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           dataIndex: "value",
           key: "value",
           align: "right",
-          render: (v) => formatBytes(v),
+          render: (v) => valueFormatter(v),
           sorter: (a, b) => a.value - b.value,
           defaultSortOrder: "descend",
           width: 160
@@ -76498,7 +76529,7 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
           width: 220
         }
       ],
-      []
+      [valueFormatter]
     );
     if (error) {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -76583,9 +76614,12 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
     }
     const v = gauge?.value;
     const safeV = v == null || !Number.isFinite(v) ? null : v;
+    const valueFormatter = formatValue ?? ((val) => String(val));
     const denom = max - min;
     const percent = safeV == null || !Number.isFinite(denom) || denom === 0 ? 0 : Math.round(clamp01((safeV - min) / denom) * 100);
-    const label = safeV == null ? "—" : formatValue ? formatValue(safeV) : String(safeV);
+    const label = safeV == null ? "-" : valueFormatter(safeV);
+    const minLabel = valueFormatter(min);
+    const maxLabel = valueFormatter(max);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Card, { size: "small", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "secondary", children: title }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer$1, { $space: 8, $samespace: true }),
@@ -76596,9 +76630,9 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         " ",
         /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Typography.Text, { type: "secondary", children: [
           "(",
-          min,
-          " → ",
-          max,
+          minLabel,
+          " - ",
+          maxLabel,
           ")"
         ] })
       ] }) }),
@@ -76623,13 +76657,44 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
       error.message ?? String(error)
     ] });
     const value = stat?.value;
-    const display = value == null || !Number.isFinite(value) ? "—" : formatValue ? formatValue(value) : value;
+    const valueFormatter = formatValue ?? ((v) => v);
+    const display = value == null || !Number.isFinite(value) ? "-" : valueFormatter(value);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(antd.Card, { size: "small", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Typography.Text, { type: "secondary", children: title }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(antd.Statistic, { value: display, loading: isLoading })
     ] });
   };
 
+  const createValueFormatter = ({
+    formatter,
+    unit
+  }) => {
+    if (formatter === "none") {
+      return (value) => {
+        return String(value);
+      };
+    }
+    if (formatter === "bytes") {
+      return (value) => {
+        const num = typeof value === "number" ? value : typeof value === "string" ? Number(value) : NaN;
+        return Number.isFinite(num) ? formatBytesAuto(num) : value != null ? String(value) : "";
+      };
+    }
+    if (formatter === "cores") {
+      return (value) => {
+        const num = typeof value === "number" ? value : typeof value === "string" ? Number(value) : NaN;
+        return Number.isFinite(num) ? formatCoresAuto(num) : value != null ? String(value) : "";
+      };
+    }
+    if (formatter === "unit") {
+      return (value) => {
+        const strValue = String(value);
+        return `${strValue} ${unit}`;
+      };
+    }
+    return void 0;
+  };
+
   const COMPONENTS = {
     MatrixToAreaMulti,
     MatrixToAreaSingle,
@@ -76663,6 +76728,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
       min,
       max,
       topN,
+      formatter,
+      unit,
       ...props
     } = data;
     const partsOfUrl = usePartsOfUrl();
@@ -76676,7 +76743,8 @@ Take a look at the reducer(s) handling this action type: ${action.type}.
         v === void 0 ? void 0 : parseAll({ text: v, replaceValues, multiQueryData })
       ])
     );
-    const preparedProps = { width, height, refetchInterval, min, max, topN, ...parsedProps };
+    const formatValue = createValueFormatter({ formatter, unit });
+    const preparedProps = { width, height, refetchInterval, min, max, topN, formatValue, ...parsedProps };
     if (isMultiqueryLoading) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading multiquery" });
     }