Skip to content

Commit

Permalink
feat: add toolbar/stacked/stacktype options
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikaelkaron
mikaelkaron committed Feb 21, 2021
1 parent 801f0aa commit 455d8a2
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 15 deletions.
32 changes: 31 additions & 1 deletion src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { ApexChartHeight, ApexChartType, ApexChartWidth, ApexOptionsSeries } from "./components/apex-chart";
import { ApexChartHeight, ApexChartStacked, ApexChartStackType, ApexChartToolbar, ApexChartType, ApexChartWidth, ApexOptionsSeries } from "./components/apex-chart";
import { ApexOptions } from "apexcharts";
export namespace Components {
interface ApexChart {
Expand All @@ -24,6 +24,21 @@ export namespace Components {
* @see https ://apexcharts.com/docs/options/series/
*/
"series"?: ApexOptionsSeries;
/**
* (optional) StackType
* @see https ://apexcharts.com/docs/options/chart/stackType/
*/
"stackType"?: ApexChartStackType;
/**
* (optional) Stacked
* @see https ://apexcharts.com/docs/options/chart/stacked/
*/
"stacked"?: ApexChartStacked;
/**
* (optional) Toolbar
* @see https ://apexcharts.com/docs/options/chart/toolbar/
*/
"toolbar"?: ApexChartToolbar;
/**
* (optional) Type
* @see https ://apexcharts.com/docs/options/chart/type/
Expand Down Expand Up @@ -71,6 +86,21 @@ declare namespace LocalJSX {
* @see https ://apexcharts.com/docs/options/series/
*/
"series"?: ApexOptionsSeries;
/**
* (optional) StackType
* @see https ://apexcharts.com/docs/options/chart/stackType/
*/
"stackType"?: ApexChartStackType;
/**
* (optional) Stacked
* @see https ://apexcharts.com/docs/options/chart/stacked/
*/
"stacked"?: ApexChartStacked;
/**
* (optional) Toolbar
* @see https ://apexcharts.com/docs/options/chart/toolbar/
*/
"toolbar"?: ApexChartToolbar;
/**
* (optional) Type
* @see https ://apexcharts.com/docs/options/chart/type/
Expand Down
55 changes: 53 additions & 2 deletions src/components/apex-chart/apex-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { Component, h, Method, Prop, State, Watch } from "@stencil/core";
import ApexCharts, { ApexOptions } from "apexcharts";
import {
ApexChartHeight,
ApexChartStacked,
ApexChartStackType,
ApexChartToolbar,
ApexChartType,
ApexChartWidth,
ApexOptionsSeries,
Expand All @@ -12,6 +15,9 @@ const config = (
type: ApexChartType,
width: ApexChartWidth,
height: ApexChartHeight,
toolbar: ApexChartToolbar,
stacked: ApexChartStacked,
stackType: ApexChartStackType,
series: ApexOptionsSeries
): ApexOptions => {
const chart: ApexChart = options.chart ? { ...options.chart } : {};
Expand All @@ -24,6 +30,15 @@ const config = (
if (height) {
chart.height = height;
}
if (toolbar) {
chart.toolbar = toolbar;
}
if (stacked) {
chart.stacked = stacked;
}
if (stackType) {
chart.stackType = stackType;
}
return series ? { ...options, chart, series } : { ...options, chart };
};

Expand Down Expand Up @@ -62,6 +77,24 @@ export class chart {
*/
@Prop() height?: ApexChartHeight;

/**
* (optional) Toolbar
* @see https://apexcharts.com/docs/options/chart/toolbar/
*/
@Prop() toolbar?: ApexChartToolbar;

/**
* (optional) Stacked
* @see https://apexcharts.com/docs/options/chart/stacked/
*/
@Prop() stacked?: ApexChartStacked;

/**
* (optional) StackType
* @see https://apexcharts.com/docs/options/chart/stackType/
*/
@Prop() stackType?: ApexChartStackType;

/**
* (optional) Options
* @see https://apexcharts.com/docs/options/
Expand All @@ -72,7 +105,16 @@ export class chart {
optionsChanged(options: ApexOptions) {
if (this.chartObj !== null) {
return this.chartObj.updateOptions(
config(options, this.type, this.width, this.height, this.series)
config(
options,
this.type,
this.width,
this.height,
this.toolbar,
this.stacked,
this.stackType,
this.series
)
);
}
}
Expand Down Expand Up @@ -109,7 +151,16 @@ export class chart {
if (this.chartObj === null) {
this.chartObj = new ApexCharts(
this.chartRef,
config(this.options, this.type, this.width, this.height, this.series)
config(
this.options,
this.type,
this.width,
this.height,
this.toolbar,
this.stacked,
this.stackType,
this.series
)
);
return this.chartObj.render();
}
Expand Down
11 changes: 7 additions & 4 deletions src/components/apex-chart/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { ApexOptions } from "apexcharts";

export type ApexChartType = ApexChart['type'];
export type ApexChartWidth = ApexChart['width'];
export type ApexChartHeight = ApexChart['height'];
export type ApexOptionsSeries = ApexOptions['series'];
export type ApexChartType = ApexChart["type"];
export type ApexChartWidth = ApexChart["width"];
export type ApexChartHeight = ApexChart["height"];
export type ApexOptionsSeries = ApexOptions["series"];
export type ApexChartToolbar = ApexChart["toolbar"];
export type ApexChartStacked = ApexChart["stacked"];
export type ApexChartStackType = ApexChart["stackType"];
17 changes: 10 additions & 7 deletions src/components/apex-chart/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------- | --------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| `height` | `height` | (optional) Height | `number \| string` | `undefined` |
| `options` | -- | (optional) Options | `ApexOptions` | `undefined` |
| `series` | -- | (optional) Series | `number[] \| { name?: string; type?: string; color?: string; data: number[] \| { x: any; y: any; fillColor?: string; strokeColor?: string; }[] \| [number, number][] \| [number, number[]][]; }[]` | `undefined` |
| `type` | `type` | (optional) Type | `"area" \| "bar" \| "boxPlot" \| "bubble" \| "candlestick" \| "donut" \| "heatmap" \| "histogram" \| "line" \| "pie" \| "polarArea" \| "radar" \| "radialBar" \| "rangeBar" \| "scatter" \| "treemap"` | `undefined` |
| `width` | `width` | (optional) Width | `number \| string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `height` | `height` | (optional) Height | `number \| string` | `undefined` |
| `options` | -- | (optional) Options | `ApexOptions` | `undefined` |
| `series` | -- | (optional) Series | `number[] \| { name?: string; type?: string; color?: string; data: number[] \| { x: any; y: any; fillColor?: string; strokeColor?: string; }[] \| [number, number][] \| [number, number[]][]; }[]` | `undefined` |
| `stackType` | `stack-type` | (optional) StackType | `"100%" \| "normal"` | `undefined` |
| `stacked` | `stacked` | (optional) Stacked | `boolean` | `undefined` |
| `toolbar` | -- | (optional) Toolbar | `{ show?: boolean; offsetX?: number; offsetY?: number; tools?: { download?: string \| boolean; selection?: string \| boolean; zoom?: string \| boolean; zoomin?: string \| boolean; zoomout?: string \| boolean; pan?: string \| boolean; reset?: string \| boolean; customIcons?: { icon?: string; title?: string; index?: number; class?: string; click?(chart?: any, options?: any, e?: any): any; }[]; }; export?: { csv?: { filename?: string; columnDelimiter?: string; headerCategory?: string; headerValue?: string; dateFormatter?(timestamp?: number): any; }; svg?: { filename?: string; }; png?: { filename?: string; }; }; autoSelected?: "zoom" \| "selection" \| "pan"; }` | `undefined` |
| `type` | `type` | (optional) Type | `"area" \| "bar" \| "boxPlot" \| "bubble" \| "candlestick" \| "donut" \| "heatmap" \| "histogram" \| "line" \| "pie" \| "polarArea" \| "radar" \| "radialBar" \| "rangeBar" \| "scatter" \| "treemap"` | `undefined` |
| `width` | `width` | (optional) Width | `number \| string` | `undefined` |


## Methods
Expand Down
7 changes: 6 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
<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" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil ApexCharts demo</title>
<script type="module" src="./build/apex.esm.js"></script>
<script nomodule src="./build/apex.js"></script>
Expand All @@ -12,6 +15,8 @@
<script>
const chart = document.querySelector("apex-chart");
chart.toolbar = { show: false };
chart.stacked = true;
chart.stackType = "10%";
chart.series = [
{
name: "sales",
Expand Down

0 comments on commit 455d8a2

Please sign in to comment.