feat: Add TimeSlider + filtering of data based on it

app/charts/column/chart-column.tsx

@@ -30,6 +30,7 @@ import {
   FilterValueSingle,
   InteractiveFiltersConfig,
 } from "@/configurator";
+import { TimeSlider } from "@/configurator/interactive-filters/time-slider";
 import { Observation } from "@/domain/data";
 import {
   DimensionMetadataFragment,
@@ -162,6 +163,11 @@ export const ChartColumns = memo(
               </ChartSvg>
               <Tooltip type="single" />
             </ChartContainer>
+            {interactiveFiltersConfig?.timeSlider.componentIri && (
+              <TimeSlider
+                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+              />
+            )}
           </ColumnChart>
         )}
       </>

app/charts/shared/chart-helpers.tsx

@@ -118,36 +118,68 @@ export const useDataAfterInteractiveFilters = ({
   getX?: (d: Observation) => Date;
   getSegment?: (d: Observation) => string;
 }) => {
-  const [interactiveFilters] = useInteractiveFilters();
-  const { from, to } = interactiveFilters.timeRange;
-  const { categories } = interactiveFilters;
-  const activeInteractiveFilters = Object.keys(categories);
+  const [IFState] = useInteractiveFilters();
+
+  // time range
+  const fromTime = IFState.timeRange.from?.getTime();
+  const toTime = IFState.timeRange.to?.getTime();
+
+  // time slider
+  const getTime = useTemporalVariable(
+    interactiveFiltersConfig?.timeSlider.componentIri || ""
+  );
+  const timeSliderValue = IFState.timeSlider.value;
+
+  // legend
+  const legendItems = Object.keys(IFState.categories);
 
   const allFilters = useMemo(() => {
-    const timeRangeFilter: ValuePredicate | null =
-      getX && from && to && interactiveFiltersConfig?.timeRange.active
-        ? (d: Observation) =>
-            getX(d).getTime() >= from.getTime() &&
-            getX(d).getTime() <= to.getTime()
+    const timeRangeFilter =
+      getX && fromTime && toTime && interactiveFiltersConfig?.timeRange.active
+        ? (d: Observation) => {
+            const time = getX(d).getTime();
+            return time >= fromTime && time <= toTime;
+          }
         : null;
-    const legendFilter: ValuePredicate | null =
+    const timeSliderFilter =
+      interactiveFiltersConfig?.timeSlider.componentIri && timeSliderValue
+        ? (d: Observation) => {
+            return getTime(d).getTime() === timeSliderValue.getTime();
+          }
+        : null;
+    const legendFilter =
       interactiveFiltersConfig?.legend.active && getSegment
-        ? (d: Observation) => !activeInteractiveFilters.includes(getSegment(d))
+        ? (d: Observation) => {
+            return !legendItems.includes(getSegment(d));
+          }
         : null;
-    return overEvery([timeRangeFilter, legendFilter].filter(truthy));
+
+    return overEvery(
+      (
+        [
+          timeRangeFilter,
+          timeSliderFilter,
+          legendFilter,
+        ] as (ValuePredicate | null)[]
+      ).filter(truthy)
+    );
   }, [
-    activeInteractiveFilters,
-    from,
+    legendItems,
     getSegment,
     getX,
-    to,
+    getTime,
+    fromTime,
+    toTime,
     interactiveFiltersConfig?.legend.active,
     interactiveFiltersConfig?.timeRange.active,
+    interactiveFiltersConfig?.timeSlider.componentIri,
+    timeSliderValue,
   ]);
 
   const preparedData = useMemo(() => {
     return sortedData.filter(allFilters);
   }, [allFilters, sortedData]);
+
   return preparedData;
 };
 

app/charts/shared/use-interactive-filters.tsx

@@ -23,6 +23,13 @@ type InteractiveFiltersStateAction =
       type: "SET_TIME_RANGE_FILTER";
       value: [Date, Date];
     }
+  | {
+      type: "SET_TIME_SLIDER_FILTER";
+      value: Date;
+    }
+  | {
+      type: "RESET_TIME_SLIDER_FILTER";
+    }
   | {
       type: "RESET_DATA_FILTER";
     }
