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';