#21

src/main.js

@@ -42,6 +42,11 @@ class FractalJS {
     return store.getters.chartManager.setChart(chart, selector)
   }
 
+  // noinspection JSMethodCanBeStatic
+  removeAllCharts () {
+    return store.getters.chartManager.removeAllCharts()
+  }
+
   // noinspection JSMethodCanBeStatic
   getAvailableCharts () {
     return store.getters.chartManager.getAvailableCharts()

src/services/chart-manager.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 export default class {
   constructor () {
+    this.setCharts = []
     this.availableCharts = {}
     const req = require.context('../vue/charts/', true, /\.vue$/)
     req.keys().forEach(key => {
@@ -30,9 +31,18 @@ export default class {
     const el = document.createElement('div')
     container.appendChild(el)
     vm.$mount(el)
+    this.setCharts.push(vm)
     return vm
   }
 
+  removeAllCharts () {
+    this.setCharts.forEach(vm => {
+      vm.$el.remove()
+      vm.$destroy()
+    })
+    this.setCharts = []
+  }
+
   getAvailableCharts () {
     return Object.keys(this.availableCharts)
   }

src/store/store.js

@@ -38,7 +38,7 @@ const store = new Vuex.Store({
 
 const initialState = JSON.parse(JSON.stringify(store.state))
 
-export function resetState () {
+export function _resetState () {
   store.replaceState(JSON.parse(JSON.stringify(initialState)))
 }
 

test/control-panel-test.js

 import ControlPanel from '../src/vue/components/ControlPanel.vue'
 import Vue from 'vue'
-import store, { resetState } from '../src/store/store'
+import store, { _resetState } from '../src/store/store'
 
 describe('ControlPanel', () => {
   let vm
   beforeEach(() => {
-    resetState()
+    _resetState()
     const div1 = document.createElement('div')
     div1.id = 'div1'
     const div2 = document.createElement('div')

test/data-box-test.js

 import Vue from 'vue'
 import DataBox from '../src/vue/components/DataBox.vue'
-import store, { resetState } from '../src/store/store'
+import store, { _resetState } from '../src/store/store'
 
 describe('DataBox', () => {
   afterEach(() => {
-    resetState()
+    _resetState()
   })
 
   it('has correct name', () => {

test/demo/demo.html

@@ -59,7 +59,7 @@
     <input id="chart-size-range" type="range" min="10" max="100" value="50" oninput="setChartSize(this.value)"/>
   </label>
   <input type="button" onclick="loadData()" value="Prepare analysis cache"/>
-  <input type="button" onclick="deleteData()" value="Clear analysis cache"/>
+  <input type="button" onclick="deleteData()" value="Clear All"/>
   </div>
 </div>
 <div class="charts">
@@ -93,6 +93,7 @@
 
   function deleteData () {
     fjs.clearCache()
+    fjs.removeAllCharts()
   }
 
   let chartSize = '50vw'
@@ -121,7 +122,6 @@
   ])
 
   function loadData () {
-    deleteData()
     fjs.loadData([
       {
         dataType: 'categorical',

test/state-manager-test.js

@@ -3,14 +3,14 @@ import RequestManager from '../src/services/request-manager'
 import ChartManager from '../src/services/chart-manager'
 import Vue from 'vue'
 import stateSaver from '../src/vue/mixins/state-saver'
-import store, { resetState } from '../src/store/store'
+import store, { _resetState } from '../src/store/store'
 import Chart from '../src/vue/components/Chart.vue'
 
 describe('state manager', () => {
   let stateManager
   let vm
   beforeEach(() => {
-    resetState()
+    _resetState()
     stateManager = new StateManager()
     const chartManager = new ChartManager()
     const requestManager = new RequestManager(

test/task-view-test.js

 import TaskView from '../src/vue/components/TaskView.vue'
-import store, { resetState } from '../src/store/store'
+import store, { _resetState } from '../src/store/store'
 import Vue from 'vue'
 import RequestManager from '../src/services/request-manager'
 
 describe('TaskView', () => {
   let vm
   beforeEach(() => {
-    resetState()
+    _resetState()
     const requestManager = new RequestManager(
       {handler: '', dataSource: '', fractalisNode: '', getAuth: () => {}})
     store.dispatch('setRequestManager', requestManager)