From 86f32095ab2f257cca6819c21b4bc2c80ee90e44 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 4 Apr 2023 11:23:35 +0200 Subject: [PATCH 1/3] fix: Subsetting config --- app/configurator/components/filters.tsx | 24 ++++++------- app/configurator/configurator-state.tsx | 45 ++++++++++++------------- 2 files changed, 34 insertions(+), 35 deletions(-) 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 0a7c9ad09..781969c0f 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -7,9 +7,9 @@ import sortBy from "lodash/sortBy"; import unset from "lodash/unset"; import { useRouter } from "next/router"; import { - createContext, Dispatch, ReactNode, + createContext, useContext, useEffect, useMemo, @@ -31,39 +31,37 @@ import { import { DEFAULT_FIXED_COLOR_FIELD } from "@/charts/map/constants"; import { mapValueIrisToColor } from "@/configurator/components/ui-helpers"; import { + ChartConfig, + ChartType, + ConfiguratorState, ConfiguratorStateConfiguringChart, + ConfiguratorStateSelectingDataSet, DataSource, + FilterValue, + FilterValueMultiValues, + Filters, GenericField, + GenericFields, ImputationType, + InteractiveFiltersConfig, + MapConfig, + MapFields, + NumericalColorField, + decodeConfiguratorState, isAreaConfig, isColorFieldInConfig, isColumnConfig, isMapConfig, isSegmentInConfig, - MapConfig, - MapFields, - NumericalColorField, -} from "@/configurator/config-types"; -import { - ChartConfig, - ChartType, - ConfiguratorState, - ConfiguratorStateSelectingDataSet, - decodeConfiguratorState, - Filters, - FilterValue, - FilterValueMultiValues, - GenericFields, - InteractiveFiltersConfig, } from "@/configurator/config-types"; import { FIELD_VALUE_NONE } from "@/configurator/constants"; import { - canDimensionBeMultiFiltered, DimensionValue, - isOrdinalMeasure, + canDimensionBeMultiFiltered, isGeoDimension, isGeoShapesDimension, isNumericalMeasure, + isOrdinalMeasure, isTemporalDimension, } from "@/domain/data"; import { DEFAULT_DATA_SOURCE } from "@/domain/datasource"; @@ -85,7 +83,7 @@ import { getDataSourceFromLocalStorage, useDataSourceStore, } from "@/stores/data-source"; -import { fetchChartConfig, createConfig } from "@/utils/chart-config/api"; +import { createConfig, fetchChartConfig } from "@/utils/chart-config/api"; import { migrateChartConfig } from "@/utils/chart-config/versioning"; import { createChartId } from "@/utils/create-chart-id"; import { unreachableError } from "@/utils/unreachable"; @@ -1031,9 +1029,10 @@ export const updateColorMapping = ( if (draft.state === "CONFIGURING_CHART") { const { field, colorConfigPath, dimensionIri, values, random } = action.value; - const path = `fields.${field}${ - colorConfigPath ? `.${colorConfigPath}` : "" - }`; + const path = colorConfigPath + ? [`fields.${field}`, colorConfigPath] + : [`fields.${field}`]; + const fieldValue = get(draft.chartConfig, path) as | (GenericField & { palette: string }) | undefined; @@ -1044,7 +1043,7 @@ export const updateColorMapping = ( dimensionValues: values, random, }); - setWith(draft.chartConfig, `${path}.colorMapping`, colorMapping); + setWith(draft.chartConfig, path.concat("colorMapping"), colorMapping); } } From 59d329e6ba4bae845dc9c09400fe0644cbf65612 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 4 Apr 2023 11:24:27 +0200 Subject: [PATCH 2/3] fix: Refreshing the color palette for table --- app/configurator/configurator-state.tsx | 48 +++++++++++++------ .../table/table-chart-options.tsx | 6 ++- 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index 781969c0f..7489afe0a 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, @@ -88,8 +92,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"; @@ -1030,19 +1032,37 @@ export const updateColorMapping = ( const { field, colorConfigPath, dimensionIri, values, random } = action.value; const path = colorConfigPath - ? [`fields.${field}`, colorConfigPath] - : [`fields.${field}`]; - - const fieldValue = get(draft.chartConfig, path) as - | (GenericField & { palette: string }) - | undefined; + ? ["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 (fieldValue?.componentIri === dimensionIri) { - const 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..c948b0032 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"; @@ -330,8 +330,10 @@ export const TableColumnOptions = ({ ) : ( )} From 78a9dfe23d82bec58fd6f74feb71745c9173aadb Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 5 Apr 2023 17:25:56 +0200 Subject: [PATCH 3/3] feat: Disable category column style for TemporalDimension (table) --- app/configurator/table/table-chart-options.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx index c948b0032..630581087 100644 --- a/app/configurator/table/table-chart-options.tsx +++ b/app/configurator/table/table-chart-options.tsx @@ -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 (