initial plotting

guiapp/src/components/GetNumberOfModes.vue → guiapp/src/components/GetPlotSettings.vue

@@ -35,7 +35,7 @@ import { useStore } from 'src/store'
 import { flexRowTitleStyle } from 'components/utils'
 
 export default defineComponent({
-  name: 'GetNumberOfModes',
+  name: 'GetPlotSettings',
 
   setup() {
     const $store = useStore()

guiapp/src/components/PlotSelector.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="row justify-xs-center justify-sm-start items-baseline">
+    <div class="col-auto">
+    </div>
+    <q-toggle v-model="isQscaToggle" dense class="q-ml-md">Qsca</q-toggle>
+    <q-toggle v-model="isQabsToggle" dense class="q-ml-md">Qabs</q-toggle>
+    <q-toggle v-model="isQextToggle" dense class="q-ml-md">Qext</q-toggle>
+
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  } from 'vue'
+import { useStore } from 'src/store'
+import { flexRowTitleStyle } from 'components/utils'
+
+export default defineComponent({
+  name: 'GetPlotSettings',
+
+  setup() {
+    const $store = useStore()
+    const isQscaToggle = computed({
+      get: () => $store.state.plotRuntime.isQscaToggle,
+      set: val => $store.commit('plotRuntime/setQscaToggle', val)
+    })
+    const isQabsToggle = computed({
+      get: () => $store.state.plotRuntime.isQabsToggle,
+      set: val => $store.commit('plotRuntime/setQabsToggle', val)
+    })
+    const isQextToggle = computed({
+      get: () => $store.state.plotRuntime.isQextToggle,
+      set: val => $store.commit('plotRuntime/setQextToggle', val)
+    })
+
+    return { isQscaToggle, isQabsToggle, isQextToggle
+      }
+  },
+})
+</script>

guiapp/src/components/ReactiveChart.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { newPlot, react, Data, Layout, Config } from 'plotly.js-dist-min'
+import { newPlot, react } from 'plotly.js-dist-min'
+import { plotlyChart } from 'src/store/plot-runtime/state'
 import {
   defineComponent,
   PropType,
@@ -14,16 +15,11 @@ import {
 import {cloneDeep} from 'lodash'
 import { v4 as uuidv4 } from 'uuid'
 
-interface PlotlyChart {
-  data: Data[],
-  layout: Layout,
-  config: Config|undefined
-}
 export default defineComponent({
   name: 'ReactiveChart',
   props: {
     chart: {
-      type: Object as PropType<PlotlyChart>,
+      type: Object as PropType<plotlyChart>,
       required: true,
     },
   },

guiapp/src/components/RunSimulationSpectrum.vue

@@ -125,6 +125,7 @@ export default defineComponent({
           // console.log('Total simulation time:', nmieTotalRunTime, 's')
           $store.commit('simulationSetup/setNmieTotalRunTime', nmieTotalRunTime)
           $store.commit('plotRuntime/setQ', {WLs, Qsca, Qabs, Qext, Qsca_n, Qabs_n, Qext_n})
+          $store.commit('plotRuntime/updateSpectraPlot')
         } catch (e) {
           console.log(e)
         }

guiapp/src/layouts/MainLayout.vue

@@ -12,7 +12,7 @@
           @click="toggleLeftDrawer"
         />
         <q-tabs align="right">
-          <q-route-tab to="/spectrum" label="Spectrum" name="spectrum"/>
+          <q-route-tab to="/spectrum" label="Spectra" name="spectrum"/>
           <q-route-tab to="/nearfield" label="Near-field" name="nearfield"/>
 <!--          <q-route-tab to="/farfield" label="Far-field" name="farfield"/>-->
         </q-tabs>

guiapp/src/pages/Spectrum.vue

@@ -9,13 +9,15 @@
     <div class="q-ma-xs"/>
     <GetParticleParameters/>
     <div class="q-ma-xs"/>
-    <GetNumberOfModes/>
+    <GetPlotSettings/>
     <div class="q-ma-xs"/>
     <RunSimulationSpectrum/>
     <div class="q-ma-xs"/>
-    <ReactiveChart :chart="chart"/>
+    <PlotSelector/>
+    <div class="q-ma-xs"/>
+    <ReactiveChart :chart="$store.state.plotRuntime.spectraPlot"/>
     <div class="col-auto q-pa-md">
-      Input result: {{$store.state.plotRuntime.Qsca}}
+      Input result: {{$store.state.plotRuntime.isQscaToggle}}
     </div>
   </q-page>
 </template>
@@ -23,65 +25,28 @@
 <script lang='ts'>
 import {
   defineComponent,
-    ref
 } from 'vue'
+
 import GetUnits from 'components/GetUnits.vue'
 import GetHostIndex from 'components/GetHostIndex.vue'
 import GetSourceParameters from 'components/GetSourceParameters.vue'
 import GetParticleParameters from 'components/GetParticleParameters.vue'
-import GetNumberOfModes from 'components/GetNumberOfModes.vue'
+import GetPlotSettings from 'components/GetPlotSettings.vue'
 import RunSimulationSpectrum from 'components/RunSimulationSpectrum.vue'
 import ReactiveChart from 'components/ReactiveChart.vue'
+import PlotSelector from 'components/PlotSelector.vue'
 // import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
   components: {
-    RunSimulationSpectrum, GetUnits, GetHostIndex, GetSourceParameters,
-    GetParticleParameters, GetNumberOfModes,
-    ReactiveChart
+    RunSimulationSpectrum, GetUnits, GetHostIndex,
+    GetSourceParameters, GetParticleParameters,
+    GetPlotSettings, ReactiveChart, PlotSelector
   },
-  setup() {
-    const chart = ref({
-      data: [{
-        y: [],
-        line: {
-          color: '#5e9e7e',
-          width: 4,
-          shape: 'line'
-        }
-      }],
-      layout: {
-        margin: {
-          l: 0,
-          r: 40,
-          b: 50,
-          t: 0
-        },
-        // paper_bgcolor: '#7f7f7f',
-        // plot_bgcolor: '#c7c7c7',
-        // title: 'reactive charts',
-        xaxis: {
-          // will be set on mount
-          title: ''
-        },
-        yaxis: {
-          title: 'Normalized cross-sections'
-        },
-        showlegend: true,
-        legend: {
-          orientation: 'h',
-          x: -.1,
-          y: 1.05
-        },
-      }
-    })
-    setTimeout(()=>{
-      chart.value.layout.yaxis.title='some new title'
-    }, 3000)
-    // const $store = useStore()
-    return {chart}
-  }
+  // setup() {
+  //
+  // }
 })
 </script>

guiapp/src/store/plot-runtime/mutations.ts

@@ -1,9 +1,10 @@
 import { MutationTree } from 'vuex'
-import { plotRuntimeStateInterface, spectraData } from './state'
+import { plotRuntimeStateInterface as prsi, spectraData } from './state'
 import {cloneDeep} from 'lodash'
+import { Data } from 'plotly.js-dist-min'
 
-const mutation: MutationTree<plotRuntimeStateInterface> = {
-  setQ (state: plotRuntimeStateInterface, val: spectraData) {
+const mutation: MutationTree<prsi> = {
+  setQ (state: prsi, val: spectraData) {
     state.WLs    = cloneDeep(val.WLs)
     state.Qsca   = cloneDeep(val.Qsca)
     state.Qabs   = cloneDeep(val.Qabs)
@@ -11,7 +12,21 @@ const mutation: MutationTree<plotRuntimeStateInterface> = {
     state.Qsca_n = cloneDeep(val.Qsca_n)
     state.Qabs_n = cloneDeep(val.Qabs_n)
     state.Qext_n = cloneDeep(val.Qext_n)
-  }
+  },
+
+  updateSpectraPlot (state: prsi) {
+    const traceQsca:Partial<Data> = {
+      x: state.WLs,
+      y: state.Qsca,
+      type: 'scatter',
+      name: 'Qsca'
+    }
+    state.spectraPlot.data.push(traceQsca)
+
+  },
+  setQscaToggle (state: prsi, val: boolean) {state.isQscaToggle = val},
+  setQabsToggle (state: prsi, val: boolean) {state.isQabsToggle = val},
+  setQextToggle (state: prsi, val: boolean) {state.isQextToggle = val},
 }
 
 export default mutation

guiapp/src/store/plot-runtime/state.ts

@@ -1,3 +1,11 @@
+import { Data, Layout, Config } from 'plotly.js-dist-min'
+
+export interface plotlyChart {
+  data: Data[],
+  layout: Partial<Layout>,
+  config: Partial<Config>|undefined
+}
+
 export interface spectraData {
   WLs: number[]
   Qsca:number[]
@@ -16,6 +24,10 @@ export interface plotRuntimeStateInterface {
   Qsca_n:number[][][]
   Qabs_n:number[][][]
   Qext_n:number[][][]
+  spectraPlot: plotlyChart
+  isQscaToggle: boolean
+  isQabsToggle: boolean
+  isQextToggle: boolean
 }
 
 function state(): plotRuntimeStateInterface {
@@ -24,8 +36,44 @@ function state(): plotRuntimeStateInterface {
   const Qsca_n:number[][][] = [[], []]
   const Qabs_n:number[][][] = [[], []]
   const Qext_n:number[][][] = [[], []]
+  const isQscaToggle = true
+  const isQabsToggle = true
+  const isQextToggle = false
+
+  const spectraPlot:plotlyChart = {
+    data: [],
+    layout: {
+      margin: {
+        l: 0,
+        r: 40,
+        b: 50,
+        t: 0
+      },
+      // paper_bgcolor: '#7f7f7f',
+      // plot_bgcolor: '#c7c7c7',
+      // title: 'reactive charts',
+      xaxis: {
+        // will be set on mount
+        title: ''
+      },
+      yaxis: {
+        title: 'Normalized cross-sections'
+      },
+      showlegend: true,
+      legend: {
+        orientation: 'h',
+        x: -.1,
+        y: 1.05
+      },
+    },
+    config: {responsive: true,
+      // showEditInChartStudio: true,
+      displaylogo: false}
+  }
+
   return { WLs,
-    Qsca, Qabs, Qext, Qsca_n, Qabs_n, Qext_n
+    Qsca, Qabs, Qext, Qsca_n, Qabs_n, Qext_n,
+    spectraPlot, isQscaToggle, isQabsToggle, isQextToggle
   }
 }