77c6a16040
* chore: update unovis deps * chore: update color to use the themePrimary * docs: use gradient for overview component * docs: add themePopover to MainLayout * docs: enable global theme on every page * feat: introduce area, line, bar, donut chart * feat: add more props * fix: revert old pipeline * fix: patch @unovis/vue deps * fix: patch @unovis/vue deps again * chore: revert unovis/ts to 1.2.1 * chore: wip * docs: add alpha tag, fix tooltipo styling * docs: add charts installations step * feat: use generic, add better color * chore: build registry * feat: improve generic props * chore: build registry * docs: add alpha label * fix: collapsible not open correctly * docs: add badge to mobile nav * chore: better types * chore: run registry * chore: wip * fix: crosshair issue * chore: fix type, import missing error * chore: build registry * chore: arrange interface, expose margin, slot * chore: build registry * docs: guide page feat: add prop to barchart * chore: fix pnpm-lock * chore: add feature * chore: run build registry * refactor: change color var * feat: codegen * chore: add meta tables * feat: add line, area example * feat: bar and donut examples * docs: codege * chore: build registry * docs: improve chart doc * chore: fix missing icon package
28 lines
1.2 KiB
Vue
28 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { BarChart } from '@/lib/registry/default/ui/chart-bar'
|
|
|
|
const data = [
|
|
{ name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
{ name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
{ name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
{ name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
{ name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
{ name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
{ name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<BarChart
|
|
index="name"
|
|
:data="data"
|
|
:categories="['total', 'predicted']"
|
|
:y-formatter="(tick, i) => {
|
|
return typeof tick === 'number'
|
|
? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
|
|
: ''
|
|
}"
|
|
:type="'stacked'"
|
|
/>
|
|
</template>
|