Add numeric chart panel

app/src/actions/Charts.ts

@@ -0,0 +1,101 @@
+import { Action, ActionTypes, ChartParameters } from '../reducers/Charts'
+import { AppState } from '../reducers'
+import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
+import { Dispatch } from 'redux'
+import { showError } from './Global'
+
+interface ConnectionViewState {
+  charts: Array<ChartParameters>
+}
+
+interface ConnectionViewStateDictionary {
+  [s: string]: ConnectionViewState
+}
+const connectionViewStateIdentifier: StorageIdentifier<ConnectionViewStateDictionary> = {
+  id: 'connection_view_state',
+}
+
+export const loadCharts = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const connectionId = getState().connection.connectionId
+  if (!connectionId) {
+    return
+  }
+
+  let viewStates: ConnectionViewStateDictionary | undefined
+  try {
+    viewStates = await persistentStorage.load(connectionViewStateIdentifier)
+  } catch (error) {
+    dispatch(showError(error))
+  }
+
+  if (!viewStates || !viewStates[connectionId]) {
+    dispatch(setCharts([]))
+    return
+  }
+
+  const viewState = viewStates[connectionId]
+  if (viewState) {
+    dispatch(setCharts(viewState.charts))
+  }
+}
+
+export const saveCharts = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const connectionId = getState().connection.connectionId
+  if (!connectionId) {
+    return
+  }
+
+  const charts = getState()
+    .charts.get('charts')
+    .toArray()
+
+  let viewStates: ConnectionViewStateDictionary | undefined
+  try {
+    viewStates = (await persistentStorage.load(connectionViewStateIdentifier)) || {}
+    const state: ConnectionViewState = viewStates[connectionId] || { charts: [] }
+    state.charts = charts
+
+    viewStates[connectionId] = state
+    await persistentStorage.store(connectionViewStateIdentifier, viewStates)
+  } catch (error) {
+    dispatch(showError(error))
+  }
+}
+
+export const addChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  let chartExists = Boolean(
+    getState()
+      .charts.get('charts')
+      .find(chart => chart.topic === chartParameters.topic && chart.dotPath === chartParameters.dotPath)
+  )
+  if (chartExists) {
+    return
+  }
+
+  dispatch({
+    type: ActionTypes.CHARTS_ADD,
+    chart: chartParameters,
+  })
+  dispatch(saveCharts())
+}
+
+export const removeChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    chart: chartParameters,
+    type: ActionTypes.CHARTS_REMOVE,
+  })
+  dispatch(saveCharts())
+}
+
+export const setCharts = (charts: Array<ChartParameters>): Action => {
+  return {
+    charts,
+    type: ActionTypes.CHARTS_SET,
+  }
+}

app/src/actions/Connection.ts

@@ -21,7 +21,6 @@ export const connect = (options: MqttOptions, connectionId: string) => (
   const host = url.parse(options.url).hostname
 
   rendererEvents.subscribe(event, dataSourceState => {
-    console.log(dataSourceState)
     if (dataSourceState.connected) {
       const didReconnect = Boolean(getState().connection.tree)
       if (!didReconnect) {

app/src/actions/ConnectionManager.ts

@@ -15,9 +15,8 @@ import * as path from 'path'
 
 import { ActionTypes, Action } from '../reducers/ConnectionManager'
 
-const storedConnectionsIdentifier: StorageIdentifier<{
-  [s: string]: ConnectionOptions
-}> = {
+type ConnectionDictionary = { [s: string]: ConnectionOptions }
+const storedConnectionsIdentifier: StorageIdentifier<ConnectionDictionary> = {
   id: 'ConnectionManager_connections',
 }
 
@@ -47,14 +46,12 @@ export const selectCertificate = (connectionId: string) => async (
 ) => {
   try {
     const certificate = await openCertificate()
-    console.log(certificate)
     dispatch(
       updateConnection(connectionId, {
         selfSignedCertificate: certificate,
       })
     )
   } catch (error) {
-    console.log(error)
     dispatch(showError(error))
   }
 }

app/src/actions/Settings.ts

@@ -1,15 +1,15 @@
 import * as q from '../../../backend/src/Model'
+import { ActionTypes, SettingsState, TopicOrder } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { batchActions } from 'redux-batched-actions'
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
+import { globalActions } from './'
 import { showError } from './Global'
 import { showTree } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
-import { ActionTypes, SettingsState, TopicOrder } from '../reducers/Settings'
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { globalActions } from '.'
 
 const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
   id: 'Settings',

app/src/actions/Sidebar.ts

@@ -44,7 +44,6 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicC
       .filter(topic => Boolean(topic.message && topic.message.value))
       .slice(0, subtopicClearLimit)
       .forEach(topic => {
-        console.log('deleting', topic.path())
         const mqttMessage = {
           topic: topic.path(),
           payload: null,

app/src/actions/index.ts

@@ -1,3 +1,4 @@
+import * as chartActions from './Charts'
 import * as connectionActions from './Connection'
 import * as connectionManagerActions from './ConnectionManager'
 import * as globalActions from './Global'
@@ -10,6 +11,7 @@ import * as updateNotifierActions from './UpdateNotifier'
 export {
   settingsActions,
   treeActions,
+  chartActions,
   publishActions,
   updateNotifierActions,
   connectionActions,