added new method to API to get available charts

src/main.js

@@ -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

@@ -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)
+  }
 }

test/demo/demo.html

@@ -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()
   }