From ead943865aac3130e071afaeb304c64849df3180 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 31 Oct 2023 17:05:54 -0500 Subject: [PATCH 01/16] ChartThemeProvider #1572 --- package-lock.json | 2 + .../src/components/ThemeBootstrap.tsx | 7 +- packages/chart/package.json | 1 + packages/chart/src/ChartModelFactory.ts | 14 ++-- packages/chart/src/ChartTheme.module.scss | 33 +++++---- packages/chart/src/ChartTheme.ts | 70 ++++++++++++++----- packages/chart/src/ChartThemeProvider.tsx | 38 ++++++++++ packages/chart/src/ChartUtils.ts | 32 +++++---- packages/chart/src/FigureChartModel.ts | 23 +++--- packages/chart/src/MockChartModel.ts | 26 +++++-- packages/chart/src/index.ts | 4 +- packages/chart/src/useChartTheme.ts | 15 ++++ packages/chart/tsconfig.json | 3 + packages/console/src/HeapUsage.tsx | 12 ++-- .../src/ChartBuilderPlugin.tsx | 19 ++++- .../src/ChartPlugin.tsx | 29 ++++++-- packages/embed-chart/src/App.tsx | 17 ++++- 17 files changed, 254 insertions(+), 91 deletions(-) create mode 100644 packages/chart/src/ChartThemeProvider.tsx create mode 100644 packages/chart/src/useChartTheme.ts diff --git a/package-lock.json b/package-lock.json index e5c647a2fc..8648d0cb10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28072,6 +28072,7 @@ "version": "0.53.0", "license": "Apache-2.0", "dependencies": { + "@deephaven/components": "file:../components", "@deephaven/icons": "file:../icons", "@deephaven/jsapi-types": "file:../jsapi-types", "@deephaven/jsapi-utils": "file:../jsapi-utils", @@ -30147,6 +30148,7 @@ "@deephaven/chart": { "version": "file:packages/chart", "requires": { + "@deephaven/components": "file:../components", "@deephaven/icons": "file:../icons", "@deephaven/jsapi-shim": "file:../jsapi-shim", "@deephaven/jsapi-types": "file:../jsapi-types", diff --git a/packages/app-utils/src/components/ThemeBootstrap.tsx b/packages/app-utils/src/components/ThemeBootstrap.tsx index fd9b7724cc..2beeabb2e0 100644 --- a/packages/app-utils/src/components/ThemeBootstrap.tsx +++ b/packages/app-utils/src/components/ThemeBootstrap.tsx @@ -1,4 +1,5 @@ import { useContext, useMemo } from 'react'; +import { ChartThemeProvider } from '@deephaven/chart'; import { ThemeProvider } from '@deephaven/components'; import { PluginsContext } from '@deephaven/plugin'; import { getThemeDataFromPlugins } from '../plugins'; @@ -19,7 +20,11 @@ export function ThemeBootstrap({ children }: ThemeBootstrapProps): JSX.Element { [pluginModules] ); - return {children}; + return ( + + {children} + + ); } export default ThemeBootstrap; diff --git a/packages/chart/package.json b/packages/chart/package.json index e6cfd8a40e..da6c97c170 100644 --- a/packages/chart/package.json +++ b/packages/chart/package.json @@ -27,6 +27,7 @@ "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist" }, "dependencies": { + "@deephaven/components": "file:../components", "@deephaven/icons": "file:../icons", "@deephaven/jsapi-types": "file:../jsapi-types", "@deephaven/jsapi-utils": "file:../jsapi-utils", diff --git a/packages/chart/src/ChartModelFactory.ts b/packages/chart/src/ChartModelFactory.ts index d2c528067d..a3fb18024c 100644 --- a/packages/chart/src/ChartModelFactory.ts +++ b/packages/chart/src/ChartModelFactory.ts @@ -1,7 +1,7 @@ import type { dh as DhType, Figure, Table } from '@deephaven/jsapi-types'; import ChartUtils, { ChartModelSettings } from './ChartUtils'; import FigureChartModel from './FigureChartModel'; -import ChartTheme from './ChartTheme'; +import { ChartTheme } from './ChartTheme'; import ChartModel from './ChartModel'; class ChartModelFactory { @@ -16,7 +16,7 @@ class ChartModelFactory { * @param settings.xAxis The column name to use for the x-axis * @param [settings.hiddenSeries] Array of hidden series names * @param table The table to build the model for - * @param theme The theme for the figure. Defaults to ChartTheme + * @param theme The theme for the figure * @returns The ChartModel Promise representing the figure * CRA sets tsconfig to type check JS based on jsdoc comments. It isn't able to figure out FigureChartModel extends ChartModel * This causes TS issues in 1 or 2 spots. Once this is TS it can be returned to just FigureChartModel @@ -25,14 +25,14 @@ class ChartModelFactory { dh: DhType, settings: ChartModelSettings, table: Table, - theme = ChartTheme + theme: ChartTheme ): Promise { const figure = await ChartModelFactory.makeFigureFromSettings( dh, settings, table ); - return new FigureChartModel(dh, figure, settings, theme); + return new FigureChartModel(dh, figure, theme, settings); } /** @@ -78,7 +78,7 @@ class ChartModelFactory { * @param settings.xAxis The column name to use for the x-axis * @param [settings.hiddenSeries] Array of hidden series names * @param figure The figure to build the model for - * @param theme The theme for the figure. Defaults to ChartTheme + * @param theme The theme for the figure * @returns The FigureChartModel representing the figure * CRA sets tsconfig to type check JS based on jsdoc comments. It isn't able to figure out FigureChartModel extends ChartModel * This causes TS issues in 1 or 2 spots. Once this is TS it can be returned to just FigureChartModel @@ -87,9 +87,9 @@ class ChartModelFactory { dh: DhType, settings: ChartModelSettings | undefined, figure: Figure, - theme = ChartTheme + theme: ChartTheme ): Promise { - return new FigureChartModel(dh, figure, settings, theme); + return new FigureChartModel(dh, figure, theme, settings); } } diff --git a/packages/chart/src/ChartTheme.module.scss b/packages/chart/src/ChartTheme.module.scss index 8c337cb0a8..ae28c28037 100644 --- a/packages/chart/src/ChartTheme.module.scss +++ b/packages/chart/src/ChartTheme.module.scss @@ -2,20 +2,23 @@ @import '@deephaven/components/scss/custom.scss'; :export { - paper-bgcolor: $content-bg; - plot-bgcolor: $gray-850; - title-color: $white; - colorway: $blue $green $yellow $purple $orange $red $white; - gridcolor: $gray-700; - linecolor: $gray-500; - zerolinecolor: $gray-300; + paper-bgcolor: var(--dh-color-content-background); + plot-bgcolor: var(--dh-color-gray-200); + title-color: var(--dh-color-white); + colorway: var(--dh-color-visual-blue) var(--dh-color-visual-green) + var(--dh-color-visual-yellow) var(--dh-color-visual-purple) + var(--dh-color-visual-orange) var(--dh-color-visual-red) + var(--dh-color-white); + gridcolor: var(--dh-color-gray-400); + linecolor: var(--dh-color-gray-500); + zerolinecolor: var(--dh-color-gray-700); activecolor: $primary; - rangebgcolor: rgba($gray-500, 0.7); - area-color: $blue; - trend-color: lighten($green, 20%); - line-color: $green; - error-band-line-color: lighten($green, 40%); - error-band-fill-color: rgba(lighten($green, 20%), 0.1); - ohlc-increasing: $green; - ohlc-decreasing: $red; + rangebgcolor: var(--dh-color-gray-500); + area-color: var(--dh-color-visual-blue); + trend-color: var(--dh-color-green-1200); + line-color: var(--dh-color-visual-green); + error-band-line-color: var(--dh-color-green-1400); + error-band-fill-color: var(--dh-color-green-1200); + ohlc-increasing: var(--dh-color-visual-green); + ohlc-decreasing: var(--dh-color-visual-red); } diff --git a/packages/chart/src/ChartTheme.ts b/packages/chart/src/ChartTheme.ts index 9740c24521..0b02c1eb68 100644 --- a/packages/chart/src/ChartTheme.ts +++ b/packages/chart/src/ChartTheme.ts @@ -1,20 +1,52 @@ -import ChartTheme from './ChartTheme.module.scss'; +import { resolveCssVariablesInRecord } from '@deephaven/components'; +import Log from '@deephaven/log'; +import chartThemeRaw from './ChartTheme.module.scss'; -export default Object.freeze({ - paper_bgcolor: ChartTheme['paper-bgcolor'], - plot_bgcolor: ChartTheme['plot-bgcolor'], - title_color: ChartTheme['title-color'], - colorway: ChartTheme.colorway, - 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'], -}); +const log = Log.module('ChartTheme'); + +export interface ChartTheme { + paper_bgcolor: string; + plot_bgcolor: string; + title_color: string; + colorway: string; + 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; +} + +export function initChartTheme(): Readonly { + const chartTheme = resolveCssVariablesInRecord(chartThemeRaw); + + log.debug2('Chart theme:', chartThemeRaw); + log.debug2('Chart theme derived:', chartTheme); + + return Object.freeze({ + paper_bgcolor: chartTheme['paper-bgcolor'], + plot_bgcolor: chartTheme['plot-bgcolor'], + title_color: chartTheme['title-color'], + colorway: chartTheme.colorway, + 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'], + }); +} + +export default initChartTheme; diff --git a/packages/chart/src/ChartThemeProvider.tsx b/packages/chart/src/ChartThemeProvider.tsx new file mode 100644 index 0000000000..026ab91ca0 --- /dev/null +++ b/packages/chart/src/ChartThemeProvider.tsx @@ -0,0 +1,38 @@ +import { createContext, ReactNode, useEffect, useState } from 'react'; +import { useTheme } from '@deephaven/components'; +import initChartTheme, { ChartTheme } from './ChartTheme'; + +export type ChartThemeContextValue = ChartTheme; + +export const ChartThemeContext = createContext( + null +); + +export interface ChartThemeProviderProps { + children: ReactNode; +} + +/* + * Provides a chart theme based on the active themes from the ThemeProvider. + */ +export function ChartThemeProvider({ + children, +}: ChartThemeProviderProps): JSX.Element { + const { activeThemes } = useTheme(); + + const [chartTheme, setChartTheme] = useState(null); + + // Running in an effect to ensure parent ThemeProvider has had a chance to add + // the