Bugfix KNOWAGE-8233

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/ChartWidget/common/ChartColorSettings.vue

@@ -75,13 +75,27 @@ export default defineComponent({
     },
     watch: {
         widgetModel() {
-            this.widget = this.widgetModel
+            this.loadWidgetModel()
         }
     },
     created() {
-        this.widget = this.widgetModel
+        this.setEventListeners()
+        this.loadWidgetModel()
+    },
+    unmounted() {
+        this.removeEventListeners()
     },
     methods: {
+        setEventListeners() {
+            emitter.on('chartTypeChanged', this.loadWidgetModel)
+        },
+        removeEventListeners() {
+            emitter.off('chartTypeChanged', this.loadWidgetModel)
+        },
+        loadWidgetModel() {
+            this.widget = this.widgetModel
+            if (this.widget.settings.chartModel?.model?.colors) this.widget.settings.chart.colors = [...this.widget.settings.chartModel.model.colors]
+        },
         toggleColorPicker(index) {
             this.colorPickerVisible = !this.colorPickerVisible
             this.editIndex = index

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/ChartWidget/highcharts/axis/HighchartsAxisSettingsDescriptor.json

@@ -1,18 +1,4 @@
 {
-    "axisTitleAlignOptions": [
-        {
-            "label": "common.low",
-            "value": "low"
-        },
-        {
-            "label": "common.center",
-            "value": "middle"
-        },
-        {
-            "label": "common.high",
-            "value": "high"
-        }
-    ],
     "gridLineTypeOptions": [
         {
             "label": "dashboard.widgetEditor.borders.solid",
@@ -43,5 +29,33 @@
         {
             "type": "color"
         }
+    ],
+    "xAxisTitleAlignOptions": [
+        {
+            "label": "common.left",
+            "value": "low"
+        },
+        {
+            "label": "common.center",
+            "value": "middle"
+        },
+        {
+            "label": "common.right",
+            "value": "high"
+        }
+    ],
+    "yAxisTitleAlignOptions": [
+        {
+            "label": "common.low",
+            "value": "low"
+        },
+        {
+            "label": "common.center",
+            "value": "middle"
+        },
+        {
+            "label": "common.high",
+            "value": "high"
+        }
     ]
 }

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/ChartWidget/highcharts/axis/HighchartsAxisTitleSettings.vue

@@ -6,10 +6,10 @@
         </div>
         <div class="p-col-12 p-md-6 p-d-flex p-flex-column">
             <label class="kn-material-input-label p-mr-2">{{ $t('common.align') }}</label>
-            <Dropdown v-model="axisModel.title.align" class="kn-material-input" :options="descriptor.axisTitleAlignOptions" option-value="value" @change="modelChanged">
+            <Dropdown v-model="axisModel.title.align" class="kn-material-input" :options="axisAlignOptions" option-value="value" @change="modelChanged">
                 <template #value="slotProps">
                     <div>
-                        <span>{{ getTranslatedLabel(slotProps.value, descriptor.axisTitleAlignOptions, $t) }}</span>
+                        <span>{{ getTranslatedLabel(slotProps.value, axisAlignOptions, $t) }}</span>
                     </div>
                 </template>
                 <template #option="slotProps">
@@ -44,7 +44,7 @@ export default defineComponent({
             descriptor,
             settingsDescriptor,
             axisModel: null as any,
-            toolbarModel: {} as { 'font-family': string; 'font-size': string; 'font-weight': string; color: string },
+            toolbarModel: {} as { 'font-style': string; 'font-family': string; 'font-size': string; 'font-weight': string; color: string },
             getTranslatedLabel
         }
     },
@@ -54,6 +54,9 @@ export default defineComponent({
         },
         titleDisabled() {
             return !this.axisModel || !this.axisModel.title || !this.axisModel.title.enabled
+        },
+        axisAlignOptions() {
+            return this.axis === 'x' ? descriptor.xAxisTitleAlignOptions : descriptor.yAxisTitleAlignOptions
         }
     },
     created() {
@@ -66,15 +69,16 @@ export default defineComponent({
             this.loadToolbarModel()
         },
         loadToolbarModel() {
-            if (this.axisModel && this.axisModel.title) this.toolbarModel = { 'font-family': this.axisModel.title.style.fontFamily, 'font-size': this.axisModel.title.style.fontSize, 'font-weight': this.axisModel.title.style.fontWeight, color: this.axisModel.title.style.color }
+            if (this.axisModel && this.axisModel.title)
+                this.toolbarModel = { 'font-style': this.axisModel.title.style.fontStyle, 'font-family': this.axisModel.title.style.fontFamily, 'font-size': this.axisModel.title.style.fontSize, 'font-weight': this.axisModel.title.style.fontWeight, color: this.axisModel.title.style.color }
         },
         modelChanged() {
             emitter.emit('refreshChart', this.widgetModel.id)
         },
         onStyleToolbarChange(model: IWidgetStyleToolbarModel) {
             if (!this.axisModel || !this.axisModel.title) return
-            this.toolbarModel = { 'font-family': model['font-family'] ?? '', 'font-size': model['font-size'] ?? '14px', 'font-weight': model['font-weight'] ?? '', color: model.color ?? '' }
-            this.axisModel.title.style = { color: this.toolbarModel.color ?? '', fontSize: this.toolbarModel['font-size'] ?? '14px', fontFamily: this.toolbarModel['font-family'] ?? '', fontWeight: this.toolbarModel['font-weight'] ?? '' }
+            this.toolbarModel = { 'font-style': model['font-style'] ?? '', 'font-family': model['font-family'] ?? '', 'font-size': model['font-size'] ?? '14px', 'font-weight': model['font-weight'] ?? '', color: model.color ?? '' }
+            this.axisModel.title.style = { fontStyle: this.toolbarModel['font-style'] ?? '', color: this.toolbarModel.color ?? '', fontSize: this.toolbarModel['font-size'] ?? '14px', fontFamily: this.toolbarModel['font-family'] ?? '', fontWeight: this.toolbarModel['font-weight'] ?? '' }
             this.modelChanged()
         }
     }

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/common/style/WidgetEditorThemePicker.vue

@@ -2,7 +2,7 @@
     <div v-if="widget?.settings?.style" class="p-grid p-p-4">
         <div class="p-col-12 p-d-flex p-flex-column p-pb-2">
             <label class="kn-material-input-label">{{ $t('dashboard.widgetEditor.widgetTheme') }}</label>
-            <Dropdown v-model="widget.settings.style.themeName" class="kn-material-input kn-full-width" :options="themes" option-label="themeName" option-value="themeName" @change="onThemeSelected"> </Dropdown>
+            <Dropdown v-model="widget.settings.style.themeName" class="kn-material-input kn-full-width" :options="themes" option-label="themeName" option-value="themeName" show-clear @change="onThemeSelected"> </Dropdown>
         </div>
     </div>
 </template>

src/modules/documentExecution/dashboard/widget/WidgetEditor/helpers/chartWidget/highcharts/HighchartsDefaultValuesDescriptor.json

@@ -140,6 +140,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""
@@ -175,6 +176,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""
@@ -244,6 +246,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""
@@ -271,6 +274,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""
@@ -350,6 +354,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""
@@ -384,6 +389,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""
@@ -445,6 +451,7 @@
                 "color": "",
                 "fontFamily": "",
                 "fontSize": "14px",
+                "fontStyle": "",
                 "fontWeight": ""
             },
             "text": ""