migrate mobile pie chart to composition API and typescript

src/components/mobile/PieChart.vue

@@ -64,7 +64,7 @@
                         <f7-icon class="item-navigate-icon" f7="chevron_right" v-if="enableClickItem"></f7-icon>
                     </f7-link>
                     <f7-link :no-link-class="true" v-else-if="!validItems || !validItems.length">
-                        {{ $t('No transaction data') }}
+                        {{ tt('No transaction data') }}
                     </f7-link>
                 </div>
 
@@ -76,153 +76,168 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { ref, computed, watch } from 'vue';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
 
+import { useI18n } from '@/locales/helpers.ts';
+
+import type { ColorValue } from '@/core/color.ts';
 import { DEFAULT_ICON_COLOR, DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+
+import { isNumber } from '@/lib/common.ts';
 import { formatPercent } from '@/lib/numeral.ts';
 
-export default {
+interface MobilePieChartDataItem {
-    props: [
+    name: string;
-        'skeleton',
+    value: number;
-        'items',
+    percent: number;
-        'nameField',
+    actualPercent: number;
-        'valueField',
+    color: ColorValue;
-        'percentField',
+    sourceItem: Record<string, unknown>;
-        'colorField',
+    displayPercent?: string;
-        'hiddenField',
+    displayValue?: string;
-        'minValidPercent',
+}
-        'defaultCurrency',
-        'showValue',
-        'showCenterText',
-        'showSelectedItemInfo',
-        'enableClickItem',
-        'centerTextBackground',
-    ],
-    emits: [
-        'click'
-    ],
-    data: function () {
-        const diameter = 100;
 
-        return {
+const props = defineProps<{
-            diameter: diameter,
+    skeleton?: boolean;
-            circumference: diameter * Math.PI,
+    items: Record<string, unknown>[];
-            selectedIndex: 0
+    nameField: string;
-        }
+    valueField: string;
-    },
+    percentField?: string;
-    computed: {
+    colorField?: string;
-        ...mapStores(useSettingsStore, useUserStore),
+    hiddenField?: string;
-        validItems: function () {
+    minValidPercent?: number;
+    defaultCurrency?: string;
+    showValue?: boolean;
+    showCenterText?: boolean;
+    showSelectedItemInfo?: boolean;
+    enableClickItem?: boolean;
+    centerTextBackground?: ColorValue;
+}>();
+
+const emit = defineEmits<{
+    (e: 'click', value: Record<string, unknown>): void;
+}>();
+
+const { tt, formatAmountWithCurrency } = useI18n();
+
+const diameter: number = 100;
+const circumference: number = diameter * Math.PI;
+
+const selectedIndex = ref<number>(0);
+
+const validItems = computed<MobilePieChartDataItem[]>(() => {
     let totalValidValue = 0;
 
-            for (let i = 0; i < this.items.length; i++) {
+    for (let i = 0; i < props.items.length; i++) {
-                const item = this.items[i];
+        const item = props.items[i];
+        const value = item[props.valueField];
 
-                if (item[this.valueField] && item[this.valueField] > 0 && (!this.hiddenField || !item[this.hiddenField])) {
+        if (isNumber(value) && value > 0 && (!props.hiddenField || !item[props.hiddenField])) {
-                    totalValidValue += item[this.valueField];
+            totalValidValue += value;
         }
     }
 
-            const validItems = [];
+    const validItems: MobilePieChartDataItem[] = [];
 
-            for (let i = 0; i < this.items.length; i++) {
+    for (let i = 0; i < props.items.length; i++) {
-                const item = this.items[i];
+        const item = props.items[i];
+        const value = item[props.valueField];
+        const percent = props.percentField ? item[props.percentField] : -1;
 
-                if (item[this.valueField] && item[this.valueField] > 0 &&
+        if (isNumber(value) && value > 0 &&
-                    (!this.hiddenField || !item[this.hiddenField]) &&
+            (!props.hiddenField || !item[props.hiddenField]) &&
-                    (!this.minValidPercent || item[this.valueField] / totalValidValue > this.minValidPercent)) {
+            (!props.minValidPercent || value / totalValidValue > props.minValidPercent)) {
-                    const finalItem = {
+            const finalItem: MobilePieChartDataItem = {
-                        name: item[this.nameField],
+                name: item[props.nameField] as string,
-                        value: item[this.valueField],
+                value: value,
-                        percent: (item[this.percentField] > 0 || item[this.percentField] === 0 || item[this.percentField] === '0') ? item[this.percentField] : (item[this.valueField] / totalValidValue * 100),
+                percent: (isNumber(percent) && percent >= 0) ? percent : (value / totalValidValue * 100),
-                        actualPercent: item[this.valueField] / totalValidValue,
+                actualPercent: value / totalValidValue,
-                        color: item[this.colorField] ? item[this.colorField] : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length],
+                color: (props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length],
                 sourceItem: item
             };
 
             finalItem.displayPercent = formatPercent(finalItem.percent, 2, '&lt;0.01');
-                    finalItem.displayValue = this.getDisplayCurrency(finalItem.value, this.defaultCurrency);
+            finalItem.displayValue = formatAmountWithCurrency(finalItem.value, props.defaultCurrency) as string;
 
             validItems.push(finalItem);
         }
     }
 
     return validItems;
-        },
+});
-        totalValidValue: function () {
+
+const totalValidValue = computed<number>(() => {
     let totalValidValue = 0;
 
-            for (let i = 0; i < this.validItems.length; i++) {
+    for (let i = 0; i < validItems.value.length; i++) {
-                totalValidValue += this.validItems[i].value;
+        totalValidValue += validItems.value[i].value;
     }
 
     return totalValidValue;
-        },
+});
-        itemCommonDashOffset: function () {
+
-            if (this.totalValidValue <= 0) {
+const itemCommonDashOffset = computed<number>(() => {
+    if (totalValidValue.value <= 0) {
         return 0;
     }
 
     let offset = 0;
 
-            for (let i = 0; i < Math.min(this.selectedIndex + 1, this.validItems.length); i++) {
+    for (let i = 0; i < Math.min(selectedIndex.value + 1, validItems.value.length); i++) {
-                const item = this.validItems[i];
+        const item = validItems.value[i];
 
         if (item.actualPercent > 0) {
-                    if (i === this.selectedIndex) {
+            if (i === selectedIndex.value) {
-                        offset += -this.circumference * (1 - item.actualPercent) / 2;
+                offset += -circumference * (1 - item.actualPercent) / 2;
             } else {
-                        offset += -this.circumference * (1 - item.actualPercent);
+                offset += -circumference * (1 - item.actualPercent);
             }
         }
     }
 
     return offset;
-        },
+});
-        selectedItem: function () {
+
-            if (!this.validItems || !this.validItems.length) {
+const selectedItem = computed<MobilePieChartDataItem | null>(() => {
+    if (!validItems.value || !validItems.value.length) {
         return null;
     }
 
-            let selectedIndex = this.selectedIndex;
+    let index = selectedIndex.value;
 
-            if (selectedIndex < 0 || selectedIndex >= this.validItems.length) {
+    if (index < 0 || index >= validItems.value.length) {
-                selectedIndex = 0;
+        index = 0;
     }
 
-            return this.validItems[selectedIndex];
+    return validItems.value[index];
-        }
+});
-    },
+
-    watch: {
+watch(() => props.items, () => {
-        'items': {
+    selectedIndex.value = 0;
-            handler() {
+});
-                this.selectedIndex = 0;
+
-            },
+function switchSelectedIndex(index: number): void {
-            deep: true
+    selectedIndex.value = index;
-        }
+}
-    },
+
-    methods: {
+function switchSelectedItem(offset: number): void {
-        switchSelectedIndex: function (index) {
+    let newSelectedIndex = selectedIndex.value + offset;
-            this.selectedIndex = index;
-        },
-        switchSelectedItem: function (offset) {
-            let newSelectedIndex = this.selectedIndex + offset;
 
     while (newSelectedIndex < 0) {
-                newSelectedIndex += this.validItems.length;
+        newSelectedIndex += validItems.value.length;
     }
 
-            this.selectedIndex = newSelectedIndex % this.validItems.length;
+    selectedIndex.value = newSelectedIndex % validItems.value.length;
-        },
+}
-        clickItem: function (item) {
+
-            if (this.enableClickItem) {
+function clickItem(item: MobilePieChartDataItem): void {
-                this.$emit('click', item.sourceItem);
+    if (props.enableClickItem) {
+        emit('click', item.sourceItem);
     }
-        },
+}
-        getColor: function (color) {
+
+function getColor(color: ColorValue): ColorValue {
     if (color && color !== DEFAULT_ICON_COLOR) {
         color = '#' + color;
     } else {
@@ -230,10 +245,11 @@ export default {
     }
 
     return color;
-        },
+}
-        getColorStyle: function (color, additionalFieldName) {
+
-            const ret = {
+function getColorStyle(color: ColorValue, additionalFieldName?: string): Record<string, string> {
-                color: this.getColor(color)
+    const ret: Record<string, string> = {
+        color: getColor(color)
     };
 
     if (additionalFieldName) {
@@ -241,12 +257,14 @@ export default {
     }
 
     return ret;
-        },
+}
-        getItemStrokeDash(item) {
+
-            const length = item.actualPercent * this.circumference;
+function getItemStrokeDash(item: MobilePieChartDataItem): string {
-            return `${length} ${this.circumference - length}`;
+    const length = item.actualPercent * circumference;
-        },
+    return `${length} ${circumference - length}`;
-        getItemDashOffset(item, items, offset) {
+}
+
+function getItemDashOffset(item: MobilePieChartDataItem, items: MobilePieChartDataItem[], offset?: number): number {
     let allPreviousPercent = 0;
 
     for (let i = 0; i < items.length; i++) {
@@ -260,22 +278,17 @@ export default {
     }
 
     if (offset) {
-                offset += this.circumference / 4;
+        offset += circumference / 4;
     } else {
-                offset = this.circumference / 4;
+        offset = circumference / 4;
     }
 
     if (allPreviousPercent <= 0) {
         return offset;
     }
 
-            const allPreviousLength = allPreviousPercent * this.circumference;
+    const allPreviousLength = allPreviousPercent * circumference;
-            return this.circumference - allPreviousLength + offset;
+    return circumference - allPreviousLength + offset;
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        }
-    }
 }
 </script>