UNPKG

@progress/kendo-ui

Version:

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

947 lines (768 loc) 27.1 kB
module.exports = /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ({ /***/ 0: /***/ (function(module, exports, __webpack_require__) { module.exports = __webpack_require__(912); /***/ }), /***/ 3: /***/ (function(module, exports) { module.exports = function() { throw new Error("define cannot be used indirect"); }; /***/ }), /***/ 909: /***/ (function(module, exports) { module.exports = require("../../kendo.dataviz.chart"); /***/ }), /***/ 912: /***/ (function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*********************************************************************** * WARNING: this file is auto-generated. If you change it directly, * your modifications will eventually be lost. The source code is in * `kendo-charts` repository, you should make your changes there and * run `src-modules/sync.sh` in this repository. */ (function(f, define){ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(909) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (f), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); })(function(){ (function () { window.kendo.dataviz = window.kendo.dataviz || {}; var dataviz = kendo.dataviz; var elementStyles = dataviz.elementStyles; var deepExtend = dataviz.deepExtend; var toTime = dataviz.toTime; var datavizConstants = dataviz.constants; var Chart = dataviz.Chart; var drawing = kendo.drawing; var FadeOutAnimation = drawing.Animation.extend({ setup: function() { this._initialOpacity = parseFloat(elementStyles(this.element, 'opacity').opacity); }, step: function(pos) { elementStyles(this.element, { opacity: String(dataviz.interpolateValue(this._initialOpacity, 0, pos)) }); }, abort: function() { drawing.Animation.fn.abort.call(this); elementStyles(this.element, { display: 'none', opacity: String(this._initialOpacity) }); }, cancel: function() { drawing.Animation.fn.abort.call(this); elementStyles(this.element, { opacity: String(this._initialOpacity) }); } }); function createDiv(className, style) { var div = document.createElement("div"); div.className = className; if (style) { div.style.cssText = style; } return div; } var NavigatorHint = dataviz.Class.extend({ init: function(container, chartService, options) { this.options = deepExtend({}, this.options, options); this.container = container; this.chartService = chartService; var padding = elementStyles(container, [ "paddingLeft", "paddingTop" ]); this.chartPadding = { top: padding.paddingTop, left: padding.paddingLeft }; this.createElements(); container.appendChild(this.element); }, createElements: function() { var element = this.element = createDiv('k-navigator-hint', 'display: none; position: absolute; top: 1px; left: 1px;'); var tooltip = this.tooltip = createDiv('k-tooltip k-chart-tooltip'); var scroll = this.scroll = createDiv('k-scroll'); tooltip.innerHTML = '&nbsp;'; element.appendChild(tooltip); element.appendChild(scroll); }, show: function(from, to, bbox) { var ref = this; var element = ref.element; var options = ref.options; var scroll = ref.scroll; var tooltip = ref.tooltip; var middle = dataviz.toDate(toTime(from) + toTime(to - from) / 2); var scrollWidth = bbox.width() * 0.4; var minPos = bbox.center().x - scrollWidth; var maxPos = bbox.center().x; var posRange = maxPos - minPos; var range = options.max - options.min; var scale = posRange / range; var offset = middle - options.min; var text = this.chartService.intl.format(options.format, from, to); var template = dataviz.getTemplate(options); this.clearHideTimeout(); if (!this._visible) { elementStyles(element, { visibility: 'hidden', display: 'block' }); this._visible = true; } if (template) { text = template({ from: from, to: to }); } tooltip.innerHTML = text; elementStyles(tooltip, { left: bbox.center().x - tooltip.offsetWidth / 2, top: bbox.y1 }); var tooltipStyle = elementStyles(tooltip, [ 'marginTop', 'borderTopWidth', 'height' ]); elementStyles(scroll, { width: scrollWidth, left: minPos + offset * scale, top: bbox.y1 + tooltipStyle.marginTop + tooltipStyle.borderTopWidth + tooltipStyle.height / 2 }); elementStyles(element, { visibility: 'visible' }); }, clearHideTimeout: function() { if (this._hideTimeout) { clearTimeout(this._hideTimeout); } if (this._hideAnimation) { this._hideAnimation.cancel(); } }, hide: function() { var this$1 = this; this.clearHideTimeout(); this._hideTimeout = setTimeout(function () { this$1._visible = false; this$1._hideAnimation = new FadeOutAnimation(this$1.element); this$1._hideAnimation.setup(); this$1._hideAnimation.play(); }, this.options.hideDelay); }, destroy: function() { this.clearHideTimeout(); if (this.container) { this.container.removeChild(this.element); } delete this.container; delete this.chartService; delete this.element; delete this.tooltip; delete this.scroll; } }); dataviz.setDefaultOptions(NavigatorHint, { format: "{0:d} - {1:d}", hideDelay: 500 }); var NAVIGATOR_PANE = "_navigator"; var NAVIGATOR_AXIS = NAVIGATOR_PANE; var constants = { NAVIGATOR_AXIS: NAVIGATOR_AXIS, NAVIGATOR_PANE: NAVIGATOR_PANE }; var ZOOM_ACCELERATION = 3; var Navigator = dataviz.Class.extend({ init: function(chart) { this.chart = chart; var options = this.options = deepExtend({}, this.options, chart.options.navigator); var select = options.select; if (select) { select.from = this.parseDate(select.from); select.to = this.parseDate(select.to); } if (!dataviz.defined(options.hint.visible)) { options.hint.visible = options.visible; } var obj; this.chartObserver = new dataviz.InstanceObserver(this, ( obj = {}, obj[datavizConstants.DRAG] = '_drag', obj[datavizConstants.DRAG_END] = '_dragEnd', obj[datavizConstants.ZOOM] = '_zoom', obj[datavizConstants.ZOOM_END] = '_zoomEnd', obj )); chart.addObserver(this.chartObserver); }, parseDate: function(value) { return dataviz.parseDate(this.chart.chartService.intl, value); }, clean: function() { if (this.selection) { this.selection.destroy(); this.selection = null; } if (this.hint) { this.hint.destroy(); this.hint = null; } }, destroy: function() { if (this.chart) { this.chart.removeObserver(this.chartObserver); delete this.chart; } this.clean(); }, redraw: function() { this._redrawSelf(); this.initSelection(); }, initSelection: function() { var ref = this; var chart = ref.chart; var options = ref.options; var axis = this.mainAxis(); var ref$1 = axis.roundedRange(); var min = ref$1.min; var max = ref$1.max; var ref$2 = options.select; var from = ref$2.from; var to = ref$2.to; var mousewheel = ref$2.mousewheel; var axisClone = clone(axis); if (axis.categoriesCount() === 0) { return; } this.clean(); // "Freeze" the selection axis position until the next redraw axisClone.box = axis.box; this.selection = new dataviz.Selection(chart, axisClone, { min: min, max: max, from: from || min, to: to || max, mousewheel: dataviz.valueOrDefault(mousewheel, { zoom: "left" }), visible: options.visible }, new dataviz.InstanceObserver(this, { selectStart: '_selectStart', select: '_select', selectEnd: '_selectEnd' })); if (options.hint.visible) { this.hint = new NavigatorHint(chart.element, chart.chartService, { min: min, max: max, template: dataviz.getTemplate(options.hint), format: options.hint.format }); } }, setRange: function() { var plotArea = this.chart._createPlotArea(true); var axis = plotArea.namedCategoryAxes[NAVIGATOR_AXIS]; var ref = axis.roundedRange(); var min = ref.min; var max = ref.max; var select = this.options.select || {}; var from = select.from || min; if (from < min) { from = min; } var to = select.to || max; if (to > max) { to = max; } this.options.select = deepExtend({}, select, { from: from, to: to }); this.filterAxes(); }, _redrawSelf: function(silent) { var plotArea = this.chart._plotArea; if (plotArea) { plotArea.redraw(dataviz.last(plotArea.panes), silent); } }, redrawSlaves: function() { var chart = this.chart; var plotArea = chart._plotArea; var slavePanes = plotArea.panes.slice(0, -1); // Update the original series and categoryAxis before partial refresh. plotArea.srcSeries = chart.options.series; plotArea.options.categoryAxis = chart.options.categoryAxis; plotArea.clearSeriesPointsCache(); plotArea.redraw(slavePanes); }, _drag: function(e) { var ref = this; var chart = ref.chart; var selection = ref.selection; var coords = chart._eventCoordinates(e.originalEvent); var navigatorAxis = this.mainAxis(); var naviRange = navigatorAxis.roundedRange(); var inNavigator = navigatorAxis.pane.box.containsPoint(coords); var axis = chart._plotArea.categoryAxis; var range = e.axisRanges[axis.options.name]; var select = this.options.select; var duration; if (!range || inNavigator || !selection) { return; } if (select.from && select.to) { duration = toTime(select.to) - toTime(select.from); } else { duration = toTime(selection.options.to) - toTime(selection.options.from); } var from = dataviz.toDate(dataviz.limitValue( toTime(range.min), naviRange.min, toTime(naviRange.max) - duration )); var to = dataviz.toDate(dataviz.limitValue( toTime(from) + duration, toTime(naviRange.min) + duration, naviRange.max )); this.options.select = { from: from, to: to }; if (this.options.liveDrag) { this.filterAxes(); this.redrawSlaves(); } selection.set(from, to); this.showHint(from, to); }, _dragEnd: function() { this.filterAxes(); this.filter(); this.redrawSlaves(); if (this.hint) { this.hint.hide(); } }, readSelection: function() { var ref = this; var ref_selection_options = ref.selection.options; var from = ref_selection_options.from; var to = ref_selection_options.to; var select = ref.options.select; select.from = from; select.to = to; }, filterAxes: function() { var ref = this; var select = ref.options.select; if (select === void 0) { select = { }; } var chart = ref.chart; var allAxes = chart.options.categoryAxis; var from = select.from; var to = select.to; for (var idx = 0; idx < allAxes.length; idx++) { var axis = allAxes[idx]; if (axis.pane !== NAVIGATOR_PANE) { axis.min = from; axis.max = to; } } }, filter: function() { var ref = this; var chart = ref.chart; var select = ref.options.select; if (!chart.requiresHandlers([ "navigatorFilter" ])) { return; } var mainAxis = this.mainAxis(); var args = { from: select.from, to: select.to }; if (mainAxis.options.type !== 'category') { var axisOptions = new dataviz.DateCategoryAxis(deepExtend({ baseUnit: "fit" }, chart.options.categoryAxis[0], { categories: [ select.from, select.to ] }), chart.chartService).options; args.from = dataviz.addDuration(axisOptions.min, -axisOptions.baseUnitStep, axisOptions.baseUnit); args.to = dataviz.addDuration(axisOptions.max, axisOptions.baseUnitStep, axisOptions.baseUnit); } this.chart.trigger("navigatorFilter", args); }, _zoom: function(e) { var ref = this; var axis = ref.chart._plotArea.categoryAxis; var selection = ref.selection; var ref_options = ref.options; var select = ref_options.select; var liveDrag = ref_options.liveDrag; var mainAxis = this.mainAxis(); var delta = e.delta; if (!selection) { return; } var fromIx = mainAxis.categoryIndex(selection.options.from); var toIx = mainAxis.categoryIndex(selection.options.to); e.originalEvent.preventDefault(); if (Math.abs(delta) > 1) { delta *= ZOOM_ACCELERATION; } if (toIx - fromIx > 1) { selection.expand(delta); this.readSelection(); } else { axis.options.min = select.from; select.from = axis.scaleRange(-e.delta).min; } if (liveDrag) { this.filterAxes(); this.redrawSlaves(); } selection.set(select.from, select.to); this.showHint(this.options.select.from, this.options.select.to); }, _zoomEnd: function(e) { this._dragEnd(e); }, showHint: function(from, to) { var plotArea = this.chart._plotArea; if (this.hint) { this.hint.show(from, to, plotArea.backgroundBox()); } }, _selectStart: function(e) { return this.chart._selectStart(e); }, _select: function(e) { this.showHint(e.from, e.to); return this.chart._select(e); }, _selectEnd: function(e) { if (this.hint) { this.hint.hide(); } this.readSelection(); this.filterAxes(); this.filter(); this.redrawSlaves(); return this.chart._selectEnd(e); }, mainAxis: function() { var plotArea = this.chart._plotArea; if (plotArea) { return plotArea.namedCategoryAxes[NAVIGATOR_AXIS]; } }, select: function(from, to) { var select = this.options.select; if (from && to) { select.from = this.parseDate(from); select.to = this.parseDate(to); this.filterAxes(); this.filter(); this.redrawSlaves(); this.selection.set(from, to); } return { from: select.from, to: select.to }; } }); Navigator.setup = function(options, themeOptions) { if (options === void 0) { options = {}; } if (themeOptions === void 0) { themeOptions = {}; } if (options.__navi) { return; } options.__navi = true; var naviOptions = deepExtend({}, themeOptions.navigator, options.navigator); var panes = options.panes = [].concat(options.panes); var paneOptions = deepExtend({}, naviOptions.pane, { name: NAVIGATOR_PANE }); if (!naviOptions.visible) { paneOptions.visible = false; paneOptions.height = 0.1; } panes.push(paneOptions); Navigator.attachAxes(options, naviOptions); Navigator.attachSeries(options, naviOptions, themeOptions); }; Navigator.attachAxes = function(options, naviOptions) { var series = naviOptions.series || []; var categoryAxes = options.categoryAxis = [].concat(options.categoryAxis); var valueAxes = options.valueAxis = [].concat(options.valueAxis); var equallySpacedSeries = dataviz.filterSeriesByType(series, datavizConstants.EQUALLY_SPACED_SERIES); var justifyAxis = equallySpacedSeries.length === 0; var base = deepExtend({ type: "date", pane: NAVIGATOR_PANE, roundToBaseUnit: !justifyAxis, justified: justifyAxis, _collapse: false, majorTicks: { visible: true }, tooltip: { visible: false }, labels: { step: 1 }, autoBind: naviOptions.autoBindElements, autoBaseUnitSteps: { minutes: [ 1 ], hours: [ 1, 2 ], days: [ 1, 2 ], weeks: [], months: [ 1 ], years: [ 1 ] } }); var user = naviOptions.categoryAxis; categoryAxes.push( deepExtend({}, base, { maxDateGroups: 200 }, user, { name: NAVIGATOR_AXIS, title: null, baseUnit: "fit", baseUnitStep: "auto", labels: { visible: false }, majorTicks: { visible: false } }), deepExtend({}, base, user, { name: NAVIGATOR_AXIS + "_labels", maxDateGroups: 20, baseUnitStep: "auto", labels: { position: "" }, plotBands: [], autoBaseUnitSteps: { minutes: [] }, _overlap: true }), deepExtend({}, base, user, { name: NAVIGATOR_AXIS + "_ticks", maxDateGroups: 200, majorTicks: { width: 0.5 }, plotBands: [], title: null, labels: { visible: false, mirror: true }, _overlap: true }) ); valueAxes.push(deepExtend({ name: NAVIGATOR_AXIS, pane: NAVIGATOR_PANE, majorGridLines: { visible: false }, visible: false }, naviOptions.valueAxis)); }; Navigator.attachSeries = function(options, naviOptions, themeOptions) { var series = options.series = options.series || []; var navigatorSeries = [].concat(naviOptions.series || []); var seriesColors = themeOptions.seriesColors; var defaults = naviOptions.seriesDefaults; for (var idx = 0; idx < navigatorSeries.length; idx++) { series.push( deepExtend({ color: seriesColors[idx % seriesColors.length], categoryField: naviOptions.dateField, visibleInLegend: false, tooltip: { visible: false } }, defaults, navigatorSeries[idx], { axis: NAVIGATOR_AXIS, categoryAxis: NAVIGATOR_AXIS, autoBind: naviOptions.autoBindElements }) ); } }; function ClonedObject() { } function clone(obj) { ClonedObject.prototype = obj; return new ClonedObject(); } var AUTO_CATEGORY_WIDTH = 28; var StockChart = Chart.extend({ applyDefaults: function(options, themeOptions) { var width = dataviz.elementSize(this.element).width || datavizConstants.DEFAULT_WIDTH; var theme = themeOptions; var stockDefaults = { seriesDefaults: { categoryField: options.dateField }, axisDefaults: { categoryAxis: { name: "default", majorGridLines: { visible: false }, labels: { step: 2 }, majorTicks: { visible: false }, maxDateGroups: Math.floor(width / AUTO_CATEGORY_WIDTH) } } }; if (theme) { theme = deepExtend({}, theme, stockDefaults); } Navigator.setup(options, theme); Chart.fn.applyDefaults.call(this, options, theme); }, _setElementClass: function(element) { dataviz.addClass(element, 'k-chart k-stockchart'); }, setOptions: function(options) { this.destroyNavigator(); Chart.fn.setOptions.call(this, options); }, noTransitionsRedraw: function() { var transitions = this.options.transitions; this.options.transitions = false; this._fullRedraw(); this.options.transitions = transitions; }, _resize: function() { this.noTransitionsRedraw(); }, _redraw: function() { var navigator = this.navigator; if (!this._dirty() && navigator && navigator.options.partialRedraw) { navigator.redrawSlaves(); } else { this._fullRedraw(); } }, _dirty: function() { var options = this.options; var series = [].concat(options.series, options.navigator.series); var seriesCount = dataviz.grep(series, function(s) { return s && s.visible; }).length; var dirty = this._seriesCount !== seriesCount; this._seriesCount = seriesCount; return dirty; }, _fullRedraw: function() { var navigator = this.navigator; if (!navigator) { navigator = this.navigator = new Navigator(this); this.trigger("navigatorCreated", { navigator: navigator }); } navigator.clean(); navigator.setRange(); Chart.fn._redraw.call(this); navigator.initSelection(); }, _trackSharedTooltip: function(coords) { var plotArea = this._plotArea; var pane = plotArea.paneByPoint(coords); if (pane && pane.options.name === NAVIGATOR_PANE) { this._unsetActivePoint(); } else { Chart.fn._trackSharedTooltip.call(this, coords); } }, bindCategories: function() { Chart.fn.bindCategories.call(this); this.copyNavigatorCategories(); }, copyNavigatorCategories: function() { var definitions = [].concat(this.options.categoryAxis); var categories; for (var axisIx = 0; axisIx < definitions.length; axisIx++) { var axis = definitions[axisIx]; if (axis.name === NAVIGATOR_AXIS) { categories = axis.categories; } else if (categories && axis.pane === NAVIGATOR_PANE) { axis.categories = categories; } } }, destroyNavigator: function() { if (this.navigator) { this.navigator.destroy(); this.navigator = null; } }, destroy: function() { this.destroyNavigator(); Chart.fn.destroy.call(this); }, _stopChartHandlers: function(e) { var coords = this._eventCoordinates(e); var pane = this._plotArea.paneByPoint(coords); return Chart.fn._stopChartHandlers.call(this, e) || (pane && pane.options.name === NAVIGATOR_PANE); } }); dataviz.setDefaultOptions(StockChart, { dateField: "date", axisDefaults: { categoryAxis: { type: "date", baseUnit: "fit", justified: true }, valueAxis: { narrowRange: true, labels: { format: "C" } } }, navigator: { select: {}, seriesDefaults: { markers: { visible: false }, tooltip: { visible: true }, line: { width: 2 } }, hint: {}, visible: true }, tooltip: { visible: true }, legend: { visible: false } }); kendo.deepExtend(kendo.dataviz, { constants: constants, Navigator: Navigator, NavigatorHint: NavigatorHint, StockChart: StockChart }); })(); }, __webpack_require__(3)); /***/ }) /******/ });