feat: Add some public props

Added @prop() for: - options - type - width - height - series
apexcharts · Feb 28, 2019 · 2a13fe9 · 2a13fe9
1 parent 4ba3e28
commit 2a13fe9
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,10 +17,10 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "peerDependencies": {
-    "apexcharts": "^3.4.1"
+    "apexcharts": "github:apexcharts/apexcharts.js"
   },
   "devDependencies": {
-    "@stencil/core": "^0.16.4"
+    "@stencil/core": "^0.18.0"
   },
   "license": "MIT"
 }
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -8,21 +8,62 @@
 import '@stencil/core';
 
 
+import {
+  ApexChartHeight,
+  ApexChartType,
+  ApexChartWidth,
+  ApexOptionsSeries,
+} from './components/apex-chart/apex-charts';
+import {
+  ApexOptions,
+} from 'apexcharts';
 
 
 export namespace Components {
 
   interface ApexChart {
+    /**
+    * ApexChart height
+    */
+    'height': ApexChartHeight;
     /**
     * ApexCharts options
     */
-    'options': object;
+    'options': ApexOptions;
+    /**
+    * ApexCharts series
+    */
+    'series': ApexOptionsSeries;
+    /**
+    * ApexCharts type
+    */
+    'type': ApexChartType;
+    /**
+    * ApexChart width
+    */
+    'width': ApexChartWidth;
   }
   interface ApexChartAttributes extends StencilHTMLAttributes {
+    /**
+    * ApexChart height
+    */
+    'height'?: ApexChartHeight;
     /**
     * ApexCharts options
     */
-    'options'?: object;
+    'options'?: ApexOptions;
+    /**
+    * ApexCharts series
+    */
+    'series'?: ApexOptionsSeries;
+    /**
+    * ApexCharts type
+    */
+    'type'?: ApexChartType;
+    /**
+    * ApexChart width
+    */
+    'width'?: ApexChartWidth;
   }
 }
 

diff --git a/src/components/apex-chart/apex-chart.tsx b/src/components/apex-chart/apex-chart.tsx
@@ -1,6 +1,32 @@
 import { Component, Prop, State } from '@stencil/core';
 import ApexCharts from 'apexcharts';
+import { ApexOptions } from 'apexcharts';
+import {
+  ApexChartType,
+  ApexChartHeight,
+  ApexChartWidth,
+  ApexOptionsSeries
+} from './apex-charts';
 
+const config = (
+  options: ApexOptions,
+  type: ApexChartType,
+  width: ApexChartWidth,
+  height: ApexChartHeight,
+  series: ApexOptionsSeries
+): ApexOptions => {
+  const chart: ApexChart = options.chart ? { ...options.chart } : {};
+  if (type) {
+    chart.type = type;
+  }
+  if (width) {
+    chart.width = width;
+  }
+  if (height) {
+    chart.height = height;
+  }
+  return series ? { ...options, chart, series } : { ...options, chart };
+};
 @Component({
   tag: 'apex-chart',
   styleUrl: 'apex-chart.css',
@@ -12,26 +38,50 @@ export class chart {
   /**
    * Internal ApexCharts instance
    */
-  @State() chart: ApexCharts = null;
+  @State() chartObj: ApexCharts = null;
+
+  /**
+   * ApexCharts type
+   */
+  @Prop() type: ApexChartType;
+
+  /**
+   * ApexChart height
+   */
+  @Prop() height: ApexChartHeight;
+
+  /**
+   * ApexChart width
+   */
+  @Prop() width: ApexChartWidth;
 
   /**
    * ApexCharts options
    */
-  @Prop() options: object = {}
+  @Prop() options: ApexOptions;
+
+  /**
+   * ApexCharts series
+   */
+  @Prop() series: ApexOptionsSeries;
 
   componentDidLoad() {
-    if (this.chart === null) {
-      this.chart = new ApexCharts(this.chartRef, this.options);
-      return this.chart.render();  
+    if (this.chartObj === null) {
+      this.chartObj = new ApexCharts(
+        this.chartRef,
+        config(this.options, this.type, this.width, this.height, this.series)
+      );
+      return this.chartObj.render();
     }
   }
 
-  componentDidUnload()  {
-    if (this.chart !== null) {
-      this.chart.destroy();
+  componentDidUnload() {
+    if (this.chartObj !== null) {
+      this.chartObj.destroy();
     }
   }
+
   render() {
-    return <div ref={(el) => this.chartRef = el}></div>;
+    return <div ref={el => (this.chartRef = el)} />;
   }
 }
diff --git a/src/components/apex-chart/apex-charts.ts b/src/components/apex-chart/apex-charts.ts
@@ -0,0 +1,6 @@
+import { ApexOptions } from "apexcharts";
+
+export type ApexChartType = ApexChart['type'];
+export type ApexChartWidth = ApexChart['width'];
+export type ApexChartHeight = ApexChart['height'];
+export type ApexOptionsSeries = ApexOptions['series'];
diff --git a/src/index.html b/src/index.html
@@ -1,31 +1,26 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
-  <title>Stencil Component Starter</title>
-  <script src="/build/apex.js"></script>
-
-</head>
-<body>
-
-  <apex-chart></apex-chart>
-  <script>
-    const chart = document.querySelector('apex-chart');
-    chart.options = {
-    chart: {
-      type: 'line'
-    },
-    series: [{
-      name: 'sales',
-      data: [30,40,35,50,49,60,70,91,125]
-    }],
-    xaxis: {
-      categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
-    }
-  };
-  </script>
-
-  <!-- <custom-clock></custom-clock> -->
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Stencil Component Starter</title>
+    <script src="/build/apex.js"></script>
+  </head>
+  <body>
+    <apex-chart type="bar" width="50%"></apex-chart>
+    <script>
+      const chart = document.querySelector('apex-chart');
+      chart.options = {
+        series: [
+          {
+            name: 'sales',
+            data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
+          }
+        ],
+        xaxis: {
+          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
+        }
+      };
+    </script>
+  </body>
 </html>