@torpor/ui 0.3.5 → 0.3.7

package/dist/Chart/BarChart.torp

@@ -0,0 +1,159 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import XAxis from "./XAxis.torp";
+import YAxis from "./YAxis.torp";
+import GridLines from "./GridLines.torp";
+import {
+	calculateMaxValue,
+	calculateStepValue,
+	calculateStepLabels,
+	calculateItemWidth,
+	calculateValueHeight,
+	calculateChartBottom,
+	calculateChartLeft
+} from "../utils/chartUtils";
+import { chartColors } from "../utils/chartColors";
+
+import type DataSeries from "./DataSeries";
+
+interface BarChartProps {
+	/** 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,
+	maxValue?: number,
+	stepCount?: number,
+	stepValue?: number,
+	hideXAxis?: boolean,
+	hideYAxis?: boolean,
+	showHLines?: boolean,
+	showVLines?: boolean,
+}
+
+export default function BarChart($props: BarChartProps) {
+	const defaultHeight = 200;
+	const defaultWidth = 400;
+
+	let container: HTMLElement;
+	let measurer: SVGTextElement;
+
+	let $state = $watch({
+		textWidth: 0,
+		textHeight: 0,
+		get labels() {
+			return $props.series.map((s) => s.name);
+		},
+		get calculatedHeight() { 
+			return $props.height || defaultHeight;
+		},
+		get calculatedWidth() { 
+			return $props.width || container?.clientWidth || defaultWidth;
+		},
+		get maxValue () {
+			return $props.maxValue || calculateMaxValue($props.series);
+		},
+		get calculatedStepValue() {
+			return $props.stepValue || calculateStepValue($state.maxValue, $props.stepCount);
+		},
+		get stepLabels() {
+			return calculateStepLabels($props.stepCount || 2, $state.calculatedStepValue);
+		},
+		get itemWidth() {
+			return calculateItemWidth($state.calculatedWidth, $state.chartLeft, $state.labels);
+		},
+		get valueHeight() {
+			return calculateValueHeight($state.chartBottom, $state.textHeight, $state.calculatedStepValue, $props.stepCount || 2);
+		},
+		get chartBottom() {
+			return calculateChartBottom($props.xLabel ?? "", $state.calculatedHeight, $state.textHeight);
+		},
+		get chartLeft() {
+			return calculateChartLeft($state.stepLabels, $props.yLabel ?? "", $state.textHeight, $state.textWidth);
+		}
+	});
+
+	$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);
+	});
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-bar-chart", $props?.class]}
+			{$props?.style}
+			&ref={container}
+		>
+			<svg version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight} xmlns="http://www.w3.org/2000/svg">
+				<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 ?? ""}
+							stepLabels={[]}
+							stepValue={0}
+							{$state.labels}
+							{$state.chartLeft}
+							{$state.chartBottom}
+						/>
+						<YAxis
+							showAxis={!$props.hideYAxis}
+							{$state.valueHeight}
+							{$state.textHeight}
+							yLabel={$props.yLabel ?? ""}
+							{$state.stepLabels}
+							stepValue={$state.calculatedStepValue}
+							{$state.chartLeft}
+							{$state.chartBottom}
+						/>
+						<GridLines
+							{$props.showHLines}
+							{$props.showVLines}
+							width={$state.calculatedWidth}
+							{$state.labels}
+							xStepValue={0}
+							xStepLabels={[]}
+							yStepValue={$state.calculatedStepValue}
+							yStepLabels={$state.stepLabels}
+							{$state.itemWidth}
+							{$state.valueHeight}
+							{$state.chartLeft}
+							{$state.chartBottom}
+							type="bar"
+						/>
+						@for (let [i, series] of $props.series.entries()) {
+							<rect
+								x={$state.chartLeft +
+									i * $state.itemWidth +
+									$state.itemWidth / 4}
+								y={$state.chartBottom - Math.max(1, series.data[0] * $state.valueHeight)}
+								width={Math.max(1, $state.itemWidth / 2)}
+								height={Math.max(1, series.data[0] * $state.valueHeight)}
+								fill={series.color || chartColors[i % chartColors.length]}
+							>
+								<title>{`${[series.name, series.data[0]].filter(Boolean).join("\n")}`}</title>
+							</rect>
+						}
+					}
+				</g>
+			</svg>
+		</div>
+	}
+}

package/dist/Chart/DataSeries.ts

@@ -0,0 +1,5 @@
+export default interface DataSeries {
+	name: string;
+	color: string;
+	data: number[];
+}

package/dist/Chart/GridLines.torp

@@ -0,0 +1,62 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
+interface GridLinesProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	showHLines?: boolean,
+	showVLines?: boolean,
+	width: number;
+	labels: string[];
+	xStepValue: number;
+	xStepLabels: number[];
+	yStepValue: number;
+	yStepLabels: number[];
+	itemWidth: number;
+	valueHeight: number;
+	chartLeft: number;
+	chartBottom: number;
+	type: string;
+}
+
+export default function GridLines($props: GridLinesProps) {
+	@render {
+		<svg>
+			@if ($props.showHLines && $props.yStepLabels) {
+				@for (let [i, label] of $props.yStepLabels!.entries()) {
+					<line
+						x1={$props.chartLeft ?? 0}
+						y1={$props.chartBottom - i * $props.yStepValue * $props.valueHeight}
+						x2={$props.width ?? 0}
+						y2={$props.chartBottom - i * $props.yStepValue * $props.valueHeight}
+					/>
+				}
+			}
+
+			@if ($props.showVLines) {
+				@if ($props.xStepLabels.length && $props.xStepValue) {
+					@for (let [i, label] of $props.xStepLabels.entries()) {
+						<line
+							x1={$props.chartLeft + i * $props.xStepValue * $props.itemWidth}
+							y1={$props.chartBottom}
+							x2={$props.chartLeft + i * $props.xStepValue * $props.itemWidth}
+							y2={0}
+						/>
+					}
+				} else {
+					@for (let [i, label] of $props.labels.entries()) {
+						<line
+							x1={$props.chartLeft + i * $props.itemWidth + ($props.type === "bar" ? 0 : $props.itemWidth / 2)}
+							y1={$props.chartBottom}
+							x2={$props.chartLeft + i * $props.itemWidth + ($props.type === "bar" ? 0 : $props.itemWidth / 2)}
+							y2={0}
+						/>
+					}
+				}
+			}
+		</svg>
+	}
+}

package/dist/Chart/LineChart.torp

@@ -0,0 +1,196 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
+import XAxis from "./XAxis.torp";
+import YAxis from "./YAxis.torp";
+import GridLines from "./GridLines.torp";
+import {
+	calculateMaxValue,
+	calculateStepValue,
+	calculateStepLabels,
+	calculateItemWidth,
+	calculateValueHeight,
+	calculateChartBottom,
+	calculateChartLeft
+} from "../utils/chartUtils";
+import { chartColors } from "../utils/chartColors";
+
+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,
+	series: DataSeries[],
+	height?: number,
+	width?: number,
+	xLabel?: string,
+	yLabel?: string,
+	maxValue?: number,
+	stepCount?: number,
+	stepValue?: number,
+	showPoints?: boolean,
+	hideXAxis?: boolean,
+	hideYAxis?: boolean,
+	showHLines?: boolean,
+	showVLines?: boolean,
+}
+
+export default function LineChart($props: LineChartProps) {
+	const defaultHeight = 200;
+	const defaultWidth = 400;
+
+	let container: HTMLElement;
+	let measurer: SVGTextElement;
+
+	let $state = $watch({
+		textWidth: 0,
+		textHeight: 0,
+		get labels() {
+			return $props.series.map((s) => s.name);
+		},
+		get calculatedHeight() { 
+			return $props.height || defaultHeight;
+		},
+		get calculatedWidth() {
+			return $props.width || container?.clientWidth || defaultWidth;
+		},
+		get maxValue() {
+			return $props.maxValue || calculateMaxValue($props.series);
+		},
+		get calculatedStepValue() {
+			return $props.stepValue || calculateStepValue($state.maxValue, $props.stepCount);
+		},
+		get stepLabels() {
+			return calculateStepLabels($props.stepCount || 2, $state.calculatedStepValue);
+		},
+		get itemWidth() {
+			return calculateItemWidth($state.calculatedWidth, $state.chartLeft, $state.labels);
+		},
+		get valueHeight() {
+			return calculateValueHeight($state.chartBottom, $state.textHeight, $state.calculatedStepValue, $props.stepCount || 2);
+		},
+		get chartBottom() {
+			return calculateChartBottom($props.xLabel ?? "", $state.calculatedHeight, $state.textHeight);
+		},
+		get chartLeft() {
+			return calculateChartLeft($state.stepLabels, $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 buildPointSeries(
+		theSeries: DataSeries[],
+		theChartLeft: number,
+		theChartBottom: number,
+		theItemWidth: number,
+		theValueHeight: number
+	): { x: number; y: number }[][] {
+		return theSeries.map((series) => {
+			return series.data.map((value, i) => {
+				const x = +(theChartLeft + i * theItemWidth + theItemWidth / 2).toFixed(2);
+				const y = +(theChartBottom - value * theValueHeight).toFixed(2);
+				return { x, y };
+			});
+		});
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-line-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 ?? ""}
+							{$state.labels}
+							stepLabels={[]}
+							stepValue={0}
+							{$state.chartLeft}
+							{$state.chartBottom}
+						/>
+						<YAxis
+							showAxis={!$props.hideYAxis}
+							{$state.valueHeight}
+							{$state.textHeight}
+							yLabel={$props.yLabel ?? ""}
+							{$state.stepLabels}
+							stepValue={$state.calculatedStepValue}
+							{$state.chartLeft}
+							{$state.chartBottom}
+						/>
+						<GridLines
+							{$props.showHLines}
+							{$props.showVLines}
+							width={$state.calculatedWidth}
+							{$state.labels}
+							xStepValue={0}
+							xStepLabels={[]}
+							yStepValue={$state.calculatedStepValue}
+							yStepLabels={[]}
+							{$state.stepLabels}
+							{$state.itemWidth}
+							{$state.valueHeight}
+							{$state.chartLeft}
+							{$state.chartBottom}
+							type="line"
+						/>
+						@for (let [i, series] of $props.series.entries()) {
+							<polyline
+								points={$state.pointSeries[i].map((p) => `${p.x},${p.y}`).join(" ")}
+								stroke={series.color || chartColors[i % chartColors.length]}
+								stroke-width="2"
+								fill="none"
+							/>
+							@if ($props.showPoints) {
+								@for (let [j, point] of $state.pointSeries[i].entries()) {
+									<circle
+										cx={point.x}
+										cy={point.y}
+										r="4"
+										stroke={series.color || chartColors[i % chartColors.length]}
+										stroke-width="2"
+										fill="white"
+									>
+										<title>{`${[series.name, $state.labels[j], series.data[j]].filter(Boolean).join("\n")}`}</title>
+									</circle>
+								}
+							}
+						}
+					}
+				</g>
+			</svg>
+		</div>
+	}
+}

package/dist/Chart/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>
+	}
+}