@bitblit/ratchet-echarts 0.1.3-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.json +14 -0
- package/.github/ISSUE_TEMPLATE.md +11 -0
- package/.github/workflows/actions/build/action.yaml +8 -0
- package/.github/workflows/actions/build-env-setup/action.yaml +38 -0
- package/.github/workflows/actions/job-setup/action.yaml +17 -0
- package/.github/workflows/actions/test-report/action.yaml +13 -0
- package/.github/workflows/ci.yaml +24 -0
- package/.github/workflows/npm-alpha-deploy.yaml +40 -0
- package/.github/workflows/npm-deploy.yaml +37 -0
- package/CHANGELOG.md +5 -0
- package/License.txt +13 -0
- package/README.md +53 -0
- package/jest.config.js +4 -0
- package/package.json +74 -0
- package/src/echart-canvas-config.ts +4 -0
- package/src/echart-ratchet.ts +58 -0
- package/src/examples/area.spec.ts +112 -0
- package/src/examples/bar.spec.ts +76 -0
- package/src/examples/bubble.spec.ts +172 -0
- package/src/examples/pie.spec.ts +77 -0
- package/src/examples/simple-bar.spec.ts +36 -0
- package/src/index.ts +6 -0
- package/src/static/build-properties.json +7 -0
- package/test.png +0 -0
- package/tsconfig.json +27 -0
package/.eslintrc.json
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": ["plugin:@typescript-eslint/recommended", "prettier"],
|
|
3
|
+
"plugins": ["prettier"],
|
|
4
|
+
"parser": "@typescript-eslint/parser",
|
|
5
|
+
"parserOptions": {
|
|
6
|
+
"ecmaVersion": 6,
|
|
7
|
+
"sourceType": "module"
|
|
8
|
+
},
|
|
9
|
+
"rules": {
|
|
10
|
+
"prettier/prettier": ["error"],
|
|
11
|
+
"@typescript-eslint/no-inferrable-types": "off",
|
|
12
|
+
"@typescript-eslint/no-explicit-any": "off"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
name: 'Node Setup'
|
|
2
|
+
description: 'Initial setup for node'
|
|
3
|
+
|
|
4
|
+
inputs:
|
|
5
|
+
npmToken:
|
|
6
|
+
description: "Token for NPM"
|
|
7
|
+
requried: true
|
|
8
|
+
|
|
9
|
+
runs:
|
|
10
|
+
using: "composite"
|
|
11
|
+
steps:
|
|
12
|
+
- uses: ./.github/workflows/actions/job-setup
|
|
13
|
+
|
|
14
|
+
- name: Setup Node
|
|
15
|
+
uses: actions/setup-node@v2
|
|
16
|
+
with:
|
|
17
|
+
cache: "yarn"
|
|
18
|
+
node-version: "16.15.1"
|
|
19
|
+
registry-url: 'https://registry.npmjs.org'
|
|
20
|
+
|
|
21
|
+
- name: Set Node Memory flags
|
|
22
|
+
run: echo "NODE_OPTIONS=\"--max_old_space_size=8192\"" >> $GITHUB_ENV
|
|
23
|
+
shell: bash
|
|
24
|
+
|
|
25
|
+
- name: Setup NPMJS
|
|
26
|
+
run: |
|
|
27
|
+
npm config set "//registry.npmjs.org/:_authToken" ${{ inputs.npmToken }}
|
|
28
|
+
shell: bash
|
|
29
|
+
|
|
30
|
+
- name: Setup Java
|
|
31
|
+
uses: actions/setup-java@v2
|
|
32
|
+
with:
|
|
33
|
+
distribution: "temurin"
|
|
34
|
+
java-version: "11"
|
|
35
|
+
|
|
36
|
+
- name: Yarn install
|
|
37
|
+
run: yarn install --frozen-lockfile
|
|
38
|
+
shell: bash
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
name: "Job Setup"
|
|
2
|
+
description: "Initial setup for workflow jobs"
|
|
3
|
+
|
|
4
|
+
runs:
|
|
5
|
+
using: "composite"
|
|
6
|
+
|
|
7
|
+
steps:
|
|
8
|
+
- name: Parse repo name
|
|
9
|
+
uses: actions-ecosystem/action-regex-match@v2
|
|
10
|
+
id: repo-match
|
|
11
|
+
with:
|
|
12
|
+
text: ${{ github.repository }}
|
|
13
|
+
regex: "^(?:.*)/(.*)$"
|
|
14
|
+
|
|
15
|
+
- uses: zcong1993/setup-timezone@master
|
|
16
|
+
with:
|
|
17
|
+
timezone: America/Los_Angeles
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
name: CI
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches:
|
|
6
|
+
- "*"
|
|
7
|
+
tags-ignore:
|
|
8
|
+
- "alpha-*"
|
|
9
|
+
- "release-*"
|
|
10
|
+
|
|
11
|
+
jobs:
|
|
12
|
+
build:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
|
|
15
|
+
concurrency:
|
|
16
|
+
group: ${{ github.workflow }}-${{ github.ref }}
|
|
17
|
+
|
|
18
|
+
steps:
|
|
19
|
+
- name: Checkout code
|
|
20
|
+
uses: actions/checkout@v2
|
|
21
|
+
|
|
22
|
+
- uses: ./.github/workflows/actions/build-env-setup
|
|
23
|
+
|
|
24
|
+
- uses: ./.github/workflows/actions/build
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
name: Build and Deploy Alpha Library
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
tags:
|
|
6
|
+
- "alpha-*"
|
|
7
|
+
|
|
8
|
+
jobs:
|
|
9
|
+
build-and-deploy-alpha-library:
|
|
10
|
+
runs-on: ubuntu-latest
|
|
11
|
+
|
|
12
|
+
concurrency:
|
|
13
|
+
group: ${{ github.workflow }}-${{ github.ref }}
|
|
14
|
+
|
|
15
|
+
steps:
|
|
16
|
+
- name: Checkout code
|
|
17
|
+
uses: actions/checkout@v2
|
|
18
|
+
|
|
19
|
+
- name: Configure environment
|
|
20
|
+
uses: ./.github/workflows/actions/build-env-setup
|
|
21
|
+
with:
|
|
22
|
+
npmToken: ${{ secrets.NPM_TOKEN }}
|
|
23
|
+
|
|
24
|
+
- name: Build, Test, Package
|
|
25
|
+
run: yarn prepare-to-publish
|
|
26
|
+
shell: bash
|
|
27
|
+
|
|
28
|
+
- name: Apply CI vars
|
|
29
|
+
run: yarn apply-ci-vars
|
|
30
|
+
shell: bash
|
|
31
|
+
|
|
32
|
+
- name: Deploy to NPMJS
|
|
33
|
+
run: yarn publish --no-git-tag-version --non-interactive --new-version 0.1.$GITHUB_RUN_NUMBER-alpha
|
|
34
|
+
shell: bash
|
|
35
|
+
env:
|
|
36
|
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
- name: Save coverage reports
|
|
40
|
+
uses: ./.github/workflows/actions/test-report
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
name: Build and Deploy Production Library
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
tags:
|
|
6
|
+
- "release-*"
|
|
7
|
+
|
|
8
|
+
jobs:
|
|
9
|
+
build-and-deploy-alpha-library:
|
|
10
|
+
runs-on: ubuntu-latest
|
|
11
|
+
|
|
12
|
+
concurrency:
|
|
13
|
+
group: ${{ github.workflow }}-${{ github.ref }}
|
|
14
|
+
|
|
15
|
+
steps:
|
|
16
|
+
- name: Checkout code
|
|
17
|
+
uses: actions/checkout@v2
|
|
18
|
+
|
|
19
|
+
- name: Configure environment
|
|
20
|
+
uses: ./.github/workflows/actions/build-env-setup
|
|
21
|
+
|
|
22
|
+
- name: Build, Test, Package
|
|
23
|
+
run: yarn prepare-to-publish
|
|
24
|
+
shell: bash
|
|
25
|
+
|
|
26
|
+
- name: Apply CI vars
|
|
27
|
+
run: yarn apply-ci-vars
|
|
28
|
+
shell: bash
|
|
29
|
+
|
|
30
|
+
- name: Deploy to NPMJS
|
|
31
|
+
run: yarn publish --no-git-tag-version --non-interactive --new-version 0.1.$GITHUB_RUN_NUMBER
|
|
32
|
+
shell: bash
|
|
33
|
+
env:
|
|
34
|
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
35
|
+
|
|
36
|
+
- name: Save coverage reports
|
|
37
|
+
uses: ./.github/workflows/actions/test-report
|
package/CHANGELOG.md
ADDED
package/License.txt
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
Copyright 2018-2019 Christopher Weiss
|
|
2
|
+
|
|
3
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License.
|
|
5
|
+
You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
See the License for the specific language governing permissions and
|
|
13
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# node-echarts
|
|
2
|
+
Generate chart by [Apache ECharts](https://github.com/apache/incubator-echarts) in Nodejs.
|
|
3
|
+
|
|
4
|
+
This library is forked from [node-echarts](https://github.com/hellosean1025/node-echarts) to which it is highly
|
|
5
|
+
indebted. I have forked it because that library appears to now be dormant, and I'd like to be able to use newer
|
|
6
|
+
versions of echarts, and the new prebuilt versions of canvas in my Lambda functions. I also prefer typescript
|
|
7
|
+
and will be bringing in type information.
|
|
8
|
+
|
|
9
|
+
### Install
|
|
10
|
+
|
|
11
|
+
Note: Since this library depends on Echarts >= 5.x and node-canvas (canvas) >= 2.9.3, it auto-bundles in the
|
|
12
|
+
correct native libraries (prebuilt) for Windows, OSX, and Linux - see [the canvas github page](https://github.com/Automattic/node-canvas)
|
|
13
|
+
for details. Therefore, all you have to do is:
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
npm install @bitblit/ratchet-echarts
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Usage
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
|
|
23
|
+
import { EChartRatchet } from '../echart-ratchet';
|
|
24
|
+
import { EChartsOption } from 'echarts';
|
|
25
|
+
import fs from 'fs';
|
|
26
|
+
|
|
27
|
+
const options: EChartsOption = {
|
|
28
|
+
// Some big echarts thing... see Echarts docs for how to build this
|
|
29
|
+
//title: {
|
|
30
|
+
// text: 'test',
|
|
31
|
+
//},
|
|
32
|
+
//...
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const canvasConfig: EChartCanvasConfig = {
|
|
36
|
+
width: 1000
|
|
37
|
+
height: 500
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const myChart: Buffer = await EChartRatchet.renderChart(options, canvasConfig);
|
|
41
|
+
fs.writeFileSync('somefile.png', myChart);
|
|
42
|
+
|
|
43
|
+
// Also could have just written
|
|
44
|
+
// await EChartRatchet.renderChartToPngFile('somefile.png', options, canvasConfig);
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### EChartCanvasConfig
|
|
49
|
+
|
|
50
|
+
|name|type|default|description|
|
|
51
|
+
|---|---|---|---|
|
|
52
|
+
|width|Number|500|Image width|
|
|
53
|
+
|height|Number|500|Image height|
|
package/jest.config.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@bitblit/ratchet-echarts",
|
|
3
|
+
"version": "0.1.3-alpha",
|
|
4
|
+
"description": "Library for using echarts on Node",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"typings": "./dist/index.d.ts",
|
|
7
|
+
"contributors": [
|
|
8
|
+
"Christopher Weiss <bitblit@gmail.com>"
|
|
9
|
+
],
|
|
10
|
+
"husky": {
|
|
11
|
+
"hooks": {
|
|
12
|
+
"pre-commit": "pretty-quick --staged"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"prettier": {
|
|
16
|
+
"printWidth": 140,
|
|
17
|
+
"singleQuote": true,
|
|
18
|
+
"arrowParens": "always"
|
|
19
|
+
},
|
|
20
|
+
"config": {},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"prepare-to-publish": "yarn build && yarn remove-compiled-tests && yarn run apply-ci-vars",
|
|
23
|
+
"copy-static-files": "shx cp -R src/static dist",
|
|
24
|
+
"build": "yarn run clean && yarn run generate-barrels && yarn run compile && yarn copy-static-files",
|
|
25
|
+
"compile": "tsc",
|
|
26
|
+
"watch": "tsc-watch",
|
|
27
|
+
"remove-compiled-tests": "rimraf ./dist/examples && rimraf ./dist/**/*.spec.d.ts && rimraf ./dist/**/*.spec.js && rimraf ./dist/**/*.spec.js.map",
|
|
28
|
+
"clean": "shx rm -Rf dist",
|
|
29
|
+
"compile-test": "yarn compile && yarn test",
|
|
30
|
+
"apply-ci-vars": "node node_modules/@bitblit/ratchet/dist/node-only/ci/apply-ci-env-variables-to-files github dist/static/build-properties.json",
|
|
31
|
+
"test": "jest",
|
|
32
|
+
"lint": "eslint src/**/*.ts",
|
|
33
|
+
"lint-fix": "eslint --fix src/**/*.ts",
|
|
34
|
+
"generate-barrels": "barrelsby -q --delete -d src -l top -e .*\\.spec\\.ts"
|
|
35
|
+
},
|
|
36
|
+
"repository": {
|
|
37
|
+
"type": "git",
|
|
38
|
+
"url": "https://github.com/bitblit/ratchet-echarts"
|
|
39
|
+
},
|
|
40
|
+
"engines": {
|
|
41
|
+
"node": ">=16.15"
|
|
42
|
+
},
|
|
43
|
+
"license": "Apache-2.0",
|
|
44
|
+
"bugs": {
|
|
45
|
+
"url": "https://github.com/bitblit/ratchet-echarts-echarts/issues"
|
|
46
|
+
},
|
|
47
|
+
"homepage": "https://github.com/bitblit/ratchet-echarts-echarts#readme",
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"canvas": "2.9.3",
|
|
50
|
+
"echarts": "5.3.3"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@bitblit/ratchet": "0.21.25",
|
|
54
|
+
"@types/jest": "28.1.4",
|
|
55
|
+
"@types/node": "14.18.1",
|
|
56
|
+
"@typescript-eslint/eslint-plugin": "5.30.5",
|
|
57
|
+
"@typescript-eslint/parser": "5.30.5",
|
|
58
|
+
"barrelsby": "2.3.4",
|
|
59
|
+
"cross-fetch": "3.1.5",
|
|
60
|
+
"eslint": "8.19.0",
|
|
61
|
+
"eslint-config-prettier": "8.5.0",
|
|
62
|
+
"eslint-plugin-import": "2.26.0",
|
|
63
|
+
"eslint-plugin-prettier": "4.2.1",
|
|
64
|
+
"husky": "8.0.1",
|
|
65
|
+
"jest": "28.1.2",
|
|
66
|
+
"jsonwebtoken": "8.5.1",
|
|
67
|
+
"prettier": "2.7.1",
|
|
68
|
+
"pretty-quick": "3.1.3",
|
|
69
|
+
"rimraf": "3.0.2",
|
|
70
|
+
"shx": "0.3.4",
|
|
71
|
+
"ts-jest": "28.0.5",
|
|
72
|
+
"typescript": "4.6.4"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as echarts from 'echarts';
|
|
2
|
+
import { ECharts, EChartsOption } from 'echarts';
|
|
3
|
+
import { Canvas } from 'canvas';
|
|
4
|
+
import { EChartCanvasConfig } from './echart-canvas-config';
|
|
5
|
+
import fs from 'fs';
|
|
6
|
+
|
|
7
|
+
export class EChartRatchet {
|
|
8
|
+
public static async renderChartUsingProvidedCanvas(opt: EChartsOption, canvas: Canvas): Promise<Buffer> {
|
|
9
|
+
if (!opt) {
|
|
10
|
+
throw new Error('You must supply an opts parameter');
|
|
11
|
+
}
|
|
12
|
+
if (!canvas) {
|
|
13
|
+
throw new Error('You must supply an canvas parameter');
|
|
14
|
+
}
|
|
15
|
+
let rval: Buffer = null;
|
|
16
|
+
|
|
17
|
+
opt.animation = false; // Always do not animate given its is a static image
|
|
18
|
+
const canvasHtml: HTMLCanvasElement = canvas as unknown as HTMLCanvasElement;
|
|
19
|
+
// This is deprecated, and unneeded so far as I can tell
|
|
20
|
+
//echarts.setCanvasCreator(()=>{return canvasHtml;});
|
|
21
|
+
const chart: ECharts = echarts.init(canvasHtml);
|
|
22
|
+
chart.setOption(opt);
|
|
23
|
+
rval = canvas.toBuffer();
|
|
24
|
+
return rval;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
public static async renderChart(opts: EChartsOption, config: EChartCanvasConfig): Promise<Buffer> {
|
|
28
|
+
if (!opts) {
|
|
29
|
+
throw new Error('You must supply an opts parameter');
|
|
30
|
+
}
|
|
31
|
+
if (!config) {
|
|
32
|
+
throw new Error('You must supply an config parameter');
|
|
33
|
+
}
|
|
34
|
+
const canvas: Canvas = new Canvas(config.width, config.height);
|
|
35
|
+
const rval: Buffer = await this.renderChartUsingProvidedCanvas(opts, canvas);
|
|
36
|
+
|
|
37
|
+
return rval;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
public static async renderChartToPngFile(filename: string, opts: EChartsOption, config: EChartCanvasConfig): Promise<Buffer> {
|
|
41
|
+
if (!opts) {
|
|
42
|
+
throw new Error('You must supply an opts parameter');
|
|
43
|
+
}
|
|
44
|
+
if (!config) {
|
|
45
|
+
throw new Error('You must supply an config parameter');
|
|
46
|
+
}
|
|
47
|
+
if (!filename || filename.trim().length === 0) {
|
|
48
|
+
throw new Error('You must supply a non-empty filename parameter');
|
|
49
|
+
}
|
|
50
|
+
if (!filename.toLowerCase().endsWith('.png')) {
|
|
51
|
+
throw new Error('Your filename should end with .png - this generates a png file');
|
|
52
|
+
}
|
|
53
|
+
const rval: Buffer = await this.renderChart(opts, config);
|
|
54
|
+
fs.writeFileSync(filename, rval);
|
|
55
|
+
|
|
56
|
+
return rval;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { EChartsOption } from 'echarts';
|
|
2
|
+
import { EChartRatchet } from '../echart-ratchet';
|
|
3
|
+
|
|
4
|
+
const options: EChartsOption = {
|
|
5
|
+
title: {
|
|
6
|
+
text: 'Stacked Area Chart',
|
|
7
|
+
},
|
|
8
|
+
tooltip: {
|
|
9
|
+
trigger: 'axis',
|
|
10
|
+
axisPointer: {
|
|
11
|
+
type: 'cross',
|
|
12
|
+
label: {
|
|
13
|
+
backgroundColor: '#6a7985',
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
legend: {
|
|
18
|
+
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
|
|
19
|
+
},
|
|
20
|
+
toolbox: {
|
|
21
|
+
feature: {
|
|
22
|
+
saveAsImage: {},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
grid: {
|
|
26
|
+
left: '3%',
|
|
27
|
+
right: '4%',
|
|
28
|
+
bottom: '3%',
|
|
29
|
+
containLabel: true,
|
|
30
|
+
},
|
|
31
|
+
xAxis: [
|
|
32
|
+
{
|
|
33
|
+
type: 'category',
|
|
34
|
+
boundaryGap: false,
|
|
35
|
+
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
yAxis: [
|
|
39
|
+
{
|
|
40
|
+
type: 'value',
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
series: [
|
|
44
|
+
{
|
|
45
|
+
name: 'Email',
|
|
46
|
+
type: 'line',
|
|
47
|
+
stack: 'Total',
|
|
48
|
+
areaStyle: {},
|
|
49
|
+
emphasis: {
|
|
50
|
+
focus: 'series',
|
|
51
|
+
},
|
|
52
|
+
data: [120, 132, 101, 134, 90, 230, 210],
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: 'Union Ads',
|
|
56
|
+
type: 'line',
|
|
57
|
+
stack: 'Total',
|
|
58
|
+
areaStyle: {},
|
|
59
|
+
emphasis: {
|
|
60
|
+
focus: 'series',
|
|
61
|
+
},
|
|
62
|
+
data: [220, 182, 191, 234, 290, 330, 310],
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
name: 'Video Ads',
|
|
66
|
+
type: 'line',
|
|
67
|
+
stack: 'Total',
|
|
68
|
+
areaStyle: {},
|
|
69
|
+
emphasis: {
|
|
70
|
+
focus: 'series',
|
|
71
|
+
},
|
|
72
|
+
data: [150, 232, 201, 154, 190, 330, 410],
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
name: 'Direct',
|
|
76
|
+
type: 'line',
|
|
77
|
+
stack: 'Total',
|
|
78
|
+
areaStyle: {},
|
|
79
|
+
emphasis: {
|
|
80
|
+
focus: 'series',
|
|
81
|
+
},
|
|
82
|
+
data: [320, 332, 301, 334, 390, 330, 320],
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
name: 'Search Engine',
|
|
86
|
+
type: 'line',
|
|
87
|
+
stack: 'Total',
|
|
88
|
+
label: {
|
|
89
|
+
show: true,
|
|
90
|
+
position: 'top',
|
|
91
|
+
},
|
|
92
|
+
areaStyle: {},
|
|
93
|
+
emphasis: {
|
|
94
|
+
focus: 'series',
|
|
95
|
+
},
|
|
96
|
+
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
97
|
+
},
|
|
98
|
+
],
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
describe('#areaChart', function () {
|
|
102
|
+
it('should generate the chart', async () => {
|
|
103
|
+
const data: Buffer = await EChartRatchet.renderChart(options, {
|
|
104
|
+
width: 1000,
|
|
105
|
+
height: 500,
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
// As of 2022-08-06 this is 54255... there must be a better test than this...
|
|
109
|
+
expect(data.length).toBeGreaterThan(50_000);
|
|
110
|
+
expect(data.length).toBeLessThan(60_000);
|
|
111
|
+
});
|
|
112
|
+
});
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { EChartsOption } from 'echarts';
|
|
2
|
+
import { EChartRatchet } from '../echart-ratchet';
|
|
3
|
+
import { LabelOption } from 'echarts/types/src/util/types';
|
|
4
|
+
|
|
5
|
+
const labelRight: LabelOption = {
|
|
6
|
+
position: 'right',
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
const options: EChartsOption = {
|
|
10
|
+
title: {
|
|
11
|
+
text: 'Bar Chart with Negative Value',
|
|
12
|
+
},
|
|
13
|
+
tooltip: {
|
|
14
|
+
trigger: 'axis',
|
|
15
|
+
axisPointer: {
|
|
16
|
+
type: 'shadow',
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
grid: {
|
|
20
|
+
top: 80,
|
|
21
|
+
bottom: 30,
|
|
22
|
+
},
|
|
23
|
+
xAxis: {
|
|
24
|
+
type: 'value',
|
|
25
|
+
position: 'top',
|
|
26
|
+
splitLine: {
|
|
27
|
+
lineStyle: {
|
|
28
|
+
type: 'dashed',
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
yAxis: {
|
|
33
|
+
type: 'category',
|
|
34
|
+
axisLine: { show: false },
|
|
35
|
+
axisLabel: { show: false },
|
|
36
|
+
axisTick: { show: false },
|
|
37
|
+
splitLine: { show: false },
|
|
38
|
+
data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one'],
|
|
39
|
+
},
|
|
40
|
+
series: [
|
|
41
|
+
{
|
|
42
|
+
name: 'Cost',
|
|
43
|
+
type: 'bar',
|
|
44
|
+
stack: 'Total',
|
|
45
|
+
label: {
|
|
46
|
+
show: true,
|
|
47
|
+
formatter: '{b}',
|
|
48
|
+
},
|
|
49
|
+
data: [
|
|
50
|
+
{ value: -0.07, label: labelRight },
|
|
51
|
+
{ value: -0.09, label: labelRight },
|
|
52
|
+
0.2,
|
|
53
|
+
0.44,
|
|
54
|
+
{ value: -0.23, label: labelRight },
|
|
55
|
+
0.08,
|
|
56
|
+
{ value: -0.17, label: labelRight },
|
|
57
|
+
0.47,
|
|
58
|
+
{ value: -0.36, label: labelRight },
|
|
59
|
+
0.18,
|
|
60
|
+
],
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
describe('#simpleBarChart', function () {
|
|
66
|
+
it('should generate the chart', async () => {
|
|
67
|
+
const data: Buffer = await EChartRatchet.renderChartToPngFile('test.png', options, {
|
|
68
|
+
width: 1000,
|
|
69
|
+
height: 500,
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
// As of 2022-08-06 this is 15569... there must be a better test than this..
|
|
73
|
+
expect(data.length).toBeGreaterThan(15_000);
|
|
74
|
+
expect(data.length).toBeLessThan(20_000);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { EChartsOption } from 'echarts';
|
|
2
|
+
import { EChartRatchet } from '../echart-ratchet';
|
|
3
|
+
|
|
4
|
+
import * as echarts from 'echarts';
|
|
5
|
+
|
|
6
|
+
const data = [
|
|
7
|
+
[
|
|
8
|
+
[28604, 77, 17096869, 'Australia', 1990],
|
|
9
|
+
[31163, 77.4, 27662440, 'Canada', 1990],
|
|
10
|
+
[1516, 68, 1154605773, 'China', 1990],
|
|
11
|
+
[13670, 74.7, 10582082, 'Cuba', 1990],
|
|
12
|
+
[28599, 75, 4986705, 'Finland', 1990],
|
|
13
|
+
[29476, 77.1, 56943299, 'France', 1990],
|
|
14
|
+
[31476, 75.4, 78958237, 'Germany', 1990],
|
|
15
|
+
[28666, 78.1, 254830, 'Iceland', 1990],
|
|
16
|
+
[1777, 57.7, 870601776, 'India', 1990],
|
|
17
|
+
[29550, 79.1, 122249285, 'Japan', 1990],
|
|
18
|
+
[2076, 67.9, 20194354, 'North Korea', 1990],
|
|
19
|
+
[12087, 72, 42972254, 'South Korea', 1990],
|
|
20
|
+
[24021, 75.4, 3397534, 'New Zealand', 1990],
|
|
21
|
+
[43296, 76.8, 4240375, 'Norway', 1990],
|
|
22
|
+
[10088, 70.8, 38195258, 'Poland', 1990],
|
|
23
|
+
[19349, 69.6, 147568552, 'Russia', 1990],
|
|
24
|
+
[10670, 67.3, 53994605, 'Turkey', 1990],
|
|
25
|
+
[26424, 75.7, 57110117, 'United Kingdom', 1990],
|
|
26
|
+
[37062, 75.4, 252847810, 'United States', 1990],
|
|
27
|
+
],
|
|
28
|
+
[
|
|
29
|
+
[44056, 81.8, 23968973, 'Australia', 2015],
|
|
30
|
+
[43294, 81.7, 35939927, 'Canada', 2015],
|
|
31
|
+
[13334, 76.9, 1376048943, 'China', 2015],
|
|
32
|
+
[21291, 78.5, 11389562, 'Cuba', 2015],
|
|
33
|
+
[38923, 80.8, 5503457, 'Finland', 2015],
|
|
34
|
+
[37599, 81.9, 64395345, 'France', 2015],
|
|
35
|
+
[44053, 81.1, 80688545, 'Germany', 2015],
|
|
36
|
+
[42182, 82.8, 329425, 'Iceland', 2015],
|
|
37
|
+
[5903, 66.8, 1311050527, 'India', 2015],
|
|
38
|
+
[36162, 83.5, 126573481, 'Japan', 2015],
|
|
39
|
+
[1390, 71.4, 25155317, 'North Korea', 2015],
|
|
40
|
+
[34644, 80.7, 50293439, 'South Korea', 2015],
|
|
41
|
+
[34186, 80.6, 4528526, 'New Zealand', 2015],
|
|
42
|
+
[64304, 81.6, 5210967, 'Norway', 2015],
|
|
43
|
+
[24787, 77.3, 38611794, 'Poland', 2015],
|
|
44
|
+
[23038, 73.13, 143456918, 'Russia', 2015],
|
|
45
|
+
[19360, 76.5, 78665830, 'Turkey', 2015],
|
|
46
|
+
[38225, 81.4, 64715810, 'United Kingdom', 2015],
|
|
47
|
+
[53354, 79.1, 321773631, 'United States', 2015],
|
|
48
|
+
],
|
|
49
|
+
];
|
|
50
|
+
|
|
51
|
+
const options: EChartsOption = {
|
|
52
|
+
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
|
|
53
|
+
{
|
|
54
|
+
offset: 0,
|
|
55
|
+
color: '#f7f8fa',
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
offset: 1,
|
|
59
|
+
color: '#cdd0d5',
|
|
60
|
+
},
|
|
61
|
+
]),
|
|
62
|
+
title: {
|
|
63
|
+
text: 'Life Expectancy and GDP by Country',
|
|
64
|
+
left: '5%',
|
|
65
|
+
top: '3%',
|
|
66
|
+
},
|
|
67
|
+
legend: {
|
|
68
|
+
right: '10%',
|
|
69
|
+
top: '3%',
|
|
70
|
+
data: ['1990', '2015'],
|
|
71
|
+
},
|
|
72
|
+
grid: {
|
|
73
|
+
left: '8%',
|
|
74
|
+
top: '10%',
|
|
75
|
+
},
|
|
76
|
+
xAxis: {
|
|
77
|
+
splitLine: {
|
|
78
|
+
lineStyle: {
|
|
79
|
+
type: 'dashed',
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
yAxis: {
|
|
84
|
+
splitLine: {
|
|
85
|
+
lineStyle: {
|
|
86
|
+
type: 'dashed',
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
scale: true,
|
|
90
|
+
},
|
|
91
|
+
series: [
|
|
92
|
+
{
|
|
93
|
+
name: '1990',
|
|
94
|
+
data: data[0],
|
|
95
|
+
type: 'scatter',
|
|
96
|
+
symbolSize: function (data) {
|
|
97
|
+
return Math.sqrt(data[2]) / 5e2;
|
|
98
|
+
},
|
|
99
|
+
emphasis: {
|
|
100
|
+
focus: 'series',
|
|
101
|
+
label: {
|
|
102
|
+
show: true,
|
|
103
|
+
formatter: function (param) {
|
|
104
|
+
return param.data[3];
|
|
105
|
+
},
|
|
106
|
+
position: 'top',
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
itemStyle: {
|
|
110
|
+
shadowBlur: 10,
|
|
111
|
+
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
|
112
|
+
shadowOffsetY: 5,
|
|
113
|
+
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
|
114
|
+
{
|
|
115
|
+
offset: 0,
|
|
116
|
+
color: 'rgb(251, 118, 123)',
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
offset: 1,
|
|
120
|
+
color: 'rgb(204, 46, 72)',
|
|
121
|
+
},
|
|
122
|
+
]),
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
name: '2015',
|
|
127
|
+
data: data[1],
|
|
128
|
+
type: 'scatter',
|
|
129
|
+
symbolSize: function (data) {
|
|
130
|
+
return Math.sqrt(data[2]) / 5e2;
|
|
131
|
+
},
|
|
132
|
+
emphasis: {
|
|
133
|
+
focus: 'series',
|
|
134
|
+
label: {
|
|
135
|
+
show: true,
|
|
136
|
+
formatter: function (param) {
|
|
137
|
+
return param.data[3];
|
|
138
|
+
},
|
|
139
|
+
position: 'top',
|
|
140
|
+
},
|
|
141
|
+
},
|
|
142
|
+
itemStyle: {
|
|
143
|
+
shadowBlur: 10,
|
|
144
|
+
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
|
145
|
+
shadowOffsetY: 5,
|
|
146
|
+
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
|
147
|
+
{
|
|
148
|
+
offset: 0,
|
|
149
|
+
color: 'rgb(129, 227, 238)',
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
offset: 1,
|
|
153
|
+
color: 'rgb(25, 183, 207)',
|
|
154
|
+
},
|
|
155
|
+
]),
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
],
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
describe('#bubbleChart', function () {
|
|
162
|
+
it('should generate the chart', async () => {
|
|
163
|
+
const data: Buffer = await EChartRatchet.renderChart(options, {
|
|
164
|
+
width: 1000,
|
|
165
|
+
height: 500,
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
// As of 2022-08-06 this is 140641... there must be a better test than this..
|
|
169
|
+
expect(data.length).toBeGreaterThan(140_000);
|
|
170
|
+
expect(data.length).toBeLessThan(150_000);
|
|
171
|
+
});
|
|
172
|
+
});
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { EChartsOption } from 'echarts';
|
|
2
|
+
import { EChartRatchet } from '../echart-ratchet';
|
|
3
|
+
|
|
4
|
+
const options: EChartsOption = {
|
|
5
|
+
backgroundColor: '#2c343c',
|
|
6
|
+
title: {
|
|
7
|
+
text: 'Customized Pie',
|
|
8
|
+
left: 'center',
|
|
9
|
+
top: 20,
|
|
10
|
+
textStyle: {
|
|
11
|
+
color: '#ccc',
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
tooltip: {
|
|
15
|
+
trigger: 'item',
|
|
16
|
+
},
|
|
17
|
+
visualMap: {
|
|
18
|
+
show: false,
|
|
19
|
+
min: 80,
|
|
20
|
+
max: 600,
|
|
21
|
+
inRange: {
|
|
22
|
+
colorLightness: [0, 1],
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
series: [
|
|
26
|
+
{
|
|
27
|
+
name: 'Access From',
|
|
28
|
+
type: 'pie',
|
|
29
|
+
radius: '55%',
|
|
30
|
+
center: ['50%', '50%'],
|
|
31
|
+
data: [
|
|
32
|
+
{ value: 335, name: 'Direct' },
|
|
33
|
+
{ value: 310, name: 'Email' },
|
|
34
|
+
{ value: 274, name: 'Union Ads' },
|
|
35
|
+
{ value: 235, name: 'Video Ads' },
|
|
36
|
+
{ value: 400, name: 'Search Engine' },
|
|
37
|
+
].sort(function (a, b) {
|
|
38
|
+
return a.value - b.value;
|
|
39
|
+
}),
|
|
40
|
+
roseType: 'radius',
|
|
41
|
+
label: {
|
|
42
|
+
color: 'rgba(255, 255, 255, 0.3)',
|
|
43
|
+
},
|
|
44
|
+
labelLine: {
|
|
45
|
+
lineStyle: {
|
|
46
|
+
color: 'rgba(255, 255, 255, 0.3)',
|
|
47
|
+
},
|
|
48
|
+
smooth: 0.2,
|
|
49
|
+
length: 10,
|
|
50
|
+
length2: 20,
|
|
51
|
+
},
|
|
52
|
+
itemStyle: {
|
|
53
|
+
color: '#c23531',
|
|
54
|
+
shadowBlur: 200,
|
|
55
|
+
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
56
|
+
},
|
|
57
|
+
animationType: 'scale',
|
|
58
|
+
animationEasing: 'elasticOut',
|
|
59
|
+
animationDelay: function (idx) {
|
|
60
|
+
return Math.random() * 200;
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
describe('#pieChart', function () {
|
|
67
|
+
it('should generate the chart', async () => {
|
|
68
|
+
const data: Buffer = await EChartRatchet.renderChartToPngFile('test.png', options, {
|
|
69
|
+
width: 1000,
|
|
70
|
+
height: 500,
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
// As of 2022-08-06 this is 32175... there must be a better test than this..
|
|
74
|
+
expect(data.length).toBeGreaterThan(30_000);
|
|
75
|
+
expect(data.length).toBeLessThan(40_000);
|
|
76
|
+
});
|
|
77
|
+
});
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { EChartRatchet } from '../echart-ratchet';
|
|
2
|
+
import { EChartsOption } from 'echarts';
|
|
3
|
+
|
|
4
|
+
const options: EChartsOption = {
|
|
5
|
+
title: {
|
|
6
|
+
text: 'test',
|
|
7
|
+
},
|
|
8
|
+
tooltip: {},
|
|
9
|
+
legend: {
|
|
10
|
+
data: ['test'],
|
|
11
|
+
},
|
|
12
|
+
xAxis: {
|
|
13
|
+
data: ['a', 'b', 'c', 'd', 'f', 'g'],
|
|
14
|
+
},
|
|
15
|
+
yAxis: {},
|
|
16
|
+
series: [
|
|
17
|
+
{
|
|
18
|
+
name: 'test',
|
|
19
|
+
type: 'bar',
|
|
20
|
+
data: [5, 20, 36, 10, 10, 20],
|
|
21
|
+
},
|
|
22
|
+
],
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
describe('#simpleBarChart', function () {
|
|
26
|
+
it('should generate the chart', async () => {
|
|
27
|
+
const data: Buffer = await EChartRatchet.renderChart(options, {
|
|
28
|
+
width: 1000,
|
|
29
|
+
height: 500,
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// As of 2022-08-06 this is 7606... there must be a better test than this..
|
|
33
|
+
expect(data.length).toBeGreaterThan(5_000);
|
|
34
|
+
expect(data.length).toBeLessThan(10_000);
|
|
35
|
+
});
|
|
36
|
+
});
|
package/src/index.ts
ADDED
package/test.png
ADDED
|
Binary file
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es6",
|
|
4
|
+
"module": "commonjs",
|
|
5
|
+
"declaration": true,
|
|
6
|
+
"sourceMap": true,
|
|
7
|
+
"outDir": "./dist",
|
|
8
|
+
"strict": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"resolveJsonModule": true,
|
|
11
|
+
"moduleResolution": "node",
|
|
12
|
+
"noImplicitAny": false,
|
|
13
|
+
"noUnusedLocals": false,
|
|
14
|
+
"noImplicitThis": false,
|
|
15
|
+
"strictNullChecks": false,
|
|
16
|
+
"skipLibCheck": true,
|
|
17
|
+
"noImplicitReturns": true,
|
|
18
|
+
"preserveConstEnums": true,
|
|
19
|
+
"suppressImplicitAnyIndexErrors": true,
|
|
20
|
+
"forceConsistentCasingInFileNames": true,
|
|
21
|
+
"lib": ["es2015", "es6", "dom"]
|
|
22
|
+
},
|
|
23
|
+
"include": ["src/**/*.ts"],
|
|
24
|
+
"exclude": ["node_modules", "build", "webpack"],
|
|
25
|
+
"types": ["typePatches"],
|
|
26
|
+
"CAW_NOTES": "Set noImplicitAny, noImplicitThis and noUnusedLocals back to true at some point"
|
|
27
|
+
}
|