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

conversion-stats.js

({
	/* Author: Angel Magaña -- [email protected]
	*  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 -- [email protected]
*  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 -- [email protected]
	*  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 -- [email protected]
*  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: ';

?>

Place all files in the paths indicated in the comments header of each file then:

1. Perform a Quick Repair and Rebuild
2. Purge the contents of the ./cache directory for your install
3. Perform a full reload of Sugar within your browser

Tested with version 7.6.0 only, but should work with 7.5.x as well.

Once applied, it is available for selection within the Leads module Dashboard/Intelligence Panel.

it is work with 7.7 ?

Yes, it should work fine with 7.7.

This will work with 7.9 too.