From 4cc351b442dd5255ac9bae69d316a4f07cd2598c Mon Sep 17 00:00:00 2001 From: Ludwig Richter Date: Wed, 10 Mar 2021 15:53:19 +0100 Subject: [PATCH] feat(model): Re-structure user configuration and add more dashboards based on https://github.com/TelestionTeam/telestion-rocketsound-psc/issues/69 --- src/components/app.tsx | 2 +- src/model/dashboards/index.ts | 4 + src/model/dashboards/overview.ts | 116 ++++++++++++++++++ src/model/dashboards/recovery.ts | 15 +++ src/model/dashboards/sounding-rocket.ts | 44 +++++++ src/model/dashboards/system-state.ts | 62 ++++++++++ .../widget-props/graph-widget-props.ts} | 42 +++++-- src/model/dashboards/widget-props/index.ts | 1 + src/model/sample-user-config.ts | 116 ------------------ src/model/user-config.ts | 18 +++ src/widgets/map-widget/index.ts | 2 +- 11 files changed, 293 insertions(+), 129 deletions(-) create mode 100644 src/model/dashboards/index.ts create mode 100644 src/model/dashboards/overview.ts create mode 100644 src/model/dashboards/recovery.ts create mode 100644 src/model/dashboards/sounding-rocket.ts create mode 100644 src/model/dashboards/system-state.ts rename src/model/{sample-graph-definitions.ts => dashboards/widget-props/graph-widget-props.ts} (80%) create mode 100644 src/model/dashboards/widget-props/index.ts delete mode 100644 src/model/sample-user-config.ts create mode 100644 src/model/user-config.ts diff --git a/src/components/app.tsx b/src/components/app.tsx index 466ff11..b332e28 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -12,7 +12,7 @@ import { useUserConfig } from '@wuespace/telestion-client-common'; -import { userConfig } from '../model/sample-user-config'; +import { userConfig } from '../model/user-config'; import { projectWidgets } from '../widgets'; import { Header } from './header'; diff --git a/src/model/dashboards/index.ts b/src/model/dashboards/index.ts new file mode 100644 index 0000000..f96f4ac --- /dev/null +++ b/src/model/dashboards/index.ts @@ -0,0 +1,4 @@ +export * from './overview'; +export * from './system-state'; +export * from './recovery'; +export * from './sounding-rocket'; diff --git a/src/model/dashboards/overview.ts b/src/model/dashboards/overview.ts new file mode 100644 index 0000000..12f61bb --- /dev/null +++ b/src/model/dashboards/overview.ts @@ -0,0 +1,116 @@ +import { Dashboard } from '@wuespace/telestion-client-types'; +import { + accLineGraph, + altitudeGraph, + amplitudeGraph, + gyroLineGraph, + magLineGraph, + pressureGraph, + temperatureGraph +} from './widget-props'; + +export const overviewDashboard: Dashboard = { + title: 'Overview', + columns: 12, + rows: 12, + widgets: [ + { + widgetName: 'stateWidget', + width: 2, + height: 4, + title: 'stateWidget' + }, + { + widgetName: 'graphWidget', + width: 2, + height: 4, + title: 'Altitude', + initialProps: { + ...altitudeGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + }, + { + widgetName: 'graphWidget', + width: 2, + height: 4, + title: 'Pressure', + initialProps: { + ...pressureGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + }, + { + widgetName: 'graphWidget', + width: 2, + height: 4, + title: 'Temperature', + initialProps: { + ...temperatureGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + }, + { + widgetName: 'mapWidget', + width: 4, + height: 8, + title: 'GPS Data' + }, + { + widgetName: 'graphWidget', + width: 4, + height: 4, + title: 'Amplitude', + initialProps: { + ...amplitudeGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + }, + { + widgetName: 'spectrogramWidget', + width: 4, + height: 4, + title: 'Spectrogram Widget' + }, + { + widgetName: '9dof-widget', + width: 3, + height: 4, + title: 'Current values' + }, + { + widgetName: 'graphWidget', + width: 3, + height: 4, + title: 'Accelerometer', + initialProps: { + ...accLineGraph, + maxDataSamples: 20 + } + }, + { + widgetName: 'graphWidget', + width: 3, + height: 4, + title: 'Gyroscope', + initialProps: { + ...gyroLineGraph, + maxDataSamples: 20 + } + }, + { + widgetName: 'graphWidget', + width: 3, + height: 4, + title: 'Magnetometer', + initialProps: { + ...magLineGraph, + maxDataSamples: 20 + } + } + ] +}; diff --git a/src/model/dashboards/recovery.ts b/src/model/dashboards/recovery.ts new file mode 100644 index 0000000..29f1cb6 --- /dev/null +++ b/src/model/dashboards/recovery.ts @@ -0,0 +1,15 @@ +import { Dashboard } from '@wuespace/telestion-client-types'; + +export const recoveryDashboard: Dashboard = { + title: 'Recovery', + columns: 12, + rows: 12, + widgets: [ + { + widgetName: 'mapWidget', + width: 12, + height: 12, + title: 'GPS Position' + } + ] +}; diff --git a/src/model/dashboards/sounding-rocket.ts b/src/model/dashboards/sounding-rocket.ts new file mode 100644 index 0000000..7b42beb --- /dev/null +++ b/src/model/dashboards/sounding-rocket.ts @@ -0,0 +1,44 @@ +import { Dashboard } from '@wuespace/telestion-client-types'; +import { amplitudeGraph, velocityGraph } from './widget-props'; + +export const soundingRocketDashboard: Dashboard = { + title: 'Sounding Rocket', + columns: 12, + rows: 12, + widgets: [ + { + widgetName: 'stateWidget', + width: 2, + height: 4, + title: 'stateWidget' + }, + { + widgetName: 'graphWidget', + width: 10, + height: 4, + title: 'Amplitude', + initialProps: { + ...amplitudeGraph, + maxDataSamples: 100, + isCartesianGrid: true + } + }, + { + widgetName: 'spectrogramWidget', + width: 12, + height: 4, + title: 'Spectrogram Widget' + }, + { + widgetName: 'graphWidget', + width: 12, + height: 4, + title: 'Velocity', + initialProps: { + ...velocityGraph, + maxDataSamples: 100, + isCartesianGrid: true + } + } + ] +}; diff --git a/src/model/dashboards/system-state.ts b/src/model/dashboards/system-state.ts new file mode 100644 index 0000000..de28b5f --- /dev/null +++ b/src/model/dashboards/system-state.ts @@ -0,0 +1,62 @@ +import { Dashboard } from '@wuespace/telestion-client-types'; +import { altitudeGraph, pressureGraph, temperatureGraph } from './widget-props'; + +export const systemStateDashboard: Dashboard = { + title: 'System State', + columns: 12, + rows: 12, + widgets: [ + { + widgetName: 'stateWidget', + width: 4, + height: 3, + title: 'stateWidget' + }, + { + widgetName: 'graphWidget', + width: 4, + height: 6, + title: 'Pressure', + initialProps: { + ...pressureGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + }, + { + widgetName: 'mapWidget', + width: 4, + height: 12, + title: 'GPS Data' + }, + { + widgetName: '9dof-widget', + width: 4, + height: 3, + title: 'Current values' + }, + + { + widgetName: 'graphWidget', + width: 4, + height: 6, + title: 'Altitude', + initialProps: { + ...altitudeGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + }, + { + widgetName: 'graphWidget', + width: 4, + height: 6, + title: 'Temperature', + initialProps: { + ...temperatureGraph, + maxDataSamples: 60, + isCartesianGrid: true + } + } + ] +}; diff --git a/src/model/sample-graph-definitions.ts b/src/model/dashboards/widget-props/graph-widget-props.ts similarity index 80% rename from src/model/sample-graph-definitions.ts rename to src/model/dashboards/widget-props/graph-widget-props.ts index 91fcf95..30120ed 100644 --- a/src/model/sample-graph-definitions.ts +++ b/src/model/dashboards/widget-props/graph-widget-props.ts @@ -1,5 +1,5 @@ -import { GraphWidgetProps } from '../widgets/graph-widget'; -import { Amplitude, BaroData, NineDOF } from './channels'; +import { GraphWidgetProps } from '../../../widgets/graph-widget'; +import { Amplitude, BaroData, NineDOF, Velocity } from '../../channels'; export const accLineGraph: GraphWidgetProps = { connections: [ @@ -102,8 +102,7 @@ export const altitudeGraph: GraphWidgetProps = { ] } ], - maxDataSamples: 60, - isCartesianGrid: true + maxDataSamples: 20 }; export const pressureGraph: GraphWidgetProps = { @@ -120,8 +119,7 @@ export const pressureGraph: GraphWidgetProps = { ] } ], - maxDataSamples: 60, - isCartesianGrid: true + maxDataSamples: 20 }; export const temperatureGraph: GraphWidgetProps = { @@ -138,8 +136,7 @@ export const temperatureGraph: GraphWidgetProps = { ] } ], - maxDataSamples: 60, - isCartesianGrid: true + maxDataSamples: 20 }; export const amplitudeGraph: GraphWidgetProps = { @@ -169,8 +166,31 @@ export const amplitudeGraph: GraphWidgetProps = { ] } ], - maxDataSamples: 60, - isArea: false, - isCartesianGrid: true, + maxDataSamples: 20, scale: 'log' }; + +export const velocityGraph: GraphWidgetProps = { + connections: [ + { + channel: Velocity, + descriptors: [ + { + key: 'result[0].estimated', + title: 'Estimated', + unit: 'm/s', + color: 'indigo-500', + isDashed: true, + strokeWidth: 2 + }, + { + key: 'result[0].measured', + title: 'Measured', + unit: 'm/s', + color: 'orange-500' + } + ] + } + ], + maxDataSamples: 20 +}; diff --git a/src/model/dashboards/widget-props/index.ts b/src/model/dashboards/widget-props/index.ts new file mode 100644 index 0000000..d762f44 --- /dev/null +++ b/src/model/dashboards/widget-props/index.ts @@ -0,0 +1 @@ +export * from './graph-widget-props'; diff --git a/src/model/sample-user-config.ts b/src/model/sample-user-config.ts deleted file mode 100644 index b61fc9f..0000000 --- a/src/model/sample-user-config.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { UserConfig } from '@wuespace/telestion-client-types'; - -import { - accLineGraph, - altitudeGraph, - amplitudeGraph, - gyroLineGraph, - magLineGraph, - pressureGraph, - temperatureGraph -} from './sample-graph-definitions'; -// import { Amplitude } from './channels'; -// import { WaveformWidgetProps } from '../widgets/waveform-widget'; - -// const waveformProps: WaveformWidgetProps = { -// xLabel: 'Samples', -// yLabel: 'Amplitude', -// channel: Amplitude, -// stroke: 'purple-500', -// minValue: 0, -// maxValue: 1 -// }; - -export const userConfig: UserConfig = { - admin: { - dashboards: [ - { - title: 'Overview', - columns: 12, - rows: 12, - widgets: [ - { - widgetName: '9dof-widget', - width: 3, - height: 4, - title: 'Current values' - }, - { - widgetName: 'graphWidget', - width: 3, - height: 4, - title: 'Accelerometer', - initialProps: accLineGraph - }, - { - widgetName: 'graphWidget', - width: 3, - height: 4, - title: 'Gyroscope', - initialProps: gyroLineGraph - }, - { - widgetName: 'graphWidget', - width: 3, - height: 4, - title: 'Magnetometer', - initialProps: magLineGraph - }, - { - widgetName: 'graphWidget', - width: 2, - height: 4, - title: 'Altitude', - initialProps: altitudeGraph - }, - { - widgetName: 'graphWidget', - width: 2, - height: 4, - title: 'Pressure', - initialProps: pressureGraph - }, - { - widgetName: 'graphWidget', - width: 2, - height: 4, - title: 'Temperature', - initialProps: temperatureGraph - }, - { - widgetName: 'stateWidget', - width: 2, - height: 4, - title: 'stateWidget' - }, - { - widgetName: 'mapwidget', - width: 4, - height: 8, - title: 'GPS Data' - }, - { - widgetName: 'graphWidget', - width: 4, - height: 4, - title: 'Amplitude', - initialProps: amplitudeGraph - }, - // { - // widgetName: 'waveformWidget', - // width: 4, - // height: 4, - // title: 'Amplitude Waveform', - // initialProps: waveformProps - // }, - { - widgetName: 'spectrogramWidget', - width: 4, - height: 4, - title: 'Spectrogram Widget' - } - ] - } - ] - } -}; diff --git a/src/model/user-config.ts b/src/model/user-config.ts new file mode 100644 index 0000000..9edf10c --- /dev/null +++ b/src/model/user-config.ts @@ -0,0 +1,18 @@ +import { UserConfig } from '@wuespace/telestion-client-types'; +import { + overviewDashboard, + recoveryDashboard, + soundingRocketDashboard, + systemStateDashboard +} from './dashboards'; + +export const userConfig: UserConfig = { + admin: { + dashboards: [ + overviewDashboard, + soundingRocketDashboard, + systemStateDashboard, + recoveryDashboard + ] + } +}; diff --git a/src/widgets/map-widget/index.ts b/src/widgets/map-widget/index.ts index bee93c7..1efad7a 100644 --- a/src/widgets/map-widget/index.ts +++ b/src/widgets/map-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: 'mapwidget', + name: 'mapWidget', Widget: WidgetRenderer };