Permalink
Browse files

fix: let 'interval-select' interaction work for mixed charts. Closed #…

  • Loading branch information...
simaQ committed Oct 8, 2018
1 parent 9e75533 commit b80aa3ff31d157346bf98783c9bbd99b169ccaef
Showing with 95 additions and 14 deletions.
  1. +22 −14 src/interaction/interval-select.js
  2. +73 −0 test/bug/issue-355-spec.js
@@ -41,6 +41,20 @@ class IntervalSelect extends Interaction {
}
}

_getIntervalShapes() {
let children = [];
const chart = this.chart;
const geoms = chart.get('geoms');
geoms.forEach(geom => {
if (geom.get('type') === 'interval') { // only works for Interval geometry type
const container = geom.get('container');
children = children.concat(container.get('children'));
}
});

return children;
}

_resetShape(shape) {
const originAttrs = shape.get('_originAttrs');
if (originAttrs) {
@@ -60,14 +74,12 @@ class IntervalSelect extends Interaction {
}

_selectShapesByData(data) {
const chart = this.chart;
const geom = chart.get('geoms')[0];
const container = geom.get('container');
const children = container.get('children');
const children = this._getIntervalShapes();

let selectedShape = null;
const unSelectedShapes = [];
Util.each(children, child => {
if (child.get('isShape') && (child.get('className') === geom.get('type'))) { // get geometry's shape
if (child.get('isShape') && (child.get('className') === 'interval')) { // get geometry's shape
const shapeData = child.get('origin')._origin;
if (Util.isObjectValueEqual(shapeData, data)) {
selectedShape = child;
@@ -109,8 +121,8 @@ class IntervalSelect extends Interaction {
if (this.selectedAxisShape) {
this._resetShape(this.selectedAxisShape);
}
const geom = chart.get('geoms')[0];
const xScale = geom.getXScale();

const xScale = chart.getXScale();
const origin = selectedShape.get('origin')._origin;
const { frontPlot, backPlot } = chart.get('axisController');

@@ -135,11 +147,8 @@ class IntervalSelect extends Interaction {
if (!self.selectedShape) {
return;
}
const chart = self.chart;
const geom = chart.get('geoms')[0];
const container = geom.get('container');
const children = container.get('children');

const children = self._getIntervalShapes();
Util.each(children, child => {
self._resetShape(child);
child.set('_selected', false);
@@ -162,9 +171,8 @@ class IntervalSelect extends Interaction {
const { x, y } = Util.createEvent(ev, chart);

const mode = this.mode;
const geom = chart.get('geoms')[0];
const container = geom.get('container');
const children = container.get('children');
const children = this._getIntervalShapes();

let selectedShape;
let unSelectedShapes = [];
if (mode === 'shape') {
@@ -0,0 +1,73 @@
const expect = require('chai').expect;
const F2 = require('../../src/core');
require('../../src/geom/line');
require('../../src/geom/interval');
require('../../src/interaction/interval-select');


const canvas = document.createElement('canvas');
canvas.width = 375;
canvas.height = 260;
canvas.id = 'issue355';
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
document.body.appendChild(canvas);

describe('Issue 355', () => {
it('Issue 355', () => {
const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 }
];
const chart = new F2.Chart({
id: 'issue355',
pixelRatio: window.devicePixelRatio
});

chart.source(data, {
sales: {
tickCount: 5
}
});

chart.line().position('year*sales').color('black');
chart.interval().position('year*sales');
chart.render();

// 配置柱状图点击交互
chart.interaction('interval-select', {
mode: 'range',
defaultSelected: {
year: '1962 年',
sales: 38
}
});

const interaction = chart._interactions['interval-select'];
const { selectedAxisShape, selectedShape } = interaction;

expect(selectedAxisShape.attr('text')).to.equal('1962 年');
expect(selectedShape.get('origin')._origin.year).to.equal('1962 年');

const eventObj = {
type: 'tap',
center: {
x: 179,
y: 141
}
};
interaction.start(eventObj);
expect(eventObj.selected).to.be.true;
expect(eventObj.data).to.eql({ year: '1957 年', sales: 145 });

chart.destroy();
document.body.removeChild(canvas);
});
});

0 comments on commit b80aa3f

Please sign in to comment.