{
+ state = {
+ moreOptions: false,
+ }
+
+ render() {
+ const { onChange, value } = this.props
+ return (
+
+ )
+ }
+}
+
+const YAxisConfigForm = ({ value, onChange, label }: any) => (
+
+
+ onChange({ ...value, label: e.target.value })}
+ aria-label="label"
+ maxLength={parseInt(Y_LABEL_MAX_LENGTH)}
+ />
+
+
+ onChange({ ...value, scale: e.target.value as string })}
+ value={value.scale}
+ enumType={AxisScale}
+ />
+
+
+)
+
+
+interface EnumSelectProps {
+ enumType: any
+ inputLabel: string
+ value: string
+}
+const EnumSelect = ({ enumType, inputLabel, ...props }: EnumSelectProps & EuiButtonGroupProps) => (
+ ({ id: v, label: v }))}
+ onChange={id => props.onChange({ target: { value: id}} as any)}
+ idSelected={props.value.toString()}
+ isFullWidth
+ />
+)
+
diff --git a/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartResultView.tsx b/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartResultView.tsx
new file mode 100644
index 0000000000..dc8e5cc612
--- /dev/null
+++ b/redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/ChartResultView.tsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import { EuiSpacer } from '@elastic/eui'
+
+import { TimeSeries, YAxisConfig, ChartConfig, AxisScale, GraphMode } from './interfaces'
+import ChartConfigForm from './ChartConfigForm'
+import Chart from './Chart'
+
+enum LAYOUT_STATE {
+ INITIAL_STATE,
+ RELAYOUT_STATE,
+}
+
+/*
+ * `chartMiddleChild` is of type `JSX.Element` that when provided will be
+ * placed between the `Chart` Component and the `ChartConfigForm Component.
+ */
+interface ChartResultViewProps {
+ data: TimeSeries[]
+}
+
+interface ChartResultViewState {
+ chartConfig: ChartConfig
+ chartState: LAYOUT_STATE
+}
+
+const isDarkTheme = document.body.classList.contains('theme_DARK')
+
+export default class ChartResultView extends React.Component {
+ constructor(props: ChartResultViewProps) {
+ super(props)
+
+ const defaultYAxisConfig: YAxisConfig = { label: '', scale: AxisScale.linear }
+ const keyToY2AxisDefault = props.data.reduce((keyToYAxis: any, timeSeries) => {
+ keyToYAxis[timeSeries.key] = false
+ return keyToYAxis
+ }, {})
+
+ this.state = {
+ chartConfig: {
+ mode: GraphMode.line,
+ title: '',
+ xlabel: '',
+ staircase: false,
+ fill: true,
+ yAxis2: false,
+ keyToY2Axis: keyToY2AxisDefault,
+ yAxisConfig: defaultYAxisConfig,
+ yAxis2Config: defaultYAxisConfig,
+ },
+ chartState: LAYOUT_STATE.INITIAL_STATE
+ }
+ }
+
+ handleChartConfigChanged = (control: string, value: any) => {
+ this.onChartConfigChange(control, value)
+ if (this.state.chartState !== LAYOUT_STATE.INITIAL_STATE) {
+ this.setState({ chartState: LAYOUT_STATE.INITIAL_STATE })
+ }
+ }
+
+
+ onChartConfigChange = (control: string, value: any) => {
+ const chartConfig = { ...this.state.chartConfig, [control]: value }
+ this.setState({ chartConfig })
+ }
+
+ onRelayout = (eventData: any) => {
+ if (this.state.chartState !== LAYOUT_STATE.RELAYOUT_STATE) {
+ this.setState({ chartState: LAYOUT_STATE.RELAYOUT_STATE })
+ }
+ }
+
+ onDoubleClick = (eventData: any) => {
+ if (this.state.chartState !== LAYOUT_STATE.INITIAL_STATE) {
+ this.setState({ chartState: LAYOUT_STATE.INITIAL_STATE })
+ }
+ }
+
+
+ render() {
+ return (
+
+
+
+ {
+ this.state.chartState === LAYOUT_STATE.INITIAL_STATE
+ ?
+ 'Drag over the part of the chart to zoom into it'
+ :
+ 'Double click on the graph to reset the view'
+ }
+
+
+
+
+
+
+