javascriptjqueryecmascript-6progress-barwebdatarocks

Add progress bar to td inside webdatarocks table

I have not found any help in the webdatarocks documentation if we can add progress bars inside the td. Is there any way we can do that to a table like so:

var pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        width: "100%",
        height: 600,
        report: {
            "dataSource": {
                "dataSourceType": "csv",
                "filename": "https://cdn.webdatarocks.com/data/data.csv"
            },
            options: {
                      grid: {
                          type: 'classic',
                      }
                  },
            "slice": {
                "reportFilters": [{
                    "uniqueName": "Color"
                }, {
                    "uniqueName": "Destination"
                }],
                "rows": [{
                    "uniqueName": "Category",
                    "filter": {
                        "members": ["Category.Clothing", "Category.Cars"],
                        "negation": true
                    }
                }, {
                    "uniqueName": "Business Type"
                }],
                "columns": [{
                    "uniqueName": "Measures"
                }, {
                    "uniqueName": "Country",
                    "filter": {
                        "members": ["Country.United Kingdom", "Country.Germany"],
                        "negation": true
                    }
                }],
                "measures": [{
                    "uniqueName": "Price",
                    "aggregation": "sum",
                    "format": "currency"
                }, {
                    "uniqueName": "Discount",
                    "aggregation": "sum",
                    "active": false,
                    "format": "currency"
                }],
                "formats": [{
                    "name": "",
                    "maxDecimalPlaces": 2
                }, {
                    "name": "currency",
                    "thousandsSeparator": " ",
                    "decimalSeparator": ".",
                    "currencySymbol": "$",
                    "currencySymbolAlign": "left",
                    "nullValue": "",
                    "textAlign": "right",
                    "isPercent": false
                }],
                "expands": {
                    "rows": [{
                        "tuple": ["Category.Accessories"]
                    }, {
                        "tuple": ["Category.Bikes"]
                    }]
                }
            }
        }
    }

);

function setCustomizeFunction() {
    pivot.customizeCell(customizeCellFunction);
}

/* Insert icons to the cells */

function customizeCellFunction(cell, data) {
    if (data.type == "value" && !data.isDrillThrough && data.isGrandTotalColumn) {
        if (data.value < 50000) {
            cell.text = "<img src='https://www.webdatarocks.com/wd_uploads/2019/02/icons8-decline-64-1.png' class='centered'>";
        } else if (data.value >= 50000) {
            cell.text = "<img src='https://www.webdatarocks.com/wd_uploads/2019/02/icons8-account-64.png' class='centered'>";
        }
    }
}
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<div id="wdr-component"></div>

For example, I want to be able to add:

progress bar

inside the cell for Australia and also add progress bars in each of the cells. Is there a way for me to do that using WebDataRocks.

Solution

  • Yes, it is possible to customize the cell content and add progress bars. Here is an example of how this could be achieved with customizeCell:

    var pivot = new WebDataRocks({
  container: "#wdr-component",
  toolbar: true,
  width: "100%",
  height: 600,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      dataSourceType: "csv",
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    slice: {
      reportFilters: [
        {
          uniqueName: "Color"
        },
        {
          uniqueName: "Destination"
        }
      ],
      rows: [
        {
          uniqueName: "Category",
          filter: {
            members: ["Category.Clothing", "Category.Cars"],
            negation: true
          }
        },
        {
          uniqueName: "Business Type"
        }
      ],
      columns: [
        {
          uniqueName: "Measures"
        },
        {
          uniqueName: "Country",
          filter: {
            members: ["Country.United Kingdom", "Country.Germany"],
            negation: true
          }
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "percentofrow",
          format: "percentage"
        },
        {
          uniqueName: "Discount",
          aggregation: "sum",
          active: false
        }
      ],
      expands: {
        rows: [
          {
            tuple: ["Category.Accessories"]
          },
          {
            tuple: ["Category.Bikes"]
          }
        ]
      }
    },
    options: {
      grid: {
        type: "classic"
      }
    },
    formats: [
      {
        name: "percentage",
        thousandsSeparator: " ",
        decimalSeparator: ".",
        decimalPlaces: 2,
        currencySymbol: "",
        currencySymbolAlign: "left",
        nullValue: "",
        textAlign: "right"
      }
    ]
  }
});

function customizeCellFunction(cell, data) {
  if (
    data &&
    data.hierarchy &&
    data.hierarchy.uniqueName == "Price" &&
    data.type == "value"
  ) {
    cell.text = `<div class="tooltip" title="Value: ${
      data.value ? data.label : "empty"
    }"><div class="w3-container">
        <div class="w3-light-grey">
            <div class="w3-container w3-light-green w3-center" style="width:${
            data.value && data.value > 100 ? "100%" : cell.text
          }">${data.label}</div>
        </div>
      </div></div>`;
  }
}
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div id="wdr-component"></div>