442 lines
16 KiB
TypeScript
Generated
442 lines
16 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 { EChartsType } from '@/src/echarts';
|
|
import SeriesModel from '@/src/model/Series';
|
|
import { ParsedValue } from '@/src/util/types';
|
|
import { LegendOption } from '@/src/component/legend/LegendModel';
|
|
import TimelineModel from '@/src/component/timeline/TimelineModel';
|
|
import { createChart, getECModel } from '../../core/utHelper';
|
|
import { EChartsOption } from '@/src/export/option';
|
|
|
|
|
|
describe('timelineMediaOptions', function () {
|
|
|
|
function getData0(chart: EChartsType, seriesIndex: number): ParsedValue {
|
|
return getSeries(chart, seriesIndex).getData().get('y', 0);
|
|
}
|
|
function getSeries(chart: EChartsType, seriesIndex: number): SeriesModel {
|
|
return getECModel(chart).getComponent('series', seriesIndex) as SeriesModel;
|
|
}
|
|
function getLegendOption(chart: EChartsType): LegendOption {
|
|
return getECModel(chart).getComponent('legend', 0).option as LegendOption;
|
|
}
|
|
function getTimelineComponent(chart: EChartsType): TimelineModel {
|
|
return getECModel(chart).getComponent('timeline', 0) as TimelineModel;
|
|
}
|
|
|
|
let chart: EChartsType;
|
|
beforeEach(function () {
|
|
chart = createChart({
|
|
width: 10,
|
|
height: 10
|
|
});
|
|
});
|
|
|
|
afterEach(function () {
|
|
chart.dispose();
|
|
});
|
|
|
|
|
|
|
|
|
|
describe('parse_timeline_media_option', function () {
|
|
|
|
it('parse_media_has_baseOption_has_default', function () {
|
|
const option: EChartsOption = {
|
|
baseOption: {
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { left: 10 },
|
|
series: { name: 'a', type: 'line', data: [11] }
|
|
},
|
|
legend: { left: 999, right: 123 }, // Illegal, should be ignored
|
|
media: [{
|
|
query: { maxWidth: 670, minWidth: 550 },
|
|
option: {
|
|
legend: { left: 50 }
|
|
}
|
|
}, {
|
|
option: {
|
|
legend: { left: 100 }
|
|
}
|
|
}]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getLegendOption(chart).left).toEqual(100);
|
|
expect(getLegendOption(chart).right).not.toEqual(123);
|
|
|
|
chart.resize({ width: 600 });
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
});
|
|
|
|
it('parse_media_no_baseOption_has_default', function () {
|
|
const option: EChartsOption = {
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { left: 10 },
|
|
series: { name: 'a', type: 'line', data: [11] },
|
|
media: [{
|
|
query: { maxWidth: 670, minWidth: 550 },
|
|
option: {
|
|
legend: { left: 50 }
|
|
}
|
|
}, {
|
|
option: {
|
|
legend: { left: 100 }
|
|
}
|
|
}]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getLegendOption(chart).left).toEqual(100);
|
|
|
|
chart.resize({ width: 600 });
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
});
|
|
|
|
it('parse_media_no_baseOption_no_default', function () {
|
|
const option: EChartsOption = {
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { left: 10 },
|
|
series: { name: 'a', type: 'line', data: [11] },
|
|
media: [{
|
|
query: { maxWidth: 670, minWidth: 550 },
|
|
option: {
|
|
legend: { left: 50 }
|
|
}
|
|
}]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getLegendOption(chart).left).toEqual(10);
|
|
|
|
chart.resize({ width: 600 });
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
});
|
|
|
|
it('parse_timeline_media_has_baseOption', function () {
|
|
const option: EChartsOption = {
|
|
baseOption: {
|
|
timeline: { axisType: 'category' },
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { left: 10 },
|
|
series: { name: 'a', type: 'line', data: [11] }
|
|
},
|
|
legend: { left: 999, right: 123 }, // Illegal, should be ignored
|
|
media: [{
|
|
query: { maxWidth: 670, minWidth: 550 },
|
|
option: {
|
|
legend: { left: 50 }
|
|
}
|
|
}, {
|
|
option: {
|
|
legend: { left: 100 }
|
|
}
|
|
}],
|
|
options: [
|
|
{ series: { type: 'line', data: [88] } },
|
|
{ series: { type: 'line', data: [99] } }
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getLegendOption(chart).left).toEqual(100);
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).right).not.toEqual(123);
|
|
expect(getTimelineComponent(chart) != null).toEqual(true);
|
|
|
|
chart.resize({ width: 600 });
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
|
|
chart.setOption<EChartsOption>({ timeline: { currentIndex: 1 } });
|
|
expect(getData0(chart, 0)).toEqual(99);
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
});
|
|
|
|
it('parse_timeline_media_no_baseOption', function () {
|
|
const option: EChartsOption = {
|
|
timeline: { axisType: 'category' },
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { left: 10 },
|
|
series: { name: 'a', type: 'line', data: [11] },
|
|
media: [{
|
|
query: { maxWidth: 670, minWidth: 550 },
|
|
option: {
|
|
legend: { left: 50 }
|
|
}
|
|
}, {
|
|
option: {
|
|
legend: { left: 100 }
|
|
}
|
|
}],
|
|
options: [
|
|
{ series: { type: 'line', data: [88] } },
|
|
{ series: { type: 'line', data: [99] } }
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getLegendOption(chart).left).toEqual(100);
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getTimelineComponent(chart) != null).toEqual(true);
|
|
|
|
chart.resize({ width: 600 });
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
|
|
chart.setOption<EChartsOption>({ timeline: { currentIndex: 1 } });
|
|
expect(getData0(chart, 0)).toEqual(99);
|
|
expect(getLegendOption(chart).left).toEqual(50);
|
|
});
|
|
|
|
it('parse_timeline_has_baseOption', function () {
|
|
const option: EChartsOption = {
|
|
baseOption: {
|
|
timeline: { axisType: 'category' },
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { },
|
|
series: { name: 'a', type: 'line', data: [11] }
|
|
},
|
|
legend: { right: 123 }, // Illegal, should be ignored
|
|
options: [
|
|
{ series: { type: 'line', data: [88] } },
|
|
{ series: { type: 'line', data: [99] } }
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).right).not.toEqual(123);
|
|
expect(getTimelineComponent(chart) != null).toEqual(true);
|
|
|
|
chart.setOption<EChartsOption>({ timeline: { currentIndex: 1 } });
|
|
expect(getData0(chart, 0)).toEqual(99);
|
|
});
|
|
|
|
it('parse_timeline_has_baseOption_compat', function () {
|
|
const option: EChartsOption = {
|
|
timeline: { axisType: 'category' },
|
|
baseOption: {
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: { },
|
|
series: { name: 'a', type: 'line', data: [11] }
|
|
},
|
|
legend: { right: 123 }, // Illegal, should be ignored
|
|
options: [
|
|
{ series: { type: 'line', data: [88] } },
|
|
{ series: { type: 'line', data: [99] } }
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).right).not.toEqual(123);
|
|
expect(getTimelineComponent(chart) != null).toEqual(true);
|
|
|
|
chart.setOption<EChartsOption>({ timeline: { currentIndex: 1 } });
|
|
expect(getData0(chart, 0)).toEqual(99);
|
|
});
|
|
|
|
it('parse_timeline_has_baseOption_compat', function () {
|
|
const option: EChartsOption = {
|
|
timeline: { axisType: 'category' },
|
|
baseOption: {
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: {},
|
|
series: { name: 'a', type: 'line', data: [11] }
|
|
},
|
|
legend: { right: 123 }, // Illegal, should be ignored
|
|
options: [
|
|
{ series: { type: 'line', data: [88] } },
|
|
{ series: { type: 'line', data: [99] } }
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).right).not.toEqual(123);
|
|
expect(getTimelineComponent(chart) != null).toEqual(true);
|
|
|
|
chart.setOption<EChartsOption>({ timeline: { currentIndex: 1 } });
|
|
expect(getData0(chart, 0)).toEqual(99);
|
|
});
|
|
|
|
it('parse_timeline_no_baseOption', function () {
|
|
const option: EChartsOption = {
|
|
timeline: { axisType: 'category' },
|
|
xAxis: { data: ['a'] },
|
|
yAxis: {},
|
|
legend: {},
|
|
series: { name: 'a', type: 'line', data: [11] },
|
|
options: [
|
|
{ series: { type: 'line', data: [88] } },
|
|
{ series: { type: 'line', data: [99] } }
|
|
]
|
|
};
|
|
chart.setOption(option);
|
|
expect(getData0(chart, 0)).toEqual(88);
|
|
expect(getLegendOption(chart).right).not.toEqual(123);
|
|
expect(getTimelineComponent(chart) != null).toEqual(true);
|
|
|
|
chart.setOption<EChartsOption>({ timeline: { currentIndex: 1 } });
|
|
expect(getData0(chart, 0)).toEqual(99);
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
describe('timeline_onceMore', function () {
|
|
|
|
it('timeline_setOptionOnceMore_baseOption', function () {
|
|
const option: EChartsOption = {
|
|
baseOption: {
|
|
timeline: {
|
|
axisType: 'category',
|
|
autoPlay: false,
|
|
playInterval: 1000
|
|
},
|
|
xAxis: {data: ['a']},
|
|
yAxis: {}
|
|
},
|
|
options: [{
|
|
series: [
|
|
{ type: 'line', data: [11] },
|
|
{ type: 'line', data: [22] }
|
|
]
|
|
}, {
|
|
series: [
|
|
{ type: 'line', data: [111] },
|
|
{ type: 'line', data: [222] }
|
|
]
|
|
}]
|
|
};
|
|
chart.setOption(option);
|
|
|
|
expect(getData0(chart, 0)).toEqual(11);
|
|
expect(getData0(chart, 1)).toEqual(22);
|
|
|
|
chart.setOption({
|
|
xAxis: {data: ['b']}
|
|
});
|
|
|
|
expect(getData0(chart, 0)).toEqual(11);
|
|
expect(getData0(chart, 1)).toEqual(22);
|
|
|
|
chart.setOption<EChartsOption>({
|
|
xAxis: {data: ['c']},
|
|
timeline: {
|
|
currentIndex: 1
|
|
}
|
|
});
|
|
|
|
expect(getData0(chart, 0)).toEqual(111);
|
|
expect(getData0(chart, 1)).toEqual(222);
|
|
});
|
|
|
|
|
|
|
|
it('timeline_setOptionOnceMore_substitudeTimelineOptions', function () {
|
|
const option: EChartsOption = {
|
|
baseOption: {
|
|
timeline: {
|
|
axisType: 'category',
|
|
autoPlay: false,
|
|
playInterval: 1000,
|
|
currentIndex: 2
|
|
},
|
|
xAxis: {data: ['a']},
|
|
yAxis: {}
|
|
},
|
|
options: [{
|
|
series: [
|
|
{ type: 'line', data: [11] },
|
|
{ type: 'line', data: [22] }
|
|
]
|
|
}, {
|
|
series: [
|
|
{ type: 'line', data: [111] },
|
|
{ type: 'line', data: [222] }
|
|
]
|
|
}, {
|
|
series: [
|
|
{ type: 'line', data: [1111] },
|
|
{ type: 'line', data: [2222] }
|
|
]
|
|
}]
|
|
};
|
|
chart.setOption(option);
|
|
|
|
let ecModel = getECModel(chart);
|
|
expect(getData0(chart, 0)).toEqual(1111);
|
|
expect(getData0(chart, 1)).toEqual(2222);
|
|
|
|
chart.setOption({
|
|
baseOption: {
|
|
backgroundColor: '#987654',
|
|
xAxis: {data: ['b']}
|
|
},
|
|
options: [{
|
|
series: [
|
|
{ type: 'line', data: [55] },
|
|
{ type: 'line', data: [66] }
|
|
]
|
|
}, {
|
|
series: [
|
|
{ type: 'line', data: [555] },
|
|
{ type: 'line', data: [666] }
|
|
]
|
|
}]
|
|
});
|
|
|
|
ecModel = getECModel(chart);
|
|
const optionGotten = ecModel.getOption();
|
|
expect(optionGotten.backgroundColor).toEqual('#987654');
|
|
expect(getData0(chart, 0)).toEqual(1111);
|
|
expect(getData0(chart, 1)).toEqual(2222);
|
|
|
|
chart.setOption<EChartsOption>({
|
|
timeline: {
|
|
currentIndex: 0
|
|
}
|
|
});
|
|
|
|
expect(getData0(chart, 0)).toEqual(55);
|
|
expect(getData0(chart, 1)).toEqual(66);
|
|
|
|
chart.setOption<EChartsOption>({
|
|
timeline: {
|
|
currentIndex: 2
|
|
}
|
|
});
|
|
|
|
// no 1111 2222 any more, replaced totally by new timeline.
|
|
expect(getData0(chart, 0)).toEqual(55);
|
|
expect(getData0(chart, 1)).toEqual(66);
|
|
});
|
|
});
|
|
|
|
|
|
});
|