Skip to content

Commit e8b9f12

Browse files
bminglesbmingles
authored
feat: Default Plotly map colors (#1721)
- Added theme variables for Plotly map colors. Wired them up to the default layout - Removed unused chart theme variables - Fixed scroll issue in styleguide Testing Here's a Python snippet that can be used to see the map colors ```python import deephaven.plot.express as dx from deephaven import time_table import random def update(fig): pass sourceh = time_table("PT1S").update(formulas=[ "X = (float) random.uniform(-90, 90)", "Y = (float) random.uniform(-180, 180)", "Z = (float)random.gauss(3, 3)", "l1 = i % 20", "l2 = i % 30", ]) figs = dx.scatter_geo( sourceh, lat="X", lon="Y", by="l1", size="Z", color_discrete_sequence=["salmon", "lemonchiffon"], projection="natural earth", unsafe_update_figure=update ) ```
1 parent db219ca commit e8b9f12

15 files changed

Lines changed: 94 additions & 63 deletions

‎packages/chart/src/ChartTheme.module.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@
1010
gridcolor: var(--dh-color-chart-grid);
1111
linecolor: var(--dh-color-chart-axis-line);
1212
zerolinecolor: var(--dh-color-chart-axis-line-zero);
13-
activecolor: var(--dh-color-chart-active);
14-
rangebgcolor: var(--dh-color-chart-range-bg);
15-
area-color: var(--dh-color-chart-area);
16-
trend-color: var(--dh-color-chart-trend);
17-
line-color: var(--dh-color-chart-line-deprecated);
13+
1814
error-band-line-color: var(--dh-color-chart-error-band-line);
19-
error-band-fill-color: var(--dh-color-chart-error-band-fill);
2015
ohlc-increasing: var(--dh-color-chart-ohlc-increase);
2116
ohlc-decreasing: var(--dh-color-chart-ohlc-decrease);
17+
18+
/* Geo */
19+
coastline-color: var(--dh-color-chart-geo-coastline);
20+
land-color: var(--dh-color-chart-geo-land);
21+
ocean-color: var(--dh-color-chart-geo-ocean);
22+
lake-color: var(--dh-color-chart-geo-lake);
23+
river-color: var(--dh-color-chart-geo-river);
2224
}

‎packages/chart/src/ChartTheme.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,17 @@ export interface ChartTheme {
1717
gridcolor: string;
1818
linecolor: string;
1919
zerolinecolor: string;
20-
activecolor: string;
21-
rangebgcolor: string;
22-
area_color: string;
23-
trend_color: string;
24-
line_color: string;
20+
2521
error_band_line_color: string;
26-
error_band_fill_color: string;
2722
ohlc_increasing: string;
2823
ohlc_decreasing: string;
24+
25+
// Geo
26+
coastline_color: string;
27+
land_color: string;
28+
ocean_color: string;
29+
lake_color: string;
30+
river_color: string;
2931
}
3032

3133
export function defaultChartTheme(): Readonly<ChartTheme> {
@@ -54,15 +56,15 @@ export function defaultChartTheme(): Readonly<ChartTheme> {
5456
gridcolor: chartTheme.gridcolor,
5557
linecolor: chartTheme.linecolor,
5658
zerolinecolor: chartTheme.zerolinecolor,
57-
activecolor: chartTheme.activecolor,
58-
rangebgcolor: chartTheme.rangebgcolor,
59-
area_color: chartTheme['area-color'],
60-
trend_color: chartTheme['trend-color'],
61-
line_color: chartTheme['line-color'],
6259
error_band_line_color: chartTheme['error-band-line-color'],
63-
error_band_fill_color: chartTheme['error-band-fill-color'],
6460
ohlc_increasing: chartTheme['ohlc-increasing'],
6561
ohlc_decreasing: chartTheme['ohlc-decreasing'],
62+
// Geo
63+
coastline_color: chartTheme['coastline-color'],
64+
land_color: chartTheme['land-color'],
65+
ocean_color: chartTheme['ocean-color'],
66+
lake_color: chartTheme['lake-color'],
67+
river_color: chartTheme['river-color'],
6668
});
6769
}
6870

‎packages/chart/src/ChartUtils.ts‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1877,27 +1877,48 @@ class ChartUtils {
18771877
return axis;
18781878
}
18791879

