diff --git a/README.md b/README.md index 309326f79..9202b5f0e 100644 --- a/README.md +++ b/README.md @@ -7,18 +7,21 @@ [![documentation](https://img.shields.io/static/v1?message=Documentation&color=informational)](https://www.chartjs.org/chartjs-plugin-annotation/index) Awesome -An annotation plugin for Chart.js >= 3.7.0 +An annotation plugin for Chart.js >= 4.0.0 --- > This plugin needs to be registered. It does not function as inline plugin. --- +For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1) + For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0) + For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7) This plugin draws lines, boxes, points, labels, polygons and ellipses on the chart area. -Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts. +Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have two or more axes, including pie, radar, and polar area charts. ![Example Screenshot](docs/guide/banner.png) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.ts similarity index 88% rename from docs/.vuepress/config.js rename to docs/.vuepress/config.ts index ea6599949..eb7804e5b 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.ts @@ -1,8 +1,11 @@ -const path = require('path'); +import * as path from 'path'; +import markdownItInclude from 'markdown-it-include'; +import { DefaultThemeConfig, defineConfig, PluginTuple } from 'vuepress/config'; + const docsVersion = "VERSION"; const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-annotation/master/' : `/chartjs-plugin-annotation/${docsVersion}/`; -module.exports = { +export default defineConfig({ dest: 'dist/docs', title: 'chartjs-plugin-annotation', description: 'Annotations for Chart.js', @@ -72,7 +75,7 @@ module.exports = { ] }, }], - ], + ] as PluginTuple[], chainWebpack(config) { config.module .rule('chart.js') @@ -86,7 +89,7 @@ module.exports = { }, markdown: { extendMarkdown: md => { - md.use(require('markdown-it-include'), path.resolve(__dirname, '../')); + md.use(markdownItInclude, path.resolve(__dirname, '../')); } }, themeConfig: { @@ -131,8 +134,15 @@ module.exports = { 'types/polygon' ] }, - 'migrationV1', - 'migrationV2' + { + title: 'Migration', + collapsable: true, + children: [ + 'migrationV3', + 'migrationV2', + 'migrationV1' + ] + }, ], '/samples/': [ 'intro', @@ -145,7 +155,7 @@ module.exports = { 'box/canvas', 'box/image', 'box/initAnim', - 'box/gradient', + 'box/gradient' ] }, { @@ -154,7 +164,7 @@ module.exports = { 'ellipse/basic', 'ellipse/rotation', 'ellipse/label', - 'ellipse/image', + 'ellipse/image' ] }, { @@ -187,7 +197,7 @@ module.exports = { 'line/image', 'line/datasetBars', 'line/animation', - 'line/hook', + 'line/hook' ] }, { @@ -197,7 +207,7 @@ module.exports = { 'point/combined', 'point/outsideChartArea', 'point/shadow', - 'point/initAnim', + 'point/initAnim' ] }, { @@ -206,14 +216,14 @@ module.exports = { 'polygon/basic', 'polygon/stop', 'polygon/outsideChartArea', - 'polygon/shadow', + 'polygon/shadow' ] }, { title: 'Charts', children: [ 'charts/bar', - 'charts/line', + 'charts/line' ], }, { @@ -222,11 +232,11 @@ module.exports = { 'interaction/interaction', 'interaction/dragging', 'interaction/selection', - 'interaction/cartesianplane', + 'interaction/cartesianplane' ], }, - 'utils', + 'utils' ] } - } -}; + } as DefaultThemeConfig +}); diff --git a/docs/guide/index.md b/docs/guide/index.md index e660ba4fe..77a17e77f 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -6,7 +6,7 @@ This plugin needs to be registered. It does not function as inline plugin. ::: -An annotation plugin for Chart.js >= 3.0.0 +An annotation plugin for Chart.js >= 4.0.0 This plugin draws lines, boxes, labels, points, polygons and ellipses on the chart area. Annotations work with line, bar, scatter and bubble charts that use linear, logarithmic, time, or category scales. Annotations will not work on any chart that does not have exactly two axes, including pie, radar, and polar area charts. @@ -20,7 +20,12 @@ This plugin draws lines, boxes, labels, points, polygons and ellipses on the cha ::: tip Important Note +For Chart.js 3.7.0 to 3.9.1 support, use [version 2.2.1 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v2.2.1) + +For Chart.js 3.0.0 to 3.6.2 support, use [version 1.4.0 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v1.4.0) + For Chart.js 2.4.0 to 2.9.x support, use [version 0.5.7 of this plugin](https://github.com/chartjs/chartjs-plugin-annotation/releases/tag/v0.5.7) + Documentation for v0.5.7 can be found on [GitHub](https://github.com/chartjs/chartjs-plugin-annotation/blob/1ab782afce943456f958cac33f67edc5d6eab278/README.md). ::: diff --git a/docs/guide/integration.md b/docs/guide/integration.md index 17772221d..6c6ef1f2b 100644 --- a/docs/guide/integration.md +++ b/docs/guide/integration.md @@ -2,7 +2,7 @@ title: Integration --- -chartjs-plugin-annotation can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems. +**`chartjs-plugin-annotation`** can be integrated with plain JavaScript or with different module loaders. The examples below show to load the plugin in different systems. ## Script Tag diff --git a/docs/guide/migrationV1.md b/docs/guide/migrationV1.md index 4082542b6..36fa62b3b 100644 --- a/docs/guide/migrationV1.md +++ b/docs/guide/migrationV1.md @@ -1,6 +1,6 @@ # 1.x Migration Guide -`chartjs-plugin-annotation` plugin version 1 introduces a number of breaking changes in order to compatible with Chart.js 3 and to align with Chart.js 3 options. +**`chartjs-plugin-annotation`** plugin version 1 introduces a number of breaking changes in order to compatible with Chart.js 3 and to align with Chart.js 3 options. ## Setup and installation diff --git a/docs/guide/migrationV2.md b/docs/guide/migrationV2.md index 907d317fb..bea41a6d6 100644 --- a/docs/guide/migrationV2.md +++ b/docs/guide/migrationV2.md @@ -1,6 +1,6 @@ -# 2.x Migration guide +# 2.x Migration Guide -`chartjs-plugin-annotation` plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit. +**`chartjs-plugin-annotation`** plugin version 2 introduces a number of breaking changes. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit. ## Chart.js version diff --git a/docs/guide/migrationV3.md b/docs/guide/migrationV3.md new file mode 100644 index 000000000..369ec326d --- /dev/null +++ b/docs/guide/migrationV3.md @@ -0,0 +1,8 @@ +# 3.x Migration Guide + +**`chartjs-plugin-annotation`** plugin version 3 becomes an [ESM-only package](https://nodejs.org/api/esm.html). +The [UMD bundle](integration.md#script-tag) is still available. + +## Chart.js version + +The annotation plugin requires at least version 4.0.0 to work because of Chart.js becomes an ESM-only package. diff --git a/docs/index.md b/docs/index.md index 3681e6756..68aaeaf43 100644 --- a/docs/index.md +++ b/docs/index.md @@ -3,5 +3,5 @@ home: true heroImage: /hero.svg actionText: Get Started → actionLink: /guide/ -footer: MIT Licensed | Copyright © 2016-2021 chartjs-plugin-annotation contributors +footer: MIT Licensed | Copyright © 2016-2023 chartjs-plugin-annotation contributors --- diff --git a/karma.conf.js b/karma.conf.cjs similarity index 90% rename from karma.conf.js rename to karma.conf.cjs index a16cd8719..99fd871e2 100644 --- a/karma.conf.js +++ b/karma.conf.cjs @@ -1,12 +1,10 @@ -const jasmineSeedReporter = require('./test/seed-reporter'); const istanbul = require('rollup-plugin-istanbul'); const json = require('@rollup/plugin-json'); const resolve = require('@rollup/plugin-node-resolve').default; -const builds = require('./rollup.config'); const yargs = require('yargs'); const env = process.env.NODE_ENV; -module.exports = function(karma) { +module.exports = async function(karma) { const args = yargs .option('verbose', {default: false}) .argv; @@ -15,7 +13,9 @@ module.exports = function(karma) { // we will prefer the unminified build which is easier to browse and works // better with source mapping. In other cases, pick the minified build to // make sure that the minification process (terser) doesn't break anything. - const regex = karma.autoWatch ? /chartjs-plugin-annotation\.js$/ : /chartjs-plugin-annotation\.min\.js$/; + const builds = (await import('./rollup.config.js')).default; + const jasmineSeedReporter = (await import('./test/seed-reporter.js')).default; + const regex = karma.autoWatch ? /chartjs-plugin-annotation\.cjs$/ : /chartjs-plugin-annotation\.min\.js$/; const build = builds.filter(v => v.output.file && v.output.file.match(regex))[0]; if (env === 'test') { @@ -67,7 +67,7 @@ module.exports = function(karma) { {pattern: 'test/fixtures/**/*.js', included: false}, {pattern: 'test/fixtures/**/*.png', included: false}, {pattern: 'node_modules/chart.js/dist/chart.umd.js'}, - {pattern: 'src/index.js', watched: false}, + {pattern: 'src/index.js', watched: false, type: 'js'}, {pattern: 'test/index.js'}, {pattern: 'test/specs/**/**.js'} ], diff --git a/package-lock.json b/package-lock.json index 7b61d9c22..4d05d39b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "vuepress-theme-chartjs": "^0.2.0" }, "peerDependencies": { - "chart.js": ">=3.7.0" + "chart.js": ">=4.0.0" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index 6128da45a..d8b26e6f0 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "version": "2.2.1", "author": "Evert Timberg ", "license": "MIT", - "main": "dist/chartjs-plugin-annotation.js", + "type": "module", + "main": "dist/chartjs-plugin-annotation.cjs", "module": "dist/chartjs-plugin-annotation.esm.js", "types": "types/index.d.ts", "jsdelivr": "dist/chartjs-plugin-annotation.min.js", @@ -13,21 +14,26 @@ "exports": { "types": "./types/index.d.ts", "import": "./dist/chartjs-plugin-annotation.esm.js", - "require": "./dist/chartjs-plugin-annotation.min.js", + "require": "./dist/chartjs-plugin-annotation.cjs", "script": "./dist/chartjs-plugin-annotation.min.js" }, + "sideEffects": [ + "dist/chartjs-plugin-annotation.cjs", + "dist/chartjs-plugin-annotation.min.js" + ], "repository": { "type": "git", "url": "https://github.com/chartjs/chartjs-plugin-annotation.git" }, "files": [ - "dist/*.js", + "dist/*", + "!dist/docs/**", "types/*.d.ts" ], "scripts": { "build": "rollup -c", - "dev": "karma start --auto-watch --no-single-run --browsers chrome", - "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox", + "dev": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers chrome", + "dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox", "docs": "npm run build && vuepress build docs --no-cache", "docs:dev": "npm run build && vuepress dev docs --no-cache", "lint": "concurrently --group \"npm:lint-*\"", @@ -35,10 +41,10 @@ "lint-md": "eslint \"**/*.md\"", "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/", "test": "cross-env NODE_ENV=test concurrently --group \"npm:test-*\"", - "test-karma": "karma start --auto-watch --single-run", + "test-karma": "karma start ./karma.conf.cjs --auto-watch --single-run", "test-lint": "npm run lint", "test-types": "tsc -p types/tests/", - "test-types-integration": "mocha --full-trace test/integration/*-test.js" + "test-integration": "mocha --full-trace test/integration/*-test.js" }, "devDependencies": { "@rollup/plugin-json": "^6.0.0", @@ -79,6 +85,6 @@ "vuepress-theme-chartjs": "^0.2.0" }, "peerDependencies": { - "chart.js": ">=3.7.0" + "chart.js": ">=4.0.0" } } diff --git a/rollup.config.js b/rollup.config.js index 27ea5991f..9236cbc60 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,13 +1,15 @@ -const json = require('@rollup/plugin-json'); -const resolve = require('@rollup/plugin-node-resolve').default; -const terser = require('@rollup/plugin-terser').default; -const {name, version, homepage, main, module: _module} = require('./package.json'); +import resolve from '@rollup/plugin-node-resolve'; +import terser from '@rollup/plugin-terser'; +import json from '@rollup/plugin-json'; +import {readFileSync} from 'fs'; + +const {name, version, homepage, main, module, license, jsdelivr} = JSON.parse(readFileSync('./package.json')); const banner = `/*! * ${name} v${version} * ${homepage} * (c) ${(new Date(process.env.SOURCE_DATE_EPOCH ? (process.env.SOURCE_DATE_EPOCH * 1000) : new Date().getTime())).getFullYear()} chartjs-plugin-annotation Contributors - * Released under the MIT License + * Released under the ${license} License */`; const input = 'src/index.js'; @@ -21,7 +23,8 @@ const globals = { 'chart.js/helpers': 'Chart.helpers' }; -module.exports = [ +export default [ + // cjs { input, plugins: [ @@ -38,6 +41,7 @@ module.exports = [ }, external }, + // min.js { input, plugins: [ @@ -51,13 +55,14 @@ module.exports = [ ], output: { name, - file: main.replace('.js', '.min.js'), + file: jsdelivr, format: 'umd', indent: false, globals }, external }, + // ems.js { input: inputESM, plugins: [ @@ -66,7 +71,7 @@ module.exports = [ ], output: { name, - file: _module, + file: module, banner, format: 'esm', indent: false diff --git a/scripts/docs-config.sh b/scripts/docs-config.sh index 25b3589d9..1d0895604 100755 --- a/scripts/docs-config.sh +++ b/scripts/docs-config.sh @@ -27,4 +27,4 @@ MODE=$2 TAG=$(tag_from_version "$VERSION" "$MODE") -sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.js" +sed -i -e "s/VERSION/$TAG/g" "docs/.vuepress/config.ts" diff --git a/src/annotation.js b/src/annotation.js index 11c4687a5..006416329 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -17,7 +17,7 @@ export default { version, beforeRegister() { - requireVersion('chart.js', '3.7', Chart.version); + requireVersion('chart.js', '4.0', Chart.version); }, afterRegister() { diff --git a/test/integration/integration-test.js b/test/integration/integration-test.js index 6fbcc42c3..ecd9716c9 100644 --- a/test/integration/integration-test.js +++ b/test/integration/integration-test.js @@ -1,11 +1,12 @@ 'use strict'; -const os = require('os'); -const fs = require('fs-extra'); -const path = require('path'); -const childProcess = require('child_process'); +import os from 'os'; +import fs from 'fs-extra'; +import path from 'path'; +import childProcess from 'child_process'; +import process from 'process'; -const {describe, it} = require('mocha'); +import {describe, it} from 'mocha'; function exec(command, options = {}) { const output = childProcess.execSync(command, { @@ -28,7 +29,7 @@ describe('Integration Tests', () => { ); function testOnNodeProject(projectName) { - const projectPath = path.join(__dirname, projectName); + const projectPath = path.join(process.cwd(), 'test', 'integration', projectName); const packageJSONPath = path.join(projectPath, 'package.json'); const packageJSON = JSON.parse(fs.readFileSync(packageJSONPath, 'utf-8')); @@ -41,6 +42,7 @@ describe('Integration Tests', () => { exec('npm --quiet test', {cwd, stdio: 'inherit'}); }).timeout(5 * 60 * 1000); } - testOnNodeProject('ts'); + testOnNodeProject('node-module'); + testOnNodeProject('node-commonjs'); }); diff --git a/test/integration/node-commonjs/package.json b/test/integration/node-commonjs/package.json new file mode 100644 index 000000000..b3aac0b53 --- /dev/null +++ b/test/integration/node-commonjs/package.json @@ -0,0 +1,12 @@ +{ + "private": true, + "description": "chartjs-plugin-annotation should work in Node, using commonjs", + "scripts": { + "test": "node test.js" + }, + "dependencies": { + "@napi-rs/canvas": "^0.1.30", + "chart.js": "^4.2.1", + "chartjs-plugin-annotation": "file:../plugin.tgz" + } +} diff --git a/test/integration/node-commonjs/test.js b/test/integration/node-commonjs/test.js new file mode 100644 index 000000000..0d32ef071 --- /dev/null +++ b/test/integration/node-commonjs/test.js @@ -0,0 +1,32 @@ +const {createCanvas} = require('@napi-rs/canvas'); +const {Chart, BarController, BarElement, CategoryScale, LinearScale} = require('chart.js'); +const Annotation = require('chartjs-plugin-annotation'); + +Chart.register(BarController, BarElement, CategoryScale, LinearScale); +Chart.register(Annotation); + +const canvas = createCanvas(300, 320); +const ctx = canvas.getContext('2d'); + +// Chart.js assumes ctx contains the canvas +ctx.canvas = canvas; + +module.export = new Chart(ctx, { + type: 'bar', + data: { + labels: [], + datasets: [{ + data: [] + }] + }, + options: { + plugins: { + annotation: { + clip: false, + annotations: [] + } + } + }, + plugins: [Annotation] +}); + diff --git a/test/integration/node-module/package.json b/test/integration/node-module/package.json new file mode 100644 index 000000000..6c24ee236 --- /dev/null +++ b/test/integration/node-module/package.json @@ -0,0 +1,13 @@ +{ + "private": true, + "description": "chartjs-plugin-annotation should work in Node, using module", + "type": "module", + "scripts": { + "test": "node test.js" + }, + "dependencies": { + "@napi-rs/canvas": "^0.1.30", + "chart.js": "^4.2.1", + "chartjs-plugin-annotation": "file:../plugin.tgz" + } +} diff --git a/test/integration/node-module/test.js b/test/integration/node-module/test.js new file mode 100644 index 000000000..ebdcbbf91 --- /dev/null +++ b/test/integration/node-module/test.js @@ -0,0 +1,32 @@ +import {createCanvas} from '@napi-rs/canvas'; +import {Chart, BarController, BarElement, CategoryScale, LinearScale} from 'chart.js'; +import Annotation from 'chartjs-plugin-annotation'; + +Chart.register(BarController, BarElement, CategoryScale, LinearScale); +Chart.register(Annotation); + +const canvas = createCanvas(300, 320); +const ctx = canvas.getContext('2d'); + +// Chart.js assumes ctx contains the canvas +ctx.canvas = canvas; + +export const chart = new Chart(ctx, { + type: 'bar', + data: { + labels: [], + datasets: [{ + data: [] + }] + }, + options: { + plugins: { + annotation: { + clip: false, + annotations: [] + } + } + }, + plugins: [Annotation] +}); + diff --git a/test/integration/ts/package.json b/test/integration/ts/package.json index 39b929587..7d8d91a61 100644 --- a/test/integration/ts/package.json +++ b/test/integration/ts/package.json @@ -5,13 +5,15 @@ "test": "node test.js" }, "dependencies": { - "chart.js": "^3.1.0", + "chart.js": "^4.2.1", "chartjs-plugin-annotation": "file:../plugin.tgz", - "typescript-4.1": "npm:typescript@4.1.x", "typescript-4.2": "npm:typescript@4.2.x", "typescript-4.3": "npm:typescript@4.3.x", "typescript-4.4": "npm:typescript@4.4.x", "typescript-4.5": "npm:typescript@4.5.x", - "typescript-4.6": "npm:typescript@4.6.x" + "typescript-4.6": "npm:typescript@4.6.x", + "typescript-4.7": "npm:typescript@4.7.x", + "typescript-4.8": "npm:typescript@4.8.x", + "typescript-4.9": "npm:typescript@4.9.x" } } diff --git a/test/seed-reporter.js b/test/seed-reporter.js index 6328b0bcd..ca43b6755 100644 --- a/test/seed-reporter.js +++ b/test/seed-reporter.js @@ -8,6 +8,6 @@ const SeedReporter = function(baseReporterDecorator) { }; }; -module.exports = { +export default { 'reporter:jasmine-seed': ['type', SeedReporter] };