From 9393b06166564bd80d483aff48fef145d35e6e13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 5 Nov 2018 10:31:39 -0800
Subject: [PATCH] basic panel options working

---
 .../dashboard/dashgrid/PanelEditor.tsx        |  1 +
 public/app/plugins/panel/graph2/module.tsx    | 27 ++++++++++---------
 public/app/types/index.ts                     |  3 ++-
 public/app/types/panel.ts                     |  2 +-
 public/app/types/plugins.ts                   |  4 +--
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
index 9d98621f9b6..371ed22fff7 100644
--- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx
@@ -54,6 +54,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
 
   onPanelOptionsChanged = (options: any) => {
     this.props.panel.updateOptions(options);
+    this.forceUpdate();
   };
 
   renderVizTab() {
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index 68068268dd4..a666d762062 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/public/app/plugins/panel/graph2/module.tsx
@@ -5,7 +5,7 @@ import Graph from 'app/viz/Graph';
 import { Switch } from 'app/core/components/Switch/Switch';
 
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import { PanelProps, NullValueMode } from 'app/types';
+import { PanelProps, PanelOptionsProps, NullValueMode } from 'app/types';
 
 interface Options {
   showBars: boolean;
@@ -43,34 +43,37 @@ export class Graph2 extends PureComponent<Props> {
   }
 }
 
-export class GraphOptions extends PureComponent<Options> {
+export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
   onToggleLines = () => {
-    const options = this.props as Options;
-
     this.props.onChange({
-      ...options,
-      showLines: !this.props.showLines,
+      ...this.props.options,
+      showLines: !this.props.options.showLines,
+    });
+  };
+
+  onToggleBars = () => {
+    this.props.onChange({
+      ...this.props.options,
+      showBars: !this.props.options.showBars,
     });
   };
 
   onTogglePoints = () => {
-    const options = this.props as Options;
-
     this.props.onChange({
-      ...options,
-      showPoints: !this.props.showPoints,
+      ...this.props.options,
+      showPoints: !this.props.options.showPoints,
     });
   };
 
   render() {
-    const { showBars, showPoints, showLines } = this.props;
+    const { showBars, showPoints, showLines } = this.props.options;
 
     return (
       <div>
         <div className="section gf-form-group">
           <h5 className="page-heading">Draw Modes</h5>
           <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
           <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
         </div>
       </div>
diff --git a/public/app/types/index.ts b/public/app/types/index.ts
index c51622682d4..fc176fed7e2 100644
--- a/public/app/types/index.ts
+++ b/public/app/types/index.ts
@@ -20,7 +20,7 @@ import {
   DataQueryResponse,
   DataQueryOptions,
 } from './series';
-import { PanelProps } from './panel';
+import { PanelProps, PanelOptionsProps } from './panel';
 import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
 import { Organization, OrganizationPreferences, OrganizationState } from './organization';
 import {
@@ -69,6 +69,7 @@ export {
   TimeRange,
   LoadingState,
   PanelProps,
+  PanelOptionsProps,
   TimeSeries,
   TimeSeriesVM,
   TimeSeriesVMs,
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index 5207c17ada9..7febd0cad26 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -8,7 +8,7 @@ export interface PanelProps<T = any> {
   renderCounter: number;
 }
 
-export interface PanelOptionProps<T = any> {
+export interface PanelOptionsProps<T = any> {
   options: T;
   onChange: (options: T) => void;
 }
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 4b172c0eef4..817777669d8 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -1,5 +1,5 @@
 import { ComponentClass } from 'react';
-import { PanelProps, PanelOptionProps } from './panel';
+import { PanelProps, PanelOptionsProps } from './panel';
 
 export interface PluginExports {
   Datasource?: any;
@@ -12,7 +12,7 @@ export interface PluginExports {
   // Panel plugin
   PanelCtrl?;
   PanelComponent?: ComponentClass<PanelProps>;
-  PanelOptionsComponent: ComponentClass<PanelOptionProps>;
+  PanelOptionsComponent: ComponentClass<PanelOptionsProps>;
 }
 
 export interface PanelPlugin {