feat: Watch options/series for changes

apexcharts · Feb 28, 2019 · 7637278 · 7637278
1 parent ba3cbaa
commit 7637278
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/apex-chart/apex-chart.tsx b/src/components/apex-chart/apex-chart.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, State } from '@stencil/core';
+import { Component, Prop, State, Watch } from '@stencil/core';
 import ApexCharts from 'apexcharts';
 import { ApexOptions } from 'apexcharts';
 import {
@@ -46,29 +46,45 @@ export class chart {
    */
   @Prop() type: ApexChartType;
 
-  /**
-   * ApexChart height
-   * @see https://apexcharts.com/docs/options/chart/height/
-   */
-  @Prop() height: ApexChartHeight;
-
   /**
    * ApexChart width
    * @see https://apexcharts.com/docs/options/chart/width/
    */
   @Prop() width: ApexChartWidth;
 
+  /**
+   * ApexChart height
+   * @see https://apexcharts.com/docs/options/chart/height/
+   */
+  @Prop() height: ApexChartHeight;
+
   /**
    * ApexCharts options
    * @see https://apexcharts.com/docs/options/
    */
-  @Prop() options: ApexOptions;
+  @Prop({ mutable: true }) options: ApexOptions;
+
+  @Watch('options')
+  optionsChanged(options) {
+    if (this.chartObj !== null) {
+      return this.chartObj.updateOptions(
+        config(options, this.type, this.width, options, this.series)
+      );
+    }
+  }
 
   /**
    * ApexCharts series
    * @see https://apexcharts.com/docs/options/series/
    */
-  @Prop() series: ApexOptionsSeries;
+  @Prop({ mutable: true }) series: ApexOptionsSeries;
+
+  @Watch('series')
+  seriesChanged(series) {
+    if (this.chartObj !== null) {
+      this.chartObj.updateSeries(series, true);
+    }
+  }
 
   componentDidLoad() {
     if (this.chartObj === null) {