@torpor/ui 0.3.6 → 0.4.0

package/dist/Accordion/Accordion.torp

@@ -11,11 +11,11 @@ interface AccordionProps {
 	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
-	value?: string | string[],
+	value?: any | any[],
 	/** If set to true, the user cannot interact with any items in the Accordion */
 	disabled?: boolean,
 	/** Raised when the expanded item(s) have changed */
-	onchange?: (value: string | string[]) => void,
+	onchange?: (value: any | any[]) => void,
 }
 
 /**
@@ -41,9 +41,15 @@ export default function Accordion($props: AccordionProps | undefined) {
 	let type = $props?.type ?? "single";
 
 	let $state = $watch({
-		value: $props?.value ?? (type === "single" ? "" : [] as string[])
+		value: $props?.value ?? (type === "single" ? undefined : [])
 	});
 
+	// Update $state on $props change
+	$run(() => {
+		$state.value = $props?.value ?? (type === "single" ? undefined : [])
+	});
+
+	// Update $props on $state change
 	$run(() => {
 		if ($props !== undefined) {
 			$props.value = $state.value;
@@ -65,48 +71,43 @@ export default function Accordion($props: AccordionProps | undefined) {
 	$context[AccordionContextName] = context;
 
 	$run(() => {
-		// HACK: This should probably be done with setters?
-		let newValue = $state.value;
+		// Get the value to ensure that this effect will be subscribed
+		let value = $state.value;
 
-		// Get the value
+		// And set the expanded item(s)
 		switch (type) {
 			case "single": {
-				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-				newValue = newValue.toString();
 				for (let item of itemStates) {
-					item.expanded = item.value === newValue;
+					item.expanded = item.value === value;
 				}
 				break;
 			}
 			case "multiple": {
-				// Ensure the value passed in is an array
-				if (!Array.isArray(newValue)) {
-					newValue = [newValue];
+				if (!Array.isArray(value)) {
+					value = [value];
 				}
 				for (let item of itemStates) {
-					item.expanded = newValue.indexOf(item.value) !== -1;
+					item.expanded = value.indexOf(item.value) !== -1;
 				}
 				break;
 			}
 		}
-
-		// Set the value
-		$state.value = newValue;
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
+		let disabled = $props?.disabled;
+		itemStates.forEach((s) => s.parentDisabled = disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props?.onchange;
+		const onchange = $props?.onchange;
 		const value = $state.value;
 		if (firstChange) {
 			firstChange = false;
-		} else if (ev) {
-			ev(value);
+		} else if (onchange) {
+			onchange(value);
 		}
 	});
 
@@ -118,11 +119,11 @@ export default function Accordion($props: AccordionProps | undefined) {
 
 		// If a value wasn't set for the item, set it to the index
 		if (!itemState.value) {
-			itemState.value = itemState.index.toString();
+			itemState.value = itemState.index;
 		}
 
 		// If we have a value, set whether the item should be expanded
-		if ($state.value) {
+		if ($state.value !== undefined && $state.value !== null) {
 			switch (type) {
 				case "single": {
 					itemState.expanded = $state.value === itemState.value;
@@ -166,7 +167,7 @@ export default function Accordion($props: AccordionProps | undefined) {
 				break;
 			}
 			case "multiple": {
-				let newValue = [];
+				let value = [];
 				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) or if it
 					// was already expanded
@@ -174,10 +175,10 @@ export default function Accordion($props: AccordionProps | undefined) {
 						(item.value === toggleValue && !item.expanded) ||
 						(item.value !== toggleValue && item.expanded)
 					) {
-						newValue.push(item.value);
+						value.push(item.value);
 					}
 				}
-				$state.value = newValue.sort();
+				$state.value = value.sort();
 				break;
 			}
 		}

package/dist/Accordion/AccordionItem.torp

@@ -71,12 +71,12 @@ export default function AccordionItem($props: AccordionItemProps | undefined) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props?.ontoggle;
+		const ontoggle = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
-		} else if (ev) {
-			ev(expanded);
+		} else if (ontoggle) {
+			ontoggle(expanded);
 		}
 	});
 

package/dist/Accordion/AccordionTypes.ts

@@ -1,5 +1,5 @@
-export const AccordionContextName = "Accordion";
-export const AccordionItemContextName = "AccordionItem";
+export const AccordionContextName: unique symbol = Symbol.for("torp.Accordion");
+export const AccordionItemContextName: unique symbol = Symbol.for("torp.AccordionItem");
 
 export interface AccordionContext {
 	/** Called from an AccordionItem when it is added */
@@ -7,14 +7,14 @@ export interface AccordionContext {
 	/** Called from an AccordionItem when it is removed */
 	removeItem: (index: number) => void;
 	/** Called from an AccordionItem when it is toggled */
-	toggleItem: (value: string) => void;
+	toggleItem: (value: any) => void;
 	/** Called from an AccordionHeader when it receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 }
 
 export interface AccordionItemContext {
 	/** Raised when an AccordionItem is toggled */
-	toggleItem: (value: string) => void;
+	toggleItem: (value: any) => void;
 	/** Raised when an AccordionHeader receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 	/** The reactive state for an AccordionItem */
@@ -25,7 +25,7 @@ export interface AccordionItemContext {
 
 export interface ItemState {
 	index: number;
-	value: string;
+	value: any;
 	expanded: boolean;
 	headerId: string;
 	contentId: string;

package/dist/Accordion/index.d.ts

@@ -11,11 +11,11 @@ interface AccordionProps {
 	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
-	value?: string | string[],
+	value?: any | any[],
 	/** If set to true, the user cannot interact with any items in the Accordion */
 	disabled?: boolean,
 	/** Raised when the expanded item(s) have changed */
-	onchange?: (value: string | string[]) => void,
+	onchange?: (value: any | any[]) => void,
 }
 
 /**

package/dist/Calendar/CalendarTypes.ts

@@ -1,4 +1,4 @@
-export const CalendarContextName = "Calendar";
+export const CalendarContextName: unique symbol = Symbol.for("torp.Calendar");
 
 export interface CalendarContext {
 	// The registerDay function is called from each CalendarDay to register itself with this

package/dist/Charts/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/Charts/DataSeries.ts

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

package/dist/Charts/GridLines.torp

@@ -0,0 +1,65 @@
+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}
+						stroke="currentcolor"
+					/>
+				}
+			}
+
+			@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}
+							stroke="currentcolor"
+						/>
+					}
+				} 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}
+							stroke="currentcolor"
+						/>
+					}
+				}
+			}
+		</svg>
+	}
+}

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