feat: add report charts and drilldowns
This commit is contained in:
@@ -14,7 +14,15 @@ const props = defineProps({
|
||||
<template>
|
||||
<div :class="props.containerClass">
|
||||
<div class="flex flex-wrap items-center justify-between gap-6">
|
||||
<div v-for="(item, idx) in props.items" :key="item.key ?? idx" class="flex items-center gap-4 flex-1 min-w-[220px]">
|
||||
<component
|
||||
:is="item.onClick ? 'button' : 'div'"
|
||||
v-for="(item, idx) in props.items"
|
||||
:key="item.key ?? idx"
|
||||
class="flex items-center gap-4 flex-1 min-w-[220px] text-left"
|
||||
:class="item.onClick ? 'cursor-pointer transition-colors hover:bg-surface-100 dark:hover:bg-surface-800 rounded-lg p-2 -m-2 border-0 bg-transparent' : ''"
|
||||
:type="item.onClick ? 'button' : undefined"
|
||||
@click="item.onClick && item.onClick()"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-full flex items-center justify-center bg-surface-100 dark:bg-surface-800">
|
||||
<i class="pi text-primary text-xl" :class="item.icon" />
|
||||
</div>
|
||||
@@ -23,7 +31,7 @@ const props = defineProps({
|
||||
<span class="text-surface-900 dark:text-surface-0 text-xl font-semibold" :class="item.valueClass">{{ item.value }}</span>
|
||||
</div>
|
||||
<div v-if="idx !== props.items.length - 1" class="hidden xl:block w-px self-stretch bg-surface-200 dark:bg-surface-700 ml-auto"></div>
|
||||
</div>
|
||||
</component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user