feat: Add Animation for Column, Pie and Scatter charts

app/charts/column/chart-column.tsx

@@ -132,6 +132,7 @@ export const ChartColumns = memo(
                 dimensions={dimensions}
                 showPlayButton={fields.animation.showPlayButton}
                 animationDuration={fields.animation.duration}
+                animationType={fields.animation.type}
               />
             )}
           </StackedColumnsChart>
@@ -169,6 +170,7 @@ export const ChartColumns = memo(
                 dimensions={dimensions}
                 showPlayButton={fields.animation.showPlayButton}
                 animationDuration={fields.animation.duration}
+                animationType={fields.animation.type}
               />
             )}
           </GroupedColumnChart>
@@ -198,6 +200,7 @@ export const ChartColumns = memo(
                 dimensions={dimensions}
                 showPlayButton={fields.animation.showPlayButton}
                 animationDuration={fields.animation.duration}
+                animationType={fields.animation.type}
               />
             )}
           </ColumnChart>

app/charts/pie/chart-pie.tsx

@@ -121,6 +121,7 @@ export const ChartPie = memo(
             dimensions={dimensions}
             showPlayButton={fields.animation.showPlayButton}
             animationDuration={fields.animation.duration}
+            animationType={fields.animation.type}
           />
         )}
       </PieChart>

app/charts/scatterplot/chart-scatterplot.tsx

@@ -127,6 +127,7 @@ export const ChartScatterplot = memo(
             dimensions={dimensions}
             showPlayButton={fields.animation.showPlayButton}
             animationDuration={fields.animation.duration}
+            animationType={fields.animation.type}
           />
         )}
       </ScatterplotChart>

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

