mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 07:57:33 +08:00
code refactor
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
import type { ColorValue } from '@/core/color.ts';
|
||||
import type {ColorStyleValue, ColorValue} from '@/core/color.ts';
|
||||
import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
|
||||
import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
|
||||
import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR, DEFAULT_COLOR_STYLE_VARIABLE } from '@/consts/color.ts';
|
||||
|
||||
import { isNumber } from '@/lib/common.ts';
|
||||
|
||||
type IconItemStyleName = string;
|
||||
@@ -14,14 +15,14 @@ export interface CommonIconProps {
|
||||
iconType: CommonIconItemType | MobileIconItemType;
|
||||
iconId: string | number;
|
||||
color?: ColorValue;
|
||||
defaultColor?: ColorValue;
|
||||
defaultColor?: ColorStyleValue;
|
||||
additionalColorAttr?: string;
|
||||
size?: string | number;
|
||||
}
|
||||
|
||||
export function useItemIconBase(props: CommonIconProps) {
|
||||
const style = computed<Record<IconItemStyleName, IconItemStyleValue>>(() => {
|
||||
let defaultColor = 'var(--default-icon-color)';
|
||||
let defaultColor: ColorStyleValue = DEFAULT_COLOR_STYLE_VARIABLE;
|
||||
|
||||
if (props.defaultColor) {
|
||||
defaultColor = props.defaultColor;
|
||||
@@ -60,15 +61,15 @@ export function useItemIconBase(props: CommonIconProps) {
|
||||
return ALL_CATEGORY_ICONS[iconId].icon;
|
||||
}
|
||||
|
||||
function getAccountIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
|
||||
function getAccountIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
|
||||
let displayColor: ColorStyleValue | undefined = defaultColor;
|
||||
|
||||
if (color && color !== DEFAULT_ACCOUNT_COLOR) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
displayColor = `#${color}`;
|
||||
}
|
||||
|
||||
const ret: Record<IconItemStyleName, IconItemStyleValue> = {
|
||||
color: color
|
||||
color: displayColor
|
||||
};
|
||||
|
||||
if (additionalColorAttr) {
|
||||
@@ -82,15 +83,15 @@ export function useItemIconBase(props: CommonIconProps) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getCategoryIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
|
||||
function getCategoryIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
|
||||
let displayColor: ColorStyleValue | undefined = defaultColor;
|
||||
|
||||
if (color && color !== DEFAULT_CATEGORY_COLOR) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
displayColor = `#${color}`;
|
||||
}
|
||||
|
||||
const ret: Record<IconItemStyleName, IconItemStyleValue> = {
|
||||
color: color
|
||||
color: displayColor
|
||||
};
|
||||
|
||||
if (additionalColorAttr) {
|
||||
@@ -104,15 +105,15 @@ export function useItemIconBase(props: CommonIconProps) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getDefaultIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
|
||||
function getDefaultIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
|
||||
let displayColor: ColorStyleValue | undefined = defaultColor;
|
||||
|
||||
if (color && color !== DEFAULT_ICON_COLOR) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
displayColor = `#${color}`;
|
||||
}
|
||||
|
||||
const ret: Record<IconItemStyleName, IconItemStyleValue> = {
|
||||
color: color
|
||||
color: displayColor
|
||||
};
|
||||
|
||||
if (additionalColorAttr) {
|
||||
|
||||
@@ -11,8 +11,6 @@ import type {
|
||||
YearMonthUnixTime
|
||||
} from '@/core/datetime.ts';
|
||||
import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
|
||||
import type { ColorValue } from '@/core/color.ts';
|
||||
import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
|
||||
import type { YearMonthItems } from '@/models/transaction.ts';
|
||||
|
||||
import { getAllDateRangesFromItems } from '@/lib/statistics.ts';
|
||||
@@ -49,19 +47,10 @@ export function useMonthlyTrendsChartBase<T extends Year1BasedMonth>(props: Comm
|
||||
return props.translateName ? tt(name) : name;
|
||||
}
|
||||
|
||||
function getColor(color: string): ColorValue {
|
||||
if (color && color !== DEFAULT_ICON_COLOR) {
|
||||
color = '#' + color;
|
||||
}
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
return {
|
||||
// computed states
|
||||
allDateRanges,
|
||||
// functions
|
||||
getItemName,
|
||||
getColor
|
||||
getItemName
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,11 @@ import { ref, computed, watch } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import type { ColorValue, ColorStyleValue } from '@/core/color.ts';
|
||||
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
|
||||
|
||||
import { isNumber } from '@/lib/common.ts';
|
||||
import { getDisplayColor } from '@/lib/color.ts';
|
||||
|
||||
export interface CommonPieChartDataItem {
|
||||
id: string;
|
||||
@@ -13,7 +15,7 @@ export interface CommonPieChartDataItem {
|
||||
value: number;
|
||||
percent: number;
|
||||
actualPercent: number;
|
||||
color: string;
|
||||
color: ColorStyleValue;
|
||||
sourceItem: Record<string, unknown>;
|
||||
displayPercent?: string;
|
||||
displayValue?: string;
|
||||
@@ -68,7 +70,7 @@ export function usePieChartBase(props: CommonPieChartProps) {
|
||||
value: value,
|
||||
percent: (isNumber(percent) && percent >= 0) ? percent : (value / totalValidValue * 100),
|
||||
actualPercent: value / totalValidValue,
|
||||
color: (props.colorField && item[props.colorField]) ? item[props.colorField] as string : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length],
|
||||
color: getDisplayColor((props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length]),
|
||||
sourceItem: item
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user