npm - chartgpu - Versions diffs - 0.1.0 → 0.1.3 - Mend

chartgpu 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/LICENSE +1 -1
package/README.md +141 -9
package/dist/ChartGPU.d.ts +5 -3
package/dist/ChartGPU.d.ts.map +1 -1
package/dist/assets/ChartGPU-zgkjfPqp.js +15 -0
package/dist/assets/GPUContext-CgqhC6W6.js +1 -0
package/dist/assets/basic-line-DfRo2Pom.js +1 -0
package/dist/assets/chart-sync-Bjf8c5Oo.js +1 -0
package/dist/assets/createChartSync-BUGadH_x.js +1 -0
package/dist/assets/createDataZoomSlider-DLbAKjVh.js +162 -0
package/dist/assets/data-update-animation-BYhFrQqE.js +1 -0
package/dist/assets/grid-test-6lXNOD1c.js +1 -0
package/dist/assets/grouped-bar-pr-ZGxGI.js +1 -0
package/dist/assets/hello-world-B3dB8WNo.js +9 -0
package/dist/assets/interactive-aPGxN-b-.js +14 -0
package/dist/assets/live-streaming-N4vKWEcJ.js +1 -0
package/dist/assets/million-points-DVnJu39j.js +1 -0
package/dist/assets/pie-BR5SmRvW.js +1 -0
package/dist/assets/pie-c06rKDKR.js +321 -0
package/dist/assets/sampling-F-iafT6-.js +1 -0
package/dist/assets/scales-D-5MHN10.js +37 -0
package/dist/assets/scatter-CVFSpSfu.js +1 -0
package/dist/components/formatTooltip.d.ts +7 -0
package/dist/components/formatTooltip.d.ts.map +1 -1
package/dist/config/OptionResolver.d.ts +21 -2
package/dist/config/OptionResolver.d.ts.map +1 -1
package/dist/config/defaults.d.ts +16 -0
package/dist/config/defaults.d.ts.map +1 -1
package/dist/config/types.d.ts +49 -4
package/dist/config/types.d.ts.map +1 -1
package/dist/core/createRenderCoordinator.d.ts +2 -2
package/dist/core/createRenderCoordinator.d.ts.map +1 -1
package/dist/data/ohlcSample.d.ts +21 -0
package/dist/data/ohlcSample.d.ts.map +1 -0
package/dist/examples/basic-line/index.html +90 -0
package/dist/examples/chart-sync/index.html +102 -0
package/dist/examples/data-update-animation/index.html +193 -0
package/dist/examples/grid-test/index.html +90 -0
package/dist/examples/grouped-bar/index.html +91 -0
package/dist/examples/hello-world/index.html +32 -0
package/dist/examples/index.html +142 -0
package/dist/examples/interactive/index.html +101 -0
package/dist/examples/live-streaming/index.html +150 -0
package/dist/examples/million-points/index.html +220 -0
package/dist/examples/pie/index.html +132 -0
package/dist/examples/sampling/index.html +249 -0
package/dist/examples/scatter/index.html +91 -0
package/dist/index.d.ts +3 -3
package/dist/index.d.ts.map +1 -1
package/dist/index.js +4035 -2996
package/dist/index.js.map +1 -1
package/dist/interaction/createInsideZoom.d.ts.map +1 -1
package/dist/interaction/findCandlestick.d.ts +41 -0
package/dist/interaction/findCandlestick.d.ts.map +1 -0
package/dist/renderers/createAxisRenderer.d.ts +1 -1
package/dist/renderers/createAxisRenderer.d.ts.map +1 -1
package/dist/renderers/createCandlestickRenderer.d.ts +19 -0
package/dist/renderers/createCandlestickRenderer.d.ts.map +1 -0
package/package.json +3 -1

