feat(widget): Add hold on hover, custom tooltip, area chart and more …

…configuration options

package.json

@@ -31,9 +31,9 @@
 		"@spectrum-icons/illustrations": "^3.2.1",
 		"@spectrum-icons/ui": "^3.2.0",
 		"@spectrum-icons/workflow": "^3.2.0",
-		"@wuespace/telestion-client-common": "^0.11.0",
-		"@wuespace/telestion-client-core": "^0.11.0",
-		"@wuespace/telestion-client-prop-types": "^0.11.0",
+		"@wuespace/telestion-client-common": "^0.11.1",
+		"@wuespace/telestion-client-core": "^0.11.1",
+		"@wuespace/telestion-client-prop-types": "^0.11.1",
 		"@wuespace/vertx-mock-server": "^0.11.0",
 		"electron": "^11.3.0",
 		"react": "^17.0.1",
@@ -51,8 +51,8 @@
 		"@types/react": "^17.0.2",
 		"@types/react-dom": "^17.0.1",
 		"@types/recharts": "^1.8.19",
-		"@wuespace/telestion-client-cli": "^0.11.0",
-		"@wuespace/telestion-client-types": "^0.11.0",
+		"@wuespace/telestion-client-cli": "^0.11.1",
+		"@wuespace/telestion-client-types": "^0.11.1",
 		"husky": "^4.3.8",
 		"prettier": "^2.2.1",
 		"pretty-quick": "^3.1.0",

src/model/sample-user-config.ts

@@ -4,27 +4,27 @@ import { WidgetProps } from '../widgets/graph-widget/model';
 
 const accLineGraph: WidgetProps = {
 	isArea: false,
+	isCartesianGrid: false,
+	isHoldOnHover: true,
+	maxDataSamples: 20,
 	connections: [
 		{
 			channel: NineDOF,
 			descriptors: [
 				{
 					key: 'result[0].acc.x',
 					title: 'Accelerometer X',
-					color: '#d21800',
-					isDotted: true
+					color: '#d21800'
 				},
 				{
 					key: 'result[0].acc.y',
 					title: 'Accelerometer Y',
-					color: '#00ec05',
-					isDotted: true
+					color: '#00ec05'
 				},
 				{
 					key: 'result[0].acc.z',
 					title: 'Accelerometer Z',
-					color: '#0075ff',
-					isDotted: true
+					color: '#0075ff'
 				}
 			]
 		}
@@ -33,27 +33,27 @@ const accLineGraph: WidgetProps = {
 
 const gyroLineGraph: WidgetProps = {
 	isArea: false,
+	isCartesianGrid: false,
+	isHoldOnHover: true,
+	maxDataSamples: 20,
 	connections: [
 		{
 			channel: NineDOF,
 			descriptors: [
 				{
 					key: 'result[0].gyro.x',
 					title: 'Gyroscope X',
-					color: '#d21800',
-					isDotted: true
+					color: '#d21800'
 				},
 				{
 					key: 'result[0].gyro.y',
 					title: 'Gyroscope Y',
-					color: '#00ec05',
-					isDotted: true
+					color: '#00ec05'
 				},
 				{
 					key: 'result[0].gyro.z',
 					title: 'Gyroscope Z',
-					color: '#0075ff',
-					isDotted: true
+					color: '#0075ff'
 				}
 			]
 		}
@@ -62,27 +62,53 @@ const gyroLineGraph: WidgetProps = {
 
 const magLineGraph: WidgetProps = {
 	isArea: false,
+	isCartesianGrid: false,
+	isHoldOnHover: true,
+	maxDataSamples: 20,
 	connections: [
 		{
 			channel: NineDOF,
 			descriptors: [
 				{
 					key: 'result[0].mag.x',
 					title: 'Magnetometer X',
-					color: '#d21800',
-					isDotted: true
+					color: '#d21800'
 				},
 				{
 					key: 'result[0].mag.y',
 					title: 'Magnetometer Y',
-					color: '#00ec05',
-					isDotted: true
+					color: '#00ec05'
 				},
 				{
 					key: 'result[0].mag.z',
 					title: 'Magnetometer Z',
-					color: '#0075ff',
-					isDotted: true
+					color: '#0075ff'
+				}
+			]
+		}
+	]
+};
+
+const detailsGraph: WidgetProps = {
+	isArea: true,
+	isCartesianGrid: true,
+	isHoldOnHover: true,
+	maxDataSamples: 60,
+	connections: [
+		{
+			channel: NineDOF,
+			descriptors: [
+				{
+					key: 'result[0].gyro.z',
+					title: 'Gyroscope Z',
+					color: '#6c18ba'
+				},
+				{
+					key: 'result[0].acc.x',
+					title: 'Accelerometer X',
+					color: '#ec9401',
+					isDotted: false,
+					strokeWidth: 2
 				}
 			]
 		}
@@ -123,6 +149,13 @@ export const userConfig: UserConfig = {
 						height: 4,
 						title: 'Magnetometer',
 						initialProps: magLineGraph
+					},
+					{
+						widgetName: 'graphWidget',
+						width: 12,
+						height: 4,
+						title: 'Details',
+						initialProps: detailsGraph
 					}
 				]
 			}

src/widgets/graph-widget/components/custom-tooltip.tsx

@@ -0,0 +1,31 @@
+import { Heading, View } from '@adobe/react-spectrum';
+import { roundTo } from '../lib/round-to';
+
+export interface CustomTooltipProps {
+	active: boolean;
+	payload: Array<any>;
+	label: number;
+}
+
+export function CustomTooltip({ active, label, payload }: CustomTooltipProps) {
+	if (active && payload && payload.length) {
+		return (
+			<View
+				backgroundColor="gray-200"
+				padding="size-100"
+				borderRadius="regular"
+			>
+				<Heading level={4} marginTop="size-0" marginBottom="size-100">
+					Time: {roundTo(label, 2)}s
+				</Heading>
+				{payload.map(({ name, value }) => (
+					<div>
+						{name}: {roundTo(value, 4)}
+					</div>
+				))}
+			</View>
+		);
+	}
+
+	return null;
+}