From 81e689459fbf23e5c534849c3b51700c2e5f7ea1 Mon Sep 17 00:00:00 2001 From: Laurence Roberts Date: Thu, 30 Jan 2025 09:50:05 +0000 Subject: [PATCH 1/5] AG-11705 Change fonts to use $rem operation --- .../src/api/preset/priceVolumePresetTheme.ts | 3 ++- .../src/chart/series/polar/donutTheme.ts | 3 ++- .../src/chart/series/polar/pieTheme.ts | 3 ++- .../src/chart/themes/chartTheme.ts | 10 +++++----- .../src/chart/themes/constants.ts | 14 +++++++++++++- packages/ag-charts-community/src/module-support.ts | 1 + packages/ag-charts-community/src/util/json.ts | 4 ++++ .../src/features/annotations/annotationsTheme.ts | 4 ++-- .../src/features/navigator/navigatorModule.ts | 2 +- .../src/series/linear-gauge/linearGaugeModule.ts | 2 +- .../src/series/radial-gauge/radialGaugeModule.ts | 3 ++- .../src/series/sunburst/sunburstModule.ts | 9 ++++++--- .../src/series/treemap/treemapModule.ts | 12 +++++++----- packages/ag-charts-types/src/chart/themeOptions.ts | 7 ++++--- 14 files changed, 52 insertions(+), 25 deletions(-) diff --git a/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts b/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts index 2ef6beec0f..35abda271f 100644 --- a/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts +++ b/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts @@ -6,6 +6,7 @@ import type { WithThemeParams, } from 'ag-charts-types'; +import { FONT_SIZE_RATIO } from '../../chart/themes/constants'; import { DEFAULT_ANNOTATION_HANDLE_FILL, DEFAULT_ANNOTATION_STATISTICS_COLOR, @@ -43,7 +44,7 @@ const lineText = { const font: WithThemeParams = { color: DEFAULT_TEXT_ANNOTATION_COLOR, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, fontFamily: { $ref: 'fontFamily' }, }; diff --git a/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts b/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts index 3e3770620f..2c1b594d17 100644 --- a/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts +++ b/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts @@ -1,4 +1,5 @@ import type { ExtensibleTheme } from '../../../module/coreModules'; +import { FONT_SIZE_RATIO } from '../../themes/constants'; import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols'; export const donutTheme: ExtensibleTheme<'donut'> = { @@ -6,7 +7,7 @@ export const donutTheme: ExtensibleTheme<'donut'> = { title: { enabled: true, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, fontFamily: { $ref: 'fontFamily' }, color: DEFAULT_MUTED_LABEL_COLOUR, spacing: 5, diff --git a/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts b/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts index d33cfc37ea..cd0b55b916 100644 --- a/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts +++ b/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts @@ -1,5 +1,6 @@ import type { ExtensibleTheme } from '../../../module/coreModules'; import type { SeriesPaletteFactory } from '../../../module/coreModulesTypes'; +import { FONT_SIZE_RATIO } from '../../themes/constants'; import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols'; export const pieTheme: ExtensibleTheme<'pie'> = { @@ -7,7 +8,7 @@ export const pieTheme: ExtensibleTheme<'pie'> = { title: { enabled: true, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, fontFamily: { $ref: 'fontFamily' }, color: DEFAULT_MUTED_LABEL_COLOUR, spacing: 5, diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts index 4803189ec4..7f5d659529 100644 --- a/packages/ag-charts-community/src/chart/themes/chartTheme.ts +++ b/packages/ag-charts-community/src/chart/themes/chartTheme.ts @@ -19,7 +19,7 @@ import { axisRegistry } from '../factory/axisRegistry'; import { type ChartType, chartDefaults, chartTypes } from '../factory/chartTypes'; import { legendRegistry } from '../factory/legendRegistry'; import { seriesRegistry } from '../factory/seriesRegistry'; -import { CARTESIAN_AXIS_TYPE, CARTESIAN_POSITION, FONT_SIZE, POLAR_AXIS_TYPE } from './constants'; +import { CARTESIAN_AXIS_TYPE, CARTESIAN_POSITION, FONT_SIZE, FONT_SIZE_RATIO, POLAR_AXIS_TYPE } from './constants'; import { DEFAULT_FILLS, DEFAULT_STROKES, type DefaultColors } from './defaultColors'; import { DEFAULT_ANNOTATION_HANDLE_FILL, @@ -136,7 +136,7 @@ export class ChartTheme { text: 'Axis Title', spacing: 25, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.MEDIUM / FONT_SIZE.SMALL] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] }, fontFamily: { $ref: 'fontFamily' }, color: { $ref: 'foregroundColor' }, }, @@ -199,7 +199,7 @@ export class ChartTheme { enabled: false, text: 'Title', fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.LARGE / FONT_SIZE.SMALL] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGEST] }, fontFamily: { $ref: 'fontFamily' }, color: { $ref: 'foregroundColor' }, wrapping: 'hyphenate', @@ -211,7 +211,7 @@ export class ChartTheme { text: 'Subtitle', spacing: 20, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.MEDIUM / FONT_SIZE.SMALL] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] }, fontFamily: { $ref: 'fontFamily' }, color: DEFAULT_MUTED_LABEL_COLOUR, wrapping: 'hyphenate', @@ -222,7 +222,7 @@ export class ChartTheme { enabled: false, text: 'Footnote', spacing: 20, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, FONT_SIZE.MEDIUM / FONT_SIZE.SMALL] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, color: 'rgb(140, 140, 140)', diff --git a/packages/ag-charts-community/src/chart/themes/constants.ts b/packages/ag-charts-community/src/chart/themes/constants.ts index d033ead2af..4943daa756 100644 --- a/packages/ag-charts-community/src/chart/themes/constants.ts +++ b/packages/ag-charts-community/src/chart/themes/constants.ts @@ -1,7 +1,19 @@ export enum FONT_SIZE { + SMALLEST = 8, + SMALLER = 10, SMALL = 12, MEDIUM = 13, - LARGE = 17, + LARGE = 14, + LARGEST = 17, +} + +export enum FONT_SIZE_RATIO { + SMALLEST = FONT_SIZE.SMALLEST / FONT_SIZE.SMALL, + SMALLER = FONT_SIZE.SMALLER / FONT_SIZE.SMALL, + SMALL = 1, + MEDIUM = FONT_SIZE.MEDIUM / FONT_SIZE.SMALL, + LARGE = FONT_SIZE.LARGE / FONT_SIZE.SMALL, + LARGEST = FONT_SIZE.LARGEST / FONT_SIZE.SMALL, } export enum CARTESIAN_POSITION { diff --git a/packages/ag-charts-community/src/module-support.ts b/packages/ag-charts-community/src/module-support.ts index 88ffeb7c63..a60e7c1b9d 100644 --- a/packages/ag-charts-community/src/module-support.ts +++ b/packages/ag-charts-community/src/module-support.ts @@ -132,6 +132,7 @@ export * from './dom/domManager'; export * from './dom/elements'; export * from './dom/proxyInteractionService'; export * from './util/id'; +export { FONT_SIZE_RATIO } from './chart/themes/constants'; export { type DefaultColors } from './chart/themes/defaultColors'; export { ChartUpdateType } from './chart/chartUpdateType'; export { type MementoOriginator } from './api/state/memento'; diff --git a/packages/ag-charts-community/src/util/json.ts b/packages/ag-charts-community/src/util/json.ts index 97af06acf3..0b9979d73c 100644 --- a/packages/ag-charts-community/src/util/json.ts +++ b/packages/ag-charts-community/src/util/json.ts @@ -383,6 +383,7 @@ enum Operation { And = '$and', Mul = '$mul', Round = '$round', + Rem = '$rem', } const operationKeys = new Set(Object.values(Operation)); type OperationFn = (value: string | Array, params: C, source: T, path: string[]) => any; @@ -446,4 +447,7 @@ const operations: Record> = { `\`$round\` json operation failed on [${String(a)}] at [${path.join('.')}], expecting a number.` ); }, + $rem: ([a], params) => { + if (typeof a === 'number') return Math.round(a * params.fontSize); + }, }; diff --git a/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts b/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts index fdb8f0fe57..e64c8a751f 100644 --- a/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts +++ b/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts @@ -13,7 +13,7 @@ import { _ModuleSupport, } from 'ag-charts-community'; -const { ThemeSymbols } = _ModuleSupport; +const { FONT_SIZE_RATIO, ThemeSymbols } = _ModuleSupport; const stroke: WithThemeParams = { stroke: { $ref: 'foregroundColor' }, @@ -29,7 +29,7 @@ const handle = { const font: WithThemeParams = { color: { $ref: 'backgroundColor' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, fontFamily: { $ref: 'fontFamily' }, }; diff --git a/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts b/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts index 1b8e29a7c8..47c87972ae 100644 --- a/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts +++ b/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts @@ -42,7 +42,7 @@ export const NavigatorModule: _ModuleSupport.RootModule = { enabled: false, label: { color: { $ref: 'foregroundColor' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 10 / 12] }] }, + fontSize: { $rem: [_ModuleSupport.FONT_SIZE_RATIO.SMALLER] }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, spacing: 5, diff --git a/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts b/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts index ee375e8083..fa8c9b9339 100644 --- a/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts +++ b/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts @@ -59,7 +59,7 @@ export const LinearGaugeModule: _ModuleSupport.SeriesModule<'linear-gauge'> = { placement: 'inside-start', fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 24 / 12] }] }, + fontSize: { $rem: [2] }, minimumFontSize: 12, spacing: 18, color: DEFAULT_INVERTED_LABEL_COLOUR, diff --git a/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts b/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts index a5b859ec10..4eaa8637cf 100644 --- a/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts +++ b/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts @@ -4,6 +4,7 @@ import defaultColorStops from '../gauge-util/defaultColorStops'; import { RadialGaugeSeries } from './radialGaugeSeries'; const { + FONT_SIZE_RATIO, ThemeSymbols: { DEFAULT_HIERARCHY_FILLS, DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_GAUGE_SERIES_COLOR_RANGE }, ThemeConstants: { POLAR_AXIS_TYPE }, } = _ModuleSupport; @@ -71,7 +72,7 @@ export const RadialGaugeModule: _ModuleSupport.SeriesModule<'radial-gauge'> = { secondaryLabel: { enabled: true, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, minimumFontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, color: DEFAULT_MUTED_LABEL_COLOUR, diff --git a/packages/ag-charts-enterprise/src/series/sunburst/sunburstModule.ts b/packages/ag-charts-enterprise/src/series/sunburst/sunburstModule.ts index 56245d2628..7722a69d47 100644 --- a/packages/ag-charts-enterprise/src/series/sunburst/sunburstModule.ts +++ b/packages/ag-charts-enterprise/src/series/sunburst/sunburstModule.ts @@ -2,7 +2,10 @@ import { _ModuleSupport } from 'ag-charts-community'; import { SunburstSeries } from './sunburstSeries'; -const { DEFAULT_DIVERGING_SERIES_COLOR_RANGE } = _ModuleSupport.ThemeSymbols; +const { + FONT_SIZE_RATIO, + ThemeSymbols: { DEFAULT_DIVERGING_SERIES_COLOR_RANGE }, +} = _ModuleSupport; export const SunburstModule: _ModuleSupport.SeriesModule<'sunburst'> = { type: 'series', @@ -18,7 +21,7 @@ export const SunburstModule: _ModuleSupport.SeriesModule<'sunburst'> = { series: { label: { fontFamily: { $ref: 'fontFamily' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 14 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, minimumFontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 9 / 12] }] }, fontWeight: { $ref: 'fontWeight' }, color: { $ref: 'backgroundColor' }, @@ -28,7 +31,7 @@ export const SunburstModule: _ModuleSupport.SeriesModule<'sunburst'> = { }, secondaryLabel: { fontFamily: { $ref: 'fontFamily' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 8 / 12] }] }, + fontSize: { $rem: [FONT_SIZE_RATIO.SMALLEST] }, minimumFontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 7 / 12] }] }, fontWeight: { $ref: 'fontWeight' }, color: { $ref: 'backgroundColor' }, diff --git a/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts b/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts index e7cd6ab168..46bd94dbd5 100644 --- a/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts +++ b/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts @@ -2,8 +2,10 @@ import { _ModuleSupport } from 'ag-charts-community'; import { TreemapSeries } from './treemapSeries'; -const { DEFAULT_DIVERGING_SERIES_COLOR_RANGE, DEFAULT_HIERARCHY_FILLS, DEFAULT_HIERARCHY_STROKES } = - _ModuleSupport.ThemeSymbols; +const { + FONT_SIZE_RATIO, + ThemeSymbols: { DEFAULT_DIVERGING_SERIES_COLOR_RANGE, DEFAULT_HIERARCHY_FILLS, DEFAULT_HIERARCHY_STROKES }, +} = _ModuleSupport; export const TreemapModule: _ModuleSupport.SeriesModule<'treemap'> = { type: 'series', @@ -39,8 +41,8 @@ export const TreemapModule: _ModuleSupport.SeriesModule<'treemap'> = { color: { $ref: 'backgroundColor' }, fontStyle: undefined, fontWeight: { $ref: 'fontWeight' }, - fontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 18 / 12] }] }, - minimumFontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 10 / 12] }] }, + fontSize: { $rem: [1.5] }, + minimumFontSize: { $rem: [FONT_SIZE_RATIO.SMALLER] }, fontFamily: { $ref: 'fontFamily' }, wrapping: 'on-space', overflowStrategy: 'ellipsis', @@ -52,7 +54,7 @@ export const TreemapModule: _ModuleSupport.SeriesModule<'treemap'> = { fontStyle: undefined, fontWeight: undefined, fontSize: { $ref: 'fontSize' }, - minimumFontSize: { $round: [{ $mul: [{ $ref: 'fontSize' }, 10 / 12] }] }, + minimumFontSize: { $rem: [FONT_SIZE_RATIO.SMALLER] }, fontFamily: { $ref: 'fontFamily' }, wrapping: 'never', overflowStrategy: 'ellipsis', diff --git a/packages/ag-charts-types/src/chart/themeOptions.ts b/packages/ag-charts-types/src/chart/themeOptions.ts index 9c7dda8f28..16f9446b94 100644 --- a/packages/ag-charts-types/src/chart/themeOptions.ts +++ b/packages/ag-charts-types/src/chart/themeOptions.ts @@ -115,9 +115,10 @@ type ThemeParamsOperation = | { $or: [ThemeParamsLeaf, ThemeParamsLeaf] } | { $and: [ThemeParamsLeaf, ThemeParamsLeaf] } | { $eq: [ThemeParamsLeaf, ThemeParamsLeaf] } - | { $mul: [ThemeParamsLeaf, ThemeParamsLeaf] } - | { $round: [ThemeParamsLeaf] }; -type ThemeParamsLeaf = ThemeParamsOperation | boolean | string | number; + | { $mul: [ThemeParamsLeaf, ThemeParamsLeaf] } + | { $round: [ThemeParamsLeaf] } + | { $rem: [ThemeParamsLeaf] | [ThemeParamsLeaf, ThemeParamsLeaf] }; +type ThemeParamsLeaf = ThemeParamsOperation | T; export type WithThemeParams = ExtendLiteralLeaves; From 1b5489153c9d21fe2376b00e2e5cec83672b89c0 Mon Sep 17 00:00:00 2001 From: Laurence Roberts Date: Thu, 30 Jan 2025 11:17:38 +0000 Subject: [PATCH 2/5] AG-11705 Add textColor and subtleTextColor params with color mixing --- .../src/api/preset/priceVolumePresetTheme.ts | 2 +- .../series/cartesian/areaSeriesModule.ts | 2 +- .../chart/series/cartesian/barSeriesModule.ts | 2 +- .../series/cartesian/bubbleSeriesModule.ts | 2 +- .../series/cartesian/lineSeriesModule.ts | 2 +- .../series/cartesian/scatterSeriesModule.ts | 2 +- .../src/chart/series/polar/donutTheme.ts | 8 +-- .../src/chart/series/polar/pieTheme.ts | 6 +-- .../src/chart/themes/chartTheme.ts | 31 +++++------ .../src/chart/themes/darkTheme.ts | 7 ++- .../src/chart/themes/financialDark.ts | 4 +- .../src/chart/themes/financialLight.ts | 4 +- .../src/chart/themes/symbols.ts | 2 - .../ag-charts-community/src/dom/domManager.ts | 2 + .../__snapshots__/optionsModule.test.ts.snap | 54 +++++++++---------- .../src/module/optionsModule.ts | 10 ++-- .../ag-charts-community/src/util/json.test.ts | 18 +++++++ packages/ag-charts-community/src/util/json.ts | 10 ++++ .../features/annotations/annotationsTheme.ts | 8 +-- .../src/features/crosshair/crosshairModule.ts | 2 +- .../src/features/navigator/navigatorModule.ts | 2 +- .../features/status-bar/statusBarModule.ts | 2 +- .../gradient-legend/gradientLegendModule.ts | 2 +- .../src/series/chord/chordModule.ts | 2 +- .../series/cone-funnel/coneFunnelThemes.ts | 2 +- .../src/series/heatmap/heatmapThemes.ts | 2 +- .../series/linear-gauge/linearGaugeModule.ts | 6 +-- .../src/series/map-line/mapLineModule.ts | 2 +- .../src/series/map-marker/mapMarkerModule.ts | 2 +- .../src/series/map-shape/mapShapeModule.ts | 5 +- .../series/nightingale/nightingaleThemes.ts | 2 +- .../src/series/pyramid/pyramidThemes.ts | 2 +- .../src/series/radar/radarThemes.ts | 2 +- .../src/series/radial-bar/radialBarThemes.ts | 3 +- .../radial-column/radialColumnThemes.ts | 2 +- .../series/radial-gauge/radialGaugeModule.ts | 8 +-- .../src/series/range-area/rangeAreaThemes.ts | 2 +- .../src/series/sankey/sankeyModule.ts | 2 +- .../src/series/treemap/treemapModule.ts | 4 +- .../src/series/waterfall/waterfallModule.ts | 6 +-- .../src/series/waterfall/waterfallThemes.ts | 2 +- .../ag-charts-types/src/chart/themeOptions.ts | 15 +++++- 42 files changed, 148 insertions(+), 107 deletions(-) diff --git a/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts b/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts index 35abda271f..64785abae3 100644 --- a/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts +++ b/packages/ag-charts-community/src/api/preset/priceVolumePresetTheme.ts @@ -153,7 +153,7 @@ export const annotationsTheme: WithThemeParams = callout: { ...stroke, ...text, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, handle: { ...handle }, fill: DEFAULT_FINANCIAL_CHARTS_ANNOTATION_BACKGROUND_FILL, fillOpacity: 0.2, diff --git a/packages/ag-charts-community/src/chart/series/cartesian/areaSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/areaSeriesModule.ts index 5069d429c1..c9c0e5c011 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/areaSeriesModule.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/areaSeriesModule.ts @@ -56,7 +56,7 @@ export const AreaSeriesModule: SeriesModule<'area'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, }, diff --git a/packages/ag-charts-community/src/chart/series/cartesian/barSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/barSeriesModule.ts index d7cbd165bb..3f1cd1cbc1 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/barSeriesModule.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/barSeriesModule.ts @@ -42,7 +42,7 @@ export const BarSeriesModule: SeriesModule<'bar'> = { { $eq: [{ $path: './placement' }, 'outside-end'] }, ], }, - { $ref: 'foregroundColor' }, + { $ref: 'textColor' }, { $ref: 'backgroundColor' }, ], }, diff --git a/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeriesModule.ts index 81d43564ad..609e66d7a7 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeriesModule.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/bubbleSeriesModule.ts @@ -34,7 +34,7 @@ export const BubbleSeriesModule: SeriesModule<'bubble'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, }, diff --git a/packages/ag-charts-community/src/chart/series/cartesian/lineSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/lineSeriesModule.ts index 4f87a53cff..e214906016 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/lineSeriesModule.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/lineSeriesModule.ts @@ -45,7 +45,7 @@ export const LineSeriesModule: SeriesModule<'line'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, errorBar: { cap: { diff --git a/packages/ag-charts-community/src/chart/series/cartesian/scatterSeriesModule.ts b/packages/ag-charts-community/src/chart/series/cartesian/scatterSeriesModule.ts index 33125ec856..c820c4db02 100644 --- a/packages/ag-charts-community/src/chart/series/cartesian/scatterSeriesModule.ts +++ b/packages/ag-charts-community/src/chart/series/cartesian/scatterSeriesModule.ts @@ -33,7 +33,7 @@ export const ScatterSeriesModule: SeriesModule<'scatter'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, errorBar: { cap: { diff --git a/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts b/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts index 2c1b594d17..f49056b51a 100644 --- a/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts +++ b/packages/ag-charts-community/src/chart/series/polar/donutTheme.ts @@ -1,6 +1,6 @@ import type { ExtensibleTheme } from '../../../module/coreModules'; import { FONT_SIZE_RATIO } from '../../themes/constants'; -import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols'; +import { DEFAULT_SHADOW_COLOUR } from '../../themes/symbols'; export const donutTheme: ExtensibleTheme<'donut'> = { series: { @@ -9,7 +9,7 @@ export const donutTheme: ExtensibleTheme<'donut'> = { fontWeight: { $ref: 'fontWeight' }, fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, fontFamily: { $ref: 'fontFamily' }, - color: DEFAULT_MUTED_LABEL_COLOUR, + color: { $ref: 'subtleTextColor' }, spacing: 5, }, calloutLabel: { @@ -17,7 +17,7 @@ export const donutTheme: ExtensibleTheme<'donut'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, offset: 3, minAngle: 0.001, }, @@ -52,7 +52,7 @@ export const donutTheme: ExtensibleTheme<'donut'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, spacing: 2, }, }, diff --git a/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts b/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts index cd0b55b916..de51506392 100644 --- a/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts +++ b/packages/ag-charts-community/src/chart/series/polar/pieTheme.ts @@ -1,7 +1,7 @@ import type { ExtensibleTheme } from '../../../module/coreModules'; import type { SeriesPaletteFactory } from '../../../module/coreModulesTypes'; import { FONT_SIZE_RATIO } from '../../themes/constants'; -import { DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_SHADOW_COLOUR } from '../../themes/symbols'; +import { DEFAULT_SHADOW_COLOUR } from '../../themes/symbols'; export const pieTheme: ExtensibleTheme<'pie'> = { series: { @@ -10,7 +10,7 @@ export const pieTheme: ExtensibleTheme<'pie'> = { fontWeight: { $ref: 'fontWeight' }, fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, fontFamily: { $ref: 'fontFamily' }, - color: DEFAULT_MUTED_LABEL_COLOUR, + color: { $ref: 'subtleTextColor' }, spacing: 5, }, calloutLabel: { @@ -18,7 +18,7 @@ export const pieTheme: ExtensibleTheme<'pie'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, offset: 3, minAngle: 0.001, }, diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts index 7f5d659529..2c5106e774 100644 --- a/packages/ag-charts-community/src/chart/themes/chartTheme.ts +++ b/packages/ag-charts-community/src/chart/themes/chartTheme.ts @@ -9,6 +9,7 @@ import type { AgPaletteColors, AgPresetOverrides, AgThemeOverrides, + WithThemeParams, } from 'ag-charts-types'; import { type PaletteType, paletteType } from '../../module/coreModulesTypes'; @@ -43,8 +44,6 @@ import { DEFAULT_HIERARCHY_FILLS, DEFAULT_HIERARCHY_STROKES, DEFAULT_INVERTED_BACKGROUND_COLOUR, - DEFAULT_INVERTED_LABEL_COLOUR, - DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_POLAR_SERIES_STROKE, DEFAULT_SEPARATION_LINES_COLOUR, DEFAULT_SHADOW_COLOUR, @@ -138,14 +137,14 @@ export class ChartTheme { fontWeight: { $ref: 'fontWeight' }, fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] }, fontFamily: { $ref: 'fontFamily' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, label: { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, spacing: 11, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, avoidCollisions: true, }, line: { @@ -174,7 +173,7 @@ export class ChartTheme { fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, padding: 5, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, crosshair: { @@ -201,7 +200,7 @@ export class ChartTheme { fontWeight: { $ref: 'fontWeight' }, fontSize: { $rem: [FONT_SIZE_RATIO.LARGEST] }, fontFamily: { $ref: 'fontFamily' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, wrapping: 'hyphenate', layoutStyle: DEFAULT_CAPTION_LAYOUT_STYLE, textAlign: DEFAULT_CAPTION_ALIGNMENT, @@ -213,7 +212,7 @@ export class ChartTheme { fontWeight: { $ref: 'fontWeight' }, fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] }, fontFamily: { $ref: 'fontFamily' }, - color: DEFAULT_MUTED_LABEL_COLOUR, + color: { $ref: 'subtleTextColor' }, wrapping: 'hyphenate', layoutStyle: DEFAULT_CAPTION_LAYOUT_STYLE, textAlign: DEFAULT_CAPTION_ALIGNMENT, @@ -225,7 +224,7 @@ export class ChartTheme { fontSize: { $rem: [FONT_SIZE_RATIO.MEDIUM] }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: 'rgb(140, 140, 140)', + color: { $ref: 'subtleTextColor' }, wrapping: 'hyphenate', layoutStyle: DEFAULT_CAPTION_LAYOUT_STYLE, textAlign: DEFAULT_CAPTION_ALIGNMENT, @@ -241,7 +240,7 @@ export class ChartTheme { marker: { size: 15, padding: 8 }, showSeriesStroke: true, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, @@ -251,9 +250,9 @@ export class ChartTheme { pagination: { marker: { size: 12 }, activeStyle: { fill: { $ref: 'foregroundColor' } }, - inactiveStyle: { fill: DEFAULT_MUTED_LABEL_COLOUR }, + inactiveStyle: { fill: { $ref: 'subtleTextColor' } }, highlightStyle: { fill: { $ref: 'foregroundColor' } }, - label: { color: { $ref: 'foregroundColor' } }, + label: { color: { $ref: 'textColor' } }, }, }, tooltip: { @@ -452,7 +451,7 @@ export class ChartTheme { }; } - getPublicParameters(): Required { + getPublicParameters(): Required> { return { axisColor: '#c3c3c3', backgroundColor: DEFAULT_BACKGROUND_FILL, @@ -463,10 +462,8 @@ export class ChartTheme { fontWeight: 400, gridLineColor: '#e0eaf1', padding: 20, - - // TODO: Should these directly use `backgroundColor` or should they be their own params with a ref to it? - // insideSeriesLabelColor: { $ref: 'backgroundColor' }, - // annotationHandleFillColor: { $ref: 'backgroundColor' }, + subtleTextColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.38] }, + textColor: { $ref: 'foregroundColor' }, }; } @@ -477,8 +474,6 @@ export class ChartTheme { params.set(IS_DARK_THEME, false); params.set(IS_ENTERPRISE, isEnterprise); params.set(IS_COMMUNITY, !isEnterprise); - params.set(DEFAULT_INVERTED_LABEL_COLOUR, '#fff'); - params.set(DEFAULT_MUTED_LABEL_COLOUR, '#8c8c8c'); params.set(DEFAULT_CROSS_LINES_COLOUR, '#464646'); params.set(DEFAULT_SEPARATION_LINES_COLOUR, '#d9d9d9'); params.set(DEFAULT_BACKGROUND_COLOUR, DEFAULT_BACKGROUND_FILL); // TODO: remove uses in paletteFactory() diff --git a/packages/ag-charts-community/src/chart/themes/darkTheme.ts b/packages/ag-charts-community/src/chart/themes/darkTheme.ts index c4823fedf8..c532acfeb6 100644 --- a/packages/ag-charts-community/src/chart/themes/darkTheme.ts +++ b/packages/ag-charts-community/src/chart/themes/darkTheme.ts @@ -1,4 +1,4 @@ -import type { AgChartThemeOptions } from 'ag-charts-types'; +import type { AgChartThemeOptions, AgChartThemeParams, WithThemeParams } from 'ag-charts-types'; import { ChartTheme } from './chartTheme'; import type { DefaultColors } from './defaultColors'; @@ -18,7 +18,6 @@ import { DEFAULT_HIERARCHY_FILLS, DEFAULT_HIERARCHY_STROKES, DEFAULT_INVERTED_BACKGROUND_COLOUR, - DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_POLAR_SERIES_STROKE, DEFAULT_SEPARATION_LINES_COLOUR, DEFAULT_TEXTBOX_COLOR, @@ -71,13 +70,14 @@ export class DarkTheme extends ChartTheme { }; } - override getPublicParameters() { + override getPublicParameters(): Required> { return { ...super.getPublicParameters(), backgroundColor: DEFAULT_DARK_BACKGROUND_FILL, borderColor: '#4b525d', foregroundColor: '#fff', gridLineColor: '#545a6e', + subtleTextColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.57] }, }; } @@ -87,7 +87,6 @@ export class DarkTheme extends ChartTheme { params.set(IS_DARK_THEME, true); params.set(DEFAULT_POLAR_SERIES_STROKE, DEFAULT_DARK_BACKGROUND_FILL); - params.set(DEFAULT_MUTED_LABEL_COLOUR, '#7d91a0'); params.set(DEFAULT_CROSS_LINES_COLOUR, '#fff'); params.set(DEFAULT_SEPARATION_LINES_COLOUR, '#7f8389'); diff --git a/packages/ag-charts-community/src/chart/themes/financialDark.ts b/packages/ag-charts-community/src/chart/themes/financialDark.ts index 3472cd4237..56820ecde1 100644 --- a/packages/ag-charts-community/src/chart/themes/financialDark.ts +++ b/packages/ag-charts-community/src/chart/themes/financialDark.ts @@ -1,3 +1,5 @@ +import type { AgChartThemeParams, WithThemeParams } from 'ag-charts-types'; + import { DarkTheme } from './darkTheme'; import { DEFAULT_CAPTION_ALIGNMENT, @@ -37,7 +39,7 @@ export class FinancialDark extends DarkTheme { }; } - override getPublicParameters() { + override getPublicParameters(): Required> { return { ...super.getPublicParameters(), gridLineColor: '#343a4e', diff --git a/packages/ag-charts-community/src/chart/themes/financialLight.ts b/packages/ag-charts-community/src/chart/themes/financialLight.ts index a297e510af..67551d012a 100644 --- a/packages/ag-charts-community/src/chart/themes/financialLight.ts +++ b/packages/ag-charts-community/src/chart/themes/financialLight.ts @@ -1,3 +1,5 @@ +import type { AgChartThemeParams, WithThemeParams } from 'ag-charts-types'; + import { ChartTheme } from './chartTheme'; import { DEFAULT_CAPTION_ALIGNMENT, @@ -37,7 +39,7 @@ export class FinancialLight extends ChartTheme { }; } - override getPublicParameters() { + override getPublicParameters(): Required> { return { ...super.getPublicParameters(), gridLineColor: '#f2f3f3', diff --git a/packages/ag-charts-community/src/chart/themes/symbols.ts b/packages/ag-charts-community/src/chart/themes/symbols.ts index b2d0d579d1..f01e0ae607 100644 --- a/packages/ag-charts-community/src/chart/themes/symbols.ts +++ b/packages/ag-charts-community/src/chart/themes/symbols.ts @@ -1,8 +1,6 @@ export const IS_DARK_THEME = Symbol('is-dark-theme') as unknown as boolean; export const IS_COMMUNITY = Symbol('is-community') as unknown as boolean; export const IS_ENTERPRISE = Symbol('is-enterprise') as unknown as boolean; -export const DEFAULT_INVERTED_LABEL_COLOUR = Symbol('default-inverted-label-colour') as unknown as string; -export const DEFAULT_MUTED_LABEL_COLOUR = Symbol('default-muted-label-colour') as unknown as string; export const DEFAULT_CROSS_LINES_COLOUR = Symbol('default-cross-lines-colour') as unknown as string; export const DEFAULT_SEPARATION_LINES_COLOUR = Symbol('default-separation-lines-colour') as unknown as string; export const DEFAULT_BACKGROUND_COLOUR = Symbol('default-background-colour') as unknown as string; // TODO: remove uses in paletteFactory() diff --git a/packages/ag-charts-community/src/dom/domManager.ts b/packages/ag-charts-community/src/dom/domManager.ts index 7742f49d8a..986191f74e 100644 --- a/packages/ag-charts-community/src/dom/domManager.ts +++ b/packages/ag-charts-community/src/dom/domManager.ts @@ -251,6 +251,8 @@ export class DOMManager extends BaseManager { fontWeight: 'font-weight', gridLineColor: 'grid-line-color', padding: 'padding', + subtleTextColor: 'subtle-text-color', + textColor: 'text-color', }; const lengthKeys = ['fontSize']; diff --git a/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap b/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap index f1383df20c..1fce132697 100644 --- a/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap +++ b/packages/ag-charts-community/src/module/__snapshots__/optionsModule.test.ts.snap @@ -502,7 +502,7 @@ exports[`ChartOptions #prepareOptions for ADV_COMBINATION_SERIES_CHART_EXAMPLE i "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -850,7 +850,7 @@ exports[`ChartOptions #prepareOptions for ADV_CUSTOM_MARKER_SHAPES_EXAMPLE it sh "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -1395,7 +1395,7 @@ exports[`ChartOptions #prepareOptions for ADV_CUSTOM_TOOLTIPS_EXAMPLE it should "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -1934,7 +1934,7 @@ exports[`ChartOptions #prepareOptions for ADV_PER_MARKER_CUSTOMISATION_EXAMPLE i "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -2123,7 +2123,7 @@ exports[`ChartOptions #prepareOptions for ADV_TIME_AXIS_WITH_IRREGULAR_INTERVALS }, "container": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -2507,7 +2507,7 @@ exports[`ChartOptions #prepareOptions for AREA_GRAPH_WITH_NEGATIVE_VALUES_EXAMPL "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -3011,7 +3011,7 @@ exports[`ChartOptions #prepareOptions for BAR_CHART_EXAMPLE it should prepare op "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -3214,7 +3214,7 @@ exports[`ChartOptions #prepareOptions for BAR_CHART_WITH_LABELS_EXAMPLE it shoul "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -3419,7 +3419,7 @@ exports[`ChartOptions #prepareOptions for BUBBLE_GRAPH_WITH_CATEGORIES_EXAMPLE i "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": false, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -3606,7 +3606,7 @@ exports[`ChartOptions #prepareOptions for BUBBLE_GRAPH_WITH_NEGATIVE_VALUES_EXAM "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -3792,7 +3792,7 @@ exports[`ChartOptions #prepareOptions for COLUMN_CHART_WITH_NEGATIVE_VALUES_EXAM "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -4100,7 +4100,7 @@ exports[`ChartOptions #prepareOptions for GROUPED_BAR_CHART_EXAMPLE it should pr "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -4413,7 +4413,7 @@ exports[`ChartOptions #prepareOptions for GROUPED_COLUMN_EXAMPLE it should prepa "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -4971,7 +4971,7 @@ exports[`ChartOptions #prepareOptions for LINE_GRAPH_WITH_GAPS_EXAMPLE it should "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -5958,7 +5958,7 @@ exports[`ChartOptions #prepareOptions for LOG_AXIS_EXAMPLE it should prepare opt "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": false, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -6149,7 +6149,7 @@ exports[`ChartOptions #prepareOptions for ONE_HUNDRED_PERCENT_STACKED_AREA_GRAPH "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -6806,7 +6806,7 @@ exports[`ChartOptions #prepareOptions for ONE_HUNDRED_PERCENT_STACKED_BAR_EXAMPL "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -7171,7 +7171,7 @@ exports[`ChartOptions #prepareOptions for ONE_HUNDRED_PERCENT_STACKED_COLUMNS_EX "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -7684,7 +7684,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_AREA_GRAPH_EXAMPLE it should pr "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -8087,7 +8087,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_COLUMN_CHART_EXAMPLE it should "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -8197,7 +8197,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_DONUT_CHART_EXAMPLE it should p "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -8515,7 +8515,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_LINE_CHART_EXAMPLE it should pr "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -8725,7 +8725,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_PIE_CHART_EXAMPLE it should pre }, "container": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -8974,7 +8974,7 @@ exports[`ChartOptions #prepareOptions for SIMPLE_SCATTER_CHART_EXAMPLE it should "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -9160,7 +9160,7 @@ exports[`ChartOptions #prepareOptions for STACKED_AREA_GRAPH_EXAMPLE it should p "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -9760,7 +9760,7 @@ exports[`ChartOptions #prepareOptions for STACKED_BAR_CHART_EXAMPLE it should pr "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, @@ -10156,7 +10156,7 @@ exports[`ChartOptions #prepareOptions for STACKED_COLUMN_GRAPH_EXAMPLE it should "container": Any, "data": Any, "footnote": { - "color": "rgb(140, 140, 140)", + "color": "#8c8c8c", "enabled": true, "fontFamily": "Verdana, sans-serif", "fontSize": 13, diff --git a/packages/ag-charts-community/src/module/optionsModule.ts b/packages/ag-charts-community/src/module/optionsModule.ts index e4e4ccb404..f206cba191 100644 --- a/packages/ag-charts-community/src/module/optionsModule.ts +++ b/packages/ag-charts-community/src/module/optionsModule.ts @@ -27,6 +27,7 @@ import { type AgPresetOverrides, type AgTooltipPositionOptions, AgTooltipPositionType, + type WithThemeParams, } from 'ag-charts-types'; import { PRESETS, PRESET_DATA_PROCESSORS } from '../api/preset/presets'; @@ -269,6 +270,7 @@ export class ChartOptions { processedOptions = deepClone(processedOptions, ChartOptions.OPTIONS_CLONE_OPTS); const themeParameters = this.getThemeParameters(activeTheme, processedOptions); + this.resolveThemeOperations(themeParameters, themeParameters as any); this.resolveThemeOperations(themeParameters, processedOptions); this.resolveThemeOperations(themeParameters, this.annotationThemes); @@ -293,7 +295,7 @@ export class ChartOptions { this.debug('AgCharts.createOrUpdate() - processed options', processedOptions); - return { activeTheme, processedOptions, defaultAxes, themeParameters }; + return { activeTheme, processedOptions, defaultAxes, themeParameters: themeParameters as AgChartThemeParams }; } diffOptions(other?: ChartOptions): Partial { @@ -446,6 +448,8 @@ export class ChartOptions { fontWeight: or(string, number), gridLineColor: string, padding: number, + subtleTextColor: string, + textColor: string, }; const { errors } = validate(options.theme.params, themeParamsOptionsDef); @@ -460,8 +464,8 @@ export class ChartOptions { return defaultParameters; } - private resolveThemeOperations(params: AgChartThemeParams, options: T) { - const modifiedPaths = jsonResolveOperations(options, params, new Set(['palette', 'params', 'data'])); + private resolveThemeOperations(params: WithThemeParams, options: T) { + const modifiedPaths = jsonResolveOperations(options, params, new Set(['palette', 'data'])); this.debug('resolveTheme()', modifiedPaths); } diff --git a/packages/ag-charts-community/src/util/json.test.ts b/packages/ag-charts-community/src/util/json.test.ts index 4650674062..f9e5d16ff8 100644 --- a/packages/ag-charts-community/src/util/json.test.ts +++ b/packages/ag-charts-community/src/util/json.test.ts @@ -560,6 +560,24 @@ describe('json module', () => { ]); }); + it('should resolve `$round` operation', () => { + const source = { a: { $round: [1.234] }, b: { $round: [1.987] } }; + jsonResolveOperations(source, {}); + expect(source).toEqual({ a: 1, b: 2 }); + }); + + it('should resolve `$rem` operation', () => { + const source = { a: { $rem: [1.5] } }; + jsonResolveOperations(source, { fontSize: 12 }); + expect(source).toEqual({ a: 18 }); + }); + + it('should resolve `$mix` operation', () => { + const source = { a: { $mix: ['#ffffff', '#000000', 0.5] } }; + jsonResolveOperations(source, {}); + expect(source).toEqual({ a: '#808080' }); + }); + it('should resolve `$ref` operation with params', () => { const source = { a: { $ref: 'key' } }; jsonResolveOperations(source, { key: 'hello' }); diff --git a/packages/ag-charts-community/src/util/json.ts b/packages/ag-charts-community/src/util/json.ts index 0b9979d73c..55f0e8d49e 100644 --- a/packages/ag-charts-community/src/util/json.ts +++ b/packages/ag-charts-community/src/util/json.ts @@ -11,6 +11,7 @@ import { } from 'ag-charts-core'; import type { DeepPartial, PlainObject } from 'ag-charts-core'; +import { Color } from './color'; import { SKIP_JS_BUILTINS } from './object'; import { isProperties } from './properties'; @@ -384,6 +385,7 @@ enum Operation { Mul = '$mul', Round = '$round', Rem = '$rem', + Mix = '$mix', } const operationKeys = new Set(Object.values(Operation)); type OperationFn = (value: string | Array, params: C, source: T, path: string[]) => any; @@ -450,4 +452,12 @@ const operations: Record> = { $rem: ([a], params) => { if (typeof a === 'number') return Math.round(a * params.fontSize); }, + $mix: ([a, b, c], _params, _source, path) => { + if (typeof a === 'string' && typeof b === 'string' && typeof c === 'number') { + return Color.mix(Color.fromString(a), Color.fromString(b), c).toString(); + } + Logger.warnOnce( + `\`$mix\` json operation failed on [${String(a)}, ${String(b)}, ${String(c)}] at [${path.join('.')}], expecting two colors and a number.` + ); + }, }; diff --git a/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts b/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts index e64c8a751f..714c6a35ea 100644 --- a/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts +++ b/packages/ag-charts-enterprise/src/features/annotations/annotationsTheme.ts @@ -49,14 +49,14 @@ const lineText: WithThemeParams = { ...font, position: 'top', alignment: 'center', - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }; const channelText: WithThemeParams = { ...font, position: 'top', alignment: 'center', - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }; const measurerStatistics: WithThemeParams = { @@ -245,7 +245,7 @@ export const annotationsTheme: WithThemeParams = callout: { ...stroke, ...text, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, handle: { ...handle }, fill: { $ref: 'foregroundColor' }, fillOpacity: 0.075, @@ -272,7 +272,7 @@ export const annotationsTheme: WithThemeParams = }, text: { ...text, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, handle: { ...handle }, }, diff --git a/packages/ag-charts-enterprise/src/features/crosshair/crosshairModule.ts b/packages/ag-charts-enterprise/src/features/crosshair/crosshairModule.ts index 3a7d31022f..ddd76af53c 100644 --- a/packages/ag-charts-enterprise/src/features/crosshair/crosshairModule.ts +++ b/packages/ag-charts-enterprise/src/features/crosshair/crosshairModule.ts @@ -12,7 +12,7 @@ export const CrosshairModule: _ModuleSupport.AxisOptionModule = { themeTemplate: { crosshair: { snap: true, - stroke: _ModuleSupport.ThemeSymbols.DEFAULT_MUTED_LABEL_COLOUR, + stroke: { $ref: 'subtleTextColor' }, strokeWidth: 1, strokeOpacity: 1, lineDash: [5, 6], diff --git a/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts b/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts index 47c87972ae..421b5ae5d1 100644 --- a/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts +++ b/packages/ag-charts-enterprise/src/features/navigator/navigatorModule.ts @@ -41,7 +41,7 @@ export const NavigatorModule: _ModuleSupport.RootModule = { miniChart: { enabled: false, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, fontSize: { $rem: [_ModuleSupport.FONT_SIZE_RATIO.SMALLER] }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, diff --git a/packages/ag-charts-enterprise/src/features/status-bar/statusBarModule.ts b/packages/ag-charts-enterprise/src/features/status-bar/statusBarModule.ts index fd66878f53..e3d5fe3738 100644 --- a/packages/ag-charts-enterprise/src/features/status-bar/statusBarModule.ts +++ b/packages/ag-charts-enterprise/src/features/status-bar/statusBarModule.ts @@ -14,7 +14,7 @@ export const StatusBarModule: _ModuleSupport.RootModule = { enabled: false, layoutStyle: _ModuleSupport.ThemeSymbols.DEFAULT_CAPTION_LAYOUT_STYLE, title: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, fontFamily: { $ref: 'fontFamily' }, fontSize: { $ref: 'fontSize' }, fontWeight: { $ref: 'fontWeight' }, diff --git a/packages/ag-charts-enterprise/src/gradient-legend/gradientLegendModule.ts b/packages/ag-charts-enterprise/src/gradient-legend/gradientLegendModule.ts index 591c3a88a8..bfe35031b2 100644 --- a/packages/ag-charts-enterprise/src/gradient-legend/gradientLegendModule.ts +++ b/packages/ag-charts-enterprise/src/gradient-legend/gradientLegendModule.ts @@ -18,7 +18,7 @@ export const GradientLegendModule: _ModuleSupport.LegendModule = { scale: { padding: 13, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, diff --git a/packages/ag-charts-enterprise/src/series/chord/chordModule.ts b/packages/ag-charts-enterprise/src/series/chord/chordModule.ts index 23869ec2db..aa6903d232 100644 --- a/packages/ag-charts-enterprise/src/series/chord/chordModule.ts +++ b/packages/ag-charts-enterprise/src/series/chord/chordModule.ts @@ -24,7 +24,7 @@ export const ChordModule: _ModuleSupport.SeriesModule<'chord'> = { fontFamily: { $ref: 'fontFamily' }, fontSize: { $ref: 'fontSize' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, spacing: 5, maxWidth: 100, }, diff --git a/packages/ag-charts-enterprise/src/series/cone-funnel/coneFunnelThemes.ts b/packages/ag-charts-enterprise/src/series/cone-funnel/coneFunnelThemes.ts index 9b6833ccfb..a35659f15f 100644 --- a/packages/ag-charts-enterprise/src/series/cone-funnel/coneFunnelThemes.ts +++ b/packages/ag-charts-enterprise/src/series/cone-funnel/coneFunnelThemes.ts @@ -13,7 +13,7 @@ export const CONE_FUNNEL_SERIES_THEME: _ModuleSupport.SeriesModule<'cone-funnel' fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, placement: 'before', spacing: 4, }, diff --git a/packages/ag-charts-enterprise/src/series/heatmap/heatmapThemes.ts b/packages/ag-charts-enterprise/src/series/heatmap/heatmapThemes.ts index fdb089ecd0..f53940943a 100644 --- a/packages/ag-charts-enterprise/src/series/heatmap/heatmapThemes.ts +++ b/packages/ag-charts-enterprise/src/series/heatmap/heatmapThemes.ts @@ -4,7 +4,7 @@ export const HEATMAP_SERIES_THEME: _ModuleSupport.SeriesModule<'heatmap'>['theme series: { label: { enabled: false, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, diff --git a/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts b/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts index fa8c9b9339..aebd57e6d6 100644 --- a/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts +++ b/packages/ag-charts-enterprise/src/series/linear-gauge/linearGaugeModule.ts @@ -4,7 +4,7 @@ import defaultColorStops from '../gauge-util/defaultColorStops'; import { LinearGaugeSeries } from './linearGaugeSeries'; const { - ThemeSymbols: { DEFAULT_HIERARCHY_FILLS, DEFAULT_INVERTED_LABEL_COLOUR, DEFAULT_GAUGE_SERIES_COLOR_RANGE }, + ThemeSymbols: { DEFAULT_HIERARCHY_FILLS, DEFAULT_GAUGE_SERIES_COLOR_RANGE }, ThemeConstants: { CARTESIAN_AXIS_TYPE }, } = _ModuleSupport; @@ -50,7 +50,7 @@ export const LinearGaugeModule: _ModuleSupport.SeriesModule<'linear-gauge'> = { fontWeight: { $ref: 'fontWeight' }, fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, spacing: 5, }, }, @@ -62,7 +62,7 @@ export const LinearGaugeModule: _ModuleSupport.SeriesModule<'linear-gauge'> = { fontSize: { $rem: [2] }, minimumFontSize: 12, spacing: 18, - color: DEFAULT_INVERTED_LABEL_COLOUR, + color: { $ref: 'backgroundColor' }, }, margin: 4, }, diff --git a/packages/ag-charts-enterprise/src/series/map-line/mapLineModule.ts b/packages/ag-charts-enterprise/src/series/map-line/mapLineModule.ts index 09f934c1f4..a813f152c2 100644 --- a/packages/ag-charts-enterprise/src/series/map-line/mapLineModule.ts +++ b/packages/ag-charts-enterprise/src/series/map-line/mapLineModule.ts @@ -26,7 +26,7 @@ export const MapLineModule: _ModuleSupport.SeriesModule<'map-line'> = { fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, }, diff --git a/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerModule.ts b/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerModule.ts index 68d9e83c3f..ea74ffc539 100644 --- a/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerModule.ts +++ b/packages/ag-charts-enterprise/src/series/map-marker/mapMarkerModule.ts @@ -21,7 +21,7 @@ export const MapMarkerModule: _ModuleSupport.SeriesModule<'map-marker'> = { maxSize: 30, fillOpacity: 0.5, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, }, diff --git a/packages/ag-charts-enterprise/src/series/map-shape/mapShapeModule.ts b/packages/ag-charts-enterprise/src/series/map-shape/mapShapeModule.ts index 2d4731205a..8e9dbc37c9 100644 --- a/packages/ag-charts-enterprise/src/series/map-shape/mapShapeModule.ts +++ b/packages/ag-charts-enterprise/src/series/map-shape/mapShapeModule.ts @@ -3,8 +3,7 @@ import { _ModuleSupport } from 'ag-charts-community'; import { MAP_THEME_DEFAULTS } from '../map-util/mapThemeDefaults'; import { MapShapeSeries } from './mapShapeSeries'; -const { DEFAULT_INVERTED_LABEL_COLOUR, DEFAULT_DIVERGING_SERIES_COLOR_RANGE, DEFAULT_BACKGROUND_COLOUR } = - _ModuleSupport.ThemeSymbols; +const { DEFAULT_DIVERGING_SERIES_COLOR_RANGE, DEFAULT_BACKGROUND_COLOUR } = _ModuleSupport.ThemeSymbols; export const MapShapeModule: _ModuleSupport.SeriesModule<'map-shape'> = { type: 'series', @@ -24,7 +23,7 @@ export const MapShapeModule: _ModuleSupport.SeriesModule<'map-shape'> = { lineDashOffset: 0, padding: 2, label: { - color: DEFAULT_INVERTED_LABEL_COLOUR, + color: { $ref: 'backgroundColor' }, fontFamily: { $ref: 'fontFamily' }, fontSize: { $ref: 'fontSize' }, fontWeight: 'bold', diff --git a/packages/ag-charts-enterprise/src/series/nightingale/nightingaleThemes.ts b/packages/ag-charts-enterprise/src/series/nightingale/nightingaleThemes.ts index 33bcda110d..c98c8a5279 100644 --- a/packages/ag-charts-enterprise/src/series/nightingale/nightingaleThemes.ts +++ b/packages/ag-charts-enterprise/src/series/nightingale/nightingaleThemes.ts @@ -12,7 +12,7 @@ export const NIGHTINGALE_SERIES_THEME: _ModuleSupport.SeriesModule<'nightingale' fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, axes: { diff --git a/packages/ag-charts-enterprise/src/series/pyramid/pyramidThemes.ts b/packages/ag-charts-enterprise/src/series/pyramid/pyramidThemes.ts index 1a77310526..be95d7d8da 100644 --- a/packages/ag-charts-enterprise/src/series/pyramid/pyramidThemes.ts +++ b/packages/ag-charts-enterprise/src/series/pyramid/pyramidThemes.ts @@ -17,7 +17,7 @@ export const PYRAMID_SERIES_THEME: _ModuleSupport.SeriesModule<'pyramid'>['theme fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, spacing: 12, }, }, diff --git a/packages/ag-charts-enterprise/src/series/radar/radarThemes.ts b/packages/ag-charts-enterprise/src/series/radar/radarThemes.ts index c56506ef3e..c016a4ea29 100644 --- a/packages/ag-charts-enterprise/src/series/radar/radarThemes.ts +++ b/packages/ag-charts-enterprise/src/series/radar/radarThemes.ts @@ -11,7 +11,7 @@ const BASE_RADAR_SERIES_THEME: _ModuleSupport.SeriesModule<'radar-line' | 'radar fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, marker: { enabled: true, diff --git a/packages/ag-charts-enterprise/src/series/radial-bar/radialBarThemes.ts b/packages/ag-charts-enterprise/src/series/radial-bar/radialBarThemes.ts index 84cc7d4477..b896f43a2b 100644 --- a/packages/ag-charts-enterprise/src/series/radial-bar/radialBarThemes.ts +++ b/packages/ag-charts-enterprise/src/series/radial-bar/radialBarThemes.ts @@ -1,7 +1,6 @@ import { _ModuleSupport } from 'ag-charts-community'; const { - ThemeSymbols: { DEFAULT_INVERTED_LABEL_COLOUR }, ThemeConstants: { POLAR_AXIS_TYPE }, } = _ModuleSupport; @@ -13,7 +12,7 @@ export const RADIAL_BAR_SERIES_THEME: _ModuleSupport.SeriesModule<'radial-bar'>[ fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: DEFAULT_INVERTED_LABEL_COLOUR, + color: { $ref: 'backgroundColor' }, }, }, axes: { diff --git a/packages/ag-charts-enterprise/src/series/radial-column/radialColumnThemes.ts b/packages/ag-charts-enterprise/src/series/radial-column/radialColumnThemes.ts index 0bdb37e4ea..6a2d1c1d06 100644 --- a/packages/ag-charts-enterprise/src/series/radial-column/radialColumnThemes.ts +++ b/packages/ag-charts-enterprise/src/series/radial-column/radialColumnThemes.ts @@ -14,7 +14,7 @@ export const RADIAL_COLUMN_SERIES_THEME: _ModuleSupport.SeriesModule<'radial-col fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, axes: { diff --git a/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts b/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts index 4eaa8637cf..f6d66bec7f 100644 --- a/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts +++ b/packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeModule.ts @@ -5,7 +5,7 @@ import { RadialGaugeSeries } from './radialGaugeSeries'; const { FONT_SIZE_RATIO, - ThemeSymbols: { DEFAULT_HIERARCHY_FILLS, DEFAULT_MUTED_LABEL_COLOUR, DEFAULT_GAUGE_SERIES_COLOR_RANGE }, + ThemeSymbols: { DEFAULT_HIERARCHY_FILLS, DEFAULT_GAUGE_SERIES_COLOR_RANGE }, ThemeConstants: { POLAR_AXIS_TYPE }, } = _ModuleSupport; @@ -52,7 +52,7 @@ export const RadialGaugeModule: _ModuleSupport.SeriesModule<'radial-gauge'> = { fontWeight: { $ref: 'fontWeight' }, fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, spacing: 5, }, }, @@ -67,7 +67,7 @@ export const RadialGaugeModule: _ModuleSupport.SeriesModule<'radial-gauge'> = { fontSize: 56, minimumFontSize: 18 / 56, fontFamily: { $ref: 'fontFamily' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, secondaryLabel: { enabled: true, @@ -75,7 +75,7 @@ export const RadialGaugeModule: _ModuleSupport.SeriesModule<'radial-gauge'> = { fontSize: { $rem: [FONT_SIZE_RATIO.LARGE] }, minimumFontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, - color: DEFAULT_MUTED_LABEL_COLOUR, + color: { $ref: 'subtleTextColor' }, }, }, axes: { diff --git a/packages/ag-charts-enterprise/src/series/range-area/rangeAreaThemes.ts b/packages/ag-charts-enterprise/src/series/range-area/rangeAreaThemes.ts index b71ae81bbb..8d476e22ec 100644 --- a/packages/ag-charts-enterprise/src/series/range-area/rangeAreaThemes.ts +++ b/packages/ag-charts-enterprise/src/series/range-area/rangeAreaThemes.ts @@ -16,7 +16,7 @@ export const RANGE_AREA_SERIES_THEME: _ModuleSupport.SeriesModule<'range-area'>[ fontSize: { $ref: 'fontSize' }, fontFamily: { $ref: 'fontFamily' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, interpolation: { type: 'linear', diff --git a/packages/ag-charts-enterprise/src/series/sankey/sankeyModule.ts b/packages/ag-charts-enterprise/src/series/sankey/sankeyModule.ts index 1b3b917090..1cd9905a6a 100644 --- a/packages/ag-charts-enterprise/src/series/sankey/sankeyModule.ts +++ b/packages/ag-charts-enterprise/src/series/sankey/sankeyModule.ts @@ -30,7 +30,7 @@ export const SankeyModule: _ModuleSupport.SeriesModule<'sankey'> = { fontFamily: { $ref: 'fontFamily' }, fontSize: { $ref: 'fontSize' }, fontWeight: { $ref: 'fontWeight' }, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, spacing: 10, }, node: { diff --git a/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts b/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts index 46bd94dbd5..ccd97861e3 100644 --- a/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts +++ b/packages/ag-charts-enterprise/src/series/treemap/treemapModule.ts @@ -21,7 +21,7 @@ export const TreemapModule: _ModuleSupport.SeriesModule<'treemap'> = { group: { label: { enabled: true, - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, fontStyle: undefined, fontWeight: { $ref: 'fontWeight' }, fontSize: { $ref: 'fontSize' }, @@ -69,7 +69,7 @@ export const TreemapModule: _ModuleSupport.SeriesModule<'treemap'> = { highlightStyle: { group: { label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, fill: 'rgba(255,255,255, 0.33)', stroke: `rgba(0, 0, 0, 0.4)`, diff --git a/packages/ag-charts-enterprise/src/series/waterfall/waterfallModule.ts b/packages/ag-charts-enterprise/src/series/waterfall/waterfallModule.ts index 092a3b8f59..04fde65b74 100644 --- a/packages/ag-charts-enterprise/src/series/waterfall/waterfallModule.ts +++ b/packages/ag-charts-enterprise/src/series/waterfall/waterfallModule.ts @@ -51,21 +51,21 @@ export const WaterfallModule: _ModuleSupport.SeriesModule<'waterfall'> = { fill: palette.altUp.fill, stroke: palette.altUp.stroke, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, negative: { fill: palette.altDown.fill, stroke: palette.altDown.stroke, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, total: { fill: palette.neutral.fill, stroke: palette.neutral.stroke, label: { - color: { $ref: 'foregroundColor' }, + color: { $ref: 'textColor' }, }, }, }, diff --git a/packages/ag-charts-enterprise/src/series/waterfall/waterfallThemes.ts b/packages/ag-charts-enterprise/src/series/waterfall/waterfallThemes.ts index c73dd492bb..7955598c8d 100644 --- a/packages/ag-charts-enterprise/src/series/waterfall/waterfallThemes.ts +++ b/packages/ag-charts-enterprise/src/series/waterfall/waterfallThemes.ts @@ -8,7 +8,7 @@ const itemTheme = { fontWeight: { $ref: 'fontWeight' as const }, fontSize: { $ref: 'fontSize' as const }, fontFamily: { $ref: 'fontFamily' as const }, - color: { $ref: 'foregroundColor' as const }, + color: { $ref: 'textColor' as const }, formatter: undefined, placement: 'outside-end' as const, }, diff --git a/packages/ag-charts-types/src/chart/themeOptions.ts b/packages/ag-charts-types/src/chart/themeOptions.ts index 16f9446b94..a8f4783663 100644 --- a/packages/ag-charts-types/src/chart/themeOptions.ts +++ b/packages/ag-charts-types/src/chart/themeOptions.ts @@ -97,6 +97,18 @@ export interface AgChartThemeParams { gridLineColor?: CssColor; /** The outer chart padding. */ padding?: PixelSize; + /** + * TODO + * + * Default: Mix of `foregroundColor` and `backgroundColor` + */ + subtleTextColor?: CssColor; + /** + * TODO + * + * Default: `foregroundColor` + */ + textColor?: CssColor; } type ExtendLiteralLeaves = { @@ -117,7 +129,8 @@ type ThemeParamsOperation = | { $eq: [ThemeParamsLeaf, ThemeParamsLeaf] } | { $mul: [ThemeParamsLeaf, ThemeParamsLeaf] } | { $round: [ThemeParamsLeaf] } - | { $rem: [ThemeParamsLeaf] | [ThemeParamsLeaf, ThemeParamsLeaf] }; + | { $rem: [ThemeParamsLeaf] | [ThemeParamsLeaf, ThemeParamsLeaf] } + | { $mix: [ThemeParamsLeaf, ThemeParamsLeaf, ThemeParamsLeaf] }; type ThemeParamsLeaf = ThemeParamsOperation | T; export type WithThemeParams = ExtendLiteralLeaves; From 5f5a14133151a2126a3888b4b7cda08628290c4c Mon Sep 17 00:00:00 2001 From: Laurence Roberts Date: Thu, 30 Jan 2025 14:51:04 +0000 Subject: [PATCH 3/5] AG-11705 Add $ref to $ref and catch circular references --- .../src/chart/themes/chartTheme.ts | 2 +- .../ag-charts-community/src/util/json.test.ts | 23 +++++- packages/ag-charts-community/src/util/json.ts | 75 ++++++++++++++----- 3 files changed, 77 insertions(+), 23 deletions(-) diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts index 2c5106e774..a0946bc805 100644 --- a/packages/ag-charts-community/src/chart/themes/chartTheme.ts +++ b/packages/ag-charts-community/src/chart/themes/chartTheme.ts @@ -462,7 +462,7 @@ export class ChartTheme { fontWeight: 400, gridLineColor: '#e0eaf1', padding: 20, - subtleTextColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.38] }, + subtleTextColor: { $mix: [{ $ref: 'textColor' }, { $ref: 'backgroundColor' }, 0.38] }, textColor: { $ref: 'foregroundColor' }, }; } diff --git a/packages/ag-charts-community/src/util/json.test.ts b/packages/ag-charts-community/src/util/json.test.ts index f9e5d16ff8..5dde65e088 100644 --- a/packages/ag-charts-community/src/util/json.test.ts +++ b/packages/ag-charts-community/src/util/json.test.ts @@ -593,6 +593,25 @@ describe('json module', () => { ]); }); + it('should resolve `$ref` operation on second `$ref` operation', () => { + const source = { a: { $ref: 'first' } }; + jsonResolveOperations(source, { first: { $ref: 'second' }, second: 'hello' }); + expect(source).toEqual({ a: 'hello' }); + }); + + it('should catch circular references', () => { + const source = { a: { $ref: 'first' } }; + jsonResolveOperations(source, { + first: { $ref: 'second' }, + second: { $ref: 'third' }, + third: { $ref: 'first' }, + }); + expect(source).toEqual({ a: undefined }); + expectWarningMessages([ + 'AG Charts - `$ref` json operation failed on [first] at [a], circular reference detected with [second, third, first].', + ]); + }); + it('should resolve `$path` operation', () => { const source = { a: 'parent', @@ -638,7 +657,7 @@ describe('json module', () => { it('should resolve nested operations', () => { const source = { - a: 'parent', + a: { $ref: 'indirectRelative' }, b: { c: 'cousin', }, @@ -653,7 +672,7 @@ describe('json module', () => { }, }, }; - jsonResolveOperations(source, { key: 'hello' }); + jsonResolveOperations(source, { key: 'hello', indirectRelative: { $ref: 'relative' }, relative: 'parent' }); expect(source).toEqual({ a: 'parent', b: { c: 'cousin' }, diff --git a/packages/ag-charts-community/src/util/json.ts b/packages/ag-charts-community/src/util/json.ts index 55f0e8d49e..b6dc336bd9 100644 --- a/packages/ag-charts-community/src/util/json.ts +++ b/packages/ag-charts-community/src/util/json.ts @@ -353,25 +353,13 @@ function jsonResolveVisitorValue( params: P, source: T, path: string[], - modifiedPaths?: Record + modifiedPaths: Record ) { - if (!isPlainObject(value)) { - return value; - } - - const [key, ...otherKeys] = Object.keys(value) as Array; - if (otherKeys.length !== 0 || !operationKeys.has(key)) { - return value; - } + const { operation, values } = getOperation(value); + if (!operation) return value; + modifiedPaths[path.join('.')] = value; - let values = value[key]; - if (isArray(values)) { - values = values.map((v: any) => jsonResolveVisitorValue(v, params, source, path)); - } - - if (modifiedPaths) modifiedPaths[path.join('.')] = value; - - return operations[key](values, params, source, path); + return resolveOperation(operation, values, params, source, path, new Set()); } enum Operation { @@ -388,11 +376,58 @@ enum Operation { Mix = '$mix', } const operationKeys = new Set(Object.values(Operation)); -type OperationFn = (value: string | Array, params: C, source: T, path: string[]) => any; +type OperationFn = ( + value: string | Array, + params: P, + source: T, + path: string[], + referencedParams?: Set +) => any; + +function getOperation(value: unknown) { + if (!isPlainObject(value)) return {}; + const [operation, ...otherKeys] = Object.keys(value) as Array; + if (otherKeys.length !== 0 || !operationKeys.has(operation)) return {}; + return { operation, values: value[operation] }; +} + +function resolveOperation( + operation: Operation, + value: string | Array, + params: P, + source: T, + path: string[], + referencedParams?: Set +): any { + if (isArray(value)) { + value = value.map((v) => { + const { operation: nestedOperation, values } = getOperation(v); + if (!nestedOperation) return v; + return resolveOperation(nestedOperation, values, params, source, path, referencedParams); + }); + } + + return operations[operation](value, params, source, path, referencedParams); +} const operations: Record> = { - $ref: (key, params, _source, path) => { - if (isString(key) && key in params) return params[key]; + $ref: (key, params, source, path, referencedParams) => { + if (isString(key) && key in params) { + const { operation, values } = getOperation(params[key]); + if (operation !== Operation.Ref) { + return params[key]; + } + + if (referencedParams?.has(values)) { + Logger.warnOnce( + `\`$ref\` json operation failed on [${String(key)}] at [${path.join('.')}], circular reference detected with [${[...referencedParams].join(', ')}].` + ); + return; + } + + referencedParams?.add(values); + return operations.$ref(values, params, source, path, referencedParams); + } Logger.warnOnce( `\`$ref\` json operation failed on [${String(key)}] at [${path.join('.')}], expecting one of [${Object.keys(params).join(', ')}].` ); From 10c3bd19f89270426193bb33c2861392049691aa Mon Sep 17 00:00:00 2001 From: Laurence Roberts Date: Fri, 31 Jan 2025 10:25:03 +0000 Subject: [PATCH 4/5] AG-11705 Add doc comments for text color params --- packages/ag-charts-types/src/chart/themeOptions.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ag-charts-types/src/chart/themeOptions.ts b/packages/ag-charts-types/src/chart/themeOptions.ts index a8f4783663..b8f8fe86fe 100644 --- a/packages/ag-charts-types/src/chart/themeOptions.ts +++ b/packages/ag-charts-types/src/chart/themeOptions.ts @@ -98,13 +98,13 @@ export interface AgChartThemeParams { /** The outer chart padding. */ padding?: PixelSize; /** - * TODO + * Color of text and UI elements that should stand out less than the default. * * Default: Mix of `foregroundColor` and `backgroundColor` */ subtleTextColor?: CssColor; /** - * TODO + * Default color for all text. * * Default: `foregroundColor` */ From 9f55ab78968dd44528c71c63eb75394a76f4d5d4 Mon Sep 17 00:00:00 2001 From: Laurence Roberts Date: Fri, 31 Jan 2025 10:25:55 +0000 Subject: [PATCH 5/5] AG-11705 Improve typing of theme resolveThemeOperations() --- packages/ag-charts-community/src/module/optionsModule.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ag-charts-community/src/module/optionsModule.ts b/packages/ag-charts-community/src/module/optionsModule.ts index f206cba191..f67bade969 100644 --- a/packages/ag-charts-community/src/module/optionsModule.ts +++ b/packages/ag-charts-community/src/module/optionsModule.ts @@ -269,8 +269,8 @@ export class ChartOptions { // so we aim to only do this once in the processing flow. processedOptions = deepClone(processedOptions, ChartOptions.OPTIONS_CLONE_OPTS); - const themeParameters = this.getThemeParameters(activeTheme, processedOptions); - this.resolveThemeOperations(themeParameters, themeParameters as any); + const themeParameters = this.getThemeParameters(activeTheme, processedOptions) as AgChartThemeParams; + this.resolveThemeOperations(themeParameters, themeParameters); this.resolveThemeOperations(themeParameters, processedOptions); this.resolveThemeOperations(themeParameters, this.annotationThemes); @@ -295,7 +295,7 @@ export class ChartOptions { this.debug('AgCharts.createOrUpdate() - processed options', processedOptions); - return { activeTheme, processedOptions, defaultAxes, themeParameters: themeParameters as AgChartThemeParams }; + return { activeTheme, processedOptions, defaultAxes, themeParameters }; } diffOptions(other?: ChartOptions): Partial { @@ -464,7 +464,7 @@ export class ChartOptions { return defaultParameters; } - private resolveThemeOperations(params: WithThemeParams, options: T) { + private resolveThemeOperations(params: WithThemeParams, options: object) { const modifiedPaths = jsonResolveOperations(options, params, new Set(['palette', 'data'])); this.debug('resolveTheme()', modifiedPaths); }