Skip to content

Commit d9aafd3

Browse files
authored
Merge pull request #151 from SeanSobey/animated-chart-master
Chart.JS, NodeJS and Canvas update
2 parents e78af54 + 534edf0 commit d9aafd3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+5786
-9386
lines changed

.npmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
msvs_version = 2017
1+
msvs_version = 2022

.nvmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
16.13.0
1+
21.7.3

CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Changelog
22

3+
## 5.0.0
4+
5+
Migrated to support chart.js v4.x.x, dropped support for 3.x.x
6+
Upgraded to canvas v3.x.x
7+
8+
WIP support for animated charts, exporting to GIF.
9+
310
## 4.0.0
411

512
Migrated to support chart.js v3.x.x, dropped support for 2.x.x

README.md

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ Provides and alternative to [chartjs-node](https://www.npmjs.com/package/chartjs
2626
5. [API](#api)
2727
6. [Usage](#usage)
2828
7. [Known Issues](#known-issues)
29+
8. [Sponsors](#sponsors)
2930

3031
## Installation
3132

@@ -41,7 +42,7 @@ See the GitHub Actions [yml](.github/workflows/nodejs.yml) section for the curre
4142

4243
### Charts.JS version
4344

44-
Currently supports 3.x.x. You are given the ability to maintain the version yourself via peer dependency, but be aware that going above the specified [version](./package.json) might result in errors.
45+
Currently supports 4.x.x. You are given the ability to maintain the version yourself via peer dependency, but be aware that going above the specified [version](./package.json) might result in errors.
4546

4647
## Features
4748

@@ -54,6 +55,10 @@ Currently supports 3.x.x. You are given the ability to maintain the version your
5455

5556
## Limitations
5657

58+
### Node Modules
59+
60+
I hope to convert this package to a node module in the future, but since it uses the CommonJS API to manage memory for ChartJS this is not a simple task. It it a top priority for the next major release.
61+
5762
### Animations
5863

5964
Chart animation (and responsive resize) is disabled by this library. This is necessary since the animation API's required are not available in Node JS/canvas-node (this is not a browser environment after all).
@@ -65,6 +70,8 @@ Chart.defaults.animation = false;
6570
Chart.defaults.responsive = false;
6671
```
6772

73+
*Note this is WIP, see the [change log](CHANGELOG.md) for most recent development.
74+
6875
### SVG and PDF
6976

7077
For some unknown reason canvas requires use of the [sync](https://github.com/Automattic/node-canvas#canvastobuffer) API's to use SVG's or PDF's. This libraries which support these are:
@@ -164,6 +171,13 @@ chartJSNodeCanvas.registerFont('./testData/VTKS UNAMOUR.ttf', { family: 'VTKS UN
164171

165172
See the node-canvas [docs](https://github.com/Automattic/node-canvas#registerfont) and the chart js [docs](https://www.chartjs.org/docs/latest/general/fonts.html).
166173

174+
#### Windows
175+
176+
On windows you need to install the font first, before running your app. Otherwise you will get an error something like:
177+
`Pango-WARNING **: 11:13:09.211: couldn't load font "vtks unamour Not-Rotated 12px", falling back to "Sans Not-Rotated 12px", expect ugly output.`
178+
179+
See [here](https://github.com/Automattic/node-canvas/issues/1643).
180+
167181
### Background color
168182

169183
Due to the many issues and question this includes a [convenience plugin](./src/backgroundColourPlugin.ts) to fill the otherwise transparent background. It uses the [fillStyle](https://www.w3schools.com/tags/canvas_fillstyle.asp) canvas API;
@@ -240,3 +254,7 @@ See the [tests](src/index.e2e.spec.ts#106) for some examples.
240254
## Known Issues
241255

242256
There is a problem with persisting config objects between render calls, see this [issue](https://github.com/SeanSobey/ChartjsNodeCanvas/issues/9) for details and workarounds.
257+
258+
## Sponsors
259+
260+
@athombv at https://homey.app

dist/freshRequire.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export declare const freshRequire: (id: string) => any;
1+
export declare const freshRequire: (id: string) => any;

dist/freshRequire.js

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/index.d.ts

Lines changed: 3 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,3 @@
1-
/// <reference types="node" />
2-
import { Readable } from 'stream';
3-
import { Chart as ChartJS, ChartConfiguration, ChartComponentLike } from 'chart.js';
4-
export declare type ChartJSNodeCanvasPlugins = {
5-
/**
6-
* Global plugins, see https://www.chartjs.org/docs/latest/developers/plugins.html.
7-
*/
8-
readonly modern?: ReadonlyArray<string | ChartComponentLike>;
9-
/**
10-
* This will work for plugins that `require` ChartJS themselves.
11-
*/
12-
readonly requireChartJSLegacy?: ReadonlyArray<string>;
13-
/**
14-
* This should work for any plugin that expects a global Chart variable.
15-
*/
16-
readonly globalVariableLegacy?: ReadonlyArray<string>;
17-
/**
18-
* This will work with plugins that just return a plugin object and do no specific loading themselves.
19-
*/
20-
readonly requireLegacy?: ReadonlyArray<string>;
21-
};
22-
export declare type ChartCallback = (chartJS: typeof ChartJS) => void | Promise<void>;
23-
export declare type CanvasType = 'pdf' | 'svg';
24-
export declare type MimeType = 'image/png' | 'image/jpeg';
25-
export interface ChartJSNodeCanvasOptions {
26-
/**
27-
* The width of the charts to render, in pixels.
28-
*/
29-
readonly width: number;
30-
/**
31-
* The height of the charts to render, in pixels.
32-
*/
33-
readonly height: number;
34-
/**
35-
* Optional callback which is called once with a new ChartJS global reference as the only parameter.
36-
*/
37-
readonly chartCallback?: ChartCallback;
38-
/**
39-
* Optional canvas type ('PDF' or 'SVG'), see the [canvas pdf doc](https://github.com/Automattic/node-canvas#pdf-output-support).
40-
*/
41-
readonly type?: CanvasType;
42-
/**
43-
* Optional plugins to register.
44-
*/
45-
readonly plugins?: ChartJSNodeCanvasPlugins;
46-
/**
47-
* Optional background color for the chart, otherwise it will be transparent. Note, this will apply to all charts. See the [fillStyle](https://www.w3schools.com/tags/canvas_fillstyle.asp) canvas API used for possible values.
48-
*/
49-
readonly backgroundColour?: string;
50-
}
51-
export declare class ChartJSNodeCanvas {
52-
private readonly _width;
53-
private readonly _height;
54-
private readonly _chartJs;
55-
private readonly _createCanvas;
56-
private readonly _registerFont;
57-
private readonly _image;
58-
private readonly _type?;
59-
/**
60-
* Create a new instance of CanvasRenderService.
61-
*
62-
* @param options Configuration for this instance
63-
*/
64-
constructor(options: ChartJSNodeCanvasOptions);
65-
/**
66-
* Render to a data url.
67-
* @see https://github.com/Automattic/node-canvas#canvastodataurl
68-
*
69-
* @param configuration The Chart JS configuration for the chart to render.
70-
* @param mimeType The image format, `image/png` or `image/jpeg`.
71-
*/
72-
renderToDataURL(configuration: ChartConfiguration, mimeType?: MimeType): Promise<string>;
73-
/**
74-
* Render to a data url synchronously.
75-
* @see https://github.com/Automattic/node-canvas#canvastodataurl
76-
*
77-
* @param configuration The Chart JS configuration for the chart to render.
78-
* @param mimeType The image format, `image/png` or `image/jpeg`.
79-
*/
80-
renderToDataURLSync(configuration: ChartConfiguration, mimeType?: MimeType): string;
81-
/**
82-
* Render to a buffer.
83-
* @see https://github.com/Automattic/node-canvas#canvastobuffer
84-
*
85-
* @param configuration The Chart JS configuration for the chart to render.
86-
* @param mimeType A string indicating the image format. Valid options are `image/png`, `image/jpeg` (if node-canvas was built with JPEG support) or `raw` (unencoded ARGB32 data in native-endian byte order, top-to-bottom). Defaults to `image/png` for image canvases, or the corresponding type for PDF or SVG canvas.
87-
*/
88-
renderToBuffer(configuration: ChartConfiguration, mimeType?: MimeType): Promise<Buffer>;
89-
/**
90-
* Render to a buffer synchronously.
91-
* @see https://github.com/Automattic/node-canvas#canvastobuffer
92-
*
93-
* @param configuration The Chart JS configuration for the chart to render.
94-
* @param mimeType A string indicating the image format. Valid options are `image/png`, `image/jpeg` (if node-canvas was built with JPEG support), `raw` (unencoded ARGB32 data in native-endian byte order, top-to-bottom), `application/pdf` (for PDF canvases) and image/svg+xml (for SVG canvases). Defaults to `image/png` for image canvases, or the corresponding type for PDF or SVG canvas.
95-
*/
96-
renderToBufferSync(configuration: ChartConfiguration, mimeType?: MimeType | 'application/pdf' | 'image/svg+xml'): Buffer;
97-
/**
98-
* Render to a stream.
99-
* @see https://github.com/Automattic/node-canvas#canvascreatepngstream
100-
*
101-
* @param configuration The Chart JS configuration for the chart to render.
102-
* @param mimeType A string indicating the image format. Valid options are `image/png`, `image/jpeg` (if node-canvas was built with JPEG support), `application/pdf` (for PDF canvases) and image/svg+xml (for SVG canvases). Defaults to `image/png` for image canvases, or the corresponding type for PDF or SVG canvas.
103-
*/
104-
renderToStream(configuration: ChartConfiguration, mimeType?: MimeType | 'application/pdf'): Readable;
105-
/**
106-
* Use to register the font with Canvas to use a font file that is not installed as a system font, this must be done before the Canvas is created.
107-
*
108-
* @param path The path to the font file.
109-
* @param options The font options.
110-
* @example
111-
* registerFont('comicsans.ttf', { family: 'Comic Sans' });
112-
*/
113-
registerFont(path: string, options: {
114-
readonly family: string;
115-
readonly weight?: string;
116-
readonly style?: string;
117-
}): void;
118-
private initialize;
119-
private renderChart;
120-
}
1+
export * from './animatedChartJSNodeCanvas';
2+
export * from './chartJSNodeCanvas';
3+
export * from './chartJSNodeCanvasBase';

0 commit comments

Comments
 (0)