Skip to content

Commit

Permalink
Fix flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@masayuki0812
masayuki0812 committed May 30, 2014
1 parent 7978469 commit 2b124ae
Show file tree
Hide file tree
Showing 4 changed files with 259 additions and 60 deletions.
117 changes: 84 additions & 33 deletions c3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 --//
Expand Down Expand Up @@ -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(); }
}
}
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -3475,6 +3477,9 @@
xAxis.tickValues(tickValues);
subXAxis.tickValues(tickValues);
}
} else {
xAxis.tickValues([]);
subXAxis.tickValues([]);
}

y.domain(getYDomain(targetsToShow, 'y'));
Expand Down Expand Up @@ -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)';

Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -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,
});
};

Expand Down
6 changes: 3 additions & 3 deletions c3.min.js
View file

Large diffs are not rendered by default.

123 changes: 110 additions & 13 deletions htdocs/samples/api_flow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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({
Expand All @@ -101,7 +198,7 @@
['data3', 400]
]
});
}, 4000);
}, 17000);

</script>
</body>
Expand Down
Loading

0 comments on commit 2b124ae

Please sign in to comment.