104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { TrendingUp } from "@lucide/vue"
|
|
|
|
import { CurveType } from "@unovis/ts"
|
|
import { VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import type {
|
|
ChartConfig,
|
|
} from "@/components/ui/chart"
|
|
import {
|
|
ChartContainer,
|
|
ChartCrosshair,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
componentToString,
|
|
} from "@/components/ui/chart"
|
|
|
|
const description = "A line chart"
|
|
|
|
const chartData = [
|
|
{ date: new Date("2024-01-01"), desktop: 186 },
|
|
{ date: new Date("2024-02-01"), desktop: 305 },
|
|
{ date: new Date("2024-03-01"), desktop: 237 },
|
|
{ date: new Date("2024-04-01"), desktop: 73 },
|
|
{ date: new Date("2024-05-01"), desktop: 209 },
|
|
{ date: new Date("2024-06-01"), desktop: 214 },
|
|
]
|
|
|
|
type Data = typeof chartData[number]
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: "Desktop",
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig
|
|
</script>
|
|
|
|
<template>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Line Chart - Linear</CardTitle>
|
|
<CardDescription>January - June 2024</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer :config="chartConfig">
|
|
<VisXYContainer
|
|
:data="chartData"
|
|
:margin="{ left: -24 }"
|
|
:y-domain="[0, undefined]"
|
|
>
|
|
<VisLine
|
|
:x="(d: Data) => d.date"
|
|
:y="(d: Data) => d.desktop"
|
|
:color="chartConfig.desktop.color"
|
|
:curve-type="CurveType.Linear"
|
|
/>
|
|
<VisAxis
|
|
type="x"
|
|
:x="(d: Data) => d.date"
|
|
:tick-line="false"
|
|
:domain-line="false"
|
|
:grid-line="false"
|
|
:num-ticks="6"
|
|
:tick-format="(d: number) => {
|
|
const date = new Date(d)
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
})
|
|
}"
|
|
:tick-values="chartData.map(d => d.date)"
|
|
/>
|
|
<VisAxis
|
|
type="y"
|
|
:num-ticks="3"
|
|
:tick-line="false"
|
|
:domain-line="false"
|
|
/>
|
|
<ChartTooltip />
|
|
<ChartCrosshair
|
|
:template="componentToString(chartConfig, ChartTooltipContent, { hideLabel: true })"
|
|
:color="chartConfig.desktop.color"
|
|
/>
|
|
</VisXYContainer>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter class="flex-col items-start gap-2 text-sm">
|
|
<div class="flex gap-2 font-medium leading-none">
|
|
Trending up by 5.2% this month <TrendingUp class="h-4 w-4" />
|
|
</div>
|
|
<div class="leading-none text-muted-foreground">
|
|
Showing total visitors for the last 6 months
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</template>
|