feat: add line, area example
This commit is contained in:
zernonia
parent
9cf07be61b
commit
6ac1d40bf2
|
|
@ -1,4 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { capitalize } from 'vue'
|
||||
|
||||
defineProps<{
|
||||
type: 'prop' | 'emit' | 'slot' | 'method'
|
||||
data: { name: string, description: string, type: string, required: boolean }[]
|
||||
|
|
@ -7,9 +9,7 @@ defineProps<{
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="capitalize">
|
||||
{{ type }}
|
||||
</h2>
|
||||
<h3>{{ capitalize(type) }}</h3>
|
||||
|
||||
<div v-for="(item, index) in data" :key="index" class="py-4 border-b text-sm">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
|
|
|
|||
|
|
@ -27,4 +27,20 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
|
|||
|
||||
</Steps>
|
||||
|
||||
## API
|
||||
|
||||
<!-- @include: @/content/meta/AreaChart.md -->
|
||||
|
||||
## Example
|
||||
|
||||
### Sparkline
|
||||
|
||||
We can turn the chart into sparkline chart by hiding axis, gridline and legends.
|
||||
|
||||
<ComponentPreview name="AreaChartSparkline" />
|
||||
|
||||
### Custom Tooltip
|
||||
|
||||
If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](http://localhost:5173/docs/charts/guide.html#custom-tooltip).
|
||||
|
||||
<ComponentPreview name="AreaChartCustomTooltip" />
|
||||
|
|
|
|||
|
|
@ -27,4 +27,20 @@ Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
|
|||
|
||||
</Steps>
|
||||
|
||||
<!-- @include: @/content/meta/LineChart.md -->
|
||||
## API
|
||||
|
||||
<!-- @include: @/content/meta/AreaChart.md -->
|
||||
|
||||
## Example
|
||||
|
||||
### Sparkline
|
||||
|
||||
We can turn the chart into sparkline chart by hiding axis, gridline and legends.
|
||||
|
||||
<ComponentPreview name="LineChartSparkline" />
|
||||
|
||||
### Custom Tooltip
|
||||
|
||||
If you want to render custom tooltip, you can easily pass in a custom component. Refer to prop definition [here](http://localhost:5173/docs/charts/guide.html#custom-tooltip).
|
||||
|
||||
<ComponentPreview name="LineChartCustomTooltip" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import CustomChartTooltip from './CustomChartTooltip.vue'
|
||||
import { AreaChart } from '@/lib/registry/default/ui/chart-area'
|
||||
|
||||
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>
|
||||
<AreaChart
|
||||
index="name"
|
||||
:data="data"
|
||||
:categories="['total', 'predicted']"
|
||||
:custom-tooltip="CustomChartTooltip"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<script setup lang="ts">
|
||||
import { CurveType } from '@unovis/ts'
|
||||
import { AreaChart } from '@/lib/registry/default/ui/chart-area'
|
||||
|
||||
const data = [
|
||||
{ name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AreaChart
|
||||
class="h-[100px] w-[400px]"
|
||||
index="name"
|
||||
:data="data"
|
||||
:categories="['total']"
|
||||
:show-grid-line="false"
|
||||
:show-legend="false"
|
||||
:show-x-axis="false"
|
||||
:show-y-axis="false"
|
||||
:curve-type="CurveType.Linear"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
|
||||
defineProps<{
|
||||
title?: string
|
||||
data: {
|
||||
name: string
|
||||
color: string
|
||||
value: any
|
||||
}[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="text-sm">
|
||||
<CardContent class="p-3 min-w-[180px] flex flex-col gap-2">
|
||||
<div v-for="(item, key) in data" :key="key" class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<span class="w-1 h-7 mr-4 rounded-full" :style="{ background: item.color }" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<span class="font-semibold ml-4">{{ item.value }}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<script setup lang="ts">
|
||||
import CustomChartTooltip from './CustomChartTooltip.vue'
|
||||
import { LineChart } from '@/lib/registry/default/ui/chart-line'
|
||||
|
||||
const data = [
|
||||
{
|
||||
'year': 1970,
|
||||
'Export Growth Rate': 2.04,
|
||||
'Import Growth Rate': 1.53,
|
||||
},
|
||||
{
|
||||
'year': 1971,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.58,
|
||||
},
|
||||
{
|
||||
'year': 1972,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1973,
|
||||
'Export Growth Rate': 1.93,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1974,
|
||||
'Export Growth Rate': 1.88,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1975,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.64,
|
||||
},
|
||||
{
|
||||
'year': 1976,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.62,
|
||||
},
|
||||
{
|
||||
'year': 1977,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.69,
|
||||
},
|
||||
{
|
||||
'year': 1978,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1979,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1980,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1981,
|
||||
'Export Growth Rate': 1.81,
|
||||
'Import Growth Rate': 1.72,
|
||||
},
|
||||
{
|
||||
'year': 1982,
|
||||
'Export Growth Rate': 1.84,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1983,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1984,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.78,
|
||||
},
|
||||
{
|
||||
'year': 1985,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.81,
|
||||
},
|
||||
{
|
||||
'year': 1986,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.89,
|
||||
},
|
||||
{
|
||||
'year': 1987,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.91,
|
||||
},
|
||||
{
|
||||
'year': 1988,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1989,
|
||||
'Export Growth Rate': 1.76,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1990,
|
||||
'Export Growth Rate': 1.75,
|
||||
'Import Growth Rate': 1.97,
|
||||
},
|
||||
{
|
||||
'year': 1991,
|
||||
'Export Growth Rate': 1.62,
|
||||
'Import Growth Rate': 1.99,
|
||||
},
|
||||
{
|
||||
'year': 1992,
|
||||
'Export Growth Rate': 1.56,
|
||||
'Import Growth Rate': 2.12,
|
||||
},
|
||||
{
|
||||
'year': 1993,
|
||||
'Export Growth Rate': 1.5,
|
||||
'Import Growth Rate': 2.13,
|
||||
},
|
||||
{
|
||||
'year': 1994,
|
||||
'Export Growth Rate': 1.46,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1995,
|
||||
'Export Growth Rate': 1.43,
|
||||
'Import Growth Rate': 2.17,
|
||||
},
|
||||
{
|
||||
'year': 1996,
|
||||
'Export Growth Rate': 1.4,
|
||||
'Import Growth Rate': 2.2,
|
||||
},
|
||||
{
|
||||
'year': 1997,
|
||||
'Export Growth Rate': 1.37,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1998,
|
||||
'Export Growth Rate': 1.34,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 1999,
|
||||
'Export Growth Rate': 1.32,
|
||||
'Import Growth Rate': 2.05,
|
||||
},
|
||||
{
|
||||
'year': 2000,
|
||||
'Export Growth Rate': 1.33,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 2001,
|
||||
'Export Growth Rate': 1.31,
|
||||
'Import Growth Rate': 2.08,
|
||||
},
|
||||
{
|
||||
'year': 2002,
|
||||
'Export Growth Rate': 1.29,
|
||||
'Import Growth Rate': 2.1,
|
||||
},
|
||||
{
|
||||
'year': 2003,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 2004,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.21,
|
||||
},
|
||||
{
|
||||
'year': 2005,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.23,
|
||||
},
|
||||
{
|
||||
'year': 2006,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.29,
|
||||
},
|
||||
{
|
||||
'year': 2007,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2008,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2009,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2010,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2011,
|
||||
'Export Growth Rate': 1.24,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2012,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2013,
|
||||
'Export Growth Rate': 1.22,
|
||||
'Import Growth Rate': 2.3,
|
||||
},
|
||||
{
|
||||
'year': 2014,
|
||||
'Export Growth Rate': 1.2,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2015,
|
||||
'Export Growth Rate': 1.17,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2016,
|
||||
'Export Growth Rate': 1.16,
|
||||
'Import Growth Rate': 2.41,
|
||||
},
|
||||
{
|
||||
'year': 2017,
|
||||
'Export Growth Rate': 1.13,
|
||||
'Import Growth Rate': 2.44,
|
||||
},
|
||||
{
|
||||
'year': 2018,
|
||||
'Export Growth Rate': 1.07,
|
||||
'Import Growth Rate': 2.45,
|
||||
},
|
||||
{
|
||||
'year': 2019,
|
||||
'Export Growth Rate': 1.03,
|
||||
'Import Growth Rate': 2.47,
|
||||
},
|
||||
{
|
||||
'year': 2020,
|
||||
'Export Growth Rate': 0.92,
|
||||
'Import Growth Rate': 2.48,
|
||||
},
|
||||
{
|
||||
'year': 2021,
|
||||
'Export Growth Rate': 0.82,
|
||||
'Import Growth Rate': 2.51,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LineChart
|
||||
:data="data"
|
||||
index="year"
|
||||
:categories="['Export Growth Rate', 'Import Growth Rate']"
|
||||
:y-formatter="(tick, i) => {
|
||||
return typeof tick === 'number'
|
||||
? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
|
||||
: ''
|
||||
}"
|
||||
:custom-tooltip="CustomChartTooltip"
|
||||
/>
|
||||
</template>
|
||||
285
apps/www/src/lib/registry/default/example/LineChartSparkline.vue
Normal file
285
apps/www/src/lib/registry/default/example/LineChartSparkline.vue
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<script setup lang="ts">
|
||||
import { LineChart } from '@/lib/registry/default/ui/chart-line'
|
||||
|
||||
const data = [
|
||||
{
|
||||
'year': 1970,
|
||||
'Export Growth Rate': 2.04,
|
||||
'Import Growth Rate': 1.53,
|
||||
},
|
||||
{
|
||||
'year': 1971,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.58,
|
||||
},
|
||||
{
|
||||
'year': 1972,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1973,
|
||||
'Export Growth Rate': 1.93,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1974,
|
||||
'Export Growth Rate': 1.88,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1975,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.64,
|
||||
},
|
||||
{
|
||||
'year': 1976,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.62,
|
||||
},
|
||||
{
|
||||
'year': 1977,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.69,
|
||||
},
|
||||
{
|
||||
'year': 1978,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1979,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1980,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1981,
|
||||
'Export Growth Rate': 1.81,
|
||||
'Import Growth Rate': 1.72,
|
||||
},
|
||||
{
|
||||
'year': 1982,
|
||||
'Export Growth Rate': 1.84,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1983,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1984,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.78,
|
||||
},
|
||||
{
|
||||
'year': 1985,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.81,
|
||||
},
|
||||
{
|
||||
'year': 1986,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.89,
|
||||
},
|
||||
{
|
||||
'year': 1987,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.91,
|
||||
},
|
||||
{
|
||||
'year': 1988,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1989,
|
||||
'Export Growth Rate': 1.76,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1990,
|
||||
'Export Growth Rate': 1.75,
|
||||
'Import Growth Rate': 1.97,
|
||||
},
|
||||
{
|
||||
'year': 1991,
|
||||
'Export Growth Rate': 1.62,
|
||||
'Import Growth Rate': 1.99,
|
||||
},
|
||||
{
|
||||
'year': 1992,
|
||||
'Export Growth Rate': 1.56,
|
||||
'Import Growth Rate': 2.12,
|
||||
},
|
||||
{
|
||||
'year': 1993,
|
||||
'Export Growth Rate': 1.5,
|
||||
'Import Growth Rate': 2.13,
|
||||
},
|
||||
{
|
||||
'year': 1994,
|
||||
'Export Growth Rate': 1.46,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1995,
|
||||
'Export Growth Rate': 1.43,
|
||||
'Import Growth Rate': 2.17,
|
||||
},
|
||||
{
|
||||
'year': 1996,
|
||||
'Export Growth Rate': 1.4,
|
||||
'Import Growth Rate': 2.2,
|
||||
},
|
||||
{
|
||||
'year': 1997,
|
||||
'Export Growth Rate': 1.37,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1998,
|
||||
'Export Growth Rate': 1.34,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 1999,
|
||||
'Export Growth Rate': 1.32,
|
||||
'Import Growth Rate': 2.05,
|
||||
},
|
||||
{
|
||||
'year': 2000,
|
||||
'Export Growth Rate': 1.33,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 2001,
|
||||
'Export Growth Rate': 1.31,
|
||||
'Import Growth Rate': 2.08,
|
||||
},
|
||||
{
|
||||
'year': 2002,
|
||||
'Export Growth Rate': 1.29,
|
||||
'Import Growth Rate': 2.1,
|
||||
},
|
||||
{
|
||||
'year': 2003,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 2004,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.21,
|
||||
},
|
||||
{
|
||||
'year': 2005,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.23,
|
||||
},
|
||||
{
|
||||
'year': 2006,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.29,
|
||||
},
|
||||
{
|
||||
'year': 2007,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2008,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2009,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2010,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2011,
|
||||
'Export Growth Rate': 1.24,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2012,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2013,
|
||||
'Export Growth Rate': 1.22,
|
||||
'Import Growth Rate': 2.3,
|
||||
},
|
||||
{
|
||||
'year': 2014,
|
||||
'Export Growth Rate': 1.2,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2015,
|
||||
'Export Growth Rate': 1.17,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2016,
|
||||
'Export Growth Rate': 1.16,
|
||||
'Import Growth Rate': 2.41,
|
||||
},
|
||||
{
|
||||
'year': 2017,
|
||||
'Export Growth Rate': 1.13,
|
||||
'Import Growth Rate': 2.44,
|
||||
},
|
||||
{
|
||||
'year': 2018,
|
||||
'Export Growth Rate': 1.07,
|
||||
'Import Growth Rate': 2.45,
|
||||
},
|
||||
{
|
||||
'year': 2019,
|
||||
'Export Growth Rate': 1.03,
|
||||
'Import Growth Rate': 2.47,
|
||||
},
|
||||
{
|
||||
'year': 2020,
|
||||
'Export Growth Rate': 0.92,
|
||||
'Import Growth Rate': 2.48,
|
||||
},
|
||||
{
|
||||
'year': 2021,
|
||||
'Export Growth Rate': 0.82,
|
||||
'Import Growth Rate': 2.51,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LineChart
|
||||
index="year"
|
||||
class="h-[100px] w-[400px]"
|
||||
:data="data"
|
||||
:categories="['Export Growth Rate']"
|
||||
:y-formatter="(tick, i) => {
|
||||
return typeof tick === 'number'
|
||||
? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
|
||||
: ''
|
||||
}"
|
||||
:show-tooltip="false"
|
||||
:show-grid-line="false"
|
||||
:show-legend="false"
|
||||
:show-x-axis="false"
|
||||
:show-y-axis="false"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import CustomChartTooltip from './CustomChartTooltip.vue'
|
||||
import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
|
||||
|
||||
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>
|
||||
<AreaChart
|
||||
index="name"
|
||||
:data="data"
|
||||
:categories="['total', 'predicted']"
|
||||
:custom-tooltip="CustomChartTooltip"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<script setup lang="ts">
|
||||
import { CurveType } from '@unovis/ts'
|
||||
import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
|
||||
|
||||
const data = [
|
||||
{ name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
{ name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AreaChart
|
||||
class="h-[100px] w-[400px]"
|
||||
index="name"
|
||||
:data="data"
|
||||
:categories="['total']"
|
||||
:show-grid-line="false"
|
||||
:show-legend="false"
|
||||
:show-x-axis="false"
|
||||
:show-y-axis="false"
|
||||
:curve-type="CurveType.Linear"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script setup lang="ts">
|
||||
import { Card, CardContent } from '@/lib/registry/default/ui/card'
|
||||
|
||||
defineProps<{
|
||||
title?: string
|
||||
data: {
|
||||
name: string
|
||||
color: string
|
||||
value: any
|
||||
}[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="text-sm">
|
||||
<CardContent class="p-3 min-w-[180px] flex flex-col gap-2">
|
||||
<div v-for="(item, key) in data" :key="key" class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<span class="w-1 h-7 mr-4 rounded-full" :style="{ background: item.color }" />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<span class="font-semibold ml-4">{{ item.value }}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<script setup lang="ts">
|
||||
import CustomChartTooltip from './CustomChartTooltip.vue'
|
||||
import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
|
||||
|
||||
const data = [
|
||||
{
|
||||
'year': 1970,
|
||||
'Export Growth Rate': 2.04,
|
||||
'Import Growth Rate': 1.53,
|
||||
},
|
||||
{
|
||||
'year': 1971,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.58,
|
||||
},
|
||||
{
|
||||
'year': 1972,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1973,
|
||||
'Export Growth Rate': 1.93,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1974,
|
||||
'Export Growth Rate': 1.88,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1975,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.64,
|
||||
},
|
||||
{
|
||||
'year': 1976,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.62,
|
||||
},
|
||||
{
|
||||
'year': 1977,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.69,
|
||||
},
|
||||
{
|
||||
'year': 1978,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1979,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1980,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1981,
|
||||
'Export Growth Rate': 1.81,
|
||||
'Import Growth Rate': 1.72,
|
||||
},
|
||||
{
|
||||
'year': 1982,
|
||||
'Export Growth Rate': 1.84,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1983,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1984,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.78,
|
||||
},
|
||||
{
|
||||
'year': 1985,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.81,
|
||||
},
|
||||
{
|
||||
'year': 1986,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.89,
|
||||
},
|
||||
{
|
||||
'year': 1987,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.91,
|
||||
},
|
||||
{
|
||||
'year': 1988,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1989,
|
||||
'Export Growth Rate': 1.76,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1990,
|
||||
'Export Growth Rate': 1.75,
|
||||
'Import Growth Rate': 1.97,
|
||||
},
|
||||
{
|
||||
'year': 1991,
|
||||
'Export Growth Rate': 1.62,
|
||||
'Import Growth Rate': 1.99,
|
||||
},
|
||||
{
|
||||
'year': 1992,
|
||||
'Export Growth Rate': 1.56,
|
||||
'Import Growth Rate': 2.12,
|
||||
},
|
||||
{
|
||||
'year': 1993,
|
||||
'Export Growth Rate': 1.5,
|
||||
'Import Growth Rate': 2.13,
|
||||
},
|
||||
{
|
||||
'year': 1994,
|
||||
'Export Growth Rate': 1.46,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1995,
|
||||
'Export Growth Rate': 1.43,
|
||||
'Import Growth Rate': 2.17,
|
||||
},
|
||||
{
|
||||
'year': 1996,
|
||||
'Export Growth Rate': 1.4,
|
||||
'Import Growth Rate': 2.2,
|
||||
},
|
||||
{
|
||||
'year': 1997,
|
||||
'Export Growth Rate': 1.37,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1998,
|
||||
'Export Growth Rate': 1.34,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 1999,
|
||||
'Export Growth Rate': 1.32,
|
||||
'Import Growth Rate': 2.05,
|
||||
},
|
||||
{
|
||||
'year': 2000,
|
||||
'Export Growth Rate': 1.33,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 2001,
|
||||
'Export Growth Rate': 1.31,
|
||||
'Import Growth Rate': 2.08,
|
||||
},
|
||||
{
|
||||
'year': 2002,
|
||||
'Export Growth Rate': 1.29,
|
||||
'Import Growth Rate': 2.1,
|
||||
},
|
||||
{
|
||||
'year': 2003,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 2004,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.21,
|
||||
},
|
||||
{
|
||||
'year': 2005,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.23,
|
||||
},
|
||||
{
|
||||
'year': 2006,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.29,
|
||||
},
|
||||
{
|
||||
'year': 2007,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2008,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2009,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2010,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2011,
|
||||
'Export Growth Rate': 1.24,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2012,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2013,
|
||||
'Export Growth Rate': 1.22,
|
||||
'Import Growth Rate': 2.3,
|
||||
},
|
||||
{
|
||||
'year': 2014,
|
||||
'Export Growth Rate': 1.2,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2015,
|
||||
'Export Growth Rate': 1.17,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2016,
|
||||
'Export Growth Rate': 1.16,
|
||||
'Import Growth Rate': 2.41,
|
||||
},
|
||||
{
|
||||
'year': 2017,
|
||||
'Export Growth Rate': 1.13,
|
||||
'Import Growth Rate': 2.44,
|
||||
},
|
||||
{
|
||||
'year': 2018,
|
||||
'Export Growth Rate': 1.07,
|
||||
'Import Growth Rate': 2.45,
|
||||
},
|
||||
{
|
||||
'year': 2019,
|
||||
'Export Growth Rate': 1.03,
|
||||
'Import Growth Rate': 2.47,
|
||||
},
|
||||
{
|
||||
'year': 2020,
|
||||
'Export Growth Rate': 0.92,
|
||||
'Import Growth Rate': 2.48,
|
||||
},
|
||||
{
|
||||
'year': 2021,
|
||||
'Export Growth Rate': 0.82,
|
||||
'Import Growth Rate': 2.51,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LineChart
|
||||
:data="data"
|
||||
index="year"
|
||||
:categories="['Export Growth Rate', 'Import Growth Rate']"
|
||||
:y-formatter="(tick, i) => {
|
||||
return typeof tick === 'number'
|
||||
? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
|
||||
: ''
|
||||
}"
|
||||
:custom-tooltip="CustomChartTooltip"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,285 @@
|
|||
<script setup lang="ts">
|
||||
import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
|
||||
|
||||
const data = [
|
||||
{
|
||||
'year': 1970,
|
||||
'Export Growth Rate': 2.04,
|
||||
'Import Growth Rate': 1.53,
|
||||
},
|
||||
{
|
||||
'year': 1971,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.58,
|
||||
},
|
||||
{
|
||||
'year': 1972,
|
||||
'Export Growth Rate': 1.96,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1973,
|
||||
'Export Growth Rate': 1.93,
|
||||
'Import Growth Rate': 1.61,
|
||||
},
|
||||
{
|
||||
'year': 1974,
|
||||
'Export Growth Rate': 1.88,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1975,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.64,
|
||||
},
|
||||
{
|
||||
'year': 1976,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.62,
|
||||
},
|
||||
{
|
||||
'year': 1977,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.69,
|
||||
},
|
||||
{
|
||||
'year': 1978,
|
||||
'Export Growth Rate': 1.74,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1979,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.67,
|
||||
},
|
||||
{
|
||||
'year': 1980,
|
||||
'Export Growth Rate': 1.79,
|
||||
'Import Growth Rate': 1.7,
|
||||
},
|
||||
{
|
||||
'year': 1981,
|
||||
'Export Growth Rate': 1.81,
|
||||
'Import Growth Rate': 1.72,
|
||||
},
|
||||
{
|
||||
'year': 1982,
|
||||
'Export Growth Rate': 1.84,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1983,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.73,
|
||||
},
|
||||
{
|
||||
'year': 1984,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.78,
|
||||
},
|
||||
{
|
||||
'year': 1985,
|
||||
'Export Growth Rate': 1.78,
|
||||
'Import Growth Rate': 1.81,
|
||||
},
|
||||
{
|
||||
'year': 1986,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.89,
|
||||
},
|
||||
{
|
||||
'year': 1987,
|
||||
'Export Growth Rate': 1.82,
|
||||
'Import Growth Rate': 1.91,
|
||||
},
|
||||
{
|
||||
'year': 1988,
|
||||
'Export Growth Rate': 1.77,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1989,
|
||||
'Export Growth Rate': 1.76,
|
||||
'Import Growth Rate': 1.94,
|
||||
},
|
||||
{
|
||||
'year': 1990,
|
||||
'Export Growth Rate': 1.75,
|
||||
'Import Growth Rate': 1.97,
|
||||
},
|
||||
{
|
||||
'year': 1991,
|
||||
'Export Growth Rate': 1.62,
|
||||
'Import Growth Rate': 1.99,
|
||||
},
|
||||
{
|
||||
'year': 1992,
|
||||
'Export Growth Rate': 1.56,
|
||||
'Import Growth Rate': 2.12,
|
||||
},
|
||||
{
|
||||
'year': 1993,
|
||||
'Export Growth Rate': 1.5,
|
||||
'Import Growth Rate': 2.13,
|
||||
},
|
||||
{
|
||||
'year': 1994,
|
||||
'Export Growth Rate': 1.46,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1995,
|
||||
'Export Growth Rate': 1.43,
|
||||
'Import Growth Rate': 2.17,
|
||||
},
|
||||
{
|
||||
'year': 1996,
|
||||
'Export Growth Rate': 1.4,
|
||||
'Import Growth Rate': 2.2,
|
||||
},
|
||||
{
|
||||
'year': 1997,
|
||||
'Export Growth Rate': 1.37,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 1998,
|
||||
'Export Growth Rate': 1.34,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 1999,
|
||||
'Export Growth Rate': 1.32,
|
||||
'Import Growth Rate': 2.05,
|
||||
},
|
||||
{
|
||||
'year': 2000,
|
||||
'Export Growth Rate': 1.33,
|
||||
'Import Growth Rate': 2.07,
|
||||
},
|
||||
{
|
||||
'year': 2001,
|
||||
'Export Growth Rate': 1.31,
|
||||
'Import Growth Rate': 2.08,
|
||||
},
|
||||
{
|
||||
'year': 2002,
|
||||
'Export Growth Rate': 1.29,
|
||||
'Import Growth Rate': 2.1,
|
||||
},
|
||||
{
|
||||
'year': 2003,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.15,
|
||||
},
|
||||
{
|
||||
'year': 2004,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.21,
|
||||
},
|
||||
{
|
||||
'year': 2005,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.23,
|
||||
},
|
||||
{
|
||||
'year': 2006,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.29,
|
||||
},
|
||||
{
|
||||
'year': 2007,
|
||||
'Export Growth Rate': 1.27,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2008,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2009,
|
||||
'Export Growth Rate': 1.26,
|
||||
'Import Growth Rate': 2.36,
|
||||
},
|
||||
{
|
||||
'year': 2010,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2011,
|
||||
'Export Growth Rate': 1.24,
|
||||
'Import Growth Rate': 2.34,
|
||||
},
|
||||
{
|
||||
'year': 2012,
|
||||
'Export Growth Rate': 1.25,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2013,
|
||||
'Export Growth Rate': 1.22,
|
||||
'Import Growth Rate': 2.3,
|
||||
},
|
||||
{
|
||||
'year': 2014,
|
||||
'Export Growth Rate': 1.2,
|
||||
'Import Growth Rate': 2.35,
|
||||
},
|
||||
{
|
||||
'year': 2015,
|
||||
'Export Growth Rate': 1.17,
|
||||
'Import Growth Rate': 2.39,
|
||||
},
|
||||
{
|
||||
'year': 2016,
|
||||
'Export Growth Rate': 1.16,
|
||||
'Import Growth Rate': 2.41,
|
||||
},
|
||||
{
|
||||
'year': 2017,
|
||||
'Export Growth Rate': 1.13,
|
||||
'Import Growth Rate': 2.44,
|
||||
},
|
||||
{
|
||||
'year': 2018,
|
||||
'Export Growth Rate': 1.07,
|
||||
'Import Growth Rate': 2.45,
|
||||
},
|
||||
{
|
||||
'year': 2019,
|
||||
'Export Growth Rate': 1.03,
|
||||
'Import Growth Rate': 2.47,
|
||||
},
|
||||
{
|
||||
'year': 2020,
|
||||
'Export Growth Rate': 0.92,
|
||||
'Import Growth Rate': 2.48,
|
||||
},
|
||||
{
|
||||
'year': 2021,
|
||||
'Export Growth Rate': 0.82,
|
||||
'Import Growth Rate': 2.51,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LineChart
|
||||
index="year"
|
||||
class="h-[100px] w-[400px]"
|
||||
:data="data"
|
||||
:categories="['Export Growth Rate']"
|
||||
:y-formatter="(tick, i) => {
|
||||
return typeof tick === 'number'
|
||||
? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
|
||||
: ''
|
||||
}"
|
||||
:show-tooltip="false"
|
||||
:show-grid-line="false"
|
||||
:show-legend="false"
|
||||
:show-x-axis="false"
|
||||
:show-y-axis="false"
|
||||
/>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user