Output Settings Primary Color Picker

packages/client/hmi-client/src/components/widgets/tera-chart-settings-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="chart-settings-item">
+	<div class="chart-settings-item" :style="{ 'border-left': primaryColor }">
 		<h6>{{ settings.name }}</h6>
 		<div class="btn-group">
 			<Button icon="pi pi-cog" rounded text @click="$emit('open')" />
@@ -10,14 +10,17 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button';
+import { computed } from 'vue';
 
-defineProps({
+const props = defineProps({
 	settings: {
 		type: Object,
 		default: () => ({})
 	}
 });
 defineEmits(['open', 'remove']);
+
+const primaryColor = computed(() => (props.settings.primaryColor ? `4px solid ${props.settings.primaryColor}` : ''));
 </script>
 
 <style scoped>

packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue

@@ -43,14 +43,18 @@
 						/>
 					</div>
 				</div>
+				<section v-if="activeSettings.type !== 'error-distribution'">
+					<h6>Color Picker</h6>
+					<input type="color" :value="primaryColor" @change="onColorChange($event)" />
+				</section>
 			</div>
 		</div>
 	</transition>
 </template>
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Button from 'primevue/button';
 import { ChartSetting } from '@/types/common';
 import { ChartAnnotation } from '@/types/Types';
@@ -69,7 +73,13 @@ const props = defineProps<{
 	generateAnnotation?: (setting: ChartSetting, query: string) => Promise<ChartAnnotation | null>;
 }>();
 
-const emit = defineEmits(['close', 'update-settings-scale', 'delete-annotation', 'create-annotation']);
+const emit = defineEmits([
+	'close',
+	'update-settings-scale',
+	'delete-annotation',
+	'create-annotation',
+	'update-settings-color'
+]);
 
 const useLog = computed(() => props.activeSettings?.scale === 'log');
 
@@ -86,6 +96,12 @@ const chartAnnotations = computed(() => {
 const isGeneratingAnnotation = ref(false);
 const generateAnnotationQuery = ref<string>('');
 const showAnnotationInput = ref<Boolean>(false);
+const primaryColor = ref(props.activeSettings?.primaryColor ?? '#1B8073');
+
+const onColorChange = (event) => {
+	primaryColor.value = event.target?.value;
+	emit('update-settings-color', event.target?.value);
+};
 
 const createAnnotation = async () => {
 	if (props.generateAnnotation === undefined || props.activeSettings === null) {
@@ -105,6 +121,15 @@ const cancelGenerateAnnotation = () => {
 	generateAnnotationQuery.value = '';
 	showAnnotationInput.value = false;
 };
+
+watch(
+	() => props.activeSettings,
+	() => {
+		if (props.activeSettings?.primaryColor) {
+			primaryColor.value = props.activeSettings.primaryColor;
+		}
+	}
+);
 </script>
 
 <style scoped>

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue

@@ -376,6 +376,7 @@
 						:active-settings="activeChartSettings"
 						:generate-annotation="generateAnnotation"
 						@delete-annotation="deleteAnnotation"
+						@update-settings-color="onColorChange"
 						@close="activeChartSettings = null"
 					/>
 				</template>
@@ -757,6 +758,7 @@ const {
 	comparisonChartsSettingsSelection,
 	removeChartSettings,
 	updateChartSettings,
+	updateChartPrimaryColor,
 	addComparisonChartSettings
 } = useChartSettings(props, emit);
 
@@ -1018,6 +1020,10 @@ const getConfiguredModelConfig = async () => {
 	}
 };
 
+const onColorChange = (color: string) => {
+	if (activeChartSettings.value) updateChartPrimaryColor(activeChartSettings.value, color);
+};
+
 onMounted(async () => {
 	initialize();
 });

packages/client/hmi-client/src/composables/useChartSettings.ts

@@ -101,6 +101,19 @@ export function useChartSettings(
 		});
 	};
 
+	const updateChartPrimaryColor = (settings: ChartSetting, color: string) => {
+		const index = chartSettings.value.findIndex((chart) => chart.id === settings.id);
+		if (index !== -1) {
+			const charts = cloneDeep(chartSettings.value);
+			charts[index].primaryColor = color;
+
+			emit('update-state', {
+				...props.node.state,
+				chartSettings: charts
+			});
+		}
+	};
+
 	return {
 		chartSettings,
 		activeChartSettings,
@@ -114,6 +127,7 @@ export function useChartSettings(
 		selectedSensitivityChartSettings,
 		removeChartSettings,
 		updateChartSettings,
+		updateChartPrimaryColor,
 		updateChartSettingsScale,
 		addComparisonChartSettings,
 		updateEnsembleVariableSettingOption

packages/client/hmi-client/src/composables/useCharts.ts

@@ -133,7 +133,6 @@ export function useCharts(
 		showBaseLines = false
 	) => {
 		const ensembleVarName = setting.selectedVariables[0];
-
 		const options: ForecastChartOptions = {
 			title: getModelConfigName(<ModelConfiguration[]>modelConfig?.value ?? [], modelConfigId) || ensembleVarName,
 			legend: true,
@@ -143,7 +142,7 @@ export function useCharts(
 			xAxisTitle: '',
 			yAxisTitle: '',
 			autosize: AUTOSIZE.FIT,
-			colorscheme: multiVariable ? CATEGORICAL_SCHEME : [BASE_GREY, PRIMARY_COLOR]
+			colorscheme: multiVariable ? CATEGORICAL_SCHEME : [BASE_GREY, setting.primaryColor ?? PRIMARY_COLOR]
 		};
 
 		const variables: string[] = [];
@@ -200,7 +199,7 @@ export function useCharts(
 			xAxisTitle: getUnit('_time') || 'Time',
 			yAxisTitle: _.uniq(variables.map(getUnit).filter((v) => !!v)).join(',') || '',
 			dateOptions,
-			colorscheme: [BASE_GREY, PRIMARY_COLOR],
+			colorscheme: [BASE_GREY, setting.primaryColor ?? PRIMARY_COLOR],
 			scale: setting.scale
 		};
 
@@ -588,7 +587,7 @@ export function useCharts(
 					maxBins: 10,
 					variables: [
 						{ field: beforeFieldName, label: labelBefore, width: 54, color: BASE_GREY },
-						{ field: fieldName, label: labelAfter, width: 24, color: PRIMARY_COLOR }
+						{ field: fieldName, label: labelAfter, width: 24, color: setting.primaryColor ?? PRIMARY_COLOR }
 					]
 				});
 				const toDisplayNumber = (num?: number) => (num ? displayNumber(num.toString()) : '');

packages/client/hmi-client/src/types/common.ts

@@ -208,6 +208,7 @@ export interface ChartSettingBase {
 	name: string;
 	selectedVariables: string[];
 	type: ChartSettingType;
+	primaryColor?: string;
 	scale?: string;
 }