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

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

#wdr-pivot-view #wdr-grid-view div.alter1 {
  background-color: #4f983c;
  color: #fff;
}

#wdr-pivot-view #wdr-grid-view div.alter2 {
  background-color: #7e42d6;
  color: #fff;
}

var pivot = new WebDataRocks({
  container: "#wdr-container",
  beforetoolbarcreated: customizeToolbar,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/movie_profit.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "movie",
          sort: "unsorted"
        }
      ],
      columns: [
        {
          uniqueName: "genre",
          filter: {
            type: "top",
            quantity: 10,
            measure: "worldwide_gross",
            members: ["genre.Horror"]
          },
          sort: "unsorted"
        },
        {
          uniqueName: "Measures"
        }
      ],
      measures: [
        {
          uniqueName: "worldwide_gross",
          aggregation: "sum"
        },
        {
          uniqueName: "production_budget",
          aggregation: "sum"
        },
        {
          uniqueName: "net_profit",
          formula: 'sum("worldwide_gross") - sum("production_budget") ',
          caption: "Sum of net_profit"
        }
      ],
      sorting: {
        row: {
          type: "desc",
          tuple: [],
          measure: "worldwide_gross"
        },
        column: {
          type: "desc",
          tuple: [],
          measure: "worldwide_gross"
        }
      }
    },
    options: {
      grid: {
        showTotals: "off",
        showGrandTotals: "columns"
      }
    },
    formats: [
      {
        name: "",
        thousandsSeparator: " ",
        decimalSeparator: ".",
        currencySymbol: "$",
        currencySymbolAlign: "left",
        nullValue: "",
        textAlign: "right",
        isPercent: false
      }
    ]
  },
  width: "100%",
  height: 430,
  toolbar: true
});

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData.type == "value") {
    if (cellData.rowIndex % 2 == 0) {
      cellBuilder.addClass("alter1");
    } else {
      cellBuilder.addClass("alter2");
    }
  }
}

function customizeToolbar(toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    for (let i = 0; i < tabs.length; i++) {
      switch (i % 4) {
        case 0:
          tabs[
            i
          ].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/6433/6433146.png"/>`;
          break;
        case 1:
          tabs[
            i
          ].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/3330/3330533.png "/>`;
          break;
        case 2:
          tabs[
            i
          ].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/8490/8490308.png "/>`;
          break;
        case 3:
          tabs[
            i
          ].icon = `<img width=30 height=30 src="https://cdn-icons-png.flaticon.com/512/3277/3277415.png"/>`;
          break;
      }
    }

    return tabs;
  };
}