@torpor/ui 0.3.7 → 1.0.0

package/dist/{Chart → Charts}/GridLines.torp

@@ -4,11 +4,11 @@ interface GridLinesProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	showHLines?: boolean,
-	showVLines?: boolean,
+	style?: StyleValue;
+	showHLines?: boolean;
+	showVLines?: boolean;
 	width: number;
 	labels: string[];
 	xStepValue: number;
@@ -32,6 +32,7 @@ export default function GridLines($props: GridLinesProps) {
 						y1={$props.chartBottom - i * $props.yStepValue * $props.valueHeight}
 						x2={$props.width ?? 0}
 						y2={$props.chartBottom - i * $props.yStepValue * $props.valueHeight}
+						stroke="currentcolor"
 					/>
 				}
 			}
@@ -44,6 +45,7 @@ export default function GridLines($props: GridLinesProps) {
 							y1={$props.chartBottom}
 							x2={$props.chartLeft + i * $props.xStepValue * $props.itemWidth}
 							y2={0}
+							stroke="currentcolor"
 						/>
 					}
 				} else {
@@ -53,6 +55,7 @@ export default function GridLines($props: GridLinesProps) {
 							y1={$props.chartBottom}
 							x2={$props.chartLeft + i * $props.itemWidth + ($props.type === "bar" ? 0 : $props.itemWidth / 2)}
 							y2={0}
+							stroke="currentcolor"
 						/>
 					}
 				}

package/dist/Charts/LineChart.torp

@@ -0,0 +1,73 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import Chart from "./Chart.torp";
+import ChartXAxis from "./ChartXAxis.torp";
+import ChartGrid from "./ChartGrid.torp";
+import ChartLines from "./ChartLines.torp";
+import ChartYAxis from "./ChartYAxis.torp";
+import type DataSeries from "./DataSeries";
+
+interface LineChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label describing the chart for screen readers */
+	ariaLabel?: string;
+	series: DataSeries[];
+	height?: number;
+	width?: number;
+	xLabel?: string;
+	yLabel?: string;
+	maxValue?: number;
+	stepCount?: number;
+	stepValue?: number;
+	showPoints?: boolean;
+	showHLines?: boolean;
+	showVLines?: boolean;
+}
+
+/**
+ * A line chart: each series drawn as a connected line across the category
+ * slots.
+ *
+ * This is a preset over the layered chart components:
+ *
+ * ```
+ * <Chart>
+ * 	<ChartValueAxis />
+ * 	<ChartGrid />
+ * 	<ChartXAxis />
+ * 	<ChartLines seriesIndex={0} />
+ * </Chart>
+ * ```
+ *
+ * Compose those directly for overlaid layers (columns plus a line, multiple
+ * separately-indexed lines etc).
+ */
+export default function LineChart($props: LineChartProps) {
+	@render {
+		<Chart
+			{$props?.id}
+			class={["torp-line-chart", $props?.class]}
+			{$props?.style}
+			{$props?.ariaLabel}
+			{$props?.series}
+			{$props?.height}
+			{$props?.width}
+			{$props?.xLabel}
+			{$props?.yLabel}
+			{$props?.maxValue}
+			{$props?.stepCount}
+			{$props?.stepValue}
+		>
+			<ChartYAxis />
+			<ChartGrid hLines={$props.showHLines === true} vLines={$props.showVLines === true} />
+			<ChartXAxis />
+			@for (let i of $props.series.map((_, i) => i)) {
+				<ChartLines seriesIndex={i} showPoints={$props.showPoints} />
+			}
+		</Chart>
+	}
+}

package/dist/{Chart → Charts}/PieChart.torp

