From 4ef7d257f9a197b044005538f632549af39999f8 Mon Sep 17 00:00:00 2001 From: Martin Laukkanen Date: Fri, 16 Feb 2024 13:20:49 +0100 Subject: [PATCH] Added new ag-charts themes --- reporter/ControlManifest.Input.xml | 3 + reporter/component/Charts/Pie.tsx | 5 +- reporter/component/Themeing.ts | 22 +++++- reporter/component/Themes/FluentTheme.ts | 73 ++++++++++++++------ reporter/component/Themes/MaterialTheme.ts | 7 ++ reporter/component/Themes/Overrides.ts | 6 +- reporter/component/Themes/PolychromaTheme.ts | 7 ++ reporter/component/Themes/SheetsTheme.ts | 7 ++ reporter/component/Themes/index.ts | 5 +- reporter/index.ts | 5 +- reporter/types/ITheme.ts | 2 +- 11 files changed, 111 insertions(+), 31 deletions(-) create mode 100644 reporter/component/Themes/MaterialTheme.ts create mode 100644 reporter/component/Themes/PolychromaTheme.ts create mode 100644 reporter/component/Themes/SheetsTheme.ts diff --git a/reporter/ControlManifest.Input.xml b/reporter/ControlManifest.Input.xml index 6cdbd0b..420f8fd 100644 --- a/reporter/ControlManifest.Input.xml +++ b/reporter/ControlManifest.Input.xml @@ -9,6 +9,9 @@ PowerAppsTheme FluentTheme SimpleTheme + MaterialTheme + SheetsTheme + PolychromaTheme CustomTheme diff --git a/reporter/component/Charts/Pie.tsx b/reporter/component/Charts/Pie.tsx index d035581..480ed4b 100644 --- a/reporter/component/Charts/Pie.tsx +++ b/reporter/component/Charts/Pie.tsx @@ -11,13 +11,16 @@ export interface IPieProps extends IChartBaseProps { export const Pie = React.memo(function Pie(props: IPieProps) { const { axes, innerRadius } = props; + // Adjust font size of callout based on dataset + const calloutLabelSize = props.data.length > 8 ? 10 : 12; + const series: AgPieSeriesOptions[] = [ { type: 'pie', calloutLabelKey: axes.categories[0].label, angleKey: axes.series[0].field, innerRadiusRatio: innerRadius, - + calloutLabel: { fontSize: calloutLabelSize } }, ]; diff --git a/reporter/component/Themeing.ts b/reporter/component/Themeing.ts index 5aefce8..d2acce4 100644 --- a/reporter/component/Themeing.ts +++ b/reporter/component/Themeing.ts @@ -1,6 +1,14 @@ import { AgChartTheme } from 'ag-charts-community'; import tinycolor from 'tinycolor2'; -import { FluentTheme, Overrides, PowerAppsTheme, SimpleTheme } from './Themes'; +import { + FluentTheme, + MaterialTheme, + Overrides, + PolychromaTheme, + PowerAppsTheme, + SheetsTheme, + SimpleTheme, +} from './Themes'; import { ITheme } from '../types'; export class Themeing { @@ -21,7 +29,8 @@ export class Themeing { return chartTheme; } - private static selectChartTheme(theme: string | null, customTheme: string | null): AgChartTheme { + private static selectChartTheme(theme: ITheme | null, customTheme: string | null): AgChartTheme { + // return PolychromaTheme; switch (theme) { case 'CustomTheme': const chartTheme: AgChartTheme = { @@ -45,6 +54,15 @@ export class Themeing { case 'SimpleTheme': return SimpleTheme; + case 'MaterialTheme': + return MaterialTheme; + + case 'PolychromaTheme': + return PolychromaTheme; + + case 'SheetsTheme': + return SheetsTheme; + default: return Themeing.defaultTheme; } diff --git a/reporter/component/Themes/FluentTheme.ts b/reporter/component/Themes/FluentTheme.ts index cad8b09..9e1c456 100644 --- a/reporter/component/Themes/FluentTheme.ts +++ b/reporter/component/Themes/FluentTheme.ts @@ -2,32 +2,63 @@ import { AgChartTheme } from 'ag-charts-community'; export const FluentTheme: AgChartTheme = { baseTheme: 'ag-default', - palette: { + palette: { fills: [ - '#0f6cbd', - '#0048a7', - '#002050', + // Selected colors in order from the fluent color wheel + '#0063B1', + // '#0078D7', + + '#0099BC', + // '#2D7D9A', + '#00B7C3', + // '#038387', '#00B294', - '#008272', - '#004B50', - '#BAD80A', + // '#018574', + '#00CC6A', + // '#10893E', + '#107C10', - '#004B1C', + // '#498205', + '#486860', + // '#567C73', + // '#515C6B', + // '#68768A', + // '#5D5A58', + // '#7A7574', + // '#767676', + + // '#4C4A48', + // '#69797E', + // '#4A5459', + '#647C64', + // '#525E54', + '#847545', + // '#7E735F', + '#FFB900', - '#FFF100', - '#D83B01', - '#EA4300', - '#FF8C00', - '#A80000', - '#E81123', + // '#498205', + '#F7630C', + // '#CA5010', + '#DA3B01', + // '#EF6950', + '#D13438', + // '#FF4343', + + '#E74856', + // '#E81123', + '#EA005E', + // '#C30052', '#E3008C', - '#B4009E', - '#5C005C', - '#B4A0FF', - '#5C2D91', - '#32145A', - '#00BCF2', - '#00188F', + // '#BF0077', + '#C239B3', + // '#9A0089', + + '#881798', + // '#B146C2', + '#744DA9', + // '#8764B8', + '#6B69D6', + // '#8E8CD8', ], strokes: [], }, diff --git a/reporter/component/Themes/MaterialTheme.ts b/reporter/component/Themes/MaterialTheme.ts new file mode 100644 index 0000000..dd5ecef --- /dev/null +++ b/reporter/component/Themes/MaterialTheme.ts @@ -0,0 +1,7 @@ +import { AgChartTheme } from 'ag-charts-community'; +import { Overrides } from './Overrides'; + +export const MaterialTheme: AgChartTheme = { + baseTheme: 'ag-material', + overrides: Overrides, +}; diff --git a/reporter/component/Themes/Overrides.ts b/reporter/component/Themes/Overrides.ts index b29f36b..91c68d1 100644 --- a/reporter/component/Themes/Overrides.ts +++ b/reporter/component/Themes/Overrides.ts @@ -39,7 +39,7 @@ export const Overrides: AgChartThemeOverrides = { }, }, }, - }, + }, area: { series: { highlightStyle: { @@ -48,7 +48,7 @@ export const Overrides: AgChartThemeOverrides = { strokeWidth: 2, }, }, - }, + }, }, line: { series: { @@ -60,5 +60,5 @@ export const Overrides: AgChartThemeOverrides = { }, }, }, - }, + }, }; diff --git a/reporter/component/Themes/PolychromaTheme.ts b/reporter/component/Themes/PolychromaTheme.ts new file mode 100644 index 0000000..a1c4ca0 --- /dev/null +++ b/reporter/component/Themes/PolychromaTheme.ts @@ -0,0 +1,7 @@ +import { AgChartTheme } from 'ag-charts-community'; +import { Overrides } from './Overrides'; + +export const PolychromaTheme: AgChartTheme = { + baseTheme: 'ag-polychroma', + overrides: Overrides, +}; diff --git a/reporter/component/Themes/SheetsTheme.ts b/reporter/component/Themes/SheetsTheme.ts new file mode 100644 index 0000000..326fb89 --- /dev/null +++ b/reporter/component/Themes/SheetsTheme.ts @@ -0,0 +1,7 @@ +import { AgChartTheme } from 'ag-charts-community'; +import { Overrides } from './Overrides'; + +export const SheetsTheme: AgChartTheme = { + baseTheme: 'ag-sheets', + overrides: Overrides, +}; diff --git a/reporter/component/Themes/index.ts b/reporter/component/Themes/index.ts index 9d4358f..a708e14 100644 --- a/reporter/component/Themes/index.ts +++ b/reporter/component/Themes/index.ts @@ -1,4 +1,7 @@ +export * from './Overrides'; export * from './SimpleTheme'; export * from './FluentTheme'; export * from './PowerAppsTheme'; -export * from './Overrides'; +export * from './MaterialTheme'; +export * from './PolychromaTheme'; +export * from './SheetsTheme'; \ No newline at end of file diff --git a/reporter/index.ts b/reporter/index.ts index 9334270..830ea3e 100644 --- a/reporter/index.ts +++ b/reporter/index.ts @@ -28,8 +28,6 @@ export class Reporter implements ComponentFramework.ReactControl): React.ReactElement { // eslint-disable-next-line no-underscore-dangle const controlProps: IControlDescription = (context.navigation as any)._customControlProperties?.descriptor; + + const { theme, customTheme } = context.parameters; + this.theme = Themeing.getTheme(theme?.raw, customTheme?.raw); const props: IAppProps = { context, controlProps, theme: this.theme }; diff --git a/reporter/types/ITheme.ts b/reporter/types/ITheme.ts index 5b0d543..4d716d4 100644 --- a/reporter/types/ITheme.ts +++ b/reporter/types/ITheme.ts @@ -1 +1 @@ -export type ITheme = 'PowerAppsTheme' | 'FluentTheme' | 'SimpleTheme' | 'CustomTheme'; +export type ITheme = 'PowerAppsTheme' | 'FluentTheme' | 'SimpleTheme' | 'CustomTheme' | 'MaterialTheme' | 'PolychromaTheme' | 'SheetsTheme';