781 lines
29 KiB
JavaScript
781 lines
29 KiB
JavaScript
function ZtAreaChart() {
|
|
StdChart.apply(this, ["AREA", "f1fe"]);
|
|
this.itemsHover = [];
|
|
this.holesIndexList = {};
|
|
}
|
|
ZtAreaChart.prototype = Object.create(ZtLinesChart.prototype);
|
|
ZtAreaChart.prototype.constructor = ZtAreaChart;
|
|
|
|
ZtAreaChart.prototype._SetChartSettingsJSON = function () {
|
|
ZtLinesChart.prototype._SetChartSettingsJSON.call(this);
|
|
this.defSettings.shape.onlyHover = false;
|
|
this.defSettings.fillTransparency = this.chartConfig.graphSettings.fillTransparency;
|
|
if (this.chartConfig.graphSettings.selectionOptions.opacity == "default")
|
|
this.defSettings.selectionOptions.opacity = 0.25;
|
|
}
|
|
|
|
ZtAreaChart.prototype._SetDomainScaleParameters = function () {
|
|
ZtLinesChart.prototype._SetDomainScaleParameters.call(this);
|
|
if (this.defSettings.line.extArea) {
|
|
if (!this.domainIsTime && !this.domainIsNumber) {
|
|
var dlist = this._GetOppositeAxisDrawingList(true);
|
|
this.scaleX = d3.scalePoint().domain(dlist).range([0, this.chartWidth]);
|
|
}
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._SetValueScaleParameters = function (scaleKey, scaleY, min, max) {
|
|
return ZtBarChart.prototype._SetVerticalValueScaleParameters.call(this, scaleKey, scaleY, min, max);
|
|
}
|
|
|
|
ZtAreaChart.prototype._DrawChartElements = function () {
|
|
var group = this.renderer.append("g")
|
|
.attr("id", this.chartId + this.type + "_elementGroup")
|
|
.attr("transform", "translate(" + [this.margin.left, this.margin.top] + ")"),
|
|
sgroup = this.renderer.append("g")
|
|
.attr("id", this.chartId + this.type + "_elementGroupS")
|
|
.attr("transform", "translate(" + [this.margin.left, this.margin.top] + ")"),
|
|
hgroup = this.renderer.append("g")
|
|
.attr("id", this.chartId + this.type + "_elementGroupH")
|
|
.attr("transform", "translate(" + [this.margin.left, this.margin.top] + ")");
|
|
|
|
var yIndex = -1,
|
|
dSeries = this._GetDrawingList(),
|
|
cobj = {},
|
|
cData;
|
|
for (var i = 0; i < dSeries.length; i++) {
|
|
yIndex = this.propertyName.indexOf(dSeries[i]);
|
|
group.append("clipPath")
|
|
.attr("id", this.chartId + i + "_clip")
|
|
.append("rect")
|
|
.attr("width", 1)
|
|
.attr("height", this.chartHeight);
|
|
cobj = {};
|
|
cobj.scaleY = this.scaleY[dSeries[i]];
|
|
cobj.valueField = dSeries[i];
|
|
if (!this.holesIndexList[dSeries[i]])
|
|
this.holesIndexList[dSeries[i]] = [];
|
|
if (!this.domainIsTime || (this.domainIsTime && this.defSettings.time.dataType == "default"))
|
|
cData = this.dataSet;
|
|
else
|
|
cData = this._EvaluateTimeDataset(this.dataSet, this.xIndex, yIndex, this.holesIndexList[dSeries[i]]);
|
|
this.DrawLine(group, cData, i, this.xIndex, yIndex, cobj);
|
|
this.DrawArea(group, cData, i, this.xIndex, yIndex, cobj);
|
|
this.DrawShapes(sgroup, cData, i, this.xIndex, yIndex, cobj);
|
|
cobj.line = this.items[this.items.length - 2].itm;
|
|
cobj.item = this.items.length - 1;
|
|
|
|
hgroup.append("clipPath")
|
|
.attr("id", this.chartId + "clipArea_" + i)
|
|
.append("path")
|
|
.attr("d", d3.select(this.items[this.items.length - 1].itm).attr("d"));
|
|
|
|
this._DrawRectHover(hgroup, this.chartId + "clipArea_" + i, cData, i, cobj.item);
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._SetElementsColor = function () {
|
|
this.SetColorSet();
|
|
var idx = -1,
|
|
stroke,
|
|
gradID;
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
idx = this.valueFields.indexOf(this.items[i].valueField);
|
|
if (idx >= 0) {
|
|
this.items[i].idx = idx;
|
|
this.items[i].sidx = this.orgCategoryList.indexOf(this.items[i].category);
|
|
this.items[i].color = this.colorSet[idx];
|
|
if (this.defSettings.useColorSeriesForEach)
|
|
this.items[i].color = this.colorSet[i];
|
|
if (this.defSettings.shape.draw && this.defSettings.shape.onlyShapes)
|
|
this.items[i].color = { color : "transparent", gradient : "" };
|
|
var styleObj = {};
|
|
styleObj.fill = "transparent";
|
|
stroke = 1;
|
|
if (!Empty(this.defSettings.line.stroke) && !isNaN(this.defSettings.line.stroke) && this.defSettings.line.stroke > 0)
|
|
stroke = this.defSettings.line.stroke;
|
|
styleObj.stroke9width = stroke + "px";
|
|
gradID = this.chartId + this.type + "_" + idx + "Gradient";
|
|
if (!Empty(this.items[i].color.color) && Empty(this.items[i].color.gradient) || this.items[i].color.color.toLowerCase() == this.items[i].color.gradient.toLowerCase())
|
|
stroke = this.items[i].color.color;
|
|
else if (Empty(this.items[i].color.color) && !Empty(this.items[i].color.gradient))
|
|
stroke = this.items[i].color.gradient;
|
|
else {
|
|
this.CreateGradient(this.items[i].color.color, this.items[i].color.gradient, gradID, "element");
|
|
stroke = "url(#" + gradID + ")";
|
|
}
|
|
styleObj.stroke = stroke;
|
|
if (this.items[i].itemType == "area") {
|
|
styleObj.stroke = "none";
|
|
styleObj.fill = stroke;
|
|
styleObj.fill9opacity = this.defSettings.fillTransparency ? 0.25 : 1;
|
|
}
|
|
else {
|
|
if (!Empty(this.defSettings.line.color)) {
|
|
var colors = this.defSettings.line.color.split(";");
|
|
styleObj.stroke = colors[idx] || stroke;
|
|
}
|
|
}
|
|
this.items[i].colorApplied = stroke;
|
|
if (this.items[i].colorApplied.indexOf("Gradient") >= 0)
|
|
this.items[i].colorApplied = this.items[i].color.color;
|
|
d3.select(this.items[i].itm).attr("style", makeStyleHTMLString(styleObj, d3.select(this.items[i].itm).attr("style")));
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
ZtAreaChart.prototype.AfterDraw = function () {
|
|
StdChart.prototype.AfterDraw.call(this); return;
|
|
console.log(this)
|
|
|
|
var _this = this,
|
|
finished = false,
|
|
interval = setInterval ( function () {
|
|
if (finished) {
|
|
clearInterval(interval);
|
|
_this._AfterAreaDraw();
|
|
return;
|
|
}
|
|
|
|
finished = _this._DrawHoverCount();
|
|
}, (this.defSettings.animation.duration / this.items.length));
|
|
}
|
|
*/
|
|
ZtAreaChart.prototype._AfterAreaDraw = function () {
|
|
StdChart.prototype.AfterDraw.call(this);
|
|
StdChart.prototype.DrawChartMenu.call(this);
|
|
}
|
|
|
|
ZtAreaChart.prototype._AnimateChartElements = function () {
|
|
var clips = [], i;
|
|
for (i = 0; i < this.items.length; i++) {
|
|
var elem = this.items[i].itm;
|
|
if (!elem)
|
|
continue;
|
|
if (this.items[i].itemType == "area") {
|
|
var bbox = elem.getBBox();
|
|
d3.select("#" + this.chartId + this.items[i].idx + "_clip rect")
|
|
.attr("x", bbox.x)
|
|
.attr("y", 0/*bbox.y*/)
|
|
clips.push(bbox.width);
|
|
}
|
|
d3.select(elem).attr("clip-path", "url(#" + this.chartId + this.items[i].idx + "_clip)");
|
|
}
|
|
|
|
for (i = 0; i < clips.length; i++) {
|
|
var crect = d3.select("#" + this.chartId + i + "_clip rect");
|
|
crect.transition()
|
|
.delay(i * this.defSettings.animation.duration / this.items.length)
|
|
.duration(this.defSettings.animation.duration / this.items.length)
|
|
.ease(d3.easeLinear)
|
|
.attr("width", clips[i]);
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._ApplyMouseOver = function (item, itemObj) {
|
|
var _this = this,
|
|
mRefChart = this._ZtChart.StdChart;
|
|
this.RemoveAllHovers();
|
|
if (item) {
|
|
if (item.tagName == "circle") {
|
|
ZtLinesChart.prototype._ApplyMouseOver.call(this, item, itemObj);
|
|
return;
|
|
}
|
|
|
|
var hoverItemObject = itemObj || this.itemsHover[d3.select(item).attr("item-index")],
|
|
itemObject = this.items[hoverItemObject.itemIndex],
|
|
tooltipObject = {};
|
|
d3.select(item)
|
|
.style("opacity", 1)
|
|
.style("fill", function () {
|
|
var mcol = "";
|
|
if (!Empty(_this.defSettings.hoverColor))
|
|
mcol = _this.defSettings.hoverColor;
|
|
else {
|
|
mcol = itemObject.colorApplied;
|
|
if (_this.defSettings.range.bands && _this.defSettings.range.applyColor)
|
|
mcol = _this.defSettings.range.bands[hoverItemObject.rangeIdx].color;
|
|
var darkCol = d3.rgb(mcol).darker().toString();
|
|
darkCol = d3.rgb(darkCol).darker().toString();
|
|
mcol = d3.rgb(darkCol).darker().toString();
|
|
}
|
|
hoverItemObject.colorApplied = mcol;
|
|
return mcol;
|
|
})
|
|
.style("cursor", function() {
|
|
if (!_this._ZtChart.enableClick)
|
|
return "default";
|
|
return "pointer";
|
|
})
|
|
.on("mousemove", function() {
|
|
mRefChart.ClearHoverTimeout();
|
|
})
|
|
.on("mouseout", function() {
|
|
var myItemsL = _this.GetSelectedItems().length;
|
|
if (_this.defSettings.range.bands && _this.defSettings.range.applyColor) {
|
|
this.style.fill = _this.defSettings.range.bands[hoverItemObject.rangeIdx].color;
|
|
if (myItemsL == 0 && !_this.defSettings.fillTransparency)
|
|
this.style.fillOpacity = 1;
|
|
else if (!hoverItemObject.isSelected)
|
|
this.style.fillOpacity = 0.25;
|
|
}
|
|
else if (myItemsL == 0 && !_this.defSettings.fillTransparency) {
|
|
this.style.opacity = 0;
|
|
_this.items[_this.itemsHover[d3.select(this).attr("item-index")].itemIndex].itm.style.opacity = 1;
|
|
this.style.fill = 'transparent';
|
|
}
|
|
else {
|
|
if (!hoverItemObject.isSelected)
|
|
this.style.opacity = 0;
|
|
else
|
|
this.style.fill = _this.items[_this.itemsHover[d3.select(this).attr("item-index")].itemIndex].colorApplied;
|
|
}
|
|
|
|
mRefChart.RemoveHoverTimeout();
|
|
delete mRefChart._hoverItem;
|
|
})
|
|
.on("click", function () {
|
|
_this._ApplyClick(hoverItemObject, d3.mouse(this));
|
|
});
|
|
|
|
tooltipObject = this._GetItemObj(hoverItemObject);
|
|
tooltipObject.color = { color : (itemObject.colorApplied || itemObject.color.color) };
|
|
/*if (this.defSettings.range.bands && this.defSettings.range.applyColor)
|
|
tooltipObject.color.color = this.defSettings.range.bands[hoverItemObject.rangeIdx].color;*/
|
|
tooltipObject.rangeIdx = hoverItemObject.rangeIdx;
|
|
|
|
mRefChart._hoverItem = tooltipObject;
|
|
mRefChart._d3mouse = d3.mouse(item);
|
|
mRefChart._d3event = d3.event;
|
|
setTimeout(function(mRefChart, item, tooltipObject){
|
|
if (mRefChart._hoverItem) {
|
|
if (mRefChart._CheckIdentityItem(mRefChart._hoverItem, tooltipObject)) {
|
|
_this.ShowTooltip(mRefChart, item, tooltipObject);
|
|
}
|
|
}
|
|
}, 50, mRefChart, item, tooltipObject);
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._GetItems = function() {
|
|
return this.itemsHover.concat(this.shapes);
|
|
}
|
|
|
|
ZtAreaChart.prototype._DrawHoverCount = function (animate) {
|
|
var container = d3.select("#" + this.chartId + this.type + "_elementGroupH"),
|
|
_this = this,
|
|
xIndex = this.xIndex,
|
|
data = this.dataSet.filter( function (record) {
|
|
return _this._IsNotExcludedDomain(record[xIndex]);
|
|
}
|
|
),
|
|
yIndex,
|
|
cobj,
|
|
dSeries = this._GetDrawingList(),
|
|
items = this.items;
|
|
|
|
for (var ii = 0; ii <= items.length - 2; ii = ii + 2) {
|
|
cobj = {};
|
|
cobj.scaleY = this.scaleY[items[ii].valueField];
|
|
cobj.line = items[ii].itm;
|
|
cobj.item = items[ii + 1];
|
|
yIndex = this.propertyName.indexOf(items[ii].valueField);
|
|
|
|
//----- DISEGNO -----//
|
|
var minValue = cobj.scaleY.domain()[1],
|
|
maxValue = cobj.scaleY.domain()[0],
|
|
minSer = d3.min(data.map(function(record){ return record[yIndex]}));
|
|
|
|
// line è la linea che delimita gli estremi dell'intervallo tra i due valori di coords
|
|
// pts[0] e pts[last] sono i punti di apertura e chiusura
|
|
for (var i = 0; i < data.length; i++) {
|
|
var line = {},
|
|
pts = [],
|
|
mdata,
|
|
mdatanext,
|
|
mdataprec;
|
|
minValue = cobj.scaleY.domain()[1];
|
|
if (minSer < 0 && data[i][yIndex] >= 0)
|
|
minValue = 0;
|
|
if (minSer >= 0 && minValue < 0)
|
|
minValue = 0;
|
|
var lim = (data[i][yIndex] >= 0) ? minValue : 0;
|
|
|
|
if (i - 1 >= 0) {
|
|
if (data[i - 1][yIndex] <= maxValue && data[i - 1][yIndex] >= minValue)
|
|
mdataprec = data[i - 1][yIndex];
|
|
else if (minValue <= data[i - 1][yIndex] && maxValue <= data[i - 1][yIndex])
|
|
mdataprec = maxValue;
|
|
else if (minValue >= data[i - 1][yIndex] && data[i - 1][yIndex] >= 0)
|
|
mdataprec = minValue;
|
|
else
|
|
mdataprec = data[i - 1][yIndex];
|
|
}
|
|
|
|
if (data[i][yIndex] <= maxValue && data[i][yIndex] >= minValue)
|
|
mdata = data[i][yIndex];
|
|
else if (minValue <= data[i][yIndex] && maxValue <= data[i][yIndex])
|
|
mdata = maxValue;
|
|
else if (minValue >= data[i][yIndex])
|
|
mdata = minValue;
|
|
|
|
if (i + 1 < data.length) {
|
|
if (data[i + 1][yIndex] <= maxValue && data[i + 1][yIndex] >= minValue)
|
|
mdatanext = data[i + 1][yIndex];
|
|
else if (minValue <= data[i + 1][yIndex] && maxValue <= data[i + 1][yIndex])
|
|
mdatanext = maxValue;
|
|
else if (minValue >= data[i + 1][yIndex] && data[i + 1][yIndex] >= 0)
|
|
mdatanext = minValue;
|
|
else
|
|
mdatanext = data[i + 1][yIndex];
|
|
}
|
|
|
|
if (data[i][yIndex] == null) { }
|
|
else if (data.length == 1) { }
|
|
else {
|
|
if (i == 0) {
|
|
line = { x1: _this.scaleX(data[i][xIndex]),
|
|
x2: ((_this.scaleX(data[i][xIndex])+_this.scaleX(data[i+1][xIndex]))/2),
|
|
y1: cobj.scaleY(mdata),
|
|
y2: ((cobj.scaleY(mdata)+cobj.scaleY(mdatanext))/2)
|
|
};
|
|
|
|
pts.push({x: _this.scaleX(data[i][xIndex]), y: cobj.scaleY(lim)});
|
|
pts = pts.concat(path_line_intersections(cobj.line, line));
|
|
pts.push({x: ((_this.scaleX(data[i][xIndex])+_this.scaleX(data[i+1][xIndex]))/2), y: cobj.scaleY(lim)});
|
|
}
|
|
else if (i == data.length - 1) {
|
|
line = { x1: ((_this.scaleX(data[i-1][xIndex])+_this.scaleX(data[i][xIndex]))/2),
|
|
x2: _this.scaleX(data[i][xIndex]),
|
|
y1: ((cobj.scaleY(mdataprec)+cobj.scaleY(mdata))/2),
|
|
y2: cobj.scaleY(data[i][yIndex])
|
|
};
|
|
|
|
pts.push({x: ((_this.scaleX(data[i-1][xIndex])+_this.scaleX(data[i][xIndex]))/2), y: cobj.scaleY(lim)});
|
|
pts = pts.concat(path_line_intersections(cobj.line, line));
|
|
pts.push({x: _this.scaleX(data[i][xIndex]), y: cobj.scaleY(lim)});
|
|
}
|
|
else {
|
|
line = { x1: ((_this.scaleX(data[i-1][xIndex])+_this.scaleX(data[i][xIndex]))/2),
|
|
x2: ((_this.scaleX(data[i][xIndex])+_this.scaleX(data[i+1][xIndex]))/2),
|
|
y1: ((cobj.scaleY(mdataprec)+cobj.scaleY(mdata))/2),
|
|
y2: ((cobj.scaleY(mdata)+cobj.scaleY(mdatanext))/2)
|
|
};
|
|
pts.push({x: ((_this.scaleX(data[i-1][xIndex])+_this.scaleX(data[i][xIndex]))/2), y: cobj.scaleY(lim)});
|
|
pts = pts.concat(path_line_intersections(cobj.line, line));
|
|
pts.push({x: ((_this.scaleX(data[i][xIndex])+_this.scaleX(data[i+1][xIndex]))/2), y: cobj.scaleY(lim)});
|
|
}
|
|
}
|
|
|
|
container.append("polygon")
|
|
.attr("class", function () {
|
|
_this.itemsHover.push({
|
|
itm : this,
|
|
series : cobj.item.series,
|
|
valueField : cobj.item.valueField,
|
|
keyField : !Empty(_this.objConfig.keyField) ? data[i][xIndex] : "",
|
|
category : !Empty(_this.objConfig.keyField) ? _this.categoryList[i] : data[i][xIndex],
|
|
value : data[i][yIndex],
|
|
itemType : "area",
|
|
isHover : true,
|
|
itemIndex : ii + 1,
|
|
idx: dSeries.indexOf(items[ii].valueField),
|
|
sidx: _this.categoryList.indexOf(data[i][xIndex]),
|
|
categoryCode : data[i][_this.categoryCodeIndex]
|
|
});
|
|
return "areahover areahover_" + i + "_" + dSeries.indexOf(items[ii].valueField);
|
|
})
|
|
.attr("points", pts.map(function(d){ return [d.x, d.y].join(","); }))
|
|
.style("opacity", 0)
|
|
.style("fill-opacity", 0.5);
|
|
}
|
|
|
|
if (animate) {
|
|
this._AnimateItem(items[ii], items[ii].lastValues, this.defSettings.animation.duration);
|
|
this._AnimateItem(items[ii + 1], items[ii + 1].lastValues, this.defSettings.animation.duration);
|
|
}
|
|
}
|
|
|
|
return true;
|
|
|
|
function path_line_intersections(pathEl, line) {
|
|
var pts = [],
|
|
pathLength = pathEl.getTotalLength();
|
|
for (var i=0; i<pathLength; i++) {
|
|
var pos1 = pathEl.getPointAtLength(i),
|
|
pos2 = pathEl.getPointAtLength(i + 1),
|
|
line1 = {x1: pos1.x, x2: pos2.x, y1: pos1.y, y2: pos2.y};
|
|
var c1 = btwn(line1.x1, line.x1, line.x2);
|
|
var c2 = btwn(line1.x2, line.x1, line.x2);
|
|
if (c1 && c2) {
|
|
pts.push(pos1)
|
|
pts.push(pos2)
|
|
}
|
|
}
|
|
return pts;
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._DrawRectHover = function (container, clip, data, dataIndex, itemIndex, odata) {
|
|
var _this = this,
|
|
xIndex = this.xIndex,
|
|
dSeries = this._GetDrawingList(),
|
|
vfield = dSeries[dataIndex],
|
|
scaleY = this.scaleY[vfield],
|
|
yIndex = this.propertyName.indexOf(vfield),
|
|
minValue = scaleY.domain()[1],
|
|
//maxValue = scaleY.domain()[0],
|
|
minSer = d3.min(data.map(function(record){ return record[yIndex]})),
|
|
sizes = {x: 0, y: 0, w: 0, h: 0},
|
|
record,
|
|
lim;
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
record = data[i];
|
|
//----- DISEGNO -----//
|
|
if (minSer < 0 && record[yIndex] >= 0)
|
|
minValue = 0;
|
|
if (minSer >= 0 && minValue < 0)
|
|
minValue = 0;
|
|
|
|
lim = (record[yIndex] >= 0) ? minValue : 0;
|
|
|
|
if (data[i][yIndex] == null) { }
|
|
else if (data.length == 1) { }
|
|
else {
|
|
// PRIMO VALORE
|
|
if (i == 0) {
|
|
sizes.w = Math.abs(((_this.scaleX(data[i][xIndex])+_this.scaleX(data[i+1][xIndex]))/2) - sizes.x);
|
|
}
|
|
else if (i == data.length - 1) {
|
|
// ULTIMO VALORE
|
|
sizes.x = ((_this.scaleX(data[i-1][xIndex])+_this.scaleX(data[i][xIndex]))/2)
|
|
sizes.w = _this.chartWidth;
|
|
}
|
|
else {
|
|
sizes.x = ((_this.scaleX(data[i-1][xIndex])+_this.scaleX(data[i][xIndex]))/2)
|
|
sizes.w = Math.abs(((_this.scaleX(data[i][xIndex])+_this.scaleX(data[i+1][xIndex]))/2) - sizes.x);
|
|
}
|
|
}
|
|
sizes.h = scaleY(lim);
|
|
|
|
container.append("rect")
|
|
.attr("class", function () {
|
|
_this.itemsHover.push({
|
|
itm : this,
|
|
series : _this._GetLegendList()[dataIndex],
|
|
valueField : vfield,
|
|
keyField : !Empty(_this.objConfig.keyField) ? record[xIndex] : "",
|
|
category : !Empty(_this.objConfig.keyField) ? _this.categoryList[i] : record[xIndex],
|
|
value : record[yIndex],
|
|
progrValue : (odata && odata.length > 0) ? odata[i][yIndex] : "",
|
|
itemType : "area",
|
|
isHover : true,
|
|
itemIndex : itemIndex,
|
|
idx: dataIndex,
|
|
sidx: _this.categoryList.indexOf(record[xIndex]),
|
|
categoryCode : record[_this.categoryCodeIndex]
|
|
});
|
|
return "areahover areahover_" + i + "_" + dataIndex;
|
|
})
|
|
.style("opacity", 0)
|
|
.style("fill-opacity", 0.5)
|
|
.attr("x", sizes.x)
|
|
.attr("y", sizes.y)
|
|
.attr("width", sizes.w)
|
|
.attr("height", sizes.h)
|
|
.attr("clip-path", "url(#" + clip + ")")
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
ZtAreaChart.prototype._GetRelatedItm = function (itemObject) {
|
|
var ret = [],
|
|
mitems = (itemObject.itemType == "area") ? this.shapes : this.itemsHover,
|
|
f = false;
|
|
ret.push(itemObject);
|
|
for (var i = 0; !f && i < mitems.length; i++) {
|
|
if (this._CheckIdentityItem(itemObject, mitems[i])) {
|
|
ret.push(mitems[i]);
|
|
f = true;
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
ZtAreaChart.prototype._ApplyItemSVGSelectEffect = function (items, selected) {
|
|
var halfOpacity = this.defSettings.selectionOptions.opacity,
|
|
fullOpacity = 1,
|
|
fillColor = this.defSettings.selectionOptions.color,
|
|
stobj;
|
|
for (var i = 0; i < items.length; i++) {
|
|
if (!items[i].itm)
|
|
continue;
|
|
if (items[i].itemType == "shape") {
|
|
ZtLinesChart.prototype._ApplySelectEffectShape.call(this, items[i], selected);
|
|
continue;
|
|
}
|
|
if (items[i].type == "legend") {
|
|
this._ApplyLegendSelectEffect(items[i], selected);
|
|
continue;
|
|
}
|
|
stobj = {};
|
|
if (this.defSettings.range.bands && this.defSettings.range.applyColor) {
|
|
if (selected) {
|
|
stobj.fill9opacity = fullOpacity;
|
|
stobj.stroke9opacity = fullOpacity;
|
|
}
|
|
else {
|
|
stobj.fill9opacity = halfOpacity;
|
|
stobj.stroke9opacity = halfOpacity;
|
|
if (!Empty(fillColor))
|
|
stobj.fill = fillColor;
|
|
}
|
|
}
|
|
else {
|
|
if (this.defSettings.fillTransparency) {
|
|
if (selected) {
|
|
if (items[i].itemType == "area" && !Empty(this.items[items[i].itemIndex].colorApplied))
|
|
stobj.fill = this.items[items[i].itemIndex].colorApplied;
|
|
stobj.fill9opacity = fullOpacity;
|
|
stobj.stroke9opacity = fullOpacity;
|
|
stobj.opacity = 1;
|
|
}
|
|
else {
|
|
if (items[i].itemType == "area" && !Empty(this.items[items[i].itemIndex].colorApplied))
|
|
stobj.fill = this.items[items[i].itemIndex].colorApplied;
|
|
stobj.fill9opacity = halfOpacity;
|
|
stobj.stroke9opacity = halfOpacity;
|
|
if (!Empty(fillColor)) {
|
|
stobj.fill = fillColor;
|
|
stobj.opacity = 1;
|
|
}
|
|
else
|
|
stobj.opacity = 0;
|
|
if (halfOpacity == 0.1) {
|
|
if (this.GetSelectedItems().length > 0)
|
|
d3.select(this.items[items[i].itemIndex].itm).attr("style",
|
|
makeStyleHTMLString({ fill9opacity: halfOpacity }, d3.select(this.items[items[i].itemIndex].itm).attr("style"))
|
|
);
|
|
else
|
|
d3.select(this.items[items[i].itemIndex].itm).attr("style",
|
|
makeStyleHTMLString({ fill9opacity: 0.25 }, d3.select(this.items[items[i].itemIndex].itm).attr("style"))
|
|
);
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
if (selected) {
|
|
if (items[i].itemType == "area" && items[i].itemIndex >= 0 && !Empty(this.items[items[i].itemIndex].colorApplied))
|
|
stobj.fill = this.items[items[i].itemIndex].colorApplied;
|
|
stobj.fill9opacity = fullOpacity;
|
|
stobj.stroke9opacity = fullOpacity;
|
|
stobj.opacity = 1;
|
|
}
|
|
else {
|
|
if (items[i].itemType == "area" && items[i].itemIndex >= 0 && !Empty(this.items[items[i].itemIndex].colorApplied))
|
|
stobj.fill = this.items[items[i].itemIndex].colorApplied;
|
|
stobj.fill9opacity = halfOpacity;
|
|
stobj.stroke9opacity = halfOpacity;
|
|
if (items[i].itemIndex >= 0)
|
|
d3.select(this.items[items[i].itemIndex].itm).attr("style",
|
|
makeStyleHTMLString({ fill9opacity: halfOpacity }, d3.select(this.items[items[i].itemIndex].itm).attr("style"))
|
|
);
|
|
if (!Empty(fillColor)) {
|
|
stobj.fill = fillColor;
|
|
d3.select(this.items[items[i].itemIndex].itm).attr("style",
|
|
makeStyleHTMLString({ fill: fillColor }, d3.select(this.items[items[i].itemIndex].itm).attr("style"))
|
|
);
|
|
}
|
|
else
|
|
stobj.opacity = 0;
|
|
}
|
|
}
|
|
}
|
|
d3.select(items[i].itm).attr("style", makeStyleHTMLString(stobj, d3.select(items[i].itm).attr("style")));
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._ApplyNoSelections = function() {
|
|
var myItems = this.GetSelectedItems();
|
|
if (myItems.length == 0) {
|
|
myItems = this._GetItems();
|
|
var myShapes = myItems.filter(function(item){ return item.itemType == "shape"; });
|
|
this._ApplyItemSVGSelectEffect(myShapes, true);
|
|
var myPoly = myItems.filter(function(item){ return item.itemType != "shape"; });
|
|
this._ApplyItemSVGSelectEffect(myPoly, false);
|
|
if ((!this.defSettings.range.bands || !this.defSettings.range.applyColor) && !this.defSettings.fillTransparency) {
|
|
myPoly = this.items.filter(function(item){ return item.itemType == "area"; })
|
|
this._ApplyItemSVGSelectEffect(myPoly, true);
|
|
}
|
|
}
|
|
else {
|
|
this._ApplyItemSVGSelectEffect(myItems, true);
|
|
myItems = this.GetNotSelectedItems();
|
|
this._ApplyItemSVGSelectEffect(myItems, false);
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._ApplyMouseOut = function (item) {
|
|
this.RemoveAllHovers();
|
|
var itm = d3.select(".areahover_" + item.sidx + "_" + item.idx),
|
|
hoverItemObject = this.itemsHover[itm.attr("item-index")];
|
|
if (!hoverItemObject.isSelected)
|
|
hoverItemObject.itm.style.opacity = 0;
|
|
}
|
|
|
|
ZtAreaChart.prototype._OverwriteDefProperties = function () {
|
|
this.defSettings.line.extArea = false;
|
|
}
|
|
|
|
ZtAreaChart.prototype._GetDomainInScale = function (record, index) {
|
|
if (!this.defSettings.line.extArea)
|
|
return StdChart.prototype._GetDomainInScale.call(this, record, index);
|
|
return this.scaleX(record[index]);
|
|
}
|
|
|
|
ZtAreaChart.prototype._SetElementsRangeColor = function (isFnc) {
|
|
var styleObj,
|
|
fill, i,
|
|
halfOpacity = 0.25,
|
|
fullOpacity = 1;
|
|
for (i = 0; i < this.items.length; i++) {
|
|
if (this.items[i].itemType != "line") {
|
|
styleObj = { fill: "transparent" };
|
|
d3.select(this.items[i].itm).attr("style", makeStyleHTMLString(styleObj, d3.select(this.items[i].itm).attr("style")));
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < this.itemsHover.length; i++) {
|
|
if (this.itemsHover[i].idx >= 0) {
|
|
if (isFnc) {
|
|
if (this.functionObj && ("GetConditionalFormatting" in this.functionObj)) {
|
|
var fncRet = this.functionObj.GetConditionalFormatting(this._GetItemObj(this.items[i]));
|
|
fill = decodeConditionalFormatting(fncRet).fill;
|
|
}
|
|
}
|
|
else {
|
|
var band = this.GetObjectFromRange(this.itemsHover[i].value, this.defSettings.range.bands);
|
|
fill = band.color;
|
|
this.SetRangeInItems(this.itemsHover[i], band);
|
|
}
|
|
styleObj = { fill: fill, opacity: 1, fill9opacity: this.defSettings.fillTransparency ? halfOpacity : fullOpacity };
|
|
this.items[this.itemsHover[i].itemIndex].colorApplied = fill;
|
|
d3.select(this.itemsHover[i].itm).attr("style", makeStyleHTMLString(styleObj, d3.select(this.itemsHover[i].itm).attr("style")));
|
|
}
|
|
}
|
|
}
|
|
|
|
ZtAreaChart.prototype._DrawValueLabels = function () {
|
|
if (this.defSettings.shape.draw)
|
|
ZtLinesChart.prototype._DrawValueLabels.call(this);
|
|
else
|
|
StdChart.prototype._DrawValueLabels.call(this);
|
|
}
|
|
|
|
ZtAreaChart.prototype._ApplyRedrawAnimationEffect = function (lastChart) {
|
|
return
|
|
this.RemoveAllHovers();
|
|
this._SetItems(lastChart);
|
|
this._MapScalesFromChart(lastChart);
|
|
|
|
var lastValues,
|
|
yIndex,
|
|
item,
|
|
_this = this;
|
|
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
delete this.items[i].lastValues;
|
|
if (this.items[i].itm) {
|
|
item = this.items[i];
|
|
yIndex = this.propertyName.indexOf(this.valueFields[item.idx]);
|
|
var line = d3.line()
|
|
.x(function (d) {
|
|
return _this._GetDomainInScale(d, _this.xIndex);
|
|
})
|
|
.y(function (d) {
|
|
return _this.scaleY[item.valueField](d[yIndex]);
|
|
})
|
|
.defined(function (d) {
|
|
return d[yIndex] != null;
|
|
})
|
|
.curve(d3[this.defSettings.line.type]),
|
|
minScale = d3.min(_this.scaleY[item.valueField].domain()) < 0 ? _this.scaleY[item.valueField](0) : _this.scaleY[item.valueField](d3.min(_this.scaleY[item.valueField].domain())), // eslint-disable-line max-len
|
|
area = d3.area()
|
|
.x(function (d) {
|
|
return _this._GetDomainInScale(d, _this.xIndex);
|
|
})
|
|
.y0(function () {
|
|
return minScale;
|
|
})
|
|
.y1(function (d) {
|
|
return _this.scaleY[item.valueField](d[yIndex]);
|
|
})
|
|
.defined(function (d) {
|
|
return d[yIndex] != null;
|
|
})
|
|
.curve(d3[this.defSettings.line.type]);
|
|
|
|
lastValues = { d: d3.select(item.itm).attr("d") };
|
|
if (item.itemType == "area")
|
|
d3.select(item.itm).datum(this.dataSet).attr("d", area);
|
|
else
|
|
d3.select(item.itm).datum(this.dataSet).attr("d", line);
|
|
item.lastValues = lastValues;
|
|
}
|
|
}
|
|
|
|
for (i = 0; i < this.shapes.length; i++) {
|
|
if (this.shapes[i].itm) {
|
|
item = this.shapes[i];
|
|
yIndex = this.propertyName.indexOf(this.valueFields[item.idx]);
|
|
|
|
lastValues = { x : item.coordinates.x,
|
|
y : item.coordinates.y,
|
|
r : item.r
|
|
};
|
|
|
|
item.coordinates.x = this._GetShapeCX(this.dataSet[item.sidx], item.idx, this.xIndex, yIndex, null, {scaleY: this.scaleY[item.valueField], valueField : item.valueField});
|
|
item.coordinates.y = this._GetShapeCY(this.dataSet[item.sidx], item.idx, this.xIndex, yIndex, null, {scaleY: this.scaleY[item.valueField], valueField : item.valueField});
|
|
item.value = this.dataSet[item.sidx][yIndex];
|
|
item.r = item.value == null ? 0 : this.GetShapesRadius();
|
|
|
|
d3.select(item.itm)
|
|
.attr("cx", item.coordinates.x)
|
|
.attr("cy", item.coordinates.y)
|
|
.attr("r", item.r);
|
|
|
|
this._AnimateItem(item, lastValues, this.defSettings.animation.duration);
|
|
}
|
|
}
|
|
|
|
d3.selectAll("rect.areahover").remove();
|
|
var finished = false,
|
|
interval = setInterval ( function () {
|
|
if (finished) {
|
|
clearInterval(interval);
|
|
_this._ApplyEvents();
|
|
StdChart.prototype.AfterDrawTimeout.call(_this);
|
|
return;
|
|
}
|
|
|
|
finished = _this._DrawHoverCount(true);
|
|
}, (this.defSettings.animation.duration / this.items.length));
|
|
}
|
|
|
|
ZtAreaChart.prototype._CreateElementGradient = function (color, gradient, gDef) {
|
|
gDef.attr("x1", "0%")
|
|
.attr("y1", "0%")
|
|
.attr("x2", "0%")
|
|
.attr("y2", "100%");
|
|
gDef.append("stop")
|
|
.attr("offset", "0%")
|
|
.attr("stop-color", color)
|
|
.attr("stop-opacity", "1");
|
|
gDef.append("stop")
|
|
.attr("offset","100%")
|
|
.attr("stop-color", gradient)
|
|
.attr("stop-opacity", "1");
|
|
}
|