Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: New design for color scale palette picking for maps #294

Merged
merged 21 commits into from
Jan 27, 2022
Merged

feat: New design for color scale palette picking for maps #294

Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
d3ce6fb
refactor: Improve map color scale types
bprusinowski Jan 25, 2022
b86b22b
feat: Add radio + select elements for color scale types for maps
bprusinowski Jan 25, 2022
aaa0d09
feat: Add types for color palettes for maps
bprusinowski Jan 26, 2022
5078e34
refactor: Use proper color palette naming conventions
bprusinowski Jan 26, 2022
afbbc9a
feat: Add ColorRampField
bprusinowski Jan 26, 2022
8ddf7d1
chore: Remove redundant ColorRamp
bprusinowski Jan 26, 2022
fa066c8
feat: Use ColorRampField in map chart options
bprusinowski Jan 26, 2022
c15b844
feat: Add translations for divergent and sequential color palettes
bprusinowski Jan 26, 2022
1cdae16
feat: Add color types to tables
bprusinowski Jan 26, 2022
c338eee
fix: Set correct nbClass type to chart state
bprusinowski Jan 26, 2022
48d1724
feat: Do not cut color domain range on nbClass change
bprusinowski Jan 26, 2022
20d3349
fix: Retrieve number of geoShapes only if geoDimension if here
bprusinowski Jan 27, 2022
05e1824
feat: Add disabled prop to ColorRamp
bprusinowski Jan 27, 2022
36627fa
feat: Use translations for discrete color scale names
bprusinowski Jan 27, 2022
64809ca
refactor: Add more types for colors
bprusinowski Jan 27, 2022
8082a27
refactor: Move default palette in ColorRamp to useMemo
bprusinowski Jan 27, 2022
832090d
refactor: Small improvements to ColorRampField
bprusinowski Jan 27, 2022
108b56c
feat: Add ColorRamp docs
bprusinowski Jan 27, 2022
c419d6e
refactor: Move selectColorPicker style to theme object
bprusinowski Jan 27, 2022
b070e07
feat: Add types to field and path in ColorRampField
bprusinowski Jan 27, 2022
c60d46e
Merge branch 'main' of github.com:visualize-admin/visualization-tool …
bprusinowski Jan 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 76 additions & 53 deletions app/configurator/map/map-chart-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -171,7 +176,7 @@ export const AreaLayerSettings = memo(
path="componentIri"
options={geoShapesDimensionsOptions}
disabled={disabled}
></ChartOptionSelectField>
/>
</ControlSectionContent>
</ControlSection>
<ControlSection>
Expand All @@ -185,7 +190,7 @@ export const AreaLayerSettings = memo(
options={hierarchyLevelOptions}
getValue={(d) => +d}
disabled={disabled}
></ChartOptionSelectField>
/>
</ControlSectionContent>
</ControlSection>
<ControlSection>
Expand All @@ -198,7 +203,7 @@ export const AreaLayerSettings = memo(
path="measureIri"
options={measuresOptions}
disabled={disabled}
></ChartOptionSelectField>
/>
</ControlSectionContent>
</ControlSection>
<ControlSection>
Expand All @@ -221,47 +226,65 @@ export const AreaLayerSettings = memo(
label: d,
}))}
disabled={disabled}
></ChartOptionSelectField>
/>
</ControlSectionContent>
<ControlSectionContent side="right">
<FieldSetLegend legendTitle="Continuous"></FieldSetLegend>
<ChartOptionRadioField
label="Linear interpolation"
field={activeField}
path="paletteType"
value="continuous"
disabled={disabled}
></ChartOptionRadioField>
<FieldSetLegend legendTitle="Discrete"></FieldSetLegend>
<ChartOptionRadioField
label="Quantize (equal intervals)"
field={activeField}
path="paletteType"
value="discrete"
disabled={disabled}
></ChartOptionRadioField>
<ChartOptionRadioField
label="Quantiles (equal distribution of values)"
field={activeField}
path="paletteType"
value="quantile"
disabled={disabled}
></ChartOptionRadioField>
<ChartOptionRadioField
label="Jenks (natural breaks)"
field={activeField}
path="paletteType"
value="jenks"
disabled={disabled}
></ChartOptionRadioField>
<ChartOptionSelectField
id="areaLayer.nbClass"
label="Number of classes"
field={activeField}
path="nbClass"
options={NUMBER_OF_CLASSES_OPTIONS}
disabled={disabled}
></ChartOptionSelectField>
<FieldSetLegend legendTitle="Scale type" />
<Flex sx={{ justifyContent: "flex-start" }} mt={1}>
<ChartOptionRadioField
label="Continuous"
field={activeField}
path="colorScaleType"
value="continuous"
disabled={disabled}
/>

{/* Limit the number of clusters to min. 3 */}
{numberOfGeoShapes >= 3 && (
<ChartOptionRadioField
label="Discrete"
field={activeField}
path="colorScaleType"
value="discrete"
disabled={disabled}
/>
)}
</Flex>
{chartConfig.fields.areaLayer.colorScaleType === "discrete" &&
numberOfGeoShapes >= 3 && (
<>
<FieldSetLegend legendTitle="Interpolation" />
<ChartOptionSelectField
id="areaLayer.colorScaleInterpolationType"
label={null}
field={activeField}
path="colorScaleInterpolationType"
options={[
{
label: "Quantize (equal intervals)",
value: "quantize",
},
{
label: "Quantiles (equal distribution of values)",
value: "quantile",
},
{
label: "Jenks (natural breaks)",
value: "jenks",
bprusinowski marked this conversation as resolved.
Show resolved Hide resolved
},
]}
disabled={disabled}
/>
<ChartOptionSelectField
id="areaLayer.nbClass"
label="Number of classes"
field={activeField}
path="nbClass"
options={numberOfColorScaleClasses}
disabled={disabled}
/>
</>
)}
</ControlSectionContent>
</ControlSection>
</>
Expand Down Expand Up @@ -333,7 +356,7 @@ export const SymbolLayerSettings = memo(
path="componentIri"
options={geoDimensionsOptions}
disabled={disabled}
></ChartOptionSelectField>
/>
</ControlSectionContent>
</ControlSection>
<ControlSection>
Expand All @@ -346,7 +369,7 @@ export const SymbolLayerSettings = memo(
path="measureIri"
options={measuresOptions}
disabled={disabled}
></ChartOptionSelectField>
/>
</ControlSectionContent>
</ControlSection>
<ControlSection>
Expand All @@ -357,7 +380,7 @@ export const SymbolLayerSettings = memo(
field={activeField}
path="color"
disabled={disabled}
></ColorPickerField>
/>
</ControlSectionContent>
</ControlSection>
</>
Expand Down