Colorpicker to choose colors for profile bars

src/GamificationMediator.ts

@@ -15,4 +15,8 @@ export interface GamificationMediator {
 	updateProfileLeaf(): void;
 
 	updateProfileLeafPic(): void;
+
+	updateChartWeeklyColorReceived(value: string): void
+
+	updateChartWeeklyColorToGo(value: string): void
 }

src/GamificationMediatorImpl.ts

@@ -24,6 +24,14 @@ export class GamificationMediatorImpl implements GamificationMediator {
 		this.plugin.profileLeafUpdatePicture();
 	}
 
+	updateChartWeeklyColorReceived(value: string){
+		this.plugin.updateChartWeeklyColorReceived(value);
+	}
+
+	updateChartWeeklyColorToGo(value: string){
+		this.plugin.updateChartWeeklyColorToGo(value);
+	}
+
 	getSettingString(key: string): string {
 		const decryptedValue = this.settings[key] !== undefined ? this.settings[key].toString() : ''
 		//if(debugLogs) console.debug(`String: decrypted ${key} is ${decryptString(decryptedValue)}`)

src/main.ts

@@ -422,6 +422,8 @@ export default class gamification extends Plugin {
 		this.profileLeafUpdateDailyNotes(pointsForDailyChallenge * (this.mediator.getSettingNumber('badgeBoosterFactor') + this.mediator.getSettingNumber('streakbooster')) + 'EP | ' + this.mediator.getSettingNumber('dailyNoteCreationTask') + '/2')
 		this.profileLeafUpdateWeeklyNotes(pointsForWeeklyChallenge * (this.mediator.getSettingNumber('badgeBoosterFactor') + this.mediator.getSettingNumber('streakbooster')) + 'EP | ' + this.mediator.getSettingNumber('weeklyNoteCreationTask') + '/7')
 		this.profileLeafUpdateWeeklyChart(this.mediator.getSettingNumber('weeklyNoteCreationTask'));
+		this.updateChartWeeklyColorReceived(this.mediator.getSettingString('colorBarReceived'));
+		this.updateChartWeeklyColorToGo(this.mediator.getSettingString('colorBarToGo'));
 		this.profileLeafUpdateuUdateMajurityList()
 	}
 
@@ -474,6 +476,50 @@ export default class gamification extends Plugin {
 		}
 	}
 
