You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/05/17 08:02:19 UTC
[echarts] 01/01: fix(option): check the missing component before
merge theme
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch fix-component-missing-error
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 19b8b48d02c9d33a7183e7d4333c33c34f094f6c
Author: pissang <bm...@gmail.com>
AuthorDate: Mon May 17 16:01:29 2021 +0800
fix(option): check the missing component before merge theme
Fix #14844
---
src/model/Global.ts | 30 +++++++++++++++++++----------
test/ut/spec/model/componentMissing.test.ts | 28 ++++++++++++++++++++-------
2 files changed, 41 insertions(+), 17 deletions(-)
diff --git a/src/model/Global.ts b/src/model/Global.ts
index 5a35ff3..94cb256 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -137,6 +137,22 @@ const BUILTIN_CHARTS_MAP = {
const componetsMissingLogPrinted: Record<string, boolean> = {};
+function checkMissingComponents(option: ECUnitOption) {
+ each(option, function (componentOption, mainType: ComponentMainType) {
+ if (!ComponentModel.hasClass(mainType)) {
+ if (__DEV__) {
+ const componentImportName = BUITIN_COMPONENTS_MAP[mainType as keyof typeof BUITIN_COMPONENTS_MAP];
+ if (componentImportName && !componetsMissingLogPrinted[componentImportName]) {
+ error(`Component ${mainType} is used but not imported.
+import { ${componentImportName} } from 'echarts/components';
+echarts.use([${componentImportName}]);`);
+ componetsMissingLogPrinted[componentImportName] = true;
+ }
+ }
+ }
+ });
+}
+
class GlobalModel extends Model<ECUnitOption> {
// @readonly
option: ECUnitOption;
@@ -238,6 +254,9 @@ class GlobalModel extends Model<ECUnitOption> {
if (!type || type === 'recreate') {
const baseOption = optionManager.mountOption(type === 'recreate');
+ if (__DEV__) {
+ checkMissingComponents(baseOption);
+ }
if (!this.option || type === 'recreate') {
initBase(this, baseOption);
@@ -308,16 +327,6 @@ class GlobalModel extends Model<ECUnitOption> {
}
if (!ComponentModel.hasClass(mainType)) {
- if (__DEV__) {
- const componentImportName = BUITIN_COMPONENTS_MAP[mainType as keyof typeof BUITIN_COMPONENTS_MAP];
- if (componentImportName && !componetsMissingLogPrinted[componentImportName]) {
- error(`Component ${mainType} is used but not imported.
-import { ${componentImportName} } from 'echarts/components';
-echarts.use([${componentImportName}]);`);
- componetsMissingLogPrinted[componentImportName] = true;
- }
- }
-
// globalSettingTask.dirty();
option[mainType] = option[mainType] == null
? clone(componentOption)
@@ -990,6 +999,7 @@ function mergeTheme(option: ECUnitOption, theme: ThemeOption): void {
if (name === 'colorLayer' && notMergeColorLayer) {
return;
}
+
// If it is component model mainType, the model handles that merge later.
// otherwise, merge them here.
if (!ComponentModel.hasClass(name)) {
diff --git a/test/ut/spec/model/componentMissing.test.ts b/test/ut/spec/model/componentMissing.test.ts
index a386e8e..67e1932 100644
--- a/test/ut/spec/model/componentMissing.test.ts
+++ b/test/ut/spec/model/componentMissing.test.ts
@@ -32,7 +32,7 @@ use([PieChart, TitleComponent, CanvasRenderer]);
import { EChartsOption } from '../../../../src/export/option';
-function createChart(): EChartsType {
+function createChart(theme?: object): EChartsType {
const el = document.createElement('div');
Object.defineProperty(el, 'clientWidth', {
get() {
@@ -44,7 +44,7 @@ function createChart(): EChartsType {
return 400;
}
});
- const chart = init(el);
+ const chart = init(el, theme);
return chart;
};
@@ -61,11 +61,15 @@ echarts.use([${seriesImportName}]);`;
}
+// !!!!IMPORTANTE NOTE:
+// DO NOT test on the same component twice.
+// Because error message will be cached. It will not report on the same component twice.
describe('model_componentMissing', function () {
+ const oldConsoleErr = console.error;
+
it('Should report grid component missing error', function () {
const chart = createChart();
- const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
xAxis: {},
@@ -81,7 +85,6 @@ describe('model_componentMissing', function () {
it('Should report dataZoom component missing error', function () {
const chart = createChart();
- const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
dataZoom: {}
@@ -95,7 +98,6 @@ describe('model_componentMissing', function () {
it('Should not report title component missing error', function () {
const chart = createChart();
- const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
title: {},
@@ -108,7 +110,6 @@ describe('model_componentMissing', function () {
it('Should report funnel series missing error', function () {
const chart = createChart();
- const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
series: [{
@@ -124,7 +125,6 @@ describe('model_componentMissing', function () {
it('Should not report pie series missing error', function () {
const chart = createChart();
- const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
series: [{
@@ -132,6 +132,20 @@ describe('model_componentMissing', function () {
}]
});
expect(console.error).not.toBeCalled();
+ console.error = oldConsoleErr;
+ });
+
+
+ it('Should not report visualMap component missing error when using theme', function () {
+ const chart = createChart({
+ visualMap: {
+ borderColor: '#71708A'
+ }
+ });
+
+ console.error = jest.fn();
+ chart.setOption<EChartsOption>({});
+ expect(console.error).not.toBeCalled();
console.error = oldConsoleErr;
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org