Skip to content

C
c3-closed
Commit 2b124aeb authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix flow

parent 79784691
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 57 deletions
c3.js
View file @ 2b124aeb
......@@ -657,7 +657,7 @@
return __legend_show ? isLegendRight ? legendItemWidth * (legendStep + 1) : currentWidth : 0;
}
function getLegendHeight() {
return __legend_show ? isLegendRight ? currentHeight : legendItemHeight * (legendStep + 1) : 0;
return __legend_show ? isLegendRight ? currentHeight : Math.max(20, legendItemHeight) * (legendStep + 1) : 0;
}
//-- Scales --//
......@@ -1299,16 +1299,16 @@
}
return [min, max];
}
function updateXDomain(targets, withUpdateXDomain, withUpdateOrgXDomain) {
function updateXDomain(targets, withUpdateXDomain, withUpdateOrgXDomain, domain) {
if (withUpdateOrgXDomain) {
x.domain(d3.extent(getXDomain(targets)));
x.domain(domain ? domain : d3.extent(getXDomain(targets)));
orgXDomain = x.domain();
if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
subX.domain(x.domain());
brush.scale(subX);
}
if (withUpdateXDomain) {
x.domain(brush.empty() ? orgXDomain : brush.extent());
x.domain(domain ? domain : brush.empty() ? orgXDomain : brush.extent());
if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
}
}
......@@ -2480,13 +2480,15 @@
area = __axis_rotated ? area.x0(value0).x1(value1).y(xx) : area.x(xx).y0(value0).y1(value1);
return function (d) {
var data = filterRemoveNull(d.values), x0, y0, path;
var data = filterRemoveNull(d.values), x0 = 0, y0 = 0, path;
if (isAreaType(d)) {
path = area.interpolate(getInterpolate(d))(data);
} else {
x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value);
if (data[0]) {
x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value);
}
path = __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
}
return path ? path : "M 0 0";
......@@ -3475,6 +3477,9 @@
xAxis.tickValues(tickValues);
subXAxis.tickValues(tickValues);
}
} else {
xAxis.tickValues([]);
subXAxis.tickValues([]);
}
y.domain(getYDomain(targetsToShow, 'y'));
......@@ -4023,7 +4028,20 @@
if (flushXGrid) { flushXGrid(true); }
// generate transform to flow
translateX = (x(flowStart.x) - x(flowEnd.x)) * (isTimeSeries ? 0.9 : 1); // TODO: fix 0.9, I don't know why 0.9..
if (!options.flow.orgDataCount) { // if empty
if (isTimeSeries || c3.data.targets[0].values.length !== 1) {
flowStart = getValueOnIndex(c3.data.targets[0].values, 0);
flowEnd = getValueOnIndex(c3.data.targets[0].values, c3.data.targets[0].values.length - 1);
translateX = x(flowStart.x) - x(flowEnd.x);
} else {
translateX = x(-0.5) - x(0);
}
} else if (options.flow.orgDataCount === 1 || flowStart.x === flowEnd.x) {
translateX = x(orgDomain[0]) - x(flowEnd.x);
} else {
// TODO: fix 0.9, I don't know why 0.9..
translateX = (x(flowStart.x) - x(flowEnd.x)) * (isTimeSeries ? 0.9 : 1);
}
scaleX = (diffDomain(orgDomain) / diffDomain(x.domain()));
transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
......@@ -4773,8 +4791,8 @@
};
c3.flow = function (args) {
var targets = convertDataToTargets(convertColumnsToData(args.columns), true),
notfoundIds = [], length, tail;
var targets = convertDataToTargets(convertColumnsToData(args.columns), true), notfoundIds = [],
orgDataCount = getMaxDataCount(), dataCount, domain, baseTarget, baseValue, length = 0, tail = 0, diff, to;
// Update/Add data
c3.data.targets.forEach(function (t) {
......@@ -4783,10 +4801,12 @@
if (t.id === targets[i].id) {
found = true;
tail = t.values[t.values.length - 1].index + 1;
if (t.values[t.values.length - 1]) {
tail = t.values[t.values.length - 1].index + 1;
}
length = targets[i].values.length;
for (j = 0; j < targets[i].values.length; j++) {
for (j = 0; j < length; j++) {
targets[i].values[j].index = tail + j;
if (!isTimeSeries) {
targets[i].values[j].x = tail + j;
......@@ -4820,48 +4840,79 @@
});
// Generate null values for new target
targets.forEach(function (t) {
var i, missing = [];
for (i = c3.data.targets[0].values[0].index; i < tail; i++) {
missing.push({
id: t.id,
index: i,
x: isTimeSeries ? getOtherTargetX(i) : i,
value: null
});
}
t.values.forEach(function (v) {
v.index += tail;
if (!isTimeSeries) {
v.x += tail;
if (c3.data.targets.length) {
targets.forEach(function (t) {
var i, missing = [];
for (i = c3.data.targets[0].values[0].index; i < tail; i++) {
missing.push({
id: t.id,
index: i,
x: isTimeSeries ? getOtherTargetX(i) : i,
value: null
});
}
t.values.forEach(function (v) {
v.index += tail;
if (!isTimeSeries) {
v.x += tail;
}
});
t.values = missing.concat(t.values);
});
t.values = missing.concat(t.values);
});
}
c3.data.targets = c3.data.targets.concat(targets); // add remained
// check data count becuase behavior needs to change when it's only one
dataCount = getMaxDataCount();
baseTarget = c3.data.targets[0];
baseValue = baseTarget.values[0];
// Update length to flow if needed
if (isDefined(args.to)) {
length = 0;
c3.data.targets[0].values.forEach(function (v) {
if (v.x <= args.to) { length++; }
to = isTimeSeries ? parseDate(args.to) : args.to;
baseTarget.values.forEach(function (v) {
if (v.x < to) { length++; }
});
} else if (isDefined(args.length)) {
length = args.length;
}
// If only one data, update the domain to flow from left edge of the chart
if (!orgDataCount) {
if (isTimeSeries) {
if (baseTarget.values.length > 1) {
diff = baseTarget.values[baseTarget.values.length - 1].x - baseValue.x;
} else {
diff = baseValue.x - getXDomain(c3.data.targets)[0];
}
} else {
diff = 1;
}
domain = [baseValue.x - diff, baseValue.x];
updateXDomain(null, true, true, domain);
} else if (orgDataCount === 1) {
if (isTimeSeries) {
diff = (baseTarget.values[baseTarget.values.length - 1].x - baseValue.x) / 2;
domain = [new Date(+baseValue.x - diff), new Date(+baseValue.x + diff)];
updateXDomain(null, true, true, domain);
}
}
// Set targets
updateTargets(c3.data.targets);
// Redraw with new targets
redraw({
flow: {
index: c3.data.targets[0].values[0].index,
index: baseValue.index,
length: length,
duration: args.duration,
duration: isValue(args.duration) ? args.duration : __transition_duration,
onend: args.onend,
orgDataCount: orgDataCount,
},
withLegend: true
withLegend: true,
withTransition: orgDataCount > 1,
});
};
......
c3.min.js
View file @ 2b124aeb
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/api_flow.html
View file @ 2b124aeb
......@@ -15,12 +15,11 @@
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var chart, generate = function () { return c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, null, 250],
['data2', 310, 400, 200, 100, 450, 150],
// ['data3', 310, 400, 200, 100, null, 150],
['data1'],
['data2'],
],
types: {
data2: 'area',
......@@ -59,39 +58,137 @@
{start:100, end:200, axis:'y'},
],
});
};
chart = generate();
setTimeout(function () {
// Load only one data
chart.flow({
columns: [
['data1', 500],
['data2', 100],
['data3', 200],
],
duration: 500,
duration: 1500,
onend: function () {
// Load 2 data without data2 and remove 1 data
chart.flow({
columns: [
['data1', 200, 300],
['data3', 100, 100]
],
length: 1,
duration: 1500,
onend: function () {
chart.flow({
columns: [
['data1', 200, 300],
['data2', 200, 300],
['data3', 100, 100]
],
length: 2,
duration: 1500,
onend: function () {
chart.flow({
columns: [
['data1', 500],
['data2', 100],
['data3', 200]
],
length: 1,
duration: 1500,
});
}
});
}
});
},
});
}, 1000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 250],
['data2', 350],
['data3', 150]
],
length: 0
});
}, 8000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 100],
['data2', 50],
['data3', 300]
],
length: 2
});
}, 9000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 600],
['data2', 400],
['data3', 500]
],
to: 2,
});
}, 10000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 100],
['data2', 200],
['data3', 300]
]
});
}, 11000);
setTimeout(function () {
chart = generate();
}, 12000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 500, 100],
['data2', 100, 200],
['data3', 200, 300],
],
duration: 1500,
onend: function () {
chart.flow({
columns: [
['data1', 200],
['data3', 100]
],
duration: 150,
length: 0
// duration: 1000,
length: 1
});
},
length: 2
});
}, 1000);
}, 13000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 200],
// ['data2', 100],
['data2', 300],
['data3', 100]
],
to: 5,
to: 1,
});
}, 3000);
}, 16000);
setTimeout(function () {
chart.flow({
......@@ -101,7 +198,7 @@
['data3', 400]
]
});
}, 4000);
}, 17000);
</script>
</body>
......
htdocs/samples/api_flow_timeseries.html
View file @ 2b124aeb
......@@ -9,13 +9,16 @@
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
var generate = function () { return c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 310, 400, 200, 100, 450, 150],
['x', ],
['data1', ],
['data2', ],
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'],
// ['data1', 30, 200, 100, 400, 150, 250],
// ['data2', 310, 400, 200, 100, 450, 150],
// ['data3', 310, 400, 200, 100, null, 150],
],
types: {
......@@ -55,19 +58,67 @@
}
}
*/
});
}); }, chart = generate();
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-01-21'],
['data1', 500],
['data3', 200],
],
});
}, 1000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-02-01', '2013-02-08', '2013-02-15'],
['data1', 200, 400, 300],
['data2', 100, 300, 200],
['data3', 100, 200, 50]
],
length: 1,
});
}, 2000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-03-01', '2013-03-08'],
['data1', 200, 500],
['data2', 300, 400],
['data3', 400, 200]
],
to: '2013-02-15'
});
}, 3000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-03-15', '2013-05-01'],
['data1', 200, 500],
['data2', 300, 400],
['data3', 400, 200]
],
length: 0
});
}, 4000);
setTimeout(function () {
chart = generate();
}, 6000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-01-21', '2013-01-25'],
['data1', 500, 300],
// ['data2', 100, 100],
['data3', 200, 150],
],
to: new Date('2013-01-20'),
});
}, 1000);
}, 7000);
setTimeout(function () {
chart.flow({
......@@ -77,9 +128,9 @@
['data2', 100],
['data3', 100]
],
length: 0
length: 0,
});
}, 2000);
}, 8000);
setTimeout(function () {
chart.flow({
......@@ -90,7 +141,7 @@
['data3', 400]
]
});
}, 3000);
}, 9000);
</script>
</body>
......
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