@torpor/ui 0.3.6 → 0.3.7

package/dist/Chart/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/Chart/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/Chart/XAxis.torp

@@ -0,0 +1,60 @@
+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} />
+			}
+			@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/Chart/YAxis.torp

@@ -0,0 +1,41 @@
+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} />
+			}
+			@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>
+	}
+}

package/dist/Chart/index.d.ts

@@ -0,0 +1,220 @@
+import { type SlotRender } from "@torpor/view";
+
+
+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,
+}
+
+declare function BarChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: BarChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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;
+}
+
+declare function GridLines(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: GridLinesProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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,
+}
+
+declare function LineChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: LineChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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,
+}
+
+declare function PieChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PieChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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,
+}
+
+declare function ScatterChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ScatterChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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,
+}
+
+declare function SparkLine(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SparkLineProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface XAxisProps {
+	showAxis: boolean,
+	height: number,
+	width: number,
+	itemWidth: number,
+	textHeight: number,
+	xLabel: string,
+	labels: string[] ,
+	stepLabels:number[] ,
+	stepValue: number,
+	chartLeft: number,
+	chartBottom: number,
+}
+
+declare function XAxis(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: XAxisProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface YAxisProps {
+	showAxis: boolean,
+	valueHeight: number,
+	textHeight: number,
+	yLabel: string,
+	stepLabels: number[],
+	stepValue: number,
+	chartLeft: number,
+	chartBottom: number,
+}
+
+declare function YAxis(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: YAxisProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { BarChart, GridLines, LineChart, PieChart, ScatterChart, SparkLine, XAxis, YAxis };

package/dist/Chart/index.js

@@ -0,0 +1,34 @@
+// src/Chart/BarChart.torp
+import BarChart_default from "./BarChart.torp";
+
+// src/Chart/GridLines.torp
+import GridLines_default from "./GridLines.torp";
+
+// src/Chart/LineChart.torp
+import LineChart_default from "./LineChart.torp";
+
+// src/Chart/PieChart.torp
+import PieChart_default from "./PieChart.torp";
+
+// src/Chart/ScatterChart.torp
+import ScatterChart_default from "./ScatterChart.torp";
+
+// src/Chart/SparkLine.torp
+import SparkLine_default from "./SparkLine.torp";
+
+// src/Chart/XAxis.torp
+import XAxis_default from "./XAxis.torp";
+
+// src/Chart/YAxis.torp
+import YAxis_default from "./YAxis.torp";
+export {
+  BarChart_default as BarChart,
+  GridLines_default as GridLines,
+  LineChart_default as LineChart,
+  PieChart_default as PieChart,
+  ScatterChart_default as ScatterChart,
+  SparkLine_default as SparkLine,
+  XAxis_default as XAxis,
+  YAxis_default as YAxis
+};
+//# sourceMappingURL=index.js.map

package/dist/Chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Form/TextArea.torp

@@ -19,6 +19,8 @@ interface TextAreaProps {
 	placeholder?: string,
 	/** Whether the input should be readonly */
 	readonly?: boolean,
+	/** Whether the input's value is required */
+	required?: boolean,
 	/** The maximum number of characters allowed for the input value */
 	maxlength?: number,
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */
@@ -94,6 +96,7 @@ export default function TextArea($props: TextAreaProps | undefined) {
 			{$props?.rows}
 			{$props?.placeholder}
 			{$props?.readonly}
+			{$props?.required}
 			{$props?.maxlength}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}

package/dist/Form/index.d.ts

@@ -322,6 +322,8 @@ interface TextAreaProps {
 	placeholder?: string,
 	/** Whether the input should be readonly */
 	readonly?: boolean,
+	/** Whether the input's value is required */
+	required?: boolean,
 	/** The maximum number of characters allowed for the input value */
 	maxlength?: number,
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */