Skip to content

C
c3-closed
You need to sign in or sign up before continuing.
Commit 1b265f0d authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Refactor gauge and fix init transition - #254

parent 8de26854
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 135 deletions
c3.css
View file @ 1b265f0d
......@@ -169,3 +169,23 @@
stroke-width: 0;
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 @@
chartArc: 'c3-chart-arc',
chartArcs: 'c3-chart-arcs',
chartArcsTitle: 'c3-chart-arcs-title',
gaugeArc: 'c3-gauge-arc',
gaugeArcs: 'c3-gauge-arcs',
gaugeArcsTitle: 'c3-gauge-arcs-title',
chartArcsBackground: 'c3-chart-arcs-background',
chartArcsGaugeUnit: 'c3-chart-arcs-gauge-unit',
chartArcsGaugeMax: 'c3-chart-arcs-gauge-max',
chartArcsGaugeMin: 'c3-chart-arcs-gauge-min',
selectedCircle: 'c3-selected-circle',
selectedCircles: 'c3-selected-circles',
eventRect: 'c3-event-rect',
......@@ -49,6 +50,7 @@
areas: 'c3-areas',
text: 'c3-text',
texts: 'c3-texts',
gaugeValue: 'c3-gauge-value',
grid: 'c3-grid',
xgrid: 'c3-xgrid',
xgrids: 'c3-xgrids',
......@@ -252,17 +254,15 @@
__pie_onmouseout = getConfig(['pie', 'onmouseout'], function () {});
// gauge
var __gauge_color = getConfig(['gauge', 'color'], "#e0e0e0"),
__gauge_label_show = getConfig(['gauge', 'label', 'show'], true),
var __gauge_label_show = getConfig(['gauge', 'label', 'show'], true),
__gauge_label_format = getConfig(['gauge', 'label', 'format']),
__gauge_max = getConfig(['gauge', 'max']),
__gauge_min = getConfig(['gauge', 'min']),
__gauge_min = getConfig(['gauge', 'min'], 0),
__gauge_max = getConfig(['gauge', 'max'], 100),
__gauge_onclick = getConfig(['gauge', 'onclick'], function () {}),
__gauge_onmouseover = getConfig(['gauge', 'onmouseover'], function () {}),
__gauge_onmouseout = getConfig(['gauge', 'onmouseout'], function () {}),
__gauge_style = getConfig(['gauge', 'style']),
__gauge_units = getConfig(['gauge', 'units']),
__gauge_width = getConfig(['gauge', 'width'], false);
__gauge_width = getConfig(['gauge', 'width']);
// donut
var __donut_label_show = getConfig(['donut', 'label', 'show'], true),
......@@ -504,9 +504,10 @@
.attr("y2", __axis_rotated ? -10 : height);
}
function updateRadius() {
var innerRadiusRatio;
radiusExpanded = Math.min(arcWidth, arcHeight) / 2;
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;
}
function getSvgLeft() {
......@@ -1014,24 +1015,24 @@
return updated ? arc(updated) : "M 0 0";
};
}
function getArc(d, withoutUpdate) {
return isArcType(d.data) ? svgArc(d, withoutUpdate) : "M 0 0";
function getArc(d, withoutUpdate, force) {
return force || isArcType(d.data) ? svgArc(d, withoutUpdate) : "M 0 0";
}
function transformForArcLabel(d) {
var updated = updateAngle(d), c, x, y, h, ratio, translate = "";
if (updated) {
if (updated && !hasGaugeType(c3.data.targets)) {
c = svgArc.centroid(updated);
x = c[0];
y = c[1];
h = Math.sqrt(x * x + y * y);
// TODO: ratio should be an option?
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;
}
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;
}
function convertToArcData(d) {
......@@ -1080,10 +1081,14 @@
.style("opacity", 1);
}
function shouldShowArcLable() {
if (hasGaugeType(c3.data.targets)) {
return true;
var shouldShow = 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() {
var format = __pie_label_format;
......@@ -2646,7 +2651,7 @@
}
function init(data) {
var eventRect, grid, i, binding = true;
var arcs, eventRect, grid, i, binding = true;
selectChart = d3.select(__bindto);
if (selectChart.empty()) {
......@@ -2669,6 +2674,11 @@
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
updateSizes();
updateScales();
......@@ -2784,13 +2794,45 @@
.attr("class", CLASS.chartLines);
// Define g for arc chart area
main.select('.' + CLASS.chart).append("g")
arcs = main.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.chartArcs)
.attr("transform", translate.arc)
.append('text')
.attr("transform", translate.arc);
arcs.append('text')
.attr('class', CLASS.chartArcsTitle)
.style("text-anchor", "middle")
.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")
.attr("class", CLASS.chartTexts);
......@@ -3577,29 +3619,17 @@
// arc
mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.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')
.attr("class", classArc)
.style("fill", function (d) { return color(d.data); })
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; })
.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) {
var updated, arcData, callback;
if (transiting) { // skip while transiting
......@@ -3637,12 +3667,13 @@
callback(arcData, i);
});
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; })
.each(function () { transiting = true; })
.transition().duration(duration)
.attrTween("d", function (d) {
var updated = updateAngle(d), interpolate;
if (! updated) {
return function () { return "M 0 0"; };
}
......@@ -3674,30 +3705,11 @@
.remove();
main.selectAll('.' + CLASS.chartArc).select('text')
.style("opacity", 0)
.attr('class', function (d) { return isGaugeType(d.data) ? CLASS.gaugeValue : ''; })
.text(textForArcLabel)
.attr("transform", transformForArcLabel)
.transition().duration(duration)
.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)
.style("opacity", hasDonutType(c3.data.targets) || hasGaugeType(c3.data.targets) ? 1 : 0);
......@@ -4019,40 +4031,10 @@
mainPieEnter.append('g')
.attr('class', classArcs);
mainPieEnter.append("text")
.attr("dy", __gauge_style === "arc" ? "-0.35em" : ".35em")
.attr("dy", hasGaugeType(c3.data.targets) ? "-0.35em" : ".35em")
.style("opacity", 0)
.style("text-anchor", "middle")
.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");
}
.style("pointer-events", "none");
// MEMO: can not keep same color..., but not bad to update color in redraw
//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 @@
var chart = c3.generate({
data: {
columns: [
[ '%', 91.4 ]
[ 'data', 91.4 ]
],
type: 'gauge'
},
gauge: {
// color: '', // default value is #e0e0e0 (gray). "color: '', " removes background color (transparent).
label: {
format: function(value, ratio) {
return value;
},
// show: false // to turn off the min/max labels.
// format: function(value, ratio) {
// return value;
// },
// show: false // to turn off the min/max labels.
},
min: 0,//can handle negative min e.g. vacuum / voltage / current flow / rate of change
max: 100,
style: 'arc', // Only style currently.
units: ' %',
// width: 39 // for adjusting arc thickness
},
legend: {
show: false
},
size: {
height: 240,
width: 240
// min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
// max: 100, // 100 is default
// units: ' %',
// width: 39 // for adjusting arc thickness
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
......@@ -47,98 +38,100 @@
});
var cycleDemo = function () {
setTimeout(function () {
chart = chart.update(['gauge', 'color'], '');
}, 2000);
}, 1000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
columns: [[ 'data', 10 ]]
});
}, 4000);
}, 2000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 5000);
}, 3000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 6000);
}, 4000);
setTimeout(function () {
chart = chart.update(['gauge', 'color'], '#e0e0e0');
}, 8000);
// setTimeout(function () {
// chart = chart.update(['gauge', 'color'], '#e0e0e0');
// }, 5000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 10000);
}, 6000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 11000);
}, 7000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 12000);
}, 8000);
setTimeout(function () {
chart = chart.update(['gauge', 'width'], 10);
}, 14000);
// setTimeout(function () {
// chart = chart.update(['gauge', 'width'], 10);
// }, 9000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 16000);
}, 10000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 15000);
}, 11000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 18000);
}, 12000);
setTimeout(function () {
chart = chart.update(['gauge', 'width'], 39);
}, 20000);
// setTimeout(function () {
// chart = chart.update(['gauge', 'width'], 39);
// }, 13000);
setTimeout(function () {
chart.load({
columns: [[ '%', 0 ]]
});
}, 22000);
}, 14000);
setTimeout(function () {
chart.load({
columns: [[ '%', 50 ]]
});
}, 23000);
}, 15000);
setTimeout(function () {
chart.load({
columns: [[ '%', 91.4 ]]
});
}, 24000);
}, 16000);
}
cycleDemo();
setInterval(cycleDemo, 30000);
// setInterval(cycleDemo, 30000);
</script>
</body>
</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