misc

.gitignore

 /node_modules
-.idea
\ No newline at end of file
+.idea
+*.DS_Store

package.json

@@ -35,7 +35,10 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.3",
     "karma-phantomjs-launcher": "^1.0.4",
+    "karma-chrome-launcher": "^2.0.0",
     "jasmine-core": "^2.5.2",
-    "karma-jasmine": "^1.1.0"
+    "karma-jasmine": "^1.1.0",
+
+    "jsdoc": "^3.4.3"
   }
 }
\ No newline at end of file

src/components/charts/test-chart.vue

+<template>
+    <div>
+        {{ greeting }}
+    </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'test-chart',
+    data () {
+      return {
+        greeting: 'Hello World'
+      }
+    }
+  }
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/main.js

@@ -4,8 +4,7 @@ import ChartManager from './services/chart-manager'
 
 class FractalJS {
   constructor (handler, thisBaseURL, fractalisBaseURL, getAuth) {
-    const requestManager = new RequestManager(
-      {handler, thisBaseURL, fractalisBaseURL, getAuth})
+    const requestManager = new RequestManager({handler, thisBaseURL, fractalisBaseURL, getAuth})
     store.dispatch('setRequestManager', requestManager)
     this._chartManager = new ChartManager()
   }
@@ -15,8 +14,8 @@ class FractalJS {
     store.state.requestManager.createData(descriptors)
   }
 
-  setChart (name, elementId) {
-    this._chartManager.setChart({name, elementId})
+  setChart ({chart, selector}) {
+    this._chartManager.setChart({chart, selector})
   }
 
   // noinspection JSMethodCanBeStatic
@@ -25,8 +24,17 @@ class FractalJS {
   }
 }
 
-function init ({handler, thisBaseURL, fractalisBaseURL, getAuth}) {
+// 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.
+ *
+ * @param handler: The service in which this library is used. Example: 'ada', 'tranSMART', 'variantDB'
+ * @param thisBaseURL: The base URL of the service in which this library is used. Example: 'https://my.service.org/'
+ * @param fractalisBaseURL: The base URL of the fractalis back end that you want to use. 'http://fractalis.uni.lu/'
+ * @param getAuth: This MUST be a function that can be called at any time to retrieve credentials to authenticate with
+ * the API of the service specified in thisBaseURL.
+ * @returns {FractalJS}: An instance of FractalJS.
+ */
+export function init ({handler, thisBaseURL, fractalisBaseURL, getAuth}) {
   return new FractalJS(handler, thisBaseURL, fractalisBaseURL, getAuth)
 }
-
-export { init }

src/services/chart-manager.js

 import Vue from 'vue'
+import TestChart from '../components/charts/test-chart.vue'
 import CorrelationAnalysis from '../components/charts/correlation-analysis.vue'
 
 export default class {
   constructor () {
     this.AVAILABLE_CHARTS = {
-      'correlation-analysis': CorrelationAnalysis
+      [TestChart.name]: TestChart,
+      [CorrelationAnalysis.name]: CorrelationAnalysis
     }
   }
 
-  setChart ({name, elementId} = {}) {
-    if (Object.keys(this.AVAILABLE_CHARTS).indexOf(name) === -1) {
-      throw Error(`Chart '${name} is not available. 
-      Must be one of: ${this.AVAILABLE_CHARTS}`)
+  setChart ({chart, selector}) {
+    if (!this.AVAILABLE_CHARTS.hasOwnProperty(chart)) {
+      throw Error(`Chart '${chart} is not available. Must be one of: ${this.AVAILABLE_CHARTS}`)
     }
-    const Chart = Vue.extend(this.AVAILABLE_CHARTS[name])
+    const Chart = Vue.extend(this.AVAILABLE_CHARTS[chart])
     const vm = new Chart()
-    vm.$mount(elementId)
+    vm.$mount(selector)
+  }
+
+  removeChart ({elementId}) {
+    // TODO: Implement
   }
 }

src/services/request-manager.js

@@ -13,15 +13,11 @@ export default class {
   }
 
   createData (descriptors) {
-    this._axios.post('/data', {
+    return this._axios.post('/data', {
       descriptors,
       auth: this._getAuth(),
       handler: this._handler,
       server: this._thisBaseURL
-    }).then(response => {
-      console.log(response)
-    }).catch(error => {
-      console.log(error)
     })
   }
 
@@ -43,11 +39,7 @@ export default class {
   }
 
   getAllDataStatus () {
-    this._axios.get('/data').then(response => {
-      console.log(response)
-    }).else(error => {
-      console.log(error)
-    })
+    return this._axios.get('/data')
   }
 
   creareAnalysis (name, args) {

test/charts/test-chart.html

+<!doctype html>
+
+<head>
+  <script src="../../lib/fractal.js"></script>
+</head>
+
+<body>
+  <div id="placeholder"></div>
+</body>
+
+<script>
+  const fjs = fractal.init({handler: '', thisBaseURL: '', fractalisBaseURL: '', getAuth: () => {}})
+  fjs.setChart({chart: 'test-chart', selector: '#placeholder'})
+</script>
\ No newline at end of file

webpack.config.js

@@ -15,7 +15,7 @@ if (env === 'build') {
 
 module.exports = {
   entry: ['babel-polyfill', path.resolve(__dirname, 'src/main.js')],
-  devtool: '#eval-source-map',
+  devtool: '#inline-source-map',
   plugins: plugins,
   output: {
     path: path.resolve(__dirname, 'lib'),