Ronni Baslund
17ffd95a70
Upgrade both Nuxt apps to Nuxt 4.4.6 (vue-tsc 3, TypeScript 5.6, undici 7) and add a root tsconfig.json to each app. Fix the strict-null / noUncheckedIndexedAccess errors surfaced by Nuxt 4's stricter generated tsconfig and vue-tsc 3. Drop the nuxt-oidc-auth pnpm patch (Nuxt 4 fixes the prepare:types crash natively).
52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
// Tiny inline SVG sparkline. Takes a series of numbers and renders a stroked
|
|
// polyline plus a faint area fill underneath. Used on the partner dashboard
|
|
// (90-day MRR trend) and on the reports/revenue tab.
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
values: number[]
|
|
width?: number
|
|
height?: number
|
|
stroke?: string
|
|
fill?: string
|
|
strokeWidth?: number
|
|
showDot?: boolean
|
|
}>(),
|
|
{
|
|
width: 420,
|
|
height: 64,
|
|
stroke: 'var(--text)',
|
|
fill: 'var(--row-hover)',
|
|
strokeWidth: 1.4,
|
|
showDot: true,
|
|
},
|
|
)
|
|
|
|
const geometry = computed(() => {
|
|
const data = props.values
|
|
if (!data.length) return { line: '', area: '', last: { x: 0, y: 0 }, min: 0, max: 0 }
|
|
const min = Math.min(...data)
|
|
const max = Math.max(...data)
|
|
const range = max - min || 1
|
|
const pts = data.map((v, i) => {
|
|
const x = (i / (data.length - 1)) * props.width
|
|
const y = props.height - ((v - min) / range) * (props.height - 6) - 3
|
|
return [x, y] as const
|
|
})
|
|
const line = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`).join(' ')
|
|
const area = `${line} L ${props.width} ${props.height} L 0 ${props.height} Z`
|
|
const lastPt = pts[pts.length - 1]!
|
|
const last = { x: lastPt[0], y: lastPt[1] }
|
|
return { line, area, last, min, max }
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" preserveAspectRatio="none" style="display:block">
|
|
<path :d="geometry.area" :fill="fill" />
|
|
<path :d="geometry.line" fill="none" :stroke="stroke" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round" />
|
|
<circle v-if="showDot" :cx="geometry.last.x" :cy="geometry.last.y" :r="3" :fill="stroke" />
|
|
</svg>
|
|
</template>
|