feat: Default Plotly map colors

packages/chart/src/ChartTheme.module.scss

@@ -9,13 +9,15 @@
   gridcolor: var(--dh-color-chart-grid);
   linecolor: var(--dh-color-chart-axis-line);
   zerolinecolor: var(--dh-color-chart-axis-line-zero);
-  activecolor: var(--dh-color-chart-active);
-  rangebgcolor: var(--dh-color-chart-range-bg);
-  area-color: var(--dh-color-chart-area);
-  trend-color: var(--dh-color-chart-trend);
-  line-color: var(--dh-color-chart-line-deprecated);
+
   error-band-line-color: var(--dh-color-chart-error-band-line);
-  error-band-fill-color: var(--dh-color-chart-error-band-fill);
   ohlc-increasing: var(--dh-color-chart-ohlc-increase);
   ohlc-decreasing: var(--dh-color-chart-ohlc-decrease);
+
+  /* Geo */
+  coastline-color: var(--dh-color-chart-geo-coastline);
+  land-color: var(--dh-color-chart-geo-land);
+  ocean-color: var(--dh-color-chart-geo-ocean);
+  lake-color: var(--dh-color-chart-geo-lake);
+  river-color: var(--dh-color-chart-geo-river);
 }

packages/chart/src/ChartTheme.ts

@@ -16,15 +16,17 @@ export interface ChartTheme {
   gridcolor: string;
   linecolor: string;
   zerolinecolor: string;
-  activecolor: string;
-  rangebgcolor: string;
-  area_color: string;
-  trend_color: string;
-  line_color: string;
+
   error_band_line_color: string;
-  error_band_fill_color: string;
   ohlc_increasing: string;
   ohlc_decreasing: string;
+
+  // Geo
+  coastline_color: string;
+  land_color: string;
+  ocean_color: string;
+  lake_color: string;
+  river_color: string;
 }
 
 export function defaultChartTheme(): Readonly<ChartTheme> {
@@ -52,15 +54,15 @@ export function defaultChartTheme(): Readonly<ChartTheme> {
     gridcolor: chartTheme.gridcolor,
     linecolor: chartTheme.linecolor,
     zerolinecolor: chartTheme.zerolinecolor,
-    activecolor: chartTheme.activecolor,
-    rangebgcolor: chartTheme.rangebgcolor,
-    area_color: chartTheme['area-color'],
-    trend_color: chartTheme['trend-color'],
-    line_color: chartTheme['line-color'],
     error_band_line_color: chartTheme['error-band-line-color'],
-    error_band_fill_color: chartTheme['error-band-fill-color'],
     ohlc_increasing: chartTheme['ohlc-increasing'],
     ohlc_decreasing: chartTheme['ohlc-decreasing'],
+    // Geo
+    coastline_color: chartTheme['coastline-color'],
+    land_color: chartTheme['land-color'],
+    ocean_color: chartTheme['ocean-color'],
+    lake_color: chartTheme['lake-color'],
+    river_color: chartTheme['river-color'],
   });
 }
 

packages/chart/src/ChartUtils.ts

@@ -1872,27 +1872,48 @@ class ChartUtils {
     return axis;
   }
 
+  /**
+   * Creates a plotly layout object based on a given theme.
+   * See https://plotly.com/javascript/reference/layout/
+   * @param theme The theme to use for the layout
+   */
   makeDefaultLayout(theme: ChartTheme): Partial<Layout> {
     const { dh } = this;
+
+    const {
+      /* Used as top level properties of `Layout` */
+      /* eslint-disable camelcase */
+      paper_bgcolor,
+      plot_bgcolor,
+      title_color,
+      coastline_color,
+      land_color,
+      ocean_color,
+      lake_color,
+      river_color,
+      /* eslint-disable camelcase */
+    } = theme;
+
     const layout: Partial<Layout> = {
-      ...theme,
+      paper_bgcolor,
+      plot_bgcolor,
       autosize: true,
       colorway: ChartUtils.getColorwayFromTheme(theme),
       font: {
         family: "'Fira Sans', sans-serif",
-        color: theme.title_color,
+        color: title_color,
       },
       title: {
         font: {
-          color: theme.title_color,
+          color: title_color,
         },
         yanchor: 'top',
         pad: { ...ChartUtils.DEFAULT_TITLE_PADDING },
         y: 1,
       },
       legend: {
         font: {
-          color: theme.title_color,
+          color: title_color,
         },
       },
       margin: { ...ChartUtils.DEFAULT_MARGIN },
@@ -1908,8 +1929,21 @@ class ChartUtils {
         yaxis: this.makeLayoutAxis(dh.plot.AxisType.Y, theme),
         zaxis: this.makeLayoutAxis(dh.plot.AxisType.Z, theme),
       },
+      geo: {
+        showcoastlines: true,
+        showland: true,
+        showocean: true,
+        showlakes: true,
+        showrivers: true,
+        coastlinecolor: coastline_color,
+        landcolor: land_color,
+        oceancolor: ocean_color,
+        lakecolor: lake_color,
+        rivercolor: river_color,
+      },
     };
     layout.datarevision = 0;
+
     return layout;
   }
 