1880+
/**
1881+
* Creates a plotly layout object based on a given theme.
1882+
* See https://plotly.com/javascript/reference/layout/
1883+
* @param theme The theme to use for the layout
1884+
*/
18801885
makeDefaultLayout(theme: ChartTheme): Partial<Layout> {
18811886
const { dh } = this;
1887+
1888+
const {
1889+
/* Used as top level properties of `Layout` */
1890+
/* eslint-disable camelcase */
1891+
paper_bgcolor,
1892+
plot_bgcolor,
1893+
title_color,
1894+
coastline_color,
1895+
land_color,
1896+
ocean_color,
1897+
lake_color,
1898+
river_color,
1899+
/* eslint-disable camelcase */
1900+
} = theme;
1901+
18821902
const layout: Partial<Layout> = {
1883-
...theme,
1903+
paper_bgcolor,
1904+
plot_bgcolor,
18841905
autosize: true,
18851906
colorway: ChartUtils.getColorwayFromTheme(theme),
18861907
font: {
18871908
family: "'Fira Sans', sans-serif",
1888-
color: theme.title_color,
1909+
color: title_color,
18891910
},
18901911
title: {
18911912
font: {
1892-
color: theme.title_color,
1913+
color: title_color,
18931914
},
18941915
yanchor: 'top',
18951916
pad: { ...ChartUtils.DEFAULT_TITLE_PADDING },
18961917
y: 1,
18971918
},
18981919
legend: {
18991920
font: {
1900-
color: theme.title_color,
1921+
color: title_color,
19011922
},
19021923
},
19031924
margin: { ...ChartUtils.DEFAULT_MARGIN },
@@ -1913,8 +1934,23 @@ class ChartUtils {
19131934
yaxis: this.makeLayoutAxis(dh.plot.AxisType.Y, theme),
19141935
zaxis: this.makeLayoutAxis(dh.plot.AxisType.Z, theme),
19151936
},
1937+
geo: {
1938+
showcoastlines: true,
1939+
showframe: false,
1940+
showland: true,
1941+
showocean: true,
1942+
showlakes: true,
1943+
showrivers: true,
1944+
bgcolor: paper_bgcolor,
1945+
coastlinecolor: coastline_color,
1946+
landcolor: land_color,
1947+
oceancolor: ocean_color,
1948+
lakecolor: lake_color,
1949+
rivercolor: river_color,
1950+
},
19161951
};
19171952
layout.datarevision = 0;
1953+
19181954
return layout;
19191955
}
19201956

