JSFiddle - React, Tailwind, and code Playground

by Dat

HTML

<script src="https://unpkg.com/[email protected]/dist/yagr.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/index.css" />

<style>
  .container {
                margin-bottom: 26px;
                height: 400px;
            }
            #root {
                display: grid;
                grid-gap: 12px;
                grid-template-columns: 1fr 1fr;
            }
</style>

 <div class="grid">
      <div id="chart1" class="container"></div>
  </div>
  <div>
      <button id="play">Play</button>
      <span>15ms</span><input id="timex" type="range" min="15" max="200" value="50"><span>200ms</span> (now: <span id="timex-value">50</span>ms)
  </div>
  <div>
      <br>
      <button id="magic">Magic!</button>
  </div>

CSS

.container {
                margin-bottom: 26px;
                height: 400px;
            }
            #root {
                display: grid;
                grid-gap: 12px;
                grid-template-columns: 1fr 1fr;
            }

JavaScript

const id1 = (x) => Math.sin(x) * 2;
const id2 = (x) => (Math.cos(x) / 2) * (x / 10000) % 3;

const id3 = (x) => Math.random();
const id4 = (x) => -Math.random();

const timeline = new Array(40).fill('').map((x, i) => i * 10000);
const yagr = new Yagr(chart1, {
    timeline: timeline,
    axes: {
        y: {
            splitsCount: 5
        },
        r: {
            splitsCount: 5,
            side: 'right',
        },
        t: {
            splitsCount: 5,
            side: 'right',
            show: false,
        }
    },
    series: [
        {data: timeline.map(id1), color: 'red', id: '1', interpolation: 'smooth'},
        {data: timeline.map(id2), color: 'green', id: '2', interpolation: 'left'},

        {data: timeline.map(id3), color: 'orange', id: '3', interpolation: 'linear', scale: 'r', type: 'area', show: true},
        {data: timeline.map(id3), color: 'yellow', id: '4', interpolation: 'linear', scale: 'r', type: 'area', show: true},

        {data: timeline.map(id4), color: 'lime', id: '5', interpolation: 'linear', scale: 't', type: 'area', show: true},
        {data: timeline.map(id4), color: 'yellow', id: '6', interpolation: 'linear', scale: 't', type: 'area', show: true},
    ],
    scales: {
        y: {
            min: -4,
            max: 4
        },
        r: {
            stacking: true,
            min: 0,
            max: 8,
        },
        t: {
            stacking: true,
            min: -8,
            max: 0,
        }
    }
});

let timer;
let timex = 50;

const play = () => {
    clearInterval(timer);
    timer = setInterval(() => {
        const newTimelinePt = yagr.config.timeline[yagr.config.timeline.length - 1] + 10000;
        yagr.setSeries([newTimelinePt], [
            {data: [id1(newTimelinePt)], id: '1'},
            {data: [id2(newTimelinePt)], id: '2'},

            {data: [id3(newTimelinePt)], id: '3'},
            {data: [id3(newTimelinePt)], id: '4'},

            {data: [id4(newTimelinePt)], id: '5'},
     ...