|
@@ -8,13 +8,14 @@ |
|
@@ -8,13 +8,14 @@ |
|
8
|
label: string;
|
8
|
label: string;
|
|
9
|
}
|
9
|
}
|
|
10
|
|
10
|
|
|
11
|
- withDefaults(
|
11
|
+ const props = withDefaults(
|
|
12
|
defineProps<{
|
12
|
defineProps<{
|
|
13
|
value?: {
|
13
|
value?: {
|
|
14
|
images: string;
|
14
|
images: string;
|
|
15
|
totals: RecordType[];
|
15
|
totals: RecordType[];
|
|
16
|
tooltips: RecordType[];
|
16
|
tooltips: RecordType[];
|
|
17
|
todayTotals: RecordType[];
|
17
|
todayTotals: RecordType[];
|
|
|
|
18
|
+ withUnit?: boolean;
|
|
18
|
};
|
19
|
};
|
|
19
|
}>(),
|
20
|
}>(),
|
|
20
|
{
|
21
|
{
|
|
@@ -26,6 +27,17 @@ |
|
@@ -26,6 +27,17 @@ |
|
26
|
}),
|
27
|
}),
|
|
27
|
}
|
28
|
}
|
|
28
|
);
|
29
|
);
|
|
|
|
30
|
+
|
|
|
|
31
|
+ const getThresholdValue = (value: number) => {
|
|
|
|
32
|
+ const record = { value, unit: null };
|
|
|
|
33
|
+
|
|
|
|
34
|
+ if (!props.value?.withUnit) return record;
|
|
|
|
35
|
+
|
|
|
|
36
|
+ if (value > 10 ** 6) return { unit: 'M', value: value / 10 ** 6 };
|
|
|
|
37
|
+ if (value > 10 ** 3) return { unit: 'K', value: value / 10 ** 4 };
|
|
|
|
38
|
+
|
|
|
|
39
|
+ return record;
|
|
|
|
40
|
+ };
|
|
29
|
</script>
|
41
|
</script>
|
|
30
|
|
42
|
|
|
31
|
<template>
|
43
|
<template>
|
|
@@ -41,7 +53,8 @@ |
|
@@ -41,7 +53,8 @@ |
|
41
|
:style="{ width: `${100 / value.totals.length}%` }"
|
53
|
:style="{ width: `${100 / value.totals.length}%` }"
|
|
42
|
>
|
54
|
>
|
|
43
|
<div class="font-bold text-2xl">
|
55
|
<div class="font-bold text-2xl">
|
|
44
|
- <CountTo :end-val="item.value ?? 0" class="break-all" />
|
56
|
+ <CountTo :end-val="getThresholdValue(item.value).value ?? 0" class="break-all" />
|
|
|
|
57
|
+ <span>{{ getThresholdValue(item.value).unit || '' }}</span>
|
|
45
|
</div>
|
58
|
</div>
|
|
46
|
<div class="text-gray-600">{{ item.label }}</div>
|
59
|
<div class="text-gray-600">{{ item.label }}</div>
|
|
47
|
</div>
|
60
|
</div>
|
