clinical:graphs-dailystats
DailyStats linechart for Meteor ClinicalFramework using D3 and NVD3.
========================== ####Package Installation
meteor add clinical:graphs-dailystats
Then add the graph to your application with the following.
1{{> DailyStatsChart }}
Note that you can currently only have one DaiilyStatsChart on the page at a time. After adding the DailyStatsChart to your document object model, you'll need to subscribe to the collection and render the graph. The best pattern we've found so far is within the router, like so:
1Router.map(function(){ 2 this.route('dashboardPageRoute', { 3 path: '/', 4 template: 'dashboardPage', 5 waitOn: function(){ 6 Meteor.subscribe ('interactionsDaily'); 7 }, 8 onAfterAction: function() { 9 Graphs.renderDailyInteractionsDailyStats(); 10 } 11 }); 12});
If you want multiple lines in your graph, you'll need to set up a configuration object.
1Meteor.startup(function(){ 2 DailyStats.configure({ 3 bucketA: { 4 color: "#E68A2E", 5 label: "Foo" 6 }, 7 bucketB: { 8 color: "#80B2FF", 9 label: "Bar" 10 }, 11 bucketC: { 12 color: "#DB4D4D", 13 label: "Squee" 14 } 15 }); 16});
==========================
API
1// isomorphic object 2StatsCounter.incrementTodayCount(); 3StatsCounter.incrementCount("bucketA"); 4 5// remote procedure call 6Meteor.call('incrementTodayCount');
==========================
Testing API
Be sure to run starrynight generate-autoconfig
to add the component tests to your .meteor/nightwatch.js
config file.
1// component output 2.reviewDailyStatsChart() 3 4// component input 5.clickDailyStatsChart()
========================== ####Contributions & Licensing
Made possible by the support of the Open Health Imaging Foundation and the Open Genomics Core.
MIT licensed. Use as you will.