Browse Source

Alterations to C3 to handle step and area-step graphs, and accept options for additional changes to the view of area and line graphs.

pull/254/head
Brandon Bernal 11 years ago
parent
commit
25939f1095
  1. 257
      c3.js

257
c3.js

@ -31,6 +31,7 @@
shape: 'c3-shape', shape: 'c3-shape',
shapes: 'c3-shapes', shapes: 'c3-shapes',
line: 'c3-line', line: 'c3-line',
step: 'c3-step',
bar: 'c3-bar', bar: 'c3-bar',
bars: 'c3-bars', bars: 'c3-bars',
circle: 'c3-circle', circle: 'c3-circle',
@ -147,7 +148,8 @@
__subchart_size_height = __subchart_show ? getConfig(['subchart', 'size', 'height'], 60) : 0; __subchart_size_height = __subchart_show ? getConfig(['subchart', 'size', 'height'], 60) : 0;
// color // color
var __color_pattern = getConfig(['color', 'pattern'], []); var __color_pattern = getConfig(['color', 'pattern'], []),
__color_opacity = getConfig(['color', 'opacity'], null);
// legend // legend
var __legend_show = getConfig(['legend', 'show'], true), var __legend_show = getConfig(['legend', 'show'], true),
@ -188,6 +190,8 @@
__axis_y2_padding = getConfig(['axis', 'y2', 'padding']), __axis_y2_padding = getConfig(['axis', 'y2', 'padding']),
__axis_y2_ticks = getConfig(['axis', 'y2', 'ticks'], 10); __axis_y2_ticks = getConfig(['axis', 'y2', 'ticks'], 10);
var __zero_padding = getConfig(['zeropadding'], false);
// grid // grid
var __grid_x_show = getConfig(['grid', 'x', 'show'], false), var __grid_x_show = getConfig(['grid', 'x', 'show'], false),
__grid_x_type = getConfig(['grid', 'x', 'type'], 'tick'), __grid_x_type = getConfig(['grid', 'x', 'type'], 'tick'),
@ -1176,6 +1180,9 @@
if (hasBarType(yTargets) && !hasNegativeValueInTargets(yTargets)) { if (hasBarType(yTargets) && !hasNegativeValueInTargets(yTargets)) {
padding_bottom = yDomainMin; padding_bottom = yDomainMin;
} }
if (__zero_padding) {
padding_bottom = yDomainMin;
}
return [yDomainMin - padding_bottom, yDomainMax + padding_top]; return [yDomainMin - padding_bottom, yDomainMax + padding_top];
} }
function getXDomainRatio(isSub) { function getXDomainRatio(isSub) {
@ -1195,6 +1202,8 @@
} else if (hasBarType(targets)) { } else if (hasBarType(targets)) {
maxDataCount = getMaxDataCount(); maxDataCount = getMaxDataCount();
padding = maxDataCount > 1 ? (diff / (maxDataCount - 1)) / 2 : 0.5; padding = maxDataCount > 1 ? (diff / (maxDataCount - 1)) / 2 : 0.5;
} else if (__zero_padding) {
padding = diff * 0.001;
} else { } else {
padding = diff * 0.01; padding = diff * 0.01;
} }
@ -1535,6 +1544,7 @@
function classArea(d) { return classShapes(d) + generateClass(CLASS.area, d.id); } function classArea(d) { return classShapes(d) + generateClass(CLASS.area, d.id); }
function classRegion(d, i) { return generateClass(CLASS.region, i) + ' ' + ('class' in d ? d.class : ''); } function classRegion(d, i) { return generateClass(CLASS.region, i) + ' ' + ('class' in d ? d.class : ''); }
function classEvent(d, i) { return generateClass(CLASS.eventRect, i); } function classEvent(d, i) { return generateClass(CLASS.eventRect, i); }
function classStep(d) { return classShapes(d) + generateClass(CLASS.step, d.id); }
function getTargetSelectorSuffix(targetId) { function getTargetSelectorSuffix(targetId) {
return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : ''; return targetId || targetId === 0 ? '-' + (targetId.replace ? targetId.replace(/([^a-zA-Z0-9-_])/g, '-') : targetId) : '';
@ -1770,7 +1780,9 @@
function circleX(d) { function circleX(d) {
return d.x || d.x === 0 ? x(d.x) : null; return d.x || d.x === 0 ? x(d.x) : null;
} }
function circleY(d) { function circleY(d,i) {
var lineIndices = getLineIndices(), getPoint = generateGetLinePoint(lineIndices);
if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; }
return getYScale(d.id)(d.value); return getYScale(d.id)(d.value);
} }
@ -1825,6 +1837,102 @@
return __bar_width ? __bar_width : barTargetsNum ? (axis.tickOffset() * 2 * __bar_width_ratio) / barTargetsNum : 0; return __bar_width ? __bar_width : barTargetsNum ? (axis.tickOffset() * 2 * __bar_width_ratio) / barTargetsNum : 0;
} }
//-- Area --//
function getAreaIndices() { // replication of getBarIndices
var indices = {}, i = 0, j, k;
filterTargetsToShow(getTargets(isAreaType)).forEach(function (d) {
for (j = 0; j < __data_groups.length; j++) {
if (__data_groups[j].indexOf(d.id) < 0) { continue; }
for (k = 0; k < __data_groups[j].length; k++) {
if (__data_groups[j][k] in indices) {
indices[d.id] = indices[__data_groups[j][k]];
break;
}
}
}
if (isUndefined(indices[d.id])) { indices[d.id] = i++; }
});
indices.__max__ = i - 1;
return indices;
}
function getAreaX(areaTargetsNum, areaIndices, isSub) { // partial duplication of getBarX
var scale = isSub ? subX : x;
return function (d) {
var areaIndex = d.id in areaIndices ? areaIndices[d.id] : 0;
return d.x || d.x === 0 ? scale(d.x) - 0 * (areaTargetsNum / 2 - areaIndex) : 0;
};
}
function getAreaY(isSub) { // replication of getBarY
return function (d) {
var scale = isSub ? getSubYScale(d.id) : getYScale(d.id);
return scale(d.value);
};
}
function getAreaOffset(areaIndices, isSub) { // partial duplication of getBarOffset
var targets = orderTargets(filterTargetsToShow(getTargets(isAreaType))),
targetIds = targets.map(function (t) { return t.id; });
return function (d, i) {
var scale = isSub ? getSubYScale(d.id) : getYScale(d.id),
y0 = scale(0), offset = y0;
targets.forEach(function (t) {
if (t.id === d.id || areaIndices[t.id] !== areaIndices[d.id]) { return; }
if (targetIds.indexOf(t.id) < targetIds.indexOf(d.id) && t.values[i].value > 0) {
offset += scale(t.values[i].value) - y0;
}
});
return offset;
};
}
//-- Line --//
function getLineIndices() { // replication of getBarIndices
var indices = {}, i = 0, j, k;
filterTargetsToShow(getTargets(isLineType)).forEach(function (d) {
for (j = 0; j < __data_groups.length; j++) {
if (__data_groups[j].indexOf(d.id) < 0) { continue; }
for (k = 0; k < __data_groups[j].length; k++) {
if (__data_groups[j][k] in indices) {
indices[d.id] = indices[__data_groups[j][k]];
break;
}
}
}
if (isUndefined(indices[d.id])) { indices[d.id] = i++; }
});
indices.__max__ = i - 1;
return indices;
}
function getLineX(lineTargetsNum, lineIndices, isSub) { // partial duplication of getBarX
var scale = isSub ? subX : x;
return function (d) {
var lineIndex = d.id in lineIndices ? lineIndices[d.id] : 0;
return d.x || d.x === 0 ? scale(d.x) - 0 * (lineTargetsNum / 2 - lineIndex) : 0;
};
}
function getLineY(isSub) { // replication of getBarY
return function (d) {
var scale = isSub ? getSubYScale(d.id) : getYScale(d.id);
return scale(d.value);
};
}
function getLineOffset(lineIndices, isSub) { // partial duplication of getBarOffset
var targets = orderTargets(filterTargetsToShow(getTargets(isLineType))),
targetIds = targets.map(function (t) { return t.id; });
return function (d, i) {
var scale = isSub ? getSubYScale(d.id) : getYScale(d.id),
y0 = scale(0), offset = y0;
targets.forEach(function (t) {
if (t.id === d.id || lineIndices[t.id] !== lineIndices[d.id]) { return; }
if (targetIds.indexOf(t.id) < targetIds.indexOf(d.id) && t.values[i].value > 0) {
offset += scale(t.values[i].value) - y0;
}
});
return offset;
};
}
//-- Type --// //-- Type --//
function setTargetType(targets, type) { function setTargetType(targets, type) {
@ -1868,10 +1976,18 @@
var id = (typeof d === 'string') ? d : d.id; var id = (typeof d === 'string') ? d : d.id;
return !(id in __data_types) || __data_types[id] === 'line' || __data_types[id] === 'spline' || __data_types[id] === 'area' || __data_types[id] === 'area-spline'; return !(id in __data_types) || __data_types[id] === 'line' || __data_types[id] === 'spline' || __data_types[id] === 'area' || __data_types[id] === 'area-spline';
} }
function isStepType(d) {
var id = (typeof d === 'string') ? d : d.id;
return !(id in __data_types) || __data_types[id] === 'step' || __data_types[id] === 'area-step';
}
function isSplineType(d) { function isSplineType(d) {
var id = (typeof d === 'string') ? d : d.id; var id = (typeof d === 'string') ? d : d.id;
return __data_types[id] === 'spline' || __data_types[id] === 'area-spline'; return __data_types[id] === 'spline' || __data_types[id] === 'area-spline';
} }
function isAreaType(d) {
var id = (typeof d === 'string') ? d : d.id;
return __data_types[id] === 'area';
}
function isBarType(d) { function isBarType(d) {
var id = (typeof d === 'string') ? d : d.id; var id = (typeof d === 'string') ? d : d.id;
return __data_types[id] === 'bar'; return __data_types[id] === 'bar';
@ -2066,13 +2182,16 @@
if (isLineType(d)) { if (isLineType(d)) {
isSplineType(d) ? line.interpolate("cardinal") : line.interpolate("linear"); isSplineType(d) ? line.interpolate("cardinal") : line.interpolate("linear");
return __data_regions[d.id] ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data); return __data_regions[d.id] ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data);
} else if (isStepType(d)) {
line.interpolate("step-after");
return __data_regions[d.id] ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data);
} else { } else {
x0 = x(data[0].x); x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value); y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
} }
}; };
})(); })(); // usage replace by generateDrawLine
var areaOnMain = (function () { var areaOnMain = (function () {
var area; var area;
@ -2095,14 +2214,48 @@
if (hasType([d], 'area') || hasType([d], 'area-spline')) { if (hasType([d], 'area') || hasType([d], 'area-spline')) {
isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear"); isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear");
return area(data); return area(data);
} else if (hasType([d], 'area-step')) {
isStepType(d) ? area.interpolate("step-after") : '';
return area(data);
} else { } else {
x0 = x(data[0].x); x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value); y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
} }
}; };
})(); })(); // usage replaced by generateDrawArea
function generateDrawArea(areaIndices, isSub) {
var area, getPoint = generateGetAreaPoint(areaIndices, isSub);
if (__axis_rotated) {
area = d3.svg.area()
.x0(function (d, i) { return getYScale(d.id)(0); })
.x1(function (d, i) { return getYScale(d.id)(d.value); })
.y(xx);
} else {
area = d3.svg.area()
.x(xx)
.y0(function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; } return getYScale(d.id)(0); })
.y1(function (d, i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[1][1]; } return getYScale(d.id)(d.value); });
}
return function (d, i) {
var data = filterRemoveNull(d.values), x0, y0;
if (hasType([d], 'area') || hasType([d], 'area-spline')) {
isSplineType(d) ? area.interpolate("cardinal") : area.interpolate("linear");
return area(data);
} else if (hasType([d], 'area-step')) {
isStepType(d) ? area.interpolate("step-after") : area.interpolate("linear");
return area(data);
} else {
x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
}
};
}
function generateDrawBar(barIndices, isSub) { function generateDrawBar(barIndices, isSub) {
var getPoints = generateGetBarPoints(barIndices, isSub); var getPoints = generateGetBarPoints(barIndices, isSub);
return function (d, i) { return function (d, i) {
@ -2122,6 +2275,26 @@
return path; return path;
}; };
} }
function generateDrawLine(lineIndices, isSub) {
var getPoint = generateGetLinePoint(lineIndices, isSub),
line = d3.svg.line()
.x(__axis_rotated ? function (d,i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; } return getYScale(d.id)(d.value); } : xx)
.y(__axis_rotated ? xx : function (d,i) { if (__data_groups.length > 0) { var point = getPoint(d,i); return point[0][1]; } return getYScale(d.id)(d.value); });
return function (d) {
var data = filterRemoveNull(d.values), x0, y0;
if (isLineType(d)) {
isSplineType(d) ? line.interpolate("cardinal") : line.interpolate("linear");
return __data_regions[d.id] ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data);
} else if (isStepType(d)) {
line.interpolate("step-after");
return __data_regions[d.id] ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data);
} else {
x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
}
};
}
function generateXYForText(barIndices, forX) { function generateXYForText(barIndices, forX) {
var getPoints = generateGetBarPoints(barIndices, false), var getPoints = generateGetBarPoints(barIndices, false),
getter = forX ? getXForText : getYForText; getter = forX ? getXForText : getYForText;
@ -2147,6 +2320,28 @@
} }
} }
function generateGetAreaPoint(areaIndices, isSub) { // partial duplication of generateGetBarPoints
var areaTargetsNum = areaIndices.__max__ + 1,
x = getAreaX(areaTargetsNum, areaIndices, !!isSub),
y = getAreaY(!!isSub),
areaOffset = getAreaOffset(areaIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale;
return function (d, i) {
var y0 = yScale(d.id)(0),
offset = areaOffset(d, i) || y0, // offset is for stacked area chart
posX = x(d), posY = y(d);
// fix posY not to overflow opposite quadrant
if (__axis_rotated) {
if ((d.value > 0 && posY < offset) || (d.value < 0 && posY > offset)) { posY = offset; }
}
// 1 point that marks the area position
return [
[posX, offset],
[posX, posY - (y0 - offset)]
];
};
}
function generateGetBarPoints(barIndices, isSub) { function generateGetBarPoints(barIndices, isSub) {
var barTargetsNum = barIndices.__max__ + 1, var barTargetsNum = barIndices.__max__ + 1,
barW = getBarW(xAxis, barTargetsNum), barW = getBarW(xAxis, barTargetsNum),
@ -2172,6 +2367,27 @@
}; };
} }
function generateGetLinePoint(lineIndices, isSub) { // partial duplication of generateGetBarPoints
var lineTargetsNum = lineIndices.__max__ + 1,
x = getLineX(lineTargetsNum, lineIndices, !!isSub),
y = getLineY(!!isSub),
lineOffset = getLineOffset(lineIndices, !!isSub),
yScale = isSub ? getSubYScale : getYScale;
return function (d, i) {
var y0 = yScale(d.id)(0),
offset = lineOffset(d, i) || y0, // offset is for stacked area chart
posX = x(d), posY = y(d);
// fix posY not to overflow opposite quadrant
if (__axis_rotated) {
if ((d.value > 0 && posY < offset) || (d.value < 0 && posY > offset)) { posY = offset; }
}
// 1 point that marks the line position
return [
[posX, posY - (y0 - offset)]
];
};
}
// For brush region // For brush region
var lineOnSub = (function () { var lineOnSub = (function () {
var line = d3.svg.line() var line = d3.svg.line()
@ -2859,11 +3075,11 @@
function redraw(options) { function redraw(options) {
var xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine; var xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine;
var mainCircle, mainBar, mainRegion, mainText, contextBar, eventRectUpdate; var mainCircle, mainBar, mainRegion, mainText, contextBar, eventRectUpdate;
var barIndices = getBarIndices(), maxDataCountTarget; var areaIndices = getAreaIndices(), barIndices = getBarIndices(), lineIndices = getLineIndices(), maxDataCountTarget;
var rectX, rectW; var rectX, rectW;
var withY, withSubchart, withTransition, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend; var withY, withSubchart, withTransition, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
var hideAxis = hasArcType(c3.data.targets); var hideAxis = hasArcType(c3.data.targets);
var drawBar, drawBarOnSub, xForText, yForText; var drawArea, drawBar, drawBarOnSub, drawLine, xForText, yForText;
var duration, durationForExit, durationForAxis; var duration, durationForExit, durationForAxis;
var targetsToShow = filterTargetsToShow(c3.data.targets), tickValues, i, intervalForCulling; var targetsToShow = filterTargetsToShow(c3.data.targets), tickValues, i, intervalForCulling;
@ -2931,7 +3147,9 @@
} }
// setup drawer - MEMO: these must be called after axis updated // setup drawer - MEMO: these must be called after axis updated
drawArea = generateDrawArea(areaIndices);
drawBar = generateDrawBar(barIndices); drawBar = generateDrawBar(barIndices);
drawLine = generateDrawLine(lineIndices);
xForText = generateXYForText(barIndices, true); xForText = generateXYForText(barIndices, true);
yForText = generateXYForText(barIndices, false); yForText = generateXYForText(barIndices, false);
@ -3054,9 +3272,11 @@
.data(barData); .data(barData);
mainBar.enter().append('path') mainBar.enter().append('path')
.attr('d', drawBar) .attr('d', drawBar)
.style("stroke", 'none') .style("stroke", function (d) { return color(d.id); })//'none')
.style("stroke-width", 2)
.style("opacity", 0) .style("opacity", 0)
.style("fill", function (d) { return color(d.id); }) .style("fill", function (d) { return color(d.id); })
.style("fill-opacity", function () { if (__color_opacity) { return __color_opacity; } return initialOpacity; })
.attr("class", classBar); .attr("class", classBar);
mainBar mainBar
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
@ -3090,12 +3310,20 @@
main.selectAll('.' + CLASS.line) main.selectAll('.' + CLASS.line)
.style("opacity", initialOpacity) .style("opacity", initialOpacity)
.transition().duration(duration) .transition().duration(duration)
.attr("d", lineOnMain) // .attr("d", lineOnMain)
.attr("d", drawLine)
.style("opacity", 1);
main.selectAll('.' + CLASS.step)
.style("opacity", initialOpacity)
.transition().duration(duration)
// .attr("d", lineOnMain)
.attr("d", drawLine)
.style("opacity", 1); .style("opacity", 1);
main.selectAll('.' + CLASS.area) main.selectAll('.' + CLASS.area)
.style("opacity", 0) .style("opacity", 0)
.transition().duration(duration) .transition().duration(duration)
.attr("d", areaOnMain) // .attr("d", areaOnMain)
.attr("d", drawArea)
.style("opacity", orgAreaOpacity); .style("opacity", orgAreaOpacity);
mainCircle = main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle) mainCircle = main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data(lineOrScatterData); .data(lineOrScatterData);
@ -3182,6 +3410,11 @@
.transition().duration(duration) .transition().duration(duration)
.attr("d", lineOnSub) .attr("d", lineOnSub)
.style('opacity', 1); .style('opacity', 1);
context.selectAll('.' + CLASS.step)
.style("opacity", initialOpacity)
.transition().duration(duration)
.attr("d", lineOnSub)
.style('opacity', 1);
} }
} }
@ -3375,10 +3608,14 @@
.attr("class", classLine) .attr("class", classLine)
.style("opacity", 0) .style("opacity", 0)
.style("stroke", function (d) { return color(d.id); }); .style("stroke", function (d) { return color(d.id); });
mainLineEnter.append("path")
.attr('class', classStep)
.style("opacity", 0)
.style("stroke", function (d) { return color(d.id); });
// Areas // Areas
mainLineEnter.append("path") mainLineEnter.append("path")
.attr("class", classArea) .attr("class", classArea)
.style("opacity", function () { orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }) .style("opacity", function () { orgAreaOpacity = (__color_opacity) ? __color_opacity : 1; return 0; })//+d3.select(this).style('opacity'); return 0; })
.style("fill", function (d) { return color(d.id); }); .style("fill", function (d) { return color(d.id); });
// Circles for each data point on lines // Circles for each data point on lines
mainLineEnter.append('g') mainLineEnter.append('g')

Loading…
Cancel
Save