@@ -18,13 +18,15 @@ interface PieChartProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	data: PieData[],
-	size?: number,
-	radius?: number,
-	cutout?: number,
+	style?: StyleValue;
+	/** An ARIA label describing the chart for screen readers */
+	ariaLabel?: string;
+	data: PieData[];
+	size?: number;
+	radius?: number;
+	cutout?: number;
 }
 
 export default function PieChart($props: PieChartProps) {
@@ -42,14 +44,14 @@ export default function PieChart($props: PieChartProps) {
 		},
 		get segments() {
 			return buildSegments($props.size!, $props.data, $props.radius!, $props.cutout!);
-		}
+		},
 	});
 
 	function buildSegments(
 		theSize: number,
 		theData: PieData[],
 		theRadiusSize: number,
-		theCutoutSize: number
+		theCutoutSize: number,
 	): SegmentData[] {
 		const segments = [];
 		const x = theSize / 2;
@@ -67,7 +69,7 @@ export default function PieChart($props: PieChartProps) {
 				name: theData[i].name,
 				value: theData[i].value,
 				color: theData[i].color,
-				path: buildPath(x, y, theRadiusSize, theCutoutSize, startAngle, endAngle, largeArc)
+				path: buildPath(x, y, theRadiusSize, theCutoutSize, startAngle, endAngle, largeArc),
 			});
 			startAngle = endAngle;
 		}
