Merge pull request #1545 from visualize-admin/feat/dashboard-filters

Dashboard filters

Author: ptbrowne

app/charts/column/chart-column.tsx

@@ -16,7 +16,7 @@ import {
   AxisWidthBand,
   AxisWidthBandDomain,
 } from "@/charts/shared/axis-width-band";
-import { BrushTime } from "@/charts/shared/brush";
+import { BrushTime, shouldShowBrush } from "@/charts/shared/brush";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -26,6 +26,7 @@ import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
 import { ColumnConfig, useChartConfigFilters } from "@/config-types";
 import { TimeSlider } from "@/configurator/interactive-filters/time-slider";
+import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -39,6 +40,12 @@ export const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
   const { chartConfig, dimensions } = props;
   const { fields, interactiveFiltersConfig } = chartConfig;
   const filters = useChartConfigFilters(chartConfig);
+  const { sharedFilters } = useDashboardInteractiveFilters();
+
+  const showTimeBrush = shouldShowBrush(
+    interactiveFiltersConfig,
+    sharedFilters
+  );
 
   return (
     <>
@@ -49,7 +56,7 @@ export const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
               <AxisHeightLinear /> <AxisWidthBand />
               <ColumnsStacked /> <AxisWidthBandDomain />
               <InteractionColumns />
-              {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+              {showTimeBrush && <BrushTime />}
             </ChartSvg>
             <Tooltip type="multiple" />
           </ChartContainer>
@@ -80,7 +87,7 @@ export const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
               <ErrorWhiskersGrouped />
               <AxisWidthBandDomain />
               <InteractionColumns />
-              {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+              {showTimeBrush && <BrushTime />}
             </ChartSvg>
             <Tooltip type="multiple" />
           </ChartContainer>
@@ -111,7 +118,7 @@ export const ChartColumns = memo((props: ChartProps<ColumnConfig>) => {
               <ErrorWhiskers />
               <AxisWidthBandDomain />
               <InteractionColumns />
-              {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+              {showTimeBrush && <BrushTime />}
             </ChartSvg>
             <Tooltip type="single" />
           </ChartContainer>

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

@@ -6,12 +6,13 @@ import { AxisHeightLinearDual } from "@/charts/combo/axis-height-linear-dual";
 import { ComboLineColumn } from "@/charts/combo/combo-line-column";
 import { ComboLineColumnChart } from "@/charts/combo/combo-line-column-state";
 import { AxisWidthBand } from "@/charts/shared/axis-width-band";
-import { BrushTime } from "@/charts/shared/brush";
+import { BrushTime, shouldShowBrush } from "@/charts/shared/brush";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
 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 { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -25,6 +26,7 @@ export const ChartComboLineColumn = memo(
   (props: ChartProps<ComboLineColumnConfig>) => {
     const { chartConfig } = props;
     const { interactiveFiltersConfig } = chartConfig;
+    const { sharedFilters } = useDashboardInteractiveFilters();
 
     return (
       <ComboLineColumnChart {...props}>
@@ -35,7 +37,9 @@ export const ChartComboLineColumn = memo(
             <AxisWidthBand />
             <ComboLineColumn />
             <InteractionColumns />
-            {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+            {shouldShowBrush(interactiveFiltersConfig, sharedFilters) && (
+              <BrushTime />
+            )}
           </ChartSvg>
           <HoverDotMultiple />
           <Ruler rotate />

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

@@ -5,13 +5,14 @@ import { AxisHeightLinearDual } from "@/charts/combo/axis-height-linear-dual";
 import { ComboLineDual } from "@/charts/combo/combo-line-dual";
 import { ComboLineDualChart } from "@/charts/combo/combo-line-dual-state";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
-import { BrushTime } from "@/charts/shared/brush";
+import { BrushTime, shouldShowBrush } from "@/charts/shared/brush";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
 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 { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -25,6 +26,7 @@ export const ChartComboLineDual = memo(
   (props: ChartProps<ComboLineDualConfig>) => {
     const { chartConfig } = props;
     const { interactiveFiltersConfig } = chartConfig;
+    const { sharedFilters } = useDashboardInteractiveFilters();
 
     return (
       <ComboLineDualChart {...props}>
@@ -35,7 +37,9 @@ export const ChartComboLineDual = memo(
             <AxisTimeDomain />
             <ComboLineDual />
             <InteractionHorizontal />
-            {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+            {shouldShowBrush(interactiveFiltersConfig, sharedFilters) && (
+              <BrushTime />
+            )}
           </ChartSvg>
           <HoverDotMultiple />
           <Ruler />

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

@@ -5,7 +5,7 @@ import { ComboLineSingle } from "@/charts/combo/combo-line-single";
 import { ComboLineSingleChart } from "@/charts/combo/combo-line-single-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
-import { BrushTime } from "@/charts/shared/brush";
+import { BrushTime, shouldShowBrush } from "@/charts/shared/brush";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -17,6 +17,7 @@ import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
 import { InteractionHorizontal } from "@/charts/shared/overlay-horizontal";
 import { ComboLineSingleConfig } from "@/config-types";
+import { useDashboardInteractiveFilters } from "@/stores/interactive-filters";
 
 import { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -30,6 +31,8 @@ export const ChartComboLineSingle = memo(
   (props: ChartProps<ComboLineSingleConfig>) => {
     const { chartConfig, measures } = props;
     const { interactiveFiltersConfig } = chartConfig;
+    const { sharedFilters } = useDashboardInteractiveFilters();
+
     const getLegendItemDimension = useCallback(
       (label: string) => {
         return measures.find((measure) => measure.label === label);
@@ -44,7 +47,9 @@ export const ChartComboLineSingle = memo(
             <AxisHeightLinear /> <AxisTime /> <AxisTimeDomain />
             <ComboLineSingle />
             <InteractionHorizontal />
-            {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+            {shouldShowBrush(interactiveFiltersConfig, sharedFilters) && (
+              <BrushTime />
+            )}
           </ChartSvg>
           <HoverDotMultiple />
           <Ruler />

app/charts/index.ts

@@ -338,7 +338,7 @@ export const META: Meta = {
 
 type GetInitialConfigOptions = {
   key?: string;
-  iris: { iri: string; publishIri: string }[];
+  iris: { iri: string; publishIri: string; joinBy?: string[] }[];
   chartType: ChartType;
   dimensions: Dimension[];
   measures: Measure[];
@@ -364,10 +364,11 @@ export const getInitialConfig = (
       // Technically, we should scope filters per cube; but as we only set initial
       // filters for area charts, and we can only have multi-cubes for combo charts,
       // we can ignore the filters scoping for now.
-      cubes: iris.map(({ iri, publishIri }) => ({
+      cubes: iris.map(({ iri, publishIri, joinBy }) => ({
         iri,
         publishIri,
         filters: filters ?? {},
+        joinBy,
       })),
       activeField: undefined,
     };

app/charts/line/chart-lines.tsx

@@ -5,7 +5,7 @@ import { Lines } from "@/charts/line/lines";
 import { LineChart } from "@/charts/line/lines-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
-import { BrushTime } from "@/charts/shared/brush";
+import { BrushTime, shouldShowBrush } from "@/charts/shared/brush";
 import {
   ChartContainer,
   ChartControlsContainer,
@@ -17,6 +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 { ChartProps, VisualizationProps } from "../shared/ChartProps";
 
@@ -29,6 +30,7 @@ export const ChartLinesVisualization = (
 export const ChartLines = memo((props: ChartProps<LineConfig>) => {
   const { chartConfig } = props;
   const { fields, interactiveFiltersConfig } = chartConfig;
+  const { sharedFilters } = useDashboardInteractiveFilters();
 
   return (
     <LineChart {...props}>
@@ -37,7 +39,9 @@ export const ChartLines = memo((props: ChartProps<LineConfig>) => {
           <AxisHeightLinear /> <AxisTime /> <AxisTimeDomain />
           <Lines />
           <InteractionHorizontal />
-          {interactiveFiltersConfig?.timeRange.active && <BrushTime />}
+          {shouldShowBrush(interactiveFiltersConfig, sharedFilters) && (
+            <BrushTime />
+          )}
         </ChartSvg>
 
         <Ruler />

app/charts/shared/brush/index.tsx

@@ -12,9 +12,17 @@ import { makeGetClosestDatesFromDateRange } from "@/charts/shared/brush/utils";
 import type { ChartWithInteractiveXTimeRangeState } from "@/charts/shared/chart-state";
 import { useChartState } from "@/charts/shared/chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
+import {
+  ColumnConfig,
+  ComboLineColumnConfig,
+  ComboLineDualConfig,
+  ComboLineSingleConfig,
+  LineConfig,
+} from "@/configurator";
 import { Observation } from "@/domain/data";
 import { useFormatFullDateAuto } from "@/formatters";
 import {
+  SharedFilter,
   useChartInteractiveFilters,
   useInteractiveFiltersGetState,
 } from "@/stores/interactive-filters";
@@ -26,6 +34,28 @@ export const HANDLE_HEIGHT = 14;
 export const BRUSH_HEIGHT = 3;
 export const HEIGHT = HANDLE_HEIGHT + BRUSH_HEIGHT;
 
+export const shouldShowBrush = (
+  interactiveFiltersConfig:
+    | (
+        | LineConfig
+        | ComboLineSingleConfig
+        | ComboLineDualConfig
+        | ComboLineColumnConfig
+        | ColumnConfig
+      )["interactiveFiltersConfig"]
+    | undefined,
+  sharedFilters: SharedFilter[] | undefined
+) => {
+  const chartTimeRange = interactiveFiltersConfig?.timeRange;
+  const chartTimeRangeIri = chartTimeRange?.componentIri;
+  const sharedFilter = sharedFilters?.find(
+    (x) => x.type === "timeRange" && x.componentIri === chartTimeRangeIri
+  );
+  return (
+    (chartTimeRange?.active && !sharedFilter) || sharedFilter?.active == false
+  );
+};
+
 export const BrushTime = () => {
   const ref = useRef<SVGGElement>(null);
   const timeRange = useChartInteractiveFilters((d) => d.timeRange);

app/charts/shared/chart-data-filters.tsx

@@ -30,6 +30,7 @@ import {
   canRenderDatePickerField,
   DatePickerField,
 } from "@/configurator/components/field-date-picker";
+import { extractDataPickerOptionsFromDimension } from "@/configurator/components/ui-helpers";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import {
   Dimension,
@@ -363,15 +364,17 @@ const DataFilter = ({
   );
 };
 
-type DataFilterGenericDimensionProps = {
+export type DataFilterGenericDimensionProps = {
   dimension: Dimension;
   value: string;
   onChange: (e: SelectChangeEvent<unknown>) => void;
   options?: Array<{ label: string; value: string }>;
   disabled: boolean;
 };
 
-const DataFilterGenericDimension = (props: DataFilterGenericDimensionProps) => {
+export const DataFilterGenericDimension = (
+  props: DataFilterGenericDimensionProps
+) => {
   const { dimension, value, onChange, options: propOptions, disabled } = props;
   const { label, isKeyDimension } = dimension;
   const noneLabel = t({
@@ -488,48 +491,17 @@ const DataFilterTemporalDimension = ({
   ) => void;
   disabled: boolean;
 }) => {
-  const { isKeyDimension, label, values, timeUnit, timeFormat } = dimension;
+  const { label, timeUnit, timeFormat } = dimension;
   const formatLocale = useTimeFormatLocale();
   const formatDate = formatLocale.format(timeFormat);
   const parseDate = formatLocale.parse(timeFormat);
 
-  const noneLabel = t({
-    id: "controls.dimensionvalue.none",
-    message: "No Filter",
-  });
   const { minDate, maxDate, options, optionValues } = useMemo(() => {
-    if (values.length) {
-      const options = values.map((d) => {
-        return {
-          label: `${d.value}`,
-          value: `${d.value}`,
-        };
-      });
-
-      return {
-        minDate: parseDate(values[0].value as string) as Date,
-        maxDate: parseDate(values[values.length - 1].value as string) as Date,
-        options: isKeyDimension
-          ? options
-          : [
-              {
-                value: FIELD_VALUE_NONE,
-                label: noneLabel,
-                isNoneValue: true,
-              },
-              ...options,
-            ],
-        optionValues: options.map((d) => d.value),
-      };
-    } else {
-      return {
-        minDate: new Date(),
-        maxDate: new Date(),
-        options: [],
-        optionValues: [],
-      };
-    }
-  }, [isKeyDimension, noneLabel, values, parseDate]);
+    return extractDataPickerOptionsFromDimension({
+      dimension,
+      parseDate,
+    });
+  }, [dimension, parseDate]);
 
   return canRenderDatePickerField(timeUnit) ? (
     <DatePickerField