Lumen Stat Chart

import type { CSSProperties } from "react";

const css = ".dp-lumen-stat-chart-asset{position:relative;display:grid;place-items:center;padding:0px;opacity:1.00;transform:translate(0px,0px) perspective(900px) rotateX(0deg) rotateZ(0deg);transform-style:preserve-3d;filter:contrast(1.00) saturate(1.00) hue-rotate(0deg) blur(0.00px) drop-shadow(0 14px 48px rgba(0,0,0,.42));transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease,opacity .35s ease;will-change:transform,filter,opacity;}\n.dp-lumen-stat-chart-asset::before{content:\"\";position:absolute;inset:0px;border-radius:25px;background:radial-gradient(circle at 35% 25%,#22d3ee52,transparent 42%),radial-gradient(circle at 66% 72%,#34d3994d,transparent 50%);filter:blur(53px);opacity:0.26;z-index:-1;pointer-events:none;}\n.dp-lumen-stat-chart-asset::after{content:\"\";position:absolute;inset:0px;border-radius:25px;border:0px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);opacity:0;pointer-events:none;}\n.dp-lumen-stat-chart-stage{--a:#67e8f9;--b:#818cf8;--deep:#082f49;--ink:#eef2ff;--muted:#8f9aad;position:relative;display:grid;place-items:center;width:296px;min-height:214px;color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif;}.dp-lumen-stat-chart-surface{position:relative;width:100%;min-height:100%;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(17,19,25,.9);box-shadow:0 9px 40px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden;}.dp-lumen-stat-chart-eyebrow{font:600 9px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}.dp-lumen-stat-chart-title{margin:0;font-size:18px;line-height:1.1;letter-spacing:-.04em;}.dp-lumen-stat-chart-copy{margin:0;color:var(--muted);font-size:11px;line-height:1.55;}.dp-lumen-stat-chart-button{border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.08);color:var(--ink);font:600 10px ui-monospace,SFMono-Regular,monospace;padding:9px 11px;}.dp-lumen-stat-chart-button:hover{background:rgba(255,255,255,.14);}.dp-lumen-stat-chart-still *{animation-play-state:paused!important;}.dp-lumen-stat-chart-stat{--mx:50%;position:relative;min-height:177px;padding:18px 18px 14px;box-sizing:border-box;background:radial-gradient(520px 220px at 12% 0%,#67e8f914,transparent 62%),linear-gradient(180deg,rgba(22,22,26,.96), #0f0f12);overflow:hidden;isolation:isolate;border-radius:18px;}.dp-lumen-stat-chart-stat-glow{position:absolute;inset:-40% -20% auto -20%;height:56%;background:radial-gradient(560px circle at var(--mx) 0%,#67e8f918,transparent 68%);pointer-events:none;opacity:.9;}.dp-lumen-stat-chart-stat-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(255,255,255,.02) 28px 29px);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 88%,transparent);pointer-events:none;opacity:.45;}.dp-lumen-stat-chart-stat-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;z-index:1;}.dp-lumen-stat-chart-stat-head{min-width:0;}.dp-lumen-stat-chart-stat-top .dp-lumen-stat-chart-eyebrow{color:var(--muted);letter-spacing:.14em;}.dp-lumen-stat-chart-price-row{display:flex;align-items:center;gap:8px;margin-top:8px;}.dp-lumen-stat-chart-price{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;}.dp-lumen-stat-chart-price.bump{transform:scale(1.04);}.dp-lumen-stat-chart-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14),0 0 10px rgba(34,197,94,.55);flex:none;}.dp-lumen-stat-chart-change{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,#67e8f918,#67e8f90f);border:1px solid #67e8f920;color:var(--ink);font:600 11px ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;box-shadow:0 4px 14px #67e8f914,inset 0 1px 0 rgba(255,255,255,.06);}.dp-lumen-stat-chart-trend{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#67e8f9;color:#fff;font-size:9px;line-height:1;}.dp-lumen-stat-chart-change b{color:#67e8f9;font-variant-numeric:tabular-nums;}.dp-lumen-stat-chart-change span:last-child{color:var(--muted);font-weight:500;margin-left:0;}.dp-lumen-stat-chart-ranges{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);flex:none;}.dp-lumen-stat-chart-ranges button{min-width:36px;height:26px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 10px ui-monospace,monospace;cursor:pointer;transition:background .22s cubic-bezier(.16,1,.3,1),color .18s,transform .18s,box-shadow .22s;}.dp-lumen-stat-chart-ranges button:hover{color:var(--ink);background:rgba(255,255,255,.08);}.dp-lumen-stat-chart-ranges button:active{transform:scale(.96);}.dp-lumen-stat-chart-ranges .dp-lumen-stat-chart-active{background:#fff!important;color:#0a0a0c!important;box-shadow:0 4px 14px rgba(0,0,0,.14);}.dp-lumen-stat-chart-chart-wrap{position:relative;margin-top:14px;z-index:1;cursor:crosshair;--tx:50%;}.dp-lumen-stat-chart-chart{display:block;width:100%;height:105px;overflow:visible;}.dp-lumen-stat-chart-gridlines line{stroke:rgba(255,255,255,.06);stroke-width:.7;stroke-dasharray:3 5;}.dp-lumen-stat-chart-area{opacity:.95;}.dp-lumen-stat-chart-line{transition:stroke-dashoffset 1.05s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 6px 14px #67e8f92a);}.dp-lumen-stat-chart-line.drawn{stroke-dashoffset:0!important;}.dp-lumen-stat-chart-dot{opacity:0;transform-origin:center;transition:opacity .28s,transform .28s cubic-bezier(.34,1.56,.64,1);}.dp-lumen-stat-chart-dot.in{opacity:1;}.dp-lumen-stat-chart-dot.hl{transform:scale(1.32);opacity:1!important;}.dp-lumen-stat-chart-halo{transition:opacity .2s,transform .2s;}.dp-lumen-stat-chart-dot.hl .dp-lumen-stat-chart-halo{opacity:.28;transform:scale(1.2);}.dp-lumen-stat-chart-tooltip{position:absolute;left:var(--tx);bottom:calc(100% - var(--ty, 50%));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 10px;border-radius:10px;background:rgba(20,20,24,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;z-index:2;white-space:nowrap;will-change:left,opacity;}.dp-lumen-stat-chart-tooltip.show{opacity:1;visibility:visible;}.dp-lumen-stat-chart-tooltip:after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(20,20,24,.96);}.dp-lumen-stat-chart-tip-date{font:600 9px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);}.dp-lumen-stat-chart-tip-val{font:700 13px ui-sans-serif,system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;}.dp-lumen-stat-chart-crosshair{position:absolute;top:0;bottom:18px;left:var(--tx);width:1px;background:linear-gradient(180deg,transparent,#67e8f955,transparent);opacity:0;pointer-events:none;transition:opacity .18s;will-change:left,opacity;}.dp-lumen-stat-chart-crosshair.show{opacity:1;}.dp-lumen-stat-chart-axis{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);color:var(--muted);font:600 8px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;z-index:1;}.dp-lumen-stat-chart-axis-live{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;color:var(--muted);font:600 8px ui-monospace,monospace;}.dp-lumen-stat-chart-line{stroke-dashoffset:0!important;}.dp-lumen-stat-chart-dot{opacity:1!important;}@media (prefers-reduced-motion:reduce){.dp-lumen-stat-chart-line,.dp-lumen-stat-chart-dot,.dp-lumen-stat-chart-price{transition:none!important;animation:none!important;}}";
const markup = "<div class=\"dp-lumen-stat-chart-asset\"><article class=\"dp-lumen-stat-chart-stage dp-lumen-stat-chart-still\"><div class=\"dp-lumen-stat-chart-surface dp-lumen-stat-chart-stat\" tabindex=\"0\" role=\"group\" aria-label=\"Revenue chart\"><div class=\"dp-lumen-stat-chart-stat-glow\"></div><div class=\"dp-lumen-stat-chart-stat-grid\"></div><div class=\"dp-lumen-stat-chart-stat-top\"><div class=\"dp-lumen-stat-chart-stat-head\"><span class=\"dp-lumen-stat-chart-eyebrow\">Revenue · USD</span><div class=\"dp-lumen-stat-chart-price-row\"><b class=\"dp-lumen-stat-chart-price\" data-price>$48,290</b><span class=\"dp-lumen-stat-chart-live-dot\" aria-hidden></span></div><div class=\"dp-lumen-stat-chart-change\"><span class=\"dp-lumen-stat-chart-trend\">↗</span><b data-delta>+12.4%</b><span>vs last period</span></div></div><div class=\"dp-lumen-stat-chart-ranges\" role=\"tablist\" aria-label=\"Range\"><button type=\"button\" data-range=\"7\" role=\"tab\" aria-selected=\"false\" class=\"\">7d</button><button type=\"button\" data-range=\"30\" role=\"tab\" aria-selected=\"true\" class=\"dp-lumen-stat-chart-active\">30d</button><button type=\"button\" data-range=\"90\" role=\"tab\" aria-selected=\"false\" class=\"\">90d</button></div></div><div class=\"dp-lumen-stat-chart-chart-wrap\"><svg viewBox=\"0 0 200 110\" class=\"dp-lumen-stat-chart-chart\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><defs><linearGradient id=\"dp-lumen-stat-chart-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0%\" stop-color=\"#67e8f9\" stop-opacity=\".28\"/><stop offset=\"100%\" stop-color=\"#67e8f9\" stop-opacity=\"0\"/></linearGradient><filter id=\"dp-lumen-stat-chart-shadow\"><feDropShadow dx=\"0\" dy=\"6\" stdDeviation=\"8\" flood-color=\"#67e8f9\" flood-opacity=\".18\"/></filter></defs><g class=\"dp-lumen-stat-chart-gridlines\"><line x1=\"10\" y1=\"8.0\" x2=\"190\" y2=\"8.0\"/><line x1=\"10\" y1=\"29.5\" x2=\"190\" y2=\"29.5\"/><line x1=\"10\" y1=\"51.0\" x2=\"190\" y2=\"51.0\"/><line x1=\"10\" y1=\"72.5\" x2=\"190\" y2=\"72.5\"/></g><polygon class=\"dp-lumen-stat-chart-area\" points=\"10,94 10.00,71.59 30.00,60.42 50.00,64.48 70.00,47.23 90.00,52.30 110.00,33.02 130.00,38.10 150.00,20.85 170.00,24.90 190.00,8.67 190,94\" fill=\"url(#dp-lumen-stat-chart-grad)\"></polygon><polyline class=\"dp-lumen-stat-chart-line\" points=\"10.00,71.59 30.00,60.42 50.00,64.48 70.00,47.23 90.00,52.30 110.00,33.02 130.00,38.10 150.00,20.85 170.00,24.90 190.00,8.67\" fill=\"none\" stroke=\"#67e8f9\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" filter=\"url(#dp-lumen-stat-chart-shadow)\" style=\"stroke-dasharray:520;stroke-dashoffset:520\"></polyline><g class=\"dp-lumen-stat-chart-dot\" data-i=\"0\" transform=\"translate(10.00,71.59)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"1\" transform=\"translate(30.00,60.42)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"2\" transform=\"translate(50.00,64.48)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"3\" transform=\"translate(70.00,47.23)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"4\" transform=\"translate(90.00,52.30)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"5\" transform=\"translate(110.00,33.02)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"6\" transform=\"translate(130.00,38.10)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"7\" transform=\"translate(150.00,20.85)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"8\" transform=\"translate(170.00,24.90)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g><g class=\"dp-lumen-stat-chart-dot\" data-i=\"9\" transform=\"translate(190.00,8.67)\"><circle class=\"dp-lumen-stat-chart-halo\" r=\"9\" fill=\"#67e8f9\" opacity=\".14\"/><circle r=\"4.2\" fill=\"#fff\" stroke=\"#67e8f9\" stroke-width=\"1.8\"/><circle r=\"1.2\" fill=\"#67e8f9\"/></g></svg><div class=\"dp-lumen-stat-chart-tooltip\" aria-hidden=\"true\"><span class=\"dp-lumen-stat-chart-tip-date\"></span><b class=\"dp-lumen-stat-chart-tip-val\"></b></div><div class=\"dp-lumen-stat-chart-crosshair\" aria-hidden=\"true\"></div></div><div class=\"dp-lumen-stat-chart-axis\"><span data-left>Oct 01</span><span class=\"dp-lumen-stat-chart-axis-live\">● live</span><span data-right>Oct 30</span></div></div></article></div>";

const stage: CSSProperties = {
  boxSizing: "border-box",
  width: "100%",
  minHeight: "360px",
  display: "grid",
  alignItems: "center",
  justifyContent: "center",
  padding: "48px 24px",
  overflow: "hidden",
  borderRadius: 28,
  background: "#0b0c10",
};

export function LumenStatChart() {
  return (
    <div
      style={stage}
      dangerouslySetInnerHTML={{ __html: "<style>" + css + "</style>" + markup }}
    />
  );
}