fix(color-coded-heatmap): apply missing validation planning

Signed-off-by: samuel.park <samuel.park@megazone.com>
cloudforet-io · Jan 6, 2025 · 69ccd0b · 69ccd0b
1 parent 307c620
commit 69ccd0b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 6 deletions.
diff --git a/...web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts b/...web/src/common/modules/widgets/_widget-field-value-manager/constant/validator-registry.ts
@@ -50,11 +50,22 @@ export const widgetValidatorRegistry: WidgetValidatorRegistry = {
         }
         return !!fieldValue.data;
     },
-    formatRules: (fieldValue: FormatRulesValue, widgetConfig) => {
+    formatRules: (fieldValue: FormatRulesValue, widgetConfig, allValueMap) => {
         const _fieldsSchema = integrateFieldsSchema(widgetConfig.requiredFieldsSchema, widgetConfig.optionalFieldsSchema);
         const formatRulesOptions = (_fieldsSchema.formatRules?.options ?? {}) as FormatRulesOptions;
         const type = formatRulesOptions.formatRulesType;
 
+        if (formatRulesOptions.useField) {
+            if (formatRulesOptions.dependentField) {
+                const dependentValue: string|string[]|undefined = allValueMap?.[formatRulesOptions.dependentField]?.value?.data;
+                if (!dependentValue) return !!fieldValue.field;
+                if (Array.isArray(dependentValue)) {
+                    return !dependentValue.includes(fieldValue.field);
+                }
+                return dependentValue !== fieldValue.field;
+            }
+            return !!fieldValue.field;
+        }
         if (type === FORMAT_RULE_TYPE.textThreshold) {
             return fieldValue.rules.every((d) => !!d.text && !!d.color);
         }
@@ -64,9 +75,6 @@ export const widgetValidatorRegistry: WidgetValidatorRegistry = {
         if (type === FORMAT_RULE_TYPE.textNumberThreshold) {
             return fieldValue.rules.every((d) => !!d.text && !!d.number && !!d.color);
         }
-        if (formatRulesOptions.useField) {
-            return !!fieldValue.field;
-        }
         return true;
     },
     categoryBy: (fieldValue: CategoryByValue, widgetConfig) => {

diff --git a/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts b/apps/web/src/common/modules/widgets/_widget-field-value-manager/index.ts
@@ -48,7 +48,6 @@ export default class WidgetFieldValueManager {
         dataTable: PublicDataTableModel|PrivateDataTableModel,
         originData: WidgetFieldValueMap,
     ) {
-        console.debug('WidgetFieldValueManager.constructor()', widgetConfig, dataTable, originData);
         this.widgetConfig = widgetConfig;
         this.dataTable = dataTable;
         this.widgetInvalid = !dataTable;

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
@@ -38,6 +38,19 @@ const state = reactive({
     fieldValue: computed<FormatRulesValue>(() => props.fieldManager.data[FIELD_KEY].value),
     type: computed<FormatRulesType>(() => props.widgetFieldSchema?.options?.formatRulesType as FormatRulesType),
     invalid: computed(() => !validator(state.fieldValue, props.widgetConfig)),
+    fieldInvalid: computed(() => {
+        if (!props.widgetFieldSchema?.options?.useField) return false;
+        if (state.fieldValue.field === undefined) return true;
+        const dependentField = props.widgetFieldSchema?.options?.dependentField;
+        const dependentValue: string|string[]|undefined = props.fieldManager.data[dependentField]?.value?.data;
+        if (dependentField && dependentValue) {
+            if (Array.isArray(dependentValue)) {
+                return dependentValue.includes(state.fieldValue.field);
+            }
+            return dependentValue === state.fieldValue.field;
+        }
+        return false;
+    }),
     selectedField: computed<string|undefined>(() => {
         if (props.widgetFieldSchema?.options?.useField) {
             return state.fieldValue.field;
@@ -98,7 +111,7 @@ const handleUpdateField = (val: string) => {
                 <p-select-dropdown :menu="state.menuItems"
                                    :selected="state.selectedField"
                                    use-fixed-menu-style
-                                   :invalid="state.selectedField === undefined"
+                                   :invalid="state.fieldInvalid"
                                    block
                                    @update:selected="handleUpdateField"
                 />

diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/type.ts b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/type.ts
@@ -16,6 +16,7 @@ export interface FormatRulesValue {
 export interface FormatRulesOptions {
     useField?: boolean;
     dataTarget?: FieldDataTargetType;
+    dependentField?: string; // groupBy field, xAxis field, yAxis field.. etc.
     formatRulesType: FormatRulesType;
     description?: string;
     baseColor?: string;

diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/widget-config.ts
@@ -26,6 +26,7 @@ const colorCodedHeatmap: WidgetConfig = {
             options: {
                 dataTarget: 'labels_info',
                 useField: true,
+                dependentField: 'groupBy',
                 formatRulesType: FORMAT_RULE_TYPE.textThreshold,
                 description: 'COMMON.WIDGETS.ADVANCED_FORMAT_RULES.COLOR_CODED_HEATMAP_DESC',
             },