Chart.JS, NodeJS and Canvas update

.npmrc

@@ -1 +1 @@
-msvs_version = 2017
+msvs_version = 2022

.nvmrc

@@ -1 +1 @@
-16.13.0
+21.7.3

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 5.0.0
+
+Migrated to support chart.js v4.x.x, dropped support for 3.x.x
+Upgraded to canvas v3.x.x
+
+WIP support for animated charts, exporting to GIF.
+
 ## 4.0.0
 
 Migrated to support chart.js v3.x.x, dropped support for 2.x.x

README.md

@@ -26,6 +26,7 @@ Provides and alternative to [chartjs-node](https://www.npmjs.com/package/chartjs
 5. [API](#api)
 6. [Usage](#usage)
 7. [Known Issues](#known-issues)
+8. [Sponsors](#sponsors)
 
 ## Installation
 
@@ -41,7 +42,7 @@ See the GitHub Actions [yml](.github/workflows/nodejs.yml) section for the curre
 
 ### Charts.JS version
 
-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.
+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.
 
 ## Features
 
@@ -54,6 +55,10 @@ Currently supports 3.x.x. You are given the ability to maintain the version your
 
 ## Limitations
 
+### Node Modules
+
+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.
+
 ### Animations
 
 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;
 Chart.defaults.responsive = false;
 ```
 
+*Note this is WIP, see the [change log](CHANGELOG.md) for most recent development.
+
 ### SVG and PDF
 
 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
 
 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).
 
+#### Windows
+
+On windows you need to install the font first, before running your app. Otherwise you will get an error something like:
+`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.`
+
+See [here](https://github.com/Automattic/node-canvas/issues/1643).
+
 ### Background color
 
 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.
 ## Known Issues
 
 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.
+
+## Sponsors
+
+@athombv at https://homey.app

dist/freshRequire.d.ts

@@ -1 +1 @@
-export declare const freshRequire: (id: string) => any;
+export declare const freshRequire: (id: string) => any;

dist/index.d.ts

@@ -1,120 +1,3 @@
-/// <reference types="node" />
-import { Readable } from 'stream';
-import { Chart as ChartJS, ChartConfiguration, ChartComponentLike } from 'chart.js';
-export declare type ChartJSNodeCanvasPlugins = {
-    /**
-     * Global plugins, see https://www.chartjs.org/docs/latest/developers/plugins.html.
-     */
-    readonly modern?: ReadonlyArray<string | ChartComponentLike>;
-    /**
-     * This will work for plugins that `require` ChartJS themselves.
-     */
-    readonly requireChartJSLegacy?: ReadonlyArray<string>;
-    /**
-     * This should work for any plugin that expects a global Chart variable.
-     */
-    readonly globalVariableLegacy?: ReadonlyArray<string>;
-    /**
-     * This will work with plugins that just return a plugin object and do no specific loading themselves.
-     */
-    readonly requireLegacy?: ReadonlyArray<string>;
-};
-export declare type ChartCallback = (chartJS: typeof ChartJS) => void | Promise<void>;
-export declare type CanvasType = 'pdf' | 'svg';
-export declare type MimeType = 'image/png' | 'image/jpeg';
-export interface ChartJSNodeCanvasOptions {
-    /**
-     * The width of the charts to render, in pixels.
-     */
-    readonly width: number;
-    /**
-     * The height of the charts to render, in pixels.
-     */
-    readonly height: number;
-    /**
-     * Optional callback which is called once with a new ChartJS global reference as the only parameter.
-     */
-    readonly chartCallback?: ChartCallback;
-    /**
-     * Optional canvas type ('PDF' or 'SVG'), see the [canvas pdf doc](https://github.com/Automattic/node-canvas#pdf-output-support).
-     */
-    readonly type?: CanvasType;
-    /**
-     * Optional plugins to register.
-     */
-    readonly plugins?: ChartJSNodeCanvasPlugins;
-    /**
-     * 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.
-     */
-    readonly backgroundColour?: string;
-}
-export declare class ChartJSNodeCanvas {
-    private readonly _width;
-    private readonly _height;
-    private readonly _chartJs;
-    private readonly _createCanvas;
-    private readonly _registerFont;
-    private readonly _image;
-    private readonly _type?;
-    /**
-     * Create a new instance of CanvasRenderService.
-     *
-     * @param options Configuration for this instance
-     */
-    constructor(options: ChartJSNodeCanvasOptions);
-    /**
-     * Render to a data url.
-     * @see https://github.com/Automattic/node-canvas#canvastodataurl
-     *
-     * @param configuration The Chart JS configuration for the chart to render.
-     * @param mimeType The image format, `image/png` or `image/jpeg`.
-     */
-    renderToDataURL(configuration: ChartConfiguration, mimeType?: MimeType): Promise<string>;
-    /**
-     * Render to a data url synchronously.
-     * @see https://github.com/Automattic/node-canvas#canvastodataurl
-     *
-     * @param configuration The Chart JS configuration for the chart to render.
-     * @param mimeType The image format, `image/png` or `image/jpeg`.
-     */
-    renderToDataURLSync(configuration: ChartConfiguration, mimeType?: MimeType): string;
-    /**
-     * Render to a buffer.
-     * @see https://github.com/Automattic/node-canvas#canvastobuffer
-     *
-     * @param configuration The Chart JS configuration for the chart to render.
-     * @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.
-     */
-    renderToBuffer(configuration: ChartConfiguration, mimeType?: MimeType): Promise<Buffer>;
-    /**
-     * Render to a buffer synchronously.
-     * @see https://github.com/Automattic/node-canvas#canvastobuffer
-     *
-     * @param configuration The Chart JS configuration for the chart to render.
-     * @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.
-     */
-    renderToBufferSync(configuration: ChartConfiguration, mimeType?: MimeType | 'application/pdf' | 'image/svg+xml'): Buffer;
-    /**
-     * Render to a stream.
-     * @see https://github.com/Automattic/node-canvas#canvascreatepngstream
-     *
-     * @param configuration The Chart JS configuration for the chart to render.
-     * @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.
-     */
-    renderToStream(configuration: ChartConfiguration, mimeType?: MimeType | 'application/pdf'): Readable;
-    /**
-     * 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.
-     *
-     * @param path The path to the font file.
-     * @param options The font options.
-     * @example
-     * registerFont('comicsans.ttf', { family: 'Comic Sans' });
-     */
-    registerFont(path: string, options: {
-        readonly family: string;
-        readonly weight?: string;
-        readonly style?: string;
-    }): void;
-    private initialize;
-    private renderChart;
-}
+export * from './animatedChartJSNodeCanvas';
+export * from './chartJSNodeCanvas';
+export * from './chartJSNodeCanvasBase';