feat: generate w.format, more chart types

Author: xaun

generators/generator-widget/README.md

@@ -38,8 +38,11 @@ npm install
 #### Todo
 ---
 
-- w.format function from chart selection
 - selection of widgets-settings
+- completion message 
+  - "dont forget to add impac-angular module declaration"
+- define default data values & options for charts so upon generation, charts are displayable!
+- specs
 
 #### Notes
 ---

generators/generator-widget/generators/app/index.js

@@ -7,21 +7,24 @@ var inquirer = require('inquirer');
 var ejs = require('ejs');
 var beautify = require('js-beautify');
 var fs = require('fs');
-var fsHelpers = require('./src/fs-helpers.js');
 
 module.exports = yeoman.generators.Base.extend({
   initializing: function () {
+    // TODO: refactor value / type keys, chart partials are all the same. Keep in mind different charting lib support that may occur in the future.
     this.charts = [
       new inquirer.Separator(),
-      { id: 1, name: 'Pie Chart', value: 'pie', type: 'graph' },
-      { id: 2, name: 'Line Chart', value: 'line', type: 'graph' },
+      { name: 'Pie Chart', value: 'pie', type: 'graph', defaultInputData: [] },
+      { name: 'Line Chart', value: 'line', type: 'graph', defaultInputData: [] },
+      { name: 'Bar Chart', value: 'bar', type: 'graph', defaultInputData: {} },
+      { name: 'Combined Bar Chart', value: 'combined-bar', type: 'graph', defaultInputData: {} },
       new inquirer.Separator(),
-      { id: 3, name: 'Blank - content only / custom', value: 'blank' },
+      { name: 'Blank - content only / custom', value: 'blank' },
       new inquirer.Separator(),
     ];
     this.chartAddOns = [
-      { value: 'legend', name: 'Legend', checked: false }
+      { name: 'Legend', value: 'legend', checked: false }
     ];
+    // TODO: add filtering capability.
     this.buildPartialsPaths = function (options) {
       var templatePath = this.templatePath(), path;
       return _.compact(_.map(options, function (option) {
@@ -82,8 +85,11 @@ module.exports = yeoman.generators.Base.extend({
     this.prompt(prompts, function (props) {
       // Array of selections made after prompting.
       this.props = props;
-      this.chartType = _.find(charts, { value: props.chartName }).type;
+
+      this.selectedChart = _.find(charts, { value: props.chartName });
+      this.chartType = this.selectedChart.type;
       this.componentNames = this.buildComponentNames();
+      this.hasChart = this.chartType === 'graph';
 
       done();
     }.bind(this));
@@ -101,9 +107,8 @@ module.exports = yeoman.generators.Base.extend({
           return prop;
         })))
       };
-      if (this.chartType === 'graph') {
-        data.chartContainerClass = 'chart-container';
-      }
+
+      if (this.hasChart) data.chartContainerClass = 'chart-container';
 
       path = this.destinationPath(this.buildDestinationPath('.tmpl.html')),
 
@@ -117,14 +122,20 @@ module.exports = yeoman.generators.Base.extend({
     },
     // Write task for generating the new widgets directive component file.
     widgetDirective: function () {
-      var html, template, data, settingsPromises, path;
+      var html, template, data, deps, settingsPromises, path;
 
+      deps = ['$scope', '$q'];
       settingsPromises = [];
-      if (this.chartType === 'graph') settingsPromises.push('chart');
+
+      if (this.hasChart) settingsPromises.push('chart'); deps.push('ChartFormatterSvc');
 
       data = {
         componentNames: this.componentNames,
-        settingsPromises: settingsPromises
+        deps: deps,
+        settingsPromises: settingsPromises,
+        hasChart: this.hasChart,
+        chartName: _.camelCase(this.selectedChart.value),
+        defaultInputData: this.selectedChart.defaultInputData
       };
 
       path = this.destinationPath(this.buildDestinationPath('.directive.coffee'));

generators/generator-widget/generators/app/templates/widget-component/partials/_bar.html

@@ -0,0 +1,2 @@
+
+<div impac-chart draw-trigger="::drawTrigger.promise" deferred="::chartDeferred"></div>

generators/generator-widget/generators/app/templates/widget-component/partials/_blank.html

@@ -1 +1,2 @@
+<h3>Hello World! - From Impac! Widget Generator.</h3>
 <p>Add your widget content here.</p>

generators/generator-widget/generators/app/templates/widget-component/partials/_combined-bar.html

@@ -0,0 +1,2 @@
+
+<div impac-chart draw-trigger="::drawTrigger.promise" deferred="::chartDeferred"></div>

generators/generator-widget/generators/app/templates/widget-component/widget-component.directive.coffee

@@ -1,27 +1,50 @@
+#
+# Component generated by Impac! Widget Generator!
+#
 module = angular.module('impac.components.widgets.<%= data.componentNames.mod %>', [])
-module.controller('Widget<%= data.componentNames.ctrl %>Ctrl', ($scope, $q) ->
+module.controller('Widget<%= data.componentNames.ctrl %>Ctrl', (<%= data.deps %>) ->
 
   w = $scope.widget
 
   # Define settings
   # --------------------------------------
-<%_ data.settingsPromises.forEach(function (name) { _%>
+  <%_ data.settingsPromises.forEach(function (name) { _%>
   $scope.<%= name + 'Deferred' %> = $q.defer();
-<%_ }) _%>
+  <%_ }) _%>
 
   settingsPromises = [
-  <%_ data.settingsPromises.forEach(function (name) { _%>
+    <%_ data.settingsPromises.forEach(function (name) { _%>
     $scope.<%= name + 'Deferred' %>.promise,
-  <%_ }) _%>
+    <%_ }) _%>
   ]
 
   # Widget specific methods
   # --------------------------------------
   w.initContext = ->
     $scope.isDataFound = w.content?
 
+  <%_ if (data.hasChart) { %>
   # Chart formating function
   # --------------------------------------
+  $scope.drawTrigger = $q.defer()
+  # Format the widget content data for ChartJS.
+  w.format = ->
+    if $scope.isDataFound
+      # Data displayed in the chart.
+      inputData = <%= data.defaultInputData %>
+      <% if (data.chartName === 'bar') { %>
+      # maximum capacity for chartjs bar-chart
+      inputData.labels.length = 15 if inputData.labels.length > 15
+      inputData.values.length = 15 if inputData.values.length > 15
+      <% } %>
+      # Options for configuring the ChartFormatterSvc formatting & the chartJs lib itself.
+      options = {}
+      # Standard formatting required dependant on chart type.
+      chartData = ChartFormatterSvc.<%= data.chartName %>Chart(inputData, options)
+      # Notifies the impac-chart directive's drawTrigger promise of data format complete,
+      # which then draws the chart.
+      $scope.drawTrigger.notify(chartData)
+  <% } %>
 
   # Widget is ready: can trigger the "wait for settings to be ready"
   # --------------------------------------

generators/generator-widget/generators/app/templates/widget-component/widget-component.tmpl.html

@@ -1,5 +1,5 @@
 <!--
-  Template generated by Impac! Widget Generator!
+  Component generated by Impac! Widget Generator!
 -->
 <div widget-<%= componentNames.mod %>>
   <!-- Settings Panel -->