@@ -475,29 +475,60 @@ const ChartFieldAnimation = ({ field }: { field: AnimationField }) => {
           path="showPlayButton"
         />
         {field.showPlayButton && (
-          <Box component="fieldset" mt={4}>
-            <FieldSetLegend
-              legendTitle={
-                <Trans id="controls.section.animation.duration">
-                  Animation Duration
-                </Trans>
-              }
-            />
-            <Flex sx={{ justifyContent: "flex-start" }}>
-              <ChartOptionRadioField
-                label="30s"
-                field="animation"
-                path="duration"
-                value={30}
+          <>
+            <Box component="fieldset" mt={4}>
+              <FieldSetLegend
+                legendTitle={
+                  <Trans id="controls.section.animation.duration">
+                    Animation Duration
+                  </Trans>
+                }
               />
-              <ChartOptionRadioField
-                label="60s"
-                field="animation"
-                path="duration"
-                value={60}
+              <Flex sx={{ justifyContent: "flex-start" }}>
+                <ChartOptionRadioField
+                  label="30s"
+                  field="animation"
+                  path="duration"
+                  value={30}
+                />
+                <ChartOptionRadioField
+                  label="60s"
+                  field="animation"
+                  path="duration"
+                  value={60}
+                />
+              </Flex>
+            </Box>
+            <Box component="fieldset" mt={4}>
+              <FieldSetLegend
+                legendTitle={
+                  <Trans id="controls.section.animation.type">
+                    Animation Type
+                  </Trans>
+                }
               />
-            </Flex>
-          </Box>
+              <Flex sx={{ justifyContent: "flex-start" }}>
+                <ChartOptionRadioField
+                  label={t({
+                    id: "controls.section.animation.type.continuous",
+                    message: "Continuous",
+                  })}
+                  field="animation"
+                  path="type"
+                  value="continuous"
+                />
+                <ChartOptionRadioField
+                  label={t({
+                    id: "controls.section.animation.type.stepped",
+                    message: "Stepped",
+                  })}
+                  field="animation"
+                  path="type"
+                  value="stepped"
+                />
+              </Flex>
+            </Box>
+          </>
         )}
       </ControlSectionContent>
     </ControlSection>

app/configurator/config-types.ts

@@ -158,9 +158,16 @@ const GenericSegmentField = t.intersection([
 ]);
 export type GenericSegmentField = t.TypeOf<typeof GenericSegmentField>;
 
+const AnimationType = t.union([t.literal("continuous"), t.literal("stepped")]);
+export type AnimationType = t.TypeOf<typeof AnimationType>;
+
 const AnimationField = t.intersection([
   GenericField,
-  t.type({ showPlayButton: t.boolean, duration: t.number }),
+  t.type({
+    showPlayButton: t.boolean,
+    duration: t.number,
+    type: AnimationType,
+  }),
 ]);
 export type AnimationField = t.TypeOf<typeof AnimationField>;
 

app/configurator/configurator-state.tsx

@@ -822,6 +822,7 @@ export const handleChartFieldChanged = (
         componentIri,
         showPlayButton: true,
         duration: 30,
+        type: "continuous",
       };
     } else if (field === "segment") {
       // FIXME: This should be more chart specific
@@ -877,6 +878,7 @@ export const handleChartFieldChanged = (
         showPlayButton:
           draft.chartConfig.fields.animation?.showPlayButton ?? true,
         duration: draft.chartConfig.fields.animation?.duration ?? 30,
+        type: draft.chartConfig.fields.animation?.type ?? "continuous",
       };
     } else if (
       field === "segment" &&

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

@@ -7,6 +7,7 @@ import { useInteractiveFilters } from "@/charts/shared/use-interactive-filters";
 import { TableChartState } from "@/charts/table/table-state";
 import { Slider as GenericSlider } from "@/components/form";
 import { parseDate } from "@/configurator/components/ui-helpers";
+import { AnimationType } from "@/configurator/config-types";
 import { useTimeFormatUnit } from "@/formatters";
 import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks";
 import { TemporalDimension } from "@/graphql/resolver-types";
@@ -35,12 +36,14 @@ export const TimeSlider = ({
   dimensions,
   showPlayButton,
   animationDuration,
+  animationType,
 }: {
   componentIri?: string;
   dimensions: DimensionMetadataFragment[];
   showPlayButton: boolean;
   /** Animation duration in seconds. */
   animationDuration: number;
+  animationType: AnimationType;
 }) => {
   const component = React.useMemo(() => {
     return dimensions.find((d) => d.iri === componentIri) as
@@ -82,8 +85,13 @@ export const TimeSlider = ({
   ]);
 
   const timeline = React.useMemo(() => {
-    return new Timeline(animationDuration * 1000, timelineData, formatDate);
-  }, [animationDuration, timelineData, formatDate]);
+    return new Timeline({
+      type: animationType,
+      msDuration: animationDuration * 1000,
+      msValues: timelineData,
+      formatMsValue: formatDate,
+    });
+  }, [animationType, animationDuration, timelineData, formatDate]);
 
   return (
     <TimelineContext.Provider value={timeline}>

app/locales/de/messages.po

@@ -469,6 +469,18 @@ msgstr "Animation Einstellungen"
 msgid "controls.section.animation.show-play-button"
 msgstr "Schaltfläche Abspielen anzeigen"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Animation Typ"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "Kontinuierlich"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "Abgestuft"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Diagramm-Einstellungen"

app/locales/en/messages.po

@@ -469,6 +469,18 @@ msgstr "Animation Settings"
 msgid "controls.section.animation.show-play-button"
 msgstr "Show Play button"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Animation Type"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "Continuous"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "Stepped"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Chart Options"

app/locales/fr/messages.po

@@ -469,6 +469,18 @@ msgstr "Paramètres d'animation"
 msgid "controls.section.animation.show-play-button"
 msgstr "Bouton Afficher la lecture"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Type d'animation"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "En continu"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "En escalier"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Paramètres graphiques"

app/locales/it/messages.po

@@ -469,6 +469,18 @@ msgstr "Impostazioni dell'animazione"
 msgid "controls.section.animation.show-play-button"
 msgstr "Mostra il pulsante di riproduzione"
 
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type"
+msgstr "Tipo di animazione"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.continuous"
+msgstr "Continuo"
+
+#: app/configurator/components/chart-options-selector.tsx
+msgid "controls.section.animation.type.stepped"
+msgstr "A gradini"
+
 #: app/configurator/components/chart-configurator.tsx
 msgid "controls.section.chart.options"
 msgstr "Opzioni del grafico"

app/utils/chart-config/versioning.ts

@@ -505,6 +505,7 @@ const migrations: Migration[] = [
               ...timeSlider,
               showPlayButton: true,
               duration: 30,
+              type: "continuous",
             };
           }
         });