chore: set provider color to provider data (#3026)

cloudforet-io · Jan 29, 2024 · 85a65ce · 85a65ce
1 parent 23587b7
commit 85a65ce
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/apps/web/src/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue b/apps/web/src/services/cost-explorer/components/CostReportMonthlyTotalAmountSummaryCard.vue
@@ -76,11 +76,14 @@ const state = reactive({
         const _categoryLabel = state.selectedTarget === GROUP_BY.WORKSPACE
             ? storeState.workspaces[_category]?.label ?? d.workspace_id
             : storeState.providers[_category]?.name ?? d.provider;
+        const _color = state.selectedTarget === GROUP_BY.WORKSPACE
+            ? DEFAULT_CHART_COLORS[idx]
+            : storeState.providers[_category]?.color ?? DEFAULT_CHART_COLORS[idx];
         return {
             category: _categoryLabel,
             value: d.value_sum,
             pieSettings: {
-                fill: DEFAULT_CHART_COLORS[idx],
+                fill: _color,
             },
         };
     })),
@@ -254,7 +257,7 @@ watch([() => state.currentDate, () => state.selectedTarget, () => costReportPage
                             </span>
                             <span v-else-if="field.name === GROUP_BY.PROVIDER">
                                 <span class="toggle-button"
-                                      :style="{ 'background-color': DEFAULT_CHART_COLORS[rowIndex] }"
+                                      :style="{ 'background-color': storeState.providers[value]?.color ?? DEFAULT_CHART_COLORS[rowIndex] }"
                                 />
                                 {{ storeState.providers[value] ? storeState.providers[value].name : value }}
                             </span>