remoraid 3.5.0 → 3.7.0

package/dist/data-visualization/index.cjs

@@ -725,7 +725,7 @@ var require_lodash = __commonJS((exports2, module2) => {
     }
     var runInContext = function runInContext(context) {
       context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-      var { Array: Array2, Date: Date2, Error: Error2, Function: Function2, Math: Math2, Object: Object2, RegExp: RegExp2, String, TypeError: TypeError2 } = context;
+      var { Array: Array2, Date: Date2, Error: Error2, Function: Function2, Math: Math2, Object: Object2, RegExp: RegExp2, String: String2, TypeError: TypeError2 } = context;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -1041,7 +1041,7 @@ var require_lodash = __commonJS((exports2, module2) => {
       Stack2.prototype.has = stackHas;
       Stack2.prototype.set = stackSet;
       function arrayLikeKeys(value, inherited) {
-        var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result2 = skipIndexes ? baseTimes(value.length, String) : [], length = result2.length;
+        var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result2 = skipIndexes ? baseTimes(value.length, String2) : [], length = result2.length;
         for (var key in value) {
           if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
             result2.push(key);
@@ -5463,6 +5463,7 @@ __export(exports_data_visualization, {
   useNivoConfiguration: () => useNivoConfiguration,
   useChartsUserExperience: () => useChartsUserExperience,
   reduceTimeSeriesEntities: () => reduceTimeSeriesEntities,
+  reduceTimeSeriesDimensions: () => reduceTimeSeriesDimensions,
   missingDataAlertProps: () => missingDataAlertProps,
   mergeTimeSeries: () => mergeTimeSeries,
   getChartTypeName: () => getChartTypeName,
@@ -5545,44 +5546,47 @@ function Tooltip({
       /* @__PURE__ */ jsx_runtime.jsxs(import_core.Stack, {
         gap: valuesVerticalGap,
         children: [
-          Object.entries(payload).sort((a, b) => Math.abs(Number(b[1].value)) - Math.abs(Number(a[1].value))).slice(0, maxItems ?? undefined).map(([key, { value, color, unit }], i) => /* @__PURE__ */ jsx_runtime.jsxs(import_core.Group, {
-            gap: valuesHorizontalGap,
-            wrap: "nowrap",
-            justify: "space-between",
-            children: [
-              /* @__PURE__ */ jsx_runtime.jsxs(import_core.Group, {
-                gap: "xs",
-                wrap: "nowrap",
-                align: "center",
-                children: [
-                  color !== undefined && /* @__PURE__ */ jsx_runtime.jsx(import_core.Center, {
-                    children: /* @__PURE__ */ jsx_runtime.jsx(import_icons_react.IconCircleFilled, {
-                      ...theme.componentsProps.icons.medium,
-                      color
+          Object.entries(payload).sort((a, b) => Math.abs(Number(b[1].value)) - Math.abs(Number(a[1].value))).slice(0, maxItems ?? undefined).map(([key, { value, color, unit }], i) => {
+            const formattedValue = String(valueFormat?.(value) ?? value);
+            return /* @__PURE__ */ jsx_runtime.jsxs(import_core.Group, {
+              gap: valuesHorizontalGap,
+              wrap: "nowrap",
+              justify: "space-between",
+              children: [
+                /* @__PURE__ */ jsx_runtime.jsxs(import_core.Group, {
+                  gap: "xs",
+                  wrap: "nowrap",
+                  align: "center",
+                  children: [
+                    color !== undefined && /* @__PURE__ */ jsx_runtime.jsx(import_core.Center, {
+                      children: /* @__PURE__ */ jsx_runtime.jsx(import_icons_react.IconCircleFilled, {
+                        ...theme.componentsProps.icons.medium,
+                        color
+                      })
+                    }),
+                    /* @__PURE__ */ jsx_runtime.jsx(import_core.Text, {
+                      size: "sm",
+                      ...componentsProps?.valueText,
+                      style: {
+                        textWrap: "nowrap",
+                        ...componentsProps?.valueText?.style
+                      },
+                      children: key
                     })
-                  }),
-                  /* @__PURE__ */ jsx_runtime.jsx(import_core.Text, {
-                    size: "sm",
-                    ...componentsProps?.valueText,
-                    style: {
-                      textWrap: "nowrap",
-                      ...componentsProps?.valueText?.style
-                    },
-                    children: key
-                  })
-                ]
-              }, `entry-key-${i}`),
-              /* @__PURE__ */ jsx_runtime.jsx(import_core.Text, {
-                size: "sm",
-                ...componentsProps?.valueText,
-                style: {
-                  textWrap: "nowrap",
-                  ...componentsProps?.valueText?.style
-                },
-                children: `${valueFormat !== undefined ? valueFormat(value) : value} ${unit ?? ""}`
-              }, `entry-value-${i}`)
-            ]
-          }, i)),
+                  ]
+                }, `entry-key-${i}`),
+                /* @__PURE__ */ jsx_runtime.jsx(import_core.Text, {
+                  size: "sm",
+                  ...componentsProps?.valueText,
+                  style: {
+                    textWrap: "nowrap",
+                    ...componentsProps?.valueText?.style
+                  },
+                  children: unit ? `${formattedValue} ${unit}` : formattedValue
+                }, `entry-value-${i}`)
+              ]
+            }, i);
+          }),
           maxItems !== null && Object.entries(payload).length > maxItems && /* @__PURE__ */ jsx_runtime.jsxs(import_core.Text, {
             size: "sm",
             c: "dimmed",
@@ -5804,6 +5808,18 @@ var reduceTimeSeriesEntities = ({ values, units }, reducer, initial) => {
     }))
   };
 };
+var reduceTimeSeriesDimensions = ({ values }, reducer, initial, units) => {
+  return {
+    units,
+    values: values.map(({ date, entities }) => ({
+      date,
+      entities: Object.fromEntries(Object.entries(entities).map(([entity, dimensions]) => [
+        entity,
+        Object.entries(dimensions).reduce(reducer, structuredClone(initial))
+      ]))
+    }))
+  };
+};
 var emptyTimeSeriesData = {
   values: [],
   units: {}
@@ -5898,6 +5914,7 @@ function RingSummary({
 // src/data-visualization/components/Chart/index.tsx
 var import_lodash2 = __toESM(require_lodash());
 var import_d3_array = require("d3-array");
+var import_colors = require("@nivo/colors");
 var jsx_runtime5 = require("react/jsx-runtime");
 function Chart({
   type,
@@ -5918,11 +5935,13 @@ function Chart({
   let includeEntityChips = true;
   let includeLegend = false;
   let entities = [];
+  let chartColors = [];
   let chart;
   const controls = [];
   if (type === "timeSeriesStackedAreas" /* TimeSeriesStackedAreas */) {
     includeEntityChips = options.includeEntityChips ?? true;
     includeLegend = options?.includeLegend ?? includeLegend;
+    chartColors = componentsProps?.chart?.colors ?? options?.colors ?? nivoConfiguration.colors;
     data.values.sort((a, b) => a.date.getTime() - b.date.getTime());
     const guideValue = data.values.length > 0 ? data.values[data.values.length - 1 - windowOffset] : null;
     const chartData = [];
@@ -5952,7 +5971,6 @@ function Chart({
     } : undefined;
     const unit = data.units[options.dimension];
     chart = /* @__PURE__ */ jsx_runtime5.jsx(import_stream.ResponsiveStream, {
-      colors: options.colors ?? nivoConfiguration.colors,
       theme: nivoConfiguration.theme,
       data: chartData,
       keys: entities,
@@ -6011,7 +6029,8 @@ function Chart({
       }),
       curve: "linear",
       offsetType: "diverging",
-      ...componentsProps?.chart
+      ...componentsProps?.chart,
+      colors: chartColors
     }, entities.join(","));
     const increaseWindowOffsetButton = /* @__PURE__ */ jsx_runtime5.jsx(import_core10.RemoraidButton, {
       mounted: window !== null,
@@ -6115,11 +6134,13 @@ function Chart({
       p95Value = import_d3_array.quantileSorted(sortedSparklineData, 0.95) ?? 0;
       progress = Math.max(0, Math.min(100, p95Value === p5Value ? 0 : (currentValue - p5Value) / (p95Value - p5Value) * 100));
     }
+    const formattedCurrentValue = String(options.valueFormat?.(currentValue) ?? currentValue);
+    const unit = data.units[options.dimension];
     chart = /* @__PURE__ */ jsx_runtime5.jsx(RingSummary, {
       label: options.entity,
       color: options.color ?? chartsUserExperience.colors[0],
       progress,
-      value: sparklineData.length > 0 ? `${options.valueFormat?.(currentValue) ?? currentValue} ${data.units[options.dimension]}` : "No data",
+      value: sparklineData.length > 0 ? unit ? `${formattedCurrentValue} ${unit}` : formattedCurrentValue : "No data",
       icon: options.icon,
       sparklineData,
       ...componentsProps?.chart
@@ -6130,6 +6151,7 @@ function Chart({
   }
   const includeControls = controls.length > 0;
   const numCols = Number(includeEntityChips) + Number(includeControls);
+  const getEntityColor = import_colors.useOrdinalColorScale(chartColors, "id");
   return /* @__PURE__ */ jsx_runtime5.jsx(import_core9.Transition, {
     mounted,
     children: (transitionStyle) => /* @__PURE__ */ jsx_runtime5.jsxs(import_core9.Paper, {
@@ -6156,13 +6178,13 @@ function Chart({
                 onChange: (newValue) => {
                   setHiddenEntities(entities.filter((e) => !newValue.includes(e)));
                 },
-                children: entities.map((entitiy, i) => /* @__PURE__ */ jsx_runtime5.jsx(import_core9.Chip, {
-                  value: entitiy,
+                children: entities.map((entity, i) => /* @__PURE__ */ jsx_runtime5.jsx(import_core9.Chip, {
+                  value: entity,
                   icon: /* @__PURE__ */ jsx_runtime5.jsx(import_icons_react2.IconCheck, {
                     ...theme.componentsProps.icons.tiny
                   }),
-                  color: chartsUserExperience.colors[i % chartsUserExperience.colors.length],
-                  children: entitiy
+                  color: getEntityColor({ id: entity, path: "" }),
+                  children: entity
                 }, i))
               })
             }),
@@ -6398,26 +6420,33 @@ var import_modals = require("@mantine/modals");
 var import_icons_react4 = require("@tabler/icons-react");
 var import_react5 = require("react");
 var import_core18 = require("remoraid/core");
+var import_colors2 = require("@nivo/colors");
 var jsx_runtime11 = require("react/jsx-runtime");
 var defaultTimeseriesExplorerWidgetId = "timeseries-explorer";
 function TimeSeriesExplorerWidget({
   data,
   isLoadingData,
+  hideZeroOnlyEntities = true,
   widgetProps,
   componentsProps
 }) {
-  const { userExperience: chartsUserExperience } = useChartsUserExperience();
+  const nivoConfiguration = useNivoConfiguration();
   const [selectedDimension, setSelectedDimension] = import_react5.useState(null);
   const dimensions = data ? Object.keys(data.units) : [];
+  const chartColors = componentsProps?.primaryChart?.options?.colors ?? nivoConfiguration.colors;
   const entities = data && data.values.length > 0 ? Object.keys(data.values[0].entities) : [];
-  const entityColors = entities.reduce((t, entity, i) => ({
+  const getEntityColor = import_colors2.useOrdinalColorScale(chartColors, "id");
+  const entityColors = entities.reduce((t, entity) => ({
     ...t,
-    [entity]: chartsUserExperience.colors[i % chartsUserExperience.colors.length]
+    [entity]: getEntityColor({ id: entity, path: "" })
   }), {});
-  const axisLegends = data ? dimensions.reduce((t, d) => ({
-    ...t,
-    [d]: `${d} in ${data.units[d]}`
-  }), {}) : {};
+  const axisLegends = data ? dimensions.reduce((t, d) => {
+    const unit = data.units[d];
+    return {
+      ...t,
+      [d]: unit !== null ? `${d} in ${unit}` : d
+    };
+  }, {}) : {};
   import_react5.useEffect(() => {
     if (!dimensions || dimensions.length < 1) {
       if (selectedDimension) {
@@ -6495,15 +6524,17 @@ function TimeSeriesExplorerWidget({
           },
           ...componentsProps?.entitiesGrid,
           children: entities.map((entity) => {
+            const entityChartData = reduceTimeSeriesEntities(data, (t, [e, value]) => e === entity ? { [entity]: value } : t, {
+              [entity]: {
+                [selectedDimension]: 0
+              }
+            });
+            const hasNonZeroValue = entityChartData.values.some((v) => [v.entities[entity][selectedDimension]].flat(2)[0] !== 0);
             const entityChartProps = {
               type: "timeSeriesStackedAreas" /* TimeSeriesStackedAreas */,
               ...componentsProps?.chart,
               ...componentsProps?.entityChart,
-              data: reduceTimeSeriesEntities(data, (t, [e, value]) => e === entity ? { [entity]: value } : t, {
-                [entity]: {
-                  [selectedDimension]: 0
-                }
-              }),
+              data: entityChartData,
               options: {
                 dimension: selectedDimension,
                 axisBottomLegend: "Time",
@@ -6516,6 +6547,7 @@ function TimeSeriesExplorerWidget({
             };
             return /* @__PURE__ */ jsx_runtime11.jsx(Chart, {
               h: 275,
+              mounted: !(hideZeroOnlyEntities && !hasNonZeroValue),
               ...entityChartProps,
               additionalControls: [
                 /* @__PURE__ */ jsx_runtime11.jsx(import_core18.RemoraidButton, {

package/dist/data-visualization/index.d.ts

@@ -327,8 +327,8 @@ interface ChartsUserExperience {
 	colors: string[];
 }
 interface NivoConfiguration {
+	colors: OrdinalColorScaleConfig;
 	theme?: PartialNivoTheme;
-	colors?: OrdinalColorScaleConfig;
 }
 interface NivoConfigurationDependencies {
 	remoraidTheme: RemoraidTheme;
@@ -349,7 +349,7 @@ interface TimeSeriesData<
 	Dimension extends string
 > {
 	values: TimeSeriesValue<EntityName, Dimension>[];
-	units: Record<Dimension, string>;
+	units: Record<Dimension, string | null>;
 }
 declare enum ChartType {
 	TimeSeriesStackedAreas = "timeSeriesStackedAreas",
@@ -389,7 +389,7 @@ interface TooltipProps4 {
 	payload: Record<string, {
 		value: number | string
 		color?: string
-		unit?: string
+		unit?: string | null
 	}>;
 	label?: string;
 	valueFormat?: (value: number | string) => number | string;
@@ -491,6 +491,7 @@ type PartialChartProps = Omit<Partial<ChartPropsGeneric<ChartType.TimeSeriesStac
 interface TimeSeriesExplorerWidgetProps {
 	data?: TimeSeriesData<string, string>;
 	isLoadingData?: boolean;
+	hideZeroOnlyEntities?: boolean;
 	widgetProps?: Partial<WidgetProps>;
 	componentsProps?: {
 		contentContainer?: Partial<StackProps6>
@@ -501,7 +502,7 @@ interface TimeSeriesExplorerWidgetProps {
 		missingDataAlert?: Partial<AlertMinimalProps>
 	};
 }
-declare function TimeSeriesExplorerWidget({ data, isLoadingData, widgetProps, componentsProps }: TimeSeriesExplorerWidgetProps): ReactNode52;
+declare function TimeSeriesExplorerWidget({ data, isLoadingData, hideZeroOnlyEntities, widgetProps, componentsProps }: TimeSeriesExplorerWidgetProps): ReactNode52;
 import { ReactNode as ReactNode53 } from "react";
 declare const defaultVerticalChartsWidgetId = "vertical-charts";
 interface VerticalChartsWidgetProps {
@@ -522,8 +523,13 @@ declare const reduceTimeSeriesEntities: <
 	EOut extends string,
 	D extends string
 >({ values, units }: TimeSeriesData<EIn, D>, reducer: (previousValue: Record<EOut, Record<D, number | number[]>>, currentValue: [EIn, Record<D, number | number[]>], currentIndex: number, array: [EIn, Record<D, number | number[]>][]) => Record<EOut, Record<D, number | number[]>>, initial: Record<EOut, Record<D, number | number[]>>) => TimeSeriesData<EOut, D>;
+declare const reduceTimeSeriesDimensions: <
+	EntityName extends string,
+	DIn extends string,
+	DOut extends string
+>({ values }: TimeSeriesData<EntityName, DIn>, reducer: (previousValue: Record<DOut, number | number[]>, currentValue: [DIn, number | number[]], currentIndex: number, array: [DIn, number | number[]][]) => Record<DOut, number | number[]>, initial: Record<DOut, number | number[]>, units: Record<DOut, string | null>) => TimeSeriesData<EntityName, DOut>;
 declare const emptyTimeSeriesData: TimeSeriesData<string, string>;
 declare const missingDataAlertProps: (props?: Partial<AlertMinimalProps>) => AlertMinimalProps;
 declare const downloadJson: (data: any, filename?: string) => void;
 declare const copyToClipboard: (value: string) => Promise<void>;
-export { useNivoConfiguration, useChartsUserExperience, reduceTimeSeriesEntities, missingDataAlertProps, mergeTimeSeries, getChartTypeName, emptyTimeSeriesData, downloadJson, defaultVerticalChartsWidgetId, defaultUserExperienceCookieName2 as defaultUserExperienceCookieName, defaultUserExperience2 as defaultUserExperience, defaultTimeseriesExplorerWidgetId, defaultSingleChartWidgetId, defaultJsonWidgetId, defaultChartsSettingsWidgetId, defaultChartHeights, createNivoConfiguration, copyToClipboard, VerticalChartsWidgetProps, VerticalChartsWidget, TimeSeriesValue, TimeSeriesStackedAreasChartWindow, TimeSeriesExplorerWidgetProps, TimeSeriesExplorerWidget, TimeSeriesData, SingleChartWidgetProps, SingleChartWidget, RemoraidDataVisualizationProviderProps, RemoraidDataVisualizationProvider, NivoConfigurationProviderProps, NivoConfigurationDependencies, NivoConfigurationCallback, NivoConfiguration, JSONWidgetProps, JSONWidget, ChartsUserExperience, ChartsSettingsProps, ChartsSettings, ChartType, ChartPropsGeneric, ChartProps, ChartOptions, ChartData, Chart };
+export { useNivoConfiguration, useChartsUserExperience, reduceTimeSeriesEntities, reduceTimeSeriesDimensions, missingDataAlertProps, mergeTimeSeries, getChartTypeName, emptyTimeSeriesData, downloadJson, defaultVerticalChartsWidgetId, defaultUserExperienceCookieName2 as defaultUserExperienceCookieName, defaultUserExperience2 as defaultUserExperience, defaultTimeseriesExplorerWidgetId, defaultSingleChartWidgetId, defaultJsonWidgetId, defaultChartsSettingsWidgetId, defaultChartHeights, createNivoConfiguration, copyToClipboard, VerticalChartsWidgetProps, VerticalChartsWidget, TimeSeriesValue, TimeSeriesStackedAreasChartWindow, TimeSeriesExplorerWidgetProps, TimeSeriesExplorerWidget, TimeSeriesData, SingleChartWidgetProps, SingleChartWidget, RemoraidDataVisualizationProviderProps, RemoraidDataVisualizationProvider, NivoConfigurationProviderProps, NivoConfigurationDependencies, NivoConfigurationCallback, NivoConfiguration, JSONWidgetProps, JSONWidget, ChartsUserExperience, ChartsSettingsProps, ChartsSettings, ChartType, ChartPropsGeneric, ChartProps, ChartOptions, ChartData, Chart };

package/dist/data-visualization/index.js

@@ -701,7 +701,7 @@ var require_lodash = __commonJS((exports, module) => {
     }
     var runInContext = function runInContext(context) {
       context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-      var { Array: Array2, Date: Date2, Error: Error2, Function: Function2, Math: Math2, Object: Object2, RegExp: RegExp2, String, TypeError: TypeError2 } = context;
+      var { Array: Array2, Date: Date2, Error: Error2, Function: Function2, Math: Math2, Object: Object2, RegExp: RegExp2, String: String2, TypeError: TypeError2 } = context;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -1017,7 +1017,7 @@ var require_lodash = __commonJS((exports, module) => {
       Stack2.prototype.has = stackHas;
       Stack2.prototype.set = stackSet;
       function arrayLikeKeys(value, inherited) {
-        var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result2 = skipIndexes ? baseTimes(value.length, String) : [], length = result2.length;
+        var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result2 = skipIndexes ? baseTimes(value.length, String2) : [], length = result2.length;
         for (var key in value) {
           if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
             result2.push(key);
@@ -5503,44 +5503,47 @@ function Tooltip({
       /* @__PURE__ */ jsxs(Stack, {
         gap: valuesVerticalGap,
         children: [
-          Object.entries(payload).sort((a, b) => Math.abs(Number(b[1].value)) - Math.abs(Number(a[1].value))).slice(0, maxItems ?? undefined).map(([key, { value, color, unit }], i) => /* @__PURE__ */ jsxs(Group, {
-            gap: valuesHorizontalGap,
-            wrap: "nowrap",
-            justify: "space-between",
-            children: [
-              /* @__PURE__ */ jsxs(Group, {
-                gap: "xs",
-                wrap: "nowrap",
-                align: "center",
-                children: [
-                  color !== undefined && /* @__PURE__ */ jsx(Center, {
-                    children: /* @__PURE__ */ jsx(IconCircleFilled, {
-                      ...theme.componentsProps.icons.medium,
-                      color
+          Object.entries(payload).sort((a, b) => Math.abs(Number(b[1].value)) - Math.abs(Number(a[1].value))).slice(0, maxItems ?? undefined).map(([key, { value, color, unit }], i) => {
+            const formattedValue = String(valueFormat?.(value) ?? value);
+            return /* @__PURE__ */ jsxs(Group, {
+              gap: valuesHorizontalGap,
+              wrap: "nowrap",
+              justify: "space-between",
+              children: [
+                /* @__PURE__ */ jsxs(Group, {
+                  gap: "xs",
+                  wrap: "nowrap",
+                  align: "center",
+                  children: [
+                    color !== undefined && /* @__PURE__ */ jsx(Center, {
+                      children: /* @__PURE__ */ jsx(IconCircleFilled, {
+                        ...theme.componentsProps.icons.medium,
+                        color
+                      })
+                    }),
+                    /* @__PURE__ */ jsx(Text, {
+                      size: "sm",
+                      ...componentsProps?.valueText,
+                      style: {
+                        textWrap: "nowrap",
+                        ...componentsProps?.valueText?.style
+                      },
+                      children: key
                     })
-                  }),
-                  /* @__PURE__ */ jsx(Text, {
-                    size: "sm",
-                    ...componentsProps?.valueText,
-                    style: {
-                      textWrap: "nowrap",
-                      ...componentsProps?.valueText?.style
-                    },
-                    children: key
-                  })
-                ]
-              }, `entry-key-${i}`),
-              /* @__PURE__ */ jsx(Text, {
-                size: "sm",
-                ...componentsProps?.valueText,
-                style: {
-                  textWrap: "nowrap",
-                  ...componentsProps?.valueText?.style
-                },
-                children: `${valueFormat !== undefined ? valueFormat(value) : value} ${unit ?? ""}`
-              }, `entry-value-${i}`)
-            ]
-          }, i)),
+                  ]
+                }, `entry-key-${i}`),
+                /* @__PURE__ */ jsx(Text, {
+                  size: "sm",
+                  ...componentsProps?.valueText,
+                  style: {
+                    textWrap: "nowrap",
+                    ...componentsProps?.valueText?.style
+                  },
+                  children: unit ? `${formattedValue} ${unit}` : formattedValue
+                }, `entry-value-${i}`)
+              ]
+            }, i);
+          }),
           maxItems !== null && Object.entries(payload).length > maxItems && /* @__PURE__ */ jsxs(Text, {
             size: "sm",
             c: "dimmed",
@@ -5609,10 +5612,7 @@ function ChartsUserExperienceProvider({
 }
 
 // src/data-visualization/components/RemoraidDataVisualizationProvider/NivoConfigurationProvider/index.tsx
-import {
-  useHydratedMantineColorScheme,
-  useRemoraidTheme as useRemoraidTheme2
-} from "remoraid/core";
+import { useHydratedMantineColorScheme, useRemoraidTheme as useRemoraidTheme2 } from "remoraid/core";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var createNivoConfiguration = (customTheme, dependencies) => {
   const userExperience = dependencies?.userExperience ?? defaultUserExperience;
@@ -5782,6 +5782,18 @@ var reduceTimeSeriesEntities = ({ values, units }, reducer, initial) => {
     }))
   };
 };
+var reduceTimeSeriesDimensions = ({ values }, reducer, initial, units) => {
+  return {
+    units,
+    values: values.map(({ date, entities }) => ({
+      date,
+      entities: Object.fromEntries(Object.entries(entities).map(([entity, dimensions]) => [
+        entity,
+        Object.entries(dimensions).reduce(reducer, structuredClone(initial))
+      ]))
+    }))
+  };
+};
 var emptyTimeSeriesData = {
   values: [],
   units: {}
@@ -5883,6 +5895,7 @@ function RingSummary({
 // src/data-visualization/components/Chart/index.tsx
 var import_lodash2 = __toESM(require_lodash(), 1);
 import { quantileSorted } from "d3-array";
+import { useOrdinalColorScale } from "@nivo/colors";
 import { jsx as jsx5, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
 function Chart({
   type,
@@ -5903,11 +5916,13 @@ function Chart({
   let includeEntityChips = true;
   let includeLegend = false;
   let entities = [];
+  let chartColors = [];
   let chart;
   const controls = [];
   if (type === "timeSeriesStackedAreas" /* TimeSeriesStackedAreas */) {
     includeEntityChips = options.includeEntityChips ?? true;
     includeLegend = options?.includeLegend ?? includeLegend;
+    chartColors = componentsProps?.chart?.colors ?? options?.colors ?? nivoConfiguration.colors;
     data.values.sort((a, b) => a.date.getTime() - b.date.getTime());
     const guideValue = data.values.length > 0 ? data.values[data.values.length - 1 - windowOffset] : null;
     const chartData = [];
@@ -5937,7 +5952,6 @@ function Chart({
     } : undefined;
     const unit = data.units[options.dimension];
     chart = /* @__PURE__ */ jsx5(ResponsiveStream, {
-      colors: options.colors ?? nivoConfiguration.colors,
       theme: nivoConfiguration.theme,
       data: chartData,
       keys: entities,
@@ -5996,7 +6010,8 @@ function Chart({
       }),
       curve: "linear",
       offsetType: "diverging",
-      ...componentsProps?.chart
+      ...componentsProps?.chart,
+      colors: chartColors
     }, entities.join(","));
     const increaseWindowOffsetButton = /* @__PURE__ */ jsx5(RemoraidButton, {
       mounted: window !== null,
@@ -6100,11 +6115,13 @@ function Chart({
       p95Value = quantileSorted(sortedSparklineData, 0.95) ?? 0;
       progress = Math.max(0, Math.min(100, p95Value === p5Value ? 0 : (currentValue - p5Value) / (p95Value - p5Value) * 100));
     }
+    const formattedCurrentValue = String(options.valueFormat?.(currentValue) ?? currentValue);
+    const unit = data.units[options.dimension];
     chart = /* @__PURE__ */ jsx5(RingSummary, {
       label: options.entity,
       color: options.color ?? chartsUserExperience.colors[0],
       progress,
-      value: sparklineData.length > 0 ? `${options.valueFormat?.(currentValue) ?? currentValue} ${data.units[options.dimension]}` : "No data",
+      value: sparklineData.length > 0 ? unit ? `${formattedCurrentValue} ${unit}` : formattedCurrentValue : "No data",
       icon: options.icon,
       sparklineData,
       ...componentsProps?.chart
@@ -6115,6 +6132,7 @@ function Chart({
   }
   const includeControls = controls.length > 0;
   const numCols = Number(includeEntityChips) + Number(includeControls);
+  const getEntityColor = useOrdinalColorScale(chartColors, "id");
   return /* @__PURE__ */ jsx5(Transition, {
     mounted,
     children: (transitionStyle) => /* @__PURE__ */ jsxs3(Paper2, {
@@ -6141,13 +6159,13 @@ function Chart({
                 onChange: (newValue) => {
                   setHiddenEntities(entities.filter((e) => !newValue.includes(e)));
                 },
-                children: entities.map((entitiy, i) => /* @__PURE__ */ jsx5(Chip, {
-                  value: entitiy,
+                children: entities.map((entity, i) => /* @__PURE__ */ jsx5(Chip, {
+                  value: entity,
                   icon: /* @__PURE__ */ jsx5(IconCheck, {
                     ...theme.componentsProps.icons.tiny
                   }),
-                  color: chartsUserExperience.colors[i % chartsUserExperience.colors.length],
-                  children: entitiy
+                  color: getEntityColor({ id: entity, path: "" }),
+                  children: entity
                 }, i))
               })
             }),
@@ -6407,26 +6425,33 @@ import {
   RemoraidButton as RemoraidButton2,
   Widget as Widget3
 } from "remoraid/core";
+import { useOrdinalColorScale as useOrdinalColorScale2 } from "@nivo/colors";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultTimeseriesExplorerWidgetId = "timeseries-explorer";
 function TimeSeriesExplorerWidget({
   data,
   isLoadingData,
+  hideZeroOnlyEntities = true,
   widgetProps,
   componentsProps
 }) {
-  const { userExperience: chartsUserExperience } = useChartsUserExperience();
+  const nivoConfiguration = useNivoConfiguration();
   const [selectedDimension, setSelectedDimension] = useState3(null);
   const dimensions = data ? Object.keys(data.units) : [];
+  const chartColors = componentsProps?.primaryChart?.options?.colors ?? nivoConfiguration.colors;
   const entities = data && data.values.length > 0 ? Object.keys(data.values[0].entities) : [];
-  const entityColors = entities.reduce((t, entity, i) => ({
+  const getEntityColor = useOrdinalColorScale2(chartColors, "id");
+  const entityColors = entities.reduce((t, entity) => ({
     ...t,
-    [entity]: chartsUserExperience.colors[i % chartsUserExperience.colors.length]
+    [entity]: getEntityColor({ id: entity, path: "" })
   }), {});
-  const axisLegends = data ? dimensions.reduce((t, d) => ({
-    ...t,
-    [d]: `${d} in ${data.units[d]}`
-  }), {}) : {};
+  const axisLegends = data ? dimensions.reduce((t, d) => {
+    const unit = data.units[d];
+    return {
+      ...t,
+      [d]: unit !== null ? `${d} in ${unit}` : d
+    };
+  }, {}) : {};
   useEffect(() => {
     if (!dimensions || dimensions.length < 1) {
       if (selectedDimension) {
@@ -6504,15 +6529,17 @@ function TimeSeriesExplorerWidget({
           },
           ...componentsProps?.entitiesGrid,
           children: entities.map((entity) => {
+            const entityChartData = reduceTimeSeriesEntities(data, (t, [e, value]) => e === entity ? { [entity]: value } : t, {
+              [entity]: {
+                [selectedDimension]: 0
+              }
+            });
+            const hasNonZeroValue = entityChartData.values.some((v) => [v.entities[entity][selectedDimension]].flat(2)[0] !== 0);
             const entityChartProps = {
               type: "timeSeriesStackedAreas" /* TimeSeriesStackedAreas */,
               ...componentsProps?.chart,
               ...componentsProps?.entityChart,
-              data: reduceTimeSeriesEntities(data, (t, [e, value]) => e === entity ? { [entity]: value } : t, {
-                [entity]: {
-                  [selectedDimension]: 0
-                }
-              }),
+              data: entityChartData,
               options: {
                 dimension: selectedDimension,
                 axisBottomLegend: "Time",
@@ -6525,6 +6552,7 @@ function TimeSeriesExplorerWidget({
             };
             return /* @__PURE__ */ jsx10(Chart, {
               h: 275,
+              mounted: !(hideZeroOnlyEntities && !hasNonZeroValue),
               ...entityChartProps,
               additionalControls: [
                 /* @__PURE__ */ jsx10(RemoraidButton2, {
@@ -6557,6 +6585,7 @@ export {
   useNivoConfiguration,
   useChartsUserExperience,
   reduceTimeSeriesEntities,
+  reduceTimeSeriesDimensions,
   missingDataAlertProps,
   mergeTimeSeries,
   getChartTypeName,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remoraid",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "author": "Konrad Goldammer",
   "repository": {
     "type": "git",