aliencharts 0.2.0 → 0.3.0
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.
- package/README.md +89 -30
- package/dist/aliencharts.css +1 -1
- package/dist/index.js +26 -3
- package/dist/index.js.map +2 -2
- package/dist/react.js +1717 -889
- package/dist/react.js.map +4 -4
- package/dist/vanilla.js +1717 -889
- package/dist/vanilla.js.map +4 -4
- package/index.d.ts +39 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ GPU-rendered chart grid for multi-metric dashboards — such as monitoring AI tr
|
|
|
7
7
|
|
|
8
8
|
By rendering every series with WebGL, AlienCharts keeps dense chart grids smooth where SVG/Canvas libraries stall.
|
|
9
9
|
|
|
10
|
-
> **Note:** AlienCharts currently supports **line charts**
|
|
10
|
+
> **Note:** AlienCharts currently supports **line charts** and **bar charts**. Other chart types may be added in the future.
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
@@ -42,9 +42,9 @@ Dark mode follows a `.dark` class on any ancestor element (e.g. `<html class="da
|
|
|
42
42
|
|
|
43
43
|
```js
|
|
44
44
|
import "aliencharts/styles.css";
|
|
45
|
-
import { createChartGrid,
|
|
45
|
+
import { createChartGrid, createLineSeries } from "aliencharts/vanilla";
|
|
46
46
|
|
|
47
|
-
const series =
|
|
47
|
+
const series = createLineSeries({
|
|
48
48
|
id: "run-1",
|
|
49
49
|
name: "Run 1",
|
|
50
50
|
color: "#38bdf8",
|
|
@@ -88,9 +88,9 @@ If you use React in your application, import the React entry point:
|
|
|
88
88
|
```jsx
|
|
89
89
|
import { useRef, useState } from "react";
|
|
90
90
|
import "aliencharts/styles.css";
|
|
91
|
-
import { ChartGrid,
|
|
91
|
+
import { ChartGrid, createLineSeries } from "aliencharts/react";
|
|
92
92
|
|
|
93
|
-
const series =
|
|
93
|
+
const series = createLineSeries({
|
|
94
94
|
id: "run-1",
|
|
95
95
|
x: [0, 1, 2, 3, 4],
|
|
96
96
|
y: [2.5, 1.9, 1.4, 1.1, 0.9],
|
|
@@ -120,37 +120,95 @@ export default function Dashboard() {
|
|
|
120
120
|
|
|
121
121
|
See the [React demo source](https://github.com/FarangLab/AlienCharts/blob/main/examples/DemoPage.jsx) for a larger controlled-state example.
|
|
122
122
|
|
|
123
|
-
##
|
|
123
|
+
## Data API
|
|
124
124
|
|
|
125
125
|
Framework-neutral data helpers are also available from the package root:
|
|
126
126
|
|
|
127
|
+
### Line series
|
|
128
|
+
|
|
129
|
+
```js
|
|
130
|
+
import { createLineSeries, createMockCharts, LineSeries } from "aliencharts";
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
`createLineSeries(options)` accepts an id, optional name/color, X/Y arrays or typed arrays, and an optional maximum LOD level count. Its `append(xValues, yValues)` method efficiently extends the typed backing arrays. The existing `createSeries(options)` API remains available as a backward-compatible alias.
|
|
134
|
+
|
|
135
|
+
### Bar series
|
|
136
|
+
|
|
137
|
+
Use `createBarSeries()` for grouped GPU-rendered bars. The data meaning is the
|
|
138
|
+
same in both orientations: `x` is the numeric category position and `y` is the
|
|
139
|
+
value.
|
|
140
|
+
|
|
141
|
+
```js
|
|
142
|
+
import { createBarSeries } from "aliencharts";
|
|
143
|
+
|
|
144
|
+
const vertical = createBarSeries({
|
|
145
|
+
id: "revenue",
|
|
146
|
+
x: [0, 1, 2, 3],
|
|
147
|
+
y: [12, 18, -4, 25],
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const horizontal = createBarSeries({
|
|
151
|
+
id: "latency",
|
|
152
|
+
orientation: "horizontal",
|
|
153
|
+
x: [0, 1, 2, 3],
|
|
154
|
+
y: [40, 65, 32, 80],
|
|
155
|
+
});
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Multiple bar series in one chart are grouped in series order. Every series in a
|
|
159
|
+
chart must use the same orientation.
|
|
160
|
+
|
|
161
|
+
## Chart configuration
|
|
162
|
+
|
|
163
|
+
Charts have the shape `{ id, title, series }` and may additionally define
|
|
164
|
+
`pinned`, `categories`, `xAxisLabel`, and a fixed `{ min, max }` Y range.
|
|
165
|
+
|
|
166
|
+
### Categories
|
|
167
|
+
|
|
168
|
+
Add `categories` to the chart to display text labels at bar positions. String
|
|
169
|
+
entries use their array index as the numeric X value:
|
|
170
|
+
|
|
127
171
|
```js
|
|
128
|
-
|
|
172
|
+
const models = ["Gemini 3.5", "GPT-5.6", "Claude 4.5"];
|
|
173
|
+
|
|
174
|
+
const chart = {
|
|
175
|
+
id: "model-scores",
|
|
176
|
+
title: "Model scores",
|
|
177
|
+
categories: models,
|
|
178
|
+
xAxisLabel: "MODEL",
|
|
179
|
+
series: [createBarSeries({
|
|
180
|
+
id: "score",
|
|
181
|
+
x: models.map((_, index) => index),
|
|
182
|
+
y: [82, 91, 87],
|
|
183
|
+
})],
|
|
184
|
+
};
|
|
129
185
|
```
|
|
130
186
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
| `
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
148
|
-
| `followLatest` | `false` | Always follow appended values. |
|
|
149
|
-
| `followVisibleLatest` | `true` | Follow appends when the latest point was visible. |
|
|
150
|
-
| `drawings` | `[]` | Initial or replacement drawing state. |
|
|
151
|
-
| `movingAverageByChart` | `{}` | Moving-average state keyed by chart id. |
|
|
152
|
-
| `topMarkers` | `[]` | Clickable markers positioned by `x` or `step`. |
|
|
153
|
-
| `disableDrawings` | `false` | Disable drawing and moving-average controls. |
|
|
187
|
+
For sparse or non-indexed numeric X values, use
|
|
188
|
+
`{ value: number, label: string }` entries instead.
|
|
189
|
+
|
|
190
|
+
### Common options
|
|
191
|
+
|
|
192
|
+
| Option | Default | Chart types | Description |
|
|
193
|
+
| --- | --- | --- | --- |
|
|
194
|
+
| `charts` | required | Line, Bar | Chart objects to render. |
|
|
195
|
+
| `columns` | `2` | Line, Bar | Responsive grid column count. |
|
|
196
|
+
| `initialVisiblePoints` | all | Line, Bar | Initial X window size. |
|
|
197
|
+
| `backgroundColor` | `#f5f9ff` | Line, Bar | Chart background. |
|
|
198
|
+
| `antialiasLines` | `false` | Line | GPU-expanded antialiased lines. |
|
|
199
|
+
| `gridLines` | `false` | Line, Bar | Boolean or `{ xSpacing, ySpacing }`. |
|
|
200
|
+
| `showToolbar` | `true` | Line, Bar | Focused-chart toolbar. |
|
|
201
|
+
| `showLatestValueLine` | `true` | Line | Latest value connector and label. |
|
|
202
|
+
| `showTooltips` | `true` | Line, Bar | Crosshair and nearest-value tooltip. |
|
|
203
|
+
| `xAxisLabel` | `STEP` | Line, Bar | Default tooltip label for the category/X value. |
|
|
204
|
+
| `followLatest` | `false` | Line, Bar | Always follow appended values. |
|
|
205
|
+
| `followVisibleLatest` | `true` | Line, Bar | Follow appends when the latest point was visible. |
|
|
206
|
+
| `drawings` | `[]` | Line | Initial or replacement drawing state. |
|
|
207
|
+
| `movingAverageByChart` | `{}` | Line | Moving-average state keyed by chart id. |
|
|
208
|
+
| `topMarkers` | `[]` | Line | Clickable markers positioned by `x` or `step`. |
|
|
209
|
+
| `disableDrawings` | `false` | Line | Disable drawing and moving-average controls. |
|
|
210
|
+
|
|
211
|
+
### Drawings and callbacks
|
|
154
212
|
|
|
155
213
|
Drawing, selection, active-tool, moving-average, marker, clearing, and context-menu callbacks work in both entry points. The controller updates its own state before emitting change callbacks; passing an explicit replacement through `setOptions()` or React props synchronizes external state back into it.
|
|
156
214
|
|
|
@@ -170,6 +228,7 @@ Then open:
|
|
|
170
228
|
|
|
171
229
|
- Vanilla Web: <http://127.0.0.1:4178/examples/vanilla.html>
|
|
172
230
|
- React: <http://127.0.0.1:4178/examples/react.html>
|
|
231
|
+
- Bar charts: <http://127.0.0.1:4178/examples/bars.html>
|
|
173
232
|
|
|
174
233
|
## License
|
|
175
234
|
|
package/dist/aliencharts.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--color-orange-500:oklch(70.5% .213 47.604);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--blur-sm:8px}}@layer base{.aliencharts-root,.aliencharts-root *,.aliencharts-root :before,.aliencharts-root :after{box-sizing:border-box;border:0 solid}.aliencharts-root button,.aliencharts-root input{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;margin:0}.aliencharts-root button{cursor:pointer;padding:0}.aliencharts-root button:disabled{cursor:default}.aliencharts-root svg{display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-12{top:calc(var(--spacing) * 12)}.right-0{right:0}.right-16{right:calc(var(--spacing) * 16)}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[60\]{z-index:60}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:var(--spacing)}.mt-1{margin-top:var(--spacing)}.mb-1{margin-bottom:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[220px\]{width:220px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-45{rotate:-45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background{border-color:var(--background)}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-foreground\/40{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/40{border-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.border-primary\/70{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/70{border-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--background) 85%, transparent)}}.bg-popover\/80{background-color:var(--popover)}@supports (color:color-mix(in lab, red, red)){.bg-popover\/80{background-color:color-mix(in oklab, var(--popover) 80%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-1{padding-top:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-border\/40{color:var(--border)}@supports (color:color-mix(in lab, red, red)){.text-border\/40{color:color-mix(in oklab, var(--border) 40%, transparent)}}.text-foreground,.text-foreground\/50{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-orange-500{color:var(--color-orange-500)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/40{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ring-primary\/70{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/70{--tw-ring-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}}.aliencharts-root{--radius:.5rem;--background:#fff;--foreground:#161616;--popover:#fff;--popover-foreground:#161616;--primary:#45aeee;--muted-foreground:#626262;--accent:#d1d1d1;--accent-foreground:#494949;--border:#626262}.dark .aliencharts-root,.aliencharts-root.dark{--background:#1c1719;--foreground:#e8e3e5;--popover:#1c1719;--popover-foreground:#e8e3e5;--primary:#077dc4;--muted-foreground:#a69399;--accent:#332a2d;--accent-foreground:#bdafb4;--border:#a69399}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--color-orange-500:oklch(70.5% .213 47.604);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--blur-sm:8px}}@layer base{.aliencharts-root,.aliencharts-root *,.aliencharts-root :before,.aliencharts-root :after{box-sizing:border-box;border:0 solid}.aliencharts-root button,.aliencharts-root input{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;margin:0}.aliencharts-root button{cursor:pointer;padding:0}.aliencharts-root button:disabled{cursor:default}.aliencharts-root svg{display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-x-2{inset-inline:calc(var(--spacing) * 2)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-12{top:calc(var(--spacing) * 12)}.right-16{right:calc(var(--spacing) * 16)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[60\]{z-index:60}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:var(--spacing)}.mt-1{margin-top:var(--spacing)}.mb-1{margin-bottom:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[220px\]{width:220px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-45{rotate:-45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background{border-color:var(--background)}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-foreground\/40{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/40{border-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.border-primary\/70{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/70{border-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--background) 85%, transparent)}}.bg-popover\/80{background-color:var(--popover)}@supports (color:color-mix(in lab, red, red)){.bg-popover\/80{background-color:color-mix(in oklab, var(--popover) 80%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-1{padding-top:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-border\/40{color:var(--border)}@supports (color:color-mix(in lab, red, red)){.text-border\/40{color:color-mix(in oklab, var(--border) 40%, transparent)}}.text-foreground,.text-foreground\/50{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-orange-500{color:var(--color-orange-500)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/40{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ring-primary\/70{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/70{--tw-ring-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}}.aliencharts-root{--radius:.5rem;--background:#fff;--foreground:#161616;--popover:#fff;--popover-foreground:#161616;--primary:#45aeee;--muted-foreground:#626262;--accent:#d1d1d1;--accent-foreground:#494949;--border:#626262}.dark .aliencharts-root,.aliencharts-root.dark{--background:#1c1719;--foreground:#e8e3e5;--popover:#1c1719;--popover-foreground:#e8e3e5;--primary:#077dc4;--muted-foreground:#a69399;--accent:#332a2d;--accent-foreground:#bdafb4;--border:#a69399}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}
|
package/dist/index.js
CHANGED
|
@@ -76,7 +76,7 @@ var concatTyped = (Type, left, right) => {
|
|
|
76
76
|
out.set(right, left.length);
|
|
77
77
|
return out;
|
|
78
78
|
};
|
|
79
|
-
var
|
|
79
|
+
var LodSeries = class {
|
|
80
80
|
constructor({ id, name, color, x, y, maxLevels = DEFAULT_MAX_LEVELS }) {
|
|
81
81
|
this.id = id;
|
|
82
82
|
this.name = name || id;
|
|
@@ -191,7 +191,27 @@ var LineSeries = class {
|
|
|
191
191
|
};
|
|
192
192
|
}
|
|
193
193
|
};
|
|
194
|
-
var
|
|
194
|
+
var LineSeries = class extends LodSeries {
|
|
195
|
+
constructor(options) {
|
|
196
|
+
super(options);
|
|
197
|
+
this.type = "line";
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
var BarSeries = class extends LodSeries {
|
|
201
|
+
constructor({ orientation = "vertical", ...options }) {
|
|
202
|
+
super(options);
|
|
203
|
+
if (orientation !== "vertical" && orientation !== "horizontal") {
|
|
204
|
+
throw new TypeError(
|
|
205
|
+
'BarSeries orientation must be "vertical" or "horizontal"'
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
this.type = "bar";
|
|
209
|
+
this.orientation = orientation;
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
var createLineSeries = (options) => new LineSeries(options);
|
|
213
|
+
var createSeries = createLineSeries;
|
|
214
|
+
var createBarSeries = (options) => new BarSeries(options);
|
|
195
215
|
|
|
196
216
|
// src/core/mockData.js
|
|
197
217
|
var palette = [
|
|
@@ -230,7 +250,7 @@ var makeSeries = ({ chartIndex, seriesIndex, pointCount }) => {
|
|
|
230
250
|
value += Math.sin(i * waveA + chartIndex) * amplitudeA + Math.cos(i * waveB + seriesIndex) * amplitudeB + Math.sin(i * waveC) * amplitudeA * 0.35 + trend + (random() - 0.5) * noise + spike;
|
|
231
251
|
y[i] = value;
|
|
232
252
|
}
|
|
233
|
-
return
|
|
253
|
+
return createLineSeries({
|
|
234
254
|
id: `chart-${chartIndex}-series-${seriesIndex}`,
|
|
235
255
|
name: `Run ${seriesIndex + 1}`,
|
|
236
256
|
color: palette[(chartIndex + seriesIndex) % palette.length],
|
|
@@ -253,7 +273,10 @@ var createMockCharts = ({
|
|
|
253
273
|
}));
|
|
254
274
|
};
|
|
255
275
|
export {
|
|
276
|
+
BarSeries,
|
|
256
277
|
LineSeries,
|
|
278
|
+
createBarSeries,
|
|
279
|
+
createLineSeries,
|
|
257
280
|
createMockCharts,
|
|
258
281
|
createSeries
|
|
259
282
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/core/lodSeries.js", "../src/core/mockData.js"],
|
|
4
|
-
"sourcesContent": ["const DEFAULT_MAX_LEVELS = 18;\n\nconst toTypedArray = (value, Type) => {\n if (value instanceof Type) return value;\n if (ArrayBuffer.isView(value)) return new Type(value);\n if (Array.isArray(value)) return new Type(value);\n return new Type(0);\n};\n\nconst lowerBound = (array, value) => {\n let lo = 0;\n let hi = array.length;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (array[mid] < value) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n};\n\nconst upperBound = (array, value) => {\n let lo = 0;\n let hi = array.length;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (array[mid] <= value) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n};\n\nconst pushUniqueSorted = (indices, index) => {\n if (index < 0) return;\n if (indices.includes(index)) return;\n indices.push(index);\n};\n\nconst buildLod = (rawX, rawY, bucketSize, startIndex = 0, endIndex = rawX.length) => {\n if (bucketSize <= 1 || rawX.length <= bucketSize) {\n return { x: rawX, y: rawY, bucketSize: 1 };\n }\n\n const alignedStart = Math.max(0, Math.floor(startIndex / bucketSize) * bucketSize);\n const alignedEnd = Math.min(rawX.length, endIndex);\n const estimated = Math.ceil((alignedEnd - alignedStart) / bucketSize) * 4;\n const x = new Float64Array(estimated);\n const y = new Float32Array(estimated);\n let out = 0;\n\n for (let start = alignedStart; start < alignedEnd; start += bucketSize) {\n const end = Math.min(alignedEnd, start + bucketSize);\n let minIndex = start;\n let maxIndex = start;\n for (let i = start + 1; i < end; i += 1) {\n if (rawY[i] < rawY[minIndex]) minIndex = i;\n if (rawY[i] > rawY[maxIndex]) maxIndex = i;\n }\n\n const indices = [];\n pushUniqueSorted(indices, start);\n pushUniqueSorted(indices, minIndex);\n pushUniqueSorted(indices, maxIndex);\n pushUniqueSorted(indices, end - 1);\n indices.sort((a, b) => a - b);\n\n for (let i = 0; i < indices.length; i += 1) {\n const sourceIndex = indices[i];\n x[out] = rawX[sourceIndex];\n y[out] = rawY[sourceIndex];\n out += 1;\n }\n }\n\n return {\n x: x.subarray(0, out),\n y: y.subarray(0, out),\n bucketSize,\n };\n};\n\nconst concatTyped = (Type, left, right) => {\n if (!left?.length) return right;\n if (!right?.length) return left;\n const out = new Type(left.length + right.length);\n out.set(left, 0);\n out.set(right, left.length);\n return out;\n};\n\nexport class LineSeries {\n constructor({ id, name, color, x, y, maxLevels = DEFAULT_MAX_LEVELS }) {\n this.id = id;\n this.name = name || id;\n this.color = color || \"#38bdf8\";\n this.maxLevels = maxLevels;\n const initialX = toTypedArray(x, Float64Array);\n const initialY = toTypedArray(y, Float32Array);\n this._length = Math.min(initialX.length, initialY.length);\n const capacity = Math.max(1, this._length);\n this.rawX = new Float64Array(capacity);\n this.rawY = new Float32Array(capacity);\n this.rawX.set(initialX.subarray(0, this._length));\n this.rawY.set(initialY.subarray(0, this._length));\n this.levels = [];\n this.rebuildLevels();\n }\n\n get length() {\n return this._length;\n }\n\n append(xValues, yValues) {\n const nextX = toTypedArray(xValues, Float64Array);\n const nextY = toTypedArray(yValues, Float32Array);\n const appendLength = Math.min(nextX.length, nextY.length);\n if (appendLength === 0) return;\n\n const currentLength = this.length;\n this.ensureRawCapacity(currentLength + appendLength);\n this.rawX.set(nextX.subarray(0, appendLength), currentLength);\n this.rawY.set(nextY.subarray(0, appendLength), currentLength);\n this._length = currentLength + appendLength;\n this.markLevelsDirty(currentLength);\n }\n\n rebuildLevels() {\n const rawX = this.rawX.subarray(0, this.length);\n const rawY = this.rawY.subarray(0, this.length);\n this.levels = [{ x: rawX, y: rawY, bucketSize: 1 }];\n\n let bucketSize = 4;\n while (\n this.levels.length < this.maxLevels &&\n bucketSize < Math.max(8, rawX.length)\n ) {\n this.levels.push(buildLod(rawX, rawY, bucketSize));\n bucketSize *= 4;\n }\n }\n\n ensureRawCapacity(requiredLength) {\n if (requiredLength <= this.rawX.length && requiredLength <= this.rawY.length) {\n return;\n }\n const nextCapacity = Math.max(requiredLength, Math.ceil(this.rawX.length * 1.5));\n const rawX = new Float64Array(nextCapacity);\n const rawY = new Float32Array(nextCapacity);\n rawX.set(this.rawX.subarray(0, this.length));\n rawY.set(this.rawY.subarray(0, this.length));\n this.rawX = rawX;\n this.rawY = rawY;\n }\n\n markLevelsDirty(previousLength) {\n const rawX = this.rawX.subarray(0, this.length);\n const rawY = this.rawY.subarray(0, this.length);\n this.levels[0] = { x: rawX, y: rawY, bucketSize: 1 };\n\n let bucketSize =\n this.levels.length > 0\n ? this.levels[this.levels.length - 1].bucketSize * 4\n : 4;\n while (\n this.levels.length < this.maxLevels &&\n bucketSize < Math.max(8, rawX.length)\n ) {\n this.levels.push(buildLod(rawX, rawY, bucketSize));\n bucketSize *= 4;\n }\n\n for (let i = 1; i < this.levels.length; i += 1) {\n const level = this.levels[i];\n const dirtyRawStart =\n Math.floor(previousLength / level.bucketSize) * level.bucketSize;\n level.dirtyFrom = Math.min(level.dirtyFrom ?? dirtyRawStart, dirtyRawStart);\n }\n }\n\n ensureLevel(index) {\n const level = this.levels[index];\n if (!level || index === 0 || level.dirtyFrom == null) return level;\n\n const rawX = this.rawX.subarray(0, this.length);\n const rawY = this.rawY.subarray(0, this.length);\n const dirtyRawStart =\n Math.floor(level.dirtyFrom / level.bucketSize) * level.bucketSize;\n const cutoffX = rawX[dirtyRawStart] ?? rawX[0] ?? 0;\n const keepCount = lowerBound(level.x, cutoffX);\n const tail = buildLod(rawX, rawY, level.bucketSize, dirtyRawStart, rawX.length);\n this.levels[index] = {\n x: concatTyped(Float64Array, level.x.subarray(0, keepCount), tail.x),\n y: concatTyped(Float32Array, level.y.subarray(0, keepCount), tail.y),\n bucketSize: level.bucketSize,\n };\n return this.levels[index];\n }\n\n selectLevel(xMin, xMax, pixelWidth, targetPointsPerPixel = 2.5) {\n const rawX = this.levels[0].x;\n if (rawX.length === 0) return this.levels[0];\n\n const from = lowerBound(rawX, xMin);\n const to = upperBound(rawX, xMax);\n const visibleRawPoints = Math.max(0, to - from);\n const targetPoints = Math.max(32, pixelWidth * targetPointsPerPixel);\n const desiredBucket = Math.max(1, visibleRawPoints / targetPoints);\n\n let selectedIndex = 0;\n for (let i = 1; i < this.levels.length; i += 1) {\n if (this.levels[i].bucketSize <= desiredBucket) {\n selectedIndex = i;\n } else {\n break;\n }\n }\n return this.ensureLevel(selectedIndex);\n }\n\n getVisiblePoints(xMin, xMax, pixelWidth) {\n const level = this.selectLevel(xMin, xMax, pixelWidth);\n const start = Math.max(0, lowerBound(level.x, xMin) - 1);\n const end = Math.min(level.x.length, upperBound(level.x, xMax) + 1);\n return {\n x: level.x.subarray(start, end),\n y: level.y.subarray(start, end),\n bucketSize: level.bucketSize,\n pointCount: Math.max(0, end - start),\n };\n }\n}\n\nexport const createSeries = (options) => new LineSeries(options);\n", "import { createSeries } from \"./lodSeries.js\";\n\nconst palette = [\n \"#38bdf8\",\n \"#22c55e\",\n \"#f59e0b\",\n \"#ef4444\",\n \"#a855f7\",\n \"#14b8a6\",\n];\n\nconst createRandom = (seed) => {\n let value = seed >>> 0;\n return () => {\n value = (value * 1664525 + 1013904223) >>> 0;\n return value / 4294967296;\n };\n};\n\nconst makeSeries = ({ chartIndex, seriesIndex, pointCount }) => {\n const x = new Float64Array(pointCount);\n const y = new Float32Array(pointCount);\n const random = createRandom((chartIndex + 1) * 1009 + seriesIndex * 9176);\n const baseline = 15 + random() * 45 + seriesIndex * 4;\n const waveA = 0.0008 + random() * 0.004;\n const waveB = 0.006 + random() * 0.03;\n const waveC = 0.00005 + random() * 0.0006;\n const amplitudeA = 0.015 + random() * 0.09;\n const amplitudeB = 0.005 + random() * 0.04;\n const trend = (random() - 0.5) * 0.004;\n const noise = 0.004 + random() * 0.025;\n const spikeInterval = 180 + Math.floor(random() * 900);\n const spikeMagnitude = 0.12 + random() * 0.7;\n let value = baseline;\n\n for (let i = 0; i < pointCount; i += 1) {\n x[i] = i;\n const spike =\n (i + chartIndex * 13 + seriesIndex * 31) % spikeInterval === 0\n ? spikeMagnitude * (random() > 0.45 ? 1 : -1)\n : 0;\n value +=\n Math.sin(i * waveA + chartIndex) * amplitudeA +\n Math.cos(i * waveB + seriesIndex) * amplitudeB +\n Math.sin(i * waveC) * amplitudeA * 0.35 +\n trend +\n (random() - 0.5) * noise +\n spike;\n y[i] = value;\n }\n\n return createSeries({\n id: `chart-${chartIndex}-series-${seriesIndex}`,\n name: `Run ${seriesIndex + 1}`,\n color: palette[(chartIndex + seriesIndex) % palette.length],\n x,\n y,\n });\n};\n\nexport const createMockCharts = ({\n chartCount = 50,\n seriesPerChart = 2,\n pointCount = 500000,\n} = {}) => {\n return Array.from({ length: chartCount }, (_, chartIndex) => ({\n id: `metric-${chartIndex + 1}`,\n title: `metric_${String(chartIndex + 1).padStart(2, \"0\")}`,\n series: Array.from({ length: seriesPerChart }, (_, seriesIndex) =>\n makeSeries({ chartIndex, seriesIndex, pointCount }),\n ),\n }));\n};\n"],
|
|
5
|
-
"mappings": ";AAAA,IAAM,qBAAqB;AAE3B,IAAM,eAAe,CAAC,OAAO,SAAS;AACpC,MAAI,iBAAiB,KAAM,QAAO;AAClC,MAAI,YAAY,OAAO,KAAK,EAAG,QAAO,IAAI,KAAK,KAAK;AACpD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,IAAI,KAAK,KAAK;AAC/C,SAAO,IAAI,KAAK,CAAC;AACnB;AAEA,IAAM,aAAa,CAAC,OAAO,UAAU;AACnC,MAAI,KAAK;AACT,MAAI,KAAK,MAAM;AACf,SAAO,KAAK,IAAI;AACd,UAAM,MAAO,KAAK,MAAO;AACzB,QAAI,MAAM,GAAG,IAAI,MAAO,MAAK,MAAM;AAAA,QAC9B,MAAK;AAAA,EACZ;AACA,SAAO;AACT;AAEA,IAAM,aAAa,CAAC,OAAO,UAAU;AACnC,MAAI,KAAK;AACT,MAAI,KAAK,MAAM;AACf,SAAO,KAAK,IAAI;AACd,UAAM,MAAO,KAAK,MAAO;AACzB,QAAI,MAAM,GAAG,KAAK,MAAO,MAAK,MAAM;AAAA,QAC/B,MAAK;AAAA,EACZ;AACA,SAAO;AACT;AAEA,IAAM,mBAAmB,CAAC,SAAS,UAAU;AAC3C,MAAI,QAAQ,EAAG;AACf,MAAI,QAAQ,SAAS,KAAK,EAAG;AAC7B,UAAQ,KAAK,KAAK;AACpB;AAEA,IAAM,WAAW,CAAC,MAAM,MAAM,YAAY,aAAa,GAAG,WAAW,KAAK,WAAW;AACnF,MAAI,cAAc,KAAK,KAAK,UAAU,YAAY;AAChD,WAAO,EAAE,GAAG,MAAM,GAAG,MAAM,YAAY,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,aAAa,UAAU,IAAI,UAAU;AACjF,QAAM,aAAa,KAAK,IAAI,KAAK,QAAQ,QAAQ;AACjD,QAAM,YAAY,KAAK,MAAM,aAAa,gBAAgB,UAAU,IAAI;AACxE,QAAM,IAAI,IAAI,aAAa,SAAS;AACpC,QAAM,IAAI,IAAI,aAAa,SAAS;AACpC,MAAI,MAAM;AAEV,WAAS,QAAQ,cAAc,QAAQ,YAAY,SAAS,YAAY;AACtE,UAAM,MAAM,KAAK,IAAI,YAAY,QAAQ,UAAU;AACnD,QAAI,WAAW;AACf,QAAI,WAAW;AACf,aAAS,IAAI,QAAQ,GAAG,IAAI,KAAK,KAAK,GAAG;AACvC,UAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAG,YAAW;AACzC,UAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAG,YAAW;AAAA,IAC3C;AAEA,UAAM,UAAU,CAAC;AACjB,qBAAiB,SAAS,KAAK;AAC/B,qBAAiB,SAAS,QAAQ;AAClC,qBAAiB,SAAS,QAAQ;AAClC,qBAAiB,SAAS,MAAM,CAAC;AACjC,YAAQ,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAE5B,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;AAC1C,YAAM,cAAc,QAAQ,CAAC;AAC7B,QAAE,GAAG,IAAI,KAAK,WAAW;AACzB,QAAE,GAAG,IAAI,KAAK,WAAW;AACzB,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG,EAAE,SAAS,GAAG,GAAG;AAAA,IACpB,GAAG,EAAE,SAAS,GAAG,GAAG;AAAA,IACpB;AAAA,EACF;AACF;AAEA,IAAM,cAAc,CAAC,MAAM,MAAM,UAAU;AACzC,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,MAAI,CAAC,OAAO,OAAQ,QAAO;AAC3B,QAAM,MAAM,IAAI,KAAK,KAAK,SAAS,MAAM,MAAM;AAC/C,MAAI,IAAI,MAAM,CAAC;AACf,MAAI,IAAI,OAAO,KAAK,MAAM;AAC1B,SAAO;AACT;
|
|
4
|
+
"sourcesContent": ["const DEFAULT_MAX_LEVELS = 18;\n\nconst toTypedArray = (value, Type) => {\n if (value instanceof Type) return value;\n if (ArrayBuffer.isView(value)) return new Type(value);\n if (Array.isArray(value)) return new Type(value);\n return new Type(0);\n};\n\nconst lowerBound = (array, value) => {\n let lo = 0;\n let hi = array.length;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (array[mid] < value) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n};\n\nconst upperBound = (array, value) => {\n let lo = 0;\n let hi = array.length;\n while (lo < hi) {\n const mid = (lo + hi) >> 1;\n if (array[mid] <= value) lo = mid + 1;\n else hi = mid;\n }\n return lo;\n};\n\nconst pushUniqueSorted = (indices, index) => {\n if (index < 0) return;\n if (indices.includes(index)) return;\n indices.push(index);\n};\n\nconst buildLod = (rawX, rawY, bucketSize, startIndex = 0, endIndex = rawX.length) => {\n if (bucketSize <= 1 || rawX.length <= bucketSize) {\n return { x: rawX, y: rawY, bucketSize: 1 };\n }\n\n const alignedStart = Math.max(0, Math.floor(startIndex / bucketSize) * bucketSize);\n const alignedEnd = Math.min(rawX.length, endIndex);\n const estimated = Math.ceil((alignedEnd - alignedStart) / bucketSize) * 4;\n const x = new Float64Array(estimated);\n const y = new Float32Array(estimated);\n let out = 0;\n\n for (let start = alignedStart; start < alignedEnd; start += bucketSize) {\n const end = Math.min(alignedEnd, start + bucketSize);\n let minIndex = start;\n let maxIndex = start;\n for (let i = start + 1; i < end; i += 1) {\n if (rawY[i] < rawY[minIndex]) minIndex = i;\n if (rawY[i] > rawY[maxIndex]) maxIndex = i;\n }\n\n const indices = [];\n pushUniqueSorted(indices, start);\n pushUniqueSorted(indices, minIndex);\n pushUniqueSorted(indices, maxIndex);\n pushUniqueSorted(indices, end - 1);\n indices.sort((a, b) => a - b);\n\n for (let i = 0; i < indices.length; i += 1) {\n const sourceIndex = indices[i];\n x[out] = rawX[sourceIndex];\n y[out] = rawY[sourceIndex];\n out += 1;\n }\n }\n\n return {\n x: x.subarray(0, out),\n y: y.subarray(0, out),\n bucketSize,\n };\n};\n\nconst concatTyped = (Type, left, right) => {\n if (!left?.length) return right;\n if (!right?.length) return left;\n const out = new Type(left.length + right.length);\n out.set(left, 0);\n out.set(right, left.length);\n return out;\n};\n\nclass LodSeries {\n constructor({ id, name, color, x, y, maxLevels = DEFAULT_MAX_LEVELS }) {\n this.id = id;\n this.name = name || id;\n this.color = color || \"#38bdf8\";\n this.maxLevels = maxLevels;\n const initialX = toTypedArray(x, Float64Array);\n const initialY = toTypedArray(y, Float32Array);\n this._length = Math.min(initialX.length, initialY.length);\n const capacity = Math.max(1, this._length);\n this.rawX = new Float64Array(capacity);\n this.rawY = new Float32Array(capacity);\n this.rawX.set(initialX.subarray(0, this._length));\n this.rawY.set(initialY.subarray(0, this._length));\n this.levels = [];\n this.rebuildLevels();\n }\n\n get length() {\n return this._length;\n }\n\n append(xValues, yValues) {\n const nextX = toTypedArray(xValues, Float64Array);\n const nextY = toTypedArray(yValues, Float32Array);\n const appendLength = Math.min(nextX.length, nextY.length);\n if (appendLength === 0) return;\n\n const currentLength = this.length;\n this.ensureRawCapacity(currentLength + appendLength);\n this.rawX.set(nextX.subarray(0, appendLength), currentLength);\n this.rawY.set(nextY.subarray(0, appendLength), currentLength);\n this._length = currentLength + appendLength;\n this.markLevelsDirty(currentLength);\n }\n\n rebuildLevels() {\n const rawX = this.rawX.subarray(0, this.length);\n const rawY = this.rawY.subarray(0, this.length);\n this.levels = [{ x: rawX, y: rawY, bucketSize: 1 }];\n\n let bucketSize = 4;\n while (\n this.levels.length < this.maxLevels &&\n bucketSize < Math.max(8, rawX.length)\n ) {\n this.levels.push(buildLod(rawX, rawY, bucketSize));\n bucketSize *= 4;\n }\n }\n\n ensureRawCapacity(requiredLength) {\n if (requiredLength <= this.rawX.length && requiredLength <= this.rawY.length) {\n return;\n }\n const nextCapacity = Math.max(requiredLength, Math.ceil(this.rawX.length * 1.5));\n const rawX = new Float64Array(nextCapacity);\n const rawY = new Float32Array(nextCapacity);\n rawX.set(this.rawX.subarray(0, this.length));\n rawY.set(this.rawY.subarray(0, this.length));\n this.rawX = rawX;\n this.rawY = rawY;\n }\n\n markLevelsDirty(previousLength) {\n const rawX = this.rawX.subarray(0, this.length);\n const rawY = this.rawY.subarray(0, this.length);\n this.levels[0] = { x: rawX, y: rawY, bucketSize: 1 };\n\n let bucketSize =\n this.levels.length > 0\n ? this.levels[this.levels.length - 1].bucketSize * 4\n : 4;\n while (\n this.levels.length < this.maxLevels &&\n bucketSize < Math.max(8, rawX.length)\n ) {\n this.levels.push(buildLod(rawX, rawY, bucketSize));\n bucketSize *= 4;\n }\n\n for (let i = 1; i < this.levels.length; i += 1) {\n const level = this.levels[i];\n const dirtyRawStart =\n Math.floor(previousLength / level.bucketSize) * level.bucketSize;\n level.dirtyFrom = Math.min(level.dirtyFrom ?? dirtyRawStart, dirtyRawStart);\n }\n }\n\n ensureLevel(index) {\n const level = this.levels[index];\n if (!level || index === 0 || level.dirtyFrom == null) return level;\n\n const rawX = this.rawX.subarray(0, this.length);\n const rawY = this.rawY.subarray(0, this.length);\n const dirtyRawStart =\n Math.floor(level.dirtyFrom / level.bucketSize) * level.bucketSize;\n const cutoffX = rawX[dirtyRawStart] ?? rawX[0] ?? 0;\n const keepCount = lowerBound(level.x, cutoffX);\n const tail = buildLod(rawX, rawY, level.bucketSize, dirtyRawStart, rawX.length);\n this.levels[index] = {\n x: concatTyped(Float64Array, level.x.subarray(0, keepCount), tail.x),\n y: concatTyped(Float32Array, level.y.subarray(0, keepCount), tail.y),\n bucketSize: level.bucketSize,\n };\n return this.levels[index];\n }\n\n selectLevel(xMin, xMax, pixelWidth, targetPointsPerPixel = 2.5) {\n const rawX = this.levels[0].x;\n if (rawX.length === 0) return this.levels[0];\n\n const from = lowerBound(rawX, xMin);\n const to = upperBound(rawX, xMax);\n const visibleRawPoints = Math.max(0, to - from);\n const targetPoints = Math.max(32, pixelWidth * targetPointsPerPixel);\n const desiredBucket = Math.max(1, visibleRawPoints / targetPoints);\n\n let selectedIndex = 0;\n for (let i = 1; i < this.levels.length; i += 1) {\n if (this.levels[i].bucketSize <= desiredBucket) {\n selectedIndex = i;\n } else {\n break;\n }\n }\n return this.ensureLevel(selectedIndex);\n }\n\n getVisiblePoints(xMin, xMax, pixelWidth) {\n const level = this.selectLevel(xMin, xMax, pixelWidth);\n const start = Math.max(0, lowerBound(level.x, xMin) - 1);\n const end = Math.min(level.x.length, upperBound(level.x, xMax) + 1);\n return {\n x: level.x.subarray(start, end),\n y: level.y.subarray(start, end),\n bucketSize: level.bucketSize,\n pointCount: Math.max(0, end - start),\n };\n }\n}\n\nexport class LineSeries extends LodSeries {\n constructor(options) {\n super(options);\n this.type = \"line\";\n }\n}\n\nexport class BarSeries extends LodSeries {\n constructor({ orientation = \"vertical\", ...options }) {\n super(options);\n if (orientation !== \"vertical\" && orientation !== \"horizontal\") {\n throw new TypeError(\n 'BarSeries orientation must be \"vertical\" or \"horizontal\"',\n );\n }\n this.type = \"bar\";\n this.orientation = orientation;\n }\n}\n\nexport const createLineSeries = (options) => new LineSeries(options);\nexport const createSeries = createLineSeries;\nexport const createBarSeries = (options) => new BarSeries(options);\n", "import { createLineSeries } from \"./lodSeries.js\";\n\nconst palette = [\n \"#38bdf8\",\n \"#22c55e\",\n \"#f59e0b\",\n \"#ef4444\",\n \"#a855f7\",\n \"#14b8a6\",\n];\n\nconst createRandom = (seed) => {\n let value = seed >>> 0;\n return () => {\n value = (value * 1664525 + 1013904223) >>> 0;\n return value / 4294967296;\n };\n};\n\nconst makeSeries = ({ chartIndex, seriesIndex, pointCount }) => {\n const x = new Float64Array(pointCount);\n const y = new Float32Array(pointCount);\n const random = createRandom((chartIndex + 1) * 1009 + seriesIndex * 9176);\n const baseline = 15 + random() * 45 + seriesIndex * 4;\n const waveA = 0.0008 + random() * 0.004;\n const waveB = 0.006 + random() * 0.03;\n const waveC = 0.00005 + random() * 0.0006;\n const amplitudeA = 0.015 + random() * 0.09;\n const amplitudeB = 0.005 + random() * 0.04;\n const trend = (random() - 0.5) * 0.004;\n const noise = 0.004 + random() * 0.025;\n const spikeInterval = 180 + Math.floor(random() * 900);\n const spikeMagnitude = 0.12 + random() * 0.7;\n let value = baseline;\n\n for (let i = 0; i < pointCount; i += 1) {\n x[i] = i;\n const spike =\n (i + chartIndex * 13 + seriesIndex * 31) % spikeInterval === 0\n ? spikeMagnitude * (random() > 0.45 ? 1 : -1)\n : 0;\n value +=\n Math.sin(i * waveA + chartIndex) * amplitudeA +\n Math.cos(i * waveB + seriesIndex) * amplitudeB +\n Math.sin(i * waveC) * amplitudeA * 0.35 +\n trend +\n (random() - 0.5) * noise +\n spike;\n y[i] = value;\n }\n\n return createLineSeries({\n id: `chart-${chartIndex}-series-${seriesIndex}`,\n name: `Run ${seriesIndex + 1}`,\n color: palette[(chartIndex + seriesIndex) % palette.length],\n x,\n y,\n });\n};\n\nexport const createMockCharts = ({\n chartCount = 50,\n seriesPerChart = 2,\n pointCount = 500000,\n} = {}) => {\n return Array.from({ length: chartCount }, (_, chartIndex) => ({\n id: `metric-${chartIndex + 1}`,\n title: `metric_${String(chartIndex + 1).padStart(2, \"0\")}`,\n series: Array.from({ length: seriesPerChart }, (_, seriesIndex) =>\n makeSeries({ chartIndex, seriesIndex, pointCount }),\n ),\n }));\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_"]
|
|
7
7
|
}
|