JSFiddle - React, Tailwind, and code Playground

by avolovyc

HTML

<script src="http://localhost:8080/jrio-docs/viewer/optimized-scripts/client/jrio.js"></script>

<label>Column ID: </label>
<button id="formatId">Apply conditions</button>
<button id="resetId">Apply Filter</button>
<br>
<label>Column Move-In Date</label>
<button id="formatDate">Apply conditions</button>
<button id="resetDate">Reset conditions</button>
<div id="reportContainer"></div>

CSS

body {
  background-color: lightgray;
}

JavaScript

jrio.config({
  server: "http://localhost:8080/jrio-docs/viewer",
  scripts: "optimized-scripts",
  theme: {
    href: "http://localhost:8080/jrio-docs/viewer/themes/default"
  },
  userLocale: "en_US",
  runtimeContextPath: "http://localhost:8080/jrio"
});

jrio(function(jrioClient) {
  var report = jrioClient.report({
    server: "http://localhost:8080/jrio",
    resource: "/samples/reports/charts/MultipleAxisChartReport",
    container: "#reportContainer",
    error: errHandler,
    events: {
      reportCompleted: function(status, error) {
        if (status === "ready") {
          console.log(report.data());
        }
      }
    }

  });

// Conditions
  addClickHandler("formatId", function() {
    console.log("Components: "+report.data().components);
    console.log("Links: "+report.data().links);
    console.log("Bookmarks: "+report.data().bookmarks);
    console.log("Report Parts: "+report.data().reportParts);
    report.updateComponent("date_closed", {
      conditions:[ {
        operator: "between",
        value: ["2001-01-05T10:10:53", "2005-10-02T10:10:53"],
        backgroundColor:"00FF00",
          font: {
            color: "0000FF"
          }
      }
      ]
    }).fail(errHandler);
  });
  
  // Filtering
    addClickHandler("resetId", function() {
    console.log(report.data().components);
    report.updateComponent("date_entered", {
      filter: {
        operator: "between",
        value: ["2001-01-05T10:10:53", "2002-11-11T10:10:53"],
      }
    }).fail(errHandler);
  });

/*
addClickHandler("resetId", function() {
  report.updateComponent("id", {
    conditions: []
  }).fail(errHandler);
});
*/
addClickHandler("formatDate", function() {
  report.updateComponent("date", {
    conditions: [{
      operator: "between",
      value: ["1996-06-01T00:00:00", "1996-07-23T00:00:00"],
      backgroundColor: "00FF00",
      font: {
        color: "0000FF"
      }
    }]
  }).fail(errHandler);
});

addClickHandler("resetDate", function() {
 ...