@buildcanada/charts 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/components/Button/Button.scss +17 -17
- package/src/components/Button/Button.tsx +4 -4
- package/src/components/MarkdownTextWrap/MarkdownTextWrap.tsx +1 -1
- package/src/components/index.ts +1 -1
- package/src/components/stubs/DataCitation.tsx +1 -1
- package/src/components/stubs/IndicatorKeyData.tsx +1 -1
- package/src/components/stubs/IndicatorProcessing.tsx +1 -1
- package/src/components/stubs/IndicatorSources.tsx +1 -1
- package/src/components/styles/colors.scss +1 -1
- package/src/components/styles/mixins.scss +5 -5
- package/src/core-table/{OwidTable.ts → ChartsTable.ts} +31 -31
- package/src/core-table/CoreTable.ts +12 -12
- package/src/core-table/CoreTableColumns.ts +24 -24
- package/src/core-table/CoreTableUtils.ts +7 -7
- package/src/core-table/{OwidTableSynthesizers.ts → TableSynthesizers.ts} +24 -24
- package/src/core-table/{OwidTableUtil.ts → TableUtil.ts} +5 -5
- package/src/core-table/index.ts +3 -3
- package/src/explorer/ColumnGrammar.ts +1 -1
- package/src/explorer/Explorer.sample.ts +7 -7
- package/src/explorer/Explorer.scss +1 -1
- package/src/explorer/Explorer.tsx +23 -23
- package/src/explorer/ExplorerConstants.ts +2 -2
- package/src/explorer/ExplorerGrammar.ts +3 -3
- package/src/explorer/ExplorerProgram.ts +21 -18
- package/src/explorer/ExplorerUtils.ts +1 -1
- package/src/explorer/gridLang/readme.md +1 -1
- package/src/grapher/axis/Axis.ts +3 -3
- package/src/grapher/barCharts/DiscreteBarChart.tsx +2 -2
- package/src/grapher/barCharts/DiscreteBarChartState.ts +8 -8
- package/src/grapher/captionedChart/Logos.tsx +11 -13
- package/src/grapher/captionedChart/LogosSVG.tsx +2 -2
- package/src/grapher/chart/ChartAreaContent.tsx +1 -1
- package/src/grapher/chart/ChartDimension.ts +15 -15
- package/src/grapher/chart/ChartInterface.ts +6 -6
- package/src/grapher/chart/ChartManager.ts +3 -3
- package/src/grapher/chart/ChartUtils.tsx +3 -3
- package/src/grapher/color/ColorConstants.ts +2 -2
- package/src/grapher/color/ColorScale.ts +4 -4
- package/src/grapher/color/ColorSchemes.ts +26 -26
- package/src/grapher/color/CustomSchemes.ts +227 -227
- package/src/grapher/controls/DataTableFilterDropdown.tsx +2 -2
- package/src/grapher/controls/MapZoomDropdown.tsx +3 -3
- package/src/grapher/controls/ShareMenu.tsx +1 -1
- package/src/grapher/controls/entityPicker/EntityPicker.tsx +8 -8
- package/src/grapher/controls/entityPicker/EntityPickerConstants.ts +3 -3
- package/src/grapher/controls/globalEntitySelector/GlobalEntitySelector.tsx +1 -1
- package/src/grapher/core/EntitiesByRegionType.ts +4 -4
- package/src/grapher/core/EntityUrlBuilder.ts +2 -2
- package/src/grapher/core/FetchingGrapher.tsx +4 -4
- package/src/grapher/core/Grapher.tsx +10 -10
- package/src/grapher/core/GrapherState.tsx +46 -46
- package/src/grapher/core/GrapherUseHelpers.tsx +4 -4
- package/src/grapher/core/{LegacyToOwidTable.ts → LegacyToChartsTable.ts} +100 -100
- package/src/grapher/core/loadGrapherTableHelpers.ts +13 -13
- package/src/grapher/core/loadVariable.ts +5 -5
- package/src/grapher/dataTable/DataTable.sample.ts +12 -12
- package/src/grapher/dataTable/DataTable.tsx +22 -22
- package/src/grapher/dataTable/DataTableConstants.ts +9 -9
- package/src/grapher/entitySelector/EntitySelector.tsx +12 -12
- package/src/grapher/facet/FacetChart.tsx +4 -4
- package/src/grapher/facet/FacetMap.tsx +6 -6
- package/src/grapher/footer/Footer.tsx +4 -4
- package/src/grapher/footer/FooterManager.ts +2 -2
- package/src/grapher/header/Header.tsx +5 -5
- package/src/grapher/header/HeaderManager.ts +1 -1
- package/src/grapher/index.ts +8 -8
- package/src/grapher/lineCharts/LineChartHelpers.ts +3 -3
- package/src/grapher/lineCharts/LineChartState.ts +9 -9
- package/src/grapher/mapCharts/ChoroplethGlobe.tsx +1 -1
- package/src/grapher/mapCharts/GlobeController.ts +9 -9
- package/src/grapher/mapCharts/MapChartState.ts +16 -16
- package/src/grapher/mapCharts/MapSparkline.tsx +5 -5
- package/src/grapher/mapCharts/MapTooltip.tsx +13 -13
- package/src/grapher/modal/DownloadModal.scss +3 -3
- package/src/grapher/modal/DownloadModal.tsx +24 -29
- package/src/grapher/modal/SourcesDescriptions.scss +1 -1
- package/src/grapher/modal/SourcesKeyDataTable.tsx +2 -2
- package/src/grapher/modal/SourcesModal.tsx +15 -15
- package/src/grapher/scatterCharts/ScatterPlotChart.tsx +2 -2
- package/src/grapher/scatterCharts/ScatterPlotChartConstants.ts +2 -2
- package/src/grapher/scatterCharts/ScatterPlotChartState.ts +8 -8
- package/src/grapher/scatterCharts/ScatterSizeLegend.tsx +2 -2
- package/src/grapher/scatterCharts/ScatterUtils.ts +2 -2
- package/src/grapher/schema/grapher-schema.009.yaml +18 -18
- package/src/grapher/schema/migrations/migrations.ts +4 -4
- package/src/grapher/selection/MapSelectionArray.ts +1 -1
- package/src/grapher/selection/readme.md +1 -1
- package/src/grapher/slopeCharts/SlopeChartConstants.ts +3 -3
- package/src/grapher/slopeCharts/SlopeChartState.ts +10 -10
- package/src/grapher/stackedCharts/AbstractStackedChartState.ts +8 -8
- package/src/grapher/stackedCharts/MarimekkoChart.tsx +5 -5
- package/src/grapher/stackedCharts/MarimekkoChartConstants.ts +2 -2
- package/src/grapher/stackedCharts/MarimekkoChartState.ts +12 -12
- package/src/grapher/stackedCharts/StackedBarChartState.ts +1 -1
- package/src/grapher/stackedCharts/StackedConstants.ts +2 -2
- package/src/grapher/stackedCharts/StackedDiscreteBarChartState.ts +12 -12
- package/src/grapher/stackedCharts/StackedDiscreteBars.tsx +2 -2
- package/src/grapher/testData/{OwidTestData.sample.ts → TestData.sample.ts} +7 -7
- package/src/grapher/testData/{OwidTestData.ts → TestData.ts} +5 -5
- package/src/index.ts +7 -7
- package/src/types/{OwidOrigin.ts → Origin.ts} +3 -3
- package/src/types/{OwidSource.ts → Source.ts} +1 -1
- package/src/types/Variable.ts +133 -0
- package/src/types/{OwidVariableDisplayConfigInterface.ts → VariableDisplayConfigInterface.ts} +11 -11
- package/src/types/domainTypes/ContentGraph.ts +2 -2
- package/src/types/domainTypes/CoreTableTypes.ts +29 -29
- package/src/types/domainTypes/Posts.ts +2 -2
- package/src/types/domainTypes/Search.ts +6 -6
- package/src/types/domainTypes/Various.ts +1 -1
- package/src/types/gdocTypes/Gdoc.ts +42 -42
- package/src/types/grapherTypes/GrapherTypes.ts +21 -21
- package/src/types/index.ts +50 -50
- package/src/utils/MultiDimDataPageConfig.ts +1 -1
- package/src/utils/Util.ts +61 -55
- package/src/utils/{OwidVariable.ts → Variable.ts} +15 -15
- package/src/utils/formatValue.ts +12 -12
- package/src/utils/image.ts +12 -12
- package/src/utils/index.ts +5 -5
- package/src/utils/metadataHelpers.ts +19 -19
- package/src/utils/regions.ts +9 -9
- package/src/types/OwidVariable.ts +0 -133
|
@@ -8,7 +8,7 @@ export const CustomColorSchemes: ColorSchemeInterface[] = []
|
|
|
8
8
|
|
|
9
9
|
// Create some of our own!
|
|
10
10
|
|
|
11
|
-
export const
|
|
11
|
+
export const DistinctColors = {
|
|
12
12
|
Purple: "#6d3e91",
|
|
13
13
|
DarkOrange: "#c05917",
|
|
14
14
|
LightTeal: "#58ac8c",
|
|
@@ -35,11 +35,11 @@ export const OwidDistinctColors = {
|
|
|
35
35
|
Coral: "#d73c50",
|
|
36
36
|
} as const
|
|
37
37
|
|
|
38
|
-
const
|
|
38
|
+
const DistinctColorsNames = lazy(() => R.invert(DistinctColors))
|
|
39
39
|
|
|
40
40
|
// These are variations of some of the colors above where the original color would have too little
|
|
41
41
|
// contrast against a white background for thin lines or text elements
|
|
42
|
-
export const
|
|
42
|
+
export const DarkerDistinctColors: Record<string, string> = {
|
|
43
43
|
DarkOrangeDarker: "#be5915",
|
|
44
44
|
PeachDarker: "#c4523e",
|
|
45
45
|
LightTealDarker: "#2c8465",
|
|
@@ -49,113 +49,113 @@ export const DarkerOwidDistinctColors: Record<string, string> = {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
const darkerColorReplacementsHexToReplacementColorName = {
|
|
52
|
-
[
|
|
53
|
-
[
|
|
54
|
-
[
|
|
55
|
-
[
|
|
56
|
-
[
|
|
57
|
-
[
|
|
52
|
+
[DistinctColors.DarkOrange]: DarkerDistinctColors.DarkOrangeDarker,
|
|
53
|
+
[DistinctColors.Peach]: DarkerDistinctColors.PeachDarker,
|
|
54
|
+
[DistinctColors.LightTeal]: DarkerDistinctColors.LightTealDarker,
|
|
55
|
+
[DistinctColors.Turquoise]: DarkerDistinctColors.TurquoiseDarker,
|
|
56
|
+
[DistinctColors.Camel]: DarkerDistinctColors.CamelDarker,
|
|
57
|
+
[DistinctColors.Lime]: DarkerDistinctColors.LimeDarker,
|
|
58
58
|
} as Record<string, string>
|
|
59
59
|
|
|
60
60
|
// TODO: Make this into a lazy initialization
|
|
61
|
-
export const
|
|
62
|
-
..._.omit(
|
|
63
|
-
...
|
|
61
|
+
export const DistinctLinesColors = {
|
|
62
|
+
..._.omit(DistinctColors, Object.keys(DarkerDistinctColors)),
|
|
63
|
+
...DarkerDistinctColors,
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
// Used for looking up names from color hex values
|
|
67
|
-
const
|
|
68
|
-
R.invert(
|
|
67
|
+
const DistinctLinesColorNames = lazy(() =>
|
|
68
|
+
R.invert(DistinctLinesColors)
|
|
69
69
|
)
|
|
70
70
|
|
|
71
71
|
// Below are 5 variations of the same colors in different permutations
|
|
72
72
|
export const CategoricalColorsPaletteA = [
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
73
|
+
DistinctColors.Denim,
|
|
74
|
+
DistinctColors.Maroon,
|
|
75
|
+
DistinctColors.OliveGreen,
|
|
76
|
+
DistinctColors.RustyOrange,
|
|
77
|
+
DistinctColors.Copper,
|
|
78
|
+
DistinctColors.Cherry,
|
|
79
|
+
DistinctColors.Coral,
|
|
80
|
+
DistinctColors.MidnightBlue,
|
|
81
|
+
DistinctColors.Teal,
|
|
82
|
+
DistinctColors.Camel,
|
|
83
|
+
DistinctColors.Mauve,
|
|
84
|
+
DistinctColors.DarkOliveGreen,
|
|
85
85
|
]
|
|
86
86
|
|
|
87
87
|
export const CategoricalColorsPaletteB = [
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
88
|
+
DistinctColors.Teal,
|
|
89
|
+
DistinctColors.MidnightBlue,
|
|
90
|
+
DistinctColors.DustyCoral,
|
|
91
|
+
DistinctColors.Turquoise,
|
|
92
|
+
DistinctColors.DarkMauve,
|
|
93
|
+
DistinctColors.DarkOliveGreen,
|
|
94
|
+
DistinctColors.RustyOrange,
|
|
95
|
+
DistinctColors.Camel,
|
|
96
|
+
DistinctColors.Blue,
|
|
97
|
+
DistinctColors.Cherry,
|
|
98
|
+
DistinctColors.LightTeal,
|
|
99
|
+
DistinctColors.DarkCopper,
|
|
100
|
+
DistinctColors.Peach,
|
|
101
101
|
]
|
|
102
102
|
|
|
103
103
|
export const CategoricalColorsPaletteC = [
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
104
|
+
DistinctColors.Purple,
|
|
105
|
+
DistinctColors.DarkOrange,
|
|
106
|
+
DistinctColors.LightTeal,
|
|
107
|
+
DistinctColors.Blue,
|
|
108
|
+
DistinctColors.Maroon,
|
|
109
|
+
DistinctColors.Camel,
|
|
110
|
+
DistinctColors.MidnightBlue,
|
|
111
|
+
DistinctColors.DustyCoral,
|
|
112
|
+
DistinctColors.DarkOliveGreen,
|
|
113
|
+
DistinctColors.DarkCopper,
|
|
114
|
+
DistinctColors.Peach,
|
|
115
|
+
DistinctColors.Mauve,
|
|
116
|
+
DistinctColors.Turquoise,
|
|
117
|
+
DistinctColors.OliveGreen,
|
|
118
|
+
DistinctColors.Cherry,
|
|
119
|
+
DistinctColors.Teal,
|
|
120
|
+
DistinctColors.RustyOrange,
|
|
121
|
+
DistinctColors.Denim,
|
|
122
|
+
DistinctColors.Fuchsia,
|
|
123
|
+
DistinctColors.TealishGreen,
|
|
124
|
+
DistinctColors.Copper,
|
|
125
|
+
DistinctColors.DarkMauve,
|
|
126
|
+
DistinctColors.Lime,
|
|
127
|
+
DistinctColors.Coral,
|
|
128
128
|
]
|
|
129
129
|
|
|
130
130
|
export const CategoricalColorsPaletteD = [
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
131
|
+
DistinctColors.DustyCoral,
|
|
132
|
+
DistinctColors.DarkOliveGreen,
|
|
133
|
+
DistinctColors.Camel,
|
|
134
|
+
DistinctColors.DarkMauve,
|
|
135
|
+
DistinctColors.Turquoise,
|
|
136
|
+
DistinctColors.TealishGreen,
|
|
137
|
+
DistinctColors.Peach,
|
|
138
|
+
DistinctColors.DarkCopper,
|
|
139
|
+
DistinctColors.Fuchsia,
|
|
140
|
+
DistinctColors.MidnightBlue,
|
|
141
141
|
]
|
|
142
142
|
|
|
143
143
|
export const CategoricalColorsPaletteE = [
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
144
|
+
DistinctColors.DarkCopper,
|
|
145
|
+
DistinctColors.Peach,
|
|
146
|
+
DistinctColors.Blue,
|
|
147
|
+
DistinctColors.DarkOliveGreen,
|
|
148
|
+
DistinctColors.Purple,
|
|
149
|
+
DistinctColors.Teal,
|
|
150
|
+
DistinctColors.Maroon,
|
|
151
|
+
DistinctColors.Coral,
|
|
152
|
+
DistinctColors.OliveGreen,
|
|
153
|
+
DistinctColors.Camel,
|
|
154
|
+
DistinctColors.DarkMauve,
|
|
155
155
|
]
|
|
156
|
-
export const
|
|
157
|
-
name: ColorSchemeName["
|
|
158
|
-
displayName: "
|
|
156
|
+
export const DistinctColorScheme = {
|
|
157
|
+
name: ColorSchemeName["distinct"],
|
|
158
|
+
displayName: "Distinct",
|
|
159
159
|
singleColorScale: false,
|
|
160
160
|
isDistinct: true,
|
|
161
161
|
// We use the feature of ColorSchemes to use the Palette A permutation
|
|
@@ -163,99 +163,99 @@ export const OwidDistinctColorScheme = {
|
|
|
163
163
|
// colors
|
|
164
164
|
colorSets: [CategoricalColorsPaletteA, CategoricalColorsPaletteC],
|
|
165
165
|
}
|
|
166
|
-
CustomColorSchemes.push(
|
|
167
|
-
|
|
168
|
-
const
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
166
|
+
CustomColorSchemes.push(DistinctColorScheme)
|
|
167
|
+
|
|
168
|
+
const DistinctLinesPalette = [
|
|
169
|
+
DistinctColors.Denim,
|
|
170
|
+
DistinctColors.RustyOrange,
|
|
171
|
+
DarkerDistinctColors.CamelDarker,
|
|
172
|
+
DarkerDistinctColors.LightTealDarker,
|
|
173
|
+
DistinctColors.Purple,
|
|
174
|
+
DistinctColors.Maroon,
|
|
175
|
+
DistinctColors.MidnightBlue,
|
|
176
|
+
DistinctColors.Mauve,
|
|
177
|
+
DistinctColors.DarkCopper,
|
|
178
|
+
DarkerDistinctColors.TurquoiseDarker,
|
|
179
|
+
DistinctColors.Cherry,
|
|
180
|
+
DarkerDistinctColors.LimeDarker,
|
|
181
|
+
DarkerDistinctColors.PeachDarker,
|
|
182
|
+
DistinctColors.Blue,
|
|
183
|
+
DistinctColors.DarkOliveGreen,
|
|
184
|
+
DistinctColors.Coral,
|
|
185
|
+
DistinctColors.Copper,
|
|
186
|
+
DistinctColors.Teal,
|
|
187
|
+
DistinctColors.Fuchsia,
|
|
188
|
+
DistinctColors.OliveGreen,
|
|
189
|
+
DarkerDistinctColors.DarkOrangeDarker,
|
|
190
|
+
DistinctColors.DarkMauve,
|
|
191
|
+
DistinctColors.TealishGreen,
|
|
192
|
+
DistinctColors.DustyCoral,
|
|
193
193
|
]
|
|
194
194
|
|
|
195
|
-
export const
|
|
196
|
-
name: ColorSchemeName["
|
|
197
|
-
displayName: "
|
|
195
|
+
export const DistinctLinesColorScheme = {
|
|
196
|
+
name: ColorSchemeName["DistinctLines"],
|
|
197
|
+
displayName: "Distinct (lines)",
|
|
198
198
|
singleColorScale: false,
|
|
199
199
|
isDistinct: true,
|
|
200
|
-
colorSets: [
|
|
200
|
+
colorSets: [DistinctLinesPalette],
|
|
201
201
|
}
|
|
202
|
-
CustomColorSchemes.push(
|
|
202
|
+
CustomColorSchemes.push(DistinctLinesColorScheme)
|
|
203
203
|
|
|
204
|
-
export const
|
|
205
|
-
name: ColorSchemeName["
|
|
206
|
-
displayName: "
|
|
204
|
+
export const CategoricalAScheme = {
|
|
205
|
+
name: ColorSchemeName["CategoricalA"],
|
|
206
|
+
displayName: "Categorical A",
|
|
207
207
|
singleColorScale: false,
|
|
208
208
|
isDistinct: true,
|
|
209
209
|
colorSets: [CategoricalColorsPaletteA],
|
|
210
210
|
}
|
|
211
|
-
CustomColorSchemes.push(
|
|
211
|
+
CustomColorSchemes.push(CategoricalAScheme)
|
|
212
212
|
|
|
213
|
-
export const
|
|
214
|
-
name: ColorSchemeName["
|
|
215
|
-
displayName: "
|
|
213
|
+
export const CategoricalBScheme = {
|
|
214
|
+
name: ColorSchemeName["CategoricalB"],
|
|
215
|
+
displayName: "Categorical B",
|
|
216
216
|
singleColorScale: false,
|
|
217
217
|
isDistinct: true,
|
|
218
218
|
colorSets: [CategoricalColorsPaletteB],
|
|
219
219
|
}
|
|
220
|
-
CustomColorSchemes.push(
|
|
220
|
+
CustomColorSchemes.push(CategoricalBScheme)
|
|
221
221
|
|
|
222
|
-
export const
|
|
223
|
-
name: ColorSchemeName["
|
|
224
|
-
displayName: "
|
|
222
|
+
export const CategoricalCScheme = {
|
|
223
|
+
name: ColorSchemeName["CategoricalC"],
|
|
224
|
+
displayName: "Categorical C",
|
|
225
225
|
singleColorScale: false,
|
|
226
226
|
isDistinct: true,
|
|
227
227
|
colorSets: [CategoricalColorsPaletteC],
|
|
228
228
|
}
|
|
229
|
-
CustomColorSchemes.push(
|
|
229
|
+
CustomColorSchemes.push(CategoricalCScheme)
|
|
230
230
|
|
|
231
|
-
export const
|
|
232
|
-
name: ColorSchemeName["
|
|
233
|
-
displayName: "
|
|
231
|
+
export const CategoricalDScheme = {
|
|
232
|
+
name: ColorSchemeName["CategoricalD"],
|
|
233
|
+
displayName: "Categorical D",
|
|
234
234
|
singleColorScale: false,
|
|
235
235
|
isDistinct: true,
|
|
236
236
|
colorSets: [CategoricalColorsPaletteD],
|
|
237
237
|
}
|
|
238
|
-
CustomColorSchemes.push(
|
|
238
|
+
CustomColorSchemes.push(CategoricalDScheme)
|
|
239
239
|
|
|
240
|
-
export const
|
|
241
|
-
name: ColorSchemeName["
|
|
242
|
-
displayName: "
|
|
240
|
+
export const CategoricalEScheme = {
|
|
241
|
+
name: ColorSchemeName["CategoricalE"],
|
|
242
|
+
displayName: "Categorical E",
|
|
243
243
|
singleColorScale: false,
|
|
244
244
|
isDistinct: true,
|
|
245
245
|
colorSets: [CategoricalColorsPaletteE],
|
|
246
246
|
}
|
|
247
|
-
CustomColorSchemes.push(
|
|
247
|
+
CustomColorSchemes.push(CategoricalEScheme)
|
|
248
248
|
|
|
249
249
|
export const EnergyColors = {
|
|
250
|
-
Coal:
|
|
251
|
-
Oil:
|
|
252
|
-
Gas:
|
|
253
|
-
Biomass:
|
|
254
|
-
Hydropower:
|
|
255
|
-
Nuclear:
|
|
256
|
-
Wind:
|
|
257
|
-
Solar:
|
|
258
|
-
OtherRenewables:
|
|
250
|
+
Coal: DistinctColors.Maroon,
|
|
251
|
+
Oil: DistinctColors.DustyCoral,
|
|
252
|
+
Gas: DistinctColors.Purple,
|
|
253
|
+
Biomass: DistinctColors.DarkCopper,
|
|
254
|
+
Hydropower: DistinctColors.Blue,
|
|
255
|
+
Nuclear: DistinctColors.Teal,
|
|
256
|
+
Wind: DistinctColors.MidnightBlue,
|
|
257
|
+
Solar: DistinctColors.Peach,
|
|
258
|
+
OtherRenewables: DistinctColors.OliveGreen,
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
// Used for looking up color names from hex values
|
|
@@ -273,15 +273,15 @@ const EnergyColorPalette = [
|
|
|
273
273
|
EnergyColors.OtherRenewables,
|
|
274
274
|
]
|
|
275
275
|
|
|
276
|
-
export const
|
|
277
|
-
name: ColorSchemeName["
|
|
278
|
-
displayName: "
|
|
276
|
+
export const Energy = {
|
|
277
|
+
name: ColorSchemeName["Energy"],
|
|
278
|
+
displayName: "Energy",
|
|
279
279
|
singleColorScale: false,
|
|
280
280
|
isDistinct: true,
|
|
281
281
|
colorSets: [EnergyColorPalette],
|
|
282
282
|
colorMap: EnergyColors,
|
|
283
283
|
}
|
|
284
|
-
CustomColorSchemes.push(
|
|
284
|
+
CustomColorSchemes.push(Energy)
|
|
285
285
|
|
|
286
286
|
function getModifiedLinesNames(
|
|
287
287
|
colorNames: Record<string, string>
|
|
@@ -300,17 +300,17 @@ const EnergyColorsLinesNames = lazy(() =>
|
|
|
300
300
|
getModifiedLinesNames(EnergyColorsNames())
|
|
301
301
|
)
|
|
302
302
|
|
|
303
|
-
export const
|
|
304
|
-
CustomColorSchemes.push(
|
|
303
|
+
export const EnergyLines = getModifiedLinesColorScheme(Energy)
|
|
304
|
+
CustomColorSchemes.push(EnergyLines)
|
|
305
305
|
|
|
306
306
|
CustomColorSchemes.push({
|
|
307
307
|
name: ColorSchemeName.stackedAreaDefault,
|
|
308
|
-
displayName: "
|
|
308
|
+
displayName: "4 Color Gradient (=Distinct)",
|
|
309
309
|
singleColorScale: false,
|
|
310
310
|
isDistinct: true,
|
|
311
|
-
// TODO: this is now a copy of
|
|
311
|
+
// TODO: this is now a copy of distinct. After a data migration to get
|
|
312
312
|
// rid of stackedAreaDefault in existing chart configs we should replace it with
|
|
313
|
-
//
|
|
313
|
+
// distinct
|
|
314
314
|
// We use the feature of ColorSchemes to use the Palette A permutation
|
|
315
315
|
// for 12 categories or less and the Palette C to reach up to 24 different
|
|
316
316
|
// colors
|
|
@@ -318,75 +318,75 @@ CustomColorSchemes.push({
|
|
|
318
318
|
})
|
|
319
319
|
|
|
320
320
|
export const ContinentColors = {
|
|
321
|
-
Africa:
|
|
322
|
-
Antarctica:
|
|
323
|
-
Asia:
|
|
324
|
-
Europe:
|
|
325
|
-
NorthAmerica:
|
|
326
|
-
["North America"]:
|
|
327
|
-
SouthAmerica:
|
|
328
|
-
["South America"]:
|
|
329
|
-
Oceania:
|
|
330
|
-
World:
|
|
331
|
-
SubSaharanAfrica:
|
|
332
|
-
MiddleEastNorthAfrica:
|
|
333
|
-
CentralAsia:
|
|
334
|
-
EastAsia:
|
|
335
|
-
SoutheastAsia:
|
|
336
|
-
SouthAsia:
|
|
337
|
-
CentralAmericaAndCarribean:
|
|
338
|
-
EasternEurope:
|
|
339
|
-
WesternEurope:
|
|
340
|
-
AustralasiaAndOceania:
|
|
321
|
+
Africa: DistinctColors.Mauve,
|
|
322
|
+
Antarctica: DistinctColors.DarkCopper,
|
|
323
|
+
Asia: DistinctColors.Teal,
|
|
324
|
+
Europe: DistinctColors.Denim,
|
|
325
|
+
NorthAmerica: DistinctColors.Peach,
|
|
326
|
+
["North America"]: DistinctColors.Peach,
|
|
327
|
+
SouthAmerica: DistinctColors.Maroon,
|
|
328
|
+
["South America"]: DistinctColors.Maroon,
|
|
329
|
+
Oceania: DistinctColors.Turquoise,
|
|
330
|
+
World: DistinctColors.DarkOliveGreen,
|
|
331
|
+
SubSaharanAfrica: DistinctColors.DarkMauve,
|
|
332
|
+
MiddleEastNorthAfrica: DistinctColors.Purple,
|
|
333
|
+
CentralAsia: DistinctColors.LightTeal,
|
|
334
|
+
EastAsia: DistinctColors.TealishGreen,
|
|
335
|
+
SoutheastAsia: DistinctColors.Lime,
|
|
336
|
+
SouthAsia: DistinctColors.OliveGreen,
|
|
337
|
+
CentralAmericaAndCarribean: DistinctColors.DustyCoral,
|
|
338
|
+
EasternEurope: DistinctColors.Blue,
|
|
339
|
+
WesternEurope: DistinctColors.MidnightBlue,
|
|
340
|
+
AustralasiaAndOceania: DistinctColors.Copper,
|
|
341
341
|
|
|
342
342
|
// World Bank regions
|
|
343
|
-
"East Asia and Pacific (WB)":
|
|
344
|
-
"Europe and Central Asia (WB)":
|
|
343
|
+
"East Asia and Pacific (WB)": DistinctColors.Copper,
|
|
344
|
+
"Europe and Central Asia (WB)": DistinctColors.Denim,
|
|
345
345
|
"Middle East, North Africa, Afghanistan and Pakistan (WB)":
|
|
346
|
-
|
|
347
|
-
"North America (WB)":
|
|
348
|
-
"South Asia (WB)":
|
|
349
|
-
"Sub-Saharan Africa (WB)":
|
|
350
|
-
"Latin America and Caribbean (WB)":
|
|
346
|
+
DistinctColors.Camel,
|
|
347
|
+
"North America (WB)": DistinctColors.Peach,
|
|
348
|
+
"South Asia (WB)": DistinctColors.OliveGreen,
|
|
349
|
+
"Sub-Saharan Africa (WB)": DistinctColors.DarkMauve,
|
|
350
|
+
"Latin America and Caribbean (WB)": DistinctColors.Maroon,
|
|
351
351
|
|
|
352
352
|
// UN regions
|
|
353
|
-
"Asia (UN)":
|
|
354
|
-
"Africa (UN)":
|
|
355
|
-
"Europe (UN)":
|
|
356
|
-
"Oceania (UN)":
|
|
357
|
-
"Northern America (UN)":
|
|
358
|
-
"Latin America and the Caribbean (UN)":
|
|
353
|
+
"Asia (UN)": DistinctColors.Teal,
|
|
354
|
+
"Africa (UN)": DistinctColors.Mauve,
|
|
355
|
+
"Europe (UN)": DistinctColors.Denim,
|
|
356
|
+
"Oceania (UN)": DistinctColors.Turquoise,
|
|
357
|
+
"Northern America (UN)": DistinctColors.Peach,
|
|
358
|
+
"Latin America and the Caribbean (UN)": DistinctColors.Maroon,
|
|
359
359
|
|
|
360
360
|
// WHO regions
|
|
361
|
-
"Africa (WHO)":
|
|
362
|
-
"Europe (WHO)":
|
|
363
|
-
"Americas (WHO)":
|
|
364
|
-
"South-East Asia (WHO)":
|
|
365
|
-
"Western Pacific (WHO)":
|
|
366
|
-
"Eastern Mediterranean (WHO)":
|
|
361
|
+
"Africa (WHO)": DistinctColors.Mauve,
|
|
362
|
+
"Europe (WHO)": DistinctColors.Denim,
|
|
363
|
+
"Americas (WHO)": DistinctColors.Peach,
|
|
364
|
+
"South-East Asia (WHO)": DistinctColors.Lime,
|
|
365
|
+
"Western Pacific (WHO)": DistinctColors.Turquoise,
|
|
366
|
+
"Eastern Mediterranean (WHO)": DistinctColors.Camel,
|
|
367
367
|
|
|
368
368
|
// Maddison regions
|
|
369
|
-
"Australia and New Zealand":
|
|
370
|
-
"Central and Southern Asia":
|
|
371
|
-
"Europe and Northern America":
|
|
372
|
-
"Eastern and South-Eastern Asia":
|
|
373
|
-
"Northern Africa and Western Asia":
|
|
374
|
-
"East Asia":
|
|
375
|
-
"Latin America":
|
|
376
|
-
"Eastern Europe":
|
|
377
|
-
"Western Europe":
|
|
378
|
-
"Western Offshoots":
|
|
379
|
-
"Sub Saharan Africa":
|
|
380
|
-
"South and South East Asia":
|
|
381
|
-
"Middle East and North Africa":
|
|
369
|
+
"Australia and New Zealand": DistinctColors.Teal,
|
|
370
|
+
"Central and Southern Asia": DistinctColors.OliveGreen,
|
|
371
|
+
"Europe and Northern America": DistinctColors.Denim,
|
|
372
|
+
"Eastern and South-Eastern Asia": DistinctColors.Copper,
|
|
373
|
+
"Northern Africa and Western Asia": DistinctColors.Camel,
|
|
374
|
+
"East Asia": DistinctColors.Copper,
|
|
375
|
+
"Latin America": DistinctColors.Maroon,
|
|
376
|
+
"Eastern Europe": DistinctColors.MidnightBlue,
|
|
377
|
+
"Western Europe": DistinctColors.Denim,
|
|
378
|
+
"Western Offshoots": DistinctColors.Peach,
|
|
379
|
+
"Sub Saharan Africa": DistinctColors.DarkMauve,
|
|
380
|
+
"South and South East Asia": DistinctColors.OliveGreen,
|
|
381
|
+
"Middle East and North Africa": DistinctColors.Camel,
|
|
382
382
|
|
|
383
383
|
// Pew Research Center regions
|
|
384
|
-
"Europe (Pew)":
|
|
385
|
-
"Asia-Pacific (Pew)":
|
|
386
|
-
"North America (Pew)":
|
|
387
|
-
"Sub-Saharan Africa (Pew)":
|
|
388
|
-
"Latin America-Caribbean (Pew)":
|
|
389
|
-
"Middle East-North Africa (Pew)":
|
|
384
|
+
"Europe (Pew)": DistinctColors.Denim,
|
|
385
|
+
"Asia-Pacific (Pew)": DistinctColors.Teal,
|
|
386
|
+
"North America (Pew)": DistinctColors.Peach,
|
|
387
|
+
"Sub-Saharan Africa (Pew)": DistinctColors.DarkMauve,
|
|
388
|
+
"Latin America-Caribbean (Pew)": DistinctColors.Maroon,
|
|
389
|
+
"Middle East-North Africa (Pew)": DistinctColors.Camel,
|
|
390
390
|
} as const
|
|
391
391
|
|
|
392
392
|
// Used for looking up color names from hex values
|
|
@@ -467,7 +467,7 @@ export const SingleColorDenim = {
|
|
|
467
467
|
displayName: "Single color: Denim",
|
|
468
468
|
singleColorScale: true,
|
|
469
469
|
isDistinct: true,
|
|
470
|
-
colorSets: [[
|
|
470
|
+
colorSets: [[DistinctColors.Denim]],
|
|
471
471
|
}
|
|
472
472
|
|
|
473
473
|
CustomColorSchemes.push(SingleColorDenim)
|
|
@@ -477,7 +477,7 @@ export const SingleColorTeal = {
|
|
|
477
477
|
displayName: "Single color: Teal",
|
|
478
478
|
singleColorScale: true,
|
|
479
479
|
isDistinct: true,
|
|
480
|
-
colorSets: [[
|
|
480
|
+
colorSets: [[DistinctColors.Teal]],
|
|
481
481
|
}
|
|
482
482
|
|
|
483
483
|
CustomColorSchemes.push(SingleColorTeal)
|
|
@@ -487,7 +487,7 @@ export const SingleColorPurple = {
|
|
|
487
487
|
displayName: "Single color: Purple",
|
|
488
488
|
singleColorScale: true,
|
|
489
489
|
isDistinct: true,
|
|
490
|
-
colorSets: [[
|
|
490
|
+
colorSets: [[DistinctColors.Purple]],
|
|
491
491
|
}
|
|
492
492
|
|
|
493
493
|
CustomColorSchemes.push(SingleColorPurple)
|
|
@@ -497,7 +497,7 @@ export const SingleColorDustyCoral = {
|
|
|
497
497
|
displayName: "Single color: Dusty coral",
|
|
498
498
|
singleColorScale: true,
|
|
499
499
|
isDistinct: true,
|
|
500
|
-
colorSets: [[
|
|
500
|
+
colorSets: [[DistinctColors.DustyCoral]],
|
|
501
501
|
}
|
|
502
502
|
|
|
503
503
|
CustomColorSchemes.push(SingleColorDustyCoral)
|
|
@@ -507,7 +507,7 @@ export const SingleColorDarkCopper = {
|
|
|
507
507
|
displayName: "Single color: Dark copper",
|
|
508
508
|
singleColorScale: true,
|
|
509
509
|
isDistinct: true,
|
|
510
|
-
colorSets: [[
|
|
510
|
+
colorSets: [[DistinctColors.DarkCopper]],
|
|
511
511
|
}
|
|
512
512
|
|
|
513
513
|
CustomColorSchemes.push(SingleColorDarkCopper)
|
|
@@ -665,7 +665,7 @@ export const BinaryMapPaletteE = {
|
|
|
665
665
|
|
|
666
666
|
CustomColorSchemes.push(BinaryMapPaletteE)
|
|
667
667
|
|
|
668
|
-
export const DefaultColorScheme =
|
|
668
|
+
export const DefaultColorScheme = DistinctColorScheme
|
|
669
669
|
|
|
670
670
|
export function getColorNameAndSemanticPalettes(
|
|
671
671
|
color: string,
|
|
@@ -674,7 +674,7 @@ export function getColorNameAndSemanticPalettes(
|
|
|
674
674
|
energyColorSchemeNames: Record<string, string>
|
|
675
675
|
): string[] {
|
|
676
676
|
const colorNameStandardized = color.toUpperCase()
|
|
677
|
-
const
|
|
677
|
+
const distinct =
|
|
678
678
|
colorNameStandardized in baseColorSchemeNames
|
|
679
679
|
? `🎨 ${baseColorSchemeNames[colorNameStandardized]}`
|
|
680
680
|
: ""
|
|
@@ -686,28 +686,28 @@ export function getColorNameAndSemanticPalettes(
|
|
|
686
686
|
colorNameStandardized in energyColorSchemeNames
|
|
687
687
|
? `⚡ ${energyColorSchemeNames[colorNameStandardized]}`
|
|
688
688
|
: ""
|
|
689
|
-
const lines = [
|
|
689
|
+
const lines = [distinct, continents, energy].filter((x) => x !== "")
|
|
690
690
|
|
|
691
691
|
return lines
|
|
692
692
|
}
|
|
693
693
|
|
|
694
|
-
export function
|
|
694
|
+
export function getColorNameDistinctAndSemanticPalettes(
|
|
695
695
|
color: string
|
|
696
696
|
): string[] {
|
|
697
697
|
return getColorNameAndSemanticPalettes(
|
|
698
698
|
color,
|
|
699
|
-
|
|
699
|
+
DistinctColorsNames(),
|
|
700
700
|
ContinentColorsNames(),
|
|
701
701
|
EnergyColorsNames()
|
|
702
702
|
)
|
|
703
703
|
}
|
|
704
704
|
|
|
705
|
-
export function
|
|
705
|
+
export function getColorNameDistinctLinesAndSemanticPalettes(
|
|
706
706
|
color: string
|
|
707
707
|
): string[] {
|
|
708
708
|
return getColorNameAndSemanticPalettes(
|
|
709
709
|
color,
|
|
710
|
-
|
|
710
|
+
DistinctLinesColorNames(),
|
|
711
711
|
ContinentColorsLinesNames(),
|
|
712
712
|
EnergyColorsLinesNames()
|
|
713
713
|
)
|