JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    options:{
    viewType:"charts",
    chart:{
    type:"line"
    }
    },
    slice: {
      rows: [{
        uniqueName: "Date.Month"
      }],
      columns: [{
        uniqueName: "Product"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Formula #1",
        caption: "Formula #1",
        formula: "if(!isNaN(sum('Price')), (-1)*sum('Price'), 0)"
      }]
    }
  }
});

function getData() {
  return [{
      Product: "Product 1",
      Date: "2024-03-10",
      Price: 15
    },{
      Product: "Product 1",
      Date: "2024-04-10",
      Price: 35
    },{
      Product: "Product 1",
      Date: "2024-05-10",
      Price: 25
    },{
      Product: "Product 1",
      Date: "2024-06-10",
      Price: 17
    },{
      Product: "Product 1",
      Date: "2024-07-10",
      Price: 14
    },{
      Product: "Product 1",
      Date: "2024-08-10",
      Price: 3
    },{
      Product: "Product 2",
      Date: "2024-01-10",
      Price: 5
    },
    {
      Product: "Product 2",
      Date: "2024-02-10",
      Price: 4
    }, {
      Product: "Product 2",
      Date: "2024-03-10",
      Price: 7
    }, {
      Product: "Product 2",
      Date: "2024-04-10",
      Price: 4
    }, {
      Product: "Product 2",
      Date: "2024-05-10",
      Price: 32
    }, {
      Product: "Product 2",
      Date: "2024-06-10",
      Price: 8
    }, {
      Product: "Product 2",
      Date: "2024-07-10",
      Price: 9
    }, 
/*     {
      Product: "Product 2",
      Date: "2024-08-10",
      Price: 0
    } */
  
  {
      Product: "Product 3",
      Date: "2024-01-10",
      Price: 15
    },{
      Product: "Product 3",
      Date: "2024-02-10",
      Price: 22
    },{
      Product: "Product 3",
      Date: "2024-03-10",
      Price: 19
    },{
     ...