packages/chart/src/MockChartModel.ts

@@ -97,7 +97,6 @@ class MockChartModel extends ChartModel {
       fill: 'tozeroy',
       hoverinfo: 'all',
       line: {
-        color: MockChartModel.theme.area_color,
         width: 3,
         // area patten gets applied as hack in post render plot.ly callback + css
       },
@@ -116,7 +115,6 @@ class MockChartModel extends ChartModel {
       line: {
         width: 3,
         dash: 'dot', // trendlines should follow some sort of color convention + dots/dashed. Remember there can multiple
-        color: MockChartModel.theme.trend_color,
         // chroma(c.$green).brighten(1.2).hex()
       },
     };
@@ -143,7 +141,6 @@ class MockChartModel extends ChartModel {
       mode: 'line' as PlotData['mode'],
       hoverinfo: 'skip',
       fill: 'toself', // there's some ordering bug with scattergl where if the areas traces are ordered after the lines they don't render
-      fillcolor: MockChartModel.theme.error_band_fill_color,
       line: {
         width: 0,
         color: MockChartModel.theme.error_band_line_color,
@@ -161,7 +158,6 @@ class MockChartModel extends ChartModel {
       mode: 'line' as PlotData['mode'],
       hoverinfo: 'x+y+text+name' as PlotData['hoverinfo'],
       line: {
-        color: MockChartModel.theme.line_color,
         width: 3,
       },
     };

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

@@ -2,21 +2,20 @@
 
 exports[`defaultChartTheme should create the default chart theme 1`] = `
 {
-  "activecolor": "chartTheme['activecolor']",
-  "area_color": "chartTheme['area-color']",
+  "coastline_color": "chartTheme['coastline-color']",
   "colorway": "chartTheme['colorway']",
-  "error_band_fill_color": "chartTheme['error-band-fill-color']",
   "error_band_line_color": "chartTheme['error-band-line-color']",
   "gridcolor": "chartTheme['gridcolor']",
-  "line_color": "chartTheme['line-color']",
+  "lake_color": "chartTheme['lake-color']",
+  "land_color": "chartTheme['land-color']",
   "linecolor": "chartTheme['linecolor']",
+  "ocean_color": "chartTheme['ocean-color']",
   "ohlc_decreasing": "chartTheme['ohlc-decreasing']",
   "ohlc_increasing": "chartTheme['ohlc-increasing']",
   "paper_bgcolor": "chartTheme['paper-bgcolor']",
   "plot_bgcolor": "chartTheme['plot-bgcolor']",
-  "rangebgcolor": "chartTheme['rangebgcolor']",
+  "river_color": "chartTheme['river-color']",
   "title_color": "chartTheme['title-color']",
-  "trend_color": "chartTheme['trend-color']",
   "zerolinecolor": "chartTheme['zerolinecolor']",
 }
 `;

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

@@ -108,12 +108,19 @@ export function SamplesMenu(): JSX.Element {
         ? null
         : document.querySelector(window.location.hash);
 
-    if (el) {
-      // Give everything a chance to render before scrolling
-      setTimeout(() => {
+    // Give everything a chance to render before scrolling
+    setTimeout(() => {
+      if (el) {
         el.scrollIntoView();
-      }, 0);
-    }
+      } else {
+        // NavTabList sample causes auto scrolling to middle of page, so we
+        // have to explicilty scroll back to the top of the page
+        window.scrollTo({
+          top: 0,
+          behavior: 'auto',
+        });
+      }
+    }, 0);
   }, []);
 
   const onAction = useCallback((key: Key) => {

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

@@ -15,27 +15,14 @@
   --dh-color-chart-grid: var(--dh-color-gray-400);
   --dh-color-chart-axis-line: var(--dh-color-gray-500);
   --dh-color-chart-axis-line-zero: var(--dh-color-gray-700);
-  --dh-color-chart-active: var(--dh-color-accent-600);
-
-  --dh-color-chart-range-bg: hsla(var(--dh-color-gray-500-hsl) 0.7);
-  --dh-color-chart-area: var(--dh-color-visual-blue);
-  --dh-color-chart-trend: var(--dh-color-green-1200);
 
   /* Error band */
   --dh-color-chart-error-band-line: var(--dh-color-green-1400);
-  --dh-color-chart-error-band-fill: hsla(var(--dh-color-green-1200-hsl), 0.1);
 
   /* OHLC */
   --dh-color-chart-ohlc-increase: var(--dh-color-visual-green);
   --dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
 
-  /* 
-   * This color shows up in the styleguide, but it doesn't seem to be consumed
-   * in production code. There has been discussion about it not being needed 
-   * anymore. 
-   */
-  --dh-color-chart-line-deprecated: var(--dh-color-visual-green);
-
   --dh-color-plotly-axis-text: var(--dh-color-gray-500);
   --dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
   --dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
@@ -44,4 +31,11 @@
   --dh-color-plotly-modebar-btn-active: var(--dh-color-true-white-hsl, 0.7);
   --dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
   --dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
+
+  /* Geo */
+  --dh-color-chart-geo-coastline: var(--dh-color-gray-200);
+  --dh-color-chart-geo-land: var(--dh-color-gray-700);
+  --dh-color-chart-geo-ocean: var(--dh-color-gray-300);
+  --dh-color-chart-geo-lake: var(--dh-color-blue-400);
+  --dh-color-chart-geo-river: var(--dh-color-blue-400);
 }

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

@@ -15,27 +15,14 @@
   --dh-color-chart-grid: var(--dh-color-gray-400);
   --dh-color-chart-axis-line: var(--dh-color-gray-500);
   --dh-color-chart-axis-line-zero: var(--dh-color-gray-700);
-  --dh-color-chart-active: var(--dh-color-accent-600);
-
-  --dh-color-chart-range-bg: hsla(var(--dh-color-gray-500-hsl) 0.7);
-  --dh-color-chart-area: var(--dh-color-visual-blue);
-  --dh-color-chart-trend: var(--dh-color-green-1200);
 
   /* Error band */
   --dh-color-chart-error-band-line: var(--dh-color-green-1400);
-  --dh-color-chart-error-band-fill: hsla(var(--dh-color-green-1200-hsl), 0.1);
 
   /* OHLC */
   --dh-color-chart-ohlc-increase: var(--dh-color-visual-green);
   --dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
 
-  /* 
-   * This color shows up in the styleguide, but it doesn't seem to be consumed
-   * in production code. There has been discussion about it not being needed 
-   * anymore. 
-   */
-  --dh-color-chart-line-deprecated: var(--dh-color-visual-green);
-
   --dh-color-plotly-axis-text: var(--dh-color-gray-500);
   --dh-color-plotly-zoombox: hsla(var(--dh-color-true-black-hsl), 0.5);
   --dh-color-plotly-zoombox-corners-fill: var(--dh-color-white);
@@ -44,4 +31,11 @@
   --dh-color-plotly-modebar-btn-active: var(--dh-color-true-white-hsl, 0.7);
   --dh-color-plotly-modebar-btn-warning: var(--dh-color-visual-orange);
   --dh-color-plotly-notifier-note-bg: var(--dh-color-gray-500);
+
+  /* Geo */
+  --dh-color-chart-geo-coastline: var(--dh-color-gray-200);
+  --dh-color-chart-geo-land: var(--dh-color-gray-700);
+  --dh-color-chart-geo-ocean: var(--dh-color-gray-300);
+  --dh-color-chart-geo-lake: var(--dh-color-blue-400);
+  --dh-color-chart-geo-river: var(--dh-color-blue-400);
 }