update

vue-cli3-webapp/src/App.vue

@@ -262,6 +262,12 @@
               }
             ],
             layout: {
+              margin: {
+                l:0,
+                r:40,
+                b:50,
+                t:10
+              },
               // title: 'reactive charts',
               xaxis: {
                 // will be set on mount
@@ -378,8 +384,8 @@
       },
       window: {
         handler: function () {
-            this.chart.layout.width = this.window.width * 0.9;
-            this.chart.layout.height = this.window.height * 0.75;
+            this.chart.layout.width = this.window.width * 0.92;
+            this.chart.layout.height = this.window.height * 0.95;
             if (this.window.width < 600) this.chart.layout.width = this.window.width;
             if (this.window.height < 600) this.chart.layout.height = this.window.height;
 

vue-cli3-webapp/src/components/GetMaterials.vue

@@ -57,6 +57,24 @@
                         </td>
                     </tr>
                 </table>
+                <div class="field is-horizontal">
+                    <div class="field-label is-normal">
+                        <label class="label"> Plot options </label>
+                    </div>
+                    <div class="field-body">
+                        <div class="columns">
+                            <div class="column">
+                                <b-switch v-model="isPlot_n"> Re(n)</b-switch>
+                            </div>
+                            <div class="column">
+                                <b-switch v-model="isPlot_k"> Im(n)</b-switch>
+                            </div>
+                            <div class="column">
+                                <b-switch v-model="isPlot_spline"> Interpolation</b-switch>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="chart-container">
                     <reactive-chart :chart="chart"/>
                 </div>
@@ -91,6 +109,12 @@
                     uuid: "materials",
                     traces: [],
                     layout: {
+                        margin: {
+                            l:10,
+                            r:40,
+                            b:50,
+                            t:10
+                        },
                         // title: 'reactive charts',
                         xaxis: {
                             title: 'Wavelength, nm'
@@ -107,6 +131,9 @@
                         width: this.plot_width,
                         height: this.plot_height}
                 },
+                isPlot_n: true,
+                isPlot_k: true,
+                isPlot_spline: true,
             }
         },
         mounted() {