diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index c92c9df9d..fcc11cc8e 100644 --- a/app/configurator/components/filters.tsx +++ b/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 diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index 0ace572a8..30a1ecc35 100644 --- a/app/configurator/configurator-state.tsx +++ b/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); } } diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx index 14ca180c0..630581087 100644 --- a/app/configurator/table/table-chart-options.tsx +++ b/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 (
)}