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
1f770f06
Commit
1f770f06
authored
Jul 18, 2018
by
Sascha Herzinger
Browse files
added new method to API to get available charts
parent
5ea46321
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/main.js
View file @
1f770f06
...
...
@@ -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.
*
...
...
src/services/chart-manager.js
View file @
1f770f06
...
...
@@ -2,34 +2,38 @@ import Vue from 'vue'
export
default
class
{
constructor
()
{
this
.
available
_c
harts
=
{}
this
.
available
C
harts
=
{}
const
req
=
require
.
context
(
'
../vue/charts/
'
,
true
,
/
\.
vue$/
)
req
.
keys
().
forEach
(
key
=>
{
const
vm
=
req
(
key
).
default
this
.
available
_c
harts
[
vm
.
name
]
=
vm
this
.
available
C
harts
[
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
_c
harts.
* @param chart: The name of the chart. Must be a name of a vue component within available
C
harts.
* @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
_c
harts
.
hasOwnProperty
(
chart
))
{
throw
new
Error
(
`Chart '
${
chart
}
is not available. Must be one of:
${
this
.
available
_c
harts
}
`
)
if
(
!
this
.
available
C
harts
.
hasOwnProperty
(
chart
))
{
throw
new
Error
(
`Chart '
${
chart
}
is not available. Must be one of:
${
this
.
available
C
harts
}
`
)
}
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
_c
harts
[
chart
])
const
Chart
=
Vue
.
extend
(
this
.
available
C
harts
[
chart
])
const
vm
=
new
Chart
()
const
el
=
document
.
createElement
(
'
div
'
)
container
.
appendChild
(
el
)
vm
.
$mount
(
el
)
return
vm
}
getAvailableCharts
()
{
return
Object
.
keys
(
this
.
availableCharts
)
}
}
test/demo/demo.html
View file @
1f770f06
...
...
@@ -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
()
}
...
...
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