You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
811 B
34 lines
811 B
<script lang="ts">
|
|
/** A compact, axis-less trend — line or bars — for inline use in tables, cards, feeds. */
|
|
import Chart from './chart.svelte';
|
|
import Area from './chart-area.svelte';
|
|
import Line from './chart-line.svelte';
|
|
import Bar from './chart-bar.svelte';
|
|
import type { SparklineProps } from './types';
|
|
|
|
let {
|
|
data,
|
|
x,
|
|
y,
|
|
as = 'line',
|
|
curve = 'monotone',
|
|
area = true,
|
|
color,
|
|
height = 40,
|
|
...frame
|
|
}: SparklineProps = $props();
|
|
|
|
const margin = { top: 3, right: 3, bottom: 3, left: 3 };
|
|
</script>
|
|
|
|
{#if as === 'bars'}
|
|
<Chart {data} {x} {y} {height} {...frame} xScale="band" padding={0.25} {margin}>
|
|
<Bar {color} />
|
|
</Chart>
|
|
{:else}
|
|
<Chart {data} {x} {y} {height} {...frame} {margin}>
|
|
{#if area}<Area {curve} {color} />{/if}
|
|
<Line {curve} {color} />
|
|
</Chart>
|
|
{/if}
|