@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
197 lines (196 loc) • 7.98 kB
JavaScript
import { ChartData } from '../utils/get-data';
import { getTransform, firstToLowerCase } from '../../common/utils/helper';
import { dragStart, drag, dragEnd } from '../../common/model/constants';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
/**
* The `DataEditing` module handles data editing functionalities for chart series.
*/
var DataEditing = /** @class */ (function () {
/**
* Initializes the event manager for the chart.
*
* @param {Chart} chart - The chart instance.
*/
function DataEditing(chart) {
/**
* It is used to identify point is dragging for data editing in other modules.
*
* @private
*/
this.isPointDragging = false;
this.chart = chart;
}
/**
* Point drag start here.
*
* @returns {void}
* @private
*/
DataEditing.prototype.pointMouseDown = function () {
var chart = this.chart;
var series;
var data = new ChartData(chart);
var pointData = data.getData();
var isZooming = chart.zoomSettings.enableSelectionZooming || chart.zoomSettings.enablePinchZooming;
if (pointData.point && (data.insideRegion || !pointData.series.isRectSeries)) {
this.seriesIndex = pointData.series.index;
this.pointIndex = pointData.point.index;
series = chart.series[this.seriesIndex];
if (series.dragSettings.enable && !isZooming) {
chart.trigger(dragStart, {
series: pointData.series, seriesIndex: this.seriesIndex, pointIndex: this.pointIndex, point: pointData.point,
oldValue: chart.visibleSeries[this.seriesIndex].yData[this.pointIndex],
newValue: chart.visibleSeries[this.seriesIndex].points[this.pointIndex].yValue
});
chart.isPointMouseDown = true;
chart.zoomSettings.enableDeferredZooming = false;
}
}
};
/**
* Handles the mouse move event on chart data points.
*
* @param {PointerEvent | TouchEvent} event - The pointer event or touch event.
* @returns {void}
* @private
*/
DataEditing.prototype.pointMouseMove = function (event) {
var chart = this.chart;
var series;
if (event.type === 'touchmove' && event.preventDefault) {
event.preventDefault();
}
var data = new ChartData(chart);
var pointData = data.getData();
if (pointData.series.dragSettings.enable && pointData.point && (data.insideRegion || !pointData.series.isRectSeries)) {
this.getCursorStyle(pointData);
}
else {
chart.svgObject.style.cursor = 'null';
}
if (chart.isPointMouseDown) {
series = chart.series[this.seriesIndex];
if (series.type.indexOf('Spline') > -1) {
chart[firstToLowerCase(series.type) + 'SeriesModule'].findSplinePoint(series);
}
this.pointDragging(this.seriesIndex, this.pointIndex);
}
};
/**
* Gets the cursor style based on the point data.
*
* @param {PointData} pointData - The data associated with the chart point.
* @returns {void}
*/
DataEditing.prototype.getCursorStyle = function (pointData) {
var chart = this.chart;
if (pointData.series.type.indexOf('Stacking') > -1) {
chart.svgObject.style.cursor = '';
}
else if (pointData.series.type === 'Bar' && chart.isTransposed) {
chart.svgObject.style.cursor = 'ns-resize';
}
else if (chart.isTransposed || pointData.series.type === 'Bar') {
chart.svgObject.style.cursor = 'ew-resize';
}
else {
chart.svgObject.style.cursor = 'ns-resize';
}
};
/**
* Handles the dragging behavior of a specific point.
*
* @param {number} si - Series index.
* @param {number} pi - Point index.
* @returns {void}
*/
DataEditing.prototype.pointDragging = function (si, pi) {
var chart = this.chart;
var yValueArray = [];
var y;
var ySize;
var yValue;
var series = chart.visibleSeries[si];
var pointDrag = series.dragSettings;
var xAxis = series.xAxis;
var yAxis = series.yAxis;
// To get drag region for column and bar series
var extra = series.isRectSeries ? 1 : 0;
var axis = getTransform(xAxis, yAxis, chart.requireInvertedAxis);
if (series.type === 'Bar') {
y = chart.isTransposed ? (axis.y + axis.height) - chart.mouseY : chart.mouseX - axis.x;
ySize = chart.isTransposed ? axis.height : axis.width;
}
else {
y = chart.isTransposed ? chart.mouseX - axis.x : (axis.y + axis.height) - chart.mouseY;
ySize = chart.isTransposed ? axis.width : axis.height;
}
yValue = yAxis.isAxisInverse ? (1 - (y / ySize)) : (y / ySize);
yValue = (yValue * yAxis.visibleRange.delta) + yAxis.visibleRange.min;
var minRange = yAxis.minimum !== null ? yAxis.visibleRange.min + extra : (isNullOrUndefined(pointDrag.minY) ?
(yValue) : pointDrag.minY);
var maxRange = yAxis.maximum !== null ? yAxis.visibleRange.max + extra : (isNullOrUndefined(pointDrag.maxY) ?
(yValue) : pointDrag.maxY);
if (maxRange >= yValue && minRange <= yValue) {
series.points[pi].yValue = series.points[pi].y = chart.dragY = (yAxis.valueType === 'Logarithmic') ?
Math.pow(yAxis.logBase, yValue) : parseFloat(yValue.toFixed(2));
series.points[pi].interior = pointDrag.fill;
for (var i = 0; i < series.points.length; i++) {
yValueArray[i] = series.points[i].yValue;
}
series.yMin = Math.min.apply(null, yValueArray);
series.yMax = Math.max.apply(null, yValueArray);
this.isPointDragging = true;
chart.refreshBound();
chart.trigger(drag, {
seriesIndex: si, pointIndex: pi, series: series, point: series.points[pi],
oldValue: chart.visibleSeries[this.seriesIndex].yData[this.pointIndex], newValue: series.points[pi].yValue
});
chart.zoomRedraw = false;
}
};
/**
* Point drag ends here.
*
* @returns {void}
* @private
*/
DataEditing.prototype.pointMouseUp = function () {
var chart = this.chart;
if (chart.isPointMouseDown) {
if (chart.series[this.seriesIndex].dragSettings.enable) {
chart.trigger(dragEnd, {
series: chart.series[this.seriesIndex], point: chart.visibleSeries[this.seriesIndex].points[this.pointIndex],
seriesIndex: this.seriesIndex,
pointIndex: this.pointIndex, oldValue: chart.visibleSeries[this.seriesIndex].yData[this.pointIndex],
newValue: chart.visibleSeries[this.seriesIndex].points[this.pointIndex].yValue
});
chart.visibleSeries[this.seriesIndex].points[this.pointIndex].y =
chart.visibleSeries[this.seriesIndex].points[this.pointIndex].yValue;
chart.isPointMouseDown = false;
this.isPointDragging = false;
this.seriesIndex = this.pointIndex = undefined;
}
}
};
/**
* Get module name.
*
* @returns {string} - Returns the module name.
*/
DataEditing.prototype.getModuleName = function () {
// Returns te module name
return 'DataEditing';
};
/**
* To destroy the DataEditing.
*
* @returns {void}
* @private
*/
DataEditing.prototype.destroy = function () {
// Destroy method performed here.
};
return DataEditing;
}());
export { DataEditing };