<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>


<div id="app">
  <div ref="wdrComponent"></div>
</div>

new Vue({
    el: "#app",
    data() {
        return {
            report: null
        }
    },
    mounted() {
        this.report = new WebDataRocks({
            container: this.$refs.wdrComponent,
            toolbar: true,
            height: 380,
            width: "100%",
            report: {
                dataSource: {
                    "dataSourceType": "csv",
                    "filename": "https://cdn.webdatarocks.com/data/data.csv"
                },
                "slice": {
        "rows": [
            {
                "uniqueName": "Country"
            },
            {
                "uniqueName": "Category"
            }
        ],
        "columns": [
            {
                "uniqueName": "Business Type"
            },
            {
                "uniqueName": "Measures"
            }
        ],
        "measures": [
            {
                "uniqueName": "Price",
                "aggregation": "sum"
            }
        ]
    },
    "conditions": [
        {
            "formula": "#value > 2000000",
            "measure": "Price",
            "format": {
                "backgroundColor": "#0598df",
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        }
    ]
            }
        })
    }
})