JSFiddle - React, Tailwind, and code Playground

Slice configuration

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        date: {
          type: "year/month/day",
        },
        dayOfYear: {
          type: "number",
        },
      },
    },
    slice: {
      reportFilters: [
        {
          uniqueName: "dayOfYear",
          filter: {
            query: {
              less: getDayNumber(new Date()),
            },
          },
        },
      ],
      rows: [
        {
          uniqueName: "date",
          filter: {
            members: ["date.[2023]", "date.[2024]", "date.[2025]"],
          },
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "revenue",
        },
      ],
    },
  },
});

function getDayNumber(date) {
  const start = new Date(date.getFullYear(), 0, 0);
  const diff = date - start;
  const oneDay = 1000 * 60 * 60 * 24;
  const dayOfYear = Math.floor(diff / oneDay);
  return dayOfYear;
}

function addDayOfYear(records) {
  return records.map((r) => {
    const d = new Date(r.date);
    const dayOfYear = getDayNumber(d);
    return {
      ...r,
      dayOfYear,
    };
  });
}

function getData() {
  let data = [
    { date: "2022-01-18", revenue: 1600 },
    { date: "2022-05-09", revenue: 2100 },
    { date: "2022-09-27", revenue: 2900 },
    { date: "2022-11-29", revenue: 3400 },

    { date: "2023-01-15", revenue: 1200 },
    { date: "2023-03-10", revenue: 900 },
    { date: "2023-11-05", revenue: 3000 },
    { date: "2023-12-20", revenue: 5000 },

    { date: "2024-02-01", revenue: 1500 },
    { date: "2024-04-17", revenue: 1100 },
    { date: "2024-10-30", revenue: 2700 },
    { date: "2024-12-11", revenue: 4200 },

    { date: "2025-01-12", revenue: 1800...