feat: Hide Animation behind feature flag & fix column animations

app/charts/column/columns-grouped.tsx

@@ -71,18 +71,22 @@ export const ColumnsGrouped = () => {
   const y0 = yScale(0);
   const renderData: GroupedRenderDatum[] = React.useMemo(() => {
     return grouped.map((segment) => {
+      const key = segment[0];
+
       return {
-        key: segment[0],
-        x: xScale(segment[0]) as number,
+        key,
+        x: xScale(key) as number,
         data: segment[1].map((d) => {
+          const x = getSegment(d);
           const y = getY(d) ?? NaN;
 
           return {
-            x: xScaleIn(getSegment(d)) as number,
+            key: `${key}-${x}`,
+            x: xScaleIn(x) as number,
             y: yScale(Math.max(y, 0)),
             width: bandwidth,
             height: Math.abs(yScale(y) - y0),
-            color: colors(getSegment(d)),
+            color: colors(x),
           };
         }),
       };
@@ -109,7 +113,7 @@ export const ColumnsGrouped = () => {
         .selectAll<SVGRectElement, RenderDatum>("rect")
         .data(
           (d) => d.data,
-          (d) => d.x
+          (d) => d.key
         )
         .call(renderColumn, y0);
     }

app/charts/column/columns-simple.tsx

@@ -59,13 +59,21 @@ export const Columns = () => {
     };
 
     return preparedData.map((d) => {
-      const xScaled = xScale(getX(d)) as number;
+      const x = getX(d);
+      const xScaled = xScale(x) as number;
       const y = getY(d) ?? NaN;
       const yScaled = yScale(y);
       const height = Math.abs(yScaled - y0);
       const color = getColor(y);
 
-      return { x: xScaled, y: yScaled, width: bandwidth, height, color };
+      return {
+        key: x,
+        x: xScaled,
+        y: yScaled,
+        width: bandwidth,
+        height,
+        color,
+      };
     });
   }, [
     preparedData,
@@ -83,7 +91,7 @@ export const Columns = () => {
     if (ref.current) {
       select(ref.current)
         .selectAll<SVGRectElement, RenderDatum>("rect")
-        .data(renderData, (d) => d.x)
+        .data(renderData, (d) => d.key)
         .call(renderColumn, y0);
     }
   }, [renderData, yScale, y0]);

app/charts/column/columns-stacked.tsx

@@ -26,8 +26,11 @@ export const ColumnsStacked = () => {
       return {
         key,
         data: d.map((segment: $FixMe) => {
+          const x = getX(segment.data);
+
           return {
-            x: xScale(getX(segment.data)) as number,
+            key: `${key}-${x}`,
+            x: xScale(x) as number,
             y: yScale(segment[1]),
             width: bandwidth,
             height: y0 - yScale(segment[1] - segment[0]),
@@ -48,7 +51,7 @@ export const ColumnsStacked = () => {
         .selectAll<SVGRectElement, RenderDatum>("rect")
         .data(
           (d) => d.data,
-          (d) => `${d.x}-${d.y}`
+          (d) => d.key
         )
         .call(renderColumn, y0);
     }

app/charts/column/rendering-utils.tsx

@@ -1,6 +1,7 @@
 import { Selection } from "d3";
 
 export type RenderDatum = {
+  key: string;
   x: number;
   y: number;
   width: number;

app/configurator/components/chart-configurator.tsx

@@ -60,6 +60,7 @@ import {
   useConfiguratorState,
 } from "@/configurator/configurator-state";
 import { isStandardErrorDimension, isTemporalDimension } from "@/domain/data";
+import { flag } from "@/flags";
 import {
   HierarchyValue,
   PossibleFiltersDocument,
@@ -777,7 +778,9 @@ const ChartFields = ({
           (d) => d.iri === (chartConfig.fields as any)[field]?.componentIri
         );
 
-        return isMapConfig(chartConfig) && field === "baseLayer" ? (
+        return field === "animation" &&
+          !flag("timeslider") ? null : isMapConfig(chartConfig) &&
+          field === "baseLayer" ? (
           <OnOffControlTabField
             key={field}
             value={field}