|
|
|
@ -2,233 +2,28 @@ import CLASS from './class';
|
|
|
|
|
import { c3_chart_internal_fn } from './core'; |
|
|
|
|
|
|
|
|
|
c3_chart_internal_fn.initEventRect = function () { |
|
|
|
|
var $$ = this; |
|
|
|
|
var $$ = this, config = $$.config; |
|
|
|
|
|
|
|
|
|
$$.main.select('.' + CLASS.chart).append("g") |
|
|
|
|
.attr("class", CLASS.eventRects) |
|
|
|
|
.style('fill-opacity', 0); |
|
|
|
|
$$.redrawEventRect(); |
|
|
|
|
}; |
|
|
|
|
c3_chart_internal_fn.redrawEventRect = function () { |
|
|
|
|
var $$ = this, config = $$.config, |
|
|
|
|
eventRect, eventRectEnter, maxDataCountTarget, |
|
|
|
|
isMultipleX = $$.isMultipleX(); |
|
|
|
|
|
|
|
|
|
// rects for mouseover
|
|
|
|
|
var eventRects = $$.main.select('.' + CLASS.eventRects) |
|
|
|
|
.style('cursor', config.zoom_enabled ? config.axis_rotated ? 'ns-resize' : 'ew-resize' : null) |
|
|
|
|
.classed(CLASS.eventRectsMultiple, isMultipleX) |
|
|
|
|
.classed(CLASS.eventRectsSingle, !isMultipleX); |
|
|
|
|
$$.eventRect = $$.main.select('.' + CLASS.eventRects).append('rect') |
|
|
|
|
.attr('class', CLASS.eventRect); |
|
|
|
|
|
|
|
|
|
if (isMultipleX) { |
|
|
|
|
eventRect = eventRects.selectAll('.' + CLASS.eventRect).data([0]); |
|
|
|
|
// enter : only one rect will be added
|
|
|
|
|
eventRectEnter = $$.generateEventRectsForMultipleXs(eventRect.enter()); |
|
|
|
|
// update
|
|
|
|
|
$$.eventRect = eventRectEnter.merge(eventRect); |
|
|
|
|
$$.updateEventRect(); |
|
|
|
|
// exit : not needed because always only one rect exists
|
|
|
|
|
} |
|
|
|
|
// DUPLICATED: this will be removed because it seems to be unable to work with zoom...
|
|
|
|
|
else { |
|
|
|
|
// clear old rects
|
|
|
|
|
eventRects.selectAll('.' + CLASS.eventRect).remove(); |
|
|
|
|
// Set data and update $$.eventRect
|
|
|
|
|
maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets); |
|
|
|
|
eventRect.datum(maxDataCountTarget ? maxDataCountTarget.values : []); |
|
|
|
|
eventRect = eventRects.selectAll('.' + CLASS.eventRect).data(function (d) { return d; }); |
|
|
|
|
// enter
|
|
|
|
|
eventRectEnter = $$.generateEventRectsForSingleX(eventRect.enter()); |
|
|
|
|
// update
|
|
|
|
|
$$.eventRect = eventRectEnter.merge(eventRect); |
|
|
|
|
$$.updateEventRect(); |
|
|
|
|
// exit
|
|
|
|
|
eventRect.exit().remove(); |
|
|
|
|
// event rect handle zoom event as well
|
|
|
|
|
if (config.zoom_enabled && $$.zoom) { |
|
|
|
|
$$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) { |
|
|
|
|
var $$ = this, config = $$.config, |
|
|
|
|
x, y, w, h, rectW, rectX; |
|
|
|
|
|
|
|
|
|
// set update selection if null
|
|
|
|
|
eventRectUpdate = eventRectUpdate || $$.eventRect; |
|
|
|
|
c3_chart_internal_fn.redrawEventRect = function () { |
|
|
|
|
var $$ = this, d3 = $$.d3, config = $$.config, |
|
|
|
|
x, y, w, h; |
|
|
|
|
|
|
|
|
|
if ($$.isMultipleX()) { |
|
|
|
|
// TODO: rotated not supported yet
|
|
|
|
|
x = 0; |
|
|
|
|
y = 0; |
|
|
|
|
w = $$.width; |
|
|
|
|
h = $$.height; |
|
|
|
|
} |
|
|
|
|
// DUPLICATED: this will be removed because it seems to be unable to work with zoom...
|
|
|
|
|
else { |
|
|
|
|
if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) { |
|
|
|
|
|
|
|
|
|
// update index for x that is used by prevX and nextX
|
|
|
|
|
$$.updateXs(); |
|
|
|
|
|
|
|
|
|
rectW = function (d) { |
|
|
|
|
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index); |
|
|
|
|
|
|
|
|
|
// if there this is a single data point make the eventRect full width (or height)
|
|
|
|
|
if (prevX === null && nextX === null) { |
|
|
|
|
return config.axis_rotated ? $$.height : $$.width; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (prevX === null) { prevX = $$.x.domain()[0]; } |
|
|
|
|
if (nextX === null) { nextX = $$.x.domain()[1]; } |
|
|
|
|
|
|
|
|
|
return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2); |
|
|
|
|
}; |
|
|
|
|
rectX = function (d) { |
|
|
|
|
var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), |
|
|
|
|
thisX = $$.data.xs[d.id][d.index]; |
|
|
|
|
|
|
|
|
|
// if there this is a single data point position the eventRect at 0
|
|
|
|
|
if (prevX === null && nextX === null) { |
|
|
|
|
return 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (prevX === null) { prevX = $$.x.domain()[0]; } |
|
|
|
|
|
|
|
|
|
return ($$.x(thisX) + $$.x(prevX)) / 2; |
|
|
|
|
}; |
|
|
|
|
} else { |
|
|
|
|
rectW = $$.getEventRectWidth(); |
|
|
|
|
rectX = function (d) { |
|
|
|
|
return $$.x(d.x) - (rectW / 2); |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
x = config.axis_rotated ? 0 : rectX; |
|
|
|
|
y = config.axis_rotated ? rectX : 0; |
|
|
|
|
w = config.axis_rotated ? $$.width : rectW; |
|
|
|
|
h = config.axis_rotated ? rectW : $$.height; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
eventRectUpdate |
|
|
|
|
.attr('class', $$.classEvent.bind($$)) |
|
|
|
|
.attr("x", x) |
|
|
|
|
.attr("y", y) |
|
|
|
|
.attr("width", w) |
|
|
|
|
.attr("height", h); |
|
|
|
|
}; |
|
|
|
|
// DUPLICATED: this will be removed because it seems to be unable to work with zoom...
|
|
|
|
|
c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) { |
|
|
|
|
var $$ = this, d3 = $$.d3, config = $$.config; |
|
|
|
|
return eventRectEnter.append("rect") |
|
|
|
|
.attr("class", $$.classEvent.bind($$)) |
|
|
|
|
.style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null) |
|
|
|
|
.on('mouseover', function (d) { |
|
|
|
|
var index = d.index; |
|
|
|
|
|
|
|
|
|
if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
|
|
|
|
|
if ($$.hasArcType()) { return; } |
|
|
|
|
|
|
|
|
|
// Expand shapes for selection
|
|
|
|
|
if (config.point_focus_expand_enabled) { $$.expandCircles(index, null, true); } |
|
|
|
|
$$.expandBars(index, null, true); |
|
|
|
|
|
|
|
|
|
// Call event handler
|
|
|
|
|
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { |
|
|
|
|
config.data_onmouseover.call($$.api, d); |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.on('mouseout', function (d) { |
|
|
|
|
var index = d.index; |
|
|
|
|
if (!$$.config) { return; } // chart is destroyed
|
|
|
|
|
if ($$.hasArcType()) { return; } |
|
|
|
|
$$.hideXGridFocus(); |
|
|
|
|
$$.hideTooltip(); |
|
|
|
|
// Undo expanded shapes
|
|
|
|
|
$$.unexpandCircles(); |
|
|
|
|
$$.unexpandBars(); |
|
|
|
|
// Call event handler
|
|
|
|
|
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { |
|
|
|
|
config.data_onmouseout.call($$.api, d); |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.on('mousemove', function (d) { |
|
|
|
|
var selectedData, index = d.index, |
|
|
|
|
eventRect = $$.svg.select('.' + CLASS.eventRect + '-' + index); |
|
|
|
|
|
|
|
|
|
if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing
|
|
|
|
|
if ($$.hasArcType()) { return; } |
|
|
|
|
|
|
|
|
|
if ($$.isStepType(d) && $$.config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) { |
|
|
|
|
index -= 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Show tooltip
|
|
|
|
|
selectedData = $$.filterTargetsToShow($$.data.targets).map(function (t) { |
|
|
|
|
return $$.addName($$.getValueOnIndex(t.values, index)); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
if (config.tooltip_grouped) { |
|
|
|
|
$$.showTooltip(selectedData, this); |
|
|
|
|
$$.showXGridFocus(selectedData); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (config.tooltip_grouped && (!config.data_selection_enabled || config.data_selection_grouped)) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$$.main.selectAll('.' + CLASS.shape + '-' + index) |
|
|
|
|
.each(function () { |
|
|
|
|
d3.select(this).classed(CLASS.EXPANDED, true); |
|
|
|
|
if (config.data_selection_enabled) { |
|
|
|
|
eventRect.style('cursor', config.data_selection_grouped ? 'pointer' : null); |
|
|
|
|
} |
|
|
|
|
if (!config.tooltip_grouped) { |
|
|
|
|
$$.hideXGridFocus(); |
|
|
|
|
$$.hideTooltip(); |
|
|
|
|
if (!config.data_selection_grouped) { |
|
|
|
|
$$.unexpandCircles(index); |
|
|
|
|
$$.unexpandBars(index); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.filter(function (d) { |
|
|
|
|
return $$.isWithinShape(this, d); |
|
|
|
|
}) |
|
|
|
|
.each(function (d) { |
|
|
|
|
if (config.data_selection_enabled && (config.data_selection_grouped || config.data_selection_isselectable(d))) { |
|
|
|
|
eventRect.style('cursor', 'pointer'); |
|
|
|
|
} |
|
|
|
|
if (!config.tooltip_grouped) { |
|
|
|
|
$$.showTooltip([d], this); |
|
|
|
|
$$.showXGridFocus([d]); |
|
|
|
|
if (config.point_focus_expand_enabled) { $$.expandCircles(index, d.id, true); } |
|
|
|
|
$$.expandBars(index, d.id, true); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.on('click', function (d) { |
|
|
|
|
var index = d.index; |
|
|
|
|
if ($$.hasArcType() || !$$.toggleShape) { return; } |
|
|
|
|
if ($$.cancelClick) { |
|
|
|
|
$$.cancelClick = false; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) { |
|
|
|
|
index -= 1; |
|
|
|
|
} |
|
|
|
|
$$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { |
|
|
|
|
if (config.data_selection_grouped || $$.isWithinShape(this, d)) { |
|
|
|
|
$$.toggleShape(this, d, index); |
|
|
|
|
$$.config.data_onclick.call($$.api, d, this); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
.call( |
|
|
|
|
config.data_selection_draggable && $$.drag ? ( |
|
|
|
|
d3.drag() |
|
|
|
|
.on('drag', function () { $$.drag(d3.mouse(this)); }) |
|
|
|
|
.on('start', function () { $$.dragstart(d3.mouse(this)); }) |
|
|
|
|
.on('end', function () { $$.dragend(); }) |
|
|
|
|
) : function () {} |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) { |
|
|
|
|
var $$ = this, d3 = $$.d3, config = $$.config; |
|
|
|
|
|
|
|
|
|
function mouseout() { |
|
|
|
|
$$.svg.select('.' + CLASS.eventRect).style('cursor', null); |
|
|
|
@ -238,24 +33,27 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
|
|
|
|
|
$$.unexpandBars(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return eventRectEnter.append('rect') |
|
|
|
|
.attr('x', 0) |
|
|
|
|
.attr('y', 0) |
|
|
|
|
.attr('width', $$.width) |
|
|
|
|
.attr('height', $$.height) |
|
|
|
|
.attr('class', CLASS.eventRect) |
|
|
|
|
.on('mouseout', function () { |
|
|
|
|
if (!$$.config) { return; } // chart is destroyed
|
|
|
|
|
// rects for mouseover
|
|
|
|
|
$$.main.select('.' + CLASS.eventRects) |
|
|
|
|
.style('cursor', config.zoom_enabled ? config.axis_rotated ? 'ns-resize' : 'ew-resize' : null); |
|
|
|
|
|
|
|
|
|
$$.eventRect |
|
|
|
|
.attr('x', x) |
|
|
|
|
.attr('y', y) |
|
|
|
|
.attr('width', w) |
|
|
|
|
.attr('height', h) |
|
|
|
|
.on('mouseout', config.interaction_enabled ? function () { |
|
|
|
|
if (!config) { return; } // chart is destroyed
|
|
|
|
|
if ($$.hasArcType()) { return; } |
|
|
|
|
mouseout(); |
|
|
|
|
}) |
|
|
|
|
.on('mousemove', function () { |
|
|
|
|
var targetsToShow = $$.filterTargetsToShow($$.data.targets); |
|
|
|
|
var mouse, closest, sameXData, selectedData; |
|
|
|
|
} : null) |
|
|
|
|
.on('mousemove', config.interaction_enabled ? function () { |
|
|
|
|
var targetsToShow, mouse, closest, sameXData, selectedData; |
|
|
|
|
|
|
|
|
|
if ($$.dragging) { return; } // do nothing when dragging
|
|
|
|
|
if ($$.hasArcType(targetsToShow)) { return; } |
|
|
|
|
|
|
|
|
|
targetsToShow = $$.filterTargetsToShow($$.data.targets); |
|
|
|
|
mouse = d3.mouse(this); |
|
|
|
|
closest = $$.findClosestFromTargets(targetsToShow, mouse); |
|
|
|
|
|
|
|
|
@ -298,12 +96,12 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
|
|
|
|
|
$$.mouseover = closest; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('click', function () { |
|
|
|
|
var targetsToShow = $$.filterTargetsToShow($$.data.targets); |
|
|
|
|
var mouse, closest; |
|
|
|
|
} : null) |
|
|
|
|
.on('click', config.interaction_enabled ? function () { |
|
|
|
|
var targetsToShow, mouse, closest; |
|
|
|
|
if ($$.hasArcType(targetsToShow)) { return; } |
|
|
|
|
|
|
|
|
|
targetsToShow = $$.filterTargetsToShow($$.data.targets); |
|
|
|
|
mouse = d3.mouse(this); |
|
|
|
|
closest = $$.findClosestFromTargets(targetsToShow, mouse); |
|
|
|
|
if (! closest) { return; } |
|
|
|
@ -312,13 +110,13 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
|
|
|
|
|
$$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () { |
|
|
|
|
if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { |
|
|
|
|
$$.toggleShape(this, closest, closest.index); |
|
|
|
|
$$.config.data_onclick.call($$.api, closest, this); |
|
|
|
|
config.data_onclick.call($$.api, closest, this); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} : null) |
|
|
|
|
.call( |
|
|
|
|
config.data_selection_draggable && $$.drag ? ( |
|
|
|
|
config.interaction_enabled && config.data_selection_draggable && $$.drag ? ( |
|
|
|
|
d3.drag() |
|
|
|
|
.on('drag', function () { $$.drag(d3.mouse(this)); }) |
|
|
|
|
.on('start', function () { $$.dragstart(d3.mouse(this)); }) |
|
|
|
|