mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
71 lines
2.8 KiB
Plaintext
71 lines
2.8 KiB
Plaintext
---
|
|
// Sparkline (.sparkline): a tiny inline SVG chart drawn by core/js/src/sparkline.ts
|
|
// from the data attributes this component emits. No chart library needed.
|
|
|
|
/** core/js/src/sparkline.ts chart types */
|
|
export type SparklineType = 'line' | 'bar' | 'tristate' | 'circle'
|
|
/** core/scss/ui/_sparkline.scss `.sparkline-{size}` modifier classes */
|
|
export type SparklineSize = 'sm' | 'lg'
|
|
|
|
interface Props {
|
|
/** the numbers to draw, as an array or a comma-separated string */
|
|
values: number[] | string
|
|
type?: SparklineType
|
|
/** text-{color} on the element; the chart draws with currentColor */
|
|
color?: string | undefined
|
|
size?: SparklineSize | undefined
|
|
/** sparkline-square: width equal to the height, for the circle type */
|
|
square?: boolean | undefined
|
|
/** data-bs-fill="auto": tinted area under a line */
|
|
fill?: boolean | undefined
|
|
/** data-bs-spot: mark one value on a line with a dot */
|
|
spot?: 'last' | 'min' | 'max' | undefined
|
|
/** data-bs-min / data-bs-max: a fixed value range */
|
|
min?: number | undefined
|
|
max?: number | undefined
|
|
/** data-bs-threshold: a dashed guide line at this value */
|
|
threshold?: number | undefined
|
|
/** data-bs-label: text centered over the chart; `auto` derives it from the data */
|
|
label?: string | number | 'auto' | undefined
|
|
/** data-bs-bar-gap / data-bs-bar-radius, in SVG units */
|
|
barGap?: number | undefined
|
|
barRadius?: number | undefined
|
|
/** data-bs-animation: tween length of update() in ms; 0 turns it off */
|
|
animation?: number | undefined
|
|
/** sparkline-disabled: greys the chart out */
|
|
disabled?: boolean | undefined
|
|
/** accessible name; the SVG itself is hidden from assistive technology */
|
|
ariaLabel?: string | undefined
|
|
class?: string
|
|
/** remaining attributes (id, style, data-*, …) are forwarded to the root element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { values, type = 'line', color, size, square, fill, spot, min, max, threshold, label, barGap, barRadius, animation, disabled, ariaLabel, class: className, ...rest } = Astro.props
|
|
|
|
const serialized = Array.isArray(values) ? values.join(',') : values
|
|
const isCircle = type === 'circle'
|
|
|
|
const classes = ['sparkline', size && `sparkline-${size}`, (square || isCircle) && 'sparkline-square', disabled && 'sparkline-disabled', color && `text-${color}`, className]
|
|
---
|
|
|
|
<span
|
|
class:list={classes}
|
|
data-bs-toggle="sparkline"
|
|
data-bs-type={type === 'line' ? undefined : type}
|
|
data-bs-values={serialized}
|
|
data-bs-fill={fill ? 'auto' : undefined}
|
|
data-bs-spot={spot}
|
|
data-bs-min={min}
|
|
data-bs-max={max}
|
|
data-bs-threshold={threshold}
|
|
data-bs-label={label}
|
|
data-bs-bar-gap={barGap}
|
|
data-bs-bar-radius={barRadius}
|
|
data-bs-animation={animation}
|
|
data-bs-width={isCircle ? 40 : undefined}
|
|
data-bs-height={isCircle ? 40 : undefined}
|
|
role={ariaLabel ? 'img' : undefined}
|
|
aria-label={ariaLabel}
|
|
{...rest}></span>
|