Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Fractalis
fractal.js
Commits
29a7b2df
Commit
29a7b2df
authored
Jul 18, 2018
by
Sascha Herzinger
Browse files
dynamic import of charts
parent
9f8ac04e
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/services/chart-manager.js
View file @
29a7b2df
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
{
constructor
()
{
this
.
AVAILABLE_CHARTS
=
{
[
Scatterplot
.
name
]:
Scatterplot
,
[
Boxplot
.
name
]:
Boxplot
,
[
Heatmap
.
name
]:
Heatmap
,
[
PCA
.
name
]:
PCA
,
[
Volcanoplot
.
name
]:
Volcanoplot
,
[
SurvivalPlot
.
name
]:
SurvivalPlot
}
this
.
available_charts
=
{}
const
req
=
require
.
context
(
'
../vue/charts/
'
,
true
,
/
\.
vue$/
)
req
.
keys
().
forEach
(
key
=>
{
const
vm
=
req
(
key
).
default
this
.
available_charts
[
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
available_charts
.
* @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
.
available_charts
.
hasOwnProperty
(
chart
))
{
throw
new
Error
(
`Chart '
${
chart
}
is not available. Must be one of:
${
this
.
available_charts
}
`
)
}
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
.
available_charts
[
chart
])
const
vm
=
new
Chart
()
const
el
=
document
.
createElement
(
'
div
'
)
container
.
appendChild
(
el
)
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment