-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added ChartThemeProvider, added support for resolving css variables in chart theme, and updated chart theme to use css variables. resolves #1572 BREAKING CHANGE: - ChartThemeProvider is now required to provide ChartTheme - ChartModelFactory and ChartUtils now require chartTheme args
- Loading branch information
Showing
34 changed files
with
575 additions
and
197 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /// <reference types="./declaration" /> | ||
|
|
||
| import { TestUtils } from '@deephaven/utils'; | ||
| import { resolveCssVariablesInRecord } from '@deephaven/components'; | ||
| import { defaultChartTheme } from './ChartTheme'; | ||
| import chartThemeRaw from './ChartTheme.module.scss'; | ||
|
|
||
| jest.mock('@deephaven/components', () => ({ | ||
| ...jest.requireActual('@deephaven/components'), | ||
| resolveCssVariablesInRecord: jest.fn(), | ||
| })); | ||
|
|
||
| const { asMock } = TestUtils; | ||
|
|
||
| const mockChartTheme = new Proxy( | ||
| {}, | ||
| { get: (_target, name) => `chartTheme['${String(name)}']` } | ||
| ); | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| expect.hasAssertions(); | ||
|
|
||
| asMock(resolveCssVariablesInRecord) | ||
| .mockName('resolveCssVariablesInRecord') | ||
| .mockReturnValue(mockChartTheme); | ||
| }); | ||
|
|
||
| describe('defaultChartTheme', () => { | ||
| it('should create the default chart theme', () => { | ||
| const actual = defaultChartTheme(); | ||
|
|
||
| expect(resolveCssVariablesInRecord).toHaveBeenCalledWith(chartThemeRaw); | ||
| expect(actual).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,67 @@ | ||
| import ChartTheme from './ChartTheme.module.scss'; | ||
| import { | ||
| getExpressionRanges, | ||
| resolveCssVariablesInRecord, | ||
| } from '@deephaven/components'; | ||
| import Log from '@deephaven/log'; | ||
| import { ColorUtils } from '@deephaven/utils'; | ||
| 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 defaultChartTheme(): Readonly<ChartTheme> { | ||
| const chartTheme = resolveCssVariablesInRecord(chartThemeRaw); | ||
|
|
||
| // The color normalization in `resolveCssVariablesInRecord` won't work for | ||
| // colorway since it is an array of colors. We need to explicitly normalize | ||
| // each color expression | ||
| chartTheme.colorway = getExpressionRanges(chartTheme.colorway ?? '') | ||
| .map(([start, end]) => | ||
| ColorUtils.normalizeCssColor( | ||
| chartTheme.colorway.substring(start, end + 1) | ||
| ) | ||
| ) | ||
| .join(' '); | ||
|
|
||
| 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 defaultChartTheme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { createContext, ReactNode, useEffect, useState } from 'react'; | ||
| import { useTheme } from '@deephaven/components'; | ||
| import defaultChartTheme, { ChartTheme } from './ChartTheme'; | ||
|
|
||
| export type ChartThemeContextValue = ChartTheme; | ||
|
|
||
| export const ChartThemeContext = createContext<ChartThemeContextValue | null>( | ||
| 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<ChartTheme | null>(null); | ||
|
|
||
| // The `ThemeProvider` that supplies `activeThemes` also provides the corresponding | ||
| // CSS theme variables to the DOM by dynamically rendering <style> tags whenever | ||
| // the `activeThemes` change. Painting the latest CSS variables to the DOM may | ||
| // not happen until after `ChartThemeProvider` is rendered, but they should be | ||
| // available by the time the effect runs. Therefore, it is important to derive | ||
| // the chart theme in an effect instead of deriving in a `useMemo` to ensure | ||
| // we have the latest CSS variables. | ||
| useEffect(() => { | ||
| if (activeThemes != null) { | ||
| setChartTheme(defaultChartTheme()); | ||
| } | ||
| }, [activeThemes]); | ||
|
|
||
| return ( | ||
| <ChartThemeContext.Provider value={chartTheme}> | ||
| {children} | ||
| </ChartThemeContext.Provider> | ||
| ); | ||
| } |
Oops, something went wrong.