@@ -81,7 +83,7 @@ export default function PieChart($props: PieChartProps) {
 		theCutoutSize: number,
 		startAngle: number,
 		endAngle: number,
-		largeArc: number
+		largeArc: number,
 	): string {
 		// HACK: Drawing an arc of 360 degrees doesn't work
 		if (startAngle - endAngle === 360) {
@@ -122,16 +124,8 @@ A${theCutoutSize},${theCutoutSize} 0 ${largeArc} 0 ${cutoutstartx},${cutoutstart
 	}
 
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-pie-chart", $props?.class]}
-			{$props?.style}
-		>
-			<svg
-				version="1.1"
-				width={$props.size}
-				height={$props.size}
-			>
+		<div {$props?.id} class={["torp-pie-chart", $props?.class]} {$props?.style}>
+			<svg role={$props?.ariaLabel ? "img" : undefined} aria-label={$props?.ariaLabel} version="1.1" width={$props.size} height={$props.size}>
 				<g>
 					@for (let [i, segment] of $state.segments.entries()) {
 						<path d={segment.path} fill={segment.color || chartColors[i % chartColors.length]}>

package/dist/{Chart → Charts}/ScatterChart.torp

@@ -1,15 +1,15 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import XAxis from "./XAxis.torp";
-import YAxis from "./YAxis.torp";
-import GridLines from "./GridLines.torp";
+import { chartColors } from "../utils/chartColors";
 import {
-	calculateStepValue,
+	calculateChartBottom,
+	calculateChartLeft,
 	calculateStepLabels,
+	calculateStepValue,
 	calculateValueHeight,
-	calculateChartBottom,
-	calculateChartLeft
 } from "../utils/chartUtils";
-import { chartColors } from "../utils/chartColors";
+import GridLines from "./GridLines.torp";
+import XAxis from "./XAxis.torp";
+import YAxis from "./YAxis.torp";
 
 interface Pair {
 	x: number;
@@ -27,22 +27,24 @@ interface ScatterChartProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	series: DataSeries[],
-	height?: number,
-	width?: number,
-	xLabel?: string,
-	yLabel?: string,
-	xStepCount?: number,
-	xStepValue?: number,
-	yStepCount?: number,
-	yStepValue?: number,
-	hideXAxis?: boolean,
-	hideYAxis?: boolean,
-	showHLines?: boolean,
-	showVLines?: boolean,
+	style?: StyleValue;
+	/** An ARIA label describing the chart for screen readers */
+	ariaLabel?: string;
+	series: DataSeries[];
+	height?: number;
+	width?: number;
+	xLabel?: string;
+	yLabel?: string;
+	xStepCount?: number;
+	xStepValue?: number;
+	yStepCount?: number;
+	yStepValue?: number;
+	hideXAxis?: boolean;
+	hideYAxis?: boolean;
+	showHLines?: boolean;
+	showVLines?: boolean;
 }
 
 export default function ScatterChart($props: ScatterChartProps) {
@@ -84,17 +86,27 @@ export default function ScatterChart($props: ScatterChartProps) {
 				$state.calculatedWidth - $state.chartLeft,
 				$state.textHeight,
 				$state.calculatedXStepValue,
-				$props.xStepCount || 2
+				$props.xStepCount || 2,
 			);
 		},
 		get valueHeight() {
-			return calculateValueHeight($state.chartBottom, $state.textHeight, $state.calculatedYStepValue, $props.yStepCount || 2);
+			return calculateValueHeight(
+				$state.chartBottom,
+				$state.textHeight,
+				$state.calculatedYStepValue,
+				$props.yStepCount || 2,
+			);
 		},
 		get chartBottom() {
 			return calculateChartBottom($props.xLabel ?? "", $state.calculatedHeight, $state.textHeight);
 		},
 		get chartLeft() {
-			return calculateChartLeft($state.yStepLabels, $props.yLabel ?? "", $state.textHeight, $state.textWidth);
+			return calculateChartLeft(
+				$state.yStepLabels,
+				$props.yLabel ?? "",
+				$state.textHeight,
+				$state.textWidth,
+			);
 		},
 		get pointSeries() {
 			return buildPointSeries(
@@ -102,12 +114,12 @@ export default function ScatterChart($props: ScatterChartProps) {
 				$state.chartLeft,
 				$state.chartBottom,
 				$state.itemWidth,
-				$state.valueHeight
+				$state.valueHeight,
 			);
 		},
 	});
 
-	$mount(() => {
+	$onmount(() => {
 		// HACK: Wait until the measurer is really available
 		setTimeout(() => {
 			const bbox = measurer.getBBox();
@@ -122,7 +134,7 @@ export default function ScatterChart($props: ScatterChartProps) {
 		return series.reduce((a, b) => {
 			return Math.max(
 				a,
-				b.data.reduce((c, d) => Math.max(c, field === "x" ? d.x : d.y), 0)
+				b.data.reduce((c, d) => Math.max(c, field === "x" ? d.x : d.y), 0),
 			);
 		}, 0);
 	}
@@ -132,7 +144,7 @@ export default function ScatterChart($props: ScatterChartProps) {
 		theChartLeft: number,
 		theChartBottom: number,
 		theItemWidth: number,
-		theValueHeight: number
+		theValueHeight: number,
 	) {
 		return theSeries.map((series) => {
 			return series.data.map((item) => {
@@ -144,15 +156,10 @@ export default function ScatterChart($props: ScatterChartProps) {
 	}
 
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-scatter-chart", $props?.class]}
-			{$props?.style}
-			&ref={container}
-		>
-			<svg version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight}>
+		<div {$props?.id} class={["torp-scatter-chart", $props?.class]} {$props?.style} &ref={container}>
+			<svg role={$props?.ariaLabel ? "img" : undefined} aria-label={$props?.ariaLabel} version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight}>
 				<g>
-				 	<text &ref={measurer} x="-999" y="-999">8</text>
+					<text &ref={measurer} x="-999" y="-999">8</text>
 
 					@if ($state.textWidth && $state.textHeight) {
 						<XAxis
@@ -203,7 +210,7 @@ export default function ScatterChart($props: ScatterChartProps) {
 								>
 									<title>{
 										`${[series.name, series.data[j].label, series.data[j].x].filter(Boolean).join("\n")}, ${series.data[j].y}`
-									}</title>
+										}</title>
 								</circle>
 							}
 						}

package/dist/{Chart → Charts}/SparkLine.torp

@@ -1,18 +1,20 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { calculateMaxValue } from "../utils/chartUtils";
 import { chartColors } from "../utils/chartColors";
+import { calculateMaxValue } from "../utils/chartUtils";
 
 interface SparkLineProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** An ARIA label describing the chart for screen readers */
+	ariaLabel?: string;
 	data: number[];
-	color?: string,
-	height?: number,
-	width?: number,
+	color?: string;
+	height?: number;
+	width?: number;
 }
 
 export default function SparkLine($props: SparkLineProps) {
@@ -25,19 +27,19 @@ export default function SparkLine($props: SparkLineProps) {
 		get calculatedHeight() {
 			return $props.height || defaultHeight;
 		},
-		get calculatedWidth() { 
+		get calculatedWidth() {
 			return $props.width || container?.clientWidth || defaultWidth;
 		},
-		get calculatedSeries() { 
+		get calculatedSeries() {
 			return [{ name: "", color: $props.color ?? "", data: $props.data }];
 		},
-		get maxValue() { 
+		get maxValue() {
 			return calculateMaxValue($state.calculatedSeries);
 		},
-		get itemWidth() { 
+		get itemWidth() {
 			return $state.calculatedWidth / $props.data.length;
 		},
-		get valueHeight() { 
+		get valueHeight() {
 			return ($state.calculatedHeight - 4) / $state.maxValue;
 		},
 		get pointSeries() {
@@ -46,17 +48,12 @@ export default function SparkLine($props: SparkLineProps) {
 				const y = +($state.calculatedHeight - 2 - value * $state.valueHeight).toFixed(2);
 				return { x, y };
 			});
-		}
+		},
 	});
 
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-spark-line", $props?.class]}
-			{$props?.style}
-			&ref={container}
-		>
-			<svg version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight}>
+		<div {$props?.id} class={["torp-spark-line", $props?.class]} {$props?.style} &ref={container}>
+			<svg role={$props?.ariaLabel ? "img" : undefined} aria-label={$props?.ariaLabel} version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight}>
 				<g>
 					<polyline
 						points={$state.pointSeries.map((p) => `${p.x},${p.y}`).join(" ")}

package/dist/{Chart → Charts}/XAxis.torp

@@ -1,15 +1,15 @@
 interface XAxisProps {
-	showAxis: boolean,
-	height: number,
-	width: number,
-	itemWidth: number,
-	textHeight: number,
-	xLabel: string,
-	labels: string[] ,
-	stepLabels:number[] ,
-	stepValue: number,
-	chartLeft: number,
-	chartBottom: number,
+	showAxis: boolean;
+	height: number;
+	width: number;
+	itemWidth: number;
+	textHeight: number;
+	xLabel: string;
+	labels: string[];
+	stepLabels: number[];
+	stepValue: number;
+	chartLeft: number;
+	chartBottom: number;
 }
 
 export default function XAxis($props: XAxisProps) {
@@ -20,7 +20,13 @@ export default function XAxis($props: XAxisProps) {
 	@render {
 		<svg>
 			@if ($props.showAxis) {
-				<line x1={$props.chartLeft} y1={$props.chartBottom} x2={$props.width} y2={$props.chartBottom} />
+				<line
+					x1={$props.chartLeft}
+					y1={$props.chartBottom}
+					x2={$props.width}
+					y2={$props.chartBottom}
+					stroke="currentcolor"
+				/>
 			}
 			@if ($props.xLabel) {
 				<text

package/dist/{Chart → Charts}/YAxis.torp

@@ -1,19 +1,25 @@
 interface YAxisProps {
-	showAxis: boolean,
-	valueHeight: number,
-	textHeight: number,
-	yLabel: string,
-	stepLabels: number[],
-	stepValue: number,
-	chartLeft: number,
-	chartBottom: number,
+	showAxis: boolean;
+	valueHeight: number;
+	textHeight: number;
+	yLabel: string;
+	stepLabels: number[];
+	stepValue: number;
+	chartLeft: number;
+	chartBottom: number;
 }
 
 export default function YAxis($props: YAxisProps) {
 	@render {
 		<svg>
 			@if ($props.showAxis) {
-				<line x1={$props.chartLeft} y1={$props.chartBottom} x2={$props.chartLeft} y2={0} />
+				<line
+					x1={$props.chartLeft}
+					y1={$props.chartBottom}
+					x2={$props.chartLeft}
+					y2={0}
+					stroke="currentcolor"
+				/>
 			}
 			@if ($props.yLabel) {
 				<text