Custom Dashlet with bar chart

Hi sugar developers,

Thanks for looking on my issues I am facing.

I have created custom dashlet. I can able to get data from API query and then show it to dashlet in table format. which works fine.

But now I want to show same thing in Bar/multibarchart ....I have written the javascript code based on sugarcrm code which uses sucrose library to generate multibarChart. code is as below and the error I am getting.

Please help me find the issue or direction to make sucrose.charts.multibarChart() work on custom dashlet.

/**
 * @class View.Views.Base.CustomerJourneyDashletView
 * @alias SUGAR.App.view.views.BaseCustomerJourneyDashletView
 * @extends View.View
 */
({
	plugins: ['Dashlet', 'Chart'],
	css: ["custom/include/css/wage-stream-access.css"],
	wages: undefined,
	wagesByCategory: {},

	_groupWagesByCategory: function(wages) {
		const wagesByCategory = {};
		wages.forEach(wage => {
			const category = wage.category || 'Other';
			if (!wagesByCategory[category]) {
				wagesByCategory[category] = [];
			}
			wagesByCategory[category].push(wage);
		});
		return wagesByCategory;
	},

	_countWagesByCategory: function(wagesByCategory) {
		const categoryCounts = {};
		for (const category in wagesByCategory) {
			categoryCounts[category] = wagesByCategory[category].length;
		}
		return categoryCounts;
	},

	_retrieveData: function() {
		var cntrlr = this;
		app.api.call('GET', app.api.buildURL('wagestreamaccess'), null, {
			success: function(data) {
				console.log("data: ", data);
				if (data.length > 0) {
					cntrlr.wages = cntrlr._groupWagesByCategory(data);
					cntrlr.categoryCounts = cntrlr._countWagesByCategory(cntrlr.wages);
					_.extend(cntrlr, cntrlr.wages);
					cntrlr.render();
					cntrlr.renderChart();
				}
			},

			error: function(e) {
				throw e;
			}
		});
	},

	renderChart: function() {
		if (this.wages) {
			const chartData = [];
			for (const category in this.categoryCounts) {
				chartData.push({
					name: category,
					value: this.categoryCounts[category]
				});
			}
			const chartOptions = {
				height: 300,
				margin: { top: 20, right: 20, bottom: 50, left: 50 },
				x: function(d) { return d.name; },
				y: function(d) { return d.value; },
				xAxis: {
					axisLabel: 'Category'
				},
				yAxis: {
					axisLabel: 'Count',
					axisLabelDistance: -10
				}
			};

			this.chart = sucrose.charts.multibarChart()
				.options(chartOptions)
				.data(chartData)
				.selector('#chart-container')
				.render();
		}
	},

	initialize: function(options) {
		this.wages = [];
		this.categoryCounts = {};
		this._super('initialize', [options]);
		this._retrieveData();
	}
})

<div class="control-group dashlet-options">
    <div class="controls controls-two btn-group-fit">
        <div class="row-fluid">
            <div class="">
                <p>Report to show the number of customers who:</p>
                <ol>
                    <li>have purchased streamed wage access (closed won, or on current/active subscription)</li>
                    <li>who have an open opportunity for streamed wage access, new sale, not an increase to existing component</li>
                    <li>who have declined streamed wage access (closed lost)</li>
                    <li>who are yet to be sold (no opportunity, no closed won/lost)</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div id="chart-container"></div>

<?php

/**
 * Metadata for the wage-stream-access dashlet view
 */
$viewdefs['base']['view']['wage-stream-access'] = array(
    'dashlets' => array(
        array(
            'label' => 'Streamed Wage Access Report',
            'description' => 'Lists Streamed Wage Access report',
            'config' => array(),
            'preview' => array(),
            'filter' => array(
                'module' => array(
                    'Home',
                    'Accounts',
                    'Leads',
                ),
                'view' => array(
                    'record',
                )
            )
        ),
    ),
);

working custom dashlet screenshot with table

Parents Reply Children
  •  Hi  

    what version of Sugar are you using? Is there a reason not to use Reports Dashlet for your use case? you just need to create the report and add a Reports Dashlet and you will get the table+chart+filtering without any code.

    If that's not the case, I'd advise you not to use "sucrose" which is deprecated, our supported chart library is ChartJS. Even though it is in our code base, those functionalities are being moved to reports dashlet or migrated over to ChartJS soon.

    I believe sucrose.chart.multibarChart() needs a more configuration like (strings and locality):


    this.chart = sucrose.charts.multibarChart()
                .showTitle(false)
                .showControls(true)
                .showValues(false)
                .stacked(true)
                .tooltipContent(_.bind(function(eo, properties) {
                    var point = {};
                    var precision = this.locality.precision;
                    point.groupName = app.lang.get('LBL_PMSE_LABEL_PROCESS', this.module);
                    point.groupLabel = eo.group.label;
                    point.seriesName = app.lang.get('LBL_PMSE_LABEL_STATUS', this.module);
                    point.seriesLabel = eo.series.key;
                    point.valueName = app.lang.get('LBL_CHART_COUNT');
                    point.valueLabel = sucrose.utility.numberFormat(eo.point.y, precision, false, this.locality);
                    return this.tooltipTemplate(point).replace(/(\r\n|\n|\r)/gm, '');
                }, this))
                .tooltips(true)
                .strings({
                    legend: {
                        close: app.lang.get('LBL_CHART_LEGEND_CLOSE'),
                        open: app.lang.get('LBL_CHART_LEGEND_OPEN'),
                        noLabel: app.lang.get('LBL_CHART_UNDEFINED')
                    },
                    noData: app.lang.get('LBL_CHART_NO_DATA'),
                    noLabel: app.lang.get('LBL_CHART_UNDEFINED')
                })
                .locality(this.locale);

    SugarCRM | Principal Developer Advocate