/* * 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, registerMap } from '../../../../src/echarts'; import { GeoJSON } from '../../../../src/coord/geo/geoTypes'; import { createChart } from '../../core/utHelper'; describe('api/converter', function () { const DELTA = 1E-3; function pointEquals(p1: number | number[], p2: number | number[]): boolean { if (p1 instanceof Array && p2 instanceof Array) { return Math.abs(p1[0] - p2[0]) < DELTA && Math.abs(p1[1] - p2[1]) < DELTA; } else if (typeof p1 === 'number' && typeof p2 === 'number') { return Math.abs(p1 - p2) < DELTA; } else { throw Error('Iillegal p1 or p2'); } } 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 } } ] }; registerMap('converter_test_geo_1', testGeoJson1); registerMap('converter_test_geo_2', testGeoJson2); let chart: EChartsType; beforeEach(function () { chart = createChart(); }); afterEach(function () { chart.dispose(); }); it('geo', function () { // TODO Needs namespace chart.setOption({ geo: [ { id: 'aa', left: 10, right: 20, top: 30, bottom: 40, map: 'converter_test_geo_1' }, { id: 'bb', left: 10, right: 20, top: 30, bottom: 40, map: 'converter_test_geo_2' } ], series: [ {id: 'k1', type: 'scatter', coordinateSystem: 'geo', geoIndex: 1}, {id: 'k2', type: 'scatter', coordinateSystem: 'geo'}, { // Should not be affected by map. id: 'm1', type: 'map', map: 'converter_test_geo_1', left: 10, right: 20, top: 30, bottom: 40 } ] }); const width = chart.getWidth(); const height = chart.getHeight(); expect(pointEquals(chart.convertToPixel('geo', [5000, 3000]), [width - 20, height - 40])).toEqual(true); expect(pointEquals(chart.convertFromPixel('geo', [width - 20, height - 40]), [5000, 3000])).toEqual(true); expect(pointEquals(chart.convertToPixel({geoIndex: 1}, [500, 800]), [width - 20, 30])).toEqual(true); expect(pointEquals(chart.convertFromPixel({geoIndex: 1}, [width - 20, 30]), [500, 800])).toEqual(true); expect(pointEquals(chart.convertToPixel({geoId: 'bb'}, [200, 300]), [10, height - 40])).toEqual(true); expect(pointEquals(chart.convertFromPixel({geoId: 'bb'}, [10, height - 40]), [200, 300])).toEqual(true); expect(pointEquals(chart.convertToPixel({seriesIndex: 0}, [200, 800]), [10, 30])).toEqual(true); expect(pointEquals(chart.convertFromPixel({seriesIndex: 0}, [10, 30]), [200, 800])).toEqual(true); expect(pointEquals(chart.convertToPixel({seriesId: 'k2'}, [2000, 8000]), [10, 30])).toEqual(true); expect(pointEquals(chart.convertFromPixel({seriesId: 'k2'}, [10, 30]), [2000, 8000])).toEqual(true); }); it('map', function () { chart.setOption({ geo: [ // Should not be affected by geo { id: 'aa', left: 10, right: 20, top: 30, bottom: 40, map: 'converter_test_geo_1' } ], series: [ { id: 'k1', type: 'map', map: 'converter_test_geo_1', left: 10, right: 20, top: 30, bottom: 40 }, { id: 'k2', type: 'map', map: 'converter_test_geo_2', left: 10, right: 20, top: 30, bottom: 40 } ] }); expect(pointEquals(chart.convertToPixel({seriesIndex: 0}, [2000, 8000]), [10, 30])).toEqual(true); expect(pointEquals(chart.convertFromPixel({seriesIndex: 0}, [10, 30]), [2000, 8000])).toEqual(true); expect(pointEquals(chart.convertToPixel({seriesId: 'k2'}, [200, 800]), [10, 30])).toEqual(true); expect(pointEquals(chart.convertFromPixel({seriesId: 'k2'}, [10, 30]), [200, 800])).toEqual(true); }); it('cartesian', function () { chart.setOption({ geo: [ // Should not affect grid converter. { map: 'converter_test_geo_1' } ], 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(); const height = chart.getHeight(); expect( pointEquals(chart.convertToPixel({seriesIndex: 1}, [-500, 6000]), [10, height - 40]) ).toEqual(true); expect( pointEquals(chart.convertFromPixel({seriesIndex: 1}, [10, height - 40]), [-500, 6000]) ).toEqual(true); expect( pointEquals(chart.convertToPixel({seriesId: 'i1'}, [300, 900]), [width - 20, height - 40]) ).toEqual(true); expect( pointEquals(chart.convertFromPixel({seriesId: 'i1'}, [width - 20, height - 40]), [300, 900]) ).toEqual(true); expect( pointEquals(chart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]), [width - 20, height - 40]) ).toEqual(true); expect( pointEquals(chart.convertFromPixel({xAxisIndex: 2, yAxisId: 'y1'}, [width - 20, height - 40]), [300, 900]) ).toEqual(true); expect( pointEquals(chart.convertToPixel({gridId: 'g1'}, [300, 900]), [width - 20, height - 40]) ).toEqual(true); expect( pointEquals(chart.convertFromPixel({gridId: 'g1'}, [width - 20, height - 40]), [300, 900]) ).toEqual(true); expect(pointEquals(chart.convertToPixel({xAxisId: 'x0'}, 3000), width / 2)).toEqual(true); expect(pointEquals(chart.convertFromPixel({xAxisId: 'x0'}, width / 2), 3000)).toEqual(true); expect(pointEquals(chart.convertToPixel({yAxisIndex: 1}, 600), 30)).toEqual(true); expect(pointEquals(chart.convertFromPixel({yAxisIndex: 1}, 30), 600)).toEqual(true); }); it('graph', function () { chart.setOption({ geo: [ // Should not affect graph converter. { map: 'converter_test_geo_1' } ], series: [ { id: 'k1', type: 'graph', left: 10, right: 20, top: 30, bottom: 40, data: [ {x: 1000, y: 2000}, {x: 1000, y: 5000}, {x: 3000, y: 5000}, {x: 3000, y: 2000} ], links: [] }, { id: 'k2', type: 'graph', left: 10, right: 20, top: 30, bottom: 40, data: [ {x: 100, y: 200}, {x: 100, y: 500}, {x: 300, y: 500}, {x: 300, y: 200} ], links: [] } ] }); const width = chart.getWidth(); const height = chart.getHeight(); expect( pointEquals( chart.convertToPixel({seriesIndex: 0}, [2000, 3500]), [10 + (width - 30) / 2, 30 + (height - 70) / 2] ) ).toEqual(true); expect( pointEquals( chart.convertFromPixel({seriesIndex: 0}, [10 + (width - 30) / 2, 30 + (height - 70) / 2]), [2000, 3500] ) ).toEqual(true); expect(pointEquals(chart.convertToPixel({seriesId: 'k2'}, [100, 500]), [10, height - 40])).toEqual(true); expect(pointEquals(chart.convertFromPixel({seriesId: 'k2'}, [10, height - 40]), [100, 500])).toEqual(true); }); });