GridTestDataCharts

import React from "react";
import ReactDOM from "react-dom";

import "@progress/kendo-react-charts";
import "@progress/kendo-react-popup";
import { ComboBox, DropDownList } from "@progress/kendo-react-dropdowns";
import "@progress/kendo-react-inputs";
import "@progress/kendo-react-intl";
import "@progress/kendo-data-query";
import "@progress/kendo-drawing";
import "@progress/kendo-file-saver";

import {
  Chart,
  ChartSeries,
  ChartSeriesItem,
  ChartTooltip
} from "@progress/kendo-react-charts";

const framePerformanceData = [
  {
    product: "kendoreact",
    records: 100,
    fps: 45,
    scriptingNLoad: 14.2,
    renderNPainting: 6.03,
    total: 20.23
  },
  {
    product: "kendoreact",
    records: 100,
    fps: 47,
    scriptingNLoad: 13.58,
    renderNPainting: 6.64,
    total: 20.22
  },
  {
    product: "kendoreact",
    records: 100,
    fps: 50,
    scriptingNLoad: 12.7,
    renderNPainting: 6.01,
    total: 18.71
  },
  {
    product: "kendoreact",
    records: 100,
    fps: 48,
    scriptingNLoad: 13.25,
    renderNPainting: 6.29,
    total: 19.54
  },
  {
    product: "kendoreact",
    records: 100,
    fps: 51,
    scriptingNLoad: 12.95,
    renderNPainting: 5.91,
    total: 18.86
  },
  {
    product: "kendoreact",
    records: 10000,
    fps: 44,
    scriptingNLoad: 14.66,
    renderNPainting: 6.53,
    total: 21.19
  },
  {
    product: "kendoreact",
    records: 10000,
    fps: 47,
    scriptingNLoad: 14.7,
    renderNPainting: 5.7,
    total: 20.4
  },
  {
    product: "kendoreact",
    records: 10000,
    fps: 42,
    scriptingNLoad: 16.11,
    renderNPainting: 6.6,
    total: 22.71
  },
  {
    product: "kendoreact",
    records: 10000,
    fps: 44,
    scriptingNLoad: 16.28,
    renderNPainting: 5.52,
    total: 21.8
  },
  {
    product: "kendoreact",
    records: 10000,
    fps: 44,
    scriptingNLoad: 15.45,
    renderNPainting: 6.03,
    total: 21.48
  },
  {
    product: "kendoangular",
    records: 100,
    fps: 35,
    scriptingNLoad: 20.19,
    renderNPainting: 7.21,
    total: 27.4
  },
  {
    product: "kendoangular",
    records: 100,
    fps: 38,
    scriptingNLoad: 18.27,
    renderNPainting: 6.41,
    total: 24.68
  },
  {
    product: "kendoangular",
    records: 100,
    fps: 32,
    scriptingNLoad: 18.01,
    renderNPainting: 8.34,
    total: 26.35
  },
  {
    product: "kendoangular",
    records: 100,
    fps: 31,
    scriptingNLoad: 20.8,
    renderNPainting: 8.39,
    total: 29.19
  },
  {
    product: "kendoangular",
    records: 100,
    fps: 36,
    scriptingNLoad: 18.01,
    renderNPainting: 8.03,
    total: 26.04
  },
  {
    product: "kendoangular",
    records: 10000,
    fps: 26,
    scriptingNLoad: 25.79,
    renderNPainting: 8.5,
    total: 34.29
  },
  {
    product: "kendoangular",
    records: 10000,
    fps: 25,
    scriptingNLoad: 29.19,
    renderNPainting: 8.56,
    total: 37.75
  },
  {
    product: "kendoangular",
    records: 10000,
    fps: 27,
    scriptingNLoad: 28.43,
    renderNPainting: 7.32,
    total: 35.75
  },
  {
    product: "kendoangular",
    records: 10000,
    fps: 28,
    scriptingNLoad: 25.64,
    renderNPainting: 8.65,
    total: 34.29
  },
  {
    product: "kendoangular",
    records: 10000,
    fps: 31,
    scriptingNLoad: 23.25,
    renderNPainting: 7.27,
    total: 30.52
  },
  {
    product: "ignite",
    records: 100,
    fps: 23,
    scriptingNLoad: 38.5,
    renderNPainting: 4.27,
    total: 42.77
  },
  {
    product: "ignite",
    records: 100,
    fps: 23,
    scriptingNLoad: 36.4,
    renderNPainting: 5.78,
    total: 42.18
  },
  {
    product: "ignite",
    records: 100,
    fps: 23,
    scriptingNLoad: 37.39,
    renderNPainting: 4.45,
    total: 41.84
  },
  {
    product: "ignite",
    records: 100,
    fps: 25,
    scriptingNLoad: 35.89,
    renderNPainting: 4.21,
    total: 40.1
  },
  {
    product: "ignite",
    records: 100,
    fps: 26,
    scriptingNLoad: 34,
    renderNPainting: 3.2,
    total: 37.2
  },
  {
    product: "ignite",
    records: 10000,
    fps: 20,
    scriptingNLoad: 43,
    renderNPainting: 5.56,
    total: 48.56
  },
  {
    product: "ignite",
    records: 10000,
    fps: 19,
    scriptingNLoad: 47,
    renderNPainting: 5.74,
    total: 52.74
  },
  {
    product: "ignite",
    records: 10000,
    fps: 19,
    scriptingNLoad: 45.29,
    renderNPainting: 7.1,
    total: 52.39
  },
  {
    product: "ignite",
    records: 10000,
    fps: 19,
    scriptingNLoad: 49,
    renderNPainting: 5.79,
    total: 54.79
  },
  {
    product: "ignite",
    records: 10000,
    fps: 19,
    scriptingNLoad: 45.95,
    renderNPainting: 5.73,
    total: 51.68
  },
  {
    product: "aggrid",
    records: 100,
    fps: 12.1,
    scriptingNLoad: 42.9,
    renderNPainting: 37.11,
    total: 80.01
  },
  {
    product: "aggrid",
    records: 100,
    fps: 12,
    scriptingNLoad: 43.23,
    renderNPainting: 37.29,
    total: 80.52
  },
  {
    product: "aggrid",
    records: 100,
    fps: 11,
    scriptingNLoad: 35.87,
    renderNPainting: 37.31,
    total: 73.18
  },
  {
    product: "aggrid",
    records: 100,
    fps: 13,
    scriptingNLoad: 38.73,
    renderNPainting: 38.23,
    total: 76.96
  },
  {
    product: "aggrid",
    records: 100,
    fps: 10,
    scriptingNLoad: 38.38,
    renderNPainting: 37.39,
    total: 75.77
  },
  {
    product: "aggrid",
    records: 10000,
    fps: 2,
    scriptingNLoad: 504,
    renderNPainting: 38.55,
    total: 542.55
  },
  {
    product: "aggrid",
    records: 10000,
    fps: 2,
    scriptingNLoad: 548,
    renderNPainting: 42.66,
    total: 590.66
  },
  {
    product: "aggrid",
    records: 10000,
    fps: 2,
    scriptingNLoad: 488,
    renderNPainting: 39.05,
    total: 527.05
  },
  {
    product: "aggrid",
    records: 10000,
    fps: 2,
    scriptingNLoad: 496,
    renderNPainting: 38.74,
    total: 534.74
  },
  {
    product: "aggrid",
    records: 10000,
    fps: 2,
    scriptingNLoad: 513,
    renderNPainting: 38.2,
    total: 551.2
  }
];

