Allow custom options for charts

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

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { ChartParameters, PlotCurveTypes } from '../../../reducers/Charts'
+import { connect } from 'react-redux'
+import { Menu, MenuItem } from '@material-ui/core'
+
+function chartParametersForAction(chart: ChartParameters, action: string) {
+  return {
+    topic: chart.topic,
+    dotPath: chart.dotPath,
+    interpolation: action as any,
+  }
+}
+
+const curves: Array<PlotCurveTypes> = ['curve', 'linear', 'step_after', 'step_before', 'cubic_basis_spline']
+
+function InterpolationSettings(props: {
+  chart: ChartParameters
+  actions: {
+    chart: typeof chartActions
+  }
+  anchorEl?: Element
+  open: boolean
+  onClose: () => void
+}) {
+  const callbacks = React.useMemo(() => {
+    const createCurveCallback = (curve: PlotCurveTypes) => () => {
+      props.actions.chart.updateChart(chartParametersForAction(props.chart, curve))
+    }
+
+    const callbacks: { [key: string]: () => void } = {}
+    for (const curve of curves) {
+      callbacks[curve] = createCurveCallback(curve)
+    }
+    return callbacks
+  }, [curves])
+
+  const menuItems = React.useMemo(() => {
+    return curves.map(curve => (
+      <MenuItem key={curve} onClick={callbacks[curve]} selected={props.chart.interpolation === curve}>
+        {curve.replace(/_/g, ' ')}
+      </MenuItem>
+    ))
+  }, [curves, props.chart])
+
+  return (
+    <Menu id="long-menu" anchorEl={props.anchorEl} open={props.open} onClose={props.onClose}>
+      {menuItems}
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(InterpolationSettings)

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

@@ -0,0 +1,78 @@
+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 { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+
+function RangeSettings(props: {
+  actions: { chart: typeof chartActions }
+  chart: ChartParameters
+  anchorEl?: Element
+  open: boolean
+  onClose: () => void
+}) {
+  const dismissClick = React.useCallback((e: React.MouseEvent) => e.stopPropagation(), [])
+  const [rangeFrom, setRangeFrom] = React.useState<string | number | undefined>(
+    props.chart.range && props.chart.range.from
+  )
+  const [rangeTo, setRangeTo] = React.useState<string | number | undefined>(props.chart.range && props.chart.range.to)
+
+  React.useEffect(() => {
+    const from = parseFloat(rangeFrom as any)
+    const to = parseFloat(rangeTo as any)
+    props.actions.chart.updateChart({
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+      range: {
+        from: isNaN(from) ? undefined : from,
+        to: isNaN(to) ? undefined : to,
+      },
+    })
+  }, [rangeFrom, rangeTo])
+
+  const setFromHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
+  const setToHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
+  return (
+    <Menu
+      style={{ textAlign: 'center' }}
+      id="long-menu"
+      anchorEl={props.anchorEl}
+      open={props.open}
+      onClose={props.onClose}
+    >
+      <Typography>Define custom ranges for the Y-Axis</Typography>
+      <div style={{ padding: '0 16px' }}>
+        <TextField
+          style={{ marginTop: '0' }}
+          onClick={dismissClick}
+          label="from"
+          value={rangeFrom}
+          onChange={setFromHandler}
+          margin="normal"
+        />
+        <TextField
+          style={{ marginLeft: '8px', marginTop: '0' }}
+          onClick={dismissClick}
+          label="to"
+          value={rangeTo}
+          onChange={setToHandler}
+          margin="normal"
+        />
+      </div>
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(RangeSettings)

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

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import ChartSettings from '.'
+import CustomIconButton from '../../helper/CustomIconButton'
+import MoreVertIcon from '@material-ui/icons/Settings'
+import { ChartParameters } from '../../../reducers/Charts'
+
+export function SettingsButton(props: { parameters: ChartParameters }) {
+  const [visible, setVisible] = React.useState(false)
+  const settingsRef = React.useRef()
+  const toggleSettings = React.useCallback(() => {
+    setVisible(!visible)
+  }, [visible])
+
+  const close = React.useCallback(() => {
+    setVisible(false)
+  }, [])
+
+  return (
+    <span>
+      <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
+      <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
+        <MoreVertIcon ref={settingsRef as any} />
+      </CustomIconButton>
+    </span>
+  )
+}

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

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import InterpolationSettings from './InterpolationSettings'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, MenuItem } from '@material-ui/core'
+import RangeSettings from './RangeSettings'
+
+function ChartSettings(props: {
+  open: boolean
+  close: () => void
+  chart: ChartParameters
+  anchorEl: React.MutableRefObject<undefined>
+}) {
+  const [rangeVisible, setRangeVisible] = React.useState(false)
+  const [interpolationVisible, setInterpolationVisible] = React.useState(false)
+
+  const toggleRange = React.useCallback(() => {
+    if (!rangeVisible && open) {
+      props.close()
+    }
+    setRangeVisible(!rangeVisible)
+  }, [rangeVisible, open])
+
+  const toggleInterpolation = React.useCallback(() => {
+    if (!interpolationVisible && open) {
+      props.close()
+    }
+    setInterpolationVisible(!interpolationVisible)
+  }, [interpolationVisible, open])
+
+  return (
+    <span>
+      <Menu id="long-menu" anchorEl={props.anchorEl.current} open={props.open} onClose={props.close}>
+        <MenuItem key="range" onClick={toggleRange}>
+          Set range
+        </MenuItem>
+        <MenuItem key="interpolation" onClick={toggleInterpolation}>
+          Curve interpolation
+        </MenuItem>
+      </Menu>
+      <RangeSettings chart={props.chart} anchorEl={props.anchorEl.current} open={rangeVisible} onClose={toggleRange} />
+      <InterpolationSettings
+        chart={props.chart}
+        anchorEl={props.anchorEl.current}
+        open={interpolationVisible}
+        onClose={toggleInterpolation}
+      />
+    </span>
+  )
+}
+
+export default ChartSettings