feat(widget): Enhance 9dof table widget (#56)

- define types for table column and item
- new component Table
- clean up imports
- use title from user configuration

Co-authored-by: Pablo Klaschka <[email protected]>

src/model/sample-user-config.ts

@@ -15,7 +15,7 @@ export const userConfig: UserConfig = {
 				rows: 12,
 				widgets: [
 					{
-						widgetName: '9dof',
+						widgetName: '9dof-widget',
 						width: 3,
 						height: 4,
 						title: 'Current values'

src/widgets/9dof/index.ts → src/widgets/9dof-widget/index.ts

@@ -2,6 +2,6 @@ import { Widget } from '@wuespace/telestion-client-types';
 import { Widget as WidgetRenderer } from './widget';
 
 export const widget: Widget = {
-	name: '9dof',
+	name: '9dof-widget',
 	Widget: WidgetRenderer
 };

src/widgets/9dof-widget/model.ts

@@ -0,0 +1,28 @@
+export type ColumnKey = string;
+
+/**
+ * A table column.
+ */
+export interface Column {
+	/**
+	 * The key of the table column.
+	 */
+	key: ColumnKey;
+
+	/**
+	 * The name/title of the table column.
+	 */
+	name: string | JSX.Element;
+}
+
+export type ItemValue = string | number | boolean;
+
+/**
+ * A table item.
+ */
+export type Item = {
+	/**
+	 * Unique key of the table item.
+	 */
+	key: string;
+} & Record<ColumnKey, ItemValue>;

src/widgets/9dof-widget/table.tsx

@@ -0,0 +1,44 @@
+import {
+	Table as RSTable,
+	TableHeader,
+	Column,
+	TableBody,
+	Row,
+	Cell
+} from '@react-spectrum/table';
+import { Column as ColumnType, Item as ItemType, ItemValue } from './model';
+
+function display(value: ItemValue): string | number {
+	switch (typeof value) {
+		case 'boolean':
+			return value ? 'true' : 'false';
+		case 'number':
+			return Math.round(value * 1000) / 1000;
+		case 'string':
+			return value;
+		default:
+			throw new TypeError(
+				`Type ${typeof value} can not be rendered in a table cell.`
+			);
+	}
+}
+
+export interface TableProps {
+	columns: ColumnType[];
+	items: ItemType[];
+}
+
+export function Table({ columns, items }: TableProps) {
+	return (
+		<RSTable>
+			<TableHeader columns={columns}>
+				{column => <Column>{column.name}</Column>}
+			</TableHeader>
+			<TableBody items={items}>
+				{item => (
+					<Row key={item.key}>{key => <Cell>{display(item[key])}</Cell>}</Row>
+				)}
+			</TableBody>
+		</RSTable>
+	);
+}

src/widgets/9dof-widget/widget.tsx

@@ -0,0 +1,48 @@
+import { Heading, View } from '@adobe/react-spectrum';
+import { useChannelLatest } from '@wuespace/telestion-client-core';
+import { LoadingIndicator } from '@wuespace/telestion-client-common';
+import { BaseRendererProps } from '@wuespace/telestion-client-types';
+
+import { NineDofMessage } from '../../model/messages/nine-dof';
+import { NineDOF } from '../../model/channels';
+
+import { Table } from './table';
+import { Column, Item } from './model';
+
+const columns: Column[] = [
+	{ name: 'Sensor', key: 'sensor' },
+	{ name: <code>x</code>, key: 'x' },
+	{ name: <code>y</code>, key: 'y' },
+	{ name: <code>z</code>, key: 'z' }
+];
+
+export function Widget({ title }: BaseRendererProps) {
+	const latestData = useChannelLatest<NineDofMessage>(NineDOF)?.result[0];
+
+	const items: Item[] = [
+		{
+			sensor: 'Accelerometer',
+			key: `acc-${latestData ? Object.values(latestData?.acc) : ''}`,
+			...latestData?.acc
+		},
+		{
+			sensor: 'Gyroscope',
+			key: `gyro-${latestData ? Object.values(latestData?.gyro) : ''}`,
+			...latestData?.gyro
+		},
+		{
+			sensor: 'Magnetometer',
+			key: `mag-${latestData ? Object.values(latestData?.mag) : ''}`,
+			...latestData?.mag
+		}
+	];
+
+	return (
+		<View marginX={'size-200'}>
+			<Heading level={3}>{title}</Heading>
+			<LoadingIndicator dependencies={[latestData]}>
+				{() => <Table columns={columns} items={items} />}
+			</LoadingIndicator>
+		</View>
+	);
+}

src/widgets/index.ts

@@ -7,6 +7,7 @@ using the tc-cli generate widget command.
 
 import { Widget } from '@wuespace/telestion-client-types';
 import { widget as sampleWidget } from './sample-widget';
+import { widget as nineDofWidget } from './9dof-widget';
 import { widget as stateWidget } from './state-widget';
 import { widget as ninedof } from './9dof';
 import { widget as graphWidget } from './graph-widget';
@@ -16,6 +17,6 @@ export const projectWidgets: Widget[] = [
 	// ARRAY_FIRST_ELEMENT_INSERT_MARK
 	stateWidget,
 	graphWidget as Widget,
-	ninedof,
+	nineDofWidget,
 	sampleWidget
 ];