fix: use globalThis.ApexChart for correct types

closes #6
apexcharts · Apr 20, 2021 · 2d6a791 · 2d6a791
1 parent ebbdb64
commit 2d6a791
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 50 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -5,15 +5,14 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { ApexChartHeight, ApexChartStacked, ApexChartStackType, ApexChartToolbar, ApexChartType, ApexChartWidth, ApexOptionsSeries } from "./components/apex-chart";
 import { ApexOptions } from "apexcharts";
 export namespace Components {
     interface ApexChart {
         /**
           * (optional) Height
           * @see https ://apexcharts.com/docs/options/chart/height/
          */
-        "height"?: ApexChartHeight;
+        "height"?: globalThis.ApexChart["height"];
         /**
           * (optional) Options
           * @see https ://apexcharts.com/docs/options/
@@ -23,27 +22,27 @@ export namespace Components {
           * (optional) Series
           * @see https ://apexcharts.com/docs/options/series/
          */
-        "series"?: ApexOptionsSeries;
+        "series"?: ApexOptions["series"];
         /**
           * (optional) StackType
           * @see https ://apexcharts.com/docs/options/chart/stackType/
          */
-        "stackType"?: ApexChartStackType;
+        "stackType"?: globalThis.ApexChart["stackType"];
         /**
           * (optional) Stacked
           * @see https ://apexcharts.com/docs/options/chart/stacked/
          */
-        "stacked"?: ApexChartStacked;
+        "stacked"?: globalThis.ApexChart["stacked"];
         /**
           * (optional) Toolbar
           * @see https ://apexcharts.com/docs/options/chart/toolbar/
          */
-        "toolbar"?: ApexChartToolbar;
+        "toolbar"?: globalThis.ApexChart["toolbar"];
         /**
           * (optional) Type
           * @see https ://apexcharts.com/docs/options/chart/type/
          */
-        "type"?: ApexChartType;
+        "type"?: globalThis.ApexChart["type"];
         /**
           * Updates the configuration object. The new config object is merged with the existing config object preserving the existing configuration.
           * @param newOptions The configuration object to merge on the existing one
@@ -55,7 +54,7 @@ export namespace Components {
           * (optional) Width
           * @see https ://apexcharts.com/docs/options/chart/width/
          */
-        "width"?: ApexChartWidth;
+        "width"?: globalThis.ApexChart["width"];
     }
 }
 declare global {
@@ -75,7 +74,7 @@ declare namespace LocalJSX {
           * (optional) Height
           * @see https ://apexcharts.com/docs/options/chart/height/
          */
-        "height"?: ApexChartHeight;
+        "height"?: globalThis.ApexChart["height"];
         /**
           * (optional) Options
           * @see https ://apexcharts.com/docs/options/
@@ -85,32 +84,32 @@ declare namespace LocalJSX {
           * (optional) Series
           * @see https ://apexcharts.com/docs/options/series/
          */
-        "series"?: ApexOptionsSeries;
+        "series"?: ApexOptions["series"];
         /**
           * (optional) StackType
           * @see https ://apexcharts.com/docs/options/chart/stackType/
          */
-        "stackType"?: ApexChartStackType;
+        "stackType"?: globalThis.ApexChart["stackType"];
         /**
           * (optional) Stacked
           * @see https ://apexcharts.com/docs/options/chart/stacked/
          */
-        "stacked"?: ApexChartStacked;
+        "stacked"?: globalThis.ApexChart["stacked"];
         /**
           * (optional) Toolbar
           * @see https ://apexcharts.com/docs/options/chart/toolbar/
          */
-        "toolbar"?: ApexChartToolbar;
+        "toolbar"?: globalThis.ApexChart["toolbar"];
         /**
           * (optional) Type
           * @see https ://apexcharts.com/docs/options/chart/type/
          */
-        "type"?: ApexChartType;
+        "type"?: globalThis.ApexChart["type"];
         /**
           * (optional) Width
           * @see https ://apexcharts.com/docs/options/chart/width/
          */
-        "width"?: ApexChartWidth;
+        "width"?: globalThis.ApexChart["width"];
     }
     interface IntrinsicElements {
         "apex-chart": ApexChart;

diff --git a/src/components/apex-chart/apex-chart.tsx b/src/components/apex-chart/apex-chart.tsx
@@ -1,26 +1,17 @@
 import { Component, h, Method, Prop, State, Watch } from "@stencil/core";
 import ApexCharts, { ApexOptions } from "apexcharts";
-import {
-  ApexChartHeight,
-  ApexChartStacked,
-  ApexChartStackType,
-  ApexChartToolbar,
-  ApexChartType,
-  ApexChartWidth,
-  ApexOptionsSeries,
-} from ".";
 
 const config = (
   options: ApexOptions,
-  type: ApexChartType,
-  width: ApexChartWidth,
-  height: ApexChartHeight,
-  toolbar: ApexChartToolbar,
-  stacked: ApexChartStacked,
-  stackType: ApexChartStackType,
-  series: ApexOptionsSeries
+  type: globalThis.ApexChart["type"],
+  width: globalThis.ApexChart["width"],
+  height: globalThis.ApexChart["height"],
+  toolbar: globalThis.ApexChart["toolbar"],
+  stacked: globalThis.ApexChart["stacked"],
+  stackType: globalThis.ApexChart["stackType"],
+  series: ApexOptions["series"]
 ): ApexOptions => {
-  const chart: ApexChart = options.chart ? { ...options.chart } : {};
+  const chart: globalThis.ApexChart = options.chart ? { ...options.chart } : {};
   if (type) {
     chart.type = type;
   }
@@ -51,7 +42,7 @@ if (window) {
   tag: "apex-chart",
   styleUrl: "apex-chart.css",
 })
-export class chart {
+export class ApexChart {
   chartRef: HTMLElement;
 
   /**
@@ -63,37 +54,37 @@ export class chart {
    * (optional) Type
    * @see https://apexcharts.com/docs/options/chart/type/
    */
-  @Prop() type?: ApexChartType;
+  @Prop() type?: globalThis.ApexChart["type"];
 
   /**
    * (optional) Width
    * @see https://apexcharts.com/docs/options/chart/width/
    */
-  @Prop() width?: ApexChartWidth;
+  @Prop() width?: globalThis.ApexChart["width"];
 
   /**
    * (optional) Height
    * @see https://apexcharts.com/docs/options/chart/height/
    */
-  @Prop() height?: ApexChartHeight;
+  @Prop() height?: globalThis.ApexChart["height"];
 
   /**
    * (optional) Toolbar
    * @see https://apexcharts.com/docs/options/chart/toolbar/
    */
-  @Prop() toolbar?: ApexChartToolbar;
+  @Prop() toolbar?: globalThis.ApexChart["toolbar"];
 
   /**
    * (optional) Stacked
    * @see https://apexcharts.com/docs/options/chart/stacked/
    */
-  @Prop() stacked?: ApexChartStacked;
+  @Prop() stacked?: globalThis.ApexChart["stacked"];
 
   /**
    * (optional) StackType
    * @see https://apexcharts.com/docs/options/chart/stackType/
    */
-  @Prop() stackType?: ApexChartStackType;
+  @Prop() stackType?: globalThis.ApexChart["stackType"];
 
   /**
    * (optional) Options
@@ -123,10 +114,10 @@ export class chart {
    * (optional) Series
    * @see https://apexcharts.com/docs/options/series/
    */
-  @Prop({ mutable: true }) series?: ApexOptionsSeries;
+  @Prop({ mutable: true }) series?: ApexOptions["series"];
 
   @Watch("series")
-  seriesChanged(series: ApexOptionsSeries) {
+  seriesChanged(series: ApexOptions["series"]) {
     if (this.chartObj !== null) {
       this.chartObj.updateSeries(series, true);
     }

diff --git a/src/components/apex-chart/index.ts b/src/components/apex-chart/index.ts