Watches options change and refresh the component

Author: amoncaldas

.DS_Store

@@ -27,13 +27,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -->
 
+## [v0.3.1] - 2020-10-16
+
+- Added watcher for options and refresh the chart once it changes
+- Store a reference to the control added to the map and removes/re-add before refreshing the component
+based on options or data changes
+
 ## [v0.3.0] - 2020-10-08
 
 Refactored, improved in-code documentation and added internal responsiveness and and close event.
 
 ## [v0.2.0] - 2020-08-05
 
 ### Added
+
 - data watcher
     - changing the 'data' prop now rebuilds the graph without
     removing and adding the whole leaflet control by calling

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "vue2-leaflet-height-graph",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Leaflet.Heightgraph plugin extension for vue2-leaflet package",
   "main": "dist/Vue2LeafletHeightGraph.umd.min.js",
   "scripts": {

dist/Vue2LeafletHeightGraph.common.js

@@ -15,7 +15,7 @@ export default {
       breakpointsOrder: ['xs', 'sm', 'md', 'lg', 'xl'],
       defaultParser: 'geoJson',
       defaultPosition: 'bottomright',
-      ready: false
+      controlRef: null
     }
   },
   components: {
@@ -54,6 +54,10 @@ export default {
       options.parser = options.parser || this.defaultParser
       options.position = options.position || this.defaultPosition
       return options
+    },
+    mapObject () {
+      const map = this.$parent.mapObject
+      return map
     }
   },
   methods: {
@@ -62,14 +66,13 @@ export default {
      * the map and set the close button watcher
      */
     loadData () {
-      const map = this.$parent.mapObject
+      const map = this.mapObject
       let heightGraphOptions = this.buildHeightGraphOptions()
       this.hgInstance = this.leafletAcessor.control.heightgraph(heightGraphOptions)
-      this.hgInstance.addTo(map)
+      this.controlRef = this.hgInstance.addTo(map)
       this.addData(this.data)
       this.isOpen = true
       this.watchCloseClick()
-      this.ready = true
     },
     /**
      * Add data to the component
@@ -230,7 +233,7 @@ export default {
     if (this.hgInstance) {
       this.hgInstance.remove()
       this.isOpen = false
-      this.ready = false
+      this.controlRef = null
     }
   },
   watch: {
@@ -244,11 +247,10 @@ export default {
     },
     'options': {
       handler: function () {
-        this.ready = false
+        this.mapObject.removeControl(this.controlRef)
         let context = this
 
         setTimeout(() => {
-          context.ready = true
           context.loadData()
         }, 100)
       },