Commit 29a7b2df authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

dynamic import of charts

parent 9f8ac04e
import Vue from 'vue' import Vue from 'vue'
import Scatterplot from '../vue/charts/Scatterplot.vue'
import Boxplot from '../vue/charts/Boxplot.vue'
import Volcanoplot from '../vue/charts/Volcanoplot.vue'
import Heatmap from '../vue/charts/Heatmap.vue'
import PCA from '../vue/charts/PCA.vue'
import SurvivalPlot from '../vue/charts/Survivalplot.vue'
export default class { export default class {
constructor () { constructor () {
this.AVAILABLE_CHARTS = { this.available_charts = {}
[Scatterplot.name]: Scatterplot, const req = require.context('../vue/charts/', true, /\.vue$/)
[Boxplot.name]: Boxplot, req.keys().forEach(key => {
[Heatmap.name]: Heatmap, const vm = req(key).default
[PCA.name]: PCA, this.available_charts[vm.name] = vm
[Volcanoplot.name]: Volcanoplot, })
[SurvivalPlot.name]: SurvivalPlot
}
} }
/** /**
* Attempts to set a chart based on a given name as a child of the given selector. * Attempts to set a chart based on a given name as a child of the given selector.
* @param chart: The name of the chart. Must be a name of a vue component within AVAILABLE_CHARTS. * @param chart: The name of the chart. Must be a name of a vue component within available_charts.
* @param selector: A unique selector which will be the parent of the chart. * @param selector: A unique selector which will be the parent of the chart.
* @returns {Vue} The mounted vue component. * @returns {Vue} The mounted vue component.
*/ */
setChart (chart, selector) { setChart (chart, selector) {
if (!this.AVAILABLE_CHARTS.hasOwnProperty(chart)) { if (!this.available_charts.hasOwnProperty(chart)) {
throw new Error(`Chart '${chart} is not available. Must be one of: ${this.AVAILABLE_CHARTS}`) throw new Error(`Chart '${chart} is not available. Must be one of: ${this.available_charts}`)
} }
let container = document.querySelectorAll(selector) let container = document.querySelectorAll(selector)
if (container.length !== 1) { if (container.length !== 1) {
throw new Error(`Selector to set a chart must match exactly one element. Matched elements: ${container.length}`) throw new Error(`Selector to set a chart must match exactly one element. Matched elements: ${container.length}`)
} }
container = container[0] container = container[0]
const Chart = Vue.extend(this.AVAILABLE_CHARTS[chart]) const Chart = Vue.extend(this.available_charts[chart])
const vm = new Chart() const vm = new Chart()
const el = document.createElement('div') const el = document.createElement('div')
container.appendChild(el) container.appendChild(el)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment