Commit 1f770f06 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

added new method to API to get available charts

parent 5ea46321
......@@ -42,6 +42,11 @@ class FractalJS {
return store.getters.chartManager.setChart(chart, selector)
}
// noinspection JSMethodCanBeStatic
getAvailableCharts () {
return store.getters.chartManager.getAvailableCharts()
}
// noinspection JSMethodCanBeStatic
clearCache () {
return store.getters.requestManager.deleteAllData()
......@@ -68,7 +73,6 @@ class FractalJS {
}
}
// TODO: Link to external documentation where supported services are listed
/**
* Initialize FractalJS and return an instance that contains all basic methods necessary to use this library.
*
......
......@@ -2,34 +2,38 @@ import Vue from 'vue'
export default class {
constructor () {
this.available_charts = {}
this.availableCharts = {}
const req = require.context('../vue/charts/', true, /\.vue$/)
req.keys().forEach(key => {
const vm = req(key).default
this.available_charts[vm.name] = vm
this.availableCharts[vm.name] = vm
})
}
/**
* 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 availableCharts.
* @param selector: A unique selector which will be the parent of the chart.
* @returns {Vue} The mounted vue component.
*/
setChart (chart, selector) {
if (!this.available_charts.hasOwnProperty(chart)) {
throw new Error(`Chart '${chart} is not available. Must be one of: ${this.available_charts}`)
if (!this.availableCharts.hasOwnProperty(chart)) {
throw new Error(`Chart '${chart} is not available. Must be one of: ${this.availableCharts}`)
}
let container = document.querySelectorAll(selector)
if (container.length !== 1) {
throw new Error(`Selector to set a chart must match exactly one element. Matched elements: ${container.length}`)
}
container = container[0]
const Chart = Vue.extend(this.available_charts[chart])
const Chart = Vue.extend(this.availableCharts[chart])
const vm = new Chart()
const el = document.createElement('div')
container.appendChild(el)
vm.$mount(el)
return vm
}
getAvailableCharts () {
return Object.keys(this.availableCharts)
}
}
......@@ -52,12 +52,6 @@
<div class="controls">
<select id="chart-select">
<option selected disabled>-- Select Chart --</option>
<option value="scatterplot">Scatterplot</option>
<option value="boxplot">Boxplot</option>
<option value="heatmap">Heatmap</option>
<option value="pca">PCA</option>
<option value="survivalplot">Survivalplot</option>
<option value="volcanoplot">Volcanoplot</option>
</select>
<input type="button" value="Add Chart" onclick="addChart()"/>
<label>
......@@ -89,6 +83,14 @@
}
})
const selection = document.querySelector('#chart-select')
fjs.getAvailableCharts().forEach(chartName => {
const el = document.createElement('option')
el.setAttribute('value', chartName)
el.innerHTML = chartName
selection.appendChild(el)
})
function deleteData () {
fjs.clearCache()
}
......
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