用于提升DT仪表板的Chrome扩展.zip

# Dynatrace Dashboard PowerUps This extension powers-up Dynatrace dashboards to enable cool new experimental features live, such as: - Color changing tiles based on thresholds - Color changing icons based on thresholds - Generating reports - USQL values on world maps *Please note: this is a community developed demonstration application. It is provided without any representations, warranties, or support from Dynatrace. If you have questions about this app, please post on our forum or create an [issue](https://github.com/LucasHocker/DynatraceDashboardPowerUps/issues) on Github* ## Table of contents - [Install](#Installation) - [Configure](#Configure-extension) - [Reports](#Reports) - Powerup List: - [Disclaimer](#Disclaimer) - [Tooltips](#Tooltips) - [Colorize](#Colorize) - [Icons](#Icons) - [Worldmaps](#Worldmaps) - [Banner](#Banner) - [Line chart threshold](#Line-chart-threshold) - [USQL stacked bar chart](#USQL-Stacked-Bar-chart) - [USQL colors](#USQL-colors) - [Heatmap](#heatmap) - [Sankey](#UserAction-Sankey-chart) - [Vertical funnel](#Vertical-Funnel) - [Math](#Math) - [Date](#Date) - [Gauge](#Gauge) - [Compare](#Compare) - [VLookup](#VLookup) - [Stdev](#Stdev) - [100stack](#100stack) - [Table](#Table) - [mCompare](#mCompare) - [Image](#Image) - [Background](#Background) - [Funnelcolors](#FunnelColors) - [Forecast](#Forecast) - [Grid](#Grid) - [TileCSS](#Tilecss) - [Menu](#Menu) - [Topcolor](#Topcolor) - [Honeycomb](#Honeycomb) - [Autohide](#Autohide) - [Treemap](#Treemap) - [TimeOnPage](#TimeOnPage) - [Cumulative](#Cumulative) - [Ellipsis](#Ellipsis) - [Marquee](#Marquee) - [RageClick](#RageClick) - [Graph](#Graph) ## Installation 1. Install the extension from the [Chrome Store](https://chrome.google.com/webstore/detail/dynatrace-dashboard-power/dmpgdhbpdodhddciokonbahhbpaalmco)  2. Click the puzzle icon and pin PowerUps   3. The icon will change from gray to blue when active (and purple when the extension has updated)   4. When a new update is released via Chrome Web Store it will automatically be updated. Google can take several days to approve an update to an Extension. If you wish to run the very latest version, change Library Location to GitHub in the Extension preferences. ## Configure extension 5. Click blue (or purple) powerup icon  6. Modify preferences  7. Click save. Note: you may need to refresh your page for changes to take effect. ## Powerup Howto To add PowerUps to your existing dashboards, you may add markup text in your dashboard tile titles. Alternatively, you may deploy dashboard packs with PowerUps already included via the <a href="https://dynatrace.github.io/BizOpsConfigurator">BizOpsConfigurator</a>. ## Reports As of 1.53, PowerUps now includes a Report Generator. For details, see: [Reports](Reports.md). ## Powerup List ### Disclaimer If you manually add markup, it is best practice to add a Powerup disclaimer tile so that users who do not yet have the Extension, will be directed to install it. To add the disclaimer, add the following to your dashboard JSON: ``` { "name": "Markdown", "tileType": "MARKDOWN", "configured": true, "bounds": { "top": 0, "left": 0, "width": 1254, "height": 76 }, "tileFilter": {}, "markdown": "##\uD83D\uDC8E Powerup Enabled Dashboard \uD83D\uDC8E\n\n## [Install Chrome Extension](https://chrome.google.com/webstore/detail/dynatrace-dashboard-power/dmpgdhbpdodhddciokonbahhbpaalmco)" } ``` If you deploy dashboard packs from the BizOpsConfigurator, this tile is already added for you. Once the Extension loads this tile is hidden. ### Tooltips Nothing required, just enable the extension as per above and refresh your browser on a dashboard. **✔️ Deprecated** Tooltips are now available in-product with Explorer tiles. Example:  ### Colorize For Single Value Tiles, either custom chart or USQL, you can add color coding by adding markup to the title: `!PU(color):base=high;warn=90;crit=80`. Note: also see [USQL colors](#USQL-colors) PowerUp for simply changing colors for USQL and Explorer tiles. **✔️ Deprecated** Please use Data Explorer. For markdown and header tiles, use `!PU(color):color=blue` style syntax. Explanation: - `!PU(color):` this starts the markup - `base=high` this is the base case for your metric, ie is it good to be `low` or `high`? - `warn=90` this is the warning threshold, once breached color coding will be yellow - `crit=80` this is the critical threshold, once breached color coding will be red - `nan=orange` (optional) change color if no data is found or null So in the example of availability, high is better. Greater than 90 would be green, 90 to 80 yellow, and 80 or less red. Alternative: Absolute value comparison - `base=abs,1` - `warn=0.05` - `crit=0.1` This example would result in red: <= .9 or >= 1.1, yellow: <=.95 or >= 1.05, green otherwise. Example:  ### Icons This powerup renders icons in place of Markdown tiles. These icons change color to give a quick visual indication of environment / business health. For example, if payment processing was beyond a threshold hold, you might have a creditcard icon turn red. Here's how that might look: ``` [Extension Needed](https://github.com/LucasHocker/DynatraceDashboardPowerUps) !PU(svg):icon=creditcard;link=val3;base=high;warn=90;crit=85 ``` Explanation: - Link to extension: this lets users without the extension know to download it - `!PU(svg):` this starts the markup - `icon=` this refers to an SVG file in the 3rdParty/node_modules/@dynatrace/barista-icons folder. (Optional) you can use a comma-seperated list of 3 icons if you want the icon shape to change based on the value, e.g. `icon=smiley-happy-1,smiley-ok-2,smiley-unhappy-2` - `link=` this is used to link to a Single Value Tile to get the comparison value - `base=` this is the base case for your metric, ie is it good to be low or high? - `warn=` this is the warning threshold, once breached color coding will be yellow - `crit=` this is the critical threshold, once breached color coding will be red - `tooltip=` tooltip text for the icon. Use underscores in place of spaces, they'll be swapped for spaces. - `url=` (optional) if you want the icon to be clickable, give it a url. REQUIRED: use this as last argument. Just be sure to include the `!PU(link):` with a matching string in the desired Single Value Tile - `number=` (optional) set to true if you want a number to be displayed along with the SVG, false by default. Example:  ### Worldmaps This powerup reloads the data in world maps with that from a USQL table. This allows you to map arbitrary things like revenue. It also enables click or scrollwheel to zoom. Click in an ocean to reset zoom. Add markup to your USQL table's title like this: `Revenue !PU(map):color=green;link=Apdex` Explanation: - Revenue: title for your USQL table and Worldmap - `!PU(map):` indicates this is a map powerup - `color=` what color scale to use, e.g. "green" or "#E9422F" - `link=` refers to the standard metric picked for the chart in the OOTB tile configuration. This allows you to have multiple worldmaps driven by multiple USQL tables Example:  ### Banner If you have multiple environment with dashboards up on screens and need an easy way of telling which is say Production and which one is say QA, you can color code the top of the dashboard. Use a ~~dashboard tag~~ markdown tile like this: `!PU(banner):color=purple` > ⚠️ DEPRECATION NOTICE: Using dashboard tags