JSFiddle - React, Tailwind, and code Playground

by vitorbaptista

HTML

<script src="http://openspending.org/static/openspendingjs/prod/boot.js"></script>
<script src="http://openspending.org/static/openspendingjs/lib/widgets.js"></script>
<script src="http://openspending.org/static/openspendingjs/widgets/treemap/main.js"></script>
<script src="http://openspending.org/static/openspendingjs/widgets/aggregate_table/main.js"></script>
<script src="http://openspending.org/static/openspendingjs/app/treetable/treetable.js"></script>
<div id="widget"></div>

CSS

body, html, #widget {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

JavaScript

var context = {
    dataset: "eu-budget-mff",
    siteUrl: "http://openspending.org",
    pagesize: 5,
    callback: function (name) {} // This is called when there're no more drilldowns
                                 // to do. We don't want to do nothing here.
};
var drilldowns = ["main-programme", "programme", "sub-programme"];
var initialFilters = { 'year': 2020 };

function drilldownCallback(name, filters, drilldown) {
    // Add the new drilldown to the current filters
    filters[drilldown] = name;

    treetable.drilldown(filters, drilldownCallback);
}

OpenSpending.scriptRoot = "http://openspending.org/static/openspendingjs";
treetable = new OpenSpending.Treetable($('#widget'), context, drilldowns);

// Initial drilldown
treetable.drilldown(initialFilters, drilldownCallback);