@@ -67,6 +74,12 @@ const InteractiveFiltersStateReducer = (
     case "SET_TIME_RANGE_FILTER":
       draft.timeRange = { from: action.value[0], to: action.value[1] };
       return draft;
+    case "SET_TIME_SLIDER_FILTER":
+      draft.timeSlider = { value: action.value };
+      return draft;
+    case "RESET_TIME_SLIDER_FILTER":
+      draft.timeSlider.value = undefined;
+      return draft;
     case "RESET_DATA_FILTER":
       draft.dataFilters = {};
       return draft;
@@ -114,7 +127,6 @@ export const InteractiveFiltersProvider = ({
   const [state, dispatch] = useImmerReducer<
     InteractiveFiltersState,
     InteractiveFiltersStateAction
-    // @ts-ignore
   >(InteractiveFiltersStateReducer, INTERACTIVE_FILTERS_INITIAL_STATE);
 
   return (

app/charts/shared/use-sync-interactive-filters.tsx

@@ -21,7 +21,7 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
   const [IFstate, dispatch] = useInteractiveFilters();
   const { interactiveFiltersConfig } = chartConfig;
 
-  // Time filter
+  // Time range filter
   const presetFrom =
     interactiveFiltersConfig?.timeRange.presets.from &&
     parseDate(interactiveFiltersConfig?.timeRange.presets.from.toString());
@@ -42,6 +42,17 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, presetFromStr, presetToStr]);
 
+  // Time slider filter
+  const timeSliderFilter = interactiveFiltersConfig?.timeSlider;
+  useEffect(() => {
+    if (
+      timeSliderFilter?.componentIri === "" &&
+      IFstate.timeSlider.value !== undefined
+    ) {
+      dispatch({ type: "RESET_TIME_SLIDER_FILTER" });
+    }
+  }, [IFstate.timeSlider.value, timeSliderFilter?.componentIri, dispatch]);
+
   // Data Filters
   const componentIris = interactiveFiltersConfig?.dataFilters.componentIris;
   useEffect(() => {

app/configurator/interactive-filters/time-slider.tsx

@@ -0,0 +1,78 @@
+import { bisect, scaleLinear } from "d3";
+import React, { ChangeEvent } from "react";
+
+import { ChartState, useChartState } from "@/charts/shared/use-chart-state";
+import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
+import { TableChartState } from "@/charts/table/table-state";
+import { Slider } from "@/components/form";
+import { parseDate } from "@/configurator/components/ui-helpers";
+import useEvent from "@/utils/use-event";
+
+export const TimeSlider = ({ componentIri }: { componentIri?: string }) => {
+  const [IFState, dispatch] = useInteractiveFilters();
+  const [t, setT] = React.useState(0);
+  const chartState = useChartState() as NonNullable<
+    Exclude<ChartState, TableChartState>
+  >;
+
+  const sortedMs = React.useMemo(() => {
+    // FIXME: enable interactive filters for maps!
+    if (componentIri && chartState.chartType !== "map") {
+      const uniqueValues = [
+        ...new Set(
+          chartState.allData.map((d) => d[componentIri]).filter(Boolean)
+        ),
+      ] as string[];
+      const sortedMs = uniqueValues
+        .sort()
+        .map(parseDate)
+        .map((d) => d.getTime());
+
+      return sortedMs;
+    }
+
+    return [];
+    // @ts-ignore - allData is not yet there for the maps
+  }, [chartState.chartType, chartState.allData, componentIri]);
+
+  const msScale = React.useMemo(() => {
+    if (sortedMs.length) {
+      const [min, max] = [sortedMs[0], sortedMs[sortedMs.length - 1]];
+      return scaleLinear().range([min, max]);
+    }
+  }, [sortedMs]);
+
+  const onChange = useEvent((e: ChangeEvent<HTMLInputElement>) => {
+    const t = +e.target.value;
+    setT(t);
+
+    if (msScale) {
+      const tMs = msScale(t);
+      const i = bisect(sortedMs, tMs);
+      const updateMs = sortedMs[i - 1];
+
+      if (IFState.timeSlider.value?.getTime() !== updateMs) {
+        dispatch({
+          type: "SET_TIME_SLIDER_FILTER",
+          value: new Date(updateMs),
+        });
+      }
+    }
+  });
+
+  React.useEffect(() => {
+    onChange({ target: { value: "0" } } as ChangeEvent<HTMLInputElement>);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortedMs]);
+
+  return (
+    <Slider
+      name="time-slider"
+      min={0}
+      max={1}
+      step={0.0001}
+      value={t}
+      onChange={onChange}
+    />
+  );
+};