basic panel options working

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() {

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>

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,

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;
 }

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 {