const otherPerformanceData = [
  {
    maxCpuPercent: 55,
    minCpuPercent: 35,
    heapMin: 9.1,
    heapMax: 24,
    nodesMin: 2130,
    nodesMax: 2766,
    listenersMin: 357,
    listenersMax: 357,
    bootTime: 645,
    horizontalScrollFps: 16,
    verticalScrollFps: 21,
    vmachineSize: 7.8,
    downloadSize: 1.7,
    product: "kendoreact"
  },
  {
    maxCpuPercent: 90,
    minCpuPercent: 50,
    heapMin: 41,
    heapMax: 60,
    nodesMin: 2136,
    nodesMax: 2387,
    listenersMin: 357,
    listenersMax: 357,
    bootTime: 645,
    horizontalScrollFps: 16,
    verticalScrollFps: 21,
    vmachineSize: 7.8,
    downloadSize: 1.7,
    product: "kendoreact"
  },
  {
    maxCpuPercent: 80,
    minCpuPercent: 40,
    heapMin: 17,
    heapMax: 24,
    nodesMin: 7000,
    nodesMax: 7400,
    listenersMin: 585,
    listenersMax: 585,
    bootTime: 1450,
    horizontalScrollFps: 22,
    verticalScrollFps: 18,
    vmachineSize: 21,
    downloadSize: 2,
    product: "kendoangular"
  },
  {
    maxCpuPercent: 95,
    minCpuPercent: 45,
    heapMin: 49,
    heapMax: 63,
    nodesMin: 7000,
    nodesMax: 7340,
    listenersMin: 585,
    listenersMax: 585,
    bootTime: 1450,
    horizontalScrollFps: 22,
    verticalScrollFps: 18,
    vmachineSize: 21,
    downloadSize: 2,
    product: "kendoangular"
  },
  {
    maxCpuPercent: 95,
    minCpuPercent: 60,
    heapMin: 22.2,
    heapMax: 34.4,
    nodesMin: 6270,
    nodesMax: 10000,
    listenersMin: 5301,
    listenersMax: 5301,
    bootTime: 2000,
    horizontalScrollFps: 14,
    verticalScrollFps: 13,
    vmachineSize: 31,
    downloadSize: 2.4,
    product: "ignite"
  },
  {
    maxCpuPercent: 95,
    minCpuPercent: 60,
    heapMin: 24,
    heapMax: 40,
    nodesMin: 8022,
    nodesMax: 8344,
    listenersMin: 5309,
    listenersMax: 5309,
    bootTime: 2000,
    horizontalScrollFps: 14,
    verticalScrollFps: 13,
    vmachineSize: 31,
    downloadSize: 2.4,
    product: "ignite"
  },
  {
    maxCpuPercent: 100,
    minCpuPercent: 100,
    heapMin: 11,
    heapMax: 36,
    nodesMin: 3100,
    nodesMax: 20233,
    listenersMin: 888,
    listenersMax: 7970,
    bootTime: 715,
    horizontalScrollFps: 12,
    verticalScrollFps: 10,
    vmachineSize: 9.78,
    downloadSize: 1.5,
    product: "aggrid"
  },
  {
    maxCpuPercent: 100,
    minCpuPercent: 100,
    heapMin: 108,
    heapMax: 580,
    nodesMin: 3912,
    nodesMax: 8373,
    listenersMin: 1194,
    listenersMax: 3042,
    bootTime: 715,
    horizontalScrollFps: 12,
    verticalScrollFps: 10,
    vmachineSize: 9.78,
    downloadSize: 1.5,
    product: "aggrid"
  }
];

