66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { inject } from 'vue'
|
|
import { ChartConfigSymbol, type ChartConfig } from '.'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
labelKey?: string
|
|
nameKey?: string
|
|
indicator?: 'dot' | 'line' | 'dashed'
|
|
hideLabel?: boolean
|
|
hideIndicator?: boolean
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
payload?: Array<{ name: string; value: number; color: string; dataKey: string }>
|
|
label?: string
|
|
class?: string
|
|
}>(), {
|
|
indicator: 'dot',
|
|
hideLabel: false,
|
|
hideIndicator: false,
|
|
})
|
|
|
|
const config = inject(ChartConfigSymbol)
|
|
|
|
function getPayloadConfig(key: string) {
|
|
return config?.value?.[key]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rounded-lg border bg-background px-3 py-2 shadow-xl">
|
|
<template v-if="!hideLabel && label">
|
|
<div class="mb-1 font-medium">
|
|
{{ label }}
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-col gap-0.5">
|
|
<template v-for="item in payload" :key="item.name">
|
|
<div class="flex items-center gap-2">
|
|
<template v-if="!hideIndicator">
|
|
<span
|
|
v-if="indicator === 'dot'"
|
|
class="size-2.5 rounded-full"
|
|
:style="{ backgroundColor: item.color }"
|
|
/>
|
|
<span
|
|
v-else-if="indicator === 'line'"
|
|
class="h-0.5 w-4"
|
|
:style="{ backgroundColor: item.color }"
|
|
/>
|
|
<span
|
|
v-else
|
|
class="h-0.5 w-4 border-t-2 border-dashed"
|
|
:style="{ borderColor: item.color }"
|
|
/>
|
|
</template>
|
|
<span class="text-muted-foreground">
|
|
{{ getPayloadConfig(item.dataKey)?.label ?? item.name }}
|
|
</span>
|
|
<span class="ml-auto font-medium tabular-nums text-foreground">
|
|
{{ item.value.toLocaleString('id-ID') }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|