Merge pull request #1013 from visualize-admin/fix/table-color-mapping

app/configurator/components/filters.tsx

@@ -1,20 +1,20 @@
 import { t, Trans } from "@lingui/macro";
 import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
   Box,
   Button,
   ClickAwayListener,
-  Typography,
   Divider,
-  Theme,
+  FormControlLabel,
   IconButton,
-  Tooltip,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  InputAdornment,
   Input,
-  FormControlLabel,
+  InputAdornment,
   Switch,
+  Theme,
+  Tooltip,
+  Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { makeStyles } from "@mui/styles";
@@ -25,7 +25,7 @@ import keyBy from "lodash/keyBy";
 import orderBy from "lodash/orderBy";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
-import React, {
+import {
   forwardRef,
   MouseEventHandler,
   MutableRefObject,
@@ -165,9 +165,9 @@ const getColorConfig = (
     return;
   }
 
-  const path = `${config.activeField}${
-    colorConfigPath ? `.${colorConfigPath}` : ""
-  }`;
+  const path = colorConfigPath
+    ? [config.activeField, colorConfigPath]
+    : [config.activeField];
 
   return get(config.chartConfig.fields, path) as
     | GenericSegmentField

app/configurator/configurator-state.tsx

@@ -33,6 +33,8 @@ import { mapValueIrisToColor } from "@/configurator/components/ui-helpers";
 import {
   ChartConfig,
   ChartType,
+  ColorMapping,
+  ColumnStyleCategory,
   ConfiguratorState,
   ConfiguratorStateConfiguringChart,
   ConfiguratorStateSelectingDataSet,
@@ -53,8 +55,10 @@ import {
   isColumnConfig,
   isMapConfig,
   isSegmentInConfig,
+  isTableConfig,
 } from "@/configurator/config-types";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
+import { toggleInteractiveFilterDataDimension } from "@/configurator/interactive-filters/interactive-filters-config-state";
 import {
   DimensionValue,
   canDimensionBeMultiFiltered,
@@ -89,8 +93,6 @@ import { migrateChartConfig } from "@/utils/chart-config/versioning";
 import { createChartId } from "@/utils/create-chart-id";
 import { unreachableError } from "@/utils/unreachable";
 
-import { toggleInteractiveFilterDataDimension } from "./interactive-filters/interactive-filters-config-state";
-
 export type ConfiguratorStateAction =
   | {
       type: "INITIALIZED";
@@ -1033,20 +1035,39 @@ export const updateColorMapping = (
   if (draft.state === "CONFIGURING_CHART") {
     const { field, colorConfigPath, dimensionIri, values, random } =
       action.value;
-    const path = `fields.${field}${
-      colorConfigPath ? `.${colorConfigPath}` : ""
-    }`;
-    const fieldValue = get(draft.chartConfig, path) as
-      | (GenericField & { palette: string })
-      | undefined;
-
-    if (fieldValue?.componentIri === dimensionIri) {
-      const colorMapping = mapValueIrisToColor({
-        palette: fieldValue.palette,
-        dimensionValues: values,
-        random,
-      });
-      setWith(draft.chartConfig, `${path}.colorMapping`, colorMapping);
+    const path = colorConfigPath
+      ? ["fields", field, colorConfigPath]
+      : ["fields", field];
+    let colorMapping: ColorMapping | undefined;
+
+    if (isTableConfig(draft.chartConfig)) {
+      const fieldValue = get(draft.chartConfig, path) as
+        | ColumnStyleCategory
+        | undefined;
+
+      if (fieldValue) {
+        colorMapping = mapValueIrisToColor({
+          palette: fieldValue.palette,
+          dimensionValues: values,
+          random,
+        });
+      }
+    } else {
+      const fieldValue = get(draft.chartConfig, path) as
+        | (GenericField & { palette: string })
+        | undefined;
+
+      if (fieldValue?.componentIri === dimensionIri) {
+        colorMapping = mapValueIrisToColor({
+          palette: fieldValue.palette,
+          dimensionValues: values,
+          random,
+        });
+      }
+    }
+
+    if (colorMapping) {
+      setWith(draft.chartConfig, path.concat("colorMapping"), colorMapping);
     }
   }
 

app/configurator/table/table-chart-options.tsx

@@ -1,7 +1,7 @@
 import { t, Trans } from "@lingui/macro";
-import { Box, Alert, Typography } from "@mui/material";
+import { Alert, Box, Typography } from "@mui/material";
 import get from "lodash/get";
-import React, { ChangeEvent, useCallback, useEffect, useRef } from "react";
+import { ChangeEvent, useCallback, useEffect, useRef } from "react";
 
 import { Checkbox } from "@/components/form";
 import { ColorPalette } from "@/configurator/components/chart-controls/color-palette";
@@ -194,6 +194,13 @@ export const TableColumnOptions = ({
           label: t({ id: "columnStyle.bar", message: `Bar Chart` }),
         },
       ]
+    : isTemporalDimension(component)
+    ? [
+        {
+          value: "text",
+          label: t({ id: "columnStyle.text", message: `Text` }),
+        },
+      ]
     : [
         {
           value: "text",
@@ -204,6 +211,7 @@ export const TableColumnOptions = ({
           label: t({ id: "columnStyle.categories", message: `Categories` }),
         },
       ];
+
   return (
     <div
       key={`control-panel-table-column-${activeField}`}
@@ -330,8 +338,10 @@ export const TableColumnOptions = ({
             ) : (
               <DimensionValuesMultiFilter
                 key={component.iri}
+                field={component.iri}
                 dimensionIri={component.iri}
                 dataSetIri={metaData.iri}
+                colorComponent={component}
                 colorConfigPath="columnStyle"
               />
             )}