const info = {
  high: "Higher is better",
  low: "Lower is better"
};

const otherPerformanceFields = [
  {
    fields: ["minCpuPercent", "maxCpuPercent"],
    title: "Min/Max CPU usage",
    info: info.low
  },
  {
    fields: ["heapMin", "heapMax"],
    title: "Min/Max Heap Size",
    info: info.low
  },
  {
    fields: ["nodesMin", "nodesMax"],
    title: "Min/Max node count",
    info: info.low
  },
  {
    fields: ["listenersMin", "listenersMax"],
    title: "Min/Max Listeners count",
    info: info.low
  },
  {
    fields: ["horizontalScrollFps", "verticalScrollFps"],
    title: "Horizontal/Vertical Scroll FPS",
    info: info.high
  },
  {
    fields: ["bootTime"],
    title: "Boot time",
    info: info.low
  },
  ,
  {
    fields: ["vmachineSize"],
    title: "JavaScript VM size",
    info: info.low
  },
  ,
  {
    fields: ["downloadSize"],
    title: "Bundle Size",
    info: info.low
  }
];

const framePerformanceFields = [
  {
    field: "fps",
    title: "FPS",
    info: info.high
  },
  {
    field: "total",
    title: "Total Render Time",
    info: info.low
  },
  {
    field: "scriptingNLoad",
    title: "Scripting/Loading",
    info: info.low
  },
  {
    field: "renderNPainting",
    title: "Rendering/Painting",
    info: info.low
  }
];

const ChartContainer = () => {
  return (
    <div>
      {framePerformanceFields.map(currentItem => {
        return (
          <div>
            <h4>{currentItem.title}</h4>
            <i>*{currentItem.info}</i>
            <Chart zoomable={false}>
              <ChartTooltip />
              <ChartSeries>
                <ChartSeriesItem
                  data={framePerformanceData}
                  type="column"
                  field={currentItem.field}
                  categoryField="product"
                />
              </ChartSeries>
            </Chart>
            <hr /> <hr />
          </div>
        );
      })}
      {otherPerformanceFields.map(currentItem => {
        return (
          <div>
            <h4>{currentItem.title}</h4>
            <i>*{currentItem.info}</i>
            <Chart zoomable={false}>
              <ChartTooltip />
              <ChartSeries>
                {currentItem.fields.map(field => {
                  return (
                    <ChartSeriesItem
                      data={otherPerformanceData}
                      type="column"
                      field={field}
                      categoryField="product"
                      name={field}
                    />
                  );
                })}
              </ChartSeries>
            </Chart>
            <hr /> <hr />
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<ChartContainer />, document.querySelector("my-app"));