Gauge for demonstrating progress towards assigned quota within current time period.

en_us.quota_gauge.ext.php

<?php

	/* Author: Angel Magaña -- [email protected]
	*  File: ./custom/Extension/application/Ext/Language/en_us.quota_gauge.ext.php
	*	
	*  labels for 'Quota Metrics' custom gauge chart for Home Dashboard
	*  For Sugar Ent/Ult only as it is based off RLI data
	*/

	$app_strings['LBL_QUOTA_GAUGE'] = 'Quota Metrics';
	$app_strings['LBL_QG_DESC'] = 'Gauge for measuring progress towards Quota for current period.';

?>

quota-metrics.hbs

{{!--
	/* Author: Angel Magaña -- [email protected]
	*  File: ./custom/clients/base/views/quota-metrics/quota-metrics.hbs
	*	
	*  handlebars template for 'Quota Metrics' custom gauge chart for Home Dashboard
	*  For Sugar Ent/Ult only as it is based off RLI data
	*/
--}}
<div data-content="chart">
    <div class="nv-chart">
    	<div id="chart1" class="nv-chart nv-chart-gauge">
      		<svg></svg>
    	</div>
  	</div>
</div>
<div class="block-footer hide" data-content="nodata">{{str "LBL_NO_DATA_AVAILABLE"}}</div>

quota-metrics.js

({
	/* Author: Angel Magaña -- [email protected]
	*  File: ./custom/clients/base/views/quota-metrics/quota-metrics.js
	*	
	*  controller for 'Quota Metrics' custom gauge chart for Home Dashboard
	*  For Sugar Ent/Ult only as it is based off RLI data
	*/
    
    plugins: ['Dashlet', 'Chart'],
    className: 'quota-metrics-wrapper',

    metricsCollection: null,
    currentPeriod: null,
    quotaAmount: 0,
    likelyAmount: 0,
	
	setPeriod: function(data) {
		this.currentPeriod = data['id'];
	},
	
	setQuota: function(data) {
		this.quotaAmount = parseInt(data['amount']);
	},
	
	setLikely: function(data) {
		this.likelyAmount = parseInt(data.records[0].likely_case);
	},
	
	/*
	*	Configure the chart
	*/
	doSetupChart: function() {
		//Setup Chart
        this.chart = nv.models.gaugeChart()
          	.x(function(d) { return d.key; })
          	.y(function(d) { return d.y; })
          	.showLabels(true)
          	.showTitle(false)
          	.colorData('default')
          	.ringWidth(50)
          	.maxValue(this.quotaAmount)
          	.transitionMs(4000);
	},
	
    /**
     * Generic method to render chart with check for visibility and data.
     * Called by _renderHtml and loadData.
     */
    renderChart: function() {
        if (!this.isChartReady()) {
            return;
        }

		d3.select("#chart1 svg")
        	.datum(this.chartCollection)
          	.transition().duration(1200)
            .call(this.chart);

        this.chart_loaded = _.isFunction(this.chart.update);
        this.displayNoData(!this.chart_loaded);
    },

    /* Process data loaded from REST endpoint so that d3 chart can consume
     * and set general chart properties
     */
    evaluateResult: function(data) {
    
        var qtr = parseInt(this.quotaAmount * .25),
    	    half = parseInt(this.quotaAmount * .50),
    	    seventyFive = parseInt(this.quotaAmount * .75);
    
    	var data = {
  					"properties": {
    					"title": "Quota Gauge",
    					"value": this.likelyAmount
  					},
  					"data": [
    					{
      						"key": "0 - 25%", "y": qtr
    					},
    					{
      						"key": "26 - 50%", "y": half
    					},
    					{
      						"key": "51 - 75%", "y": seventyFive
    					},
    					{
      						"key": "76 - 100%", "y": this.quotaAmount
    					}
  					]
		};
		
		this.chartCollection = data;
		this.metricsCollection = data;
    	this.total = 1;
    },

    /**
     * @inheritDoc
     */
    loadData: function(options) {

        var url = null,
        	body = null,
        	self = this;
        	
        if (this.meta.config) {
            return;
        }
        
        //Time period
        url = app.api.buildURL('TimePeriods', 'current');

        app.api.call('read', url, body, {
            success: function(data) { 
            	self.setPeriod(data);
            },
            error: _.bind(function() {
                this.displayNoData(true);
            }, this)
        });
        
        //Quota
        url = app.api.buildURL('Forecasts/' + this.currentPeriod + '/quotas/rollup/' + app.user.id);
		
		app.api.call('read', url, body, {
            success: function(data) {
            	self.setQuota(data);
            }
        });
        
        //Likely
        url = app.api.buildURL('Forecasts', 'filter');
        
		body = '{"filter":[{"timeperiod_id":"' + this.currentPeriod + '"},{"user_id":"' + app.user.id + '"},{"forecast_type":"Rollup"}]}';
		
		app.api.call('read', url, body, {
            success: function(data) {
            	self.setLikely(data);
            	self.doSetupChart();
            	self.evaluateResult();
            	self.render();
            },
            complete: options ? options.complete : null
        });
    },
    
    _dispose: function() {
    	this._super('_dispose');
    },
})

quota-metrics.php

<?php
	/* Author: Angel Magaña -- [email protected]
	*  File: ./custom/clients/base/views/quota-metrics/quota-metrics.php
	*	
	*  metadata for 'Quota Metrics' custom gauge chart for Home Dashboard
	*  For Sugar Ent/Ult only as it is based off RLI data
	*/

$viewdefs['base']['view']['quota-metrics'] = array(
    'dashlets' => array(
        array(
            'label' => 'LBL_QUOTA_GAUGE',
            'description' => 'LBL_QG_DESC',
            'filter' => array(
                'module' => array(
                    'Home',
                ),
            ),
            'config' => array(),
            'preview' => array(),
        ),
    ),
);

?>