tabler/shared/ui/ChartSparkline.astro

---
import CaptureScript from '../components/CaptureScript.astro';

interface Props {
	id?: string;
	type?: string;
	color?: string;
	height?: number;
	small?: boolean;
	wide?: boolean;
	data?: string | number;
	percentage?: string | number;
}

const {
	id,
	type = 'bar',
	color = 'primary',
	height: heightProp,
	small,
	wide,
	data: dataProp,
	percentage,
} = Astro.props;

const height = heightProp ?? (small ? 1.5 : 2.5);
const heightPx = Math.round(height * 16);

const data = percentage ?? dataProp;

const isSquare = type === 'pie' || type === 'donut';
const chartType = type === 'donut' ? 'radialBar' : type;

const classes = [
	'chart-sparkline',
	isSquare && 'chart-sparkline-square',
	wide && 'chart-sparkline-wide',
	small && 'chart-sparkline-sm',
]

const seriesData = String(data ?? '').split(',').map(Number);
const chartKey = `sparkline-${id}`;

const chartOptions = id
	? {
			chart: {
				type: chartType,
				fontFamily: 'inherit',
				height: heightPx,
				...(isSquare ? { width: heightPx } : {}),
				animations: { enabled: false },
				sparkline: { enabled: true },
			},
			tooltip: { enabled: false },
			...(type === 'donut'
				? {
						plotOptions: {
							radialBar: {
								hollow: { margin: 0, size: '75%' },
								track: { margin: 0 },
								dataLabels: { show: false },
							},
						},
					}
				: {}),
			...(type === 'area' ? { fill: { gradient: { opacityFrom: [0.1, 0.1] } } } : {}),
			...(type === 'area' || type === 'line' ? { stroke: { width: 2, lineCap: 'round' } } : {}),
			...(type === 'donut'
				? { colors: [`var(--tblr-${color})`], series: seriesData }
				: { series: [{ color: `var(--tblr-${color})`, data: seriesData }] }),
		}
	: undefined;
---

{id && <div class:list={classes} id={chartKey} />}
{
	id && (
		<CaptureScript>
			<!-- BEGIN CHART SPARKLINE -->
			<script define:vars={{ chartKey, chartOptions }}>
				function initSparkline() {
					window.tabler_chart ??= {};
					window.ApexCharts && (window.tabler_chart[chartKey] = new ApexCharts(document.getElementById(chartKey), chartOptions)).render();
				}

				document.readyState !== 'loading' ? initSparkline() : document.addEventListener('DOMContentLoaded', initSparkline, { once: true });
			</script>
			<!-- END CHART SPARKLINE -->
		</CaptureScript>
	)
}