feat: Add Animation for Column, Pie and Scatter charts

app/charts/area/areas-state.tsx

@@ -173,6 +173,8 @@ const useAreasState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    // No animation yet for areas
+    animationField: undefined,
     getX,
     getSegment,
   });

app/charts/chart-config-ui-options.ts

@@ -10,9 +10,13 @@ import {
  * Related to config-types.ts.
  */
 
+type BaseEncodingFieldType = "animation";
 type MapEncodingFieldType = "baseLayer" | "areaLayer" | "symbolLayer";
 type XYEncodingFieldType = "x" | "y" | "segment";
-export type EncodingFieldType = MapEncodingFieldType | XYEncodingFieldType;
+export type EncodingFieldType =
+  | BaseEncodingFieldType
+  | MapEncodingFieldType
+  | XYEncodingFieldType;
 
 export type EncodingOption =
   | { field: "chartSubType" }
@@ -168,6 +172,12 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
           { field: "useAbbreviations" },
         ],
       },
+      {
+        field: "animation",
+        optional: true,
+        componentTypes: ["TemporalDimension"],
+        filters: true,
+      },
     ],
     interactiveFilters: ["legend", "timeRange"],
   },

app/charts/column/chart-column.tsx

@@ -111,9 +111,9 @@ export const ChartColumns = memo(
               }
             />
 
