Plugin - Enable Multicolor Legend Items for Conditional and Range
Overview Legend items come with colored boxes that represent the data points in the chart. The color of each box matches the bar/column/bubble in the chart, as long as the measure is set to a single color, and not conditional or range. When conditional or range is used, the legend item's box becomes grey (or the palette's default color for Scatter Charts), because the box cannot natively accommodate multiple colors. This plugin solves this limitation by: splitting the box into smaller strips to accommodate multiple colors, for conditional, or creating a gradient of two colors in the box, for range. Limitations This plugin is only relevant to Bar Charts, Column Charts, and Scatter Charts. Other chart types either do not support conditional/range or have their own version of legends (e.g., Area Map). If there are too many legend items, wider boxes might affect spacing and cause certain items to be cut off. See the Configuration section below for more details. Installation Instructions Download and unzip the plugin zip file. Extract the files directly (do not extract into a new folder); the plugin files are already organized within a folder in the zip file. Upload the multiColorLegendItems folder to the plugins directory on your Sisense server (/opt/sisense/storage/plugins). Check the Add-ons page in the Admin tab (under Server & Hardware) and make sure the new plugin is listed and enabled. Modify the config file as needed (this can be done before of after the upload). Configurations This plugin comes with a configuration file that can be updated as needed. The four configuration settings in the file are: numberOfColorsForWiderBoxes . If there are too many conditions, the box may be too small to accommodate all colors, so the width may need to be increased. In this case, specify the threshold for the number of colors. For example, a threshold of 5 means the box width will be increased if there are five or more colors assigned to it. Otherwise, the original width will be kept. Note: Wider boxes might affect spacing and cause certain legend items to be cut off if there are too many of them. To work around this, the verticalLayout setting can be set to true. The default value is 5. widthMultiplierForConditional . For wider boxes, specify the multiplier. For example, a multiplier of 1.5 means the new width will be 1.5 times the original width for boxes that have more colors than the numberOfColorsForWiderBoxes threshold. The default value is 1.5. widthMultiplierForGradient . If wider boxes are needed for range as well, specify the multiplier. Otherwise, leave the default value of 1. The original width is generally sufficient for range. verticalLayout . Specify whether legend items should be laid out vertically. This is useful when wider boxes are needed and there are too many legend items to fit correctly horizontally. The default value is false. Examples 1. Conditional with 4 colors (less than the numberOfColorsForWiderBoxes threshold) [ALT Text: A comparison of two column charts labeled "Before" and "After," displaying sales and costs data by sales associates. The "Before" chart shows the "Sales" legend item box in grey despite conditional formatting being applied, while the "After" chart correctly displays the four conditional colors.] 2. Conditional with 11 colors (greater than the numberOfColorsForWiderBoxes threshold, the legend item box width is increased) [ALT Text: A comparison of two scatter charts labeled "Before" and "After," displaying sales and costs data by sales associates. The "Before" chart shows the "Sales" legend item box in blue (the palette's default color) despite conditional formatting being applied, while the "After" chart correctly displays all eleven conditional colors, with a wider box to fit them.] 3. Range Auto (both the min and max colors are auto-selected) [ALT Text: A comparison of bar scatter charts labeled "Before" and "After," displaying sales and costs data by sales associates. The "Before" chart shows the "Sales" legend item box in grey despite automatic range (gradient) being applied, while the "After" chart correctly displays a gradient between the automatically selected minimum and maximum colors.] 4. Range Manual with Min Max range type (both the min and max colors are manually selected) [ALT Text: A comparison of bar scatter charts labeled "Before" and "After," displaying sales and costs data by sales associates. The "Before" chart shows the "Sales" legend item box in grey despite manual range (gradient) with Min/Max mode being applied, while the "After" chart correctly displays a gradient between the user-selected minimum and maximum colors.] 5. Range Manual with Min range type (only the min color is manually selected) [ALT Text: A comparison of bar scatter charts labeled "Before" and "After," displaying sales and costs data by sales associates. The "Before" chart shows the "Sales" legend item box in grey despite manual range (gradient) with Min mode being applied, while the "After" chart correctly displays a gradient between the user-selected minimum color and the automatically selected maximum color.] 6. Range Manual with Max range type (only the max color is manually selected) [ALT Text: A comparison of bar scatter charts labeled "Before" and "After," displaying sales and costs data by sales associates. The "Before" chart shows the "Sales" legend item box in grey despite manual range (gradient) with Max mode being applied, while the "After" chart correctly displays a gradient between the automatically selected minimum color and the user-selected maximum color.]Customizing the Sisense User Interface with Interactive Buttons and Icons
Sisense plugins and scripts enable extensive customization of the Sisense user interface, allowing developers to add interactive elements such as buttons and icons to enhance functionality and user experience. A common use case of plugins involves adding clickable icons or buttons that trigger specific plugin features or open custom UI elements. This article outlines the process for adding these interactive elements using a practical example.Loading Amchart5 and Other External Libraries via Script Tags in Plugins
This article explains how to load external libraries, such as Amchart5, into Sisense plugins by dynamically adding script tags to the page header to load the library. This method can avoid potential issues associated with other loading techniques but also offers flexibility such as using an external CDN to reduce plugin size and file count. Previous articles have discussed how to load external libraries and modules for Sisense plugins via adding the file to the plugin folder, and adding the file to the "source" parameter array in the plugin.json.
Custom Map Widget
Download: Custom Map Widget Note: (Sept 18, 2017) Added support for filtering on shapes. Introduction This article explains how to embed custom map visualizations in Sisense. Purpose/Benefits Sisense has some native mapping functionality but does not allow for importing custom maps. This plugin allows you to view data in whatever map you like. See the references for more information on GeoJSON, Leaflet, and Mapbox. Custom shapes (Counties) overlayed on a base map: Custom shapes (Chinese Provinces) with no base map: Steps The following steps will walk through the process of adding the new chart type and creating a sample map. STEP 1 - ADD THE PLUGIN Download the customMapWidget.zip attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Now, when you create a new widget the Custom Map widget should show up in the list of options STEP 2 - PREPARE GEOJSON FOR YOUR CUSTOM MAP This plugin uses GeoJSON files to overlay data as shapes on a map. More information on GeoJSON can be found here, but the general concept is that each file defines a JavaScript object that has a type of FeatureCollection and a list of features. There are different types of features, but the most common type is a polygon. Each feature represents a shape to display on the map and contains properties and geometry. Properties describe the attributes of the entire shape, while geometry is a list of points. Each point is a latitude/longitude combination, and the mapping function displays all points of the shape on the map and then draws a line to connect them. Below is an example of the format for a GeoJSON file. { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "ID": "1", "Name": "MyShape1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [-86.411172, 32.409937], [-86.496774, 32.344437] ] ] } } ] } This plugin comes with 3 GeoJSON files included, but you can add in more if you want to show a different set of shapes. Some government agencies provide geo data for free use, and there are several 3rd party sites that provide free geo data as well. If you want to add in your own geo data, copy the file to customMapWidget/geojson/ folder. STEP 3 - CONFIGURE THE PLUGIN Open the config.js file and update the setting object's properties. urlTemplate - When using mapbox as the tiling server, you will need to provide a tile url mapboxKey - When using mapbox as the tiling server, you will need to provide an api key mapboxId - When using mapbox as the tiling server, you will need to provide a map type to use shapeSeparatorColor - color used for the outlines of the shapes shapeHighlightColor - color used to differentiate the highlighted shape Next update the list of Map options. This is a list of all the map types that are allowed by the widget, so if you are adding a custom GeoJSON file make sure to add it to the list and set the properties accordingly label - Name that appears in the widget editor, for selecting a map type url - Path to the GeoJSON file showBaseMap - should be true or false, based on whether you want to overlay your data on a map keyAttributes - a list of attribute names to use as the key, these get concatenated together using the separator below keySeparator - character to use as a separator for the attribute key prism.customMap = { settings: { mapboxKey: 'myMapboxApiKey', urlTemplate: window.location.protocol + '//api.tiles.mapbox.com/v3/sangil.i6ch70f8/{z}/{x}/{y}.png', mapboxId: 'mapbox.light', shapeSeparatorColor: 'white', shapeHighlightColor: 'black' }, maps: [ { label: 'Canada', url: '/plugins/customMapWidget/geojson/canada-GeoJSON.js', showBaseMap: true, keyAttributes:['NAME'], keySeparator:',', }, { label: 'US Counties', url: '/plugins/customMapWidget/geojson/USCounties-GeoJSON.js', showBaseMap: true, keyAttributes:['STATE','COUNTY'], keySeparator:'', }, { label: 'China Provinces', url: '/plugins/customMapWidget/geojson/china-provinces.js', showBaseMap: false, keyAttributes:['name'], keySeparator:'', }, ], widgets: {} }; STEP 4 - CREATE THE CHART On your dashboard, click the Create Widget button and select Advanced Configuration. Next, select the Custom Map Chart from the chart types menu. Pick a map type from the menu on the right. This selection determines which shape file to load, so you can use this plugin to make several map types available. Next, pick a dimension to use for the Geography dimension. The values from this field need to match the attribute key defined in the map's keyAttributes field. For example, this plugin comes with a GeoJSON file that provides the shape information for all counties in the US. If you open this file, each shape is has properties for STATE and COUNTY that uniquely identify each shape. The included Elasticube combines the STATE and COUNTY codes into a single field named GeoKey. In order to match up data from the Elasticube to the GeoJSON file, the config file specifies that the key is comprised of STATE and COUNTY. The Label dimension (optional) identifies which field to use when displaying the tooltip. The US Counties example uses FIPS codes to identify each county, but you may want to show tooltips with the county names instead. The Value measure is the number to embed into each shape. You can use the standard options to format the number, and the color selections get passed along to each shape. References/Notes Mapbox API - More information about the Mapbox API. This plugin uses mapbox in order to render the maps, so it does require a Mapbox API Key in order to render shape overlays on top of maps. More information on Mapbox API pricing can be found here. LeafletJS - The Mapbox project is an extension of the Open Source LeafletJS JavaScript library. If you're looking to modify the plugin, this can be a useful reference. Natural Earth - This site provides free geo data for download, so if you don't have the geo data already you can likely get it from this site. MyGeoData - This plugin requires a lat/long coordinate system (WGS 84) in order to display overlays on top of maps. If you're custom geo data comes in a different format, this site can likely help convert it to WGS 84 format. Upload your geo files, and convert/export it to a geojson file using the WGS 84 coordinate system. Also, you may need to change the file extension from geojson to js in order for your web server to know how to handle this file type. SampleElasticube.zipExploring the Potential of Sisense Jump to Dashboard Filter Configurations
Sisense Jump to Dashboard offers a powerful way to enhance the user experience and streamline data exploration with the help of different filter configurations. By default, all the filters from the parent dashboard, measured values, and widget filters are passed and replaced in the drill dashboard. This guide explains and provides examples of how you can customize the way filters impact the drill dashboard. We'll delve into multiple filter configuration options and provide a step-by-step guide on how to implement them effectively.Plugin - RemoveImageDownload - Removing Items From Sisense Menus
This article discusses a plugin (and an equivalent dashboard script) that removes the “Download as Image” option from Sisense menus. This same approach can be applied to remove any other menu option in Sisense by adjusting the relevant code. Organizations may want to hide or remove specific menu items for several reasons: Security: Prevent certain menu options from being used. Enforcing Best Practices: Remove menu items not used in the standard recommended workflow Streamlined UI: Hide unused menu items to simplify the user experience. Plugin Overview RemoveImageDownload plugin removes the “Download Image” option from all standard Sisense menus which include the:Managing Sisense Add-ons: Upgrades, and Version Control
This article describes how certified add-ons are upgraded in Sisense. Additionally, this guide will help you address questions related to add-on versions, such as when different versions of add-ons are installed on different instances or how to keep add-ons updated on on-premise instances.Custom error notification image
Custom error notification image This article explains how to develop the plugin to replace the default error image. Of course, in ideal world there are no errors, but who does live in the ideal one? As a result of this article’s implementation, we will accomplish the following: ALT Text: A comparison table with two columns titled "Original" and "Custom." Each column contains the same message about an error querying a data model, mentioning a specific dimension related to healthcare. The "Original" message features a yellow warning icon, while the "Custom" message has a red explosion icon. Both messages prompt the user to "Try again." To accomplish this we will develop a new plugin. For more details about plugin development please check this article: https://community.sisense.com/t5/knowledge-base/plugin-dev-tutorial/ta-p/9087 To create a new plugin we will need to do the following: Use file manager to navigate to the folder ‘plugins’; In the folder ‘plugins’ create a new folder and name it ‘updateErrorLogo’; Open the newly created folder and create two files: main.6.js; plugin.json. Open the file ‘plugin.json’ and paste there the following content: { "name": "updateErrorLogo", "source": [ "main.6.js" ], "lastUpdate": "2025-01-10T22:36:03.764Z", "folderName": "updateErrorLogo", "isEnabled": true, "version": "1.0.0", "skipCompilation": true, "pluginInfraVersion": 2 } 5. Open the file `main.6.js’ and paste there the following code: //Import your image. Value of the variable newErrorSvg is internal URL to the image import newErrorSvg from './newErrorSvg.svg'; //Subscription at the loading directive slfQueryErrorBrand mod.directive('slfQueryErrorBrand', [ () => { return { restrict: 'C', link: async($scope, lmnt, attrs) => { $(lmnt).hide(); //Hiding default logo await fetch(newErrorSvg).then((response) => { //Load SVG return response.text().then(svgContent => { //Convert response into text lmnt[0].innerHTML = svgContent; //Replace default content with our custom one }); }).catch((error) => { console.error('Error loading SVG:', error); }).finally(() => { $(lmnt).show(); //Show logo }); } }; } ]); 6. Place an image with the name ‘newErrorSvg.svg’ you want to be shown instead of the default. Now, after the plugins rebuild you will see your new image instead of the default one. Enjoy your customized error image. In the attachment, you can find the completed plugin.D3 Force Directed Network Diagram
This article explains how to create a force directed network diagram using Sisense. This is helpful for showing hierarchies or relationship within your data. Steps The following steps will walk through the process of adding the new chart type and creating a sample funnel chart. Step 1 - Add the Plugin Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Step 2 - Create the Chart On your dashboard, create a new widget and select Force Directed as the type. In order to work with this visualization, you need to specify at leas a Node ID and Linked Node ID. This is basically how the relationship is defined within the data. If you think about this in terms of an employee hierarchy, the Node ID field would usually be an employee ID and the Linked Node ID would be the employee's manager ID. There are also several optional fields you can add in Node Labels - The value label for each node (such as the employee's name) Color - This field determines how to color each node. You can use a dimension here (such as department name) or a metric (such as Sales per Employee). When using an Icon to display each node, this field is ignored Node Size - This field determines the size of each node. The higher the value, the larger the node is displayed. When not specified, all nodes are displayed with the same size Node Icon URL - Use this field to specify an image to show for each node. This should be a URL to where the images are hosted. If a node is missing an icon url, it will show a circle instead. If this field is left blank, each node will show up as a circle. Step 3 - Format the chart This visualization has several formatting options, see below for a description of each. Node Circle Size - A slider control that allows the designer to determine the range used for sizing each node Size Scale Method - Determines which scaling algorithm to use for determining the size of each node Selectable as Filters - Controls whether or not each node can set a dashboard filter when clicked on Value Labels - Controls whether or not to display labels for each node, and where to place the label Zoom from Mouse Scroll - When enabled, a user can adjust the size of the nodes by using their mouse scroll wheel Animation - Determines whether or not the chart loads with animation Gravity - A slider control for adjusting the gravity of the force layout Friction - A slider control for adjusting the friction of the force layout Charge - A slider control for adjusting the charge of the force layout References/Notes This plugin was based of a D3 Force Directed visualization. For more information on D3 in general, please see this link. For some generic examples of working with D3, please see this link and this link. The bottom 3 sliders in the Design Panel control variables for gravity, friction, & charge. These are D3 specific variables that work together to determine how the chart calculates a layout. For more information on these variables, please see the D3 Documentation or this explanation. See the attached files for the plugin and also a sample Elasticube & Dashboard Download: Plugin-Force Directed Network.zip Samples.zip
