remoraid 3.6.0 → 3.7.0

package/dist/data-visualization/index.cjs

@@ -5914,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,
@@ -5934,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 = [];
@@ -5968,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,
@@ -6027,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,
@@ -6148,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, {
@@ -6174,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))
               })
             }),
@@ -6416,21 +6420,25 @@ 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) => {
     const unit = data.units[d];
@@ -6516,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",
@@ -6537,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;
@@ -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 {

package/dist/data-visualization/index.js

@@ -5612,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;
@@ -5898,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,
@@ -5918,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 = [];
@@ -5952,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,
@@ -6011,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,
@@ -6132,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, {
@@ -6158,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))
               })
             }),
@@ -6424,21 +6425,25 @@ 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) => {
     const unit = data.units[d];
@@ -6524,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",
@@ -6545,6 +6552,7 @@ function TimeSeriesExplorerWidget({
             };
             return /* @__PURE__ */ jsx10(Chart, {
               h: 275,
+              mounted: !(hideZeroOnlyEntities && !hasNonZeroValue),
               ...entityChartProps,
               additionalControls: [
                 /* @__PURE__ */ jsx10(RemoraidButton2, {

package/package.json

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