From 53f2fba72f2e315f4fc77a46a9b63a05f7be4983 Mon Sep 17 00:00:00 2001 From: lang Date: Sat, 26 Dec 2015 00:29:47 +0800 Subject: [PATCH] Improved dataView --- src/component/toolbox.js | 1 + src/component/toolbox/ToolboxModel.js | 2 +- src/component/toolbox/feature/DataView.js | 206 +++++++++++++++++++++- src/component/tooltip/TooltipView.js | 5 +- test/bar.html | 1 + 5 files changed, 209 insertions(+), 6 deletions(-) diff --git a/src/component/toolbox.js b/src/component/toolbox.js index b84286521..b8553cfac 100644 --- a/src/component/toolbox.js +++ b/src/component/toolbox.js @@ -5,4 +5,5 @@ define(function (require) { require('./toolbox/feature/SaveAsImage'); require('./toolbox/feature/MagicType'); + require('./toolbox/feature/DataView'); }); \ No newline at end of file diff --git a/src/component/toolbox/ToolboxModel.js b/src/component/toolbox/ToolboxModel.js index d6746d9fc..18ac596e1 100644 --- a/src/component/toolbox/ToolboxModel.js +++ b/src/component/toolbox/ToolboxModel.js @@ -39,7 +39,7 @@ define(function (require) { borderWidth: 0, - padding: 10, + padding: 5, itemSize: 15, diff --git a/src/component/toolbox/feature/DataView.js b/src/component/toolbox/feature/DataView.js index cd7277f42..17312adae 100644 --- a/src/component/toolbox/feature/DataView.js +++ b/src/component/toolbox/feature/DataView.js @@ -1,3 +1,207 @@ define(function (require) { - + + var zrUtil = require('zrender/core/util'); + var eventTool = require('zrender/core/event'); + + /** + * Group series into two types + * 1. on category axis, like line, bar + * 2. others, like scatter, pie + * @param {module:echarts/model/Global} ecModel + * @return {Object} + */ + function groupSeries(ecModel) { + var seriesGroupByCategoryAxis = {}; + var otherSeries = []; + ecModel.eachRawSeries(function (seriesModel) { + var coordSys = seriesModel.coordinateSystem; + + if (coordSys && (coordSys.type === 'cartesian2d' || coordSys.type === 'polar')) { + var baseAxis = coordSys.getBaseAxis(); + if (baseAxis.type === 'category') { + var key = baseAxis.dim + '_' + baseAxis.index; + seriesGroupByCategoryAxis[key] = seriesGroupByCategoryAxis[key] || { + categoryAxis: baseAxis, + valueAxis: coordSys.getOtherAxis(baseAxis), + series: [] + }; + seriesGroupByCategoryAxis[key].series.push(seriesModel); + } + } + else { + otherSeries.push(seriesModel); + } + }); + return { + seriesGroupByCategoryAxis: seriesGroupByCategoryAxis, + other: otherSeries + }; + } + + /** + * Assemble content of series on cateogory axis + * @param {Array.} series + * @return {string} + */ + function assembleSeriesWithCategoryAxis(series) { + var tables = []; + zrUtil.each(series, function (group, key) { + var categoryAxis = group.categoryAxis; + var valueAxis = group.valueAxis; + var valueAxisDim = valueAxis.dim; + + var headers = ['类目'].concat(zrUtil.map(group.series, function (series) { + return series.name; + })); + var columns = [categoryAxis.model.getCategories()]; + zrUtil.each(group.series, function (series) { + columns.push(series.getData().mapArray(valueAxisDim, function (val) { + return val; + })); + }); + // Assemble table content + var lines = [headers.join('\t')]; + for (var i = 0; i < columns[0].length; i++) { + var items = []; + for (var j = 0; j < columns.length; j++) { + items.push(columns[j][i]); + } + lines.push(items.join('\t')); + } + tables.push(lines.join('\n')); + }); + return tables.join('\n\n\n'); + } + + /** + * Assemble content of other series + * @param {Array.} series + * @return {string} + */ + function assembleOtherSeries(series) { + return zrUtil.map(series, function (series) { + var data = series.getData(); + var lines = [series.name]; + data.each(data.dimensions, function () { + var argLen = arguments.length; + var dataIndex = arguments[argLen - 1]; + var vals = zrUtil.slice(arguments, 0, argLen - 1); + var name = data.getName(dataIndex); + if (name) { + vals.unshift(name); + } + lines.push(vals.join('\t')); + }); + return lines.join('\n'); + }).join('\n\n\n'); + } + + /** + * @param {module:echarts/model/Global} + * @return {string} + */ + function getContentFromModel(ecModel) { + + var result = groupSeries(ecModel); + + return [ + assembleSeriesWithCategoryAxis(result.seriesGroupByCategoryAxis), + assembleOtherSeries(result.other) + ].join('\n\n\n'); + } + + function DataView(model) { + + this._dom = null; + + this.model = model; + } + + + DataView.defaultOption = { + show: true, + readOnly: false, + icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28', + title: '数据视图', + lang: ['数据视图', '关闭', '刷新'] + }; + + + DataView.prototype.onclick = function (ecModel, api) { + var container = api.getDom(); + var model = this.model; + if (this._dom) { + container.removeChild(this._dom); + } + var root = document.createElement('div'); + root.style.cssText = 'position:absolute;left:5;top:5;bottom:5;right:5;' + + 'background-color: white'; + + // Create elements + var header = document.createElement('h4'); + var lang = model.get('lang') || []; + header.innerHTML = lang[0] || model.get('title'); + header.style.cssText = 'margin: 10px 20px;'; + var textarea = document.createElement('textarea'); + textarea.style.cssText = 'display:block;width:100%;font-size:14px;line-height:1.6rem;font-family:Monaco,Consolas,Courier New'; + textarea.textContent = getContentFromModel(ecModel); + + var buttonContainer = document.createElement('div'); + buttonContainer.style.cssText = 'position:absolute;bottom:0;left:0;right:0;'; + + var buttonStyle = 'float:right;margin-right:20px;border:none;background:#c23531;' + + 'cursor:pointer;padding:4px 8px;color:#fff;font-size:12px;border-radius:3px;'; + var closeButton = document.createElement('div'); + var refreshButton = document.createElement('div'); + + var self = this; + eventTool.addEventListener(closeButton, 'click', function () { + container.removeChild(root); + self._dom = null; + }); + + closeButton.innerHTML = lang[1]; + refreshButton.innerHTML = lang[2]; + refreshButton.style.cssText = buttonStyle; + closeButton.style.cssText = buttonStyle; + + buttonContainer.appendChild(refreshButton); + buttonContainer.appendChild(closeButton); + + // http://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea + eventTool.addEventListener(textarea, 'keydown', function (e) { + if ((e.keyCode || e.which) === 9) { + // get caret position/selection + var val = this.value; + var start = this.selectionStart; + var end = this.selectionEnd; + + // set textarea value to: text before caret + tab + text after caret + this.value = val.substring(0, start) + '\t' + val.substring(end); + + // put caret at right position again + this.selectionStart = this.selectionEnd = start + 1; + + // prevent the focus lose + eventTool.stop(e); + } + }); + + root.appendChild(header); + root.appendChild(textarea); + root.appendChild(buttonContainer); + + textarea.style.height = (container.clientHeight - 100) + 'px'; + + container.appendChild(root); + this._dom = root; + }; + + DataView.prototype.dispose = function (ecModel, api) { + this._dom && api.getDom().removeChild(this._dom); + }; + + require('../featureManager').register('dataView', DataView); + + return DataView; }); \ No newline at end of file diff --git a/src/component/tooltip/TooltipView.js b/src/component/tooltip/TooltipView.js index 0907a10e8..05a72980e 100644 --- a/src/component/tooltip/TooltipView.js +++ b/src/component/tooltip/TooltipView.js @@ -318,10 +318,7 @@ define(function (require) { if (coordSys.type === 'cartesian2d') { // FIXME `axisPointer.axis` is not baseAxis baseAxis = coordSys.getBaseAxis(); - var baseDim = baseAxis.dim; - var axisIndex = seriesModel.get(baseDim + 'AxisIndex'); - - key = baseDim + axisIndex; + key = baseAxis.dim + baseAxis.index; } else { baseAxis = coordSys.getBaseAxis(); diff --git a/test/bar.html b/test/bar.html index 5e9a6aa60..5b1ebc7ac 100644 --- a/test/bar.html +++ b/test/bar.html @@ -84,6 +84,7 @@ magicType: { type: ['line', 'bar', 'stack', 'tiled'] }, + dataView: {}, saveAsImage: {} } }, -- GitLab