JSFiddle - React, Tailwind, and code Playground

by adilrabbani

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Float32Arrys with NaNs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/uPlot.min.css"
    />
  </head>

  <body>
    <div id="chart"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/uPlot.iife.min.js"></script>
    <script>
      const opts2 = {
        title: "Nearest Non-Null (by 30px proximity)",
        width: 800,
        height: 600,
        cursor: {
          hover: {
            prox: 30,
            bias: 0,
            skip: [null],
          },
        },
        hooks: {
        },
        scales: {
          x: {
            time: false,
          },
        },
        series: [
          {},
          {
            stroke: "red",
            spanGaps: true,
          },
          {
            stroke: "blue",
            spanGaps: false,
          },
          {
            stroke: "green",
            spanGaps: true,
          },
          {
            stroke: "orange",
            spanGaps: true,
          },
        ],
      }

      const tables = [
        [
          null,
          new Float32Array([
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
            5,
          ]),
        ],
      ]

      let xRange = 100

      tables.forEach((t) => {
        t[0] = t[1].map((v, i) => (i / t[1].length) * xRange)
      })

      const data2 = uPlot.join(tables)

      let u2 = new uPlot(opts2, data2,...

CSS

#floating-tooltip {
  position: absolute;
  z-index: 2;
  color: black;
  background-color: white;
  font-size: 0.75rem;
  pointer-events: none;
  font-weight: bold;
  border-radius: 5px;
  border: 1px solid grey;
  font-family: Consolas,monaco,monospace;
}