@torpor/ui 0.3.6 → 0.4.0

package/dist/Charts/PieChart.torp

@@ -0,0 +1,145 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { chartColors } from "../utils/chartColors";
+
+interface PieData {
+	name: string;
+	value: number;
+	color: string;
+}
+
+interface SegmentData {
+	name: string;
+	value: number;
+	color: string;
+	path: string;
+}
+
+interface PieChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	data: PieData[],
+	size?: number,
+	radius?: number,
+	cutout?: number,
+}
+
+export default function PieChart($props: PieChartProps) {
+	// Default values
+	$props.size ||= 200;
+	$props.radius ||= 50;
+
+	// NOTE: Take two pixels off the radius so that the stroke doesn't go outside the border
+	let $state = $watch({
+		get radius() {
+			return ($props.radius! / 100) * $props.size! - 2;
+		},
+		get cutout() {
+			return ($props.cutout! / 100) * $props.size! - 2;
+		},
+		get segments() {
+			return buildSegments($props.size!, $props.data, $props.radius!, $props.cutout!);
+		}
+	});
+
+	function buildSegments(
+		theSize: number,
+		theData: PieData[],
+		theRadiusSize: number,
+		theCutoutSize: number
+	): SegmentData[] {
+		const segments = [];
+		const x = theSize / 2;
+		const y = theSize / 2;
+		const totalValue = theData.reduce((a, b) => a + b.value, 0);
+
+		// Start at the top of the chart, at 180 + 360 so that we don't have to
+		// take wrapping angles into account
+		let startAngle = 540;
+		for (let i = 0; i < theData.length; i++) {
+			// Subtract the angle to go clockwise
+			const endAngle = startAngle - (theData[i].value / totalValue) * 360;
+			const largeArc = startAngle - endAngle > 180 ? 1 : 0;
+			segments.push({
+				name: theData[i].name,
+				value: theData[i].value,
+				color: theData[i].color,
+				path: buildPath(x, y, theRadiusSize, theCutoutSize, startAngle, endAngle, largeArc)
+			});
+			startAngle = endAngle;
+		}
+		return segments;
+	}
+
+	function buildPath(
+		x: number,
+		y: number,
+		theRadiusSize: number,
+		theCutoutSize: number,
+		startAngle: number,
+		endAngle: number,
+		largeArc: number
+	): string {
+		// HACK: Drawing an arc of 360 degrees doesn't work
+		if (startAngle - endAngle === 360) {
+			endAngle = 359.9999;
+		}
+
+		// Use some trig to find the points on the circumference at the start and end angles
+		const startx = x + theRadiusSize * Math.sin((Math.PI * startAngle) / 180);
+		const starty = x + theRadiusSize * Math.cos((Math.PI * startAngle) / 180);
+
+		const endx = x + theRadiusSize * Math.sin((Math.PI * endAngle) / 180);
+		const endy = y + theRadiusSize * Math.cos((Math.PI * endAngle) / 180);
+
+		if ($props.cutout) {
+			// Use some trig to find the points on the cutout at the start and end angles
+			const cutoutstartx = x + theCutoutSize * Math.sin((Math.PI * startAngle) / 180);
+			const cutoutstarty = x + theCutoutSize * Math.cos((Math.PI * startAngle) / 180);
+
+			const cutoutendx = x + theCutoutSize * Math.sin((Math.PI * endAngle) / 180);
+			const cutoutendy = y + theCutoutSize * Math.cos((Math.PI * endAngle) / 180);
+
+			// Build the path - move to the cutout start, line to the start angle on the circumference,
+			// arc to the end angle on the circumference, line to the cutout end, and then arc to the
+			// cutout start
+			const path = `
+M${cutoutstartx},${cutoutstarty}
+L${startx},${starty}
+A${theRadiusSize},${theRadiusSize} 0 ${largeArc} 1 ${endx},${endy}
+L${cutoutendx},${cutoutendy}
+A${theCutoutSize},${theCutoutSize} 0 ${largeArc} 0 ${cutoutstartx},${cutoutstarty}`.trim();
+			return path;
+		} else {
+			// Build the path - move to the origin, line to the start angle on the circumference,
+			// arc to the end angle on the circumference, and then close back to the start
+			const path = `M${x},${y} L${startx},${starty} A${theRadiusSize},${theRadiusSize} 0 ${largeArc} 1 ${endx},${endy} Z`;
+			return path;
+		}
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-pie-chart", $props?.class]}
+			{$props?.style}
+		>
+			<svg
+				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]}>
+							<title>{`${segment.name}\n${segment.value}`}</title>
+						</path>
+					}
+				</g>
+			</svg>
+		</div>
+	}
+}

package/dist/Charts/ScatterChart.torp

