feat: Categorical dashboard filters

app/charts/column/chart-column.tsx

@@ -25,8 +25,9 @@ import {
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
 import { ColumnConfig, useChartConfigFilters } from "@/config-types";
+import { hasChartConfigs } from "@/configurator";
 import { TimeSlider } from "@/configurator/interactive-filters/time-slider";
-import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
+import { useConfiguratorState } from "@/src";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -40,10 +41,10 @@ const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
   const { chartConfig, dimensions } = props;
   const { fields, interactiveFiltersConfig } = chartConfig;
   const filters = useChartConfigFilters(chartConfig);
-  const dashboardFilters = useDashboardInteractiveFilters();
+  const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
   const showTimeBrush = shouldShowBrush(
     interactiveFiltersConfig,
-    dashboardFilters.timeRange
+    dashboardFilters?.timeRange
   );
   return (
     <>

app/charts/combo/chart-combo-line-column.tsx

@@ -12,7 +12,8 @@ import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multipl
 import { Ruler } from "@/charts/shared/interaction/ruler";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { ComboLineColumnConfig } from "@/config-types";
-import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
+import { hasChartConfigs } from "@/configurator";
+import { useConfiguratorState } from "@/src";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -26,7 +27,7 @@ const ChartComboLineColumn = memo(
   (props: ChartProps<ComboLineColumnConfig>) => {
     const { chartConfig } = props;
     const { interactiveFiltersConfig } = chartConfig;
-    const dashboardFilters = useDashboardInteractiveFilters();
+    const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
     return (
       <ComboLineColumnChart {...props}>
         <ChartContainer>
@@ -38,7 +39,7 @@ const ChartComboLineColumn = memo(
             <InteractionColumns />
             {shouldShowBrush(
               interactiveFiltersConfig,
-              dashboardFilters.timeRange
+              dashboardFilters?.timeRange
             ) && <BrushTime />}
           </ChartSvg>
           <HoverDotMultiple />

app/charts/combo/chart-combo-line-dual.tsx

@@ -12,7 +12,8 @@ import { Ruler } from "@/charts/shared/interaction/ruler";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
 import { ComboLineDualConfig } from "@/config-types";
-import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
+import { hasChartConfigs } from "@/configurator";
+import { useConfiguratorState } from "@/src";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -25,7 +26,7 @@ export const ChartComboLineDualVisualization = (
 const ChartComboLineDual = memo((props: ChartProps<ComboLineDualConfig>) => {
   const { chartConfig } = props;
   const { interactiveFiltersConfig } = chartConfig;
-  const dashboardFilters = useDashboardInteractiveFilters();
+  const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
   return (
     <ComboLineDualChart {...props}>
       <ChartContainer>
@@ -37,7 +38,7 @@ const ChartComboLineDual = memo((props: ChartProps<ComboLineDualConfig>) => {
           <InteractionHorizontal />
           {shouldShowBrush(
             interactiveFiltersConfig,
-            dashboardFilters.timeRange
+            dashboardFilters?.timeRange
           ) && <BrushTime />}
         </ChartSvg>
         <HoverDotMultiple />

app/charts/combo/chart-combo-line-single.tsx

@@ -12,7 +12,8 @@ import { Ruler } from "@/charts/shared/interaction/ruler";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
 import { ComboLineSingleConfig } from "@/config-types";
-import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
+import { hasChartConfigs } from "@/configurator";
+import { useConfiguratorState } from "@/src";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -26,7 +27,7 @@ const ChartComboLineSingle = memo(
   (props: ChartProps<ComboLineSingleConfig>) => {
     const { chartConfig } = props;
     const { interactiveFiltersConfig } = chartConfig;
-    const dashboardFilters = useDashboardInteractiveFilters();
+    const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
     return (
       <ComboLineSingleChart {...props}>
         <ChartContainer>
@@ -36,7 +37,7 @@ const ChartComboLineSingle = memo(
             <InteractionHorizontal />
             {shouldShowBrush(
               interactiveFiltersConfig,
-              dashboardFilters.timeRange
+              dashboardFilters?.timeRange
             ) && <BrushTime />}
           </ChartSvg>
           <HoverDotMultiple />

app/charts/line/chart-lines.tsx

@@ -17,7 +17,7 @@ import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
 import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
 import { LineConfig } from "@/config-types";
-import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
+import { hasChartConfigs, useConfiguratorState } from "@/configurator";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -30,7 +30,7 @@ export const ChartLinesVisualization = (
 const ChartLines = memo((props: ChartProps<LineConfig>) => {
   const { chartConfig } = props;
   const { fields, interactiveFiltersConfig } = chartConfig;
-  const dashboardFilters = useDashboardInteractiveFilters();
+  const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
   return (
     <LineChart {...props}>
       <ChartContainer>
@@ -41,7 +41,7 @@ const ChartLines = memo((props: ChartProps<LineConfig>) => {
           <InteractionHorizontal />
           {shouldShowBrush(
             interactiveFiltersConfig,
-            dashboardFilters.timeRange
+            dashboardFilters?.timeRange
           ) && <BrushTime />}
         </ChartSvg>
 

app/charts/shared/chart-dimensions.tsx

@@ -9,11 +9,11 @@ import { Bounds, Margins } from "@/charts/shared/use-size";
 import { CHART_GRID_MIN_HEIGHT } from "@/components/react-grid";
 import {
   ChartConfig,
+  DashboardFiltersConfig,
   hasChartConfigs,
   isLayoutingFreeCanvas,
   useConfiguratorState,
 } from "@/configurator";
-import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
 import { getTextWidth } from "@/utils/get-text-width";
 
 type ComputeChartPaddingProps = {
@@ -29,7 +29,7 @@ type ComputeChartPaddingProps = {
 
 const computeChartPadding = (
   props: ComputeChartPaddingProps & {
-    dashboardFilters: ReturnType<typeof useDashboardInteractiveFilters>;
+    dashboardFilters: DashboardFiltersConfig | undefined;
   }
 ) => {
   const {
@@ -61,7 +61,7 @@ const computeChartPadding = (
   );
 
   let bottom =
-    (!dashboardFilters.timeRange?.active &&
+    (!dashboardFilters?.timeRange.active &&
       !!interactiveFiltersConfig?.timeRange.active) ||
     animationPresent
       ? BRUSH_BOTTOM_SPACE
@@ -87,7 +87,7 @@ export const useChartPadding = (props: ComputeChartPaddingProps) => {
     bandDomain,
     normalize,
   } = props;
-  const dashboardFilters = useDashboardInteractiveFilters();
+  const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
   return useMemo(() => {
     return computeChartPadding({
       yScale,

app/charts/shared/chart-state.ts

@@ -32,6 +32,8 @@ import {
   GenericField,
   InteractiveFiltersConfig,
   getAnimationField,
+  hasChartConfigs,
+  useConfiguratorState,
 } from "@/configurator";
 import {
   parseDate,
@@ -57,10 +59,7 @@ import {
 } from "@/domain/data";
 import { Has } from "@/domain/types";
 import { ScaleType, TimeUnit } from "@/graphql/resolver-types";
-import {
-  useChartInteractiveFilters,
-  useDashboardInteractiveFilters,
-} from "@/stores/interactive-filters";
+import { useChartInteractiveFilters } from "@/stores/interactive-filters";
 
 export type ChartState =
   | AreasState
@@ -508,13 +507,13 @@ export const useChartData = (
   // interactive time range
   const interactiveFromTime = timeRange.from?.getTime();
   const interactiveToTime = timeRange.to?.getTime();
-  const dashboardFilters = useDashboardInteractiveFilters();
+  const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
   const interactiveTimeRangeFilters = useMemo(() => {
     const interactiveTimeRangeFilter: ValuePredicate | null =
       getXAsDate &&
       interactiveFromTime &&
       interactiveToTime &&
-      (interactiveTimeRange?.active || dashboardFilters.timeRange?.active)
+      (interactiveTimeRange?.active || dashboardFilters?.timeRange.active)
         ? (d: Observation) => {
             const time = getXAsDate(d).getTime();
             return time >= interactiveFromTime && time <= interactiveToTime;
@@ -523,7 +522,7 @@ export const useChartData = (
 
     return interactiveTimeRangeFilter ? [interactiveTimeRangeFilter] : [];
   }, [
-    dashboardFilters.timeRange,
+    dashboardFilters?.timeRange,
     getXAsDate,
     interactiveFromTime,
     interactiveToTime,

app/components/dashboard-interactive-filters.tsx

@@ -1,16 +1,13 @@
-import {
-  Collapse,
-  Slider,
-  sliderClasses,
-  useEventCallback,
-} from "@mui/material";
+import { Slider, sliderClasses, useEventCallback } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { makeStyles } from "@mui/styles";
 import { useEffect, useMemo, useState } from "react";
 
 import {
   DashboardTimeRangeFilter,
+  hasChartConfigs,
   InteractiveFiltersTimeRange,
+  useConfiguratorState,
 } from "@/configurator";
 import {
   timeUnitToFormatter,
@@ -181,17 +178,17 @@ const DashboardTimeRangeSlider = ({
 };
 
 export const DashboardInteractiveFilters = () => {
-  const { timeRange } = useDashboardInteractiveFilters();
-  return timeRange?.active ? (
-    <Collapse in={timeRange.active}>
-      <div>
+  const [{ dashboardFilters }] = useConfiguratorState(hasChartConfigs);
+  return (
+    <div>
+      {dashboardFilters?.timeRange.active ? (
         <DashboardTimeRangeSlider
-          filter={timeRange}
-          mounted={timeRange.active}
+          filter={dashboardFilters.timeRange}
+          mounted={dashboardFilters.timeRange.active}
         />
-      </div>
-    </Collapse>
-  ) : null;
+      ) : null}
+    </div>
+  );
 };
 
 function stepFromTimeUnit(timeUnit: TimeUnit | undefined) {

app/config-types.ts

@@ -1150,13 +1150,20 @@ const DashboardTimeRangeFilter = t.type({
     to: t.string,
   }),
 });
-
 export type DashboardTimeRangeFilter = t.TypeOf<
   typeof DashboardTimeRangeFilter
 >;
 
+const DashboardDataFiltersConfig = t.type({
+  componentIris: t.array(t.string),
+});
+export type DashboardDataFiltersConfig = t.TypeOf<
+  typeof DashboardDataFiltersConfig
+>;
+
 const DashboardFiltersConfig = t.type({
   timeRange: DashboardTimeRangeFilter,
+  dataFilters: DashboardDataFiltersConfig,
 });
 export type DashboardFiltersConfig = t.TypeOf<typeof DashboardFiltersConfig>;
 

app/configurator/components/add-dataset-dialog.mock.ts

@@ -109,5 +109,8 @@ export const photovoltaikChartStateMock: ConfiguratorStateConfiguringChart = {
         to: "",
       },
     },
+    dataFilters: {
+      componentIris: [],
+    },
   },
 };