shop/echarts-master/test/ut/spec/api/containPixel.test.ts
2025-05-03 23:48:15 +08:00

425 lines
13 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, removeChart } from '../../core/utHelper';
import { EChartsType, registerMap } from '../../../../src/echarts';
import { GeoJSON } from '../../../../src/coord/geo/geoTypes';
describe('api/containPixel', function () {
const testGeoJson1: GeoJSON = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
2000,
3000
],
[
5000,
3000
],
[
5000,
8000
],
[
2000,
8000
]
]
]
},
'properties': {
'name': 'Afghanistan',
'childNum': 1
}
}
]
};
const testGeoJson2: GeoJSON = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
200,
300
],
[
500,
300
],
[
500,
800
],
[
200,
800
]
]
]
},
'properties': {
'name': 'Afghanistan',
'childNum': 1
}
}
]
};
let chart: EChartsType;
beforeEach(function () {
chart = createChart({
width: 200,
height: 150
});
});
afterEach(function () {
removeChart(chart);
});
it('geo', function () {
registerMap('test1', testGeoJson1);
registerMap('test2', testGeoJson2);
chart.setOption({
geo: [
{
id: 'aa',
left: 10,
right: '50%',
top: 30,
bottom: 40,
map: 'test1'
},
{
id: 'bb',
layoutCenter: ['50%', 50],
layoutSize: 20,
aspectScale: 1,
map: 'test2'
},
{
id: 'cc',
aspectScale: 1,
left: 0,
width: '50%',
top: 0,
height: '50%',
zoom: 0.5, // test roam
map: 'test1'
}
],
series: [
{id: 'k1', type: 'scatter', coordinateSystem: 'geo', geoIndex: 1},
{id: 'k2', type: 'scatter', coordinateSystem: 'geo'}
]
});
const width = chart.getWidth();
// const height = chart.getWidth();
expect(chart.containPixel('geo', [15, 30])).toEqual(true);
expect(chart.containPixel('geo', [9.5, 30])).toEqual(false);
expect(chart.containPixel({geoIndex: 1}, [width / 2, 50])).toEqual(true);
expect(chart.containPixel({geoIndex: 1}, [10, 20])).toEqual(false);
expect(chart.containPixel({geoId: 'cc'}, [0, 0])).toEqual(false);
});
it('map', function () {
registerMap('test1', testGeoJson1);
registerMap('test2', testGeoJson2);
chart.setOption({
series: [
{
id: 'k1',
type: 'map',
map: 'test1',
left: 10,
right: '50%',
top: 30,
bottom: 40
},
{
id: 'k2',
type: 'map',
map: 'test2',
layoutCenter: ['50%', 50],
layoutSize: 20,
aspectScale: 1
}
]
});
const width = chart.getWidth();
expect(chart.containPixel('series', [15, 30])).toEqual(true);
expect(chart.containPixel('series', [9.5, 30])).toEqual(false);
expect(chart.containPixel({seriesId: 'k2'}, [width / 2, 50])).toEqual(true);
expect(chart.containPixel({seriesId: 1}, [10, 20])).toEqual(false);
});
it('cartesian', function () {
registerMap('test1', testGeoJson1);
chart.setOption({
geo: [ // Should not affect grid converter.
{
map: 'test1'
}
],
grid: [
{
id: 'g0',
left: 10,
right: '50%',
top: 30,
bottom: 40
},
{
id: 'g1',
left: '50%',
right: 20,
top: 30,
bottom: 40
}
],
xAxis: [
{
id: 'x0',
type: 'value',
min: -500,
max: 3000,
gridId: 'g0'
},
{
id: 'x1',
type: 'value',
min: -50,
max: 300,
gridId: 'g0'
},
{
id: 'x2',
type: 'value',
min: -50,
max: 300,
gridId: 'g1'
}
],
yAxis: [
{
id: 'y0',
type: 'value',
min: 6000,
max: 9000,
gridId: 'g0'
},
{
id: 'y1',
type: 'value',
inverse: true, // test inverse
min: 600,
max: 900,
gridId: 'g1'
}
],
series: [
{
id: 'k1',
type: 'scatter',
// left: 0,
// right: 0,
// top: 0,
// bottom: 0,
data: [[1000, 700]]
},
{
id: 'k2',
type: 'scatter',
// left: 0,
// right: 0,
// top: 0,
// bottom: 0,
data: [[100, 800]]
},
{
id: 'j1',
type: 'scatter',
// left: 0,
// right: 0,
// top: 0,
// bottom: 0,
data: [[100, 800]],
xAxisIndex: 1
},
{
id: 'i1',
type: 'scatter',
// left: 0,
// right: 0,
// top: 0,
// bottom: 0,
data: [],
xAxisId: 'x2',
yAxisId: 'y1'
}
]
});
const width = chart.getWidth();
expect(chart.containPixel('grid', [15, 30])).toEqual(true);
expect(chart.containPixel('grid', [9.5, 30])).toEqual(false);
expect(chart.containPixel({gridIndex: 1}, [width / 2, 50])).toEqual(true);
expect(chart.containPixel({gridIndex: 1}, [10, 20])).toEqual(false);
});
// it('pie', function () {
// chart.setOption({
// series: [
// {
// id: 'k1',
// type: 'pie',
// center: [40, '50%'],
// radius: [10, '50%'],
// data: [
// {x: 1000, y: 2000},
// {x: 1000, y: 5000},
// {x: 3000, y: 5000},
// {x: 3000, y: 2000}
// ],
// links: []
// }
// ]
// });
// const height = chart.getHeight();
// expect(chart.containPixel('series', [40, height / 2])).toEqual(false);
// expect(chart.containPixel('series', [40, height / 2 + 10])).toEqual(true);
// expect(chart.containPixel('series', [9.5, 1])).toEqual(false);
// });
// it('pieAndGeo', function () {
// registerMap('test1', testGeoJson1);
// registerMap('test2', testGeoJson2);
// chart.setOption({
// geo: [
// {
// id: 'aa',
// left: 10,
// top: 10,
// width: 10,
// height: 10,
// map: 'test1'
// },
// {
// id: 'bb',
// left: 100,
// top: 10,
// width: 10,
// height: 10,
// map: 'test2'
// }
// ],
// series: [
// {id: 'k1', type: 'scatter', coordinateSystem: 'geo', geoIndex: 1},
// {id: 'k2', type: 'scatter', coordinateSystem: 'geo'},
// {
// id: 'k3',
// type: 'pie',
// center: [40, 100],
// radius: [3, 10],
// data: [
// {x: 1000, y: 2000},
// {x: 1000, y: 5000}
// ],
// links: []
// }
// ]
// });
// expect(chart.containPixel({geoIndex: [0, 1], seriesId: 'k3'}, [15, 15])).toEqual(true);
// expect(chart.containPixel({geoIndex: [0, 1], seriesId: 'k3'}, [15, 25])).toEqual(false);
// expect(chart.containPixel({geoIndex: [0, 1], seriesId: 'k3'}, [105, 15])).toEqual(true);
// expect(chart.containPixel({geoIndex: [0, 1], seriesId: 'k3'}, [105, 25])).toEqual(false);
// expect(chart.containPixel({geoIndex: [0, 1], seriesId: 'k3'}, [45, 100])).toEqual(true);
// expect(chart.containPixel({geoIndex: [0, 1], seriesId: 'k3'}, [55, 100])).toEqual(false);
// });
it('graph', function () {
registerMap('test1', testGeoJson1);
chart.setOption({
geo: [ // Should not affect graph converter.
{
map: 'test1'
}
],
series: [
{
id: 'k1',
type: 'graph',
left: 10,
right: '50%',
top: 30,
bottom: 40,
data: [
{x: 1000, y: 2000},
{x: 1000, y: 5000},
{x: 3000, y: 5000},
{x: 3000, y: 2000}
],
links: []
}
]
});
expect(chart.containPixel('series', [15, 35])).toEqual(true);
expect(chart.containPixel('series', [3, 4])).toEqual(false);
});
});