Skip to content

C
c3-closed
Commit 1b265f0d authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Refactor gauge and fix init transition - #254

parent 8de26854
Show whitespace changes
Inline Side-by-side
Showing with 131 additions and 135 deletions
c3.css
View file @ 1b265f0d
...@@ -169,3 +169,23 @@ ...@@ -169,3 +169,23 @@
stroke-width: 0; stroke-width: 0;
opacity: 0.2; opacity: 0.2;
} }
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;
font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
fill: #777;
}
.c3-chart-arc .c3-gauge-value {
fill: #000;
font-size: 28px;
}
\ No newline at end of file
c3.js
View file @ 1b265f0d
...@@ -19,9 +19,10 @@ ...@@ -19,9 +19,10 @@
chartArc: 'c3-chart-arc', chartArc: 'c3-chart-arc',
chartArcs: 'c3-chart-arcs', chartArcs: 'c3-chart-arcs',
chartArcsTitle: 'c3-chart-arcs-title', chartArcsTitle: 'c3-chart-arcs-title',
gaugeArc: 'c3-gauge-arc', chartArcsBackground: 'c3-chart-arcs-background',
gaugeArcs: 'c3-gauge-arcs', chartArcsGaugeUnit: 'c3-chart-arcs-gauge-unit',
gaugeArcsTitle: 'c3-gauge-arcs-title', chartArcsGaugeMax: 'c3-chart-arcs-gauge-max',
chartArcsGaugeMin: 'c3-chart-arcs-gauge-min',
selectedCircle: 'c3-selected-circle', selectedCircle: 'c3-selected-circle',
selectedCircles: 'c3-selected-circles', selectedCircles: 'c3-selected-circles',
eventRect: 'c3-event-rect', eventRect: 'c3-event-rect',
...@@ -49,6 +50,7 @@ ...@@ -49,6 +50,7 @@
areas: 'c3-areas', areas: 'c3-areas',
text: 'c3-text', text: 'c3-text',
texts: 'c3-texts', texts: 'c3-texts',
gaugeValue: 'c3-gauge-value',
grid: 'c3-grid', grid: 'c3-grid',
xgrid: 'c3-xgrid', xgrid: 'c3-xgrid',
xgrids: 'c3-xgrids', xgrids: 'c3-xgrids',
...@@ -252,17 +254,15 @@ ...@@ -252,17 +254,15 @@
__pie_onmouseout = getConfig(['pie', 'onmouseout'], function () {}); __pie_onmouseout = getConfig(['pie', 'onmouseout'], function () {});
// gauge // gauge
var __gauge_color = getConfig(['gauge', 'color'], "#e0e0e0"), var __gauge_label_show = getConfig(['gauge', 'label', 'show'], true),
__gauge_label_show = getConfig(['gauge', 'label', 'show'], true),
__gauge_label_format = getConfig(['gauge', 'label', 'format']), __gauge_label_format = getConfig(['gauge', 'label', 'format']),
__gauge_max = getConfig(['gauge', 'max']), __gauge_min = getConfig(['gauge', 'min'], 0),
__gauge_min = getConfig(['gauge', 'min']), __gauge_max = getConfig(['gauge', 'max'], 100),
__gauge_onclick = getConfig(['gauge', 'onclick'], function () {}), __gauge_onclick = getConfig(['gauge', 'onclick'], function () {}),
__gauge_onmouseover = getConfig(['gauge', 'onmouseover'], function () {}), __gauge_onmouseover = getConfig(['gauge', 'onmouseover'], function () {}),
__gauge_onmouseout = getConfig(['gauge', 'onmouseout'], function () {}), __gauge_onmouseout = getConfig(['gauge', 'onmouseout'], function () {}),
__gauge_style = getConfig(['gauge', 'style']),
__gauge_units = getConfig(['gauge', 'units']), __gauge_units = getConfig(['gauge', 'units']),
__gauge_width = getConfig(['gauge', 'width'], false); __gauge_width = getConfig(['gauge', 'width']);
// donut // donut
var __donut_label_show = getConfig(['donut', 'label', 'show'], true), var __donut_label_show = getConfig(['donut', 'label', 'show'], true),
...@@ -504,9 +504,10 @@ ...@@ -504,9 +504,10 @@
.attr("y2", __axis_rotated ? -10 : height); .attr("y2", __axis_rotated ? -10 : height);
} }
function updateRadius() { function updateRadius() {
var innerRadiusRatio;
radiusExpanded = Math.min(arcWidth, arcHeight) / 2; radiusExpanded = Math.min(arcWidth, arcHeight) / 2;
radius = radiusExpanded * 0.95; radius = radiusExpanded * 0.95;
var innerRadiusRatio = __gauge_width ? ((radius - __gauge_width) / radius) : 0.6; innerRadiusRatio = __gauge_width ? (radius - __gauge_width) / radius : 0.6;
innerRadius = hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? radius * innerRadiusRatio : 0; innerRadius = hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? radius * innerRadiusRatio : 0;
} }
function getSvgLeft() { function getSvgLeft() {
...@@ -1014,24 +1015,24 @@ ...@@ -1014,24 +1015,24 @@
return updated ? arc(updated) : "M 0 0"; return updated ? arc(updated) : "M 0 0";
}; };
} }
function getArc(d, withoutUpdate) { function getArc(d, withoutUpdate, force) {
return isArcType(d.data) ? svgArc(d, withoutUpdate) : "M 0 0"; return force || isArcType(d.data) ? svgArc(d, withoutUpdate) : "M 0 0";
} }
function transformForArcLabel(d) { function transformForArcLabel(d) {
var updated = updateAngle(d), c, x, y, h, ratio, translate = ""; var updated = updateAngle(d), c, x, y, h, ratio, translate = "";
if (updated) { if (updated && !hasGaugeType(c3.data.targets)) {
c = svgArc.centroid(updated); c = svgArc.centroid(updated);
x = c[0]; x = c[0];
y = c[1]; y = c[1];
h = Math.sqrt(x * x + y * y); h = Math.sqrt(x * x + y * y);
// TODO: ratio should be an option? // TODO: ratio should be an option?
ratio = (36 / radius > 0.375 ? 1.175 - 36 / radius : 0.8) * radius / h; ratio = (36 / radius > 0.375 ? 1.175 - 36 / radius : 0.8) * radius / h;
translate = __gauge_style === 'arc' ? "translate(1,1)" : "translate(" + (x * ratio) + ',' + (y * ratio) + ")"; translate = "translate(" + (x * ratio) + ',' + (y * ratio) + ")";
} }
return translate; return translate;
} }
function getArcRatio(d) { function getArcRatio(d) {
var whole = __gauge_style === 'arc' ? Math.PI : (Math.PI * 2); var whole = hasGaugeType(c3.data.targets) ? Math.PI : (Math.PI * 2);
return d ? (d.endAngle - d.startAngle) / whole : null; return d ? (d.endAngle - d.startAngle) / whole : null;
} }
function convertToArcData(d) { function convertToArcData(d) {
...@@ -1080,10 +1081,14 @@ ...@@ -1080,10 +1081,14 @@
.style("opacity", 1); .style("opacity", 1);
} }
function shouldShowArcLable() { function shouldShowArcLable() {
if (hasGaugeType(c3.data.targets)) { var shouldShow = true;
return true; if (hasDonutType(c3.data.targets)) {
shouldShow = __donut_label_show;
} else if (hasPieType(c3.data.targets)) {
shouldShow = __pie_label_show;
} }
return hasDonutType(c3.data.targets) ? __donut_label_show : __pie_label_show; // when gauge, always true
return shouldShow;
} }
function getArcLabelFormat() { function getArcLabelFormat() {
var format = __pie_label_format; var format = __pie_label_format;
...@@ -2646,7 +2651,7 @@ ...@@ -2646,7 +2651,7 @@
} }
function init(data) { function init(data) {
var eventRect, grid, i, binding = true; var arcs, eventRect, grid, i, binding = true;
selectChart = d3.select(__bindto); selectChart = d3.select(__bindto);
if (selectChart.empty()) { if (selectChart.empty()) {
...@@ -2669,6 +2674,11 @@ ...@@ -2669,6 +2674,11 @@
addHiddenTargetIds(__data_hide === true ? mapToIds(c3.data.targets) : __data_hide); addHiddenTargetIds(__data_hide === true ? mapToIds(c3.data.targets) : __data_hide);
} }
// when gauge, hide legend // TODO: fix
if (hasGaugeType(c3.data.targets)) {
__legend_show = false;
}
// Init sizes and scales // Init sizes and scales
updateSizes(); updateSizes();
updateScales(); updateScales();
...@@ -2784,13 +2794,45 @@ ...@@ -2784,13 +2794,45 @@
.attr("class", CLASS.chartLines); .attr("class", CLASS.chartLines);
// Define g for arc chart area // Define g for arc chart area
main.select('.' + CLASS.chart).append("g") arcs = main.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.chartArcs) .attr("class", CLASS.chartArcs)
.attr("transform", translate.arc) .attr("transform", translate.arc);
.append('text') arcs.append('text')
.attr('class', CLASS.chartArcsTitle) .attr('class', CLASS.chartArcsTitle)
.style("text-anchor", "middle") .style("text-anchor", "middle")
.text(getArcTitle()); .text(getArcTitle());
if (hasGaugeType(c3.data.targets)) {
arcs.append('path')
.attr("class", CLASS.chartArcsBackground)
.attr("d", function () {
var d = {
data: [{value: __gauge_max}],
startAngle: -1 * (Math.PI / 2),
endAngle: Math.PI / 2
};
return getArc(d, true, true);
});
arcs.append("text")
.attr("dy", ".75em")
.attr("class", CLASS.chartArcsGaugeUnit)
.style("text-anchor", "middle")
.style("pointer-events", "none")
.text(__gauge_label_show ? __gauge_units : '');
arcs.append("text")
.attr("dx", -1 * (innerRadius + ((radius - innerRadius) / 2)) + "px")
.attr("dy", "1.2em")
.attr("class", CLASS.chartArcsGaugeMin)
.style("text-anchor", "middle")
.style("pointer-events", "none")
.text(__gauge_label_show ? __gauge_min : '');
arcs.append("text")
.attr("dx", innerRadius + ((radius - innerRadius) / 2) + "px")
.attr("dy", "1.2em")
.attr("class", CLASS.chartArcsGaugeMax)
.style("text-anchor", "middle")
.style("pointer-events", "none")
.text(__gauge_label_show ? __gauge_max : '');
}
main.select('.' + CLASS.chart).append("g") main.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.chartTexts); .attr("class", CLASS.chartTexts);
...@@ -3577,29 +3619,17 @@ ...@@ -3577,29 +3619,17 @@
// arc // arc
mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc) mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.data(arcData); .data(arcData);
if (__gauge_style === "arc") {
mainArc.enter().append("path")
.attr("class", "")
.style("opacity", 1)
.style("fill", __gauge_color) // Where background color would receive customization.
.style("cursor", "pointer")
.attr("transform", "scale(1,1)")
.attr("d", function (d) {
d.value = __gauge_max;
d.startAngle = -1 * (Math.PI / 2);
d.endAngle = Math.PI / 2;
return getArc(d, true);
});
mainArc.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
}
mainArc.enter().append('path') mainArc.enter().append('path')
.attr("class", classArc) .attr("class", classArc)
.style("fill", function (d) { return color(d.data); }) .style("fill", function (d) { return color(d.data); })
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; }) .style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; })
.style("opacity", 0) .style("opacity", 0)
.each(function (d) { this._current = d; }) .each(function (d) {
if (isGaugeType(d.data)) {
d.startAngle = d.endAngle = -1 * (Math.PI / 2);
}
this._current = d;
})
.on('mouseover', function (d, i) { .on('mouseover', function (d, i) {
var updated, arcData, callback; var updated, arcData, callback;
if (transiting) { // skip while transiting if (transiting) { // skip while transiting
...@@ -3637,12 +3667,13 @@ ...@@ -3637,12 +3667,13 @@
callback(arcData, i); callback(arcData, i);
}); });
mainArc mainArc
.attr("transform", withTransform ? "scale(0)" : "") .attr("transform", function (d) { return !isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
.style("opacity", function (d) { return d === this._current ? 0 : 1; }) .style("opacity", function (d) { return d === this._current ? 0 : 1; })
.each(function () { transiting = true; }) .each(function () { transiting = true; })
.transition().duration(duration) .transition().duration(duration)
.attrTween("d", function (d) { .attrTween("d", function (d) {
var updated = updateAngle(d), interpolate; var updated = updateAngle(d), interpolate;
if (! updated) { if (! updated) {
return function () { return "M 0 0"; }; return function () { return "M 0 0"; };
} }
...@@ -3674,30 +3705,11 @@ ...@@ -3674,30 +3705,11 @@
.remove(); .remove();
main.selectAll('.' + CLASS.chartArc).select('text') main.selectAll('.' + CLASS.chartArc).select('text')
.style("opacity", 0) .style("opacity", 0)
.attr('class', function (d) { return isGaugeType(d.data) ? CLASS.gaugeValue : ''; })
.text(textForArcLabel) .text(textForArcLabel)
.attr("transform", transformForArcLabel) .attr("transform", transformForArcLabel)
.transition().duration(duration) .transition().duration(duration)
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; }); .style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
if (__gauge_style === "arc") {
main.selectAll('.' + CLASS.chartArc).select('text.units')
.attr("transform", transformForArcLabel)
.style("opacity", 0)
.transition().duration(duration)
.text((__gauge_label_show) ? __gauge_units : '')
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
main.selectAll('.' + CLASS.chartArc).select('text.min')
.attr("transform", transformForArcLabel)
.style("opacity", 0)
.transition().duration(duration)
.text((__gauge_label_show) ? __gauge_min : '')
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
main.selectAll('.' + CLASS.chartArc).select('text.max')
.attr("transform", transformForArcLabel)
.style("opacity", 0)
.transition().duration(duration)
.text((__gauge_label_show) ? __gauge_max : '')
.style("opacity", function (d) { return isTargetToShow(d.data.id) && isArcType(d.data) ? 1 : 0; });
}
main.select('.' + CLASS.chartArcsTitle) main.select('.' + CLASS.chartArcsTitle)
.style("opacity", hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? 1 : 0); .style("opacity", hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? 1 : 0);
...@@ -4019,40 +4031,10 @@ ...@@ -4019,40 +4031,10 @@
mainPieEnter.append('g') mainPieEnter.append('g')
.attr('class', classArcs); .attr('class', classArcs);
mainPieEnter.append("text") mainPieEnter.append("text")
.attr("dy", __gauge_style === "arc" ? "-0.35em" : ".35em") .attr("dy", hasGaugeType(c3.data.targets) ? "-0.35em" : ".35em")
.style("opacity", 0) .style("opacity", 0)
.style("text-anchor", "middle") .style("text-anchor", "middle")
.style("pointer-events", "none") .style("pointer-events", "none");
.style("font-size", width / 10 + "px");
if (__gauge_style === "arc") {
mainPieEnter.select('text').style('fill', '#000');
mainPieEnter.append("text")
.attr("dy", ".75em")
.attr("class", "units")
.style("opacity", 0)
.style("text-anchor", "middle")
.style("pointer-events", "none")
.style('fill', '#000')
.style("font-size", width / 15 + "px");
mainPieEnter.append("text")
.attr("dx", -1 * (innerRadius + ((radius - innerRadius) / 2)) + "px")
.attr("dy", "1em")
.attr("class", "min")
.style("opacity", 0)
.style("text-anchor", "middle")
.style("pointer-events", "none")
.style('fill', '#777')
.style("font-size", width / 20 + "px");
mainPieEnter.append("text")
.attr("dx", innerRadius + ((radius - innerRadius) / 2) + "px")
.attr("dy", "1em")
.attr("class", "max")
.style("opacity", 0)
.style("text-anchor", "middle")
.style("pointer-events", "none")
.style('fill', '#777')
.style("font-size", width / 20 + "px");
}
// MEMO: can not keep same color..., but not bad to update color in redraw // MEMO: can not keep same color..., but not bad to update color in redraw
//mainPieUpdate.exit().remove(); //mainPieUpdate.exit().remove();
......
c3.min.js
View file @ 1b265f0d
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/chart_arc_gauge.html
View file @ 1b265f0d
...@@ -11,30 +11,21 @@ ...@@ -11,30 +11,21 @@
var chart = c3.generate({ var chart = c3.generate({
data: { data: {
columns: [ columns: [
[ '%', 91.4 ] [ 'data', 91.4 ]
], ],
type: 'gauge' type: 'gauge'
}, },
gauge: { gauge: {
// color: '', // default value is #e0e0e0 (gray). "color: '', " removes background color (transparent).
label: { label: {
format: function(value, ratio) { // format: function(value, ratio) {
return value; // return value;
// },
// show: false // to turn off the min/max labels.
}, },
// show: false // to turn off the min/max labels. // min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
}, // max: 100, // 100 is default
min: 0,//can handle negative min e.g. vacuum / voltage / current flow / rate of change // units: ' %',
max: 100, // width: 39 // for adjusting arc thickness
style: 'arc', // Only style currently.
units: ' %',
// width: 39 // for adjusting arc thickness
},
legend: {
show: false
},
size: {
height: 240,
width: 240
}, },
color: { color: {
pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values. pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
...@@ -47,98 +38,100 @@ ...@@ -47,98 +38,100 @@
}); });
var cycleDemo = function () { var cycleDemo = function () {
setTimeout(function () { setTimeout(function () {
chart = chart.update(['gauge', 'color'], ''); chart = chart.update(['gauge', 'color'], '');
}, 2000); }, 1000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 0 ]] columns: [[ 'data', 10 ]]
}); });
}, 4000); }, 2000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 50 ]] columns: [[ '%', 50 ]]
}); });
}, 5000); }, 3000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 91.4 ]] columns: [[ '%', 91.4 ]]
}); });
}, 6000); }, 4000);
setTimeout(function () { // setTimeout(function () {
chart = chart.update(['gauge', 'color'], '#e0e0e0'); // chart = chart.update(['gauge', 'color'], '#e0e0e0');
}, 8000); // }, 5000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 0 ]] columns: [[ '%', 0 ]]
}); });
}, 10000); }, 6000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 50 ]] columns: [[ '%', 50 ]]
}); });
}, 11000); }, 7000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 91.4 ]] columns: [[ '%', 91.4 ]]
}); });
}, 12000); }, 8000);
setTimeout(function () { // setTimeout(function () {
chart = chart.update(['gauge', 'width'], 10); // chart = chart.update(['gauge', 'width'], 10);
}, 14000); // }, 9000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 0 ]] columns: [[ '%', 0 ]]
}); });
}, 16000); }, 10000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 50 ]] columns: [[ '%', 50 ]]
}); });
}, 15000); }, 11000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 91.4 ]] columns: [[ '%', 91.4 ]]
}); });
}, 18000); }, 12000);
setTimeout(function () { // setTimeout(function () {
chart = chart.update(['gauge', 'width'], 39); // chart = chart.update(['gauge', 'width'], 39);
}, 20000); // }, 13000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 0 ]] columns: [[ '%', 0 ]]
}); });
}, 22000); }, 14000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 50 ]] columns: [[ '%', 50 ]]
}); });
}, 23000); }, 15000);
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [[ '%', 91.4 ]] columns: [[ '%', 91.4 ]]
}); });
}, 24000); }, 16000);
} }
cycleDemo(); cycleDemo();
setInterval(cycleDemo, 30000); // setInterval(cycleDemo, 30000);
</script> </script>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment