code refactor

src/components/desktop/AccountBalanceTrendsChart.vue

@@ -14,7 +14,7 @@ import { useUserStore } from '@/stores/user.ts';
 
 import type { NameValue } from '@/core/base.ts';
 import { TextDirection } from '@/core/text.ts';
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { AccountBalanceTrendChartType } from '@/core/statistics.ts';
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
@@ -32,10 +32,10 @@ interface AccountBalanceTrendsChartDataItem {
     id: string;
     name: string;
     itemStyle: {
-        color: ColorValue;
-        color0?: string;
-        borderColor?: string;
-        borderColor0?: string;
+        color: ColorStyleValue;
+        color0?: ColorStyleValue;
+        borderColor?: ColorStyleValue;
+        borderColor0?: ColorStyleValue;
     };
     selected: boolean;
     type: string;

src/components/desktop/ColorSelect.vue

@@ -11,7 +11,7 @@
     >
         <template #selection="{ item }">
             <v-label class="cursor-pointer" style="padding-top: 3px">
-                <v-icon size="28" :icon="mdiSquareRounded" :color="getFinalColor(item.raw)"/>
+                <v-icon size="28" :icon="mdiSquareRounded" :color="getDisplayColor(item.raw)"/>
             </v-label>
         </template>
 
@@ -23,14 +23,14 @@
                     <div class="text-center" :key="colorInfo.color" v-for="colorInfo in row">
                         <div class="cursor-pointer" @click="color = colorInfo.color">
                             <v-icon class="ma-2" size="28"
-                                    :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)"
+                                    :icon="mdiSquareRounded" :color="getDisplayColor(colorInfo.color)"
                                     v-if="!modelValue || modelValue !== colorInfo.color" />
                             <v-badge class="right-bottom-icon" color="primary"
                                      offset-x="8" offset-y="8"
                                      :location="`bottom ${textDirection === TextDirection.LTR ? 'right' : 'left'}`"
                                      :icon="mdiCheck"
                                      v-if="modelValue && modelValue === colorInfo.color">
-                                <v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)" />
+                                <v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getDisplayColor(colorInfo.color)" />
                             </v-badge>
                         </div>
                     </div>
@@ -47,9 +47,9 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { TextDirection } from '@/core/text.ts';
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
-import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
+
 import { arrayContainsFieldValue } from '@/lib/common.ts';
-import { getColorsInRows } from '@/lib/color.ts';
+import { getColorsInRows, getDisplayColor } from '@/lib/color.ts';
 import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
@@ -86,14 +86,6 @@ function hasSelectedIcon(row: ColorInfo[]): boolean {
     return arrayContainsFieldValue(row, 'id', props.modelValue);
 }
 
-function getFinalColor(color: ColorValue): string {
-    if (color && color !== DEFAULT_ICON_COLOR) {
-        return '#' + color;
-    } else {
-        return 'var(--default-icon-color)';
-    }
-}
-
 function onMenuStateChanged(state: boolean): void {
     if (state) {
         nextTick(() => {

src/components/desktop/MonthlyTrendsChart.vue

@@ -16,10 +16,12 @@ import { useUserStore } from '@/stores/user.ts';
 
 import { TextDirection } from '@/core/text.ts';
 import { type Year1BasedMonth, DateRangeScene } from '@/core/datetime.ts';
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
+
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+
 import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
 
 import {
@@ -32,6 +34,9 @@ import {
     getDateTypeByDateRange,
     getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
+import {
+    getDisplayColor
+} from '@/lib/color.ts';
 import {
     sortStatisticsItems
 } from '@/lib/statistics.ts';
@@ -47,7 +52,7 @@ interface MonthlyTrendsChartDataItem {
     id: string;
     name: string;
     itemStyle: {
-        color: ColorValue;
+        color: ColorStyleValue;
     };
     selected: boolean;
     type: string;
@@ -83,7 +88,7 @@ const {
     formatAmountToLocalizedNumeralsWithCurrency
 } = useI18n();
 
-const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
+const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
 
 const userStore = useUserStore();
 
@@ -218,7 +223,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
             id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
             name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
             itemStyle: {
-                color: getColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
+                color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
             },
             selected: true,
             type: 'line',

src/components/desktop/PieChart.vue

@@ -13,13 +13,12 @@ import type { CallbackDataParams } from 'echarts/types/dist/shared';
 import { useI18n } from '@/locales/helpers.ts';
 import { type CommonPieChartDataItem, type CommonPieChartProps, usePieChartBase } from '@/components/base/PieChartBase.ts'
 
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
-import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
 
 interface DesktopPieChartDataItem extends CommonPieChartDataItem {
     itemStyle: {
-        color: ColorValue;
+        color: ColorStyleValue;
     };
     selected: boolean;
 }
@@ -66,7 +65,7 @@ const seriesData = computed<DesktopPieChartDataItem[]>(() => {
         ret.push({
             ...item,
             itemStyle: {
-                color: getColor(item.color),
+                color: item.color,
             },
             selected: true
         });
@@ -214,14 +213,6 @@ const chartOptions = computed<object>(() => {
     };
 });
 
-function getColor(color: string): ColorValue {
-    if (color && color !== DEFAULT_ICON_COLOR) {
-        color = '#' + color;
-    }
-
-    return color;
-}
-
 function clickItem(e: ECElementEvent): void {
     if (!props.enableClickItem || e.componentType !== 'series' || e.seriesType !=='pie') {
         return;