chore: DH-19612: cherry-pick indicator fixes (#2460)

Fixes from #2344 and
#2353

Author: jnumainville

packages/chart/src/Chart.tsx

@@ -44,8 +44,8 @@ const log = Log.module('Chart');
 
 type ChartSettings = ColumnFormatSettings &
   DateTimeFormatSettings & {
-    decimalFormatOptions?: DecimalColumnFormatterOptions;
-    integerFormatOptions?: IntegerColumnFormatterOptions;
+    defaultDecimalFormatOptions?: DecimalColumnFormatterOptions;
+    defaultIntegerFormatOptions?: IntegerColumnFormatterOptions;
     webgl?: boolean;
   };
 
@@ -653,18 +653,21 @@ class Chart extends Component<ChartProps, ChartState> {
     const columnFormats = FormatterUtils.getColumnFormats(settings);
     const dateTimeFormatterOptions =
       FormatterUtils.getDateTimeFormatterOptions(settings);
-    const { decimalFormatOptions = {}, integerFormatOptions = {} } = settings;
+    const {
+      defaultDecimalFormatOptions = {},
+      defaultIntegerFormatOptions = {},
+    } = settings;
 
     if (
       !deepEqual(this.columnFormats, columnFormats) ||
       !deepEqual(this.dateTimeFormatterOptions, dateTimeFormatterOptions) ||
-      !deepEqual(this.decimalFormatOptions, decimalFormatOptions) ||
-      !deepEqual(this.integerFormatOptions, integerFormatOptions)
+      !deepEqual(this.decimalFormatOptions, defaultDecimalFormatOptions) ||
+      !deepEqual(this.integerFormatOptions, defaultIntegerFormatOptions)
     ) {
       this.columnFormats = FormatterUtils.getColumnFormats(settings);
       this.dateTimeFormatterOptions = dateTimeFormatterOptions;
-      this.decimalFormatOptions = decimalFormatOptions;
-      this.integerFormatOptions = integerFormatOptions;
+      this.decimalFormatOptions = defaultDecimalFormatOptions;
+      this.integerFormatOptions = defaultIntegerFormatOptions;
       this.updateFormatter();
     }
 

packages/chart/src/ChartTheme.module.scss

@@ -21,4 +21,9 @@
   ocean-color: var(--dh-color-chart-geo-ocean);
   lake-color: var(--dh-color-chart-geo-lake);
   river-color: var(--dh-color-chart-geo-river);
+
+  /* Indicator */
+  indicator-increasing: var(--dh-color-chart-indicator-increase);
+  indicator-decreasing: var(--dh-color-chart-indicator-decrease);
+  indicator-gauge: var(--dh-color-chart-indicator-gauge);
 }

packages/chart/src/ChartTheme.ts

@@ -28,6 +28,11 @@ export interface ChartTheme {
   ocean_color: string;
   lake_color: string;
   river_color: string;
+
+  // Indicator
+  indicator_increasing: string;
+  indicator_decreasing: string;
+  indicator_gauge: string;
 }
 
 export function defaultChartTheme(): Readonly<ChartTheme> {
@@ -65,6 +70,10 @@ export function defaultChartTheme(): Readonly<ChartTheme> {
     ocean_color: chartTheme['ocean-color'],
     lake_color: chartTheme['lake-color'],
     river_color: chartTheme['river-color'],
+    // Indicator
+    indicator_increasing: chartTheme['indicator-increasing'],
+    indicator_decreasing: chartTheme['indicator-decreasing'],
+    indicator_gauge: chartTheme['indicator-gauge'],
   });
 }
 

packages/chart/src/ChartUtils.ts

@@ -17,6 +17,7 @@ import type {
   AxisType as PlotlyAxisType,
   MarkerSymbol,
   Template,
+  Delta,
 } from 'plotly.js';
 import { assertNotNull, bindAllMethods, Range } from '@deephaven/utils';
 import { ChartTheme } from './ChartTheme';
@@ -2058,6 +2059,9 @@ class ChartUtils {
       ohlc_increasing,
       ohlc_decreasing,
       title_color,
+      indicator_increasing,
+      indicator_decreasing,
+      indicator_gauge,
     } = theme;
 
     return {
@@ -2095,6 +2099,20 @@ class ChartUtils {
             },
           },
         ],
+        indicator: [
+          {
+            title: { font: { color: title_color } },
+            delta: {
+              decreasing: {
+                color: indicator_decreasing,
+              } as Delta['increasing'],
+              increasing: {
+                color: indicator_increasing,
+              } as Delta['decreasing'],
+            },
+            gauge: { bar: { color: indicator_gauge } },
+          },
+        ],
       },
       /* eslint-enable camelcase */
       layout: this.makeDefaultLayout(theme),

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

@@ -6,6 +6,9 @@ exports[`defaultChartTheme should create the default chart theme 1`] = `
   "colorway": "chartTheme['colorway']",
   "error_band_line_color": "chartTheme['error-band-line-color']",
   "gridcolor": "chartTheme['gridcolor']",
+  "indicator_decreasing": "chartTheme['indicator-decreasing']",
+  "indicator_gauge": "chartTheme['indicator-gauge']",
+  "indicator_increasing": "chartTheme['indicator-increasing']",
   "lake_color": "chartTheme['lake-color']",
   "land_color": "chartTheme['land-color']",
   "legend_color": "chartTheme['legend-color']",

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

@@ -12,6 +12,28 @@ exports[`makeDefaultTemplate should create a default template 1`] = `
         },
       },
     ],
+    "indicator": [
+      {
+        "delta": {
+          "decreasing": {
+            "color": "ChartTheme['indicator_decreasing']",
+          },
+          "increasing": {
+            "color": "ChartTheme['indicator_increasing']",
+          },
+        },
+        "gauge": {
+          "bar": {
+            "color": "ChartTheme['indicator_gauge']",
+          },
+        },
+        "title": {
+          "font": {
+            "color": "ChartTheme['title_color']",
+          },
+        },
+      },
+    ],
     "ohlc": [
       {
         "decreasing": {

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

@@ -47,4 +47,9 @@
   --dh-color-chart-geo-ocean: var(--dh-color-gray-300);
   --dh-color-chart-geo-lake: var(--dh-color-blue-200);
   --dh-color-chart-geo-river: var(--dh-color-blue-200);
+
+  /* Indicator */
+  --dh-color-chart-indicator-increase: var(--dh-color-visual-green);
+  --dh-color-chart-indicator-decrease: var(--dh-color-visual-red);
+  --dh-color-chart-indicator-gauge: var(--dh-color-green-1000);
 }

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

@@ -47,4 +47,9 @@
   --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);
+
+  /* Indicator */
+  --dh-color-chart-indicator-increase: var(--dh-color-visual-green);
+  --dh-color-chart-indicator-decrease: var(--dh-color-visual-red);
+  --dh-color-chart-indicator-gauge: var(--dh-color-green-1000);
 }