scatt/guiapp/src/components/PlotSpectra.vue

<template>
  <div>
    <ReactiveChart :chart="$store.state.plotRuntime.spectrumPlots"/>
  </div>
</template>

<script>
import ReactiveChart from 'components/ReactiveChart.vue'
import { useStore } from 'src/store'
import {
  defineComponent,
  computed,
  watch
} from 'vue'

export default defineComponent({
  name: 'PlotSpectra',
  components: {
    ReactiveChart,
  },
  setup () {
    const $store = useStore()
    const isPlotQsca = computed( ()=>$store.state.plotRuntime.isPlotQsca)
    watch(isPlotQsca, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
    const isPlotQabs = computed( ()=>$store.state.plotRuntime.isPlotQabs)
    watch(isPlotQabs, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
    const isPlotQext = computed( ()=>$store.state.plotRuntime.isPlotQext)
    watch(isPlotQext, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))

    const isPlotQscaTotal = computed( ()=>$store.state.plotRuntime.isPlotQscaTotal)
    watch(isPlotQscaTotal, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
    const isPlotQabsTotal = computed( ()=>$store.state.plotRuntime.isPlotQabsTotal)
    watch(isPlotQabsTotal, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))
    const isPlotQextTotal = computed( ()=>$store.state.plotRuntime.isPlotQextTotal)
    watch(isPlotQextTotal, ()=>$store.commit('plotRuntime/updateSpectrumPlots'))

    const isPlotModeE = computed( ()=>$store.state.plotRuntime.isPlotModeE)
    watch(isPlotModeE, ()=>$store.commit('plotRuntime/updateSpectrumPlots'), { deep: true })
    const isPlotModeH = computed( ()=>$store.state.plotRuntime.isPlotModeH)
    watch(isPlotModeH, ()=>$store.commit('plotRuntime/updateSpectrumPlots'), { deep: true })

    const sourceUnits = computed( ()=>$store.state.guiRuntime.sourceUnits)
    function setPlotTitle() {
      let title=''
      if (sourceUnits.value.endsWith('Hz')) {
        title = 'Frequency [' + sourceUnits.value + ']'
      } else if (sourceUnits.value.endsWith('eV')) {
        title = 'Energy [' + sourceUnits.value + ']'
      } else if (sourceUnits.value.endsWith('s')) {
        title = 'Period [' + sourceUnits.value + ']'
      } else {
        title = 'Wavelength [' + sourceUnits.value + ']'
      }
      $store.commit('plotRuntime/updateXAxisTitle', title)
    }

    function updateSpectraPlotsUnits(){
      setPlotTitle()
      $store.commit('plotRuntime/setWLsInUnits', sourceUnits.value)
      $store.commit('plotRuntime/updateSpectrumPlots')
    }

    updateSpectraPlotsUnits()
    watch(sourceUnits, ()=> updateSpectraPlotsUnits())

    return {}
  }
})
</script>