Custom pie chart for Sugar 7.x, displaying monthly lead conversion statistics.

conversion-stats.js

({
	/* Author: Angel Magaña -- cheleguanaco@cheleguanaco.com
	*  File: ./custom/clients/base/views/conversion-stats/conversion-stats.js
	*	
	*  controller for 'Monthly Lead Conversion Stats' custom pie chart 
	*/

    plugins: ['Dashlet', 'Chart'],
    className: 'conversion-stats',
    
    initialize: function(options){
        this._super('initialize', [options]);
        
        this.chart = nv.models.pieChart()
          // .x(function(d) { return d.key })
          // .y(function(d) { return d.value })
          .showLabels(true)
          .showLegend(false)
          .showTitle(true)
          //.color(d3.scale.category10().range())
          //.colorData( 'graduated', {c1: '#e8e2ca', c2: '#3e6c0a', l: pie_data.data.length} )
          //.colorData( 'class' )
          .colorData( 'default', {gradient:false} )
          .donut(true)
          .donutLabelsOutside(true)
          .donutRatio(0.447)
          .hole(this.total)
          .showLeaders(false)
          .tooltips(false)
          //.tooltipContent( function(key, x, y, e, graph) {
          //   return '<p>Total: <b>' +  parseInt(y) + '</b></p>';
          // });
    },
            
    renderChart: function(){
        if (!this.isChartReady()) {
            return;
        }
        
        this.chart.hole(this.total);
        
        d3.select("#chart1 svg")
            .datum(this.data)
            .call(this.chart);
    
        d3.selectAll('.nv-label text')
            .style({"font-size": "1em"});

        nv.utils.windowResize(this.chart.update); 
    },
    
    evaluateResult: function(data){
        var totalConverted = data.where({status: 'Converted'}).length,
            currentMonth = app.lang.get('LBL_CS_SPAN'),
            convertedKey = app.lang.get('LBL_CS_CONVERTED'),
            pendingKey = app.lang.get('LBL_CS_PENDING');
        
        this.total = data.models.length;
        
        var pending = this.total - totalConverted;
        
        this.data = {"properties": {
                            "title": currentMonth
                        },
                            "data": [
                                {
                                    "key": convertedKey + totalConverted, 
                                    "value": totalConverted
                                },
                                {
                                    "key": pendingKey + pending,
                                    "value": pending
                                }
                            ]
                    };
                    
        this.chartCollection = this.data;
    },
            
    loadData: function(options){ 
        //Load current Leads
        var self = this,
            leads = app.data.createBeanCollection('Leads');
         
        leads.fetch({
        	limit: -1,
            fields: ['id', 'status'],
            filter:[{'date_entered':{'$dateRange':'this_month'}}],
            success: function(data){
                self.evaluateResult(data);
                self.render();
            },
            complete: options ? options.complete : null
        });
    },

    _dispose: function() {
    	this._super('_dispose');
    }
})

conversion-stats.php

<?php
/* Author: Angel Magaña -- cheleguanaco@cheleguanaco.com
*  File: ./custom/clients/base/views/conversion-stats/conversion-stats.php
*	
*  metadata for 'Monthly Lead Conversion Stats' custom pie chart
*/

$viewdefs['base']['view']['conversion-stats'] = array(
    'dashlets' => array(
        array(
            'label' => 'LBL_CS_TITLE',
            'description' => 'LBL_CS_DESC',
            'filter' => array(
                'module' => array(
                    'Leads',
                ),
            ),
            'config' => array(),
            'preview' => array(),
        ),
    ),
);

?>

converstion-stats.hbs

{{!--
	/* Author: Angel Magaña -- cheleguanaco@cheleguanaco.com
	*  File: ./custom/clients/base/views/conversion-stats/conversion-stats.hbs
	*	
	*  Handlebars template for 'Monthly Lead Conversion Stats' custom pie chart
	*/
--}}

<div class="nv-demo">
    <div id="chart1" class="nv-chart nv-chart-pie">
        <svg></svg>
    </div>
</div>

en_us.cs.lang.ext.php

<?php
/* Author: Angel Magaña -- cheleguanaco@cheleguanaco.com
*  File: ./custom/Extension/application/Ext/Language/en_us.cs.lang.ext.php
*	
*  Language extension file for 'Monthly Lead Conversion Stats' custom pie chart
*/


    $app_strings['LBL_CS_TITLE'] = 'Monthly Lead Conversion Stats';
    $app_strings['LBL_CS_DESC'] = 'Provides Lead conversion statistics for the current month.';
    $app_strings['LBL_CS_SPAN'] = date('F Y');
    $app_strings['LBL_CS_CONVERTED'] = 'Converted: ';
    $app_strings['LBL_CS_PENDING'] = 'Not Converted: ';

?>

it is work with 7.7 ?

Yes, it should work fine with 7.7.

This will work with 7.9 too.