@@ -0,0 +1,215 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import XAxis from "./XAxis.torp";
+import YAxis from "./YAxis.torp";
+import GridLines from "./GridLines.torp";
+import {
+	calculateStepValue,
+	calculateStepLabels,
+	calculateValueHeight,
+	calculateChartBottom,
+	calculateChartLeft
+} from "../utils/chartUtils";
+import { chartColors } from "../utils/chartColors";
+
+interface Pair {
+	x: number;
+	y: number;
+	label: string;
+}
+
+interface DataSeries {
+	name: string;
+	color: string;
+	data: Pair[];
+}
+
+interface ScatterChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	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,
+}
+
+export default function ScatterChart($props: ScatterChartProps) {
+	const defaultHeight = 200;
+	const defaultWidth = 400;
+
+	let container: HTMLElement;
+	let measurer: SVGTextElement;
+
+	let $state = $watch({
+		textWidth: 0,
+		textHeight: 0,
+		get calculatedHeight() {
+			return $props.height || defaultHeight;
+		},
+		get calculatedWidth() {
+			return $props.width || container?.clientWidth || defaultWidth;
+		},
+		get maxXValue() {
+			return calculateMaxValue($props.series, "x");
+		},
+		get calculatedXStepValue() {
+			return $props.xStepValue || calculateStepValue($state.maxXValue, $props.xStepCount);
+		},
+		get xStepLabels() {
+			return calculateStepLabels($props.xStepCount || 2, $state.calculatedXStepValue);
+		},
+		get maxYValue() {
+			return calculateMaxValue($props.series, "y");
+		},
+		get calculatedYStepValue() {
+			return $props.yStepValue || calculateStepValue($state.maxYValue, $props.yStepCount);
+		},
+		get yStepLabels() {
+			return calculateStepLabels($props.yStepCount || 2, $state.calculatedYStepValue);
+		},
+		get itemWidth() {
+			return calculateValueHeight(
+				$state.calculatedWidth - $state.chartLeft,
+				$state.textHeight,
+				$state.calculatedXStepValue,
+				$props.xStepCount || 2
+			);
+		},
+		get valueHeight() {
+			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);
+		},
+		get pointSeries() {
+			return buildPointSeries(
+				$props.series,
+				$state.chartLeft,
+				$state.chartBottom,
+				$state.itemWidth,
+				$state.valueHeight
+			);
+		},
+	});
+
+	$mount(() => {
+		// HACK: Wait until the measurer is really available
+		setTimeout(() => {
+			const bbox = measurer.getBBox();
+			$state.textWidth = bbox.width;
+			$state.textHeight = bbox.height * 1.5;
+			measurer.remove();
+		}, 1);
+	});
+
+	function calculateMaxValue(series: DataSeries[], field: "x" | "y") {
+		// HACK: Yeah, nested reduces
+		return series.reduce((a, b) => {
+			return Math.max(
+				a,
+				b.data.reduce((c, d) => Math.max(c, field === "x" ? d.x : d.y), 0)
+			);
+		}, 0);
+	}
+
+	function buildPointSeries(
+		theSeries: DataSeries[],
+		theChartLeft: number,
+		theChartBottom: number,
+		theItemWidth: number,
+		theValueHeight: number
+	) {
+		return theSeries.map((series) => {
+			return series.data.map((item) => {
+				const x = +(theChartLeft + item.x * theItemWidth).toFixed(2);
+				const y = +(theChartBottom - item.y * theValueHeight).toFixed(2);
+				return { x, y };
+			});
+		});
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-scatter-chart", $props?.class]}
+			{$props?.style}
+			&ref={container}
+		>
+			<svg version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight}>
+				<g>
+				 	<text &ref={measurer} x="-999" y="-999">8</text>
+
+					@if ($state.textWidth && $state.textHeight) {
+						<XAxis
+							showAxis={!$props.hideXAxis}
+							height={$state.calculatedHeight}
+							width={$state.calculatedWidth}
+							{$state.itemWidth}
+							{$state.textHeight}
+							xLabel={$props.xLabel ?? ""}
+							labels={[]}
+							stepLabels={$state.xStepLabels}
+							stepValue={$state.calculatedXStepValue}
+							{$state.chartLeft}
+							{$state.chartBottom}
+						/>
+						<YAxis
+							showAxis={!$props.hideYAxis}
+							{$state.valueHeight}
+							{$state.textHeight}
+							yLabel={$props.yLabel ?? ""}
+							stepLabels={$state.yStepLabels}
+							stepValue={$state.calculatedYStepValue}
+							{$state.chartLeft}
+							{$state.chartBottom}
+						/>
+						<GridLines
+							{$props.showHLines}
+							{$props.showVLines}
+							width={$state.calculatedWidth}
+							labels={[]}
+							xStepValue={$state.calculatedXStepValue}
+							{$state.xStepLabels}
+							yStepValue={$state.calculatedYStepValue}
+							{$state.yStepLabels}
+							{$state.itemWidth}
+							{$state.valueHeight}
+							{$state.chartLeft}
+							{$state.chartBottom}
+							type="line"
+						/>
+						@for (let [i, series] of $props.series.entries()) {
+							@for (let [j, point] of $state.pointSeries[i].entries()) {
+								<circle
+									cx={point.x}
+									cy={point.y}
+									r="4"
+									fill={series.color || chartColors[i % chartColors.length]}
+								>
+									<title>{
+										`${[series.name, series.data[j].label, series.data[j].x].filter(Boolean).join("\n")}, ${series.data[j].y}`
+									}</title>
+								</circle>
+							}
+						}
+					}
+				</g>
+			</svg>
+		</div>
+	}
+}

