From d3ce6fb7289ec9300a1b23772599327cdcbc0746 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 25 Jan 2022 16:59:18 +0100 Subject: [PATCH 01/20] refactor: Improve map color scale types --- app/charts/index.ts | 3 +- app/charts/map/map-legend.tsx | 16 ++++++--- app/charts/map/map-state.tsx | 27 +++++++-------- app/configurator/config-types.ts | 46 ++++++++++++++++++------- app/configurator/configurator-state.tsx | 16 +++++++++ 5 files changed, 77 insertions(+), 31 deletions(-) diff --git a/app/charts/index.ts b/app/charts/index.ts index b9370de60..96f0c177a 100644 --- a/app/charts/index.ts +++ b/app/charts/index.ts @@ -278,9 +278,10 @@ export const getInitialConfig = ({ componentIri: geoShapes[0]?.iri || "", measureIri: measures[0].iri, hierarchyLevel: 1, + colorScaleType: "continuous", + colorScaleInterpolationType: "linear", palette: "oranges", nbClass: 5, - paletteType: "continuous", }, symbolLayer: { show: geoShapes.length === 0, diff --git a/app/charts/map/map-legend.tsx b/app/charts/map/map-legend.tsx index 979405f42..3b02d2322 100644 --- a/app/charts/map/map-legend.tsx +++ b/app/charts/map/map-legend.tsx @@ -92,10 +92,18 @@ export const MapLegend = () => { {areaLayer.measureLabel} )} - {areaLayer.paletteType === "continuous" && } - {areaLayer.paletteType === "discrete" && } - {areaLayer.paletteType === "quantile" && } - {areaLayer.paletteType === "jenks" && } + {areaLayer.colorScaleInterpolationType === "linear" && ( + + )} + {areaLayer.colorScaleInterpolationType === "quantize" && ( + + )} + {areaLayer.colorScaleInterpolationType === "quantile" && ( + + )} + {areaLayer.colorScaleInterpolationType === "jenks" && ( + + )} )} diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx index 257398a64..624070d43 100644 --- a/app/charts/map/map-state.tsx +++ b/app/charts/map/map-state.tsx @@ -22,8 +22,8 @@ import { } from "../../configurator/components/ui-helpers"; import { BaseLayer, + ColorScaleInterpolationType, MapFields, - PaletteType, } from "../../configurator/config-types"; import { GeoData, @@ -61,7 +61,7 @@ export interface MapState { | ScaleQuantile | ScaleLinear | ScaleThreshold; - paletteType: PaletteType; + colorScaleInterpolationType: ColorScaleInterpolationType; palette: string; nbClass: number; dataDomain: [number, number]; @@ -80,14 +80,14 @@ export interface MapState { } const getColorScale = ({ - paletteType, + scaleInterpolationType, palette, getValue, data, dataDomain, nbClass, }: { - paletteType: PaletteType; + scaleInterpolationType: ColorScaleInterpolationType; palette: string; getValue: (x: Observation) => number | null; data: Observation[]; @@ -99,10 +99,10 @@ const getColorScale = ({ nbClass: 9, }); - switch (paletteType) { - case "continuous": + switch (scaleInterpolationType) { + case "linear": return scaleSequential(getColorInterpolator(palette)).domain(dataDomain); - case "discrete": + case "quantize": return scaleQuantize() .domain(dataDomain) .range(getSingleHueSequentialPalette({ palette, nbClass })); @@ -140,7 +140,6 @@ const useMapState = ({ }): MapState => { const width = useWidth(); const { areaLayer, symbolLayer } = fields; - const { palette, nbClass, paletteType } = areaLayer; const getAreaLabel = useStringVariable(areaLayer.componentIri); const getSymbolLabel = useStringVariable(symbolLayer.componentIri); @@ -227,12 +226,12 @@ const useMapState = ({ ]) as [number, number]; const areaColorScale = getColorScale({ - paletteType, - palette, + scaleInterpolationType: areaLayer.colorScaleInterpolationType, + palette: areaLayer.palette, getValue: getAreaValue, data: areaData, dataDomain: areaDataDomain, - nbClass, + nbClass: areaLayer.nbClass, }); const getAreaColor = (v: number | null) => { @@ -279,9 +278,9 @@ const useMapState = ({ getValue: getAreaValue, getColor: getAreaColor, colorScale: areaColorScale, - paletteType, - palette, - nbClass: nbClass, + colorScaleInterpolationType: areaLayer.colorScaleInterpolationType, + palette: areaLayer.palette, + nbClass: areaLayer.nbClass, dataDomain: areaDataDomain, }, symbolLayer: { diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts index 67b0eda49..0f9a257f6 100644 --- a/app/configurator/config-types.ts +++ b/app/configurator/config-types.ts @@ -436,24 +436,46 @@ const TableConfig = t.type( export type TableFields = t.TypeOf; export type TableConfig = t.TypeOf; -// FIXME: These MapFields types are only placeholders for the map prototype -const PaletteType = t.union([ +const ColorScaleType = t.union([ t.literal("continuous"), t.literal("discrete"), +]); +export type ColorScaleType = t.TypeOf; + +const ColorScaleInterpolationType = t.union([ + t.literal("linear"), + t.literal("quantize"), t.literal("quantile"), t.literal("jenks"), ]); -export type PaletteType = t.TypeOf; +export type ColorScaleInterpolationType = t.TypeOf< + typeof ColorScaleInterpolationType +>; -const MapAreaLayer = t.type({ - componentIri: t.string, - measureIri: t.string, - hierarchyLevel: t.number, - show: t.boolean, - palette: t.string, - paletteType: PaletteType, - nbClass: t.number, -}); +const MapAreaLayer = t.intersection([ + t.type({ + componentIri: t.string, + measureIri: t.string, + hierarchyLevel: t.number, + show: t.boolean, + palette: t.string, + nbClass: t.number, + }), + t.union([ + t.type({ + colorScaleType: t.literal("continuous"), + colorScaleInterpolationType: t.literal("linear"), + }), + t.type({ + colorScaleType: t.literal("discrete"), + colorScaleInterpolationType: t.union([ + t.literal("quantize"), + t.literal("quantile"), + t.literal("jenks"), + ]), + }), + ]), +]); export type MapAreaLayer = t.TypeOf; const MapSymbolLayer = t.type({ diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index 0935ca4e0..8326e0b1f 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -14,6 +14,7 @@ import { ImputationType, isAreaConfig, isColumnConfig, + isMapConfig, isSegmentInConfig, } from "."; import { fetchChartConfig, saveChartConfig } from "../api"; @@ -673,7 +674,22 @@ const reducer: Reducer = ( action.value.value, Object ); + + if ( + isMapConfig(draft.chartConfig) && + action.value.field === "areaLayer" && + action.value.path === "colorScaleType" + ) { + const path = `chartConfig.fields.areaLayer.colorScaleInterpolationType`; + + if (action.value.value === "continuous") { + setWith(draft, path, "linear", Object); + } else if (action.value.value === "discrete") { + setWith(draft, path, "jenks", Object); + } + } } + return draft; case "CHART_PALETTE_CHANGED": From b86b22b6de93663f74f45860f361b9f30792a0c5 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 25 Jan 2022 17:46:08 +0100 Subject: [PATCH 02/20] feat: Add radio + select elements for color scale types for maps --- app/configurator/map/map-chart-options.tsx | 129 ++++++++++++--------- 1 file changed, 76 insertions(+), 53 deletions(-) diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx index d2425d774..37841b0e7 100644 --- a/app/configurator/map/map-chart-options.tsx +++ b/app/configurator/map/map-chart-options.tsx @@ -1,5 +1,6 @@ import { t, Trans } from "@lingui/macro"; import React, { memo, useMemo } from "react"; +import { Flex } from "theme-ui"; import { ConfiguratorStateConfiguringChart, MapConfig } from ".."; import { FieldSetLegend } from "../../components/form"; import { @@ -21,14 +22,6 @@ import { ColorPickerField, } from "../components/field"; -const NUMBER_OF_CLASSES_OPTIONS = Array.from( - { length: 7 }, - (_, i) => i + 3 -).map((d) => ({ - value: d, - label: `${d}`, -})); - export const MapColumnOptions = ({ state, metaData, @@ -139,6 +132,18 @@ export const AreaLayerSettings = memo( [metaData.measures] ); + const numberOfGeoShapes = (dimension.geoShapes as any).topology.objects + .shapes.geometries.length as number; + + const numberOfColorScaleClasses = useMemo( + () => + Array.from( + { length: Math.min(7, Math.max(0, numberOfGeoShapes - 2)) }, + (_, i) => i + 3 + ).map((d) => ({ value: d, label: `${d}` })), + [numberOfGeoShapes] + ); + const disabled = !chartConfig.fields.areaLayer.show; return ( @@ -171,7 +176,7 @@ export const AreaLayerSettings = memo( path="componentIri" options={geoShapesDimensionsOptions} disabled={disabled} - > + /> @@ -185,7 +190,7 @@ export const AreaLayerSettings = memo( options={hierarchyLevelOptions} getValue={(d) => +d} disabled={disabled} - > + /> @@ -198,7 +203,7 @@ export const AreaLayerSettings = memo( path="measureIri" options={measuresOptions} disabled={disabled} - > + /> @@ -221,47 +226,65 @@ export const AreaLayerSettings = memo( label: d, }))} disabled={disabled} - > + /> - - - - - - - + + + + + {/* Limit the number of clusters to min. 3 */} + {numberOfGeoShapes >= 3 && ( + + )} + + {chartConfig.fields.areaLayer.colorScaleType === "discrete" && + numberOfGeoShapes >= 3 && ( + <> + + + + + )} @@ -333,7 +356,7 @@ export const SymbolLayerSettings = memo( path="componentIri" options={geoDimensionsOptions} disabled={disabled} - > + /> @@ -346,7 +369,7 @@ export const SymbolLayerSettings = memo( path="measureIri" options={measuresOptions} disabled={disabled} - > + /> @@ -357,7 +380,7 @@ export const SymbolLayerSettings = memo( field={activeField} path="color" disabled={disabled} - > + /> From aaa0d09b35531a18273912d6057834ae5b577a03 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 15:42:43 +0100 Subject: [PATCH 03/20] feat: Add types for color palettes for maps --- app/charts/map/map-state.tsx | 6 ++++-- app/configurator/config-types.ts | 22 +++++++++++++++++++++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/app/charts/map/map-state.tsx b/app/charts/map/map-state.tsx index 624070d43..b3afb77fc 100644 --- a/app/charts/map/map-state.tsx +++ b/app/charts/map/map-state.tsx @@ -23,7 +23,9 @@ import { import { BaseLayer, ColorScaleInterpolationType, + DivergingPaletteType, MapFields, + SequentialPaletteType, } from "../../configurator/config-types"; import { GeoData, @@ -62,7 +64,7 @@ export interface MapState { | ScaleLinear | ScaleThreshold; colorScaleInterpolationType: ColorScaleInterpolationType; - palette: string; + palette: DivergingPaletteType | SequentialPaletteType; nbClass: number; dataDomain: [number, number]; }; @@ -88,7 +90,7 @@ const getColorScale = ({ nbClass, }: { scaleInterpolationType: ColorScaleInterpolationType; - palette: string; + palette: DivergingPaletteType | SequentialPaletteType; getValue: (x: Observation) => number | null; data: Observation[]; dataDomain: [number, number]; diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts index 0f9a257f6..53ac34c36 100644 --- a/app/configurator/config-types.ts +++ b/app/configurator/config-types.ts @@ -436,6 +436,26 @@ const TableConfig = t.type( export type TableFields = t.TypeOf; export type TableConfig = t.TypeOf; +const DivergingPaletteType = t.union([ + t.literal("BrBG"), + t.literal("PRGn"), + t.literal("PiYG"), + t.literal("PuOr"), +]); + +export type DivergingPaletteType = t.TypeOf; + +const SequentialPaletteType = t.union([ + t.literal("blues"), + t.literal("greens"), + t.literal("greys"), + t.literal("oranges"), + t.literal("purples"), + t.literal("reds"), +]); + +export type SequentialPaletteType = t.TypeOf; + const ColorScaleType = t.union([ t.literal("continuous"), t.literal("discrete"), @@ -458,7 +478,7 @@ const MapAreaLayer = t.intersection([ measureIri: t.string, hierarchyLevel: t.number, show: t.boolean, - palette: t.string, + palette: t.union([DivergingPaletteType, SequentialPaletteType]), nbClass: t.number, }), t.union([ From 5078e34e74c54d9ecefe25229200f78fb1b383ae Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 15:43:58 +0100 Subject: [PATCH 04/20] refactor: Use proper color palette naming conventions --- .../chart-controls/color-palette.tsx | 10 +- app/configurator/components/ui-helpers.ts | 159 ++++++++++++------ .../table/table-chart-options.tsx | 4 +- 3 files changed, 110 insertions(+), 63 deletions(-) diff --git a/app/configurator/components/chart-controls/color-palette.tsx b/app/configurator/components/chart-controls/color-palette.tsx index bf9b8dae8..2e11ae0c8 100644 --- a/app/configurator/components/chart-controls/color-palette.tsx +++ b/app/configurator/components/chart-controls/color-palette.tsx @@ -1,18 +1,18 @@ import { Trans } from "@lingui/macro"; -import { Box, Button, Flex, Text } from "theme-ui"; import { useSelect } from "downshift"; import get from "lodash/get"; import { useCallback } from "react"; +import { Box, Button, Flex, Text } from "theme-ui"; import { ConfiguratorStateConfiguringChart, useConfiguratorState } from "../.."; import { Label } from "../../../components/form"; +import { DimensionMetaDataFragment } from "../../../graphql/query-hooks"; +import { Icon } from "../../../icons"; import { categoricalPalettes, + divergingSteppedPalettes, getPalette, mapColorsToComponentValuesIris, - sequentialPalettes, } from "../ui-helpers"; -import { DimensionMetaDataFragment } from "../../../graphql/query-hooks"; -import { Icon } from "../../../icons"; type Props = { field: string; @@ -31,7 +31,7 @@ export const ColorPalette = ({ const palettes = component?.__typename === "Measure" - ? sequentialPalettes + ? divergingSteppedPalettes : categoricalPalettes; const currentPaletteName = get( diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts index b92d0559d..7e8a103c0 100644 --- a/app/configurator/components/ui-helpers.ts +++ b/app/configurator/components/ui-helpers.ts @@ -17,6 +17,7 @@ import { scaleOrdinal, schemeAccent, schemeBlues, + schemeBrBG, schemeCategory10, schemeDark2, schemeGreens, @@ -25,6 +26,8 @@ import { schemePaired, schemePastel1, schemePastel2, + schemePiYG, + schemePuOr, schemePurples, schemeReds, schemeSet1, @@ -49,7 +52,12 @@ import { getD3TimeFormatLocale, } from "../../locales/locales"; import { useLocale } from "../../locales/use-locale"; -import { TableColumn, TableFields } from "../config-types"; +import { + DivergingPaletteType, + SequentialPaletteType, + TableColumn, + TableFields, +} from "../config-types"; // FIXME: We should cover more time format const parseSecond = timeParse("%Y-%m-%dT%H:%M:%S"); @@ -644,6 +652,7 @@ export function getFieldLabel(field: string): string { } } +// Colors export const getPalette = (palette?: string): ReadonlyArray => { switch (palette) { case "accent": @@ -671,33 +680,65 @@ export const getPalette = (palette?: string): ReadonlyArray => { return schemeCategory10; } }; + export const getSingleHueSequentialPalette = ({ nbClass = 5, palette, }: { nbClass: number; - palette?: string; + palette?: DivergingPaletteType | SequentialPaletteType; }): ReadonlyArray => { switch (palette) { + case "BrBG": + return schemeBrBG[nbClass]; + case "PRGn": + return schemePiYG[nbClass]; + case "PiYG": + return schemePiYG[nbClass]; + case "PuOr": + return schemePuOr[nbClass]; case "blues": return schemeBlues[nbClass]; case "greens": return schemeGreens[nbClass]; - case "oranges": - return schemeOranges[nbClass]; case "greys": return schemeGreys[nbClass]; - case "reds": - return schemeReds[nbClass]; + case "oranges": + return schemeOranges[nbClass]; case "purples": return schemePurples[nbClass]; + case "reds": + return schemeReds[nbClass]; default: return schemeOranges[nbClass]; } }; + +export const categoricalPalettes: Array<{ + label: string; + value: string; + colors: ReadonlyArray; +}> = [ + { + label: "category10", + value: "category10", + colors: getPalette("category10"), + }, + { label: "accent", value: "accent", colors: getPalette("accent") }, + { label: "dark2", value: "dark2", colors: getPalette("dark2") }, + { label: "paired", value: "paired", colors: getPalette("paired") }, + { label: "pastel1", value: "pastel1", colors: getPalette("pastel1") }, + { label: "pastel2", value: "pastel2", colors: getPalette("pastel2") }, + { label: "set1", value: "set1", colors: getPalette("set1") }, + { label: "set2", value: "set2", colors: getPalette("set2") }, + { label: "set3", value: "set3", colors: getPalette("set3") }, +]; + +export const getDefaultCategoricalPalette = () => categoricalPalettes[0]; + export const getColorInterpolator = ( - palette?: string + palette?: SequentialPaletteType | DivergingPaletteType ): ((t: number) => string) => { switch (palette) { case "BrBG": @@ -726,60 +767,66 @@ export const getColorInterpolator = ( } }; -export const categoricalPalettes: Array<{ - label: string; - value: string; - colors: ReadonlyArray; -}> = [ - { - label: "category10", - value: "category10", - colors: getPalette("category10"), - }, - { label: "accent", value: "accent", colors: getPalette("accent") }, - { label: "dark2", value: "dark2", colors: getPalette("dark2") }, - { label: "paired", value: "paired", colors: getPalette("paired") }, - { label: "pastel1", value: "pastel1", colors: getPalette("pastel1") }, - { label: "pastel2", value: "pastel2", colors: getPalette("pastel2") }, - { label: "set1", value: "set1", colors: getPalette("set1") }, - { label: "set2", value: "set2", colors: getPalette("set2") }, - { label: "set3", value: "set3", colors: getPalette("set3") }, -]; +const steppedPaletteSteps = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]; -export const getDefaultCategoricalPalette = () => categoricalPalettes[0]; +const divergingPaletteKeys = [ + "BrBG", + "PRGn", + "PiYG", + "PuOr", +] as DivergingPaletteType[]; -const sequentialPaletteSteps = [ - 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, -]; -// Diverging color palettes -export const sequentialPalettes: Array<{ +export const divergingPalettes = divergingPaletteKeys.map((d) => ({ + label: d, + value: d, + interpolator: getColorInterpolator(d), +})) as { + label: string; + value: DivergingPaletteType; + interpolator: (t: number) => string; +}[]; + +export const divergingSteppedPalettes = divergingPaletteKeys.map((d) => ({ + label: d, + value: d, + colors: steppedPaletteSteps.map((s) => getColorInterpolator(d)(s)), +})) as { label: string; value: string; colors: ReadonlyArray; -}> = [ - { - label: "BrBG", - value: "BrBG", - colors: sequentialPaletteSteps.map((d) => getColorInterpolator("BrBG")(d)), - }, - { - label: "PRGn", - value: "PRGn", - colors: sequentialPaletteSteps.map((d) => getColorInterpolator("PRGn")(d)), - }, - { - label: "PiYG", - value: "PiYG", - colors: sequentialPaletteSteps.map((d) => getColorInterpolator("PiYG")(d)), - }, - { - label: "PuOr", - value: "PuOr", - colors: sequentialPaletteSteps.map((d) => getColorInterpolator("PuOr")(d)), - }, -]; - -export const getDefaultSequentialPalette = () => sequentialPalettes[0]; +}[]; + +export const getDefaultDivergingSteppedPalette = () => + divergingSteppedPalettes[0]; + +const sequentialPaletteKeys = [ + "blues", + "greens", + "greys", + "oranges", + "purples", + "reds", +] as SequentialPaletteType[]; + +export const sequentialPalettes = sequentialPaletteKeys.map((d) => ({ + label: d, + value: d, + interpolator: getColorInterpolator(d), +})) as { + label: string; + value: SequentialPaletteType; + interpolator: (t: number) => string; +}[]; + +export const sequentialSteppedPalettes = sequentialPaletteKeys.map((d) => ({ + label: d, + value: d, + colors: steppedPaletteSteps.map((s) => getColorInterpolator(d)(s)), +})) as { + label: string; + value: SequentialPaletteType; + colors: ReadonlyArray; +}[]; export const mapColorsToComponentValuesIris = ({ palette, diff --git a/app/configurator/table/table-chart-options.tsx b/app/configurator/table/table-chart-options.tsx index f410daee7..1d9d44867 100644 --- a/app/configurator/table/table-chart-options.tsx +++ b/app/configurator/table/table-chart-options.tsx @@ -23,7 +23,7 @@ import { } from "../components/filters"; import { getDefaultCategoricalPalette, - getDefaultSequentialPalette, + getDefaultDivergingSteppedPalette, getIconName, mapColorsToComponentValuesIris, } from "../components/ui-helpers"; @@ -264,7 +264,7 @@ export const TableColumnOptions = ({ return { type: "heatmap", textStyle: "regular", - palette: getDefaultSequentialPalette().value, + palette: getDefaultDivergingSteppedPalette().value, }; case "bar": return { From afbbc9a79baccc483f4acaa601d70b8bd7e71e91 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 16:31:46 +0100 Subject: [PATCH 05/20] feat: Add ColorRampField --- .../components/chart-controls/color-ramp.tsx | 211 ++++++++++++++++-- 1 file changed, 193 insertions(+), 18 deletions(-) diff --git a/app/configurator/components/chart-controls/color-ramp.tsx b/app/configurator/components/chart-controls/color-ramp.tsx index e1eedb831..f03c30d36 100644 --- a/app/configurator/components/chart-controls/color-ramp.tsx +++ b/app/configurator/components/chart-controls/color-ramp.tsx @@ -1,34 +1,209 @@ -import { useEffect, useRef } from "react"; -import { interpolateOranges } from "d3"; +import { Trans } from "@lingui/macro"; +import { useSelect } from "downshift"; +import { get } from "lodash"; +import { useEffect, useMemo, useRef } from "react"; +import { Box, Button, Text } from "theme-ui"; +import { + DivergingPaletteType, + SequentialPaletteType, + useConfiguratorState, +} from "../.."; +import { Label } from "../../../components/form"; +import { Icon } from "../../../icons"; +import { divergingPalettes, sequentialPalettes } from "../ui-helpers"; // Adapted from https://observablehq.com/@mbostock/color-ramp -export const ColorRamp = ({ - colorInterpolator = interpolateOranges, - nbClass = 512, - width = 288, - height = 40, -}: { + +type ColorRampProps = { colorInterpolator: (t: number) => string; - nbClass: number; + nbClass?: number; width?: number; height?: number; -}) => { +}; + +export const ColorRamp = ({ + colorInterpolator, + nbClass = 512, + width = 148, + height = 28, +}: ColorRampProps) => { const canvasRef = useRef(null); - // Clear by returning a function from usEEFFECT? + useEffect(() => { const canvas = canvasRef.current; const context = canvas && canvas.getContext("2d"); + if (canvas && context) { - canvas.style.width = `${width}px`; - canvas.style.height = `${height}px`; + context.clearRect(0, 0, width, height); canvas.style.imageRendering = "-moz-crisp-edges"; canvas.style.imageRendering = "pixelated"; - context.clearRect(0, 0, width, height); - for (let i = 0; i < nbClass; ++i) { - context.fillStyle = colorInterpolator(i / (nbClass - 1)); - context.fillRect((width / nbClass) * i, 0, width / nbClass, height); + canvas.style.borderRadius = "2px"; + + const [widthPerClass, numberOfSteps] = + nbClass > width ? [1, width] : [width / nbClass, nbClass]; + + for (let i = 0; i < numberOfSteps; ++i) { + context.fillStyle = colorInterpolator(i / (numberOfSteps - 1)); + context.fillRect(widthPerClass * i, 0, widthPerClass, height); } } + }, [colorInterpolator, height, width, nbClass]); + + return ; +}; + +type ColorRampFieldProps = Omit & { + field: string; + path: string; +}; + +export const ColorRampField = ({ + field, + path, + nbClass, +}: ColorRampFieldProps) => { + const [state, dispatch] = useConfiguratorState(); + + const palettes = useMemo( + () => [...divergingPalettes, ...sequentialPalettes], + [] + ); + + const currentPaletteName = get( + state, + `chartConfig.fields.${field}.${path}` + ) as DivergingPaletteType | SequentialPaletteType; + + const currentPalette = + palettes.find((d) => d.value === currentPaletteName) || palettes[0]; + + const { + isOpen, + getToggleButtonProps, + getLabelProps, + getMenuProps, + highlightedIndex, + getItemProps, + } = useSelect({ + items: palettes, + defaultSelectedItem: palettes.find((d) => d.value === "oranges"), + onSelectedItemChange: ({ selectedItem }) => { + if (selectedItem) { + dispatch({ + type: "CHART_OPTION_CHANGED", + value: { + field, + path, + value: selectedItem.value, + }, + }); + } + }, }); - return ; + return ( + + + + + {isOpen && ( + <> + + Diverging + + {divergingPalettes.map((d, i) => ( + + ))} + + Sequential + + {sequentialPalettes.map((d, i) => ( + + ))} + + )} + + + ); +}; + +const PaletteRamp = (props: { + palette: { + label: string; + value: DivergingPaletteType | SequentialPaletteType; + interpolator: (t: number) => string; + }; + backgroundColor: string; + itemProps: any; + nbClass?: number; +}) => { + const { palette, backgroundColor, nbClass, itemProps } = props; + + return ( + + + + + + ); }; From 8ddf7d1f0760de09de9e9180fb2b57d491dbc6b5 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 16:32:21 +0100 Subject: [PATCH 06/20] chore: Remove redundant ColorRamp --- app/charts/map/map-legend.tsx | 34 +--------------------------------- 1 file changed, 1 insertion(+), 33 deletions(-) diff --git a/app/charts/map/map-legend.tsx b/app/charts/map/map-legend.tsx index 3b02d2322..55b034cf5 100644 --- a/app/charts/map/map-legend.tsx +++ b/app/charts/map/map-legend.tsx @@ -1,6 +1,5 @@ import { axisBottom, - interpolateOranges, NumberValue, range, ScaleLinear, @@ -14,6 +13,7 @@ import { import * as React from "react"; import { useEffect, useMemo, useRef } from "react"; import { Box, Flex, Text } from "theme-ui"; +import { ColorRamp } from "../../configurator/components/chart-controls/color-ramp"; import { getColorInterpolator, useFormatInteger, @@ -569,35 +569,3 @@ const DataPointIndicator = ({ ); }; - -const ColorRamp = ({ - colorInterpolator = interpolateOranges, - nbClass, - width, - height, -}: { - colorInterpolator: (t: number) => string; - nbClass: number; - width: number; - height: number; -}) => { - const canvasRef = useRef(null); - - useEffect(() => { - const canvas = canvasRef.current; - const context = canvas && canvas.getContext("2d"); - - if (canvas && context) { - context.clearRect(0, 0, width, height); - canvas.style.imageRendering = "-moz-crisp-edges"; - canvas.style.imageRendering = "pixelated"; - - for (let i = 0; i < nbClass; ++i) { - context.fillStyle = colorInterpolator(i / (nbClass - 1)); - context.fillRect(i, 0, 1, height); - } - } - }); - - return ; -}; From fa066c8427ee4966f11061dbf942a2fde88efcb0 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 16:32:41 +0100 Subject: [PATCH 07/20] feat: Use ColorRampField in map chart options --- app/configurator/map/map-chart-options.tsx | 36 ++++++++++------------ 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx index 37841b0e7..2d0080739 100644 --- a/app/configurator/map/map-chart-options.tsx +++ b/app/configurator/map/map-chart-options.tsx @@ -10,6 +10,7 @@ import { } from "../../domain/data"; import { GeoShapesDimension } from "../../graphql/query-hooks"; import { DataCubeMetadata } from "../../graphql/types"; +import { ColorRampField } from "../components/chart-controls/color-ramp"; import { ControlSection, ControlSectionContent, @@ -144,6 +145,10 @@ export const AreaLayerSettings = memo( [numberOfGeoShapes] ); + const currentNumberOfColorScaleClasses = + chartConfig.fields.areaLayer.nbClass; + const currentColorScaleType = chartConfig.fields.areaLayer.colorScaleType; + const disabled = !chartConfig.fields.areaLayer.show; return ( @@ -208,26 +213,6 @@ export const AreaLayerSettings = memo( Color scale - - ({ - value: d, - label: d, - }))} - disabled={disabled} - /> - @@ -250,6 +235,17 @@ export const AreaLayerSettings = memo( /> )} + + + {chartConfig.fields.areaLayer.colorScaleType === "discrete" && numberOfGeoShapes >= 3 && ( <> From c15b8445c38f655d25e27ce736a334fd28b7dcea Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 16:39:17 +0100 Subject: [PATCH 08/20] feat: Add translations for divergent and sequential color palettes --- app/locales/de/messages.po | 95 +++++++++++++++++++++----------------- app/locales/en/messages.po | 95 +++++++++++++++++++++----------------- app/locales/fr/messages.po | 95 +++++++++++++++++++++----------------- app/locales/it/messages.po | 95 +++++++++++++++++++++----------------- 4 files changed, 208 insertions(+), 172 deletions(-) diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 1493bfde0..7ec8f8510 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -219,55 +219,55 @@ msgstr "Normal" msgid "controls..interactiveFilters.time.defaultSettings" msgstr "Standardeinstellung" -#: app/configurator/components/ui-helpers.ts:379 +#: app/configurator/components/ui-helpers.ts:387 msgid "controls.axis.horizontal" msgstr "Horizontale Achse" -#: app/configurator/components/ui-helpers.ts:387 +#: app/configurator/components/ui-helpers.ts:395 msgid "controls.axis.vertical" msgstr "Vertikale Achse" -#: app/configurator/map/map-chart-options.tsx:82 +#: app/configurator/map/map-chart-options.tsx:76 msgid "controls.baseLayer.showLakes" msgstr "" -#: app/configurator/map/map-chart-options.tsx:74 +#: app/configurator/map/map-chart-options.tsx:68 msgid "controls.baseLayer.showRelief" msgstr "" -#: app/configurator/components/ui-helpers.ts:481 +#: app/configurator/components/ui-helpers.ts:489 msgid "controls.chart.type.area" msgstr "Flächen" -#: app/configurator/components/ui-helpers.ts:473 +#: app/configurator/components/ui-helpers.ts:481 msgid "controls.chart.type.bar" msgstr "Balken" -#: app/configurator/components/ui-helpers.ts:469 +#: app/configurator/components/ui-helpers.ts:477 msgid "controls.chart.type.column" msgstr "Säulen" -#: app/configurator/components/ui-helpers.ts:477 +#: app/configurator/components/ui-helpers.ts:485 msgid "controls.chart.type.line" msgstr "Linien" -#: app/configurator/components/ui-helpers.ts:497 +#: app/configurator/components/ui-helpers.ts:505 msgid "controls.chart.type.map" msgstr "Karte" -#: app/configurator/components/ui-helpers.ts:489 +#: app/configurator/components/ui-helpers.ts:497 msgid "controls.chart.type.pie" msgstr "Kreis" -#: app/configurator/components/ui-helpers.ts:485 +#: app/configurator/components/ui-helpers.ts:493 msgid "controls.chart.type.scatterplot" msgstr "Scatterplot" -#: app/configurator/components/ui-helpers.ts:493 +#: app/configurator/components/ui-helpers.ts:501 msgid "controls.chart.type.table" msgstr "Tabelle" -#: app/configurator/components/ui-helpers.ts:391 +#: app/configurator/components/ui-helpers.ts:399 msgid "controls.color" msgstr "Farbe" @@ -276,27 +276,36 @@ msgid "controls.color.add" msgstr "Hinzufügen …" #: app/configurator/components/chart-controls/color-palette.tsx:78 +#: app/configurator/components/chart-controls/color-ramp.tsx:106 msgid "controls.color.palette" msgstr "Farbpalette" +#: app/configurator/components/chart-controls/color-ramp.tsx:147 +msgid "controls.color.palette.diverging" +msgstr "Divergierend" + #: app/configurator/components/chart-controls/color-palette.tsx:257 #: app/configurator/components/chart-controls/color-palette.tsx:263 msgid "controls.color.palette.reset" msgstr "Farbpalette zurücksetzen" +#: app/configurator/components/chart-controls/color-ramp.tsx:161 +msgid "controls.color.palette.sequential" +msgstr "Sequentiell" + #: app/configurator/components/chart-controls/color-picker.tsx:158 msgid "controls.colorpicker.open" msgstr "Farbwähler öffnen" -#: app/configurator/components/ui-helpers.ts:401 +#: app/configurator/components/ui-helpers.ts:409 msgid "controls.column.grouped" msgstr "gruppiert" -#: app/configurator/components/ui-helpers.ts:397 +#: app/configurator/components/ui-helpers.ts:405 msgid "controls.column.stacked" msgstr "gestapelt" -#: app/configurator/components/ui-helpers.ts:393 +#: app/configurator/components/ui-helpers.ts:401 msgid "controls.description" msgstr "Beschreibung hinzufügen" @@ -334,23 +343,23 @@ msgstr "Bitte eine Designoption oder Datendimension auswählen, um diese zu bear msgid "controls.hint.describing.chart" msgstr "Bitte ein Beschreibungsfeld auswählen, um dieses zu bearbeiten." -#: app/configurator/components/ui-helpers.ts:453 +#: app/configurator/components/ui-helpers.ts:461 msgid "controls.imputation" msgstr "Imputationstyp" #: app/configurator/components/chart-options-selector.tsx:487 -#: app/configurator/components/ui-helpers.ts:465 +#: app/configurator/components/ui-helpers.ts:473 msgid "controls.imputation.type.linear" msgstr "Lineare Interpolation" #: app/configurator/components/chart-options-selector.tsx:480 #: app/configurator/components/chart-options-selector.tsx:492 -#: app/configurator/components/ui-helpers.ts:457 +#: app/configurator/components/ui-helpers.ts:465 msgid "controls.imputation.type.none" msgstr "-" #: app/configurator/components/chart-options-selector.tsx:482 -#: app/configurator/components/ui-helpers.ts:461 +#: app/configurator/components/ui-helpers.ts:469 msgid "controls.imputation.type.zeros" msgstr "Nullen" @@ -374,36 +383,36 @@ msgstr "Keine Zeitdimension verfügbar!" msgid "controls.interactiveFilters.time.toggleTimeFilter" msgstr "Zeitfilter anzeigen" -#: app/configurator/components/ui-helpers.ts:501 +#: app/configurator/components/ui-helpers.ts:509 msgid "controls.language.english" msgstr "Englisch" -#: app/configurator/components/ui-helpers.ts:509 +#: app/configurator/components/ui-helpers.ts:517 msgid "controls.language.french" msgstr "Französisch" -#: app/configurator/components/ui-helpers.ts:505 +#: app/configurator/components/ui-helpers.ts:513 msgid "controls.language.german" msgstr "Deutsch" -#: app/configurator/components/ui-helpers.ts:513 +#: app/configurator/components/ui-helpers.ts:521 msgid "controls.language.italian" msgstr "Italienisch" -#: app/configurator/components/ui-helpers.ts:409 +#: app/configurator/components/ui-helpers.ts:417 msgid "controls.map.areaLayer" msgstr "" #: app/configurator/components/chart-options-selector.tsx:176 -#: app/configurator/components/ui-helpers.ts:405 +#: app/configurator/components/ui-helpers.ts:413 msgid "controls.map.baseLayer" msgstr "" -#: app/configurator/components/ui-helpers.ts:413 +#: app/configurator/components/ui-helpers.ts:421 msgid "controls.map.symbolLayer" msgstr "" -#: app/configurator/components/ui-helpers.ts:383 +#: app/configurator/components/ui-helpers.ts:391 msgid "controls.measure" msgstr "Messwert" @@ -419,11 +428,11 @@ msgstr "Aus" msgid "controls.search.clear" msgstr "Suche zurücksetzen" -#: app/configurator/map/map-chart-options.tsx:148 +#: app/configurator/map/map-chart-options.tsx:158 msgid "controls.section.areaLayer" msgstr "" -#: app/configurator/map/map-chart-options.tsx:70 +#: app/configurator/map/map-chart-options.tsx:64 msgid "controls.section.baseLayer" msgstr "" @@ -480,7 +489,7 @@ msgstr "Datenfilter" msgid "controls.section.sorting" msgstr "Sortieren" -#: app/configurator/map/map-chart-options.tsx:310 +#: app/configurator/map/map-chart-options.tsx:329 msgid "controls.section.symbolLayer" msgstr "" @@ -567,11 +576,11 @@ msgstr "Dimension hinzufügen" msgid "controls.sorting.byDimensionLabel" msgstr "Name" -#: app/configurator/components/ui-helpers.ts:421 +#: app/configurator/components/ui-helpers.ts:429 msgid "controls.sorting.byDimensionLabel.ascending" msgstr "A → Z" -#: app/configurator/components/ui-helpers.ts:425 +#: app/configurator/components/ui-helpers.ts:433 msgid "controls.sorting.byDimensionLabel.descending" msgstr "Z → A" @@ -579,11 +588,11 @@ msgstr "Z → A" msgid "controls.sorting.byMeasure" msgstr "Messwert" -#: app/configurator/components/ui-helpers.ts:445 +#: app/configurator/components/ui-helpers.ts:453 msgid "controls.sorting.byMeasure.ascending" msgstr "1 → 9" -#: app/configurator/components/ui-helpers.ts:449 +#: app/configurator/components/ui-helpers.ts:457 msgid "controls.sorting.byMeasure.descending" msgstr "9 → 1" @@ -591,19 +600,19 @@ msgstr "9 → 1" msgid "controls.sorting.byTotalSize" msgstr "Gesamtgrösse" -#: app/configurator/components/ui-helpers.ts:429 +#: app/configurator/components/ui-helpers.ts:437 msgid "controls.sorting.byTotalSize.ascending" msgstr "Kleinste zuerst" -#: app/configurator/components/ui-helpers.ts:441 +#: app/configurator/components/ui-helpers.ts:449 msgid "controls.sorting.byTotalSize.largestBottom" msgstr "Grösste unten" -#: app/configurator/components/ui-helpers.ts:433 +#: app/configurator/components/ui-helpers.ts:441 msgid "controls.sorting.byTotalSize.largestFirst" msgstr "Grösste zuerst" -#: app/configurator/components/ui-helpers.ts:437 +#: app/configurator/components/ui-helpers.ts:445 msgid "controls.sorting.byTotalSize.largestTop" msgstr "Kleinste unten" @@ -615,7 +624,7 @@ msgstr "Sortierung entfernen" msgid "controls.sorting.selectDimension" msgstr "Wählen Sie eine Dimension aus …" -#: app/configurator/components/ui-helpers.ts:417 +#: app/configurator/components/ui-helpers.ts:425 #: app/configurator/table/table-chart-sorting-options.tsx:305 msgid "controls.sorting.sortBy" msgstr "Sortieren nach" @@ -640,7 +649,7 @@ msgstr "Sortierung" msgid "controls.tableSettings.showSearch" msgstr "Suche anzeigen" -#: app/configurator/components/ui-helpers.ts:392 +#: app/configurator/components/ui-helpers.ts:400 msgid "controls.title" msgstr "Titel hinzufügen" @@ -722,11 +731,11 @@ msgstr "Luftzug" msgid "datatable.showing.first.rows" msgstr "Die ersten 10 Zeilen werden angezeigt" -#: app/configurator/map/map-chart-options.tsx:152 +#: app/configurator/map/map-chart-options.tsx:162 msgid "fields.areaLayer.show" msgstr "" -#: app/configurator/map/map-chart-options.tsx:314 +#: app/configurator/map/map-chart-options.tsx:333 msgid "fields.symbolLayer.show" msgstr "" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index cfebea776..3993894a5 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -219,55 +219,55 @@ msgstr "Regular" msgid "controls..interactiveFilters.time.defaultSettings" msgstr "Default Settings" -#: app/configurator/components/ui-helpers.ts:379 +#: app/configurator/components/ui-helpers.ts:387 msgid "controls.axis.horizontal" msgstr "Horizontal Axis" -#: app/configurator/components/ui-helpers.ts:387 +#: app/configurator/components/ui-helpers.ts:395 msgid "controls.axis.vertical" msgstr "Vertical Axis" -#: app/configurator/map/map-chart-options.tsx:82 +#: app/configurator/map/map-chart-options.tsx:76 msgid "controls.baseLayer.showLakes" msgstr "Show lakes" -#: app/configurator/map/map-chart-options.tsx:74 +#: app/configurator/map/map-chart-options.tsx:68 msgid "controls.baseLayer.showRelief" msgstr "Show relief" -#: app/configurator/components/ui-helpers.ts:481 +#: app/configurator/components/ui-helpers.ts:489 msgid "controls.chart.type.area" msgstr "Areas" -#: app/configurator/components/ui-helpers.ts:473 +#: app/configurator/components/ui-helpers.ts:481 msgid "controls.chart.type.bar" msgstr "Bars" -#: app/configurator/components/ui-helpers.ts:469 +#: app/configurator/components/ui-helpers.ts:477 msgid "controls.chart.type.column" msgstr "Columns" -#: app/configurator/components/ui-helpers.ts:477 +#: app/configurator/components/ui-helpers.ts:485 msgid "controls.chart.type.line" msgstr "Lines" -#: app/configurator/components/ui-helpers.ts:497 +#: app/configurator/components/ui-helpers.ts:505 msgid "controls.chart.type.map" msgstr "Map" -#: app/configurator/components/ui-helpers.ts:489 +#: app/configurator/components/ui-helpers.ts:497 msgid "controls.chart.type.pie" msgstr "Pie" -#: app/configurator/components/ui-helpers.ts:485 +#: app/configurator/components/ui-helpers.ts:493 msgid "controls.chart.type.scatterplot" msgstr "Scatterplot" -#: app/configurator/components/ui-helpers.ts:493 +#: app/configurator/components/ui-helpers.ts:501 msgid "controls.chart.type.table" msgstr "Table" -#: app/configurator/components/ui-helpers.ts:391 +#: app/configurator/components/ui-helpers.ts:399 msgid "controls.color" msgstr "Color" @@ -276,27 +276,36 @@ msgid "controls.color.add" msgstr "Add ..." #: app/configurator/components/chart-controls/color-palette.tsx:78 +#: app/configurator/components/chart-controls/color-ramp.tsx:106 msgid "controls.color.palette" msgstr "Color palette" +#: app/configurator/components/chart-controls/color-ramp.tsx:147 +msgid "controls.color.palette.diverging" +msgstr "Diverging" + #: app/configurator/components/chart-controls/color-palette.tsx:257 #: app/configurator/components/chart-controls/color-palette.tsx:263 msgid "controls.color.palette.reset" msgstr "Reset color palette" +#: app/configurator/components/chart-controls/color-ramp.tsx:161 +msgid "controls.color.palette.sequential" +msgstr "Sequential" + #: app/configurator/components/chart-controls/color-picker.tsx:158 msgid "controls.colorpicker.open" msgstr "Open Color Picker" -#: app/configurator/components/ui-helpers.ts:401 +#: app/configurator/components/ui-helpers.ts:409 msgid "controls.column.grouped" msgstr "Grouped" -#: app/configurator/components/ui-helpers.ts:397 +#: app/configurator/components/ui-helpers.ts:405 msgid "controls.column.stacked" msgstr "Stacked" -#: app/configurator/components/ui-helpers.ts:393 +#: app/configurator/components/ui-helpers.ts:401 msgid "controls.description" msgstr "Description" @@ -334,23 +343,23 @@ msgstr "Select a design element or a data dimension to modify its options." msgid "controls.hint.describing.chart" msgstr "Select an annotation field to modify its content." -#: app/configurator/components/ui-helpers.ts:453 +#: app/configurator/components/ui-helpers.ts:461 msgid "controls.imputation" msgstr "Imputation type" #: app/configurator/components/chart-options-selector.tsx:487 -#: app/configurator/components/ui-helpers.ts:465 +#: app/configurator/components/ui-helpers.ts:473 msgid "controls.imputation.type.linear" msgstr "Linear interpolation" #: app/configurator/components/chart-options-selector.tsx:480 #: app/configurator/components/chart-options-selector.tsx:492 -#: app/configurator/components/ui-helpers.ts:457 +#: app/configurator/components/ui-helpers.ts:465 msgid "controls.imputation.type.none" msgstr "-" #: app/configurator/components/chart-options-selector.tsx:482 -#: app/configurator/components/ui-helpers.ts:461 +#: app/configurator/components/ui-helpers.ts:469 msgid "controls.imputation.type.zeros" msgstr "Zeros" @@ -374,36 +383,36 @@ msgstr "There is no time dimension!" msgid "controls.interactiveFilters.time.toggleTimeFilter" msgstr "Show time filter" -#: app/configurator/components/ui-helpers.ts:501 +#: app/configurator/components/ui-helpers.ts:509 msgid "controls.language.english" msgstr "English" -#: app/configurator/components/ui-helpers.ts:509 +#: app/configurator/components/ui-helpers.ts:517 msgid "controls.language.french" msgstr "French" -#: app/configurator/components/ui-helpers.ts:505 +#: app/configurator/components/ui-helpers.ts:513 msgid "controls.language.german" msgstr "German" -#: app/configurator/components/ui-helpers.ts:513 +#: app/configurator/components/ui-helpers.ts:521 msgid "controls.language.italian" msgstr "Italian" -#: app/configurator/components/ui-helpers.ts:409 +#: app/configurator/components/ui-helpers.ts:417 msgid "controls.map.areaLayer" msgstr "Area layer" #: app/configurator/components/chart-options-selector.tsx:176 -#: app/configurator/components/ui-helpers.ts:405 +#: app/configurator/components/ui-helpers.ts:413 msgid "controls.map.baseLayer" msgstr "Base layer" -#: app/configurator/components/ui-helpers.ts:413 +#: app/configurator/components/ui-helpers.ts:421 msgid "controls.map.symbolLayer" msgstr "Symbol layer" -#: app/configurator/components/ui-helpers.ts:383 +#: app/configurator/components/ui-helpers.ts:391 msgid "controls.measure" msgstr "Measure" @@ -419,11 +428,11 @@ msgstr "Off" msgid "controls.search.clear" msgstr "Clear search field" -#: app/configurator/map/map-chart-options.tsx:148 +#: app/configurator/map/map-chart-options.tsx:158 msgid "controls.section.areaLayer" msgstr "Settings" -#: app/configurator/map/map-chart-options.tsx:70 +#: app/configurator/map/map-chart-options.tsx:64 msgid "controls.section.baseLayer" msgstr "Settings" @@ -480,7 +489,7 @@ msgstr "Data Filters" msgid "controls.section.sorting" msgstr "Sort" -#: app/configurator/map/map-chart-options.tsx:310 +#: app/configurator/map/map-chart-options.tsx:329 msgid "controls.section.symbolLayer" msgstr "Settings" @@ -567,11 +576,11 @@ msgstr "Add dimension" msgid "controls.sorting.byDimensionLabel" msgstr "Name" -#: app/configurator/components/ui-helpers.ts:421 +#: app/configurator/components/ui-helpers.ts:429 msgid "controls.sorting.byDimensionLabel.ascending" msgstr "A → Z" -#: app/configurator/components/ui-helpers.ts:425 +#: app/configurator/components/ui-helpers.ts:433 msgid "controls.sorting.byDimensionLabel.descending" msgstr "Z → A" @@ -579,11 +588,11 @@ msgstr "Z → A" msgid "controls.sorting.byMeasure" msgstr "Measure" -#: app/configurator/components/ui-helpers.ts:445 +#: app/configurator/components/ui-helpers.ts:453 msgid "controls.sorting.byMeasure.ascending" msgstr "1 → 9" -#: app/configurator/components/ui-helpers.ts:449 +#: app/configurator/components/ui-helpers.ts:457 msgid "controls.sorting.byMeasure.descending" msgstr "9 → 1" @@ -591,19 +600,19 @@ msgstr "9 → 1" msgid "controls.sorting.byTotalSize" msgstr "Total size" -#: app/configurator/components/ui-helpers.ts:429 +#: app/configurator/components/ui-helpers.ts:437 msgid "controls.sorting.byTotalSize.ascending" msgstr "Largest last" -#: app/configurator/components/ui-helpers.ts:441 +#: app/configurator/components/ui-helpers.ts:449 msgid "controls.sorting.byTotalSize.largestBottom" msgstr "Largest bottom" -#: app/configurator/components/ui-helpers.ts:433 +#: app/configurator/components/ui-helpers.ts:441 msgid "controls.sorting.byTotalSize.largestFirst" msgstr "Largest first" -#: app/configurator/components/ui-helpers.ts:437 +#: app/configurator/components/ui-helpers.ts:445 msgid "controls.sorting.byTotalSize.largestTop" msgstr "Largest top" @@ -615,7 +624,7 @@ msgstr "Remove sorting dimension" msgid "controls.sorting.selectDimension" msgstr "Select a dimension …" -#: app/configurator/components/ui-helpers.ts:417 +#: app/configurator/components/ui-helpers.ts:425 #: app/configurator/table/table-chart-sorting-options.tsx:305 msgid "controls.sorting.sortBy" msgstr "Sort by" @@ -640,7 +649,7 @@ msgstr "Sorting" msgid "controls.tableSettings.showSearch" msgstr "Show search field" -#: app/configurator/components/ui-helpers.ts:392 +#: app/configurator/components/ui-helpers.ts:400 msgid "controls.title" msgstr "Title" @@ -722,11 +731,11 @@ msgstr "Draft" msgid "datatable.showing.first.rows" msgstr "Showing first 10 rows" -#: app/configurator/map/map-chart-options.tsx:152 +#: app/configurator/map/map-chart-options.tsx:162 msgid "fields.areaLayer.show" msgstr "Show layer" -#: app/configurator/map/map-chart-options.tsx:314 +#: app/configurator/map/map-chart-options.tsx:333 msgid "fields.symbolLayer.show" msgstr "Show layer" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index c8c7d1d1f..2b8ff967e 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -219,55 +219,55 @@ msgstr "Normal" msgid "controls..interactiveFilters.time.defaultSettings" msgstr "Paramètres d'origine" -#: app/configurator/components/ui-helpers.ts:379 +#: app/configurator/components/ui-helpers.ts:387 msgid "controls.axis.horizontal" msgstr "Axe horizontal" -#: app/configurator/components/ui-helpers.ts:387 +#: app/configurator/components/ui-helpers.ts:395 msgid "controls.axis.vertical" msgstr "Axe vertical" -#: app/configurator/map/map-chart-options.tsx:82 +#: app/configurator/map/map-chart-options.tsx:76 msgid "controls.baseLayer.showLakes" msgstr "" -#: app/configurator/map/map-chart-options.tsx:74 +#: app/configurator/map/map-chart-options.tsx:68 msgid "controls.baseLayer.showRelief" msgstr "" -#: app/configurator/components/ui-helpers.ts:481 +#: app/configurator/components/ui-helpers.ts:489 msgid "controls.chart.type.area" msgstr "Surfaces" -#: app/configurator/components/ui-helpers.ts:473 +#: app/configurator/components/ui-helpers.ts:481 msgid "controls.chart.type.bar" msgstr "Barres" -#: app/configurator/components/ui-helpers.ts:469 +#: app/configurator/components/ui-helpers.ts:477 msgid "controls.chart.type.column" msgstr "Colonnes" -#: app/configurator/components/ui-helpers.ts:477 +#: app/configurator/components/ui-helpers.ts:485 msgid "controls.chart.type.line" msgstr "Lignes" -#: app/configurator/components/ui-helpers.ts:497 +#: app/configurator/components/ui-helpers.ts:505 msgid "controls.chart.type.map" msgstr "Carte" -#: app/configurator/components/ui-helpers.ts:489 +#: app/configurator/components/ui-helpers.ts:497 msgid "controls.chart.type.pie" msgstr "Secteurs" -#: app/configurator/components/ui-helpers.ts:485 +#: app/configurator/components/ui-helpers.ts:493 msgid "controls.chart.type.scatterplot" msgstr "Nuage de points" -#: app/configurator/components/ui-helpers.ts:493 +#: app/configurator/components/ui-helpers.ts:501 msgid "controls.chart.type.table" msgstr "Tableau" -#: app/configurator/components/ui-helpers.ts:391 +#: app/configurator/components/ui-helpers.ts:399 msgid "controls.color" msgstr "Couleur" @@ -276,27 +276,36 @@ msgid "controls.color.add" msgstr "Ajouter…" #: app/configurator/components/chart-controls/color-palette.tsx:78 +#: app/configurator/components/chart-controls/color-ramp.tsx:106 msgid "controls.color.palette" msgstr "Couleurs" +#: app/configurator/components/chart-controls/color-ramp.tsx:147 +msgid "controls.color.palette.diverging" +msgstr "Divergent" + #: app/configurator/components/chart-controls/color-palette.tsx:257 #: app/configurator/components/chart-controls/color-palette.tsx:263 msgid "controls.color.palette.reset" msgstr "Réinitialiser la palette de couleurs" +#: app/configurator/components/chart-controls/color-ramp.tsx:161 +msgid "controls.color.palette.sequential" +msgstr "Séquentielle" + #: app/configurator/components/chart-controls/color-picker.tsx:158 msgid "controls.colorpicker.open" msgstr "Ouvrir la pipette à couleur" -#: app/configurator/components/ui-helpers.ts:401 +#: app/configurator/components/ui-helpers.ts:409 msgid "controls.column.grouped" msgstr "groupées" -#: app/configurator/components/ui-helpers.ts:397 +#: app/configurator/components/ui-helpers.ts:405 msgid "controls.column.stacked" msgstr "empilées" -#: app/configurator/components/ui-helpers.ts:393 +#: app/configurator/components/ui-helpers.ts:401 msgid "controls.description" msgstr "Description" @@ -334,23 +343,23 @@ msgstr "Sélectionnez un élément de design ou une dimension du jeu de données msgid "controls.hint.describing.chart" msgstr "Sélectionnez une des annotations proposées pour la modifier." -#: app/configurator/components/ui-helpers.ts:453 +#: app/configurator/components/ui-helpers.ts:461 msgid "controls.imputation" msgstr "Type d'imputation" #: app/configurator/components/chart-options-selector.tsx:487 -#: app/configurator/components/ui-helpers.ts:465 +#: app/configurator/components/ui-helpers.ts:473 msgid "controls.imputation.type.linear" msgstr "Interpolation linéaire" #: app/configurator/components/chart-options-selector.tsx:480 #: app/configurator/components/chart-options-selector.tsx:492 -#: app/configurator/components/ui-helpers.ts:457 +#: app/configurator/components/ui-helpers.ts:465 msgid "controls.imputation.type.none" msgstr "-" #: app/configurator/components/chart-options-selector.tsx:482 -#: app/configurator/components/ui-helpers.ts:461 +#: app/configurator/components/ui-helpers.ts:469 msgid "controls.imputation.type.zeros" msgstr "Zéros" @@ -374,36 +383,36 @@ msgstr "Il n'y a pas de dimension temporelle!" msgid "controls.interactiveFilters.time.toggleTimeFilter" msgstr "Afficher le filtre temporel" -#: app/configurator/components/ui-helpers.ts:501 +#: app/configurator/components/ui-helpers.ts:509 msgid "controls.language.english" msgstr "Anglais" -#: app/configurator/components/ui-helpers.ts:509 +#: app/configurator/components/ui-helpers.ts:517 msgid "controls.language.french" msgstr "Français" -#: app/configurator/components/ui-helpers.ts:505 +#: app/configurator/components/ui-helpers.ts:513 msgid "controls.language.german" msgstr "Allemand" -#: app/configurator/components/ui-helpers.ts:513 +#: app/configurator/components/ui-helpers.ts:521 msgid "controls.language.italian" msgstr "Italien" -#: app/configurator/components/ui-helpers.ts:409 +#: app/configurator/components/ui-helpers.ts:417 msgid "controls.map.areaLayer" msgstr "" #: app/configurator/components/chart-options-selector.tsx:176 -#: app/configurator/components/ui-helpers.ts:405 +#: app/configurator/components/ui-helpers.ts:413 msgid "controls.map.baseLayer" msgstr "" -#: app/configurator/components/ui-helpers.ts:413 +#: app/configurator/components/ui-helpers.ts:421 msgid "controls.map.symbolLayer" msgstr "" -#: app/configurator/components/ui-helpers.ts:383 +#: app/configurator/components/ui-helpers.ts:391 msgid "controls.measure" msgstr "Variable mesurée" @@ -419,11 +428,11 @@ msgstr "Inactif" msgid "controls.search.clear" msgstr "Effacer la recherche" -#: app/configurator/map/map-chart-options.tsx:148 +#: app/configurator/map/map-chart-options.tsx:158 msgid "controls.section.areaLayer" msgstr "" -#: app/configurator/map/map-chart-options.tsx:70 +#: app/configurator/map/map-chart-options.tsx:64 msgid "controls.section.baseLayer" msgstr "" @@ -480,7 +489,7 @@ msgstr "Filtres de données" msgid "controls.section.sorting" msgstr "Trier" -#: app/configurator/map/map-chart-options.tsx:310 +#: app/configurator/map/map-chart-options.tsx:329 msgid "controls.section.symbolLayer" msgstr "" @@ -567,11 +576,11 @@ msgstr "Ajouter une dimension" msgid "controls.sorting.byDimensionLabel" msgstr "Nom" -#: app/configurator/components/ui-helpers.ts:421 +#: app/configurator/components/ui-helpers.ts:429 msgid "controls.sorting.byDimensionLabel.ascending" msgstr "A → Z" -#: app/configurator/components/ui-helpers.ts:425 +#: app/configurator/components/ui-helpers.ts:433 msgid "controls.sorting.byDimensionLabel.descending" msgstr "Z → A" @@ -579,11 +588,11 @@ msgstr "Z → A" msgid "controls.sorting.byMeasure" msgstr "Mesure" -#: app/configurator/components/ui-helpers.ts:445 +#: app/configurator/components/ui-helpers.ts:453 msgid "controls.sorting.byMeasure.ascending" msgstr "1 → 9" -#: app/configurator/components/ui-helpers.ts:449 +#: app/configurator/components/ui-helpers.ts:457 msgid "controls.sorting.byMeasure.descending" msgstr "9 → 1" @@ -591,19 +600,19 @@ msgstr "9 → 1" msgid "controls.sorting.byTotalSize" msgstr "Taille totale" -#: app/configurator/components/ui-helpers.ts:429 +#: app/configurator/components/ui-helpers.ts:437 msgid "controls.sorting.byTotalSize.ascending" msgstr "Croissant" -#: app/configurator/components/ui-helpers.ts:441 +#: app/configurator/components/ui-helpers.ts:449 msgid "controls.sorting.byTotalSize.largestBottom" msgstr "Décroissant de bas en haut" -#: app/configurator/components/ui-helpers.ts:433 +#: app/configurator/components/ui-helpers.ts:441 msgid "controls.sorting.byTotalSize.largestFirst" msgstr "Décroissant" -#: app/configurator/components/ui-helpers.ts:437 +#: app/configurator/components/ui-helpers.ts:445 msgid "controls.sorting.byTotalSize.largestTop" msgstr "Décroissant de haut en bas" @@ -615,7 +624,7 @@ msgstr "Supprimer la dimension de tri" msgid "controls.sorting.selectDimension" msgstr "Sélectionner une dimension…" -#: app/configurator/components/ui-helpers.ts:417 +#: app/configurator/components/ui-helpers.ts:425 #: app/configurator/table/table-chart-sorting-options.tsx:305 msgid "controls.sorting.sortBy" msgstr "Trier par" @@ -640,7 +649,7 @@ msgstr "Tri" msgid "controls.tableSettings.showSearch" msgstr "Afficher le champ de recherche" -#: app/configurator/components/ui-helpers.ts:392 +#: app/configurator/components/ui-helpers.ts:400 msgid "controls.title" msgstr "Titre" @@ -722,11 +731,11 @@ msgstr "Brouillon" msgid "datatable.showing.first.rows" msgstr "Seules les 10 premières lignes sont affichées" -#: app/configurator/map/map-chart-options.tsx:152 +#: app/configurator/map/map-chart-options.tsx:162 msgid "fields.areaLayer.show" msgstr "" -#: app/configurator/map/map-chart-options.tsx:314 +#: app/configurator/map/map-chart-options.tsx:333 msgid "fields.symbolLayer.show" msgstr "" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 5b9e36e03..e0bf5fee8 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -219,55 +219,55 @@ msgstr "Regular" msgid "controls..interactiveFilters.time.defaultSettings" msgstr "Impostazioni predefinite" -#: app/configurator/components/ui-helpers.ts:379 +#: app/configurator/components/ui-helpers.ts:387 msgid "controls.axis.horizontal" msgstr "Asse orizzontale" -#: app/configurator/components/ui-helpers.ts:387 +#: app/configurator/components/ui-helpers.ts:395 msgid "controls.axis.vertical" msgstr "Asse verticale" -#: app/configurator/map/map-chart-options.tsx:82 +#: app/configurator/map/map-chart-options.tsx:76 msgid "controls.baseLayer.showLakes" msgstr "" -#: app/configurator/map/map-chart-options.tsx:74 +#: app/configurator/map/map-chart-options.tsx:68 msgid "controls.baseLayer.showRelief" msgstr "" -#: app/configurator/components/ui-helpers.ts:481 +#: app/configurator/components/ui-helpers.ts:489 msgid "controls.chart.type.area" msgstr "Aree" -#: app/configurator/components/ui-helpers.ts:473 +#: app/configurator/components/ui-helpers.ts:481 msgid "controls.chart.type.bar" msgstr "Barre" -#: app/configurator/components/ui-helpers.ts:469 +#: app/configurator/components/ui-helpers.ts:477 msgid "controls.chart.type.column" msgstr "Colonne" -#: app/configurator/components/ui-helpers.ts:477 +#: app/configurator/components/ui-helpers.ts:485 msgid "controls.chart.type.line" msgstr "Linee" -#: app/configurator/components/ui-helpers.ts:497 +#: app/configurator/components/ui-helpers.ts:505 msgid "controls.chart.type.map" msgstr "Mappa" -#: app/configurator/components/ui-helpers.ts:489 +#: app/configurator/components/ui-helpers.ts:497 msgid "controls.chart.type.pie" msgstr "Torta" -#: app/configurator/components/ui-helpers.ts:485 +#: app/configurator/components/ui-helpers.ts:493 msgid "controls.chart.type.scatterplot" msgstr "Scatterplot" -#: app/configurator/components/ui-helpers.ts:493 +#: app/configurator/components/ui-helpers.ts:501 msgid "controls.chart.type.table" msgstr "Tabella" -#: app/configurator/components/ui-helpers.ts:391 +#: app/configurator/components/ui-helpers.ts:399 msgid "controls.color" msgstr "Colore" @@ -276,27 +276,36 @@ msgid "controls.color.add" msgstr "Aggiungi ..." #: app/configurator/components/chart-controls/color-palette.tsx:78 +#: app/configurator/components/chart-controls/color-ramp.tsx:106 msgid "controls.color.palette" msgstr "Palette di colori" +#: app/configurator/components/chart-controls/color-ramp.tsx:147 +msgid "controls.color.palette.diverging" +msgstr "Divergente" + #: app/configurator/components/chart-controls/color-palette.tsx:257 #: app/configurator/components/chart-controls/color-palette.tsx:263 msgid "controls.color.palette.reset" msgstr "Ripristina la tavolozza dei colori" +#: app/configurator/components/chart-controls/color-ramp.tsx:161 +msgid "controls.color.palette.sequential" +msgstr "Sequenziale" + #: app/configurator/components/chart-controls/color-picker.tsx:158 msgid "controls.colorpicker.open" msgstr "Apri il selettore di colore" -#: app/configurator/components/ui-helpers.ts:401 +#: app/configurator/components/ui-helpers.ts:409 msgid "controls.column.grouped" msgstr "raggruppate" -#: app/configurator/components/ui-helpers.ts:397 +#: app/configurator/components/ui-helpers.ts:405 msgid "controls.column.stacked" msgstr "impilate" -#: app/configurator/components/ui-helpers.ts:393 +#: app/configurator/components/ui-helpers.ts:401 msgid "controls.description" msgstr "Descrizione" @@ -334,23 +343,23 @@ msgstr "Seleziona un elemento di design o una dimensione dei dati per modificarn msgid "controls.hint.describing.chart" msgstr "Seleziona una delle annotazioni proposte per modificarla." -#: app/configurator/components/ui-helpers.ts:453 +#: app/configurator/components/ui-helpers.ts:461 msgid "controls.imputation" msgstr "Tipo di imputazione" #: app/configurator/components/chart-options-selector.tsx:487 -#: app/configurator/components/ui-helpers.ts:465 +#: app/configurator/components/ui-helpers.ts:473 msgid "controls.imputation.type.linear" msgstr "Interpolazione lineare" #: app/configurator/components/chart-options-selector.tsx:480 #: app/configurator/components/chart-options-selector.tsx:492 -#: app/configurator/components/ui-helpers.ts:457 +#: app/configurator/components/ui-helpers.ts:465 msgid "controls.imputation.type.none" msgstr "-" #: app/configurator/components/chart-options-selector.tsx:482 -#: app/configurator/components/ui-helpers.ts:461 +#: app/configurator/components/ui-helpers.ts:469 msgid "controls.imputation.type.zeros" msgstr "Zeri" @@ -374,36 +383,36 @@ msgstr "Nessuna dimensione temporale disponibile!" msgid "controls.interactiveFilters.time.toggleTimeFilter" msgstr "Mostra i filtri temporali" -#: app/configurator/components/ui-helpers.ts:501 +#: app/configurator/components/ui-helpers.ts:509 msgid "controls.language.english" msgstr "Inglese" -#: app/configurator/components/ui-helpers.ts:509 +#: app/configurator/components/ui-helpers.ts:517 msgid "controls.language.french" msgstr "Francese" -#: app/configurator/components/ui-helpers.ts:505 +#: app/configurator/components/ui-helpers.ts:513 msgid "controls.language.german" msgstr "Tedesco" -#: app/configurator/components/ui-helpers.ts:513 +#: app/configurator/components/ui-helpers.ts:521 msgid "controls.language.italian" msgstr "Italiano" -#: app/configurator/components/ui-helpers.ts:409 +#: app/configurator/components/ui-helpers.ts:417 msgid "controls.map.areaLayer" msgstr "" #: app/configurator/components/chart-options-selector.tsx:176 -#: app/configurator/components/ui-helpers.ts:405 +#: app/configurator/components/ui-helpers.ts:413 msgid "controls.map.baseLayer" msgstr "" -#: app/configurator/components/ui-helpers.ts:413 +#: app/configurator/components/ui-helpers.ts:421 msgid "controls.map.symbolLayer" msgstr "" -#: app/configurator/components/ui-helpers.ts:383 +#: app/configurator/components/ui-helpers.ts:391 msgid "controls.measure" msgstr "Misura" @@ -419,11 +428,11 @@ msgstr "Inattivo" msgid "controls.search.clear" msgstr "Cancella la ricerca" -#: app/configurator/map/map-chart-options.tsx:148 +#: app/configurator/map/map-chart-options.tsx:158 msgid "controls.section.areaLayer" msgstr "" -#: app/configurator/map/map-chart-options.tsx:70 +#: app/configurator/map/map-chart-options.tsx:64 msgid "controls.section.baseLayer" msgstr "" @@ -480,7 +489,7 @@ msgstr "Filtri di dati" msgid "controls.section.sorting" msgstr "Ordina" -#: app/configurator/map/map-chart-options.tsx:310 +#: app/configurator/map/map-chart-options.tsx:329 msgid "controls.section.symbolLayer" msgstr "" @@ -567,11 +576,11 @@ msgstr "Aggiungi una dimensione" msgid "controls.sorting.byDimensionLabel" msgstr "Nome" -#: app/configurator/components/ui-helpers.ts:421 +#: app/configurator/components/ui-helpers.ts:429 msgid "controls.sorting.byDimensionLabel.ascending" msgstr "A → Z" -#: app/configurator/components/ui-helpers.ts:425 +#: app/configurator/components/ui-helpers.ts:433 msgid "controls.sorting.byDimensionLabel.descending" msgstr "Z → A" @@ -579,11 +588,11 @@ msgstr "Z → A" msgid "controls.sorting.byMeasure" msgstr "Misura" -#: app/configurator/components/ui-helpers.ts:445 +#: app/configurator/components/ui-helpers.ts:453 msgid "controls.sorting.byMeasure.ascending" msgstr "1 → 9" -#: app/configurator/components/ui-helpers.ts:449 +#: app/configurator/components/ui-helpers.ts:457 msgid "controls.sorting.byMeasure.descending" msgstr "9 → 1" @@ -591,19 +600,19 @@ msgstr "9 → 1" msgid "controls.sorting.byTotalSize" msgstr "Grandezza totale" -#: app/configurator/components/ui-helpers.ts:429 +#: app/configurator/components/ui-helpers.ts:437 msgid "controls.sorting.byTotalSize.ascending" msgstr "Il più grande per ultimo" -#: app/configurator/components/ui-helpers.ts:441 +#: app/configurator/components/ui-helpers.ts:449 msgid "controls.sorting.byTotalSize.largestBottom" msgstr "Il più grande sotto" -#: app/configurator/components/ui-helpers.ts:433 +#: app/configurator/components/ui-helpers.ts:441 msgid "controls.sorting.byTotalSize.largestFirst" msgstr "Il più grande per primo" -#: app/configurator/components/ui-helpers.ts:437 +#: app/configurator/components/ui-helpers.ts:445 msgid "controls.sorting.byTotalSize.largestTop" msgstr "Il più grande sopra" @@ -615,7 +624,7 @@ msgstr "Rimuovi l'ordinamento" msgid "controls.sorting.selectDimension" msgstr "Seleziona una dimensione ..." -#: app/configurator/components/ui-helpers.ts:417 +#: app/configurator/components/ui-helpers.ts:425 #: app/configurator/table/table-chart-sorting-options.tsx:305 msgid "controls.sorting.sortBy" msgstr "Ordina per" @@ -640,7 +649,7 @@ msgstr "Ordinamento" msgid "controls.tableSettings.showSearch" msgstr "Mostra il campo di ricerca" -#: app/configurator/components/ui-helpers.ts:392 +#: app/configurator/components/ui-helpers.ts:400 msgid "controls.title" msgstr "Titolo" @@ -722,11 +731,11 @@ msgstr "" msgid "datatable.showing.first.rows" msgstr "Sono mostrate soltanto le prime 10 righe" -#: app/configurator/map/map-chart-options.tsx:152 +#: app/configurator/map/map-chart-options.tsx:162 msgid "fields.areaLayer.show" msgstr "" -#: app/configurator/map/map-chart-options.tsx:314 +#: app/configurator/map/map-chart-options.tsx:333 msgid "fields.symbolLayer.show" msgstr "" From 1cdae164810e4724da3f6723a6c4fd1c6a60e56b Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 16:57:05 +0100 Subject: [PATCH 09/20] feat: Add color types to tables --- app/configurator/components/ui-helpers.ts | 2 +- app/configurator/config-types.ts | 74 +++++++++++------------ app/docs/fixtures.ts | 6 +- 3 files changed, 41 insertions(+), 41 deletions(-) diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts index 7e8a103c0..225cc32e1 100644 --- a/app/configurator/components/ui-helpers.ts +++ b/app/configurator/components/ui-helpers.ts @@ -792,7 +792,7 @@ export const divergingSteppedPalettes = divergingPaletteKeys.map((d) => ({ colors: steppedPaletteSteps.map((s) => getColorInterpolator(d)(s)), })) as { label: string; - value: string; + value: DivergingPaletteType; colors: ReadonlyArray; }[]; diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts index 53ac34c36..f53bebeb0 100644 --- a/app/configurator/config-types.ts +++ b/app/configurator/config-types.ts @@ -359,6 +359,42 @@ const PieConfig = t.type( export type PieFields = t.TypeOf; export type PieConfig = t.TypeOf; +const DivergingPaletteType = t.union([ + t.literal("BrBG"), + t.literal("PRGn"), + t.literal("PiYG"), + t.literal("PuOr"), +]); + +export type DivergingPaletteType = t.TypeOf; + +const SequentialPaletteType = t.union([ + t.literal("blues"), + t.literal("greens"), + t.literal("greys"), + t.literal("oranges"), + t.literal("purples"), + t.literal("reds"), +]); + +export type SequentialPaletteType = t.TypeOf; + +const ColorScaleType = t.union([ + t.literal("continuous"), + t.literal("discrete"), +]); +export type ColorScaleType = t.TypeOf; + +const ColorScaleInterpolationType = t.union([ + t.literal("linear"), + t.literal("quantize"), + t.literal("quantile"), + t.literal("jenks"), +]); +export type ColorScaleInterpolationType = t.TypeOf< + typeof ColorScaleInterpolationType +>; + const ColumnTextStyle = t.union([t.literal("regular"), t.literal("bold")]); const ColumnStyleText = t.type({ @@ -376,7 +412,7 @@ const ColumnStyleCategory = t.type({ const ColumnStyleHeatmap = t.type({ type: t.literal("heatmap"), textStyle: ColumnTextStyle, - palette: t.string, + palette: DivergingPaletteType, }); const ColumnStyleBar = t.type({ type: t.literal("bar"), @@ -436,42 +472,6 @@ const TableConfig = t.type( export type TableFields = t.TypeOf; export type TableConfig = t.TypeOf; -const DivergingPaletteType = t.union([ - t.literal("BrBG"), - t.literal("PRGn"), - t.literal("PiYG"), - t.literal("PuOr"), -]); - -export type DivergingPaletteType = t.TypeOf; - -const SequentialPaletteType = t.union([ - t.literal("blues"), - t.literal("greens"), - t.literal("greys"), - t.literal("oranges"), - t.literal("purples"), - t.literal("reds"), -]); - -export type SequentialPaletteType = t.TypeOf; - -const ColorScaleType = t.union([ - t.literal("continuous"), - t.literal("discrete"), -]); -export type ColorScaleType = t.TypeOf; - -const ColorScaleInterpolationType = t.union([ - t.literal("linear"), - t.literal("quantize"), - t.literal("quantile"), - t.literal("jenks"), -]); -export type ColorScaleInterpolationType = t.TypeOf< - typeof ColorScaleInterpolationType ->; - const MapAreaLayer = t.intersection([ t.type({ componentIri: t.string, diff --git a/app/docs/fixtures.ts b/app/docs/fixtures.ts index 71677d8de..933411db5 100644 --- a/app/docs/fixtures.ts +++ b/app/docs/fixtures.ts @@ -930,7 +930,7 @@ export const tableConfig: TableConfig = { componentType: "Measure", columnStyle: { type: "heatmap", - palette: "oranges", + palette: "BrBG", textStyle: "regular", }, }, @@ -985,7 +985,7 @@ export const tableConfig: TableConfig = { isGroup: false, isHidden: false, componentType: "Measure", - columnStyle: { type: "heatmap", palette: "turbo", textStyle: "regular" }, + columnStyle: { type: "heatmap", palette: "PRGn", textStyle: "regular" }, }, "http://environment.ld.admin.ch/foen/px/0703010000_105/measure/6": { componentIri: @@ -997,7 +997,7 @@ export const tableConfig: TableConfig = { columnStyle: { type: "heatmap", textStyle: "regular", - palette: "cividis", + palette: "PiYG", }, }, "http://environment.ld.admin.ch/foen/px/0703010000_105/measure/7": { From c338eee94ed6cd39f1c45d990115daaab5d08525 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 17:24:39 +0100 Subject: [PATCH 10/20] fix: Set correct nbClass type to chart state --- app/configurator/map/map-chart-options.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx index 2d0080739..dd28d37bc 100644 --- a/app/configurator/map/map-chart-options.tsx +++ b/app/configurator/map/map-chart-options.tsx @@ -271,13 +271,14 @@ export const AreaLayerSettings = memo( ]} disabled={disabled} /> - id="areaLayer.nbClass" label="Number of classes" field={activeField} path="nbClass" options={numberOfColorScaleClasses} disabled={disabled} + getValue={(d) => +d} /> )} From 48d1724fadd6706a5c0537bc6e6ce4ec8d3f805c Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Wed, 26 Jan 2022 17:48:05 +0100 Subject: [PATCH 11/20] feat: Do not cut color domain range on nbClass change --- app/charts/map/map-legend.tsx | 2 +- app/charts/map/map-state.tsx | 23 +++++++++++++++-------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/app/charts/map/map-legend.tsx b/app/charts/map/map-legend.tsx index 55b034cf5..c3e4ba142 100644 --- a/app/charts/map/map-legend.tsx +++ b/app/charts/map/map-legend.tsx @@ -520,7 +520,7 @@ const ContinuousColorLegend = () => { width={width - MARGIN.left - MARGIN.right} height={COLOR_RAMP_HEIGHT} colorInterpolator={getColorInterpolator(palette)} - nbClass={width} + nbClass={width - MARGIN.left - MARGIN.right} /> { - const paletteDomain = getSingleHueSequentialPalette({ - palette, - nbClass: 9, - }); + const interpolator = getColorInterpolator(palette); + const getDiscreteRange = () => { + return Array.from({ length: nbClass }, (_, i) => + interpolator(i / (nbClass - 1)) + ); + }; switch (scaleInterpolationType) { case "linear": - return scaleSequential(getColorInterpolator(palette)).domain(dataDomain); + return scaleSequential(interpolator).domain(dataDomain); case "quantize": return scaleQuantize() .domain(dataDomain) - .range(getSingleHueSequentialPalette({ palette, nbClass })); + .range(getDiscreteRange()); case "quantile": return scaleQuantile() .domain(data.map((d) => getValue(d))) - .range(getSingleHueSequentialPalette({ palette, nbClass })); + .range(getDiscreteRange()); case "jenks": const ckMeansThresholds = ckmeans( data.map((d) => getValue(d) ?? NaN), @@ -120,8 +122,13 @@ const getColorScale = ({ return scaleThreshold() .domain(ckMeansThresholds) - .range(getSingleHueSequentialPalette({ palette, nbClass })); + .range(getDiscreteRange()); default: + const paletteDomain = getSingleHueSequentialPalette({ + palette, + nbClass: 9, + }); + return scaleLinear() .domain(dataDomain) .range([paletteDomain[0], paletteDomain[paletteDomain.length - 1]]); From 20d3349b009a213377cbfaf201223ca7d3abdd50 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 27 Jan 2022 10:11:53 +0100 Subject: [PATCH 12/20] fix: Retrieve number of geoShapes only if geoDimension if here --- app/configurator/map/map-chart-options.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/configurator/map/map-chart-options.tsx b/app/configurator/map/map-chart-options.tsx index dd28d37bc..5dbad7880 100644 --- a/app/configurator/map/map-chart-options.tsx +++ b/app/configurator/map/map-chart-options.tsx @@ -133,8 +133,11 @@ export const AreaLayerSettings = memo( [metaData.measures] ); - const numberOfGeoShapes = (dimension.geoShapes as any).topology.objects - .shapes.geometries.length as number; + const numberOfGeoShapes = ( + dimension + ? (dimension.geoShapes as any).topology.objects.shapes.geometries.length + : 0 + ) as number; const numberOfColorScaleClasses = useMemo( () => From 05e18244fff1ed092b4763d105d39e510ca1c085 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 27 Jan 2022 10:21:50 +0100 Subject: [PATCH 13/20] feat: Add disabled prop to ColorRamp --- .../components/chart-controls/color-ramp.tsx | 11 ++++++++--- app/configurator/map/map-chart-options.tsx | 1 + 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/configurator/components/chart-controls/color-ramp.tsx b/app/configurator/components/chart-controls/color-ramp.tsx index f03c30d36..faedd5436 100644 --- a/app/configurator/components/chart-controls/color-ramp.tsx +++ b/app/configurator/components/chart-controls/color-ramp.tsx @@ -18,6 +18,7 @@ type ColorRampProps = { nbClass?: number; width?: number; height?: number; + disabled?: boolean; }; export const ColorRamp = ({ @@ -25,6 +26,7 @@ export const ColorRamp = ({ nbClass = 512, width = 148, height = 28, + disabled = false, }: ColorRampProps) => { const canvasRef = useRef(null); @@ -37,6 +39,7 @@ export const ColorRamp = ({ canvas.style.imageRendering = "-moz-crisp-edges"; canvas.style.imageRendering = "pixelated"; canvas.style.borderRadius = "2px"; + canvas.style.opacity = disabled ? "0.5" : "1"; const [widthPerClass, numberOfSteps] = nbClass > width ? [1, width] : [width / nbClass, nbClass]; @@ -46,7 +49,7 @@ export const ColorRamp = ({ context.fillRect(widthPerClass * i, 0, widthPerClass, height); } } - }, [colorInterpolator, height, width, nbClass]); + }, [colorInterpolator, nbClass, width, height, disabled]); return ; }; @@ -59,6 +62,7 @@ type ColorRampFieldProps = Omit & { export const ColorRampField = ({ field, path, + disabled, nbClass, }: ColorRampFieldProps) => { const [state, dispatch] = useConfiguratorState(); @@ -101,8 +105,8 @@ export const ColorRampField = ({ }); return ( - -