mirror of https://github.com/masayuki0812/c3.git
Roman Charugin
9 years ago
31 changed files with 1372 additions and 131 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,49 @@
|
||||
<html> |
||||
<head> |
||||
<link rel="stylesheet" type="text/css" href="/css/c3.css"> |
||||
</head> |
||||
<body> |
||||
<div id="chart"></div> |
||||
|
||||
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> |
||||
<script src="/js/c3.js"></script> |
||||
<script> |
||||
var chart = c3.generate({ |
||||
bindto: '#chart', |
||||
data: { |
||||
x: 'date', |
||||
xFormat : '%Y%m%d', |
||||
columns: [ |
||||
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106', '20130107', '20130108', '20130109'], |
||||
['min', 10, 10, 30, 10, 55, 10, 55, 30, 10,], |
||||
['start', 30, 30, 30, 55, 55, 55, 55, 30, 80], |
||||
['end', 80, 80, 80, 55, 55, 55, 55, 80, 30], |
||||
['max', 110, 80, 110, 110, 55, 55, 110, 80, 110] |
||||
], |
||||
type: 'candle-stick' |
||||
}, |
||||
candlestick: { |
||||
data: { |
||||
min: 'min', |
||||
max: 'max', |
||||
start: 'start', |
||||
end: 'end' |
||||
}, |
||||
color: { |
||||
inc: 'yellow', |
||||
dec: 'orange', |
||||
neutral: 'green' |
||||
} |
||||
}, |
||||
axis: { |
||||
x: { |
||||
type: 'timeseries', |
||||
tick: { |
||||
format: '%Y-%m-%d' |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,250 @@
|
||||
describe('c3 api region', function () { |
||||
'use strict'; |
||||
|
||||
var chart, args; |
||||
|
||||
beforeEach(function (done) { |
||||
chart = window.initChart(chart, args, done); |
||||
}); |
||||
|
||||
describe('api.region', function () { |
||||
|
||||
it('should update args', function () { |
||||
args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
] |
||||
}, |
||||
regions: [ |
||||
{ |
||||
axis: 'y', |
||||
start: 300, |
||||
end: 400, |
||||
class: 'green', |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 0, |
||||
end: 100, |
||||
class: 'green', |
||||
} |
||||
] |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should update regions', function (done) { |
||||
var main = chart.internal.main, |
||||
expectedRegions = [ |
||||
{ |
||||
axis: 'y', |
||||
start: 250, |
||||
end: 350, |
||||
class: 'red' |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 25, |
||||
end: 75, |
||||
class: 'red' |
||||
} |
||||
], |
||||
regions; |
||||
|
||||
// Call regions API
|
||||
chart.regions(expectedRegions); |
||||
setTimeout(function () { |
||||
regions = main.selectAll('.c3-region'); |
||||
expect(regions.size()).toBe(expectedRegions.length); |
||||
|
||||
regions.each(function (d, i) { |
||||
var region = d3.select(this), |
||||
rect = region.select('rect'), |
||||
y = +rect.attr('y'), |
||||
height = +rect.attr('height'), |
||||
expectedClass = 'red', |
||||
unexpectedClass = 'green', |
||||
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)), |
||||
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)), |
||||
expectedY = expectedEnd, |
||||
expectedHeight = expectedStart - expectedEnd; |
||||
expect(y).toBeCloseTo(expectedY, -1); |
||||
expect(height).toBeCloseTo(expectedHeight, -1); |
||||
expect(region.classed(expectedClass)).toBeTruthy(); |
||||
expect(region.classed(unexpectedClass)).toBeFalsy(); |
||||
}); |
||||
}, 500); |
||||
|
||||
setTimeout(function () { |
||||
done(); |
||||
}, 1000); |
||||
}); |
||||
}); |
||||
|
||||
describe('api.region.add', function () { |
||||
|
||||
it('should update args', function () { |
||||
args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
] |
||||
}, |
||||
regions: [ |
||||
{ |
||||
axis: 'y', |
||||
start: 300, |
||||
end: 400, |
||||
class: 'green', |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 0, |
||||
end: 100, |
||||
class: 'green', |
||||
} |
||||
] |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should add regions', function (done) { |
||||
var main = chart.internal.main, |
||||
expectedRegions = [ |
||||
{ |
||||
axis: 'y', |
||||
start: 300, |
||||
end: 400, |
||||
class: 'green', |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 0, |
||||
end: 100, |
||||
class: 'green', |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 250, |
||||
end: 350, |
||||
class: 'red' |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 25, |
||||
end: 75, |
||||
class: 'red' |
||||
} |
||||
], |
||||
expectedClasses = [ |
||||
'green', |
||||
'green', |
||||
'red', |
||||
'red', |
||||
], |
||||
regions; |
||||
|
||||
// Call regions API
|
||||
chart.regions(expectedRegions); |
||||
setTimeout(function () { |
||||
regions = main.selectAll('.c3-region'); |
||||
expect(regions.size()).toBe(expectedRegions.length); |
||||
|
||||
regions.each(function (d, i) { |
||||
var region = d3.select(this), |
||||
rect = region.select('rect'), |
||||
y = +rect.attr('y'), |
||||
height = +rect.attr('height'), |
||||
expectedClass = expectedClasses[i], |
||||
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)), |
||||
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)), |
||||
expectedY = expectedEnd, |
||||
expectedHeight = expectedStart - expectedEnd; |
||||
expect(y).toBeCloseTo(expectedY, -1); |
||||
expect(height).toBeCloseTo(expectedHeight, -1); |
||||
expect(region.classed(expectedClass)).toBeTruthy(); |
||||
}); |
||||
}, 500); |
||||
|
||||
setTimeout(function () { |
||||
done(); |
||||
}, 1000); |
||||
}); |
||||
}); |
||||
|
||||
describe('api.region.remove', function () { |
||||
|
||||
it('should update args', function () { |
||||
args = { |
||||
data: { |
||||
columns: [ |
||||
['data1', 30, 200, 100, 400, 150, 250], |
||||
] |
||||
}, |
||||
regions: [ |
||||
{ |
||||
axis: 'y', |
||||
start: 300, |
||||
end: 400, |
||||
class: 'green', |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 0, |
||||
end: 100, |
||||
class: 'green', |
||||
}, |
||||
{ |
||||
axis: 'y', |
||||
start: 250, |
||||
end: 350, |
||||
class: 'red' |
||||
}, |
||||
] |
||||
}; |
||||
expect(true).toBeTruthy(); |
||||
}); |
||||
|
||||
it('should remove regions', function (done) { |
||||
var main = chart.internal.main, |
||||
expectedRegions = [ |
||||
{ |
||||
axis: 'y', |
||||
start: 250, |
||||
end: 350, |
||||
class: 'red' |
||||
}, |
||||
], |
||||
expectedClasses = ['red'], |
||||
regions; |
||||
|
||||
// Call regions API
|
||||
chart.regions(expectedRegions); |
||||
setTimeout(function () { |
||||
regions = main.selectAll('.c3-region'); |
||||
expect(regions.size()).toBe(expectedRegions.length); |
||||
|
||||
regions.each(function (d, i) { |
||||
var region = d3.select(this), |
||||
rect = region.select('rect'), |
||||
y = +rect.attr('y'), |
||||
height = +rect.attr('height'), |
||||
expectedClass = expectedClasses[i], |
||||
expectedStart = Math.round(chart.internal.y(expectedRegions[i].start)), |
||||
expectedEnd = Math.round(chart.internal.y(expectedRegions[i].end)), |
||||
expectedY = expectedEnd, |
||||
expectedHeight = expectedStart - expectedEnd; |
||||
expect(y).toBeCloseTo(expectedY, -1); |
||||
expect(height).toBeCloseTo(expectedHeight, -1); |
||||
expect(region.classed(expectedClass)).toBeTruthy(); |
||||
}); |
||||
}, 500); |
||||
|
||||
setTimeout(function () { |
||||
done(); |
||||
}, 1000); |
||||
}); |
||||
}); |
||||
|
||||
}); |
||||
@ -0,0 +1,264 @@
|
||||
// Candle stick chart initialization
|
||||
c3_chart_internal_fn.initCandleStick = function() { |
||||
var $$ = this; |
||||
$$.main.select('.' + CLASS.chart).append("g") |
||||
.attr('class', CLASS.chartCandleSticks); |
||||
}; |
||||
// Convert candlestick data
|
||||
c3_chart_internal_fn.convertTargetsForCandleStick = function (targets) { |
||||
var $$ = this, |
||||
config = $$.config, |
||||
minValues = (targets.filter(function (t) { return t.id === config.candlestick_data_min; })[0] || {}).values, |
||||
maxValues = (targets.filter(function (t) { return t.id === config.candlestick_data_max; })[0] || {}).values, |
||||
startValues = (targets.filter(function (t) { return t.id === config.candlestick_data_start; })[0] || {}).values, |
||||
endValues = (targets.filter(function (t) { return t.id === config.candlestick_data_end; })[0] || {}).values; |
||||
|
||||
if (!minValues) { |
||||
throw new Error('No min values found at ' + config.candlestick_data_min + ' data property!'); |
||||
} |
||||
|
||||
if (!maxValues) { |
||||
throw new Error('No max values found at ' + config.candlestick_data_max + ' data property!'); |
||||
} |
||||
|
||||
if (!startValues) { |
||||
throw new Error('No start values found at ' + config.candlestick_data_start + ' data property!'); |
||||
} |
||||
|
||||
if (!endValues) { |
||||
throw new Error('No end values found at ' + config.candlestick_data_end + ' data property!'); |
||||
} |
||||
|
||||
var dataNum = Math.max(minValues.length, maxValues.length, startValues.length, endValues.length); |
||||
|
||||
if (minValues.length !== dataNum) { |
||||
throw new Error('Not enough min values! Required ' + dataNum + ' values'); |
||||
} |
||||
|
||||
if (maxValues.length !== dataNum) { |
||||
throw new Error('Not enough max values! Required ' + dataNum + ' values'); |
||||
} |
||||
|
||||
if (startValues.length !== dataNum) { |
||||
throw new Error('Not enough start values! Required ' + dataNum + ' values'); |
||||
} |
||||
|
||||
if (endValues.length !== dataNum) { |
||||
throw new Error('Not enough end values! Required ' + dataNum + ' values'); |
||||
} |
||||
|
||||
// Saving data to internal var
|
||||
var candleStickValues = minValues.map(function(min, index) { |
||||
return { |
||||
id: 'cs-data', |
||||
index: index, |
||||
value: min.value, |
||||
csValue: { |
||||
min: min.value, |
||||
max: maxValues[index].value, |
||||
start: startValues[index].value, |
||||
end: endValues[index].value |
||||
}, |
||||
x: min.x |
||||
}; |
||||
}); |
||||
|
||||
$$.config.data_types['cs-data'] = 'candle-stick'; |
||||
$$.candleStickValues = candleStickValues; |
||||
|
||||
return $$.candleStickValues; |
||||
}; |
||||
// Updating candle stick chart containers
|
||||
c3_chart_internal_fn.updateTargetsForCandleStick = function (targets) { |
||||
var $$ = this, |
||||
mainCandleStickUpdate, |
||||
mainCandleStickEnter, |
||||
classChartCandleStick = $$.classChartCandleStick.bind($$), |
||||
classFocus = $$.classFocus.bind($$), |
||||
classCandleStick = $$.classCandleStick.bind($$), |
||||
classCandleSticks = $$.classCandleSticks.bind($$); |
||||
|
||||
var candleStickValues = $$.convertTargetsForCandleStick(targets); |
||||
|
||||
mainCandleStickUpdate = $$.main.select('.' + CLASS.chartCandleSticks).selectAll('.' + CLASS.chartCandleStick) |
||||
.data(candleStickValues.length > 0 ? [{id: 'cs-data', values: candleStickValues}] : null) |
||||
.attr('class', function (d) { return classCandleStick(d) + classFocus(d); }); |
||||
mainCandleStickEnter = mainCandleStickUpdate.enter().append('g') |
||||
.attr('class', classChartCandleStick) |
||||
.style('opacity', 0) |
||||
.style('pointer-events', 'none'); |
||||
// Candlestick for data
|
||||
mainCandleStickEnter.append('g') |
||||
.attr('class', classCandleSticks); |
||||
}; |
||||
// Updating one candle stick
|
||||
c3_chart_internal_fn.updateCandleStick = function (durationForExit) { |
||||
var $$ = this, |
||||
config = $$.config, |
||||
candleStickData = $$.candleStickData.bind($$), |
||||
classCandleStick = $$.classCandleStick.bind($$), |
||||
classCandleStickShadowUpper = $$.classCandleStickShadowUpper.bind($$), |
||||
classCandleStickShadowLower = $$.classCandleStickShadowLower.bind($$); |
||||
|
||||
$$.mainCandleStick = $$.main.selectAll('.' + CLASS.candleSticks) |
||||
.selectAll('.' + CLASS.candleStick) |
||||
.data(candleStickData); |
||||
$$.mainCandleStick.enter().append('path') |
||||
.attr('class', classCandleStick) |
||||
.style('fill', function(d) { |
||||
return !!d.csValue && d.csValue.start < d.csValue.end ? config.candlestick_color_inc : |
||||
!!d.csValue && d.csValue.start > d.csValue.end ? config.candlestick_color_dec : config.candlestick_color_neutral; |
||||
}); |
||||
$$.mainCandleStick.exit().transition().duration(durationForExit) |
||||
.style('opacity', 0) |
||||
.remove(); |
||||
|
||||
$$.mainCandleStickShadowsUpper = $$.main.selectAll('.' + CLASS.candleSticks) |
||||
.selectAll('.' + CLASS.candleStickShadowUpper) |
||||
.data(candleStickData); |
||||
$$.mainCandleStickShadowsUpper.enter() |
||||
.append('path') |
||||
.attr('class', classCandleStickShadowUpper); |
||||
$$.mainCandleStickShadowsUpper.exit().transition().duration(durationForExit) |
||||
.style('opacity', 0) |
||||
.remove(); |
||||
|
||||
$$.mainCandleStickShadowsLower = $$.main.selectAll('.' + CLASS.candleSticks) |
||||
.selectAll('.' + CLASS.candleStickShadowLower) |
||||
.data(candleStickData); |
||||
$$.mainCandleStickShadowsLower.enter() |
||||
.append('path') |
||||
.attr('class', classCandleStickShadowLower); |
||||
$$.mainCandleStickShadowsLower.exit().transition().duration(durationForExit) |
||||
.style('opacity', 0) |
||||
.remove(); |
||||
}; |
||||
c3_chart_internal_fn.redrawCandleStick = function (drawCandleStick, withTransition) { |
||||
var $$ = this; |
||||
return [ |
||||
(withTransition ? this.mainCandleStick.transition(Math.random().toString()) : this.mainCandleStick) |
||||
.attr('d', drawCandleStick) |
||||
.style('opacity', 1), |
||||
(withTransition ? this.mainCandleStickShadowsUpper.transition(Math.random().toString()) : this.mainCandleStickShadowsUpper) |
||||
.attr('d', $$.generateDrawCandleStickUpperShadow()) |
||||
.style('opacity', 1), |
||||
(withTransition ? this.mainCandleStickShadowsLower.transition(Math.random().toString()) : this.mainCandleStickShadowsLower) |
||||
.attr('d', $$.generateDrawCandleStickLowerShadow()) |
||||
.style('opacity', 1) |
||||
]; |
||||
}; |
||||
c3_chart_internal_fn.getCandleStickW = function (axis) { |
||||
var $$ = this, config = $$.config, |
||||
w = typeof config.candlestick_width === 'number' ? config.candlestick_width : axis.tickInterval() * config.candlestick_width_ratio; |
||||
return config.candlestick_width_max && w > config.candlestick_width_max ? config.candlestick_width_max : w; |
||||
}; |
||||
c3_chart_internal_fn.getCandleStick = function (i, id) { |
||||
var $$ = this; |
||||
return (id ? $$.main.selectAll('.' + CLASS.candleSticks + $$.getTargetSelectorSuffix(id)) : $$.main) |
||||
.selectAll('.' + CLASS.candleSticks + (isValue(i) ? '-' + i : '')); |
||||
}; |
||||
c3_chart_internal_fn.expandCandleStick = function (i, id, reset) { |
||||
var $$ = this; |
||||
if (reset) { $$.unexpandCandleStick(); } |
||||
$$.getCandleStick(i, id).classed(CLASS.EXPANDED, true); |
||||
}; |
||||
c3_chart_internal_fn.unexpandCandleStick = function (i) { |
||||
var $$ = this; |
||||
$$.getCandleStick(i).classed(CLASS.EXPANDED, false); |
||||
}; |
||||
c3_chart_internal_fn.generateDrawCandleStick = function (candleStickIndices) { |
||||
var $$ = this, |
||||
getPoints = $$.generateGetCandleStickPoints(candleStickIndices); |
||||
return function (d, i) { |
||||
// 8 points describing candlestick chart
|
||||
var points = getPoints(d, i); |
||||
|
||||
if (points[0][1] - points[2][1] < 1) { |
||||
points[2][1] -= 1; |
||||
points[3][1] -= 1; |
||||
} |
||||
|
||||
var path = |
||||
'M ' + points[0][0] + ',' + points[0][1] + ' ' + |
||||
'L' + points[1][0] + ',' + points[1][1] + ' ' + |
||||
'L' + points[2][0] + ',' + points[2][1] + ' ' + |
||||
'L' + points[3][0] + ',' + points[3][1] + ' ' + |
||||
'z'; |
||||
|
||||
return path; |
||||
}; |
||||
}; |
||||
c3_chart_internal_fn.generateDrawCandleStickUpperShadow = function (candleStickIndices) { |
||||
var $$ = this, |
||||
getPoints = $$.generateGetCandleStickPoints(candleStickIndices); |
||||
return function (d, i) { |
||||
// 8 points describing candlestick chart
|
||||
var points = getPoints(d, i); |
||||
|
||||
var path = |
||||
'M ' + points[4][0] + ',' + points[4][1] + ' ' + |
||||
'L' + points[5][0] + ',' + points[5][1]; |
||||
|
||||
return path; |
||||
}; |
||||
}; |
||||
c3_chart_internal_fn.generateDrawCandleStickLowerShadow = function (candleStickIndices) { |
||||
var $$ = this, |
||||
getPoints = $$.generateGetCandleStickPoints(candleStickIndices); |
||||
return function (d, i) { |
||||
// 8 points describing candlestick chart
|
||||
var points = getPoints(d, i); |
||||
|
||||
var path = |
||||
'M ' + points[6][0] + ',' + points[6][1] + ' ' + |
||||
'L' + points[7][0] + ',' + points[7][1]; |
||||
|
||||
return path; |
||||
}; |
||||
}; |
||||
c3_chart_internal_fn.generateGetCandleStickPoints = function (candleStickIndices, isSub) { |
||||
var $$ = this, |
||||
axis = isSub ? $$.subXAxis : $$.xAxis, |
||||
candleStickW = $$.getCandleStickW(axis), |
||||
candleStickX = $$.getShapeX(candleStickW, 1, {data: 0}, false), |
||||
candleStickY = $$.getShapeY(false), |
||||
candleStickValues = $$.candleStickValues; |
||||
|
||||
return function (d, i) { |
||||
var value = candleStickValues[i]; |
||||
var inc = value.csValue.start < value.csValue.end; |
||||
var min = value.csValue.min, |
||||
max = value.csValue.max, |
||||
end = inc ? value.csValue.end : value.csValue.start, |
||||
start = inc ? value.csValue.start : value.csValue.end; |
||||
var posX = candleStickX({id: 'cs-data', x: value.x}), |
||||
posYMax = candleStickY({id: 'cs-data', x: value.x, value: max}), |
||||
posYMin = candleStickY({id: 'cs-data', x: value.x, value: min}), |
||||
posYStart = candleStickY({id: 'cs-data', x: value.x, value: start}), |
||||
posYEnd = candleStickY({id: 'cs-data', x: value.x, value: end}); |
||||
|
||||
// 8 points that make a candle stick
|
||||
return [ |
||||
// Body
|
||||
[posX, posYEnd], |
||||
[posX + candleStickW, posYEnd], |
||||
[posX + candleStickW, posYStart], |
||||
[posX, posYStart], |
||||
// Upper shadow
|
||||
[posX + candleStickW / 2, posYMax], |
||||
[posX + candleStickW / 2, posYEnd], |
||||
// Lower shadow
|
||||
[posX + candleStickW / 2, posYStart], |
||||
[posX + candleStickW / 2, posYMin] |
||||
]; |
||||
}; |
||||
}; |
||||
c3_chart_internal_fn.isWithinCandleStick = function (that) { |
||||
var mouse = this.d3.mouse(that), |
||||
box = that.getBoundingClientRect(), |
||||
seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1), |
||||
x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y), |
||||
w = box.width, h = box.height, offset = 2, |
||||
sx = x - offset, ex = x + w + offset, sy = y + h + offset, ey = y - offset; |
||||
return sx < mouse[0] && mouse[0] < ex && ey < mouse[1] && mouse[1] < sy; |
||||
}; |
||||
Loading…
Reference in new issue