+	async updateChartWeeklyColorReceived(value: string) {
+		const { workspace } = this.app;
+		let leaf = null;
+		const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_GAMIFICATION_PROFILE);
+
+		if (leaves.length > 0) {
+			leaf = leaves[0];
+		} else {
+			leaf = workspace.getRightLeaf(false);
+			// @ts-ignore
+			await leaf.setViewState({ type: VIEW_TYPE_GAMIFICATION_PROFILE, active: true });
+		}
+
+		// @ts-ignore
+		const view = leaf.view;
+		if (view instanceof GamifiedPkmProfileView) {
+			view.updateChartWeeklyColorReceived(value)
+		}else {
+			console.log('gamified-pkm-profile is not loaded yet.');
+		}
+	}
+
+	async updateChartWeeklyColorToGo(value: string) {
+		const { workspace } = this.app;
+		let leaf = null;
+		const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_GAMIFICATION_PROFILE);
+
+		if (leaves.length > 0) {
+			leaf = leaves[0];
+		} else {
+			leaf = workspace.getRightLeaf(false);
+			// @ts-ignore
+			await leaf.setViewState({ type: VIEW_TYPE_GAMIFICATION_PROFILE, active: true });
+		}
+
+		// @ts-ignore
+		const view = leaf.view;
+		if (view instanceof GamifiedPkmProfileView) {
+			view.updateChartWeeklyColorToGo(value)
+		}else {
+			console.log('gamified-pkm-profile is not loaded yet.');
+		}
+	}
+
 	async profileLeafUpdatePicture() {
 		const { workspace } = this.app;
 		let leaf = null;

src/settings.ts

@@ -97,7 +97,9 @@ export const defaultSettings: Partial<ISettings> = {
   autoRateOnChangeDelayTime: "U2FsdGVkX1/RiGtHePLD9og+g+w+DL31vVK02vCSkQQ=",
   previousRelease: "U2FsdGVkX1+z55uCXdMxdGtgg5oBmTGQPDroIP0PDIk=",
   showReleaseNotes: "U2FsdGVkX1+7lWe/h95uqzgl27JBGW2iki7sBwk44YQ=",
-  avatarPicture: "U2FsdGVkX18zJk4m8pNboYxTAVmT5KytaqxAsTw/50I="
+  avatarPicture: "U2FsdGVkX18zJk4m8pNboYxTAVmT5KytaqxAsTw/50I=",
+  colorBarReceived: "U2FsdGVkX19GLvJtvLLriVKTDDLMVt+P7ysHKoOcIb0=",
+  colorBarToGo: "U2FsdGVkX1/8uFFZ/kZeDb2YWMKM8h8rzssbPWBGZ7c="
 };
 
 export interface DynamicSettings {
@@ -194,6 +196,8 @@ export interface ISettings extends DynamicSettings{
   previousRelease: string
   showReleaseNotes: string
   avatarPicture: string
+  colorBarReceived: string
+  colorBarToGo: string
 	//[key: string]: number | string | boolean | MomentInput;
 }
 
@@ -291,6 +295,8 @@ export class GamificationPluginSettings extends PluginSettingTab {
 	public previousRelease: string;
 	public showReleaseNotes: string;
 	public avatarPicture: string;
+	public colorBarReceived: string;
+	public colorBarToGo: string;
 
 	constructor(app: App, plugin: gamification, mediator: GamificationMediator) {
 		super(app, plugin as any);
@@ -347,6 +353,33 @@ export class GamificationPluginSettings extends PluginSettingTab {
 					}),
 			);
 
+		new Setting(containerEl)
+			.setName('color bar received')
+			.addColorPicker((colorPicker) =>
+				colorPicker
+					.setValue(this.mediator.getSettingString('colorBarReceived'))
+					.onChange(async (value) => {
+						console.log(`colorBarReceived: ${value}`)
+						this.mediator.setSettingString('colorBarReceived', value);
+						await this.mediator.saveSettings();
+						this.mediator.updateChartWeeklyColorReceived(value);
+					}),
+			);
+
+		new Setting(containerEl)
+			.setName('color bar to go')
+			.addColorPicker((colorPicker) =>
+				colorPicker
+					.setValue(this.mediator.getSettingString('colorBarToGo'))
+					//.setValue('#ff0000')
+					.onChange(async (value) => {
+						console.log(`colorBarToGo: ${value}`)
+						this.mediator.setSettingString('colorBarToGo', value);
+						await this.mediator.saveSettings();
+						this.mediator.updateChartWeeklyColorToGo(value);
+					}),
+			);
+
 		new Setting(containerEl)
 			.setName('Path to profile picture')
 			.setDesc('You can point here to a picture you would like to use as avatar. Include your vault path.')

src/view.ts

@@ -150,17 +150,13 @@ export class GamifiedPkmProfileView extends ItemView {
 					{
 						label: 'Points Reached',
 						data: [0], // Data for points reached
-						//backgroundColor: 'rgba(54, 162, 235, 0.5)',
-						//borderColor: 'rgba(54, 162, 235, 1)',
 						backgroundColor: 'rgba(0, 0, 0, 0.5)',
 						borderColor: 'rgba(0, 0, 0, 1)',
 						borderWidth: 1
 					},
 					{
 						label: 'Points to Earn to Level Up',
 						data: [0], // Data for points to earn to level up
-						//backgroundColor: 'rgba(255, 99, 132, 0.5)',
-						//borderColor: 'rgba(255, 99, 132, 1)',
 						backgroundColor: 'rgba(255, 255, 255, 0.5)',
 						borderColor: 'rgba(255, 255, 255, 0.5)',
 						borderWidth: 1
@@ -320,6 +316,32 @@ export class GamifiedPkmProfileView extends ItemView {
 		}
 	}
 
+	updateChartWeeklyColorReceived(colorReceived: string) {
+		if (this.chartWeekly) {
+			this.chartWeekly.data.datasets[0].backgroundColor = colorReceived;
+			this.chartWeekly.data.datasets[0].borderColor = colorReceived;
+			this.chartWeekly.update();
+		}
+		if (this.chart) {
+			this.chart.data.datasets[0].backgroundColor = colorReceived;
+			this.chart.data.datasets[0].borderColor = colorReceived;
+			this.chart.update();
+		}
+	}
+
+	updateChartWeeklyColorToGo(colorToGo: string) {
+		if (this.chartWeekly) {
+			this.chartWeekly.data.datasets[1].backgroundColor = colorToGo;
+			this.chartWeekly.data.datasets[1].borderColor = colorToGo;
+			this.chartWeekly.update();
+		}
+		if (this.chart) {
+			this.chart.data.datasets[1].backgroundColor = colorToGo;
+			this.chart.data.datasets[1].borderColor = colorToGo;
+			this.chart.update();
+		}
+	}
+
 	updateChart(newPointsReached: number, newPointsToLevelUp: number) {
 		if (this.chart) {
 			this.chart.data.datasets[0].data = [newPointsReached];