@photonviz/vue 0.1.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/LICENSE +21 -0
- package/dist/index.d.ts +369 -0
- package/dist/index.js +178 -0
- package/dist/index.js.map +1 -0
- package/package.json +48 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Photon contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
import * as _photonviz_core from '@photonviz/core';
|
|
2
|
+
import { PlotOptions } from '@photonviz/core';
|
|
3
|
+
import * as vue from 'vue';
|
|
4
|
+
import { PropType } from 'vue';
|
|
5
|
+
|
|
6
|
+
declare const Plot: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
7
|
+
options: {
|
|
8
|
+
type: PropType<PlotOptions>;
|
|
9
|
+
default: undefined;
|
|
10
|
+
};
|
|
11
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
12
|
+
[key: string]: any;
|
|
13
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
14
|
+
options: {
|
|
15
|
+
type: PropType<PlotOptions>;
|
|
16
|
+
default: undefined;
|
|
17
|
+
};
|
|
18
|
+
}>> & Readonly<{}>, {
|
|
19
|
+
options: PlotOptions;
|
|
20
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
21
|
+
declare const Line: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
22
|
+
x: {
|
|
23
|
+
type: PropType<ArrayLike<number>>;
|
|
24
|
+
required: true;
|
|
25
|
+
};
|
|
26
|
+
y: {
|
|
27
|
+
type: PropType<ArrayLike<number>>;
|
|
28
|
+
required: true;
|
|
29
|
+
};
|
|
30
|
+
color: {
|
|
31
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
32
|
+
default: undefined;
|
|
33
|
+
};
|
|
34
|
+
width: {
|
|
35
|
+
type: PropType<number>;
|
|
36
|
+
default: undefined;
|
|
37
|
+
};
|
|
38
|
+
name: {
|
|
39
|
+
type: PropType<string>;
|
|
40
|
+
default: undefined;
|
|
41
|
+
};
|
|
42
|
+
yAxis: {
|
|
43
|
+
type: PropType<string>;
|
|
44
|
+
default: undefined;
|
|
45
|
+
};
|
|
46
|
+
step: {
|
|
47
|
+
type: PropType<"before" | "after" | "center" | undefined>;
|
|
48
|
+
default: undefined;
|
|
49
|
+
};
|
|
50
|
+
join: {
|
|
51
|
+
type: PropType<"round" | "butt" | undefined>;
|
|
52
|
+
default: undefined;
|
|
53
|
+
};
|
|
54
|
+
decimate: {
|
|
55
|
+
type: PropType<boolean>;
|
|
56
|
+
default: undefined;
|
|
57
|
+
};
|
|
58
|
+
}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
59
|
+
x: {
|
|
60
|
+
type: PropType<ArrayLike<number>>;
|
|
61
|
+
required: true;
|
|
62
|
+
};
|
|
63
|
+
y: {
|
|
64
|
+
type: PropType<ArrayLike<number>>;
|
|
65
|
+
required: true;
|
|
66
|
+
};
|
|
67
|
+
color: {
|
|
68
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
69
|
+
default: undefined;
|
|
70
|
+
};
|
|
71
|
+
width: {
|
|
72
|
+
type: PropType<number>;
|
|
73
|
+
default: undefined;
|
|
74
|
+
};
|
|
75
|
+
name: {
|
|
76
|
+
type: PropType<string>;
|
|
77
|
+
default: undefined;
|
|
78
|
+
};
|
|
79
|
+
yAxis: {
|
|
80
|
+
type: PropType<string>;
|
|
81
|
+
default: undefined;
|
|
82
|
+
};
|
|
83
|
+
step: {
|
|
84
|
+
type: PropType<"before" | "after" | "center" | undefined>;
|
|
85
|
+
default: undefined;
|
|
86
|
+
};
|
|
87
|
+
join: {
|
|
88
|
+
type: PropType<"round" | "butt" | undefined>;
|
|
89
|
+
default: undefined;
|
|
90
|
+
};
|
|
91
|
+
decimate: {
|
|
92
|
+
type: PropType<boolean>;
|
|
93
|
+
default: undefined;
|
|
94
|
+
};
|
|
95
|
+
}>> & Readonly<{}>, {
|
|
96
|
+
name: string;
|
|
97
|
+
join: "round" | "butt" | undefined;
|
|
98
|
+
color: string | _photonviz_core.Color | undefined;
|
|
99
|
+
step: "before" | "after" | "center" | undefined;
|
|
100
|
+
width: number;
|
|
101
|
+
yAxis: string;
|
|
102
|
+
decimate: boolean;
|
|
103
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
104
|
+
declare const Scatter: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
105
|
+
x: {
|
|
106
|
+
type: PropType<ArrayLike<number>>;
|
|
107
|
+
required: true;
|
|
108
|
+
};
|
|
109
|
+
y: {
|
|
110
|
+
type: PropType<ArrayLike<number>>;
|
|
111
|
+
required: true;
|
|
112
|
+
};
|
|
113
|
+
color: {
|
|
114
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
115
|
+
default: undefined;
|
|
116
|
+
};
|
|
117
|
+
size: {
|
|
118
|
+
type: PropType<number>;
|
|
119
|
+
default: undefined;
|
|
120
|
+
};
|
|
121
|
+
name: {
|
|
122
|
+
type: PropType<string>;
|
|
123
|
+
default: undefined;
|
|
124
|
+
};
|
|
125
|
+
yAxis: {
|
|
126
|
+
type: PropType<string>;
|
|
127
|
+
default: undefined;
|
|
128
|
+
};
|
|
129
|
+
colorBy: {
|
|
130
|
+
type: PropType<{
|
|
131
|
+
values: ArrayLike<number>;
|
|
132
|
+
colormap?: _photonviz_core.ColormapName;
|
|
133
|
+
domain?: _photonviz_core.Range;
|
|
134
|
+
} | undefined>;
|
|
135
|
+
default: undefined;
|
|
136
|
+
};
|
|
137
|
+
}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
138
|
+
x: {
|
|
139
|
+
type: PropType<ArrayLike<number>>;
|
|
140
|
+
required: true;
|
|
141
|
+
};
|
|
142
|
+
y: {
|
|
143
|
+
type: PropType<ArrayLike<number>>;
|
|
144
|
+
required: true;
|
|
145
|
+
};
|
|
146
|
+
color: {
|
|
147
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
148
|
+
default: undefined;
|
|
149
|
+
};
|
|
150
|
+
size: {
|
|
151
|
+
type: PropType<number>;
|
|
152
|
+
default: undefined;
|
|
153
|
+
};
|
|
154
|
+
name: {
|
|
155
|
+
type: PropType<string>;
|
|
156
|
+
default: undefined;
|
|
157
|
+
};
|
|
158
|
+
yAxis: {
|
|
159
|
+
type: PropType<string>;
|
|
160
|
+
default: undefined;
|
|
161
|
+
};
|
|
162
|
+
colorBy: {
|
|
163
|
+
type: PropType<{
|
|
164
|
+
values: ArrayLike<number>;
|
|
165
|
+
colormap?: _photonviz_core.ColormapName;
|
|
166
|
+
domain?: _photonviz_core.Range;
|
|
167
|
+
} | undefined>;
|
|
168
|
+
default: undefined;
|
|
169
|
+
};
|
|
170
|
+
}>> & Readonly<{}>, {
|
|
171
|
+
name: string;
|
|
172
|
+
color: string | _photonviz_core.Color | undefined;
|
|
173
|
+
yAxis: string;
|
|
174
|
+
colorBy: {
|
|
175
|
+
values: ArrayLike<number>;
|
|
176
|
+
colormap?: _photonviz_core.ColormapName;
|
|
177
|
+
domain?: _photonviz_core.Range;
|
|
178
|
+
} | undefined;
|
|
179
|
+
size: number;
|
|
180
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
181
|
+
declare const Bar: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
182
|
+
x: {
|
|
183
|
+
type: PropType<ArrayLike<number>>;
|
|
184
|
+
required: true;
|
|
185
|
+
};
|
|
186
|
+
y: {
|
|
187
|
+
type: PropType<ArrayLike<number>>;
|
|
188
|
+
required: true;
|
|
189
|
+
};
|
|
190
|
+
base: {
|
|
191
|
+
type: PropType<number | ArrayLike<number> | undefined>;
|
|
192
|
+
default: undefined;
|
|
193
|
+
};
|
|
194
|
+
width: {
|
|
195
|
+
type: PropType<number>;
|
|
196
|
+
default: undefined;
|
|
197
|
+
};
|
|
198
|
+
offset: {
|
|
199
|
+
type: PropType<number>;
|
|
200
|
+
default: undefined;
|
|
201
|
+
};
|
|
202
|
+
color: {
|
|
203
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
204
|
+
default: undefined;
|
|
205
|
+
};
|
|
206
|
+
name: {
|
|
207
|
+
type: PropType<string>;
|
|
208
|
+
default: undefined;
|
|
209
|
+
};
|
|
210
|
+
yAxis: {
|
|
211
|
+
type: PropType<string>;
|
|
212
|
+
default: undefined;
|
|
213
|
+
};
|
|
214
|
+
}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
215
|
+
x: {
|
|
216
|
+
type: PropType<ArrayLike<number>>;
|
|
217
|
+
required: true;
|
|
218
|
+
};
|
|
219
|
+
y: {
|
|
220
|
+
type: PropType<ArrayLike<number>>;
|
|
221
|
+
required: true;
|
|
222
|
+
};
|
|
223
|
+
base: {
|
|
224
|
+
type: PropType<number | ArrayLike<number> | undefined>;
|
|
225
|
+
default: undefined;
|
|
226
|
+
};
|
|
227
|
+
width: {
|
|
228
|
+
type: PropType<number>;
|
|
229
|
+
default: undefined;
|
|
230
|
+
};
|
|
231
|
+
offset: {
|
|
232
|
+
type: PropType<number>;
|
|
233
|
+
default: undefined;
|
|
234
|
+
};
|
|
235
|
+
color: {
|
|
236
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
237
|
+
default: undefined;
|
|
238
|
+
};
|
|
239
|
+
name: {
|
|
240
|
+
type: PropType<string>;
|
|
241
|
+
default: undefined;
|
|
242
|
+
};
|
|
243
|
+
yAxis: {
|
|
244
|
+
type: PropType<string>;
|
|
245
|
+
default: undefined;
|
|
246
|
+
};
|
|
247
|
+
}>> & Readonly<{}>, {
|
|
248
|
+
name: string;
|
|
249
|
+
base: number | ArrayLike<number> | undefined;
|
|
250
|
+
color: string | _photonviz_core.Color | undefined;
|
|
251
|
+
width: number;
|
|
252
|
+
yAxis: string;
|
|
253
|
+
offset: number;
|
|
254
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
255
|
+
declare const Area: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
256
|
+
x: {
|
|
257
|
+
type: PropType<ArrayLike<number>>;
|
|
258
|
+
required: true;
|
|
259
|
+
};
|
|
260
|
+
y: {
|
|
261
|
+
type: PropType<ArrayLike<number>>;
|
|
262
|
+
required: true;
|
|
263
|
+
};
|
|
264
|
+
base: {
|
|
265
|
+
type: PropType<number | ArrayLike<number> | undefined>;
|
|
266
|
+
default: undefined;
|
|
267
|
+
};
|
|
268
|
+
color: {
|
|
269
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
270
|
+
default: undefined;
|
|
271
|
+
};
|
|
272
|
+
name: {
|
|
273
|
+
type: PropType<string>;
|
|
274
|
+
default: undefined;
|
|
275
|
+
};
|
|
276
|
+
yAxis: {
|
|
277
|
+
type: PropType<string>;
|
|
278
|
+
default: undefined;
|
|
279
|
+
};
|
|
280
|
+
}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
281
|
+
x: {
|
|
282
|
+
type: PropType<ArrayLike<number>>;
|
|
283
|
+
required: true;
|
|
284
|
+
};
|
|
285
|
+
y: {
|
|
286
|
+
type: PropType<ArrayLike<number>>;
|
|
287
|
+
required: true;
|
|
288
|
+
};
|
|
289
|
+
base: {
|
|
290
|
+
type: PropType<number | ArrayLike<number> | undefined>;
|
|
291
|
+
default: undefined;
|
|
292
|
+
};
|
|
293
|
+
color: {
|
|
294
|
+
type: PropType<string | _photonviz_core.Color | undefined>;
|
|
295
|
+
default: undefined;
|
|
296
|
+
};
|
|
297
|
+
name: {
|
|
298
|
+
type: PropType<string>;
|
|
299
|
+
default: undefined;
|
|
300
|
+
};
|
|
301
|
+
yAxis: {
|
|
302
|
+
type: PropType<string>;
|
|
303
|
+
default: undefined;
|
|
304
|
+
};
|
|
305
|
+
}>> & Readonly<{}>, {
|
|
306
|
+
name: string;
|
|
307
|
+
base: number | ArrayLike<number> | undefined;
|
|
308
|
+
color: string | _photonviz_core.Color | undefined;
|
|
309
|
+
yAxis: string;
|
|
310
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
311
|
+
declare const YAxis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
312
|
+
id: {
|
|
313
|
+
type: StringConstructor;
|
|
314
|
+
required: true;
|
|
315
|
+
};
|
|
316
|
+
side: {
|
|
317
|
+
type: PropType<"left" | "right" | undefined>;
|
|
318
|
+
default: undefined;
|
|
319
|
+
};
|
|
320
|
+
color: {
|
|
321
|
+
type: PropType<string>;
|
|
322
|
+
default: undefined;
|
|
323
|
+
};
|
|
324
|
+
title: {
|
|
325
|
+
type: PropType<string>;
|
|
326
|
+
default: undefined;
|
|
327
|
+
};
|
|
328
|
+
domain: {
|
|
329
|
+
type: PropType<_photonviz_core.Range | undefined>;
|
|
330
|
+
default: undefined;
|
|
331
|
+
};
|
|
332
|
+
type: {
|
|
333
|
+
type: PropType<_photonviz_core.ScaleType | undefined>;
|
|
334
|
+
default: undefined;
|
|
335
|
+
};
|
|
336
|
+
}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
337
|
+
id: {
|
|
338
|
+
type: StringConstructor;
|
|
339
|
+
required: true;
|
|
340
|
+
};
|
|
341
|
+
side: {
|
|
342
|
+
type: PropType<"left" | "right" | undefined>;
|
|
343
|
+
default: undefined;
|
|
344
|
+
};
|
|
345
|
+
color: {
|
|
346
|
+
type: PropType<string>;
|
|
347
|
+
default: undefined;
|
|
348
|
+
};
|
|
349
|
+
title: {
|
|
350
|
+
type: PropType<string>;
|
|
351
|
+
default: undefined;
|
|
352
|
+
};
|
|
353
|
+
domain: {
|
|
354
|
+
type: PropType<_photonviz_core.Range | undefined>;
|
|
355
|
+
default: undefined;
|
|
356
|
+
};
|
|
357
|
+
type: {
|
|
358
|
+
type: PropType<_photonviz_core.ScaleType | undefined>;
|
|
359
|
+
default: undefined;
|
|
360
|
+
};
|
|
361
|
+
}>> & Readonly<{}>, {
|
|
362
|
+
title: string;
|
|
363
|
+
color: string;
|
|
364
|
+
type: _photonviz_core.ScaleType | undefined;
|
|
365
|
+
side: "left" | "right" | undefined;
|
|
366
|
+
domain: _photonviz_core.Range | undefined;
|
|
367
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
368
|
+
|
|
369
|
+
export { Area, Bar, Line, Plot, Scatter, YAxis };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
import {
|
|
3
|
+
Plot as CorePlot
|
|
4
|
+
} from "@photonviz/core";
|
|
5
|
+
import {
|
|
6
|
+
defineComponent,
|
|
7
|
+
h,
|
|
8
|
+
inject,
|
|
9
|
+
markRaw,
|
|
10
|
+
onMounted,
|
|
11
|
+
onUnmounted,
|
|
12
|
+
provide,
|
|
13
|
+
ref,
|
|
14
|
+
shallowRef,
|
|
15
|
+
watch
|
|
16
|
+
} from "vue";
|
|
17
|
+
var PlotKey = /* @__PURE__ */ Symbol("photon-plot");
|
|
18
|
+
var Plot = defineComponent({
|
|
19
|
+
name: "PhotonPlot",
|
|
20
|
+
props: {
|
|
21
|
+
options: { type: Object, default: void 0 }
|
|
22
|
+
},
|
|
23
|
+
setup(props, { slots }) {
|
|
24
|
+
const el = ref(null);
|
|
25
|
+
const plot = shallowRef(null);
|
|
26
|
+
provide(PlotKey, plot);
|
|
27
|
+
onMounted(() => {
|
|
28
|
+
if (el.value) plot.value = markRaw(new CorePlot(el.value, props.options));
|
|
29
|
+
});
|
|
30
|
+
onUnmounted(() => plot.value?.destroy());
|
|
31
|
+
return () => h(
|
|
32
|
+
"div",
|
|
33
|
+
{ ref: el, style: "position:relative;width:100%;height:100%" },
|
|
34
|
+
plot.value && slots.default ? slots.default() : []
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
function useLayer(add, structural, data, update) {
|
|
39
|
+
const plotRef = inject(PlotKey);
|
|
40
|
+
if (!plotRef) throw new Error("Photon layer must be used inside <Plot>");
|
|
41
|
+
let layer = null;
|
|
42
|
+
const create = () => {
|
|
43
|
+
const p = plotRef.value;
|
|
44
|
+
if (p) layer = markRaw(add(p));
|
|
45
|
+
};
|
|
46
|
+
const destroy = () => {
|
|
47
|
+
if (layer && plotRef.value) plotRef.value.removeLayer(layer);
|
|
48
|
+
layer = null;
|
|
49
|
+
};
|
|
50
|
+
onMounted(create);
|
|
51
|
+
onUnmounted(destroy);
|
|
52
|
+
watch(structural, () => {
|
|
53
|
+
destroy();
|
|
54
|
+
create();
|
|
55
|
+
});
|
|
56
|
+
watch(data, () => {
|
|
57
|
+
if (layer && plotRef.value) {
|
|
58
|
+
update(layer, plotRef.value);
|
|
59
|
+
plotRef.value.render();
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
var arr = () => ({ type: [Array, Object, Float64Array, Float32Array], required: true });
|
|
64
|
+
var opt = () => ({ type: [String, Number, Object, Array, Boolean, Float64Array, Float32Array], default: void 0 });
|
|
65
|
+
var Line = defineComponent({
|
|
66
|
+
name: "PhotonLine",
|
|
67
|
+
props: {
|
|
68
|
+
x: arr(),
|
|
69
|
+
y: arr(),
|
|
70
|
+
color: opt(),
|
|
71
|
+
width: opt(),
|
|
72
|
+
name: opt(),
|
|
73
|
+
yAxis: opt(),
|
|
74
|
+
step: opt(),
|
|
75
|
+
join: opt(),
|
|
76
|
+
decimate: opt()
|
|
77
|
+
},
|
|
78
|
+
setup(props) {
|
|
79
|
+
useLayer(
|
|
80
|
+
(p) => p.addLine({ x: props.x, y: props.y, color: props.color, width: props.width, name: props.name, yAxis: props.yAxis, step: props.step, join: props.join, decimate: props.decimate }),
|
|
81
|
+
() => [props.color, props.width, props.name, props.yAxis, props.step, props.join, props.decimate],
|
|
82
|
+
() => [props.x, props.y],
|
|
83
|
+
(l) => l.setData(props.x, props.y)
|
|
84
|
+
);
|
|
85
|
+
return () => null;
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
var Scatter = defineComponent({
|
|
89
|
+
name: "PhotonScatter",
|
|
90
|
+
props: {
|
|
91
|
+
x: arr(),
|
|
92
|
+
y: arr(),
|
|
93
|
+
color: opt(),
|
|
94
|
+
size: opt(),
|
|
95
|
+
name: opt(),
|
|
96
|
+
yAxis: opt(),
|
|
97
|
+
colorBy: opt()
|
|
98
|
+
},
|
|
99
|
+
setup(props) {
|
|
100
|
+
useLayer(
|
|
101
|
+
(p) => p.addScatter({ x: props.x, y: props.y, color: props.color, size: props.size, name: props.name, yAxis: props.yAxis, colorBy: props.colorBy }),
|
|
102
|
+
() => [props.color, props.size, props.name, props.yAxis, props.colorBy],
|
|
103
|
+
() => [props.x, props.y],
|
|
104
|
+
(l) => l.setData(props.x, props.y)
|
|
105
|
+
);
|
|
106
|
+
return () => null;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
var Bar = defineComponent({
|
|
110
|
+
name: "PhotonBar",
|
|
111
|
+
props: {
|
|
112
|
+
x: arr(),
|
|
113
|
+
y: arr(),
|
|
114
|
+
base: opt(),
|
|
115
|
+
width: opt(),
|
|
116
|
+
offset: opt(),
|
|
117
|
+
color: opt(),
|
|
118
|
+
name: opt(),
|
|
119
|
+
yAxis: opt()
|
|
120
|
+
},
|
|
121
|
+
setup(props) {
|
|
122
|
+
useLayer(
|
|
123
|
+
(p) => p.addBar({ x: props.x, y: props.y, base: props.base, width: props.width, offset: props.offset, color: props.color, name: props.name, yAxis: props.yAxis }),
|
|
124
|
+
() => [props.width, props.offset, props.color, props.name, props.yAxis],
|
|
125
|
+
() => [props.x, props.y, props.base],
|
|
126
|
+
(l) => l.setData(props.x, props.y, props.base)
|
|
127
|
+
);
|
|
128
|
+
return () => null;
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
var Area = defineComponent({
|
|
132
|
+
name: "PhotonArea",
|
|
133
|
+
props: {
|
|
134
|
+
x: arr(),
|
|
135
|
+
y: arr(),
|
|
136
|
+
base: opt(),
|
|
137
|
+
color: opt(),
|
|
138
|
+
name: opt(),
|
|
139
|
+
yAxis: opt()
|
|
140
|
+
},
|
|
141
|
+
setup(props) {
|
|
142
|
+
useLayer(
|
|
143
|
+
(p) => p.addArea({ x: props.x, y: props.y, base: props.base, color: props.color, name: props.name, yAxis: props.yAxis }),
|
|
144
|
+
() => [props.color, props.name, props.yAxis],
|
|
145
|
+
() => [props.x, props.y, props.base],
|
|
146
|
+
(l) => l.setData(props.x, props.y, props.base)
|
|
147
|
+
);
|
|
148
|
+
return () => null;
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
var YAxis = defineComponent({
|
|
152
|
+
name: "PhotonYAxis",
|
|
153
|
+
props: {
|
|
154
|
+
id: { type: String, required: true },
|
|
155
|
+
side: opt(),
|
|
156
|
+
color: opt(),
|
|
157
|
+
title: opt(),
|
|
158
|
+
domain: opt(),
|
|
159
|
+
type: opt()
|
|
160
|
+
},
|
|
161
|
+
setup(props) {
|
|
162
|
+
const plotRef = inject(PlotKey);
|
|
163
|
+
if (!plotRef) throw new Error("<YAxis> must be used inside <Plot>");
|
|
164
|
+
onMounted(() => {
|
|
165
|
+
plotRef.value?.addYAxis(props.id, { side: props.side, color: props.color, title: props.title, domain: props.domain, type: props.type });
|
|
166
|
+
});
|
|
167
|
+
return () => null;
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
export {
|
|
171
|
+
Area,
|
|
172
|
+
Bar,
|
|
173
|
+
Line,
|
|
174
|
+
Plot,
|
|
175
|
+
Scatter,
|
|
176
|
+
YAxis
|
|
177
|
+
};
|
|
178
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import {\n Plot as CorePlot,\n type AreaOptions,\n type BarOptions,\n type Layer,\n type LineOptions,\n type PlotOptions,\n type ScatterOptions,\n type YAxisOptions,\n} from \"@photonviz/core\";\nimport {\n defineComponent,\n h,\n inject,\n markRaw,\n onMounted,\n onUnmounted,\n provide,\n ref,\n shallowRef,\n watch,\n type InjectionKey,\n type PropType,\n type Ref,\n} from \"vue\";\n\nconst PlotKey: InjectionKey<Ref<CorePlot | null>> = Symbol(\"photon-plot\");\n\nexport const Plot = defineComponent({\n name: \"PhotonPlot\",\n props: {\n options: { type: Object as PropType<PlotOptions>, default: undefined },\n },\n setup(props, { slots }) {\n const el = ref<HTMLDivElement | null>(null);\n const plot = shallowRef<CorePlot | null>(null);\n provide(PlotKey, plot);\n onMounted(() => {\n if (el.value) plot.value = markRaw(new CorePlot(el.value, props.options));\n });\n onUnmounted(() => plot.value?.destroy());\n return () =>\n h(\n \"div\",\n { ref: el, style: \"position:relative;width:100%;height:100%\" },\n plot.value && slots.default ? slots.default() : [],\n );\n },\n});\n\n/** Shared layer lifecycle: add on mount, recreate on structural change, setData on data change. */\nfunction useLayer<L extends Layer>(\n add: (p: CorePlot) => L,\n structural: () => unknown[],\n data: () => unknown[],\n update: (l: L, p: CorePlot) => void,\n): void {\n const plotRef = inject(PlotKey);\n if (!plotRef) throw new Error(\"Photon layer must be used inside <Plot>\");\n let layer: L | null = null;\n const create = () => {\n const p = plotRef.value;\n if (p) layer = markRaw(add(p)) as L;\n };\n const destroy = () => {\n if (layer && plotRef.value) plotRef.value.removeLayer(layer);\n layer = null;\n };\n onMounted(create);\n onUnmounted(destroy);\n watch(structural, () => {\n destroy();\n create();\n });\n watch(data, () => {\n if (layer && plotRef.value) {\n update(layer, plotRef.value);\n plotRef.value.render();\n }\n });\n}\n\nconst arr = () => ({ type: [Array, Object, Float64Array, Float32Array] as unknown as PropType<ArrayLike<number>>, required: true as const });\nconst opt = <T,>() => ({ type: [String, Number, Object, Array, Boolean, Float64Array, Float32Array] as unknown as PropType<T>, default: undefined });\n\nexport const Line = defineComponent({\n name: \"PhotonLine\",\n props: {\n x: arr(), y: arr(),\n color: opt<LineOptions[\"color\"]>(), width: opt<number>(), name: opt<string>(),\n yAxis: opt<string>(), step: opt<LineOptions[\"step\"]>(), join: opt<LineOptions[\"join\"]>(),\n decimate: opt<boolean>(),\n },\n setup(props) {\n useLayer(\n (p) => p.addLine({ x: props.x, y: props.y, color: props.color, width: props.width, name: props.name, yAxis: props.yAxis, step: props.step, join: props.join, decimate: props.decimate }),\n () => [props.color, props.width, props.name, props.yAxis, props.step, props.join, props.decimate],\n () => [props.x, props.y],\n (l) => l.setData(props.x, props.y),\n );\n return () => null;\n },\n});\n\nexport const Scatter = defineComponent({\n name: \"PhotonScatter\",\n props: {\n x: arr(), y: arr(),\n color: opt<ScatterOptions[\"color\"]>(), size: opt<number>(), name: opt<string>(),\n yAxis: opt<string>(), colorBy: opt<ScatterOptions[\"colorBy\"]>(),\n },\n setup(props) {\n useLayer(\n (p) => p.addScatter({ x: props.x, y: props.y, color: props.color, size: props.size, name: props.name, yAxis: props.yAxis, colorBy: props.colorBy }),\n () => [props.color, props.size, props.name, props.yAxis, props.colorBy],\n () => [props.x, props.y],\n (l) => l.setData(props.x, props.y),\n );\n return () => null;\n },\n});\n\nexport const Bar = defineComponent({\n name: \"PhotonBar\",\n props: {\n x: arr(), y: arr(),\n base: opt<BarOptions[\"base\"]>(), width: opt<number>(), offset: opt<number>(),\n color: opt<BarOptions[\"color\"]>(), name: opt<string>(), yAxis: opt<string>(),\n },\n setup(props) {\n useLayer(\n (p) => p.addBar({ x: props.x, y: props.y, base: props.base, width: props.width, offset: props.offset, color: props.color, name: props.name, yAxis: props.yAxis }),\n () => [props.width, props.offset, props.color, props.name, props.yAxis],\n () => [props.x, props.y, props.base],\n (l) => l.setData(props.x, props.y, props.base),\n );\n return () => null;\n },\n});\n\nexport const Area = defineComponent({\n name: \"PhotonArea\",\n props: {\n x: arr(), y: arr(),\n base: opt<AreaOptions[\"base\"]>(), color: opt<AreaOptions[\"color\"]>(),\n name: opt<string>(), yAxis: opt<string>(),\n },\n setup(props) {\n useLayer(\n (p) => p.addArea({ x: props.x, y: props.y, base: props.base, color: props.color, name: props.name, yAxis: props.yAxis }),\n () => [props.color, props.name, props.yAxis],\n () => [props.x, props.y, props.base],\n (l) => l.setData(props.x, props.y, props.base),\n );\n return () => null;\n },\n});\n\nexport const YAxis = defineComponent({\n name: \"PhotonYAxis\",\n props: {\n id: { type: String, required: true },\n side: opt<YAxisOptions[\"side\"]>(),\n color: opt<string>(),\n title: opt<string>(),\n domain: opt<YAxisOptions[\"domain\"]>(),\n type: opt<YAxisOptions[\"type\"]>(),\n },\n setup(props) {\n const plotRef = inject(PlotKey);\n if (!plotRef) throw new Error(\"<YAxis> must be used inside <Plot>\");\n onMounted(() => {\n plotRef.value?.addYAxis(props.id, { side: props.side, color: props.color, title: props.title, domain: props.domain, type: props.type });\n });\n return () => null;\n },\n});\n"],"mappings":"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","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@photonviz/vue",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Vue bindings for Photon — WebGL2 scientific plotting",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"sideEffects": false,
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@photonviz/core": "0.1.0"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"vue": ">=3.3"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"vue": "^3.5.13"
|
|
27
|
+
},
|
|
28
|
+
"keywords": [
|
|
29
|
+
"vue",
|
|
30
|
+
"webgl2",
|
|
31
|
+
"plot",
|
|
32
|
+
"chart",
|
|
33
|
+
"photon",
|
|
34
|
+
"visualization"
|
|
35
|
+
],
|
|
36
|
+
"repository": {
|
|
37
|
+
"type": "git",
|
|
38
|
+
"url": "git+https://github.com/coredumpdev/photon.git",
|
|
39
|
+
"directory": "packages/vue"
|
|
40
|
+
},
|
|
41
|
+
"homepage": "https://github.com/coredumpdev/photon#readme",
|
|
42
|
+
"license": "MIT",
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "tsup",
|
|
45
|
+
"dev": "tsup --watch",
|
|
46
|
+
"typecheck": "tsc --noEmit"
|
|
47
|
+
}
|
|
48
|
+
}
|