Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/application/fact/Chart.js
| /** | /** | ||||
| * @provides javelin-chart | * @provides javelin-chart | ||||
| * @requires phui-chart-css | * @requires phui-chart-css | ||||
| * d3 | * d3 | ||||
| * javelin-chart-curtain-view | * javelin-chart-curtain-view | ||||
| * javelin-chart-function-label | |||||
| */ | */ | ||||
| JX.install('Chart', { | JX.install('Chart', { | ||||
| construct: function(root_node) { | construct: function(root_node) { | ||||
| this._rootNode = root_node; | this._rootNode = root_node; | ||||
| JX.Stratcom.listen('resize', null, JX.bind(this, this._redraw)); | JX.Stratcom.listen('resize', null, JX.bind(this, this._redraw)); | ||||
| }, | }, | ||||
| ▲ Show 20 Lines • Show All 125 Lines • ▼ Show 20 Lines | _newStackedArea: function(g, dataset, x, y, div, curtain) { | ||||
| .y0(function(d) { return y(d.y0); }) | .y0(function(d) { return y(d.y0); }) | ||||
| .y1(function(d) { return y(d.y1); }); | .y1(function(d) { return y(d.y1); }); | ||||
| var line = d3.line() | var line = d3.line() | ||||
| .x(function(d) { return x(to_date(d.x)); }) | .x(function(d) { return x(to_date(d.x)); }) | ||||
| .y(function(d) { return y(d.y1); }); | .y(function(d) { return y(d.y1); }); | ||||
| for (var ii = 0; ii < dataset.data.length; ii++) { | for (var ii = 0; ii < dataset.data.length; ii++) { | ||||
| var label = new JX.ChartFunctionLabel(dataset.labels[ii]); | |||||
| var fill_color = label.getFillColor() || label.getColor(); | |||||
| g.append('path') | g.append('path') | ||||
| .style('fill', dataset.color[ii % dataset.color.length]) | .style('fill', fill_color) | ||||
| .style('opacity', '0.15') | |||||
| .attr('d', area(dataset.data[ii])); | .attr('d', area(dataset.data[ii])); | ||||
| var stroke_color = label.getColor(); | |||||
| g.append('path') | g.append('path') | ||||
| .attr('class', 'line') | .attr('class', 'line') | ||||
| .style('stroke', stroke_color) | |||||
| .attr('d', line(dataset.data[ii])); | .attr('d', line(dataset.data[ii])); | ||||
| g.selectAll('dot') | g.selectAll('dot') | ||||
| .data(dataset.events[ii]) | .data(dataset.events[ii]) | ||||
| .enter() | .enter() | ||||
| .append('circle') | .append('circle') | ||||
| .attr('class', 'point') | .attr('class', 'point') | ||||
| .attr('r', 3) | .attr('r', 3) | ||||
| Show All 14 Lines | _newStackedArea: function(g, dataset, x, y, div, curtain) { | ||||
| .style('opacity', 0.9) | .style('opacity', 0.9) | ||||
| .style('left', (d3.event.pageX - 60) + 'px') | .style('left', (d3.event.pageX - 60) + 'px') | ||||
| .style('top', (d3.event.pageY - 38) + 'px'); | .style('top', (d3.event.pageY - 38) + 'px'); | ||||
| }) | }) | ||||
| .on('mouseout', function() { | .on('mouseout', function() { | ||||
| div.style('opacity', 0); | div.style('opacity', 0); | ||||
| }); | }); | ||||
| curtain.addFunctionLabel('Important Data'); | curtain.addFunctionLabel(label); | ||||
| } | } | ||||
| }, | }, | ||||
| _newDate: function(epoch) { | _newDate: function(epoch) { | ||||
| return new Date(epoch * 1000); | return new Date(epoch * 1000); | ||||
| }, | }, | ||||
| _getCurtain: function() { | _getCurtain: function() { | ||||
| Show All 20 Lines | |||||