playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix flow

pull/294/head
Masayuki Tanaka 11 years ago
parent
797846914f
commit
2b124aebad
4 changed files with 259 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      c3.js
  2. 6
      c3.min.js
  3. 123
      htdocs/samples/api_flow.html
  4. 71
      htdocs/samples/api_flow_timeseries.html

79
c3.js
Unescape View File

@ -657,7 +657,7 @@
return __legend_show ? isLegendRight ? legendItemWidth * (legendStep + 1) : currentWidth : 0; return __legend_show ? isLegendRight ? legendItemWidth * (legendStep + 1) : currentWidth : 0;
} }
function getLegendHeight() { function getLegendHeight() {
return __legend_show ? isLegendRight ? currentHeight : legendItemHeight * (legendStep + 1) : 0; return __legend_show ? isLegendRight ? currentHeight : Math.max(20, legendItemHeight) * (legendStep + 1) : 0;
} }
//-- Scales --// //-- Scales --//
@ -1299,16 +1299,16 @@
} }
return [min, max]; return [min, max];
} }
function updateXDomain(targets, withUpdateXDomain, withUpdateOrgXDomain) { function updateXDomain(targets, withUpdateXDomain, withUpdateOrgXDomain, domain) {
if (withUpdateOrgXDomain) { if (withUpdateOrgXDomain) {
x.domain(d3.extent(getXDomain(targets))); x.domain(domain ? domain : d3.extent(getXDomain(targets)));
orgXDomain = x.domain(); orgXDomain = x.domain();
if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); } if (__zoom_enabled) { zoom.scale(x).updateScaleExtent(); }
subX.domain(x.domain()); subX.domain(x.domain());
brush.scale(subX); brush.scale(subX);
} }
if (withUpdateXDomain) { 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(); } 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); area = __axis_rotated ? area.x0(value0).x1(value1).y(xx) : area.x(xx).y0(value0).y1(value1);
return function (d) { return function (d) {
var data = filterRemoveNull(d.values), x0, y0, path; var data = filterRemoveNull(d.values), x0 = 0, y0 = 0, path;
if (isAreaType(d)) { if (isAreaType(d)) {
path = area.interpolate(getInterpolate(d))(data); path = area.interpolate(getInterpolate(d))(data);
} else { } else {
if (data[0]) {
x0 = x(data[0].x); x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value); y0 = getYScale(d.id)(data[0].value);
}
path = __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; path = __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
} }
return path ? path : "M 0 0"; return path ? path : "M 0 0";
@ -3475,6 +3477,9 @@
xAxis.tickValues(tickValues); xAxis.tickValues(tickValues);
subXAxis.tickValues(tickValues); subXAxis.tickValues(tickValues);
} }
} else {
xAxis.tickValues([]);
subXAxis.tickValues([]);
} }
y.domain(getYDomain(targetsToShow, 'y')); y.domain(getYDomain(targetsToShow, 'y'));
@ -4023,7 +4028,20 @@
if (flushXGrid) { flushXGrid(true); } if (flushXGrid) { flushXGrid(true); }
// generate transform to flow // 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())); scaleX = (diffDomain(orgDomain) / diffDomain(x.domain()));
transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)'; transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
@ -4773,8 +4791,8 @@
}; };
c3.flow = function (args) { c3.flow = function (args) {
var targets = convertDataToTargets(convertColumnsToData(args.columns), true), var targets = convertDataToTargets(convertColumnsToData(args.columns), true), notfoundIds = [],
notfoundIds = [], length, tail; orgDataCount = getMaxDataCount(), dataCount, domain, baseTarget, baseValue, length = 0, tail = 0, diff, to;
// Update/Add data // Update/Add data
c3.data.targets.forEach(function (t) { c3.data.targets.forEach(function (t) {
@ -4783,10 +4801,12 @@
if (t.id === targets[i].id) { if (t.id === targets[i].id) {
found = true; found = true;
if (t.values[t.values.length - 1]) {
tail = t.values[t.values.length - 1].index + 1; tail = t.values[t.values.length - 1].index + 1;
}
length = targets[i].values.length; 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; targets[i].values[j].index = tail + j;
if (!isTimeSeries) { if (!isTimeSeries) {
targets[i].values[j].x = tail + j; targets[i].values[j].x = tail + j;
@ -4820,6 +4840,7 @@
}); });
// Generate null values for new target // Generate null values for new target
if (c3.data.targets.length) {
targets.forEach(function (t) { targets.forEach(function (t) {
var i, missing = []; var i, missing = [];
for (i = c3.data.targets[0].values[0].index; i < tail; i++) { for (i = c3.data.targets[0].values[0].index; i < tail; i++) {
@ -4838,30 +4859,60 @@
}); });
t.values = missing.concat(t.values); t.values = missing.concat(t.values);
}); });
}
c3.data.targets = c3.data.targets.concat(targets); // add remained 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 // Update length to flow if needed
if (isDefined(args.to)) { if (isDefined(args.to)) {
length = 0; length = 0;
c3.data.targets[0].values.forEach(function (v) { to = isTimeSeries ? parseDate(args.to) : args.to;
if (v.x <= args.to) { length++; } baseTarget.values.forEach(function (v) {
if (v.x < to) { length++; }
}); });
} else if (isDefined(args.length)) { } else if (isDefined(args.length)) {
length = 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 // Set targets
updateTargets(c3.data.targets); updateTargets(c3.data.targets);
// Redraw with new targets // Redraw with new targets
redraw({ redraw({
flow: { flow: {
index: c3.data.targets[0].values[0].index, index: baseValue.index,
length: length, length: length,
duration: args.duration, duration: isValue(args.duration) ? args.duration : __transition_duration,
onend: args.onend, onend: args.onend,
orgDataCount: orgDataCount,
}, },
withLegend: true withLegend: true,
withTransition: orgDataCount > 1,
}); });
}; };

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

123
htdocs/samples/api_flow.html
Unescape View File

@ -15,12 +15,11 @@
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart, generate = function () { return c3.generate({
data: { data: {
columns: [ columns: [
['data1', 30, 200, 100, 400, null, 250], ['data1'],
['data2', 310, 400, 200, 100, 450, 150], ['data2'],
// ['data3', 310, 400, 200, 100, null, 150],
], ],
types: { types: {
data2: 'area', data2: 'area',
@ -59,39 +58,137 @@
{start:100, end:200, axis:'y'}, {start:100, end:200, axis:'y'},
], ],
}); });
};
chart = generate();
setTimeout(function () { setTimeout(function () {
// Load only one data
chart.flow({ chart.flow({
columns: [ columns: [
['data1', 500], ['data1', 500],
['data2', 100], ['data2', 100],
['data3', 200], ['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 () { onend: function () {
chart.flow({ chart.flow({
columns: [ columns: [
['data1', 200], ['data1', 200],
['data3', 100] ['data3', 100]
], ],
duration: 150, // duration: 1000,
length: 0 length: 1
}); });
}, },
length: 2
}); });
}, 1000); }, 13000);
setTimeout(function () { setTimeout(function () {
chart.flow({ chart.flow({
columns: [ columns: [
['data1', 200], ['data1', 200],
// ['data2', 100], ['data2', 300],
['data3', 100] ['data3', 100]
], ],
to: 5, to: 1,
}); });
}, 3000); }, 16000);
setTimeout(function () { setTimeout(function () {
chart.flow({ chart.flow({
@ -101,7 +198,7 @@
['data3', 400] ['data3', 400]
] ]
}); });
}, 4000); }, 17000);
</script> </script>
</body> </body>

71
htdocs/samples/api_flow_timeseries.html
Unescape View File

@ -9,13 +9,16 @@
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var generate = function () { return c3.generate({
data: { data: {
x: 'x', x: 'x',
columns: [ columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'], ['x', ],
['data1', 30, 200, 100, 400, 150, 250], ['data1', ],
['data2', 310, 400, 200, 100, 450, 150], ['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], // ['data3', 310, 400, 200, 100, null, 150],
], ],
types: { 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 () { setTimeout(function () {
chart.flow({ chart.flow({
columns: [ columns: [
['x', '2013-01-21', '2013-01-25'], ['x', '2013-01-21', '2013-01-25'],
['data1', 500, 300], ['data1', 500, 300],
// ['data2', 100, 100],
['data3', 200, 150], ['data3', 200, 150],
], ],
to: new Date('2013-01-20'),
}); });
}, 1000); }, 7000);
setTimeout(function () { setTimeout(function () {
chart.flow({ chart.flow({
@ -77,9 +128,9 @@
['data2', 100], ['data2', 100],
['data3', 100] ['data3', 100]
], ],
length: 0 length: 0,
}); });
}, 2000); }, 8000);
setTimeout(function () { setTimeout(function () {
chart.flow({ chart.flow({
@ -90,7 +141,7 @@
['data3', 400] ['data3', 400]
] ]
}); });
}, 3000); }, 9000);
</script> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save