‎packages/chart/src/MockChartModel.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@ class MockChartModel extends ChartModel {
9797
fill: 'tozeroy',
9898
hoverinfo: 'all',
9999
line: {
100-
color: MockChartModel.theme.area_color,
101100
width: 3,
102101
// area patten gets applied as hack in post render plot.ly callback + css
103102
},
@@ -116,7 +115,6 @@ class MockChartModel extends ChartModel {
116115
line: {
117116
width: 3,
118117
dash: 'dot', // trendlines should follow some sort of color convention + dots/dashed. Remember there can multiple
119-
color: MockChartModel.theme.trend_color,
120118
// chroma(c.$green).brighten(1.2).hex()
121119
},
122120
};
@@ -143,7 +141,6 @@ class MockChartModel extends ChartModel {
143141
mode: 'line' as PlotData['mode'],
144142
hoverinfo: 'skip',
145143
fill: 'toself', // there's some ordering bug with scattergl where if the areas traces are ordered after the lines they don't render
146-
fillcolor: MockChartModel.theme.error_band_fill_color,
147144
line: {
148145
width: 0,
149146
color: MockChartModel.theme.error_band_line_color,
@@ -161,7 +158,6 @@ class MockChartModel extends ChartModel {
161158
mode: 'line' as PlotData['mode'],
162159
hoverinfo: 'x+y+text+name' as PlotData['hoverinfo'],
163160
line: {
164-
color: MockChartModel.theme.line_color,
165161
width: 3,
166162
},
167163
};

‎packages/chart/src/__snapshots__/ChartTheme.test.ts.snap‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,21 @@
22

33
exports[`defaultChartTheme should create the default chart theme 1`] = `
44
{
5-
"activecolor": "chartTheme['activecolor']",
6-
"area_color": "chartTheme['area-color']",
5+
"coastline_color": "chartTheme['coastline-color']",
76
"colorway": "chartTheme['colorway']",
8-
"error_band_fill_color": "chartTheme['error-band-fill-color']",
97
"error_band_line_color": "chartTheme['error-band-line-color']",
108
"gridcolor": "chartTheme['gridcolor']",
9+
"lake_color": "chartTheme['lake-color']",
10+
"land_color": "chartTheme['land-color']",
1111
"legend_color": "chartTheme['legend-color']",
12-
"line_color": "chartTheme['line-color']",
1312
"linecolor": "chartTheme['linecolor']",
13+
"ocean_color": "chartTheme['ocean-color']",
1414
"ohlc_decreasing": "chartTheme['ohlc-decreasing']",
1515
"ohlc_increasing": "chartTheme['ohlc-increasing']",
1616
"paper_bgcolor": "chartTheme['paper-bgcolor']",
1717
"plot_bgcolor": "chartTheme['plot-bgcolor']",
18-
"rangebgcolor": "chartTheme['rangebgcolor']",
18+
"river_color": "chartTheme['river-color']",
1919
"title_color": "chartTheme['title-color']",
20-
"trend_color": "chartTheme['trend-color']",
2120
"zerolinecolor": "chartTheme['zerolinecolor']",
2221
}
2322
`;

‎packages/code-studio/src/styleguide/SamplesMenu.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,19 @@ export function SamplesMenu(): JSX.Element {
108108
? null
109109
: document.querySelector(window.location.hash);
110110

111-
if (el) {
112-
// Give everything a chance to render before scrolling
113-
setTimeout(() => {
111+
// Give everything a chance to render before scrolling
112+
setTimeout(() => {
113+
if (el) {
114114
el.scrollIntoView();
115-
}, 0);
116-
}
115+
} else {
116+
// NavTabList sample causes auto scrolling to middle of page, so we
117+
// have to explicilty scroll back to the top of the page
118+
window.scrollTo({
119+
top: 0,
120+
behavior: 'auto',
121+
});
122+
}
123+
}, 0);
117124
}, []);
118125

119126
const onAction = useCallback((key: Key) => {

‎packages/code-studio/src/styleguide/SpectrumComponents.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,7 @@ function TableViewSample(): JSX.Element {
239239
<>
240240
<label id="table-view-sample">List View</label>
241241
<ListView
242+
aria-labelledby="table-view-sample"
242243
selectionMode="multiple"
243244
maxWidth="size-6000"
244245
marginBottom="size-200"

‎packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,14 @@
1616
--dh-color-chart-grid: var(--dh-color-gray-400);
1717
--dh-color-chart-axis-line: var(--dh-color-gray-500);
1818
--dh-color-chart-axis-line-zero: var(--dh-color-gray-700);
19-
--dh-color-chart-active: var(--dh-color-accent-600);
20-
21-
--dh-color-chart-range-bg: hsla(var(--dh-color-gray-500-hsl) 0.7);
22-
--dh-color-chart-area: var(--dh-color-visual-blue);
23-
--dh-color-chart-trend: var(--dh-color-green-1200);
2419

2520
/* Error band */
2621
--dh-color-chart-error-band-line: var(--dh-color-green-1400);
27-
--dh-color-chart-error-band-fill: hsla(var(--dh-color-green-1200-hsl), 0.1);
2822

2923
/* OHLC */
3024
--dh-color-chart-ohlc-increase: var(--dh-color-visual-green);
3125
--dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
3226

33-
/*
34-
* This color shows up in the styleguide, but it doesn't seem to be consumed
35-
* in production code. There has been discussion about it not being needed
36-
* anymore.
37-
*/
38-
--dh-color-chart-line-deprecated: var(--dh-color-visual-green);
39-
4027
--dh-color-plotly-axis-text: var(--dh-color-gray-500);
4128
--dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
4229
--dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
@@ -48,4 +35,11 @@
4835
);
4936
--dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
5037
--dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
38+
39+
/* Geo */
40+
--dh-color-chart-geo-coastline: var(--dh-color-gray-200);
41+
--dh-color-chart-geo-land: var(--dh-color-gray-700);
42+
--dh-color-chart-geo-ocean: var(--dh-color-gray-300);
43+
--dh-color-chart-geo-lake: var(--dh-color-blue-400);
44+
--dh-color-chart-geo-river: var(--dh-color-blue-400);
5145
}

‎packages/components/src/theme/theme-light/theme-light-semantic-chart.css‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,14 @@
1616
--dh-color-chart-grid: var(--dh-color-gray-400);
1717
--dh-color-chart-axis-line: var(--dh-color-gray-500);
1818
--dh-color-chart-axis-line-zero: var(--dh-color-gray-700);
19-
--dh-color-chart-active: var(--dh-color-accent-600);
20-
21-
--dh-color-chart-range-bg: hsla(var(--dh-color-gray-500-hsl) 0.7);
22-
--dh-color-chart-area: var(--dh-color-visual-blue);
23-
--dh-color-chart-trend: var(--dh-color-green-1200);
2419

2520
/* Error band */
2621
--dh-color-chart-error-band-line: var(--dh-color-green-1400);
27-
--dh-color-chart-error-band-fill: hsla(var(--dh-color-green-1200-hsl), 0.1);
2822

2923
/* OHLC */
3024
--dh-color-chart-ohlc-increase: var(--dh-color-visual-green);
3125
--dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
3226

33-
/*
34-
* This color shows up in the styleguide, but it doesn't seem to be consumed
35-
* in production code. There has been discussion about it not being needed
36-
* anymore.
37-
*/
38-
--dh-color-chart-line-deprecated: var(--dh-color-visual-green);
39-
4027
--dh-color-plotly-axis-text: var(--dh-color-gray-500);
4128
--dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
4229
--dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
@@ -48,4 +35,11 @@
4835
);
4936
--dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
5037
--dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
38+
39+
/* Geo */
40+
--dh-color-chart-geo-coastline: var(--dh-color-gray-200);
41+
--dh-color-chart-geo-land: var(--dh-color-gray-700);
42+
--dh-color-chart-geo-ocean: var(--dh-color-gray-300);
43+
--dh-color-chart-geo-lake: var(--dh-color-blue-400);
44+
--dh-color-chart-geo-river: var(--dh-color-blue-400);
5145
}

‎tests/styleguide.spec.ts-snapshots/chart-colors-chromium-linux.png‎

6 Bytes
Loading

0 commit comments

Comments
 (0)
⚡