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,
          [
            30,
            null,
            null,
            null,
            null,
            null,
            null,
            30,
            null,
            null,
            null,
            null,
            null,
            30,
          ],
        ],
        [
          null,
          new Float32Array([
            NaN,
            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,
       ...

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;
}