60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
|
<div class="w-20 h-10">
|
|
<Line :data="chartData" :options="chartOptions" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Line } from 'vue-chartjs'
|
|
import {
|
|
Chart as ChartJS,
|
|
LineElement,
|
|
PointElement,
|
|
LinearScale,
|
|
CategoryScale,
|
|
Filler
|
|
} from 'chart.js'
|
|
|
|
ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Filler)
|
|
|
|
const props = defineProps<{
|
|
data: number[]
|
|
}>()
|
|
|
|
const isUptrend = computed(() => {
|
|
if (props.data.length < 2) return true
|
|
return props.data[props.data.length - 1] >= props.data[0]
|
|
})
|
|
|
|
const lineColor = computed(() => isUptrend.value ? '#22c55e' : '#ef4444')
|
|
|
|
const chartData = computed(() => ({
|
|
labels: props.data.map((_, i) => i.toString()),
|
|
datasets: [{
|
|
data: props.data,
|
|
borderColor: lineColor.value,
|
|
backgroundColor: `${lineColor.value}20`,
|
|
borderWidth: 1.5,
|
|
fill: true,
|
|
tension: 0.3,
|
|
pointRadius: 0
|
|
}]
|
|
}))
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: false }
|
|
},
|
|
scales: {
|
|
x: { display: false },
|
|
y: { display: false }
|
|
},
|
|
elements: {
|
|
line: { borderCapStyle: 'round' as const }
|
|
}
|
|
}
|
|
</script>
|