package/dist/Charts/SparkLine.torp

@@ -0,0 +1,71 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { calculateMaxValue } from "../utils/chartUtils";
+import { chartColors } from "../utils/chartColors";
+
+interface SparkLineProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	data: number[];
+	color?: string,
+	height?: number,
+	width?: number,
+}
+
+export default function SparkLine($props: SparkLineProps) {
+	const defaultHeight = 20;
+	const defaultWidth = 100;
+
+	let container: HTMLElement;
+
+	let $state = $watch({
+		get calculatedHeight() {
+			return $props.height || defaultHeight;
+		},
+		get calculatedWidth() { 
+			return $props.width || container?.clientWidth || defaultWidth;
+		},
+		get calculatedSeries() { 
+			return [{ name: "", color: $props.color ?? "", data: $props.data }];
+		},
+		get maxValue() { 
+			return calculateMaxValue($state.calculatedSeries);
+		},
+		get itemWidth() { 
+			return $state.calculatedWidth / $props.data.length;
+		},
+		get valueHeight() { 
+			return ($state.calculatedHeight - 4) / $state.maxValue;
+		},
+		get pointSeries() {
+			return $props.data.map((value, i) => {
+				const x = +(i * $state.itemWidth).toFixed(2);
+				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}>
+				<g>
+					<polyline
+						points={$state.pointSeries.map((p) => `${p.x},${p.y}`).join(" ")}
+						stroke={$props.color || chartColors[0]}
+						stroke-width="2"
+						fill="none"
+					/>
+				</g>
+			</svg>
+		</div>
+	}
+}

package/dist/Charts/XAxis.torp

@@ -0,0 +1,66 @@
+interface XAxisProps {
+	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) {
+	let $state = $watch({
+		chartLabelBottom: $props.xLabel ? $props.height - $props.textHeight : $props.height,
+	});
+
+	@render {
+		<svg>
+			@if ($props.showAxis) {
+				<line
+					x1={$props.chartLeft}
+					y1={$props.chartBottom}
+					x2={$props.width}
+					y2={$props.chartBottom}
+					stroke="currentcolor"
+				/>
+			}
+			@if ($props.xLabel) {
+				<text
+					text-anchor="middle"
+					dominant-baseline="text-after-edge"
+					x={$props.width - ($props.width - $props.chartLeft) / 2}
+					y={$props.height}
+				>
+					{$props.xLabel}
+				</text>
+			}
+			@if ($props.stepLabels.length && $props.stepValue) {
+				@for (let [i, label] of $props.stepLabels.entries()) {
+					<text
+						text-anchor="middle"
+						dominant-baseline="text-after-edge"
+						x={$props.chartLeft + i * $props.stepValue * $props.itemWidth}
+						y={$state.chartLabelBottom}
+					>
+						{label}
+					</text>
+				}
+			} else {
+				@for (let [i, label] of $props.labels.entries()) {
+					<text
+						text-anchor="middle"
+						dominant-baseline="text-after-edge"
+						x={$props.chartLeft + $props.itemWidth * i + $props.itemWidth / 2}
+						y={$state.chartLabelBottom}
+					>
+						{label}
+					</text>
+				}
+			}
+		</svg>
+	}
+}

package/dist/Charts/YAxis.torp

@@ -0,0 +1,47 @@
+interface YAxisProps {
+	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}
+					stroke="currentcolor"
+				/>
+			}
+			@if ($props.yLabel) {
+				<text
+					text-anchor="middle"
+					dominant-baseline="hanging"
+					x={0}
+					y={$props.chartBottom / 2}
+					transform={`rotate(-90, ${0}, ${$props.chartBottom / 2})`}
+				>
+					{$props.yLabel}
+				</text>
+			}
+			@for (let [i, label] of $props.stepLabels.entries()) {
+				<text
+					text-anchor="end"
+					dominant-baseline="middle"
+					x={$props.chartLeft - $props.textHeight / 4}
+					y={$props.chartBottom - i * $props.stepValue * $props.valueHeight}
+				>
+					{label}
+				</text>
+			}
+		</svg>
+	}
+}