Add clear chart button and improve chart menu look&feel

app/src/components/ChartPanel/ChartSettings/MoveUp.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
-import { connect } from 'react-redux'
+import ArrowUpward from '@material-ui/icons/ArrowUpward'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
+import { ChartParameters } from '../../../reducers/Charts'
+import { connect } from 'react-redux'
+import { MenuItem, Typography, ListItemIcon } from '@material-ui/core'
 
 function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
   const moveUp = React.useCallback(() => {
@@ -16,7 +17,10 @@ function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartPa
 
   return (
     <MenuItem key="size" onClick={moveUp}>
-      Move up
+      <ListItemIcon>
+        <ArrowUpward />
+      </ListItemIcon>
+      <Typography variant="inherit">Move up</Typography>
     </MenuItem>
   )
 }

app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx

@@ -56,8 +56,8 @@ function RangeSettings(props: Props) {
         onClose={props.onClose}
         onKeyDownCapture={handleKeyEvents}
       >
-        <Typography>Define custom ranges for the Y-Axis</Typography>
-        <div style={{ padding: '0 16px' }}>
+        <div style={{ padding: '0 16px', width: '275px' }}>
+          <Typography>Define custom ranges for the Y-Axis</Typography>
           <TextField
             inputProps={{
               ref: rangeFromRef,

app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx

@@ -4,9 +4,12 @@ import CustomIconButton from '../../helper/CustomIconButton'
 import MoreVertIcon from '@material-ui/icons/Settings'
 import { ChartParameters } from '../../../reducers/Charts'
 
-export function SettingsButton(props: { parameters: ChartParameters }) {
+export function SettingsButton(props: {
+  parameters: ChartParameters
+  resetDataAction: () => void
+  menuAnchor: React.MutableRefObject<undefined>
+}) {
   const [visible, setVisible] = React.useState(false)
-  const settingsRef = React.useRef()
   const toggleSettings = React.useCallback(() => {
     setVisible(!visible)
   }, [visible])
@@ -17,10 +20,15 @@ export function SettingsButton(props: { parameters: ChartParameters }) {
 
   return (
     <span>
-      <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
+      <ChartSettings
+        open={visible}
+        close={close}
+        anchorEl={props.menuAnchor}
+        chart={props.parameters}
+        resetDataAction={props.resetDataAction}
+      />
       <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
         <MoreVertIcon
-          ref={settingsRef as any}
           data-test-type="ChartSettings"
           data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
         />

app/src/components/ChartPanel/ChartSettings/Size.tsx

@@ -24,16 +24,16 @@ function Size(props: {
   return (
     <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
       <MenuItem selected={props.chart.width === undefined} onClick={setChartWidth()}>
-        auto
+        <Typography variant="inherit">auto</Typography>
       </MenuItem>
       <MenuItem selected={props.chart.width === 'big'} onClick={setChartWidth('big')}>
-        100% width
+        <Typography variant="inherit">100% width</Typography>
       </MenuItem>
       <MenuItem selected={props.chart.width === 'medium'} onClick={setChartWidth('medium')}>
-        50% width
+        <Typography variant="inherit">50% width</Typography>
       </MenuItem>
       <MenuItem selected={props.chart.width === 'small'} onClick={setChartWidth('small')}>
-        33% width
+        <Typography variant="inherit">33% width</Typography>
       </MenuItem>
     </Menu>
   )

app/src/components/ChartPanel/ChartSettings/index.tsx

@@ -1,16 +1,22 @@
-import * as React from 'react'
+import BarChart from '@material-ui/icons/BarChart'
+import Clear from '@material-ui/icons/Refresh'
+import ColorLens from '@material-ui/icons/ColorLens'
 import ColorSettings from './ColorSettings'
 import InterpolationSettings from './InterpolationSettings'
 import MoveUp from './MoveUp'
+import MultiLineChart from '@material-ui/icons/MultiLineChart'
 import RangeSettings from './RangeSettings'
+import React, { memo } from 'react'
 import Size from './Size'
+import Sort from '@material-ui/icons/Sort'
 import TimeRangeSettings from './TimeRangeSettings'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem } from '@material-ui/core'
+import { Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core'
 
 function ChartSettings(props: {
   open: boolean
   close: () => void
+  resetDataAction: () => void
   chart: ChartParameters
   anchorEl: React.MutableRefObject<undefined>
 }) {
@@ -59,19 +65,40 @@ function ChartSettings(props: {
     <span>
       <Menu id="long-menu" anchorEl={props.anchorEl.current} open={props.open} onClose={props.close}>
         <MenuItem key="range" onClick={toggleRange}>
-          Set range
+          <ListItemIcon>
+            <BarChart />
+          </ListItemIcon>
+          <Typography variant="inherit">Y-Axis range (Values)</Typography>
         </MenuItem>
         <MenuItem key="timeRange" onClick={toggleTimeRange}>
-          Time range
+          <ListItemIcon>
+            <BarChart />
+          </ListItemIcon>
+          <Typography variant="inherit">X-Axis range (Time)</Typography>
         </MenuItem>
         <MenuItem key="interpolation" onClick={toggleInterpolation}>
+          <ListItemIcon>
+            <MultiLineChart />
+          </ListItemIcon>{' '}
           Curve interpolation
         </MenuItem>
         <MenuItem key="size" onClick={toggleSize}>
-          Size
+          <ListItemIcon>
+            <Sort />
+          </ListItemIcon>
+          <Typography variant="inherit">Size</Typography>
         </MenuItem>
         <MenuItem key="color" onClick={toggleColor}>
-          Color
+          <ListItemIcon>
+            <ColorLens />
+          </ListItemIcon>
+          <Typography variant="inherit">Color</Typography>
+        </MenuItem>
+        <MenuItem key="clear" onClick={props.resetDataAction}>
+          <ListItemIcon>
+            <Clear />
+          </ListItemIcon>
+          <Typography variant="inherit">Clear data</Typography>
         </MenuItem>
         <MoveUp chart={props.chart} close={props.close} />
       </Menu>
@@ -94,4 +121,4 @@ function ChartSettings(props: {
   )
 }
 
-export default ChartSettings
+export default memo(ChartSettings)