289 lines
11 KiB
TypeScript
Generated
289 lines
11 KiB
TypeScript
Generated
|
|
/*
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
* or more contributor license agreements. See the NOTICE file
|
|
* distributed with this work for additional information
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
* to you under the Apache License, Version 2.0 (the
|
|
* "License"); you may not use this file except in compliance
|
|
* with the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing,
|
|
* software distributed under the License is distributed on an
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
* KIND, either express or implied. See the License for the
|
|
* specific language governing permissions and limitations
|
|
* under the License.
|
|
*/
|
|
|
|
import { createChart, getECModel } from '../../../core/utHelper';
|
|
import { EChartsType } from '../../../../../src/echarts';
|
|
import { EChartsOption } from '../../../../../src/export/option';
|
|
import { ContinousVisualMapOption } from '../../../../../src/component/visualMap/ContinuousModel';
|
|
import { PiecewiseVisualMapOption } from '../../../../../src/component/visualMap/PiecewiseModel';
|
|
import VisualMapModel from '../../../../../src/component/visualMap/VisualMapModel';
|
|
|
|
|
|
describe('vsiaulMap_setOption', function () {
|
|
let chart: EChartsType;
|
|
beforeEach(function () {
|
|
chart = createChart();
|
|
});
|
|
|
|
afterEach(function () {
|
|
chart.dispose();
|
|
});
|
|
|
|
it('defaultTargetController', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: {
|
|
inRange: {
|
|
color: ['red', 'blue', 'yellow']
|
|
}
|
|
}
|
|
});
|
|
|
|
const option = chart.getOption();
|
|
const visualMapOptionGotten = option.visualMap as (ContinousVisualMapOption | PiecewiseVisualMapOption)[];
|
|
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(visualMapOptionGotten[0].inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
expect(visualMapOptionGotten[0].target.inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
expect(visualMapOptionGotten[0].controller.inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
done();
|
|
});
|
|
|
|
it('ec2ColorCompatiable', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: {
|
|
color: ['yellow', 'blue', 'red']
|
|
}
|
|
});
|
|
|
|
const option = chart.getOption();
|
|
const visualMapOptionGotten = option.visualMap as (ContinousVisualMapOption | PiecewiseVisualMapOption)[];
|
|
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(visualMapOptionGotten[0].color).toEqual(['yellow', 'blue', 'red']);
|
|
expect(visualMapOptionGotten[0].target.inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
expect(visualMapOptionGotten[0].controller.inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
done();
|
|
});
|
|
|
|
it('remainVisualProp', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: {
|
|
inRange: {
|
|
color: ['red', 'blue', 'yellow']
|
|
}
|
|
}
|
|
});
|
|
|
|
chart.setOption({
|
|
visualMap: {}
|
|
});
|
|
|
|
expectTheSame(chart.getOption() as EChartsOption);
|
|
|
|
chart.setOption({
|
|
series: [{data: [[44, 55]]}] // visualMap depends series
|
|
});
|
|
|
|
expectTheSame(chart.getOption() as EChartsOption);
|
|
|
|
function expectTheSame(option: EChartsOption) {
|
|
const visualMapOptionGotten = option.visualMap as (ContinousVisualMapOption | PiecewiseVisualMapOption)[];
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(visualMapOptionGotten[0].inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
expect(visualMapOptionGotten[0].target.inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
expect(visualMapOptionGotten[0].controller.inRange.color).toEqual(['red', 'blue', 'yellow']);
|
|
done();
|
|
}
|
|
});
|
|
|
|
it('eraseAllVisualProps_notRelative', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: {
|
|
inRange: {
|
|
color: ['red', 'blue', 'yellow'],
|
|
symbolSize: [0.3, 0.5]
|
|
}
|
|
}
|
|
});
|
|
|
|
// const option = chart.getOption();
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
inRange: {
|
|
symbolSize: [0.4, 0.6]
|
|
}
|
|
}
|
|
});
|
|
|
|
const option = chart.getOption();
|
|
const visualMapOptionGotten = option.visualMap as (ContinousVisualMapOption | PiecewiseVisualMapOption)[];
|
|
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(visualMapOptionGotten[0].inRange.hasOwnProperty('color')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].target.inRange.hasOwnProperty('color')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].controller.inRange.hasOwnProperty('color')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].inRange.symbolSize).toEqual([0.4, 0.6]);
|
|
expect(visualMapOptionGotten[0].target.inRange.symbolSize).toEqual([0.4, 0.6]);
|
|
done();
|
|
// Do not compare controller.inRange.symbolSize, which will be amplified to controller size.
|
|
// expect(option.visualMap[0].controller.inRange.symbolSize).toEqual([?, ?]);
|
|
});
|
|
|
|
it('eraseAllVisualProps_reletive', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: {
|
|
inRange: {
|
|
color: ['red', 'blue', 'yellow'],
|
|
colorAlpha: [0.3, 0.5]
|
|
}
|
|
}
|
|
});
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
inRange: {
|
|
colorAlpha: [0.4, 0.6]
|
|
}
|
|
}
|
|
});
|
|
|
|
let visualMapOptionGotten: (ContinousVisualMapOption | PiecewiseVisualMapOption)[];
|
|
visualMapOptionGotten = chart.getOption().visualMap as typeof visualMapOptionGotten;
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(visualMapOptionGotten[0].inRange.hasOwnProperty('color')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].target.inRange.hasOwnProperty('color')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].controller.inRange.hasOwnProperty('color')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].inRange.colorAlpha).toEqual([0.4, 0.6]);
|
|
expect(visualMapOptionGotten[0].target.inRange.colorAlpha).toEqual([0.4, 0.6]);
|
|
expect(visualMapOptionGotten[0].controller.inRange.colorAlpha).toEqual([0.4, 0.6]);
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
color: ['red', 'blue', 'green']
|
|
}
|
|
});
|
|
|
|
visualMapOptionGotten = chart.getOption().visualMap as typeof visualMapOptionGotten;
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(visualMapOptionGotten[0].target.inRange.hasOwnProperty('colorAlpha')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].controller.inRange.hasOwnProperty('colorAlpha')).toEqual(false);
|
|
expect(visualMapOptionGotten[0].target.inRange.color).toEqual(['green', 'blue', 'red']);
|
|
expect(visualMapOptionGotten[0].controller.inRange.color).toEqual(['green', 'blue', 'red']);
|
|
|
|
chart.setOption({
|
|
visualMap: {
|
|
controller: {
|
|
outOfRange: {
|
|
symbol: ['diamond']
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
visualMapOptionGotten = chart.getOption().visualMap as typeof visualMapOptionGotten;
|
|
|
|
expect(visualMapOptionGotten.length).toEqual(1);
|
|
expect(!!visualMapOptionGotten[0].target.inRange).toEqual(true);
|
|
let onlyColor = true;
|
|
for (const i in visualMapOptionGotten[0].target.inRange) {
|
|
if (i !== 'color') {
|
|
onlyColor = false;
|
|
}
|
|
}
|
|
const inRangeColor = visualMapOptionGotten[0].target.inRange.color;
|
|
expect(onlyColor).toEqual(true);
|
|
expect(inRangeColor).toEqual(['#f6efa6', '#d88273', '#bf444c']);
|
|
expect(visualMapOptionGotten[0].controller.outOfRange.symbol).toEqual(['diamond']);
|
|
done();
|
|
});
|
|
|
|
it('setOpacityWhenUseColor', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: {
|
|
inRange: {
|
|
color: ['red', 'blue', 'yellow']
|
|
}
|
|
}
|
|
});
|
|
|
|
const visualMapOptionGotten = chart.getOption().visualMap as (
|
|
ContinousVisualMapOption | PiecewiseVisualMapOption
|
|
)[];
|
|
expect(!!visualMapOptionGotten[0].target.outOfRange.opacity).toEqual(true);
|
|
done();
|
|
});
|
|
|
|
it('normalizeVisualRange', function (done) {
|
|
chart.setOption({
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{type: 'scatter', data: [[12, 223]]}],
|
|
visualMap: [
|
|
{type: 'continuous', inRange: {color: 'red'}},
|
|
{type: 'continuous', inRange: {opacity: 0.4}},
|
|
{type: 'piecewise', inRange: {color: 'red'}},
|
|
{type: 'piecewise', inRange: {opacity: 0.4}},
|
|
{type: 'piecewise', inRange: {symbol: 'diamond'}},
|
|
{type: 'piecewise', inRange: {color: 'red'}, categories: ['a', 'b']},
|
|
{type: 'piecewise', inRange: {color: {a: 'red'}}, categories: ['a', 'b']},
|
|
{type: 'piecewise', inRange: {opacity: 0.4}, categories: ['a', 'b']}
|
|
]
|
|
});
|
|
|
|
const ecModel = getECModel(chart);
|
|
|
|
function getVisual(idx: number, visualType: 'color' | 'opacity' | 'symbol') {
|
|
return (ecModel.getComponent('visualMap', idx) as VisualMapModel)
|
|
.targetVisuals.inRange[visualType].option.visual;
|
|
}
|
|
|
|
function makeCategoryVisual(...args: unknown[]) {
|
|
const CATEGORY_DEFAULT_VISUAL_INDEX = -1;
|
|
const arr = [];
|
|
if (args[0] != null) {
|
|
arr[CATEGORY_DEFAULT_VISUAL_INDEX] = args[0];
|
|
}
|
|
for (let i = 1; i < args.length; i++) {
|
|
arr.push(args[i]);
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
expect(getVisual(0, 'color')).toEqual(['red']);
|
|
expect(getVisual(1, 'opacity')).toEqual([0.4, 0.4]);
|
|
expect(getVisual(2, 'color')).toEqual(['red']);
|
|
expect(getVisual(3, 'opacity')).toEqual([0.4, 0.4]);
|
|
expect(getVisual(4, 'symbol')).toEqual(['diamond']);
|
|
expect(getVisual(5, 'color')).toEqual(makeCategoryVisual('red'));
|
|
expect(getVisual(6, 'color')).toEqual(makeCategoryVisual(null, 'red'));
|
|
expect(getVisual(7, 'opacity')).toEqual(makeCategoryVisual(0.4));
|
|
done();
|
|
});
|
|
|
|
}); |