package/dist/examples/index.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ChartGPU Examples</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background-color: #0a0a0a;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+    .container {
+      max-width: 800px;
+      padding: 2rem;
+    }
+    h1 {
+      margin-top: 0;
+      color: #fff;
+      font-size: 2.5rem;
+    }
+    .examples-list {
+      list-style: none;
+      padding: 0;
+      margin: 2rem 0;
+    }
+    .example-item {
+      margin: 1rem 0;
+    }
+    .example-link {
+      display: inline-block;
+      padding: 1rem 1.5rem;
+      background-color: #1a1a2e;
+      color: #e0e0e0;
+      text-decoration: none;
+      border-radius: 8px;
+      border: 1px solid #333;
+      transition: all 0.2s;
+    }
+    .example-link:hover {
+      background-color: #2a2a3e;
+      border-color: #555;
+      transform: translateY(-2px);
+    }
+    .example-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+      margin-bottom: 0.25rem;
+    }
+    .example-description {
+      font-size: 0.9rem;
+      color: #aaa;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>ChartGPU Examples</h1>
+    <ul class="examples-list">
+      <li class="example-item">
+        <a href="./hello-world/index.html" class="example-link">
+          <div class="example-title">Hello World</div>
+          <div class="example-description">Animated clear color cycling through the color spectrum - demonstrates continuous rendering</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./basic-line/index.html" class="example-link">
+          <div class="example-title">Basic Line</div>
+          <div class="example-description">Sine wave line series (100 points) with grid + axes - demonstrates ChartGPU.create + setOption + resize</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./scatter/index.html" class="example-link">
+          <div class="example-title">Scatter</div>
+          <div class="example-description">Scatter plot with ~10k points - fixed symbolSize, per-point [x,y,size], and symbolSize function</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./sampling/index.html" class="example-link">
+          <div class="example-title">Zoom-aware Sampling</div>
+          <div class="example-description">Zoom in for more detail, zoom out for performance (debounced re-sampling of visible range)</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./million-points/index.html" class="example-link">
+          <div class="example-title">Million Point Benchmark</div>
+          <div class="example-description">1M points benchmark with sampling toggle and FPS comparison (raw vs sampled)</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./live-streaming/index.html" class="example-link">
+          <div class="example-title">Live Streaming</div>
+          <div class="example-description">Streaming appendData demo with autoScroll toggle + dataZoom slider</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./grouped-bar/index.html" class="example-link">
+          <div class="example-title">Grouped Bar</div>
+          <div class="example-description">Clustered + stacked bars (stack + barWidth/barGap/barCategoryGap + negative values)</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./pie/index.html" class="example-link">
+          <div class="example-title">Pie / Donut</div>
+          <div class="example-description">Two charts: a pie (inner radius 0) and a donut (inner radius &gt; 0) with per-slice colors</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./data-update-animation/index.html" class="example-link">
+          <div class="example-title">Data Update Animation</div>
+          <div class="example-description">Story 5.17 visual check: subsequent setOption() updates animate (cartesian y + scale/domain, pie slice angles)</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./grid-test/index.html" class="example-link">
+          <div class="example-title">Grid Renderer Test</div>
+          <div class="example-description">Interactive grid renderer with configurable line counts - demonstrates grid rendering and clip-space coordinates</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./chart-sync/index.html" class="example-link">
+          <div class="example-title">Chart Sync</div>
+          <div class="example-description">Two charts with synced crosshair x-position and axis tooltip x-value (via connectCharts)</div>
+        </a>
+      </li>
+      <li class="example-item">
+        <a href="./interactive/index.html" class="example-link">
+          <div class="example-title">Interactive</div>
+          <div class="example-description">Two stacked charts with synced crosshair and axis tooltip, plus click logging for interactions</div>
+        </a>
+      </li>
+    </ul>
+  </div>
+</body>
+</html>

package/dist/examples/interactive/index.html ADDED Viewed

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Interactive - ChartGPU</title>
+  <style>
+    :root { color-scheme: dark; }
+    html, body { height: 100%; }
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #0a0a0a;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+    .page {
+      min-height: 100%;
+      display: grid;
+      grid-template-rows: auto 1fr;
+      gap: 16px;
+      padding: 20px;
+      box-sizing: border-box;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    header h1 {
+      margin: 0;
+      font-size: 1.4rem;
+      color: #fff;
+    }
+    header p {
+      margin: 8px 0 0;
+      color: #aaa;
+      line-height: 1.4;
+    }
+    .back {
+      display: inline-block;
+      margin-top: 10px;
+      color: #aaa;
+      text-decoration: none;
+    }
+    .back:hover { color: #fff; }
+    .stack {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 14px;
+      align-items: stretch;
+    }
+    .chart-shell {
+      border: 1px solid #333;
+      border-radius: 12px;
+      background: #0f0f14;
+      overflow: hidden;
+      height: clamp(260px, 34vh, 520px);
+    }
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+    .error {
+      padding: 16px;
+      color: #ffb4b4;
+      white-space: pre-wrap;
+    }
+  </style>
+  <script type="module" crossorigin src="/chartgpu/assets/interactive-aPGxN-b-.js"></script>
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/createChartSync-BUGadH_x.js">
+</head>
+<body>
+  <div class="page">
+    <header>
+      <h1>Interactive</h1>
+      <p>
+        Two vertically stacked charts with synced crosshair/tooltip behavior, plus x-axis dataZoom (inside + slider).
+        Use the slider handles (bottom), mouse-wheel to zoom (while over the plot), and shift+drag (or middle-mouse drag) to pan.
+        The inside zoom and slider should stay in sync.
+      </p>
+      <a class="back" href="../index.html">← Back to examples</a>
+    </header>
+    <div class="stack">
+      <div class="chart-shell">
+        <div id="chart-top" class="chart"></div>
+      </div>
+      <div class="chart-shell">
+        <div id="chart-bottom" class="chart"></div>
+      </div>
+    </div>
+    <div id="error" class="error" style="display:none;"></div>
+  </div>
+</body>
+</html>

package/dist/examples/live-streaming/index.html ADDED Viewed

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Live Streaming - ChartGPU</title>
+  <style>
+    :root {
+      color-scheme: dark;
+    }
+    html, body {
+      height: 100%;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #0a0a0a;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+    .page {
+      min-height: 100%;
+      display: grid;
+      grid-template-rows: auto auto 1fr;
+      gap: 12px;
+      padding: 20px;
+      box-sizing: border-box;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    header h1 {
+      margin: 0;
+      font-size: 1.4rem;
+      color: #fff;
+    }
+    header p {
+      margin: 8px 0 0;
+      color: #aaa;
+      line-height: 1.4;
+    }
+    .back {
+      display: inline-block;
+      margin-top: 10px;
+      color: #aaa;
+      text-decoration: none;
+    }
+    .back:hover {
+      color: #fff;
+    }
+    .controls {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 12px;
+      border: 1px solid #333;
+      border-radius: 12px;
+      background: #0f0f14;
+    }
+    .controls label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: #ddd;
+      font-size: 0.95rem;
+    }
+    .controls input[type="checkbox"] {
+      transform: translateY(0.5px);
+    }
+    .controls button {
+      appearance: none;
+      border: 1px solid #333;
+      background: #1a1a2e;
+      color: #e0e0e0;
+      border-radius: 10px;
+      padding: 8px 12px;
+      cursor: pointer;
+    }
+    .controls button:hover {
+      background: #2a2a3e;
+      border-color: #555;
+    }
+    .stat {
+      font-size: 0.9rem;
+      color: #aaa;
+      white-space: nowrap;
+    }
+    .hint {
+      width: 100%;
+      color: #9aa3b2;
+      font-size: 0.9rem;
+      line-height: 1.35;
+    }
+    .hint strong { color: #e0e0e0; }
+    .chart-shell {
+      border: 1px solid #333;
+      border-radius: 12px;
+      background: #0f0f14;
+      overflow: hidden;
+      min-height: 420px;
+      height: min(72vh, 760px);
+    }
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+    .error {
+      padding: 16px;
+      color: #ffb4b4;
+      white-space: pre-wrap;
+    }
+  </style>
+  <script type="module" crossorigin src="/chartgpu/assets/live-streaming-N4vKWEcJ.js"></script>
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/ChartGPU-zgkjfPqp.js">
+</head>
+<body>
+  <div class="page">
+    <header>
+      <h1>Live Streaming</h1>
+      <p>Single line series with repeated <code>chart.appendData(...)</code>. Toggle auto-scroll and use the slider to see “pinned to end” vs “panned away”.</p>
+      <a class="back" href="../index.html">← Back to examples</a>
+    </header>
+    <div class="controls">
+      <label>
+        <input id="autoScroll" type="checkbox" checked />
+        autoScroll
+      </label>
+      <button id="reset">Reset</button>
+      <div class="stat">Points: <span id="pointCount">0</span></div>
+      <div class="stat">Zoom: <span id="zoomRange">—</span></div>
+      <div class="hint">
+        <strong>Tip:</strong> drag the slider handles so the right edge is &lt; 100%. With autoScroll on, new data should <em>not</em> yank the view back to the end.
+        Drag the right edge back to ~100% to re-pin and watch it follow the stream.
+      </div>
+    </div>
+    <div class="chart-shell">
+      <div id="chart" class="chart"></div>
+      <div id="error" class="error" style="display:none;"></div>
+    </div>
+  </div>
+</body>
+</html>

package/dist/examples/million-points/index.html ADDED Viewed

@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Million Points - ChartGPU</title>
+  <style>
+    :root {
+      color-scheme: dark;
+    }
+    html, body {
+      height: 100%;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #0a0a0a;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+    .page {
+      min-height: 100%;
+      display: grid;
+      grid-template-rows: auto auto 1fr;
+      gap: 16px;
+      padding: 20px;
+      box-sizing: border-box;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    header h1 {
+      margin: 0;
+      font-size: 1.4rem;
+      color: #fff;
+    }
+    header p {
+      margin: 8px 0 0;
+      color: #aaa;
+      line-height: 1.4;
+      max-width: 72ch;
+    }
+    .back {
+      display: inline-block;
+      margin-top: 10px;
+      color: #aaa;
+      text-decoration: none;
+    }
+    .back:hover {
+      color: #fff;
+    }
+    .controls {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 12px;
+      border: 1px solid #333;
+      border-radius: 12px;
+      background: #0f0f14;
+      padding: 14px;
+    }
+    .controls-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px 14px;
+      align-items: center;
+    }
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      color: #ddd;
+      font-size: 0.95rem;
+    }
+    input[type="checkbox"] {
+      transform: translateY(0.5px);
+    }
+    button {
+      font: inherit;
+      color: #e0e0e0;
+      background: linear-gradient(180deg, #1b1b2a 0%, #141420 100%);
+      border: 1px solid #2b2b3a;
+      border-radius: 10px;
+      padding: 8px 12px;
+      cursor: pointer;
+      outline: none;
+    }
+    button:hover {
+      border-color: #3a3a50;
+      background: linear-gradient(180deg, #23233a 0%, #151525 100%);
+    }
+    button:focus {
+      border-color: #4a9eff;
+      box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
+    }
+    /* Numeric readability: prevents width "jitter" as values update */
+    .tabular-nums {
+      font-variant-numeric: tabular-nums;
+      font-feature-settings: "tnum" 1;
+    }
+    .readouts {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .readout-card {
+      border: 1px solid #2b2b3a;
+      border-radius: 12px;
+      padding: 12px;
+      background: rgba(255, 255, 255, 0.02);
+      min-width: 0;
+    }
+    .readout-title {
+      font-weight: 600;
+      color: #fff;
+      margin: 0 0 8px;
+      font-size: 0.95rem;
+    }
+    .kv {
+      display: grid;
+      grid-template-columns: 170px 1fr;
+      gap: 6px 10px;
+      font-size: 0.92rem;
+      color: #cfcfe6;
+    }
+    .kv .k {
+      color: #a8a8c8;
+    }
+    .charts {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 14px;
+    }
+    .chart-shell {
+      border: 1px solid #333;
+      border-radius: 12px;
+      background: #0f0f14;
+      overflow: hidden;
+      min-height: 420px;
+      height: min(72vh, 760px);
+      position: relative;
+    }
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+    .error {
+      padding: 16px;
+      color: #ffb4b4;
+      white-space: pre-wrap;
+      position: absolute;
+      inset: 0;
+      background: rgba(10, 10, 10, 0.85);
+    }
+    @media (max-width: 900px) {
+      .readouts {
+        grid-template-columns: 1fr;
+      }
+      .kv {
+        grid-template-columns: 150px 1fr;
+      }
+    }
+  </style>
+  <script type="module" crossorigin src="/chartgpu/assets/million-points-DVnJu39j.js"></script>
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/GPUContext-CgqhC6W6.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/scales-D-5MHN10.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/pie-c06rKDKR.js">
+  <link rel="modulepreload" crossorigin href="/chartgpu/assets/createDataZoomSlider-DLbAKjVh.js">
+</head>
+<body>
+  <div class="page">
+    <header>
+      <h1>Million Points</h1>
+      <p>
+        Stress test with <strong>1,000,000 points</strong>. Toggle sampling to compare performance and verify that interactive zoom stays responsive.
+      </p>
+      <a class="back" href="../index.html">← Back to examples</a>
+    </header>
+    <section class="controls">
+      <div class="controls-row">
+        <label>
+          <input id="samplingEnabled" type="checkbox" checked />
+          sampling
+        </label>
+        <button id="resetZoom">Reset zoom</button>
+      </div>
+      <div class="readouts">
+        <div class="readout-card">
+          <div class="readout-title">Performance</div>
+          <div class="kv tabular-nums">
+            <div class="k">FPS</div><div><span id="fps">—</span></div>
+            <div class="k">CPU submit (ms)</div><div><span id="renderTimeMs">—</span></div>
+            <div class="k">GPU time (ms)</div><div><span id="gpuTimeMs">—</span></div>
+          </div>
+        </div>
+        <div class="readout-card">
+          <div class="readout-title">Points</div>
+          <div class="kv tabular-nums">
+            <div class="k">Total points</div><div><span id="pointCount">1,000,000</span></div>
+            <div class="k">Rendered points</div><div><span id="renderedPointCount">—</span></div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="charts">
+      <div class="chart-shell">
+        <div id="chart" class="chart"></div>
+        <div id="error" class="error" style="display:none;"></div>
+      </div>
+    </section>
+  </div>
+</body>
+</html>