@xyo-network/react-price-forecast-plugin 2.78.9 → 2.79.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/dist/browser/components/DetailsBox.d.cts +1 -0
- package/dist/browser/components/DetailsBox.d.cts.map +1 -1
- package/dist/browser/components/DetailsBox.d.mts +1 -0
- package/dist/browser/components/DetailsBox.d.mts.map +1 -1
- package/dist/browser/components/DetailsBox.d.ts +1 -0
- package/dist/browser/components/DetailsBox.d.ts.map +1 -1
- package/dist/browser/components/index.d.cts +1 -1
- package/dist/browser/components/index.d.cts.map +1 -1
- package/dist/browser/components/index.d.mts +1 -1
- package/dist/browser/components/index.d.mts.map +1 -1
- package/dist/browser/components/index.d.ts +1 -1
- package/dist/browser/components/index.d.ts.map +1 -1
- package/dist/browser/index.cjs +107 -42
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.d.cts +2 -2
- package/dist/browser/index.d.mts +2 -2
- package/dist/browser/index.d.ts +2 -2
- package/dist/browser/{index.js → index.mjs} +101 -54
- package/dist/browser/index.mjs.map +1 -0
- package/dist/browser/lib/ForecastLineChartConfigBuilder.d.cts.map +1 -1
- package/dist/browser/lib/ForecastLineChartConfigBuilder.d.mts.map +1 -1
- package/dist/browser/lib/ForecastLineChartConfigBuilder.d.ts.map +1 -1
- package/dist/browser/lib/index.d.cts +3 -3
- package/dist/browser/lib/index.d.mts +3 -3
- package/dist/browser/lib/index.d.ts +3 -3
- package/dist/neutral/components/DetailsBox.d.cts +1 -0
- package/dist/neutral/components/DetailsBox.d.cts.map +1 -1
- package/dist/neutral/components/DetailsBox.d.mts +1 -0
- package/dist/neutral/components/DetailsBox.d.mts.map +1 -1
- package/dist/neutral/components/DetailsBox.d.ts +1 -0
- package/dist/neutral/components/DetailsBox.d.ts.map +1 -1
- package/dist/neutral/components/index.d.cts +1 -1
- package/dist/neutral/components/index.d.cts.map +1 -1
- package/dist/neutral/components/index.d.mts +1 -1
- package/dist/neutral/components/index.d.mts.map +1 -1
- package/dist/neutral/components/index.d.ts +1 -1
- package/dist/neutral/components/index.d.ts.map +1 -1
- package/dist/neutral/index.cjs +107 -42
- package/dist/neutral/index.cjs.map +1 -1
- package/dist/neutral/index.d.cts +2 -2
- package/dist/neutral/index.d.mts +2 -2
- package/dist/neutral/index.d.ts +2 -2
- package/dist/neutral/{index.js → index.mjs} +101 -54
- package/dist/neutral/index.mjs.map +1 -0
- package/dist/neutral/lib/ForecastLineChartConfigBuilder.d.cts.map +1 -1
- package/dist/neutral/lib/ForecastLineChartConfigBuilder.d.mts.map +1 -1
- package/dist/neutral/lib/ForecastLineChartConfigBuilder.d.ts.map +1 -1
- package/dist/neutral/lib/index.d.cts +3 -3
- package/dist/neutral/lib/index.d.mts +3 -3
- package/dist/neutral/lib/index.d.ts +3 -3
- package/dist/node/components/DetailsBox.d.cts +1 -0
- package/dist/node/components/DetailsBox.d.cts.map +1 -1
- package/dist/node/components/DetailsBox.d.mts +1 -0
- package/dist/node/components/DetailsBox.d.mts.map +1 -1
- package/dist/node/components/DetailsBox.d.ts +1 -0
- package/dist/node/components/DetailsBox.d.ts.map +1 -1
- package/dist/node/components/index.d.cts +1 -1
- package/dist/node/components/index.d.cts.map +1 -1
- package/dist/node/components/index.d.mts +1 -1
- package/dist/node/components/index.d.mts.map +1 -1
- package/dist/node/components/index.d.ts +1 -1
- package/dist/node/components/index.d.ts.map +1 -1
- package/dist/node/index.cjs +107 -44
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.d.cts +2 -2
- package/dist/node/index.d.mts +2 -2
- package/dist/node/index.d.ts +2 -2
- package/dist/node/{index.js → index.mjs} +101 -56
- package/dist/node/index.mjs.map +1 -0
- package/dist/node/lib/ForecastLineChartConfigBuilder.d.cts.map +1 -1
- package/dist/node/lib/ForecastLineChartConfigBuilder.d.mts.map +1 -1
- package/dist/node/lib/ForecastLineChartConfigBuilder.d.ts.map +1 -1
- package/dist/node/lib/index.d.cts +3 -3
- package/dist/node/lib/index.d.mts +3 -3
- package/dist/node/lib/index.d.ts +3 -3
- package/package.json +14 -14
- package/src/Plugin.ts +1 -1
- package/src/components/DetailsBox.stories.tsx +10 -7
- package/src/components/DetailsBox.tsx +6 -6
- package/src/components/index.ts +1 -1
- package/src/index.ts +2 -2
- package/src/lib/ForecastLineChartConfigBuilder.ts +5 -4
- package/src/lib/SourcePayloads.ts +1 -1
- package/src/lib/index.ts +3 -3
- package/dist/browser/index.js.map +0 -1
- package/dist/neutral/index.js.map +0 -1
- package/dist/node/index.js.map +0 -1
package/dist/neutral/index.cjs
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
6
9
|
var __export = (target, all) => {
|
|
7
10
|
for (var name in all)
|
|
8
11
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
18
|
}
|
|
16
19
|
return to;
|
|
17
20
|
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
18
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
30
|
|
|
20
31
|
// src/index.ts
|
|
@@ -31,52 +42,77 @@ var import_material2 = require("@mui/material");
|
|
|
31
42
|
var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
32
43
|
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
33
44
|
var import_chart = require("chart.js");
|
|
34
|
-
var import_react = require("react");
|
|
45
|
+
var import_react = __toESM(require("react"), 1);
|
|
35
46
|
var import_react_chartjs_2 = require("react-chartjs-2");
|
|
36
47
|
|
|
37
48
|
// src/lib/DataLineStyles.ts
|
|
38
49
|
var import_material = require("@mui/material");
|
|
39
|
-
var DataLineStyles = (color) => ({
|
|
50
|
+
var DataLineStyles = /* @__PURE__ */ __name((color) => ({
|
|
40
51
|
backgroundColor: color ? (0, import_material.alpha)(color, 0.5) : void 0,
|
|
41
52
|
borderColor: color
|
|
42
|
-
});
|
|
53
|
+
}), "DataLineStyles");
|
|
43
54
|
|
|
44
55
|
// src/lib/DataPointStyles.ts
|
|
45
|
-
var DataPointStyles = (pointHoverBackgroundColor) => ({
|
|
56
|
+
var DataPointStyles = /* @__PURE__ */ __name((pointHoverBackgroundColor) => ({
|
|
46
57
|
pointHitRadius: 20,
|
|
47
58
|
pointHoverBackgroundColor,
|
|
48
59
|
pointHoverRadius: 10,
|
|
49
60
|
pointRadius: 5,
|
|
50
61
|
pointStyle: "circle"
|
|
51
|
-
});
|
|
62
|
+
}), "DataPointStyles");
|
|
52
63
|
|
|
53
64
|
// src/lib/MockSourcePayloads.ts
|
|
54
|
-
var MockSourcePayloads = () => {
|
|
65
|
+
var MockSourcePayloads = /* @__PURE__ */ __name(() => {
|
|
55
66
|
const tenMin = 6e5;
|
|
56
67
|
return [
|
|
57
68
|
{
|
|
58
69
|
baseFee: 38.90155387825,
|
|
59
|
-
feePerGas: {
|
|
60
|
-
|
|
70
|
+
feePerGas: {
|
|
71
|
+
high: 47.9945864396,
|
|
72
|
+
low: 39.006868093,
|
|
73
|
+
medium: 39.306868093,
|
|
74
|
+
veryHigh: 44.45384380525
|
|
75
|
+
},
|
|
76
|
+
priorityFeePerGas: {
|
|
77
|
+
high: 1.0266666666666666,
|
|
78
|
+
low: -0.41000000000000003,
|
|
79
|
+
medium: 0.38,
|
|
80
|
+
veryHigh: 1.3900000000000001
|
|
81
|
+
},
|
|
61
82
|
schema: "network.xyo.blockchain.ethereum.gas",
|
|
62
83
|
timestamp: Date.now() - tenMin
|
|
63
84
|
},
|
|
64
85
|
{
|
|
65
86
|
baseFee: 38.90155387825,
|
|
66
|
-
feePerGas: {
|
|
67
|
-
|
|
87
|
+
feePerGas: {
|
|
88
|
+
high: 47.9945864396,
|
|
89
|
+
low: 39.006868093,
|
|
90
|
+
medium: 100,
|
|
91
|
+
veryHigh: 44.45384380525
|
|
92
|
+
},
|
|
93
|
+
priorityFeePerGas: {
|
|
94
|
+
high: 1.0266666666666666,
|
|
95
|
+
low: -0.41000000000000003,
|
|
96
|
+
medium: 0.38,
|
|
97
|
+
veryHigh: 1.3900000000000001
|
|
98
|
+
},
|
|
68
99
|
schema: "network.xyo.blockchain.ethereum.gas",
|
|
69
100
|
timestamp: Date.now()
|
|
70
101
|
}
|
|
71
102
|
];
|
|
72
|
-
};
|
|
103
|
+
}, "MockSourcePayloads");
|
|
73
104
|
|
|
74
105
|
// src/lib/SourcePayloads.ts
|
|
75
106
|
var SourcePayloads = class {
|
|
107
|
+
static {
|
|
108
|
+
__name(this, "SourcePayloads");
|
|
109
|
+
}
|
|
110
|
+
sourcePayloads;
|
|
111
|
+
sourcePrices;
|
|
76
112
|
constructor(sourcePayloads) {
|
|
77
113
|
this.sourcePayloads = sourcePayloads;
|
|
114
|
+
this.sourcePrices = [];
|
|
78
115
|
}
|
|
79
|
-
sourcePrices = [];
|
|
80
116
|
get payloads() {
|
|
81
117
|
return this.sourcePayloads;
|
|
82
118
|
}
|
|
@@ -85,7 +121,10 @@ var SourcePayloads = class {
|
|
|
85
121
|
const instance = new this(sourcePayloads);
|
|
86
122
|
const paths = jsonPath.split(".");
|
|
87
123
|
instance.sourcePrices = sourcePayloads.map((payload) => {
|
|
88
|
-
return {
|
|
124
|
+
return {
|
|
125
|
+
x: payload.timestamp,
|
|
126
|
+
y: instance.jsonPathTraverser(payload, paths)
|
|
127
|
+
};
|
|
89
128
|
});
|
|
90
129
|
return instance;
|
|
91
130
|
}
|
|
@@ -110,24 +149,30 @@ var SourcePayloads = class {
|
|
|
110
149
|
};
|
|
111
150
|
|
|
112
151
|
// src/lib/ForecastLineChartConfigBuilder.ts
|
|
113
|
-
var defaultOptions = () => ({
|
|
152
|
+
var defaultOptions = /* @__PURE__ */ __name(() => ({
|
|
114
153
|
plugins: {
|
|
115
154
|
legend: {
|
|
116
155
|
position: "top"
|
|
117
156
|
}
|
|
118
157
|
},
|
|
119
158
|
responsive: true
|
|
120
|
-
});
|
|
159
|
+
}), "defaultOptions");
|
|
121
160
|
var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
161
|
+
static {
|
|
162
|
+
__name(this, "ForecastLineChartConfigBuilder");
|
|
163
|
+
}
|
|
164
|
+
payload;
|
|
165
|
+
data;
|
|
166
|
+
options;
|
|
167
|
+
themeColors;
|
|
122
168
|
constructor(theme, payload) {
|
|
123
169
|
this.payload = payload;
|
|
170
|
+
this.data = {
|
|
171
|
+
datasets: []
|
|
172
|
+
};
|
|
173
|
+
this.options = defaultOptions();
|
|
124
174
|
this.themeColors = this.parseTheme(theme);
|
|
125
175
|
}
|
|
126
|
-
data = {
|
|
127
|
-
datasets: []
|
|
128
|
-
};
|
|
129
|
-
options = defaultOptions();
|
|
130
|
-
themeColors;
|
|
131
176
|
get forecastPayload() {
|
|
132
177
|
if (this.payload) {
|
|
133
178
|
return this.payload;
|
|
@@ -148,7 +193,9 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
148
193
|
}
|
|
149
194
|
async buildData(includeSources) {
|
|
150
195
|
const forecastData = this.generateDataSetForecastData();
|
|
151
|
-
const datasets = [
|
|
196
|
+
const datasets = [
|
|
197
|
+
forecastData
|
|
198
|
+
];
|
|
152
199
|
if (includeSources) {
|
|
153
200
|
const sourceData = await this.generateDataSetSourcePayloads();
|
|
154
201
|
datasets.unshift(sourceData);
|
|
@@ -169,8 +216,12 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
169
216
|
return this;
|
|
170
217
|
}
|
|
171
218
|
refreshValues() {
|
|
172
|
-
this.data = {
|
|
173
|
-
|
|
219
|
+
this.data = {
|
|
220
|
+
...this.data
|
|
221
|
+
};
|
|
222
|
+
this.options = {
|
|
223
|
+
...this.options
|
|
224
|
+
};
|
|
174
225
|
}
|
|
175
226
|
generateLegend() {
|
|
176
227
|
return {
|
|
@@ -214,9 +265,14 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
214
265
|
}
|
|
215
266
|
generateDataSetForecastData() {
|
|
216
267
|
return {
|
|
217
|
-
borderDash: [
|
|
268
|
+
borderDash: [
|
|
269
|
+
5
|
|
270
|
+
],
|
|
218
271
|
borderDashOffset: 0.5,
|
|
219
|
-
data: this.forecastPayload.values.map((price) => ({
|
|
272
|
+
data: this.forecastPayload.values.map((price) => ({
|
|
273
|
+
x: price.timestamp ?? 0,
|
|
274
|
+
y: price.value
|
|
275
|
+
})),
|
|
220
276
|
label: "Forecast Price",
|
|
221
277
|
...DataPointStyles(this.themeColors?.dataSetColorPrimary),
|
|
222
278
|
...DataLineStyles(this.themeColors?.dataSetColorPrimary)
|
|
@@ -234,32 +290,41 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
234
290
|
};
|
|
235
291
|
|
|
236
292
|
// src/components/DetailsBox.tsx
|
|
237
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
238
293
|
import_chart.Chart.register(import_chart.CategoryScale, import_chart.TimeScale, import_chart.PointElement, import_chart.LineElement, import_chart.LinearScale, import_chart.Title, import_chart.Tooltip, import_chart.Legend);
|
|
239
|
-
var PriceForecastDetailsBox = ({ payload, ...props }) => {
|
|
294
|
+
var PriceForecastDetailsBox = /* @__PURE__ */ __name(({ payload, ...props }) => {
|
|
240
295
|
const priceForecastPayload = payload;
|
|
241
296
|
const theme = (0, import_material2.useTheme)();
|
|
242
|
-
const [data, setData] = (0, import_react.useState)({
|
|
297
|
+
const [data, setData] = (0, import_react.useState)({
|
|
298
|
+
datasets: []
|
|
299
|
+
});
|
|
243
300
|
const [options, setOptions] = (0, import_react.useState)({});
|
|
244
|
-
(0, import_react_async_effect.useAsyncEffect)(
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
301
|
+
(0, import_react_async_effect.useAsyncEffect)(async (mounted) => {
|
|
302
|
+
const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, {
|
|
303
|
+
fetch: true
|
|
304
|
+
});
|
|
305
|
+
if (mounted()) {
|
|
306
|
+
setData(data2);
|
|
307
|
+
setOptions(options2);
|
|
308
|
+
}
|
|
309
|
+
}, [
|
|
310
|
+
priceForecastPayload,
|
|
311
|
+
theme
|
|
312
|
+
]);
|
|
313
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexCol, {
|
|
314
|
+
...props,
|
|
315
|
+
busy: priceForecastPayload === void 0,
|
|
316
|
+
minHeight: "25vh"
|
|
317
|
+
}, priceForecastPayload ? /* @__PURE__ */ import_react.default.createElement(import_react_chartjs_2.Line, {
|
|
318
|
+
options,
|
|
319
|
+
data
|
|
320
|
+
}) : null);
|
|
321
|
+
}, "PriceForecastDetailsBox");
|
|
257
322
|
|
|
258
323
|
// src/Plugin.ts
|
|
259
324
|
var import_react_payload_plugin = require("@xyo-network/react-payload-plugin");
|
|
260
325
|
var PriceForecastRenderPlugin = {
|
|
261
326
|
...(0, import_react_payload_plugin.createPayloadRenderPlugin)({
|
|
262
|
-
canRender: () => true,
|
|
327
|
+
canRender: /* @__PURE__ */ __name(() => true, "canRender"),
|
|
263
328
|
components: {
|
|
264
329
|
box: {
|
|
265
330
|
detailsBox: PriceForecastDetailsBox
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts","../../src/components/DetailsBox.tsx","../../src/lib/DataLineStyles.ts","../../src/lib/DataPointStyles.ts","../../src/lib/MockSourcePayloads.ts","../../src/lib/SourcePayloads.ts","../../src/lib/ForecastLineChartConfigBuilder.ts","../../src/Plugin.ts"],"sourcesContent":["export * from './components/index.js'\nexport * from './Plugin.js'\n","import 'chartjs-adapter-luxon'\n\nimport { useTheme } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\nimport { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport { Payload } from '@xyo-network/payload-model'\nimport {\n CategoryScale,\n Chart as ChartJS,\n ChartData,\n ChartOptions,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n TimeScale,\n Title,\n Tooltip,\n} from 'chart.js'\nimport { useState } from 'react'\nimport { Line } from 'react-chartjs-2'\n\nimport { ForecastLineChartConfigBuilder } from '../lib/index.js'\n\nChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend)\n\nexport interface PriceForecastDetailsBoxProps extends FlexBoxProps {\n payload?: Payload\n}\n\nexport const PriceForecastDetailsBox: React.FC<PriceForecastDetailsBoxProps> = ({ payload, ...props }) => {\n const priceForecastPayload = payload as ForecastPayload | undefined\n const theme = useTheme()\n const [data, setData] = useState<ChartData<'line'>>({ datasets: [] })\n const [options, setOptions] = useState<ChartOptions<'line'>>({})\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async (mounted) => {\n const { data, options } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true })\n if (mounted()) {\n setData(data)\n setOptions(options)\n }\n },\n [priceForecastPayload, theme],\n )\n\n return (\n <FlexCol {...props} busy={priceForecastPayload === undefined} minHeight=\"25vh\">\n {priceForecastPayload ?\n <Line options={options} data={data} />\n : null}\n </FlexCol>\n )\n}\n","import { alpha } from '@mui/material'\n\nexport const DataLineStyles = (color?: string) => ({\n backgroundColor: color ? alpha(color, 0.5) : undefined,\n borderColor: color,\n})\n","export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({\n pointHitRadius: 20,\n pointHoverBackgroundColor,\n pointHoverRadius: 10,\n pointRadius: 5,\n pointStyle: 'circle',\n})\n","export const MockSourcePayloads = () => {\n const tenMin = 600_000\n return [\n {\n baseFee: 38.901_553_878_25,\n feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25 },\n priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n schema: 'network.xyo.blockchain.ethereum.gas',\n timestamp: Date.now() - tenMin,\n },\n {\n baseFee: 38.901_553_878_25,\n feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25 },\n priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n schema: 'network.xyo.blockchain.ethereum.gas',\n timestamp: Date.now(),\n },\n ]\n}\n","import { Payload } from '@xyo-network/payload-model'\nimport { Point } from 'chart.js'\n\nimport { MockSourcePayloads } from './MockSourcePayloads.js'\n\nexport class SourcePayloads {\n sourcePrices: Point[] = []\n\n constructor(public sourcePayloads: Payload[]) {}\n\n get payloads() {\n return this.sourcePayloads\n }\n\n static async build(jsonPath: string) {\n const sourcePayloads = await this.fetchSourcePayloads()\n const instance = new this(sourcePayloads)\n\n const paths = jsonPath.split('.')\n instance.sourcePrices = sourcePayloads.map((payload) => {\n return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) }\n })\n return instance\n }\n\n // TODO - fetch from archivist\n static async fetchSourcePayloads() {\n const payloads = await Promise.resolve(MockSourcePayloads())\n return payloads\n }\n\n jsonPathTraverser(obj: Payload, path: string[]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let result: any = obj\n for (const key of path) {\n if (key in result) {\n const foundKey = key as keyof typeof result\n result = result[foundKey]\n } else {\n result = undefined\n break\n }\n }\n\n return result\n }\n}\n","import { Theme } from '@mui/material'\nimport { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport { ChartData, ChartDataset, ChartOptions, LegendOptions, Point, ScaleChartOptions } from 'chart.js'\n\nimport { DataLineStyles } from './DataLineStyles.js'\nimport { DataPointStyles } from './DataPointStyles.js'\nimport { SourcePayloads } from './SourcePayloads.js'\n\ninterface SourcePayloadConfig {\n fetch: boolean\n sampleSize?: number\n}\n\ninterface ThemeColors {\n dataSetColorPrimary: string\n dataSetColorSecondary: string\n gridColor: string\n}\n\nconst defaultOptions: () => ChartOptions<'line'> = () => ({\n plugins: {\n legend: {\n position: 'top' as const,\n },\n },\n responsive: true,\n})\n\nexport class ForecastLineChartConfigBuilder {\n data: ChartData<'line'> = {\n datasets: [],\n }\n options: ChartOptions<'line'> = defaultOptions()\n themeColors: ThemeColors | undefined\n\n constructor(\n theme: Theme,\n private payload?: ForecastPayload,\n ) {\n this.themeColors = this.parseTheme(theme)\n }\n\n get forecastPayload() {\n if (this.payload) {\n return this.payload\n } else {\n throw new Error('ForecastPayload was not defined')\n }\n }\n\n static async create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig) {\n const instance = new ForecastLineChartConfigBuilder(theme, payload)\n\n await instance.build(sourcePayloadConfig?.fetch)\n\n instance.refreshValues()\n\n return instance\n }\n\n async build(includeSources?: boolean) {\n this.buildOptions()\n await this.buildData(includeSources)\n return this\n }\n\n async buildData(includeSources?: boolean) {\n const forecastData = this.generateDataSetForecastData()\n\n const datasets: ChartDataset<'line'>[] = [forecastData]\n\n if (includeSources) {\n // build data from sources in forecastPayload\n const sourceData = await this.generateDataSetSourcePayloads()\n datasets.unshift(sourceData)\n\n // add last source point as first item in prediction to connect the lines\n const lastSourceDataItem = sourceData.data.at(-1) as Point\n forecastData.data.unshift(lastSourceDataItem)\n }\n\n this.data = {\n datasets,\n }\n\n return this\n }\n\n buildOptions() {\n if (this.options.plugins) {\n this.options.plugins.title = this.generateTitle()\n this.options.plugins.legend = this.generateLegend()\n }\n this.options.scales = this.generateScales()\n\n return this\n }\n\n refreshValues() {\n this.data = { ...this.data }\n this.options = { ...this.options }\n }\n\n protected generateLegend() {\n return {\n labels: {\n pointStyle: 'circle',\n usePointStyle: true,\n },\n } as LegendOptions<'line'>\n }\n\n protected generateScales() {\n return {\n x: {\n grid: {\n color: this.themeColors?.gridColor,\n },\n time: {\n unit: 'minute',\n },\n type: 'time',\n },\n y: {\n grid: {\n color: this.themeColors?.gridColor,\n },\n },\n } as unknown as ScaleChartOptions<'line'>['scales']\n }\n\n protected generateTitle() {\n return {\n display: true,\n text: `Gas Price Forecaster (GWEI over time from ${\n this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ''\n })`,\n }\n }\n\n protected parseTheme(theme: Theme) {\n const dark = theme.palette.mode === 'dark'\n return {\n dataSetColorPrimary: theme.palette.primary.light,\n dataSetColorSecondary: theme.palette.secondary.light,\n gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300],\n }\n }\n\n private generateDataSetForecastData(): ChartDataset<'line'> {\n return {\n borderDash: [5],\n borderDashOffset: 0.5,\n data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),\n label: 'Forecast Price',\n ...DataPointStyles(this.themeColors?.dataSetColorPrimary),\n ...DataLineStyles(this.themeColors?.dataSetColorPrimary),\n }\n }\n\n private async generateDataSetSourcePayloads(): Promise<ChartDataset<'line'>> {\n const { sourcePrices } = await SourcePayloads.build('feePerGas.medium')\n return {\n data: sourcePrices,\n label: 'Source Prices',\n ...DataLineStyles(this.themeColors?.dataSetColorSecondary),\n ...DataPointStyles(this.themeColors?.dataSetColorSecondary),\n }\n }\n}\n","import { createPayloadRenderPlugin, PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\n\nimport { PriceForecastDetailsBox } from './components/index.js'\n\nexport const PriceForecastRenderPlugin: PayloadRenderPlugin = {\n ...createPayloadRenderPlugin({\n canRender: () => true,\n components: {\n box: {\n detailsBox: PriceForecastDetailsBox,\n },\n },\n name: 'PriceForecast',\n }),\n}\n"],"mappings":"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","names":["import_material","ChartJS","data","options"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/DetailsBox.tsx","../../src/lib/DataLineStyles.ts","../../src/lib/DataPointStyles.ts","../../src/lib/MockSourcePayloads.ts","../../src/lib/SourcePayloads.ts","../../src/lib/ForecastLineChartConfigBuilder.ts","../../src/Plugin.ts"],"sourcesContent":["export * from './components/index.ts'\nexport * from './Plugin.ts'\n","import 'chartjs-adapter-luxon'\n\nimport { useTheme } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'\nimport { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport { Payload } from '@xyo-network/payload-model'\nimport {\n CategoryScale,\n Chart as ChartJS,\n ChartData,\n ChartOptions,\n Legend,\n LinearScale,\n LineElement,\n PointElement,\n TimeScale,\n Title,\n Tooltip,\n} from 'chart.js'\nimport React, { useState } from 'react'\nimport { Line } from 'react-chartjs-2'\n\nimport { ForecastLineChartConfigBuilder } from '../lib/index.ts'\n\nChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend)\n\nexport interface PriceForecastDetailsBoxProps extends FlexBoxProps {\n payload?: Payload\n}\n\nexport const PriceForecastDetailsBox: React.FC<PriceForecastDetailsBoxProps> = ({ payload, ...props }) => {\n const priceForecastPayload = payload as ForecastPayload | undefined\n const theme = useTheme()\n const [data, setData] = useState<ChartData<'line'>>({ datasets: [] })\n const [options, setOptions] = useState<ChartOptions<'line'>>({})\n\n useAsyncEffect(\n\n async (mounted) => {\n const { data, options } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true })\n if (mounted()) {\n setData(data)\n setOptions(options)\n }\n },\n [priceForecastPayload, theme],\n )\n\n return (\n <FlexCol {...props} busy={priceForecastPayload === undefined} minHeight=\"25vh\">\n {priceForecastPayload\n ? <Line options={options} data={data} />\n : null}\n </FlexCol>\n )\n}\n","import { alpha } from '@mui/material'\n\nexport const DataLineStyles = (color?: string) => ({\n backgroundColor: color ? alpha(color, 0.5) : undefined,\n borderColor: color,\n})\n","export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({\n pointHitRadius: 20,\n pointHoverBackgroundColor,\n pointHoverRadius: 10,\n pointRadius: 5,\n pointStyle: 'circle',\n})\n","export const MockSourcePayloads = () => {\n const tenMin = 600_000\n return [\n {\n baseFee: 38.901_553_878_25,\n feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25 },\n priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n schema: 'network.xyo.blockchain.ethereum.gas',\n timestamp: Date.now() - tenMin,\n },\n {\n baseFee: 38.901_553_878_25,\n feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25 },\n priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n schema: 'network.xyo.blockchain.ethereum.gas',\n timestamp: Date.now(),\n },\n ]\n}\n","import { Payload } from '@xyo-network/payload-model'\nimport { Point } from 'chart.js'\n\nimport { MockSourcePayloads } from './MockSourcePayloads.ts'\n\nexport class SourcePayloads {\n sourcePrices: Point[] = []\n\n constructor(public sourcePayloads: Payload[]) {}\n\n get payloads() {\n return this.sourcePayloads\n }\n\n static async build(jsonPath: string) {\n const sourcePayloads = await this.fetchSourcePayloads()\n const instance = new this(sourcePayloads)\n\n const paths = jsonPath.split('.')\n instance.sourcePrices = sourcePayloads.map((payload) => {\n return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) }\n })\n return instance\n }\n\n // TODO - fetch from archivist\n static async fetchSourcePayloads() {\n const payloads = await Promise.resolve(MockSourcePayloads())\n return payloads\n }\n\n jsonPathTraverser(obj: Payload, path: string[]) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n let result: any = obj\n for (const key of path) {\n if (key in result) {\n const foundKey = key as keyof typeof result\n result = result[foundKey]\n } else {\n result = undefined\n break\n }\n }\n\n return result\n }\n}\n","import { Theme } from '@mui/material'\nimport { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport { ChartData, ChartDataset, ChartOptions, LegendOptions, Point, ScaleChartOptions } from 'chart.js'\n\nimport { DataLineStyles } from './DataLineStyles.ts'\nimport { DataPointStyles } from './DataPointStyles.ts'\nimport { SourcePayloads } from './SourcePayloads.ts'\n\ninterface SourcePayloadConfig {\n fetch: boolean\n sampleSize?: number\n}\n\ninterface ThemeColors {\n dataSetColorPrimary: string\n dataSetColorSecondary: string\n gridColor: string\n}\n\nconst defaultOptions: () => ChartOptions<'line'> = () => ({\n plugins: {\n legend: {\n position: 'top' as const,\n },\n },\n responsive: true,\n})\n\nexport class ForecastLineChartConfigBuilder {\n data: ChartData<'line'> = {\n datasets: [],\n }\n\n options: ChartOptions<'line'> = defaultOptions()\n themeColors: ThemeColors | undefined\n\n constructor(\n theme: Theme,\n private payload?: ForecastPayload,\n ) {\n this.themeColors = this.parseTheme(theme)\n }\n\n get forecastPayload() {\n if (this.payload) {\n return this.payload\n } else {\n throw new Error('ForecastPayload was not defined')\n }\n }\n\n static async create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig) {\n const instance = new ForecastLineChartConfigBuilder(theme, payload)\n\n await instance.build(sourcePayloadConfig?.fetch)\n\n instance.refreshValues()\n\n return instance\n }\n\n async build(includeSources?: boolean) {\n this.buildOptions()\n await this.buildData(includeSources)\n return this\n }\n\n async buildData(includeSources?: boolean) {\n const forecastData = this.generateDataSetForecastData()\n\n const datasets: ChartDataset<'line'>[] = [forecastData]\n\n if (includeSources) {\n // build data from sources in forecastPayload\n const sourceData = await this.generateDataSetSourcePayloads()\n datasets.unshift(sourceData)\n\n // add last source point as first item in prediction to connect the lines\n const lastSourceDataItem = sourceData.data.at(-1) as Point\n forecastData.data.unshift(lastSourceDataItem)\n }\n\n this.data = {\n datasets,\n }\n\n return this\n }\n\n buildOptions() {\n if (this.options.plugins) {\n this.options.plugins.title = this.generateTitle()\n this.options.plugins.legend = this.generateLegend()\n }\n this.options.scales = this.generateScales()\n\n return this\n }\n\n refreshValues() {\n this.data = { ...this.data }\n this.options = { ...this.options }\n }\n\n protected generateLegend() {\n return {\n labels: {\n pointStyle: 'circle',\n usePointStyle: true,\n },\n } as LegendOptions<'line'>\n }\n\n protected generateScales() {\n return {\n x: {\n grid: {\n color: this.themeColors?.gridColor,\n },\n time: {\n unit: 'minute',\n },\n type: 'time',\n },\n y: {\n grid: {\n color: this.themeColors?.gridColor,\n },\n },\n } as unknown as ScaleChartOptions<'line'>['scales']\n }\n\n protected generateTitle() {\n return {\n display: true,\n text: `Gas Price Forecaster (GWEI over time from ${\n this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ''\n })`,\n }\n }\n\n protected parseTheme(theme: Theme) {\n const dark = theme.palette.mode === 'dark'\n return {\n dataSetColorPrimary: theme.palette.primary.light,\n dataSetColorSecondary: theme.palette.secondary.light,\n gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300],\n }\n }\n\n private generateDataSetForecastData(): ChartDataset<'line'> {\n return {\n borderDash: [5],\n borderDashOffset: 0.5,\n data: this.forecastPayload.values.map(price => ({ x: price.timestamp ?? 0, y: price.value })),\n label: 'Forecast Price',\n ...DataPointStyles(this.themeColors?.dataSetColorPrimary),\n ...DataLineStyles(this.themeColors?.dataSetColorPrimary),\n }\n }\n\n private async generateDataSetSourcePayloads(): Promise<ChartDataset<'line'>> {\n const { sourcePrices } = await SourcePayloads.build('feePerGas.medium')\n return {\n data: sourcePrices,\n label: 'Source Prices',\n ...DataLineStyles(this.themeColors?.dataSetColorSecondary),\n ...DataPointStyles(this.themeColors?.dataSetColorSecondary),\n }\n }\n}\n","import { createPayloadRenderPlugin, PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\n\nimport { PriceForecastDetailsBox } from './components/index.ts'\n\nexport const PriceForecastRenderPlugin: PayloadRenderPlugin = {\n ...createPayloadRenderPlugin({\n canRender: () => true,\n components: {\n box: {\n detailsBox: PriceForecastDetailsBox,\n },\n },\n name: 'PriceForecast',\n }),\n}\n"],"mappings":"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","names":["import_material","DataLineStyles","color","backgroundColor","alpha","undefined","borderColor","DataPointStyles","pointHoverBackgroundColor","pointHitRadius","pointHoverRadius","pointRadius","pointStyle","MockSourcePayloads","tenMin","baseFee","feePerGas","high","low","medium","veryHigh","priorityFeePerGas","schema","timestamp","Date","now","SourcePayloads","sourcePrices","constructor","sourcePayloads","payloads","build","jsonPath","fetchSourcePayloads","instance","paths","split","map","payload","x","timestamp","y","jsonPathTraverser","Promise","resolve","MockSourcePayloads","obj","path","result","key","foundKey","undefined","defaultOptions","plugins","legend","position","responsive","ForecastLineChartConfigBuilder","data","options","themeColors","constructor","theme","payload","datasets","parseTheme","forecastPayload","Error","create","sourcePayloadConfig","instance","build","fetch","refreshValues","includeSources","buildOptions","buildData","forecastData","generateDataSetForecastData","sourceData","generateDataSetSourcePayloads","unshift","lastSourceDataItem","at","title","generateTitle","generateLegend","scales","generateScales","labels","pointStyle","usePointStyle","x","grid","color","gridColor","time","unit","type","y","display","text","values","timestamp","Date","toLocaleDateString","dark","palette","mode","dataSetColorPrimary","primary","light","dataSetColorSecondary","secondary","grey","borderDash","borderDashOffset","map","price","value","label","DataPointStyles","DataLineStyles","sourcePrices","SourcePayloads","ChartJS","register","CategoryScale","TimeScale","PointElement","LineElement","LinearScale","Title","Tooltip","Legend","PriceForecastDetailsBox","payload","props","priceForecastPayload","theme","useTheme","data","setData","useState","datasets","options","setOptions","useAsyncEffect","mounted","ForecastLineChartConfigBuilder","create","fetch","React","FlexCol","busy","undefined","minHeight","Line","PriceForecastRenderPlugin","createPayloadRenderPlugin","canRender","components","box","detailsBox","PriceForecastDetailsBox","name"]}
|
package/dist/neutral/index.d.cts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './components/index.
|
|
2
|
-
export * from './Plugin.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
|
+
export * from './Plugin.ts';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/neutral/index.d.mts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './components/index.
|
|
2
|
-
export * from './Plugin.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
|
+
export * from './Plugin.ts';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/neutral/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from './components/index.
|
|
2
|
-
export * from './Plugin.
|
|
1
|
+
export * from './components/index.ts';
|
|
2
|
+
export * from './Plugin.ts';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,65 +1,83 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
+
|
|
1
4
|
// src/components/DetailsBox.tsx
|
|
2
5
|
import "chartjs-adapter-luxon";
|
|
3
6
|
import { useTheme } from "@mui/material";
|
|
4
7
|
import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
5
8
|
import { FlexCol } from "@xylabs/react-flexbox";
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
Chart as ChartJS,
|
|
9
|
-
Legend,
|
|
10
|
-
LinearScale,
|
|
11
|
-
LineElement,
|
|
12
|
-
PointElement,
|
|
13
|
-
TimeScale,
|
|
14
|
-
Title,
|
|
15
|
-
Tooltip
|
|
16
|
-
} from "chart.js";
|
|
17
|
-
import { useState } from "react";
|
|
9
|
+
import { CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, TimeScale, Title, Tooltip } from "chart.js";
|
|
10
|
+
import React, { useState } from "react";
|
|
18
11
|
import { Line } from "react-chartjs-2";
|
|
19
12
|
|
|
20
13
|
// src/lib/DataLineStyles.ts
|
|
21
14
|
import { alpha } from "@mui/material";
|
|
22
|
-
var DataLineStyles = (color) => ({
|
|
15
|
+
var DataLineStyles = /* @__PURE__ */ __name((color) => ({
|
|
23
16
|
backgroundColor: color ? alpha(color, 0.5) : void 0,
|
|
24
17
|
borderColor: color
|
|
25
|
-
});
|
|
18
|
+
}), "DataLineStyles");
|
|
26
19
|
|
|
27
20
|
// src/lib/DataPointStyles.ts
|
|
28
|
-
var DataPointStyles = (pointHoverBackgroundColor) => ({
|
|
21
|
+
var DataPointStyles = /* @__PURE__ */ __name((pointHoverBackgroundColor) => ({
|
|
29
22
|
pointHitRadius: 20,
|
|
30
23
|
pointHoverBackgroundColor,
|
|
31
24
|
pointHoverRadius: 10,
|
|
32
25
|
pointRadius: 5,
|
|
33
26
|
pointStyle: "circle"
|
|
34
|
-
});
|
|
27
|
+
}), "DataPointStyles");
|
|
35
28
|
|
|
36
29
|
// src/lib/MockSourcePayloads.ts
|
|
37
|
-
var MockSourcePayloads = () => {
|
|
30
|
+
var MockSourcePayloads = /* @__PURE__ */ __name(() => {
|
|
38
31
|
const tenMin = 6e5;
|
|
39
32
|
return [
|
|
40
33
|
{
|
|
41
34
|
baseFee: 38.90155387825,
|
|
42
|
-
feePerGas: {
|
|
43
|
-
|
|
35
|
+
feePerGas: {
|
|
36
|
+
high: 47.9945864396,
|
|
37
|
+
low: 39.006868093,
|
|
38
|
+
medium: 39.306868093,
|
|
39
|
+
veryHigh: 44.45384380525
|
|
40
|
+
},
|
|
41
|
+
priorityFeePerGas: {
|
|
42
|
+
high: 1.0266666666666666,
|
|
43
|
+
low: -0.41000000000000003,
|
|
44
|
+
medium: 0.38,
|
|
45
|
+
veryHigh: 1.3900000000000001
|
|
46
|
+
},
|
|
44
47
|
schema: "network.xyo.blockchain.ethereum.gas",
|
|
45
48
|
timestamp: Date.now() - tenMin
|
|
46
49
|
},
|
|
47
50
|
{
|
|
48
51
|
baseFee: 38.90155387825,
|
|
49
|
-
feePerGas: {
|
|
50
|
-
|
|
52
|
+
feePerGas: {
|
|
53
|
+
high: 47.9945864396,
|
|
54
|
+
low: 39.006868093,
|
|
55
|
+
medium: 100,
|
|
56
|
+
veryHigh: 44.45384380525
|
|
57
|
+
},
|
|
58
|
+
priorityFeePerGas: {
|
|
59
|
+
high: 1.0266666666666666,
|
|
60
|
+
low: -0.41000000000000003,
|
|
61
|
+
medium: 0.38,
|
|
62
|
+
veryHigh: 1.3900000000000001
|
|
63
|
+
},
|
|
51
64
|
schema: "network.xyo.blockchain.ethereum.gas",
|
|
52
65
|
timestamp: Date.now()
|
|
53
66
|
}
|
|
54
67
|
];
|
|
55
|
-
};
|
|
68
|
+
}, "MockSourcePayloads");
|
|
56
69
|
|
|
57
70
|
// src/lib/SourcePayloads.ts
|
|
58
71
|
var SourcePayloads = class {
|
|
72
|
+
static {
|
|
73
|
+
__name(this, "SourcePayloads");
|
|
74
|
+
}
|
|
75
|
+
sourcePayloads;
|
|
76
|
+
sourcePrices;
|
|
59
77
|
constructor(sourcePayloads) {
|
|
60
78
|
this.sourcePayloads = sourcePayloads;
|
|
79
|
+
this.sourcePrices = [];
|
|
61
80
|
}
|
|
62
|
-
sourcePrices = [];
|
|
63
81
|
get payloads() {
|
|
64
82
|
return this.sourcePayloads;
|
|
65
83
|
}
|
|
@@ -68,7 +86,10 @@ var SourcePayloads = class {
|
|
|
68
86
|
const instance = new this(sourcePayloads);
|
|
69
87
|
const paths = jsonPath.split(".");
|
|
70
88
|
instance.sourcePrices = sourcePayloads.map((payload) => {
|
|
71
|
-
return {
|
|
89
|
+
return {
|
|
90
|
+
x: payload.timestamp,
|
|
91
|
+
y: instance.jsonPathTraverser(payload, paths)
|
|
92
|
+
};
|
|
72
93
|
});
|
|
73
94
|
return instance;
|
|
74
95
|
}
|
|
@@ -93,24 +114,30 @@ var SourcePayloads = class {
|
|
|
93
114
|
};
|
|
94
115
|
|
|
95
116
|
// src/lib/ForecastLineChartConfigBuilder.ts
|
|
96
|
-
var defaultOptions = () => ({
|
|
117
|
+
var defaultOptions = /* @__PURE__ */ __name(() => ({
|
|
97
118
|
plugins: {
|
|
98
119
|
legend: {
|
|
99
120
|
position: "top"
|
|
100
121
|
}
|
|
101
122
|
},
|
|
102
123
|
responsive: true
|
|
103
|
-
});
|
|
124
|
+
}), "defaultOptions");
|
|
104
125
|
var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
126
|
+
static {
|
|
127
|
+
__name(this, "ForecastLineChartConfigBuilder");
|
|
128
|
+
}
|
|
129
|
+
payload;
|
|
130
|
+
data;
|
|
131
|
+
options;
|
|
132
|
+
themeColors;
|
|
105
133
|
constructor(theme, payload) {
|
|
106
134
|
this.payload = payload;
|
|
135
|
+
this.data = {
|
|
136
|
+
datasets: []
|
|
137
|
+
};
|
|
138
|
+
this.options = defaultOptions();
|
|
107
139
|
this.themeColors = this.parseTheme(theme);
|
|
108
140
|
}
|
|
109
|
-
data = {
|
|
110
|
-
datasets: []
|
|
111
|
-
};
|
|
112
|
-
options = defaultOptions();
|
|
113
|
-
themeColors;
|
|
114
141
|
get forecastPayload() {
|
|
115
142
|
if (this.payload) {
|
|
116
143
|
return this.payload;
|
|
@@ -131,7 +158,9 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
131
158
|
}
|
|
132
159
|
async buildData(includeSources) {
|
|
133
160
|
const forecastData = this.generateDataSetForecastData();
|
|
134
|
-
const datasets = [
|
|
161
|
+
const datasets = [
|
|
162
|
+
forecastData
|
|
163
|
+
];
|
|
135
164
|
if (includeSources) {
|
|
136
165
|
const sourceData = await this.generateDataSetSourcePayloads();
|
|
137
166
|
datasets.unshift(sourceData);
|
|
@@ -152,8 +181,12 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
152
181
|
return this;
|
|
153
182
|
}
|
|
154
183
|
refreshValues() {
|
|
155
|
-
this.data = {
|
|
156
|
-
|
|
184
|
+
this.data = {
|
|
185
|
+
...this.data
|
|
186
|
+
};
|
|
187
|
+
this.options = {
|
|
188
|
+
...this.options
|
|
189
|
+
};
|
|
157
190
|
}
|
|
158
191
|
generateLegend() {
|
|
159
192
|
return {
|
|
@@ -197,9 +230,14 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
197
230
|
}
|
|
198
231
|
generateDataSetForecastData() {
|
|
199
232
|
return {
|
|
200
|
-
borderDash: [
|
|
233
|
+
borderDash: [
|
|
234
|
+
5
|
|
235
|
+
],
|
|
201
236
|
borderDashOffset: 0.5,
|
|
202
|
-
data: this.forecastPayload.values.map((price) => ({
|
|
237
|
+
data: this.forecastPayload.values.map((price) => ({
|
|
238
|
+
x: price.timestamp ?? 0,
|
|
239
|
+
y: price.value
|
|
240
|
+
})),
|
|
203
241
|
label: "Forecast Price",
|
|
204
242
|
...DataPointStyles(this.themeColors?.dataSetColorPrimary),
|
|
205
243
|
...DataLineStyles(this.themeColors?.dataSetColorPrimary)
|
|
@@ -217,32 +255,41 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
|
217
255
|
};
|
|
218
256
|
|
|
219
257
|
// src/components/DetailsBox.tsx
|
|
220
|
-
import { jsx } from "react/jsx-runtime";
|
|
221
258
|
ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend);
|
|
222
|
-
var PriceForecastDetailsBox = ({ payload, ...props }) => {
|
|
259
|
+
var PriceForecastDetailsBox = /* @__PURE__ */ __name(({ payload, ...props }) => {
|
|
223
260
|
const priceForecastPayload = payload;
|
|
224
261
|
const theme = useTheme();
|
|
225
|
-
const [data, setData] = useState({
|
|
262
|
+
const [data, setData] = useState({
|
|
263
|
+
datasets: []
|
|
264
|
+
});
|
|
226
265
|
const [options, setOptions] = useState({});
|
|
227
|
-
useAsyncEffect(
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
266
|
+
useAsyncEffect(async (mounted) => {
|
|
267
|
+
const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, {
|
|
268
|
+
fetch: true
|
|
269
|
+
});
|
|
270
|
+
if (mounted()) {
|
|
271
|
+
setData(data2);
|
|
272
|
+
setOptions(options2);
|
|
273
|
+
}
|
|
274
|
+
}, [
|
|
275
|
+
priceForecastPayload,
|
|
276
|
+
theme
|
|
277
|
+
]);
|
|
278
|
+
return /* @__PURE__ */ React.createElement(FlexCol, {
|
|
279
|
+
...props,
|
|
280
|
+
busy: priceForecastPayload === void 0,
|
|
281
|
+
minHeight: "25vh"
|
|
282
|
+
}, priceForecastPayload ? /* @__PURE__ */ React.createElement(Line, {
|
|
283
|
+
options,
|
|
284
|
+
data
|
|
285
|
+
}) : null);
|
|
286
|
+
}, "PriceForecastDetailsBox");
|
|
240
287
|
|
|
241
288
|
// src/Plugin.ts
|
|
242
289
|
import { createPayloadRenderPlugin } from "@xyo-network/react-payload-plugin";
|
|
243
290
|
var PriceForecastRenderPlugin = {
|
|
244
291
|
...createPayloadRenderPlugin({
|
|
245
|
-
canRender: () => true,
|
|
292
|
+
canRender: /* @__PURE__ */ __name(() => true, "canRender"),
|
|
246
293
|
components: {
|
|
247
294
|
box: {
|
|
248
295
|
detailsBox: PriceForecastDetailsBox
|
|
@@ -255,4 +302,4 @@ export {
|
|
|
255
302
|
PriceForecastDetailsBox,
|
|
256
303
|
PriceForecastRenderPlugin
|
|
257
304
|
};
|
|
258
|
-
//# sourceMappingURL=index.
|
|
305
|
+
//# sourceMappingURL=index.mjs.map
|