migrate trends bar chart to composition API and typescript

src/components/base/TrendsChartBase.ts

@@ -0,0 +1,64 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import type {
+    YearMonth,
+    TimeRangeAndDateType,
+    YearUnixTime,
+    YearQuarterUnixTime,
+    YearMonthUnixTime
+} from '@/core/datetime.ts';
+import type { ColorValue } from '@/core/color.ts';
+import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
+import type { YearMonthItems } from '@/models/transaction.ts';
+
+import { getAllDateRanges } from '@/lib/statistics.ts';
+
+export interface CommonTrendsChartProps<T extends YearMonth> {
+    items: YearMonthItems<T>[];
+    startYearMonth: string;
+    endYearMonth: string;
+    sortingType: number;
+    dateAggregationType: number;
+    idField?: string;
+    nameField: string;
+    valueField: string;
+    colorField?: string;
+    hiddenField?: string;
+    displayOrdersField?: string;
+    translateName?: boolean;
+    defaultCurrency?: string;
+    enableClickItem?: boolean;
+}
+
+export interface TrendsBarChartClickEvent {
+    itemId: string;
+    dateRange: TimeRangeAndDateType;
+}
+
+export function useTrendsChartBase<T extends YearMonth>(props: CommonTrendsChartProps<T>) {
+    const { tt } = useI18n();
+
+    const allDateRanges = computed<YearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[]>(() => getAllDateRanges(props.items, props.startYearMonth, props.endYearMonth, props.dateAggregationType));
+
+    function getItemName(name: string): string {
+        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
+    }
+}