devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
307 lines (302 loc) • 9.91 kB
JavaScript
/**
* DevExtreme (esm/viz/sparklines/base_sparkline.js)
* Version: 23.2.6
* Build date: Wed May 01 2024
*
* Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import eventsEngine from "../../events/core/events_engine";
import domAdapter from "../../core/dom_adapter";
import {
isFunction
} from "../../core/utils/type";
import BaseWidget from "../../__internal/viz/core/m_base_widget";
import {
extend
} from "../../core/utils/extend";
import {
addNamespace
} from "../../events/utils/index";
import pointerEvents from "../../events/pointer";
import {
pointInCanvas
} from "../core/utils";
import $ from "../../core/renderer";
var DEFAULT_LINE_SPACING = 2;
var TOOLTIP_TABLE_BORDER_SPACING = 0;
var TOOLTIP_TABLE_KEY_VALUE_SPACE = 15;
var EVENT_NS = "sparkline-tooltip";
var POINTER_ACTION = addNamespace([pointerEvents.down, pointerEvents.move], EVENT_NS);
import {
Translator2D
} from "../translators/translator2d";
var _extend = extend;
var _floor = Math.floor;
import {
noop as _noop
} from "../../core/utils/common";
function inCanvas(_ref, x, y) {
var {
width: width,
height: height
} = _ref;
return pointInCanvas({
left: 0,
top: 0,
right: width,
bottom: height,
width: width,
height: height
}, x, y)
}
function pointerHandler(_ref2) {
var {
data: data
} = _ref2;
var that = data.widget;
that._enableOutHandler();
that._showTooltip()
}
function getDefaultTemplate(_ref3, textAlign) {
var {
lineSpacing: lineSpacing,
size: size
} = _ref3;
var lineHeight = "".concat((null !== lineSpacing && void 0 !== lineSpacing ? lineSpacing : DEFAULT_LINE_SPACING) + size, "px");
return function(_ref4, container) {
var {
valueText: valueText
} = _ref4;
var table = $("<table>").css({
borderSpacing: TOOLTIP_TABLE_BORDER_SPACING,
lineHeight: lineHeight
});
for (var i = 0; i < valueText.length; i += 2) {
var tr = $("<tr>");
$("<td>").text(valueText[i]).appendTo(tr);
$("<td>").css({
width: TOOLTIP_TABLE_KEY_VALUE_SPACE
}).appendTo(tr);
$("<td>").css({
textAlign: textAlign
}).text(valueText[i + 1]).appendTo(tr);
table.append(tr)
}
container.append(table)
}
}
function createAxis(isHorizontal) {
var translator = new Translator2D({}, {}, {
shiftZeroValue: !isHorizontal,
isHorizontal: !!isHorizontal
});
return {
getTranslator: function() {
return translator
},
update: function(range, canvas, options) {
translator.update(range, canvas, options)
},
getVisibleArea() {
var visibleArea = translator.getCanvasVisibleArea();
return [visibleArea.min, visibleArea.max]
},
visualRange: _noop,
calculateInterval: _noop,
getMarginOptions: () => ({}),
aggregatedPointBetweenTicks: () => false
}
}
var _initTooltip;
var BaseSparkline = BaseWidget.inherit({
_getLayoutItems: _noop,
_useLinks: false,
_themeDependentChanges: ["OPTIONS"],
_initCore: function() {
this._tooltipTracker = this._renderer.root;
this._tooltipTracker.attr({
"pointer-events": "visible"
});
this._createHtmlElements();
this._initTooltipEvents();
this._argumentAxis = createAxis(true);
this._valueAxis = createAxis()
},
_getDefaultSize: function() {
return this._defaultSize
},
_disposeCore: function() {
this._disposeWidgetElements();
this._disposeTooltipEvents();
this._ranges = null
},
_optionChangesOrder: ["OPTIONS"],
_change_OPTIONS: function() {
this._prepareOptions();
this._change(["UPDATE"])
},
_customChangesOrder: ["UPDATE"],
_change_UPDATE: function() {
this._update()
},
_update: function() {
if (this._tooltipShown) {
this._tooltipShown = false;
this._tooltip.hide()
}
this._cleanWidgetElements();
this._updateWidgetElements();
this._drawWidgetElements()
},
_updateWidgetElements: function() {
var canvas = this._getCorrectCanvas();
this._updateRange();
this._argumentAxis.update(this._ranges.arg, canvas, this._getStick());
this._valueAxis.update(this._ranges.val, canvas)
},
_getStick: function() {},
_applySize: function(rect) {
this._allOptions.size = {
width: rect[2] - rect[0],
height: rect[3] - rect[1]
};
this._change(["UPDATE"])
},
_setupResizeHandler: _noop,
_prepareOptions: function() {
return _extend(true, {}, this._themeManager.theme(), this.option())
},
_getTooltipCoords: function() {
var canvas = this._canvas;
var rootOffset = this._renderer.getRootOffset();
return {
x: canvas.width / 2 + rootOffset.left,
y: canvas.height / 2 + rootOffset.top
}
},
_initTooltipEvents() {
var data = {
widget: this
};
this._renderer.root.off("." + EVENT_NS).on(POINTER_ACTION, data, pointerHandler)
},
_showTooltip() {
var tooltip;
if (!this._tooltipShown) {
this._tooltipShown = true;
tooltip = this._getTooltip();
tooltip.isEnabled() && this._tooltip.show(this._getTooltipData(), this._getTooltipCoords(), {})
}
},
_hideTooltip() {
if (this._tooltipShown) {
this._tooltipShown = false;
this._tooltip.hide()
}
},
_stopCurrentHandling() {
this._hideTooltip()
},
_enableOutHandler() {
var that = this;
if (that._outHandler) {
return
}
var handler = _ref5 => {
var {
pageX: pageX,
pageY: pageY
} = _ref5;
var {
left: left,
top: top
} = that._renderer.getRootOffset();
var x = _floor(pageX - left);
var y = _floor(pageY - top);
if (!inCanvas(that._canvas, x, y)) {
that._hideTooltip();
that._disableOutHandler()
}
};
eventsEngine.on(domAdapter.getDocument(), POINTER_ACTION, handler);
this._outHandler = handler
},
_disableOutHandler() {
this._outHandler && eventsEngine.off(domAdapter.getDocument(), POINTER_ACTION, this._outHandler);
this._outHandler = null
},
_disposeTooltipEvents: function() {
this._tooltipTracker.off();
this._disableOutHandler();
this._renderer.root.off("." + EVENT_NS)
},
_getTooltip: function() {
var that = this;
if (!that._tooltip) {
_initTooltip.apply(this, arguments);
that._setTooltipRendererOptions(that._tooltipRendererOptions);
that._tooltipRendererOptions = null;
that._setTooltipOptions()
}
return that._tooltip
}
});
export default BaseSparkline;
import {
plugin as tooltipPlugin
} from "../core/tooltip";
BaseSparkline.addPlugin(tooltipPlugin);
_initTooltip = BaseSparkline.prototype._initTooltip;
BaseSparkline.prototype._initTooltip = _noop;
var _disposeTooltip = BaseSparkline.prototype._disposeTooltip;
BaseSparkline.prototype._disposeTooltip = function() {
if (this._tooltip) {
_disposeTooltip.apply(this, arguments)
}
};
BaseSparkline.prototype._setTooltipRendererOptions = function() {
var options = this._getRendererOptions();
if (this._tooltip) {
this._tooltip.setRendererOptions(options)
} else {
this._tooltipRendererOptions = options
}
};
BaseSparkline.prototype._setTooltipOptions = function() {
if (this._tooltip) {
var options = this._getOption("tooltip");
var defaultContentTemplate = this._getDefaultTooltipTemplate(options);
var contentTemplateOptions = defaultContentTemplate ? {
contentTemplate: defaultContentTemplate
} : {};
var optionsToUpdate = _extend(contentTemplateOptions, options, {
enabled: options.enabled && this._isTooltipEnabled()
});
this._tooltip.update(optionsToUpdate)
}
};
BaseSparkline.prototype._getDefaultTooltipTemplate = function(options) {
var defaultTemplateNeeded = true;
var textAlign = this.option("rtlEnabled") ? "left" : "right";
if (isFunction(options.customizeTooltip)) {
var _options$customizeToo;
this._tooltip.update(options);
var formatObject = this._getTooltipData();
var customizeResult = null !== (_options$customizeToo = options.customizeTooltip.call(formatObject, formatObject)) && void 0 !== _options$customizeToo ? _options$customizeToo : {};
defaultTemplateNeeded = !("html" in customizeResult) && !("text" in customizeResult)
}
return defaultTemplateNeeded && getDefaultTemplate(options.font, textAlign)
};
import {
plugin
} from "../core/export";
var exportPlugin = extend(true, {}, plugin, {
init: _noop,
dispose: _noop,
customize: null,
members: {
_getExportMenuOptions: null
}
});
BaseSparkline.addPlugin(exportPlugin);