juijs-chart
Version:
SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D)
1,403 lines (1,124 loc) • 996 kB
JavaScript
/******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 13);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _juijsGraph = __webpack_require__(14);
var _juijsGraph2 = _interopRequireDefault(_juijsGraph);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _juijsGraph2.default;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
var _bar = __webpack_require__(2);
var _bar2 = _interopRequireDefault(_bar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_main2.default.use(_bar2.default);
exports.default = {
name: "chart.brush.stackbar",
extend: "chart.brush.bar",
component: function component() {
var _ = _main2.default.include("util.base");
var StackBarBrush = function StackBarBrush(chart, axis, brush) {
var g, height, bar_height;
this.addBarElement = function (elem) {
if (this.barList == null) {
this.barList = [];
}
this.barList.push(elem);
};
this.getBarElement = function (dataIndex, targetIndex) {
var style = this.getBarStyle(),
color = this.color(targetIndex),
value = this.getData(dataIndex)[this.brush.target[targetIndex]];
var r = this.chart.svg.rect({
fill: color,
stroke: style.borderColor,
"stroke-width": style.borderWidth,
"stroke-opacity": style.borderOpacity
});
// 데이타가 0이면 화면에 표시하지 않음.
if (value == 0) {
r.attr({ display: 'none' });
}
if (value != 0) {
this.addEvent(r, dataIndex, targetIndex);
}
return r;
};
this.setActiveEffect = function (group) {
var style = this.getBarStyle(),
columns = this.barList,
tooltips = this.stackTooltips;
for (var i = 0; i < columns.length; i++) {
var opacity = group == columns[i] ? 1 : style.disableOpacity;
if (tooltips) {
// bar 가 그려지지 않으면 tooltips 객체가 없을 수 있음.
if (opacity == 1 || _.inArray(i, this.tooltipIndexes) != -1) {
tooltips[i].attr({ opacity: 1 });
} else {
tooltips[i].attr({ opacity: 0 });
}
}
columns[i].attr({ opacity: opacity });
}
};
this.setActiveEffectOption = function () {
var active = this.brush.active;
if (this.barList && this.barList[active]) {
this.setActiveEffect(this.barList[active]);
}
};
this.setActiveEvent = function (group) {
var self = this;
group.on(self.brush.activeEvent, function (e) {
self.setActiveEffect(group);
});
};
this.setActiveEventOption = function (group) {
if (this.brush.activeEvent != null) {
this.setActiveEvent(group);
group.attr({ cursor: "pointer" });
}
};
this.getTargetSize = function () {
var height = this.axis.y.rangeBand();
if (this.brush.size > 0) {
return this.brush.size;
} else {
var size = height - this.brush.outerPadding * 2;
return size < this.brush.minSize ? this.brush.minSize : size;
}
};
this.setActiveTooltips = function (minIndex, maxIndex) {
var type = this.brush.display,
activeIndex = type == "min" ? minIndex : maxIndex;
for (var i = 0; i < this.stackTooltips.length; i++) {
if (i == activeIndex || type == "all") {
this.stackTooltips[i].css({
opacity: 1
});
this.tooltipIndexes.push(i);
}
}
};
this.drawStackTooltip = function (group, index, value, x, y, pos) {
var fontSize = this.chart.theme("tooltipPointFontSize"),
orient = "middle",
dx = 0,
dy = 0;
if (pos == "left") {
orient = "start";
dx = 3;
dy = fontSize / 3;
} else if (pos == "right") {
orient = "end";
dx = -3;
dy = fontSize / 3;
} else if (pos == "top") {
dy = -(fontSize / 3);
} else {
dy = fontSize;
}
var tooltip = this.chart.text({
fill: this.chart.theme("tooltipPointFontColor"),
"font-size": fontSize,
"font-weight": this.chart.theme("tooltipPointFontWeight"),
"text-anchor": orient,
dx: dx,
dy: dy,
opacity: 0
}).text(this.format(value)).translate(x, y);
this.stackTooltips[index] = tooltip;
group.append(tooltip);
};
this.drawStackEdge = function (g) {
var borderWidth = this.chart.theme("barStackEdgeBorderWidth");
for (var i = 1; i < this.edgeData.length; i++) {
var pre = this.edgeData[i - 1],
now = this.edgeData[i];
for (var j = 0; j < this.brush.target.length; j++) {
if (now[j].width > 0 && now[j].height > 0) {
g.append(this.svg.line({
x1: pre[j].x + pre[j].width - pre[j].ex,
x2: now[j].x + now[j].dx - now[j].ex,
y1: pre[j].y + pre[j].height - pre[j].ey,
y2: now[j].y + now[j].dy,
stroke: now[j].color,
"stroke-width": borderWidth
}));
}
}
}
};
this.drawBefore = function () {
g = chart.svg.group();
height = axis.y.rangeBand();
bar_height = this.getTargetSize();
this.stackTooltips = [];
this.tooltipIndexes = [];
this.edgeData = [];
};
this.draw = function () {
var maxIndex = null,
maxValue = 0,
minIndex = null,
minValue = this.axis.x.max(),
isReverse = this.axis.get("x").reverse;
this.eachData(function (data, i) {
var group = chart.svg.group();
var offsetY = this.offset("y", i),
startY = offsetY - bar_height / 2,
startX = axis.x(0),
value = 0,
sumValue = 0;
for (var j = 0; j < brush.target.length; j++) {
var xValue = data[brush.target[j]] + value,
endX = axis.x(xValue),
opts = {
x: startX < endX ? startX : endX,
y: startY,
width: Math.abs(startX - endX),
height: bar_height
},
r = this.getBarElement(i, j).attr(opts);
if (!this.edgeData[i]) {
this.edgeData[i] = {};
}
this.edgeData[i][j] = _.extend({
color: this.color(j),
dx: opts.width,
dy: 0,
ex: isReverse ? opts.width : 0,
ey: 0
}, opts);
startX = endX;
value = xValue;
sumValue += data[brush.target[j]];
group.append(r);
}
// min & max 인덱스 가져오기
if (sumValue > maxValue) {
maxValue = sumValue;
maxIndex = i;
}
if (sumValue < minValue) {
minValue = sumValue;
minIndex = i;
}
this.drawStackTooltip(group, i, sumValue, startX, offsetY, isReverse ? "right" : "left");
this.setActiveEventOption(group); // 액티브 엘리먼트 이벤트 설정
this.addBarElement(group);
g.append(group);
});
// 스탭 연결선 그리기
if (this.brush.edge) {
this.drawStackEdge(g);
}
// 최소/최대/전체 값 표시하기
if (this.brush.display != null) {
this.setActiveTooltips(minIndex, maxIndex);
}
// 액티브 엘리먼트 설정
this.setActiveEffectOption();
return g;
};
};
StackBarBrush.setup = function () {
return {
/** @cfg {Number} [outerPadding=15] Determines the outer margin of a stack bar. */
outerPadding: 15,
/** @cfg {Boolean} [edge=false] */
edge: false
};
};
return StackBarBrush;
}
};
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: "chart.brush.bar",
extend: "chart.brush.core",
component: function component() {
var _ = _main2.default.include("util.base");
var BarBrush = function BarBrush() {
var g;
var zeroX, height, half_height, bar_height;
this.getBarStyle = function () {
return {
borderColor: this.chart.theme("barBorderColor"),
borderWidth: this.chart.theme("barBorderWidth"),
borderOpacity: this.chart.theme("barBorderOpacity"),
borderRadius: this.chart.theme("barBorderRadius"),
disableOpacity: this.chart.theme("barDisableBackgroundOpacity"),
circleColor: this.chart.theme("barPointBorderColor")
};
};
this.getBarElement = function (dataIndex, targetIndex, info) {
var style = this.getBarStyle(),
color = this.color(dataIndex, targetIndex),
value = this.getData(dataIndex)[this.brush.target[targetIndex]];
var r = this.chart.svg.pathRect({
width: info.width,
height: info.height,
fill: color,
stroke: style.borderColor,
"stroke-width": style.borderWidth,
"stroke-opacity": style.borderOpacity
});
if (value != 0) {
this.addEvent(r, dataIndex, targetIndex);
}
if (this.barList == null) {
this.barList = [];
}
this.barList.push(_.extend({
element: r,
color: color
}, info));
return r;
};
this.setActiveEffect = function (r) {
var style = this.getBarStyle(),
cols = this.barList;
for (var i = 0; i < cols.length; i++) {
var opacity = cols[i] == r ? 1 : style.disableOpacity;
cols[i].element.attr({ opacity: opacity });
if (cols[i].minmax) {
cols[i].minmax.style(cols[i].color, style.circleColor, opacity);
}
}
};
this.drawBefore = function () {
var op = this.brush.outerPadding,
ip = this.brush.innerPadding,
len = this.brush.target.length;
g = this.chart.svg.group();
zeroX = this.axis.x(0);
height = this.axis.y.rangeBand();
if (this.brush.size > 0) {
bar_height = this.brush.size;
half_height = bar_height * len + (len - 1) * ip;
} else {
half_height = height - op * 2;
bar_height = (half_height - (len - 1) * ip) / len;
bar_height = bar_height < 0 ? 0 : bar_height;
}
};
this.drawETC = function (group) {
if (!_.typeCheck("array", this.barList)) return;
var self = this,
style = this.getBarStyle();
// 액티브 툴팁 생성
this.active = this.drawTooltip();
group.append(this.active.tooltip);
for (var i = 0; i < this.barList.length; i++) {
var r = this.barList[i],
d = this.brush.display;
// Max & Min 툴팁 생성
if (d == "max" && r.max || d == "min" && r.min || d == "all") {
r.minmax = this.drawTooltip(r.color, style.circleColor, 1);
r.minmax.control(r.position, r.tooltipX, r.tooltipY, this.format(r.value));
group.append(r.minmax.tooltip);
}
// 컬럼 및 기본 브러쉬 이벤트 설정
if (r.value != 0 && this.brush.activeEvent != null) {
(function (bar) {
self.active.style(bar.color, style.circleColor, 1);
bar.element.on(self.brush.activeEvent, function (e) {
self.active.style(bar.color, style.circleColor, 1);
self.active.control(bar.position, bar.tooltipX, bar.tooltipY, self.format(bar.value));
self.setActiveEffect(bar);
});
bar.element.attr({ cursor: "pointer" });
})(r);
}
}
// 액티브 툴팁 위치 설정
var r = this.barList[this.brush.active];
if (r != null) {
this.active.style(r.color, style.circleColor, 1);
this.active.control(r.position, r.tooltipX, r.tooltipY, this.format(r.value));
this.setActiveEffect(r);
}
};
this.draw = function () {
var points = this.getXY(),
style = this.getBarStyle();
this.eachData(function (data, i) {
var startY = this.offset("y", i) - half_height / 2;
for (var j = 0; j < this.brush.target.length; j++) {
var value = data[this.brush.target[j]],
tooltipX = this.axis.x(value),
tooltipY = startY + bar_height / 2,
position = tooltipX >= zeroX ? "right" : "left";
// 최소 크기 설정
if (Math.abs(zeroX - tooltipX) < this.brush.minSize) {
tooltipX = position == "right" ? tooltipX + this.brush.minSize : tooltipX - this.brush.minSize;
}
var width = Math.abs(zeroX - tooltipX),
radius = width < style.borderRadius || bar_height < style.borderRadius ? 0 : style.borderRadius,
r = this.getBarElement(i, j, {
width: width,
height: bar_height,
value: value,
tooltipX: tooltipX,
tooltipY: tooltipY,
position: position,
max: points[j].max[i],
min: points[j].min[i]
});
if (tooltipX >= zeroX) {
r.round(width, bar_height, 0, radius, radius, 0);
r.translate(zeroX, startY);
} else {
r.round(width, bar_height, radius, 0, 0, radius);
r.translate(zeroX - width, startY);
}
// 그룹에 컬럼 엘리먼트 추가
g.append(r);
// 다음 컬럼 좌표 설정
startY += bar_height + this.brush.innerPadding;
}
});
this.drawETC(g);
return g;
};
this.drawAnimate = function (root) {
var svg = this.chart.svg,
type = this.brush.animate;
root.append(svg.animate({
attributeName: "opacity",
from: "0",
to: "1",
begin: "0s",
dur: "1.4s",
repeatCount: "1",
fill: "freeze"
}));
root.each(function (i, elem) {
if (elem.is("util.svg.element.path")) {
var xy = elem.data("translate").split(","),
x = parseInt(xy[0]),
y = parseInt(xy[1]),
w = parseInt(elem.attr("width")),
start = type == "right" ? x + w : x - w;
elem.append(svg.animateTransform({
attributeName: "transform",
type: "translate",
from: start + " " + y,
to: x + " " + y,
begin: "0s",
dur: "0.7s",
repeatCount: "1",
fill: "freeze"
}));
}
});
};
};
BarBrush.setup = function () {
return {
/** @cfg {Number} [size=0] Set a fixed size of the bar. */
size: 0,
/** @cfg {Number} [minSize=0] Sets the minimum size as it is not possible to draw a bar when the value is 0. */
minSize: 0,
/** @cfg {Number} [outerPadding=2] Determines the outer margin of a bar. */
outerPadding: 2,
/** @cfg {Number} [innerPadding=1] Determines the inner margin of a bar. */
innerPadding: 1,
/** @cfg {Number} [active=null] Activates the bar of an applicable index. */
active: null,
/** @cfg {String} [activeEvent=null] Activates the bar in question when a configured event occurs (click, mouseover, etc). */
activeEvent: null,
/** @cfg {"max"/"min"/"all"} [display=null] Shows a tool tip on the bar for the minimum/maximum value. */
display: null,
/** @cfg {Function} [format=null] Sets the format of the value that is displayed on the tool tip. */
format: null
};
};
return BarBrush;
}
};
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: "chart.brush.line",
extend: "chart.brush.core",
component: function component() {
var _ = _main2.default.include("util.base");
var LineBrush = function LineBrush() {
var g;
var circleColor, disableOpacity, lineBorderWidth, lineBorderDashArray, lineBorderOpacity;
this.setActiveEffect = function (elem) {
var lines = this.lineList;
for (var i = 0; i < lines.length; i++) {
var opacity = elem == lines[i].element ? lineBorderOpacity : disableOpacity,
color = lines[i].element.get(0).attr("stroke");
if (lines[i].tooltip != null) {
lines[i].tooltip.style(color, circleColor, opacity);
}
lines[i].element.attr({ opacity: opacity });
}
};
this.setActiveEffects = function () {
var lines = this.lineList,
active = this.brush.active;
for (var i = 0; i < lines.length; i++) {
var target = this.brush.target[i],
opacity = disableOpacity,
color = lines[i].element.get(0).attr("stroke");
if (active === null || active === target || _.typeCheck("array", active) && active.includes(target)) {
opacity = lineBorderOpacity;
}
if (lines[i].tooltip != null) {
lines[i].tooltip.style(color, circleColor, opacity);
}
lines[i].element.attr({ opacity: opacity });
}
};
this.addLineElement = function (elem) {
if (!this.lineList) {
this.lineList = [];
}
this.lineList.push(elem);
};
this.createLine = function (pos, tIndex) {
var x = pos.x,
y = pos.y,
v = pos.value,
px = this.brush.symbol == "curve" ? this.curvePoints(x) : null,
py = this.brush.symbol == "curve" ? this.curvePoints(y) : null,
color = null,
opacity = null,
opts = {
"stroke-width": lineBorderWidth,
"stroke-dasharray": lineBorderDashArray,
fill: "transparent",
"cursor": this.brush.activeEvent != null ? "pointer" : "normal"
};
var g = this.svg.group(),
p = null;
if (pos.length > 0) {
var start = null,
end = null;
for (var i = 0; i < x.length - 1; i++) {
if (!_.typeCheck(["undefined", "null"], v[i])) start = i;
if (!_.typeCheck(["undefined", "null"], v[i + 1])) end = i + 1;
if (start == null || end == null || start == end) continue;
var newColor = this.color(i, tIndex),
newOpacity = this.getOpacity(i);
if (color != newColor || opacity != newOpacity) {
p = this.svg.path(_.extend({
"stroke-opacity": newOpacity,
stroke: newColor,
x1: x[start] // Start coordinates of area brush
}, opts));
p.css({
"pointer-events": "stroke"
});
p.MoveTo(x[start], y[start]);
g.append(p);
color = newColor;
opacity = newOpacity;
} else {
p.attr({
x2: x[end] // End coordinates of area brush
});
}
if (this.brush.symbol == "curve") {
p.CurveTo(px.p1[start], py.p1[start], px.p2[start], py.p2[start], x[end], y[end]);
} else {
if (this.brush.symbol == "step") {
var sx = x[start] + (x[end] - x[start]) / 2;
p.LineTo(sx, y[start]);
p.LineTo(sx, y[end]);
}
p.LineTo(x[end], y[end]);
}
}
}
return g;
};
this.createTooltip = function (g, pos, index) {
var display = this.brush.display;
for (var i = 0; i < pos.x.length; i++) {
if (display == "max" && pos.max[i] || display == "min" && pos.min[i] || display == "all") {
var orient = display == "max" && pos.max[i] ? "top" : "bottom",
tooltip = this.lineList[index].tooltip;
// 최소/최대 값은 무조건 한개만 보여야 함.
if (display == "all" || tooltip == null) {
var minmax = this.drawTooltip(this.color(index), circleColor, lineBorderOpacity);
minmax.control(orient, +pos.x[i], +pos.y[i], this.format(pos.value[i]));
g.append(minmax.tooltip);
this.lineList[index].tooltip = minmax;
}
}
}
};
this.getOpacity = function (rowIndex) {
var opacity = this.brush.opacity,
defOpacity = this.chart.theme("lineBorderOpacity");
if (_.typeCheck("function", opacity) && _.typeCheck("number", rowIndex)) {
return opacity.call(this.chart, this.getData(rowIndex), rowIndex);
} else if (_.typeCheck("number", opacity)) {
return opacity;
}
return defOpacity;
};
this.drawLine = function (path) {
var self = this;
for (var k = 0; k < path.length; k++) {
var p = this.createLine(path[k], k);
this.addEvent(p, null, k);
g.append(p);
// 컬럼 상태 설정
this.addLineElement({
element: p,
tooltip: null
});
// Max & Min 툴팁 추가
if (this.brush.display != null) {
this.createTooltip(g, path[k], k);
}
// 액티브 이벤트 설정
if (this.brush.activeEvent != null) {
(function (elem) {
elem.on(self.brush.activeEvent, function (e) {
self.setActiveEffect(elem);
});
})(p);
}
}
// 액티브 라인 설정
if (this.brush.active != null) {
this.setActiveEffects();
}
return g;
};
this.drawBefore = function () {
g = this.chart.svg.group();
circleColor = this.chart.theme("linePointBorderColor");
disableOpacity = this.chart.theme("lineDisableBorderOpacity");
lineBorderWidth = this.chart.theme("lineBorderWidth");
lineBorderDashArray = this.chart.theme("lineBorderDashArray");
lineBorderOpacity = this.getOpacity(null);
};
this.draw = function () {
return this.drawLine(this.getXY());
};
this.drawAnimate = function (root) {
var svg = this.chart.svg;
root.each(function (i, elem) {
if (elem.is("util.svg.element.path")) {
var dash = elem.attributes["stroke-dasharray"],
len = elem.length();
if (dash == "none") {
elem.attr({
"stroke-dasharray": len
});
elem.append(svg.animate({
attributeName: "stroke-dashoffset",
from: len,
to: "0",
begin: "0s",
dur: "1s",
repeatCount: "1"
}));
} else {
elem.append(svg.animate({
attributeName: "opacity",
from: "0",
to: "1",
begin: "0s",
dur: "1.5s",
repeatCount: "1",
fill: "freeze"
}));
}
}
});
};
};
LineBrush.setup = function () {
return {
/** @cfg {"normal"/"curve"/"step"} [symbol="normal"] Sets the shape of a line (normal, curve, step). */
symbol: "normal", // normal, curve, step
/** @cfg {Number} [active=null] Activates the bar of an applicable index. */
active: null,
/** @cfg {String} [activeEvent=null] Activates the bar in question when a configured event occurs (click, mouseover, etc). */
activeEvent: null,
/** @cfg {"max"/"min"/"all"} [display=null] Shows a tool tip on the bar for the minimum/maximum value. */
display: null,
/** @cfg {Number} [opacity=null] Stroke opacity. */
opacity: null
};
};
return LineBrush;
}
};
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
var _line = __webpack_require__(3);
var _line2 = _interopRequireDefault(_line);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_main2.default.use(_line2.default);
exports.default = {
name: "chart.brush.area",
extend: "chart.brush.line",
component: function component() {
var _ = _main2.default.include("util.base");
var AreaBrush = function AreaBrush() {
this.drawArea = function (path) {
var g = this.chart.svg.group(),
y = this.axis.y(this.brush.startZero ? 0 : this.axis.y.min()),
opacity = _.typeCheck("number", this.brush.opacity) ? this.brush.opacity : this.chart.theme("areaBackgroundOpacity");
for (var k = 0; k < path.length; k++) {
var children = this.createLine(path[k], k).children;
for (var i = 0; i < children.length; i++) {
var p = children[i];
// opacity 옵션이 콜백함수 일때, 상위 클래스 설정을 따름.
if (_.typeCheck("function", this.brush.opacity)) {
opacity = p.attr("stroke-opacity");
}
if (path[k].length > 0) {
p.LineTo(p.attr("x2"), y);
p.LineTo(p.attr("x1"), y);
p.ClosePath();
}
p.attr({
fill: p.attr("stroke"),
"fill-opacity": opacity,
"stroke-width": 0
});
g.prepend(p);
}
if (this.brush.line) {
var p = this.createLine(path[k], k);
g.prepend(p);
this.addLineElement({
element: p,
tooltip: null
});
if (this.brush.display) {
this.createTooltip(g, path[k], k);
}
}
this.addEvent(g, null, k);
}
return g;
};
this.draw = function () {
return this.drawArea(this.getXY());
};
this.drawAnimate = function (root) {
root.append(this.chart.svg.animate({
attributeName: "opacity",
from: "0",
to: "1",
begin: "0s",
dur: "1.5s",
repeatCount: "1",
fill: "freeze"
}));
};
};
AreaBrush.setup = function () {
return {
/** @cfg {"normal"/"curve"/"step"} [symbol="normal"] Sets the shape of a line (normal, curve, step). */
symbol: "normal", // normal, curve, step
/** @cfg {Number} [active=null] Activates the bar of an applicable index. */
active: null,
/** @cfg {String} [activeEvent=null] Activates the bar in question when a configured event occurs (click, mouseover, etc). */
activeEvent: null,
/** @cfg {"max"/"min"} [display=null] Shows a tool tip on the bar for the minimum/maximum value. */
display: null,
/** @cfg {Boolean} [startZero=true] The end of the area is zero point. */
startZero: true,
/** @cfg {Boolean} [line=true] Visible line */
line: true
};
};
return AreaBrush;
}
};
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
var _stackbar = __webpack_require__(1);
var _stackbar2 = _interopRequireDefault(_stackbar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_main2.default.use(_stackbar2.default);
exports.default = {
name: "chart.brush.fullstackbar",
extend: "chart.brush.stackbar",
component: function component() {
var _ = _main2.default.include("util.base");
var FullStackBarBrush = function FullStackBarBrush(chart, axis, brush) {
var g, zeroX, height, bar_height;
this.drawBefore = function () {
g = chart.svg.group();
zeroX = axis.x(0);
height = axis.y.rangeBand();
bar_height = this.getTargetSize();
};
this.drawText = function (percent, x, y) {
if (percent === 0 || isNaN(percent)) return null;
var result = _.typeCheck("function", this.brush.showText) ? this.brush.showText.call(this, percent) : percent + "%";
var text = this.chart.text({
"font-size": this.chart.theme("barFontSize"),
fill: this.chart.theme("barFontColor"),
x: x,
y: y,
"text-anchor": "middle"
}, result);
return text;
};
this.draw = function () {
this.eachData(function (data, i) {
var group = chart.svg.group();
var startY = this.offset("y", i) - bar_height / 2,
sum = 0,
list = [];
for (var j = 0; j < brush.target.length; j++) {
var width = data[brush.target[j]];
sum += width;
list.push(width);
}
var startX = 0,
max = axis.x.max();
for (var j = 0; j < list.length; j++) {
var width = axis.x.rate(list[j], sum),
r = this.getBarElement(i, j);
if (isNaN(width)) continue;
r.attr({
x: startX,
y: startY,
width: width,
height: bar_height
});
group.append(r);
// 퍼센트 노출 옵션 설정
if (brush.showText !== false) {
var p = Math.round(list[j] / sum * max),
x = startX + width / 2,
y = startY + bar_height / 2 + 5,
text = this.drawText(p, x, y);
if (text != null) group.append(text);
}
// 액티브 엘리먼트 이벤트 설정
this.setActiveEventOption(group);
startX += width;
}
this.addBarElement(group);
g.append(group);
});
// 액티브 엘리먼트 설정
this.setActiveEffectOption();
return g;
};
};
FullStackBarBrush.setup = function () {
return {
/** @cfg {Number} [outerPadding=15] */
outerPadding: 15,
/** @cfg {Boolean} [showText=false] Configures settings to let the percent text of a full stack bar revealed. */
showText: false
};
};
return FullStackBarBrush;
}
};
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
var _stackbar = __webpack_require__(1);
var _stackbar2 = _interopRequireDefault(_stackbar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_main2.default.use(_stackbar2.default);
exports.default = {
name: "chart.brush.stackcolumn",
extend: "chart.brush.stackbar",
component: function component() {
var _ = _main2.default.include("util.base");
var StackColumnBrush = function StackColumnBrush(chart, axis, brush) {
var g, zeroY, bar_width;
this.getTargetSize = function () {
var width = this.axis.x.rangeBand();
if (this.brush.size > 0) {
return this.brush.size;
} else {
var size = width - this.brush.outerPadding * 2;
return size < this.brush.minSize ? this.brush.minSize : size;
}
};
this.drawBefore = function () {
g = chart.svg.group();
zeroY = axis.y(0);
bar_width = this.getTargetSize();
this.stackTooltips = [];
this.tooltipIndexes = [];
this.edgeData = [];
};
this.draw = function () {
var maxIndex = null,
maxValue = 0,
minIndex = null,
minValue = this.axis.y.max(),
isReverse = this.axis.get("y").reverse;
this.eachData(function (data, i) {
var group = chart.svg.group();
var offsetX = this.offset("x", i),
startX = offsetX - bar_width / 2,
startY = axis.y(0),
value = 0,
sumValue = 0;
for (var j = 0; j < brush.target.length; j++) {
var yValue = data[brush.target[j]] + value,
endY = axis.y(yValue),
opts = {
x: startX,
y: startY > endY ? endY : startY,
width: bar_width,
height: Math.abs(startY - endY)
},
r = this.getBarElement(i, j).attr(opts);
if (!this.edgeData[i]) {
this.edgeData[i] = {};
}
this.edgeData[i][j] = _.extend({
color: this.color(j),
dx: 0,
dy: isReverse ? opts.height : 0,
ex: 0,
ey: isReverse ? 0 : opts.height
}, opts);
startY = endY;
value = yValue;
sumValue += data[brush.target[j]];
group.append(r);
}
// min & max 인덱스 가져오기
if (sumValue > maxValue) {
maxValue = sumValue;
maxIndex = i;
}
if (sumValue < minValue) {
minValue = sumValue;
minIndex = i;
}
this.drawStackTooltip(group, i, sumValue, offsetX, startY, isReverse ? "bottom" : "top");
this.setActiveEventOption(group); // 액티브 엘리먼트 이벤트 설정
this.addBarElement(group);
g.append(group);
});
// 스탭 연결선 그리기
if (this.brush.edge) {
this.drawStackEdge(g);
}
// 최소/최대/전체 값 표시하기
if (this.brush.display != null) {
this.setActiveTooltips(minIndex, maxIndex);
}
// 액티브 엘리먼트 설정
this.setActiveEffectOption();
return g;
};
};
return StackColumnBrush;
}
};
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _main = __webpack_require__(0);
var _main2 = _interopRequireDefault(_main);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = {
name: "chart.brush.scatter",
extend: "chart.brush.core",
component: function component() {
var _ = _main2.default.include("util.base");
var ScatterBrush = function ScatterBrush() {
this.getSymbolType = function (key, value) {
var symbol = this.brush.symbol,
target = this.brush.target[key];
if (_.typeCheck("function", symbol)) {
var res = symbol.apply(this.chart, [target, value]);
if (res == "triangle" || res == "cross" || res == "rectangle" || res == "rect" || res == "circle") {
return {
type: "default",
uri: res
};
} else {
return {
type: "image",
uri: res
};
}
}
return {
type: "default",
uri: symbol
};
};
this.createScatter = function (pos, dataIndex, targetIndex, symbol) {
var self = this,
elem = null,
w = this.brush.size,
h = this.brush.size;
var color = this.color(dataIndex, targetIndex),
borderColor = this.chart.theme("scatterBorderColor"),
borderWidth = this.chart.theme("scatterBorderWidth"),
bgOpacity = this.brush.opacity;
if (symbol.type == "image") {
elem = this.chart.svg.image({
"xlink:href": symbol.uri,
width: w + borderWidth,
height: h + borderWidth,
x: pos.x - w / 2 - borderWidth,
y: pos.y - h / 2
});
} else {
if (symbol.uri == "triangle" || symbol.uri == "cross") {
elem = this.chart.svg.group({
width: w,
height: h,
opacity: bgOpacity
}, function () {
if (symbol.uri == "triangle") {
var poly = self.chart.svg.polygon(