Plugin - Custom Coloring of Bar and Column Chart Type Widgets (barChartCustomColor) | Add-ons & Plug-Ins

Plugin - Custom Coloring of Bar and Column Chart Type Widgets (barChartCustomColor)

Summary: Jeremy Friedel, Jeremy Friedel, introduces a plugin named barChartCustomColor, designed to modify the color scheme of bar and column chart-type widgets in Sisense dashboards. This plugin aligns chart colors with the dashboard's color palette for consistent styling. Installation requires placing the plugin in the Sisense plugins folder and enabling it through the Admin section. By setting widget scripts to changeColor, users can apply the color scheme to individual widgets or the entire dashboard. The plugin employs the processresult widget event to adjust colors and supports a customizable color dictionary for overriding default color settings. Jeremy invites users to share feedback and suggest other types of plugins they are interested in.

Plugin - Custom Coloring of Bar and Column chart-type widgets

This plugin modifies the color scheme of bar and column chart-type widgets to match the current color palette of the dashboard.

Installation

To install this plugin, download and unzip the attachment. Then drop the barChartCustomColor folder into your plugins folder (/opt/sisense/storage/plugins). Enable the plugin on the Add-ons tab in the Admin section, wait for the plugin to build, and the plugin will be enabled. The plugin API can also be used, as well as the file management UI.

Notes

When a bar or column chart type Sisense widget is very straightforward and focused and does not have multiple values, breaks by's, categories, or conditional coloring, it can sometimes appear relatively mono-color but still be the most effective way to quickly visually communicate important data.

While Sisense includes numerous powerful and varied methods and options to change widget styling and includes functionality to set bar color to vary based on the bar value, it sometimes may be desired to use the dashboard palette to vary the bar colors independently of bar value and guarantee a colorful widget regardless of the data and current filter state of the current dashboard and widget. This plugin allows the current dashboard palette to be used in this manner in a simple and quick matter and allows this to be applied quickly to an entire dashboard at once. Linking the widget coloring to the dashboard palette allows this color scheme to be quickly changed in the native UI without modifying individual widgets. This plugin also allows using a color dictionary config option to modify the coloring of a value in all widgets this plugin is enabled in.

Screen Shot 2024-04-04 at 1.21.28 AM.png

Screen Shot 2024-04-04 at 1.28.47 AM.png

Screen Shot 2024-04-04 at 1.25.13 AM.png

This plugin uses the processresult widget event to modify the color parameter of each bar or column in a series.

The dashboard palette is retrieved using the getPalette() function within the dashboard style parameter, which returns the current dashboard palette. This can be used in other plugins and scripts.

dashboard.style.getPalette()

This plugin is enabled via dashboard or widget scripts that set the widget parameter changeColor to true for a widget.

For a widget script, this is as simple as adding this one line to the script:

widget.changeColor = true;

Adding this three-line dashboard script will set this parameter to true for all widgets in the dashboard:

dashboard.on('widgetinitialized', function (_, dashObj) {
	dashObj.widget.changeColor = true;
});

This can be modified with custom logic as needed, for example, based on widget title or ordering in the dashboard. If this option is enabled for a type of widget this plugin does not apply to, it will simply be ignored by the plugin. This plugin ignores widgets with Break By's or Date Categories, or widgets that are not bar or column chart-type widgets.

The color scheme is based on the current dashboard palette.

Screen Shot 2024-04-04 at 12.49.55 AM.png

Changing the dashboard palette using the standard Sisense palette UI will result in a matching change of all widgets in the dashboard where this plugin is enabled.

Screen Shot 2024-04-04 at 12.53.49 AM.png

The config file of this plugin includes an option called colorDictionary, this can be used to override the standard palette color for all instances this value appears as the bar category, for all widgets this plugin is enabled for, regardless of the dashboard palette. Any standard HTML color naming format may be used in the dictionary config value.

For example, if the colorDictionary is set to:

    colorDictionary :
        {
            'Bikes': '#AA6C39',
            'ABC' : 'yellow'
        }

Then the ABC bar or column will be yellow in the widget, regardless of the current widget palette or positioning. This will apply to all widgets where this plugin is active.

Screen Shot 2024-04-04 at 1.01.38 AM.png

This plugin can be used as a basic template for your own Sisense plugins that run on a specific widget or dashboard event, that can be enabled or disabled via widget script, and that includes a configuration file to modify settings without modifying code files.

Screen Shot 2024-04-04 at 1.16.31 AM.png

Screen Shot 2024-04-04 at 1.18.31 AM.png

How did the plugin work for you? What other type of plugin are you looking to learn more about?

Let me know in the comments!

Jeremy Friedel

Posted 2 years ago·Last reply 5 months ago

Team Lead, Software Engineering of FES SWE at Sisense

1 comment

Jeremy Friedel

OP5 months ago

The main.js file of the plugin:

// Change Coloring of Bar Chart and Column Charts 

// For charts without Break By's and which have widget.changeColor set to true via script.

import { config } from './config.6';


if (window.prism) {
    prismObject = window.prism;
}
// If v1 Sisense.js, use internal scope prism
else {
    prismObject = window.Sisense.internalScope.prism;
}

prismObject.run([
    () => {
        prismObject.on('dashboardloaded', customColors);

        function customColors(_, { dashboard }) {
            dashboard.on('widgetprocessresult', function (_, dashboardWidgetObj) {

                localColorDictionary = config.colorDictionary;

                var palette = dashboard.style.getPalette().colors;

                function getColor(cat) {
                    return localColorDictionary[cat];
                }


                function checkDictionary(curCategory, ord) {
                    var curColor = getColor(curCategory);
                    if (curColor == null) {
                        localColorDictionary[curCategory] = palette[ord % palette.length];
                    }
                }

                // Make color change of charts without Break By
                function chartColorChange() {

                    if (!dashboardWidgetObj.result.series.length) {
                        return;
                    }

                    var initialLength = dashboardWidgetObj.result.series[0].data.length;

                    for (let i = 0; i < initialLength; i++) {
                        if (dashboardWidgetObj.result.series[0].data[i].selectionData &&
                            dashboardWidgetObj.result.series[0].data[i].selectionData[0]) {
                            var curCategory = dashboardWidgetObj.result.series[0].data[i].selectionData[0];
                            checkDictionary(curCategory, i);
                            dashboardWidgetObj.result.series[0].data[i].color = getColor(curCategory);
                        }
                    }
                }

                // Whether Break By is used and active
                function panelActive(panels, targetPanel) {
                    var breaks = panels.filter(function (entry) {
                        if (entry.title == targetPanel) {
                            return entry;
                        }
                    });
                    if (breaks[0].items.length == 0) {
                        return false;
                    } else {
                        return true;
                    }
                }

                // Whether Category Panel is of Date type
                function isNotDateXAxis(panels) {

                    return (panels[0].items &&
                        panels[0].items.length > 0 &&
                        panels[0].items[0].jaql &&
                        panels[0].items[0].jaql.datatype &&
                        panels[0].items[0].jaql.datatype != "datetime");

                }
                
                // Modify to remove or change widget types or add additonal conditions
                if ((dashboardWidgetObj.widget.manifest.name == "chart/column" ||
                    dashboardWidgetObj.widget.manifest.name == "chart/bar") &&
                    dashboardWidgetObj.widget.changeColor &&
                    !panelActive(dashboardWidgetObj.widget.metadata.panels, "break by") &&
                    isNotDateXAxis(dashboardWidgetObj.widget.metadata.panels)
                    ) {
                        
                        chartColorChange();
                        
                }


            });

        }
    }
]);