@torpor/ui 0.4.0 → 1.0.0

package/dist/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/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/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) {

package/dist/Charts/YAxis.torp

@@ -1,12 +1,12 @@
 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) {