Added new ag-charts themes

reporter/ControlManifest.Input.xml

@@ -9,6 +9,9 @@
 			<value name="PowerApps" display-name-key="PowerAppsTheme">PowerAppsTheme</value>
 			<value name="Fluent" display-name-key="FluentTheme">FluentTheme</value>
 			<value name="Simple" display-name-key="SimpleTheme">SimpleTheme</value>
+			<value name="Material" display-name-key="MaterialTheme">MaterialTheme</value>
+			<value name="Sheets" display-name-key="SheetsTheme">SheetsTheme</value>
+			<value name="Polychroma" display-name-key="PolychromaTheme">PolychromaTheme</value>
 			<value name="Custom" display-name-key="CustomTheme">CustomTheme</value>
 		</property>
 		<property name="customTheme" display-name-key="Custom Theme" description-key="Provide a comma separated list of HEX colors, e.g. #FF0000,#00FF00,#0000FF" of-type="SingleLine.Text" usage="input" required="false" />

reporter/component/Charts/Pie.tsx

@@ -11,13 +11,16 @@ export interface IPieProps extends IChartBaseProps {
 export const Pie = React.memo<IPieProps>(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 }			
 		},
 	];
 

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

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: [],
 	},

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,
+};

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 = {
 				},
 			},
 		},
-	},	
+	},
 };

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,
+};

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,
+};

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

reporter/index.ts

@@ -28,8 +28,6 @@ export class Reporter implements ComponentFramework.ReactControl<IInputs, IOutpu
 	): void {
 		this.notifyOutputChanged = notifyOutputChanged;
 
-		const { theme, customTheme } = context.parameters;
-		this.theme = Themeing.getTheme(theme?.raw, customTheme?.raw);
 	}
 
 	/**
@@ -40,6 +38,9 @@ export class Reporter implements ComponentFramework.ReactControl<IInputs, IOutpu
 	public updateView(context: ComponentFramework.Context<IInputs>): 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 };
 

reporter/types/ITheme.ts

@@ -1 +1 @@
-export type ITheme = 'PowerAppsTheme' | 'FluentTheme' | 'SimpleTheme' | 'CustomTheme';
+export type ITheme = 'PowerAppsTheme' | 'FluentTheme' | 'SimpleTheme' | 'CustomTheme' | 'MaterialTheme' | 'PolychromaTheme' | 'SheetsTheme';