50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<div class="h-full w-full">
|
|
<div
|
|
v-if="item.type == 'number_chart'"
|
|
class="rounded shadow overflow-hidden cursor-pointer"
|
|
>
|
|
<Tooltip :text="__(item.data.tooltip)">
|
|
<NumberChart v-if="item.data" :key="index" :config="item.data" />
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
v-else-if="item.type == 'spacer'"
|
|
class="rounded bg-surface-white h-full overflow-hidden text-ink-gray-5 flex items-center justify-center"
|
|
:class="editing ? 'border border-dashed border-outline-gray-2' : ''"
|
|
>
|
|
{{ editing ? __('Spacer') : '' }}
|
|
</div>
|
|
<div
|
|
v-else-if="item.type == 'axis_chart'"
|
|
class="h-full w-full rounded-md bg-surface-white shadow"
|
|
>
|
|
<AxisChart v-if="item.data" :config="item.data" />
|
|
</div>
|
|
<div
|
|
v-else-if="item.type == 'donut_chart'"
|
|
class="h-full w-full rounded-md bg-surface-white shadow overflow-hidden"
|
|
>
|
|
<DonutChart v-if="item.data" :config="item.data" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { AxisChart, DonutChart, NumberChart, Tooltip } from 'frappe-ui'
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
editing: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
</script>
|