Add simple javascript for conditional formatting of cells in Table Chart

Feature Request:

I believe there is much demand for a KPI monitoring chart type such as a gauge or other forms of KPI Visualization Types.

Due to lack of these kind of charts I believe it must be possible to add a small piece of javascript to conditionally format cells in a table.

I added the following piece of code to templates/superset/partials/asset_bundle.html Is this the right way? Templates/superset/partials/asset_bundle.html

{% macro js_bundle(filename) %}
  {# HTML comment is needed for webpack-dev-server to replace assets
     with development version #}
  <!-- Bundle js {{ filename }} START -->
  {% for entry in js_manifest(filename) %}
    <script src="{{ entry }}"></script>
    <script src="override.js"></script>  |<<<<<<<<<<<<<<<
  {% endfor %}
  <!-- Bundle js {{ filename }} END -->
{% endmacro %}
{% macro css_bundle(filename) %}
  <!-- Bundle css {{ filename }} START -->
  {% for entry in css_manifest(filename) %}
    <link rel="stylesheet" type="text/css" href="{{ entry }}" />
  {% endfor %}
  <!-- Bundle css {{ filename }} END -->
{% endmacro `%}

Override.js

var table = document.getElementById("DataTables_Table_0");
var tbody = document.getElementsByTagName("tbody")[0];
var cells = document.getElementsByTagName("td");

for (var i=0, len=cells.length; i<len; i++){
    if (parseInt(cells[i].innerHTML,10) > 5){
        cells[i].className = 'red';
    }
    else if (parseInt(cells[i].innerHTML,10) < -5){
        cells[i].className = 'green';
    }
}

Where should I place this override.js and lateron the css files? Is this a valid way of adding a simple js to have some kind of conditional formatting?

Any suggestions or help is appreciated

[magentomaniac]

I believe I finally found a way to run arbitrary Javascript using the markdown element. Couldn’t get this to work using any official methods including markup chart visualization - which simply refuses to be added to dashboards.

On your dashboard click “edit dashboard” and drag&drop the mardown element anywhere. Click on it on edit. Paste the following markdown to run a small piece of arbitrary javascript and confirm it’s possible to get it working:

<p>Chart title</p>
<img src=";" onerror="alert(0);" />

Since this format is limited by wrapping in double-quotes it’s best to attach your javascript from an external source, like so:

It’s a hack (literally abusing a XSS attack vector) but it’s the only way I could find that works. Hope this helps.

[kalimuthu123]

hi @anouar-zh please check this pull request https://github.com/apache/incubator-superset/pull/4394/files