diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index d48864c3d8..8c5bc31914 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -8,7 +8,7 @@ on: jobs: build: - runs-on: macos-latest + runs-on: ubuntu-latest steps: - name: Checkout @@ -17,7 +17,7 @@ jobs: - name: Setup Node.js environment uses: actions/setup-node@v2.1.5 with: - node-version: '16' + node-version: '20' - name: Run CI run: | diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step0-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step0-context.svg index 21ee93580f..a9aeffa2be 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step0-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step0-context.svg @@ -6,16 +6,16 @@ color-interpolation-filters="sRGB" > - + - - - + + + - + - + - + - + - + - + - + - + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step0-focus.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step0-focus.svg index 656bb4db5c..f397cecd05 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step0-focus.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step0-focus.svg @@ -7,7 +7,7 @@ > - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step1-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step1-context.svg index 80265608ff..8a539c59e8 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step1-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step1-context.svg @@ -6,19 +6,19 @@ color-interpolation-filters="sRGB" > - + - + - - - + + + - + - + - + - + - + - + - + - + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step1-focus.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step1-focus.svg index 6cba23dec6..e17d294057 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step1-focus.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step1-focus.svg @@ -7,7 +7,7 @@ > - + - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step2-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step2-context.svg index 80265608ff..8a539c59e8 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step2-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step2-context.svg @@ -6,19 +6,19 @@ color-interpolation-filters="sRGB" > - + - + - - - + + + - + - + - + - + - + - + - + - + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step2-focus.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step2-focus.svg index 6cba23dec6..e17d294057 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step2-focus.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step2-focus.svg @@ -7,7 +7,7 @@ > - + - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step3-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step3-context.svg index 837ffae6ac..c9aa168dde 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step3-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step3-context.svg @@ -6,19 +6,19 @@ color-interpolation-filters="sRGB" > - + - + - - - + + + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step3-focus.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step3-focus.svg index 98f647b730..f843dddb4a 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step3-focus.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step3-focus.svg @@ -7,7 +7,7 @@ > - + - + - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step4-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step4-context.svg index 5b9e110ea4..660ea7c21d 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step4-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step4-context.svg @@ -6,22 +6,22 @@ color-interpolation-filters="sRGB" > - + - + - + - - - + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step5-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step5-context.svg index 5b9e110ea4..660ea7c21d 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step5-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step5-context.svg @@ -6,22 +6,22 @@ color-interpolation-filters="sRGB" > - + - + - + - - - + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/api/chart-on-focus-context/step6-context.svg b/__tests__/integration/snapshots/api/chart-on-focus-context/step6-context.svg index fe94438f58..0872768276 100644 --- a/__tests__/integration/snapshots/api/chart-on-focus-context/step6-context.svg +++ b/__tests__/integration/snapshots/api/chart-on-focus-context/step6-context.svg @@ -6,22 +6,22 @@ color-interpolation-filters="sRGB" > - + - + - + - - - + + + - + - + - + - + - + - + - + - - - + + + - + - + - + diff --git a/__tests__/integration/snapshots/interaction/cars3-line-brush-axis/step0.svg b/__tests__/integration/snapshots/interaction/cars3-line-brush-axis/step0.svg index 8dfc82bdb4..c0206bc2d7 100644 --- a/__tests__/integration/snapshots/interaction/cars3-line-brush-axis/step0.svg +++ b/__tests__/integration/snapshots/interaction/cars3-line-brush-axis/step0.svg @@ -473,8 +473,8 @@ @@ -498,8 +498,8 @@ @@ -550,8 +550,8 @@ @@ -498,8 +498,8 @@ @@ -550,8 +550,8 @@ @@ -796,8 +796,8 @@ @@ -848,8 +848,8 @@ @@ -502,9 +502,9 @@ @@ -515,11 +515,11 @@ @@ -554,9 +554,9 @@ @@ -567,9 +567,9 @@ diff --git a/__tests__/integration/snapshots/interaction/cars3-line-vertical-brush-axis/step1.svg b/__tests__/integration/snapshots/interaction/cars3-line-vertical-brush-axis/step1.svg index dfaa3a2241..880c106c88 100644 --- a/__tests__/integration/snapshots/interaction/cars3-line-vertical-brush-axis/step1.svg +++ b/__tests__/integration/snapshots/interaction/cars3-line-vertical-brush-axis/step1.svg @@ -463,9 +463,9 @@ @@ -502,9 +502,9 @@ @@ -515,11 +515,11 @@ @@ -554,9 +554,9 @@ @@ -567,9 +567,9 @@ @@ -758,9 +758,9 @@ @@ -797,9 +797,9 @@ @@ -810,11 +810,11 @@ @@ -849,9 +849,9 @@ @@ -862,9 +862,9 @@ diff --git a/__tests__/integration/snapshots/interaction/profit-interval-brush-filter/step0.svg b/__tests__/integration/snapshots/interaction/profit-interval-brush-filter/step0.svg index 3b1e66b02b..034c954cb4 100644 --- a/__tests__/integration/snapshots/interaction/profit-interval-brush-filter/step0.svg +++ b/__tests__/integration/snapshots/interaction/profit-interval-brush-filter/step0.svg @@ -345,11 +345,11 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + { const dir = `${__dirname}/snapshots/static`; await expect(gCanvas).toMatchDOMSnapshot(dir, name, { fileFormat: 'svg', - keepSVGElementId: true, + keepSVGElementId: false, }); } finally { gCanvas?.destroy(); diff --git a/__tests__/integration/utils/toMatchDOMSnapshot.ts b/__tests__/integration/utils/toMatchDOMSnapshot.ts index e0a6da629d..97568aaba6 100644 --- a/__tests__/integration/utils/toMatchDOMSnapshot.ts +++ b/__tests__/integration/utils/toMatchDOMSnapshot.ts @@ -9,11 +9,28 @@ export type ToMatchDOMSnapshotOptions = { fileFormat?: string; keepSVGElementId?: boolean; }; -const formatSVG = (svg: string, keepSVGElementId: boolean) => { +function formatSVG(svg: string, keepSVGElementId: boolean) { return keepSVGElementId ? svg - : svg.replace(/id="[^"]*"/g, '').replace(/clip-path="[^"]*"/g, ''); -}; + : svg + .replace(/id="[^"]*"/g, '') + .replace(/clip-path="[^"]*"/g, '') + .replace(/ string; pass: boolean }> { - const { selector, fileFormat = 'svg', keepSVGElementId = true } = options; + const { selector, fileFormat = 'svg', keepSVGElementId = false } = options; const namePath = path.join(dir, name); const actualPath = path.join(dir, `${name}-actual.${fileFormat}`); const expectedPath = path.join(dir, `${name}.${fileFormat}`); @@ -34,12 +51,9 @@ export async function toMatchDOMSnapshot( if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true }); actual = dom - ? formatSVG( - format(xmlserializer.serializeToString(dom), { - parser: 'babel', - }), - keepSVGElementId, - ) + ? format(xmlserializer.serializeToString(dom), { + parser: 'babel', + }) : 'null'; // Remove ';' after format by babel. @@ -60,7 +74,7 @@ export async function toMatchDOMSnapshot( encoding: 'utf8', flag: 'r', }); - if (actual === expected) { + if (isSVGEqual(actual, expected, keepSVGElementId)) { if (fs.existsSync(actualPath)) fs.unlinkSync(actualPath); return { message: () => `match ${namePath}`, diff --git a/jest.config.js b/jest.config.js index fa281ba34d..eee1a6b78d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -21,5 +21,5 @@ module.exports = { collectCoverage: false, testRegex: '(/__tests__/.*\\.(test|spec))\\.(ts|tsx|js)$', // Transform esm to cjs. - transformIgnorePatterns: [`/node_modules/(?!(?:.pnpm/)?(${esm}))`], + transformIgnorePatterns: [`/node_modules/(?!(?:.pnpm/)?(${esm}))`] }; diff --git a/package.json b/package.json index 4e6c8ea70a..fa605614a7 100644 --- a/package.json +++ b/package.json @@ -41,9 +41,9 @@ "size": "limit-size", "lint": "eslint ./src ./__tests__ && prettier ./src ./__tests__ --check ", "fix": "eslint ./src ./__tests__ --fix && prettier ./src ./__tests__ --write ", - "test": "cross-env TZ=Asia/Shanghai && jest __tests__", - "test:unit": "cross-env TZ=Asia/Shanghai && jest __tests__/unit/", - "test:integration": "cross-env TZ=Asia/Shanghai && jest __tests__/integration/", + "test": "cross-env TZ=Asia/Shanghai jest __tests__", + "test:unit": "cross-env TZ=Asia/Shanghai jest __tests__/unit/", + "test:integration": "cross-env TZ=Asia/Shanghai jest __tests__/integration/", "preview": "vite preview", "build:umd": "rimraf ./dist && node node_modules/rollup/dist/bin/rollup -c && npm run size", "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib", @@ -115,7 +115,6 @@ "@types/diff": "^5.2.3", "@types/jest": "^26.0.24", "@types/pixelmatch": "^5.2.6", - "@types/pngjs": "^6.0.5", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", "conventional-changelog-cli": "^2.2.2", @@ -137,9 +136,7 @@ "lint-staged": "^10.5.4", "npm-run-all": "^4.1.5", "pixelmatch": "5.3.0", - "pngjs": "^6.0.0", "prettier": "^2.8.8", - "reflect-metadata": "^0.1.14", "rimraf": "^3.0.2", "rollup": "^2.79.2", "rollup-plugin-polyfill-node": "^0.8.0", @@ -161,17 +158,17 @@ "limit-size": [ { "path": "dist/g2.min.js", - "limit": "285 Kb", + "limit": "290 Kb", "gzip": true }, { "path": "dist/g2.min.js", - "limit": "950 Kb", + "limit": "970 Kb", "gzip": false }, { "path": "dist/g2.lite.min.js", - "limit": "250 Kb", + "limit": "260 Kb", "gzip": true } ], diff --git a/src/label-transform/contrastReverse.ts b/src/label-transform/contrastReverse.ts index 9b6b88babe..828cf66870 100644 --- a/src/label-transform/contrastReverse.ts +++ b/src/label-transform/contrastReverse.ts @@ -25,6 +25,7 @@ function getL(r: number, g: number, b: number) { * @param background */ function contrast(foreground, background): number { + if (!foreground || !background || foreground === background) return 1; const { r, g, b } = foreground; const { r: rb, g: gb, b: bb } = background; const L1 = getL(r, g, b); diff --git a/src/runtime/render.ts b/src/runtime/render.ts index 671f39a451..825f536767 100644 --- a/src/runtime/render.ts +++ b/src/runtime/render.ts @@ -105,9 +105,12 @@ export function render( } // Wait for the next tick. + // FIXME: Use `rendered?` event instead of `requestAnimationFrame`. canvas.requestAnimationFrame(() => { - emitter.emit(ChartEvent.AFTER_RENDER); - resolve?.(); + canvas.requestAnimationFrame(() => { + emitter.emit(ChartEvent.AFTER_RENDER); + resolve?.(); + }); }); }) .catch((e) => {