Fix from Grafana's feedback on PR #595

Author: ae3e

dist/module.js

@@ -21,7 +21,7 @@
       {"name": "Panel", "path": "img/panel.png"}
     ],
     "version": "0.2.1",
-    "updated": "2020-08-28"
+    "updated": "2020-09-01"
   },
 
   "dependencies": {

dist/module.js.map

@@ -66,77 +66,82 @@ export class SimpleEditor extends PureComponent<PanelEditorProps<SimpleOptions>>
       <div>
         {/*<FormField label="Title" value={this.props.options.title} onChange={this.onTextChanged} />*/}
 
-        <div className="section gf-form-group">
+        <div className="section gf-form-group" style={{width:'100%'}}>
           <h5 className="section-heading">Data</h5>
           <div className="gf-form-inline">
-            <div className="gf-form">
+            <div className="gf-form" style={{width:'100%'}}>
               <AceEditor
                 mode="javascript"
                 theme={theme}
                 name="dashboard_data"
                 height="150px"
+                width="100%"
                 value={JSON.stringify(this.props.options.data, null, 4)}
                 onBlur={this.onDataChanged}
               />
             </div>
           </div>
         </div>
-        <div className="section gf-form-group">
+        <div className="section gf-form-group" style={{width:'100%'}}>
           <h5 className="section-heading">Layout</h5>
           <div className="gf-form-inline">
-            <div className="gf-form">
+            <div className="gf-form" style={{width:'100%'}}>
               <AceEditor
                 mode="javascript"
                 theme={theme}
                 name="dashboard_layout"
                 height="150px"
+                width="100%"
                 value={JSON.stringify(this.props.options.layout, null, 4)}
                 onBlur={this.onLayoutChanged}
               />
             </div>
           </div>
         </div>
-        <div className="section gf-form-group">
+        <div className="section gf-form-group" style={{width:'100%'}}>
           <h5 className="section-heading">Config</h5>
           <div className="gf-form-inline">
-            <div className="gf-form">
+            <div className="gf-form" style={{width:'100%'}}>
               <AceEditor
                 mode="javascript"
                 theme={theme}
                 name="dashboard_config"
                 height="150px"
+                width="100%"
                 value={JSON.stringify(this.props.options.config, null, 4)}
                 onBlur={this.onConfigChanged}
               />
             </div>
           </div>
         </div>
 
-        <div className="section gf-form-group">
+        <div className="section gf-form-group" style={{width:'100%'}}>
           <h5 className="section-heading">Script</h5>
           <div className="gf-form-inline">
-            <div className="gf-form">
+            <div className="gf-form" style={{width:'100%'}}>
             <AceEditor
             mode="javascript"
             theme={theme}
             name="dashboard_script"
             height="150px"
+            width="100%"
             value={this.props.options.script}
             onBlur={this.onScriptChanged}
           />
             </div>
           </div>
         </div>
 
-        <div className="section gf-form-group">
-          <h5 className="section-heading">on Click Function</h5>
+        <div className="section gf-form-group" style={{width:'100%'}}>
+          <h5 className="section-heading">Click script</h5>
           <div className="gf-form-inline">
-            <div className="gf-form">
+            <div className="gf-form" style={{width:'100%'}}>
             <AceEditor
             mode="javascript"
             theme={theme}
             name="dashboard_onclick"
             height="150px"
+            width="100%"
             value={this.props.options.onclick}
             onBlur={this.onClickChanged}
           />

dist/plugin.json

@@ -15,6 +15,10 @@ export const defaults: SimpleOptions = {
     },
     "paper_bgcolor": "rgba(0,0,0,0)",
     "plot_bgcolor": "rgba(0,0,0,0)",
+    "margin":{
+      "t":30,
+      "b":20
+    },
     "xaxis": {
         "type": "date"
     }
@@ -37,6 +41,5 @@ var trace = {
   
 return {data:[trace],layout:{title:'My Chart'}};`,
   onclick:`console.log(data)
-//Not working if variable is a Textbox : Maximum call stack size exceeded. Grafana bug?
-window.updateVariables({query:{'var-project':'toti'}, partial: true})`
+window.updateVariables({query:{'var-project':'test'}, partial: true})`
 };