-            {interactiveFiltersConfig?.timeSlider.componentIri && (
+            {fields.animation && (
               <TimeSlider
-                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+                componentIri={fields.animation.componentIri}
                 dimensions={dimensions}
               />
             )}
@@ -148,9 +148,9 @@ export const ChartColumns = memo(
               }
             />
 
-            {interactiveFiltersConfig?.timeSlider.componentIri && (
+            {fields.animation && (
               <TimeSlider
-                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+                componentIri={fields.animation.componentIri}
                 dimensions={dimensions}
               />
             )}
@@ -176,9 +176,9 @@ export const ChartColumns = memo(
               </ChartSvg>
               <Tooltip type="single" />
             </ChartContainer>
-            {interactiveFiltersConfig?.timeSlider.componentIri && (
+            {fields.animation && (
               <TimeSlider
-                componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+                componentIri={fields.animation.componentIri}
                 dimensions={dimensions}
               />
             )}

app/charts/column/columns-state.tsx

@@ -48,8 +48,8 @@ import {
 } from "@/configurator/components/ui-helpers";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import {
-  useFormatNumber,
   formatNumberWithUnit,
+  useFormatNumber,
   useTimeFormatUnit,
 } from "@/formatters";
 import {
@@ -171,6 +171,7 @@ const useColumnsState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    animationField: fields.animation,
     getX: getXAsDate,
   });
 

app/charts/line/lines-state.tsx

@@ -152,6 +152,8 @@ const useLinesState = (
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    // No animation yet for lines
+    animationField: undefined,
     getX,
     getSegment,
   });

app/charts/pie/chart-pie.tsx

@@ -126,9 +126,9 @@ export const ChartPie = memo(
           }
         />
 
-        {interactiveFiltersConfig?.timeSlider.componentIri && (
+        {fields.animation && (
           <TimeSlider
-            componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+            componentIri={fields.animation.componentIri}
             dimensions={dimensions}
           />
         )}

app/charts/pie/pie-state.tsx

@@ -100,6 +100,7 @@ const usePieState = (
   const { preparedData } = useDataAfterInteractiveFilters({
     sortedData: plottableData,
     interactiveFiltersConfig,
+    animationField: fields.animation,
     getSegment,
   });
 

app/charts/scatterplot/chart-scatterplot.tsx

@@ -105,9 +105,9 @@ export const ChartScatterplot = memo(
           }
         />
 
-        {interactiveFiltersConfig?.timeSlider.componentIri && (
+        {fields.animation && (
           <TimeSlider
-            componentIri={interactiveFiltersConfig.timeSlider.componentIri}
+            componentIri={fields.animation.componentIri}
             dimensions={dimensions}
           />
         )}

app/charts/scatterplot/scatterplot-state.tsx

@@ -101,6 +101,8 @@ const useScatterplotState = ({
   const { preparedData, scalesData } = useDataAfterInteractiveFilters({
     sortedData: plottableSortedData,
     interactiveFiltersConfig,
+    // No animation yet for scatterplot
+    animationField: undefined,
     getSegment,
   });
   const xMeasure = measures.find((d) => d.iri === fields.x.componentIri);

app/charts/shared/chart-helpers.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/charts/shared/use-interactive-filters";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
+  AnimationField,
   ChartConfig,
   ChartType,
   Filters,
@@ -37,17 +38,13 @@ export const prepareQueryFilters = (
   dataFilters: InteractiveFiltersState["dataFilters"]
 ): Filters => {
   let queryFilters = filters;
-  const { timeSlider } = interactiveFiltersConfig || {};
 
   if (chartType !== "table" && interactiveFiltersConfig?.dataFilters.active) {
     queryFilters = { ...queryFilters, ...dataFilters };
   }
 
-  queryFilters = omitBy(queryFilters, (v, k) => {
-    return (
-      (v.type === "single" && v.value === FIELD_VALUE_NONE) ||
-      k === timeSlider?.componentIri
-    );
+  queryFilters = omitBy(queryFilters, (v) => {
+    return v.type === "single" && v.value === FIELD_VALUE_NONE;
   });
 
   return queryFilters;
@@ -105,11 +102,13 @@ export const usePlottableData = ({
 export const useDataAfterInteractiveFilters = ({
   sortedData,
   interactiveFiltersConfig,
+  animationField,
   getX,
   getSegment,
 }: {
   sortedData: Observation[];
   interactiveFiltersConfig: InteractiveFiltersConfig;
+  animationField: AnimationField | undefined;
   getX?: (d: Observation) => Date;
   getSegment?: (d: Observation) => string;
 }): {
@@ -129,9 +128,7 @@ export const useDataAfterInteractiveFilters = ({
   const toTime = IFState.timeRange.to?.getTime();
 
   // time slider
-  const getTime = useTemporalVariable(
-    interactiveFiltersConfig?.timeSlider.componentIri || ""
-  );
+  const getTime = useTemporalVariable(animationField?.componentIri ?? "");
   const timeSliderValue = IFState.timeSlider.value;
 
   // legend
@@ -146,7 +143,7 @@ export const useDataAfterInteractiveFilters = ({
           }
         : null;
     const timeSliderFilter =
-      interactiveFiltersConfig?.timeSlider.componentIri && timeSliderValue
+      animationField?.componentIri && timeSliderValue
         ? (d: Observation) => {
             return getTime(d).getTime() === timeSliderValue.getTime();
           }
@@ -172,8 +169,8 @@ export const useDataAfterInteractiveFilters = ({
     fromTime,
     toTime,
     interactiveFiltersConfig?.timeRange.active,
-    interactiveFiltersConfig?.timeSlider.componentIri,
     interactiveFiltersConfig?.legend.active,
+    animationField,
     timeSliderValue,
     getSegment,
     getTime,
@@ -185,7 +182,7 @@ export const useDataAfterInteractiveFilters = ({
   }, [allFilters, sortedData]);
 
   const timeSliderFilterPresent = !!(
-    interactiveFiltersConfig?.timeSlider.componentIri && timeSliderValue
+    animationField?.componentIri && timeSliderValue
   );
 
   const scalesData = timeSliderFilterPresent ? sortedData : preparedData;

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

@@ -9,13 +9,9 @@ import {
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
 import {
   ChartConfig,
-  ConfiguratorStateConfiguringChart,
   InteractiveFiltersConfig,
 } from "@/configurator/config-types";
 import fixture from "@/test/__fixtures/config/dev/4YL1p4QTFQS4.json";
-const { handleInteractiveFilterTimeSliderReset } = jest.requireActual(
-  "@/configurator/configurator-state"
-);
 
 const interactiveFiltersConfig: InteractiveFiltersConfig = {
   legend: {
@@ -28,10 +24,6 @@ const interactiveFiltersConfig: InteractiveFiltersConfig = {
       "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1",
     ],
   },
-  timeSlider: {
-    componentIri:
-      "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/0",
-  },
   timeRange: {
     active: false,
     componentIri: "https://fake-iri/dimension/2",
@@ -43,26 +35,6 @@ const interactiveFiltersConfig: InteractiveFiltersConfig = {
   },
 };
 
-const configuratorState = {
-  state: "CONFIGURING_CHART",
-  chartConfig: {
-    interactiveFiltersConfig,
-  },
-} as unknown as ConfiguratorStateConfiguringChart;
-
-jest.mock("@/configurator/configurator-state", () => {
-  return {
-    useConfiguratorState: () => {
-      return [
-        configuratorState,
-        (_: { type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET" }) => {
-          handleInteractiveFilterTimeSliderReset(configuratorState);
-        },
-      ];
-    },
-  };
-});
-
 const chartConfig = {
   ...fixture.data.chartConfig,
   interactiveFiltersConfig,
@@ -142,10 +114,6 @@ describe("useSyncInteractiveFilters", () => {
         "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1/1",
     });
 
-    expect(
-      configuratorState.chartConfig.interactiveFiltersConfig?.timeSlider
-        .componentIri
-    ).toEqual("");
     expect(IFState2.timeSlider.value).toBeUndefined();
   });
 });

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

@@ -7,12 +7,9 @@ import {
   FilterValueSingle,
   isSegmentInConfig,
 } from "@/configurator/config-types";
-import { useConfiguratorState } from "@/configurator/configurator-state";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import useFilterChanges from "@/configurator/use-filter-changes";
 
-import { getFieldComponentIri } from "..";
-
 /**
  * Makes sure interactive filters are in sync with chart config.
  *
@@ -22,7 +19,6 @@ import { getFieldComponentIri } from "..";
  */
 const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
   const [IFstate, dispatch] = useInteractiveFilters();
-  const [_, dispatchConfigurator] = useConfiguratorState();
   const { interactiveFiltersConfig } = chartConfig;
 
   // Time range filter
@@ -46,32 +42,6 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, presetFromStr, presetToStr]);
 
-  // Time slider filter
-  const timeSliderFilter = interactiveFiltersConfig?.timeSlider;
-  const xComponentIri = getFieldComponentIri(chartConfig.fields, "x");
-  useEffect(() => {
-    if (
-      timeSliderFilter?.componentIri === "" &&
-      IFstate.timeSlider.value !== undefined
-    ) {
-      dispatch({ type: "RESET_TIME_SLIDER_FILTER" });
-    }
-
-    if (
-      xComponentIri !== undefined &&
-      xComponentIri === timeSliderFilter?.componentIri
-    ) {
-      dispatchConfigurator({ type: "INTERACTIVE_FILTER_TIME_SLIDER_RESET" });
-    }
-  }, [
-    IFstate.timeSlider.value,
-    timeSliderFilter?.componentIri,
-    dispatch,
-    dispatchConfigurator,
-    interactiveFiltersConfig,
-    xComponentIri,
-  ]);
-
   // Data Filters
   const componentIris = interactiveFiltersConfig?.dataFilters.componentIris;
   useEffect(() => {

app/configurator/components/chart-annotations-selector.tsx

@@ -74,7 +74,6 @@ export const ChartAnnotationsSelector = ({
       case "dataFilters":
       case "legend":
       case "timeRange":
-      case "timeSlider":
         return true;
 
       default: