Skip to content

Commit 9ef45dc

Browse files
sophiamersmannsophiamersmann
committed
✨ (admin) show categorical map colors as presets
1 parent 00617e6 commit 9ef45dc

5 files changed

Lines changed: 55 additions & 17 deletions

File tree

‎adminSiteClient/Colorpicker.tsx‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ import {
88
ColorSchemes,
99
getColorNameOwidDistinctAndSemanticPalettes,
1010
getColorNameOwidDistinctLinesAndSemanticPalettes,
11+
OwidMapColors,
1112
} from "@ourworldindata/grapher"
1213
interface ColorpickerProps {
1314
color?: string
1415
showLineChartColors: boolean
16+
baseColorScheme?: ColorSchemeName
1517
onColor: (color: string | undefined) => void
1618
}
1719

@@ -30,27 +32,42 @@ export class Colorpicker extends Component<ColorpickerProps> {
3032
}
3133
}
3234

33-
override render() {
34-
const scheme = this.props.showLineChartColors
35-
? ColorSchemes.get(ColorSchemeName.OwidDistinctLines)
36-
: ColorSchemes.get(ColorSchemeName["owid-distinct"])
35+
private get presetColors(): { color: string; title: string }[] {
36+
const isOwidCategoricalMap =
37+
this.props.baseColorScheme === ColorSchemeName.OwidCategoricalMap
38+
39+
if (isOwidCategoricalMap) {
40+
// We use OwidMapColors instead of the scheme's palette
41+
// because it includes three additional 'special' colors
42+
// to be used sparingly when needed (Taupe, Mustard, Tomato)
43+
return Object.entries(OwidMapColors).map(([name, color]) => ({
44+
color,
45+
title: name,
46+
}))
47+
} else {
48+
const scheme = this.props.showLineChartColors
49+
? ColorSchemes.get(ColorSchemeName.OwidDistinctLines)
50+
: ColorSchemes.get(ColorSchemeName["owid-distinct"])
3751

38-
const availableColors: string[] = lastOfNonEmptyArray(scheme.colorSets)
39-
const colorNameLookupFn = (color: string) => {
40-
const nameLines = this.props.showLineChartColors
41-
? getColorNameOwidDistinctLinesAndSemanticPalettes(color)
42-
: getColorNameOwidDistinctAndSemanticPalettes(color)
43-
return nameLines.join(" ")
52+
const colorNameLookupFn = (color: string) => {
53+
const nameLines = this.props.showLineChartColors
54+
? getColorNameOwidDistinctLinesAndSemanticPalettes(color)
55+
: getColorNameOwidDistinctAndSemanticPalettes(color)
56+
return nameLines.join(" ")
57+
}
58+
return lastOfNonEmptyArray(scheme.colorSets).map((color) => ({
59+
color,
60+
title: colorNameLookupFn(color),
61+
}))
4462
}
63+
}
4564

65+
override render() {
4666
return (
4767
<Fragment>
4868
<SketchPicker
4969
disableAlpha
50-
presetColors={availableColors.map((color) => ({
51-
color,
52-
title: colorNameLookupFn(color),
53-
}))}
70+
presetColors={this.presetColors}
5471
color={this.props.color}
5572
onChange={(color) => this.onColor(color.hex)}
5673
/>

‎adminSiteClient/EditorColorScaleSection.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,7 @@ class ColorsSection extends Component<ColorsSectionProps> {
347347
scale={scale}
348348
onChange={this.props.onChange}
349349
showLineChartColors={this.props.showLineChartColors}
350+
baseColorScheme={scale.baseColorScheme}
350351
/>
351352
</Section>
352353
)
@@ -356,6 +357,7 @@ class ColorsSection extends Component<ColorsSectionProps> {
356357
interface ColorSchemeEditorProps {
357358
scale: ColorScale
358359
showLineChartColors: boolean
360+
baseColorScheme?: ColorSchemeName
359361
onChange?: () => void
360362
}
361363

@@ -377,6 +379,7 @@ class ColorSchemeEditor extends Component<ColorSchemeEditorProps> {
377379
showLineChartColors={
378380
this.props.showLineChartColors
379381
}
382+
baseColorScheme={this.props.baseColorScheme}
380383
onChange={this.props.onChange}
381384
/>
382385
)
@@ -389,6 +392,7 @@ class ColorSchemeEditor extends Component<ColorSchemeEditorProps> {
389392
showLineChartColors={
390393
this.props.showLineChartColors
391394
}
395+
baseColorScheme={this.props.baseColorScheme}
392396
onChange={this.props.onChange}
393397
/>
394398
)
@@ -469,6 +473,7 @@ interface NumericBinViewProps {
469473
bin: NumericBin
470474
index: number
471475
showLineChartColors: boolean
476+
baseColorScheme?: ColorSchemeName
472477
onChange?: () => void
473478
}
474479

@@ -558,6 +563,7 @@ class NumericBinView extends Component<NumericBinViewProps> {
558563
color={bin.color}
559564
onColor={this.onColor}
560565
showLineChartColors={this.props.showLineChartColors}
566+
baseColorScheme={this.props.baseColorScheme}
561567
/>
562568
<div className="range">
563569
<span>
@@ -602,6 +608,7 @@ interface CategoricalBinViewProps {
602608
scale: ColorScale
603609
bin: CategoricalBin
604610
showLineChartColors: boolean
611+
baseColorScheme?: ColorSchemeName
605612
onChange?: () => void
606613
}
607614

@@ -657,6 +664,7 @@ class CategoricalBinView extends Component<CategoricalBinViewProps> {
657664
color={bin.color}
658665
onColor={this.onColor}
659666
showLineChartColors={this.props.showLineChartColors}
667+
baseColorScheme={this.props.baseColorScheme}
660668
/>
661669
<TextField value={bin.value} disabled={true} onValue={_.noop} />
662670
<Toggle

‎adminSiteClient/Forms.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@
88
import * as _ from "lodash-es"
99
import * as React from "react"
1010
import { useState } from "react"
11-
import { bind, dayjs, Tippy, copyToClipboard } from "@ourworldindata/utils"
11+
import {
12+
bind,
13+
dayjs,
14+
Tippy,
15+
copyToClipboard,
16+
ColorSchemeName,
17+
} from "@ourworldindata/utils"
1218
import { action, makeObservable } from "mobx"
1319
import { observer } from "mobx-react"
1420
import cx from "classnames"
@@ -676,6 +682,7 @@ interface ColorBoxProps {
676682
color: string | undefined
677683
onColor: (color: string | undefined) => void
678684
showLineChartColors: boolean
685+
baseColorScheme?: ColorSchemeName
679686
}
680687

681688
@observer
@@ -694,6 +701,7 @@ export class ColorBox extends React.Component<ColorBoxProps> {
694701
color={color}
695702
onColor={this.props.onColor}
696703
showLineChartColors={this.props.showLineChartColors}
704+
baseColorScheme={this.props.baseColorScheme}
697705
/>
698706
<div
699707
style={{

‎packages/@ourworldindata/grapher/src/color/CustomSchemes.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import * as _ from "lodash-es"
22
import { lazy } from "@ourworldindata/utils"
3-
import { ColorSchemeInterface, ColorSchemeName } from "@ourworldindata/types"
3+
import {
4+
Color,
5+
ColorSchemeInterface,
6+
ColorSchemeName,
7+
} from "@ourworldindata/types"
48
import * as R from "remeda"
59

610
// TODO: Initialize CustomColorSchemes lazily
@@ -695,7 +699,7 @@ export const BinaryMapPaletteE = {
695699

696700
CustomColorSchemes.push(BinaryMapPaletteE)
697701

698-
export const OwidMapColors = {
702+
export const OwidMapColors: Record<string, Color> = {
699703
// Main
700704
MutedDenim: "#526F9B",
701705
SoftOrange: "#CC7641",

‎packages/@ourworldindata/grapher/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export { DimensionSlot } from "./chart/DimensionSlot"
5555
export { EntityPicker } from "./controls/entityPicker/EntityPicker"
5656
export type { EntityPickerManager } from "./controls/entityPicker/EntityPickerConstants"
5757
export { getColorSchemeForChartType } from "./color/ColorSchemes"
58+
export { OwidMapColors } from "./color/CustomSchemes"
5859
export {
5960
isCategoricalBin,
6061
isNumericBin,

0 commit comments

Comments
 (0)