@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
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import 'chartjs-adapter-luxon';
|
|
2
2
|
import { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
3
3
|
import { Payload } from '@xyo-network/payload-model';
|
|
4
|
+
import React from 'react';
|
|
4
5
|
export interface PriceForecastDetailsBoxProps extends FlexBoxProps {
|
|
5
6
|
payload?: Payload;
|
|
6
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAcpD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,MAAM,WAAW,4BAA6B,SAAQ,YAAY;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyB1E,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import 'chartjs-adapter-luxon';
|
|
2
2
|
import { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
3
3
|
import { Payload } from '@xyo-network/payload-model';
|
|
4
|
+
import React from 'react';
|
|
4
5
|
export interface PriceForecastDetailsBoxProps extends FlexBoxProps {
|
|
5
6
|
payload?: Payload;
|
|
6
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAcpD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,MAAM,WAAW,4BAA6B,SAAQ,YAAY;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyB1E,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import 'chartjs-adapter-luxon';
|
|
2
2
|
import { FlexBoxProps } from '@xylabs/react-flexbox';
|
|
3
3
|
import { Payload } from '@xyo-network/payload-model';
|
|
4
|
+
import React from 'react';
|
|
4
5
|
export interface PriceForecastDetailsBoxProps extends FlexBoxProps {
|
|
5
6
|
payload?: Payload;
|
|
6
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAcpD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,MAAM,WAAW,4BAA6B,SAAQ,YAAY;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyB1E,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './DetailsBox.
|
|
1
|
+
export * from './DetailsBox.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './DetailsBox.
|
|
1
|
+
export * from './DetailsBox.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './DetailsBox.
|
|
1
|
+
export * from './DetailsBox.tsx';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
|
package/dist/browser/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;ACAA,mCAAO;AAEP,IAAAA,mBAAyB;AACzB,gCAA+B;AAC/B,2BAAsC;AAGtC,mBAYO;AACP,mBAAgC;AAChC,6BAAqB;;;ACrBrB,sBAAsB;AAEf,IAAMC,iBAAiB,wBAACC,WAAoB;EACjDC,iBAAiBD,YAAQE,uBAAMF,OAAO,GAAA,IAAOG;EAC7CC,aAAaJ;AACf,IAH8B;;;ACFvB,IAAMK,kBAAkB,wBAACC,+BAAwC;EACtEC,gBAAgB;EAChBD;EACAE,kBAAkB;EAClBC,aAAa;EACbC,YAAY;AACd,IAN+B;;;ACAxB,IAAMC,qBAAqB,6BAAA;AAChC,QAAMC,SAAS;AACf,SAAO;IACL;MACEC,SAAS;MACTC,WAAW;QAAEC,MAAM;QAAkBC,KAAK;QAAgBC,QAAQ;QAAgBC,UAAU;MAAkB;MAC9GC,mBAAmB;QAAEJ,MAAM;QAAyBC,KAAK;QAA2BC,QAAQ;QAAMC,UAAU;MAAwB;MACpIE,QAAQ;MACRC,WAAWC,KAAKC,IAAG,IAAKX;IAC1B;IACA;MACEC,SAAS;MACTC,WAAW;QAAEC,MAAM;QAAkBC,KAAK;QAAgBC,QAAQ;QAAKC,UAAU;MAAkB;MACnGC,mBAAmB;QAAEJ,MAAM;QAAyBC,KAAK;QAA2BC,QAAQ;QAAMC,UAAU;MAAwB;MACpIE,QAAQ;MACRC,WAAWC,KAAKC,IAAG;IACrB;;AAEJ,GAlBkC;;;ACK3B,IAAMC,iBAAN,MAAMA;EAFb,OAEaA;;;;EACXC;EAEAC,YAAmBC,gBAA2B;SAA3BA,iBAAAA;SAFnBF,eAAwB,CAAA;EAEuB;EAE/C,IAAIG,WAAW;AACb,WAAO,KAAKD;EACd;EAEA,aAAaE,MAAMC,UAAkB;AACnC,UAAMH,iBAAiB,MAAM,KAAKI,oBAAmB;AACrD,UAAMC,WAAW,IAAI,KAAKL,cAAAA;AAE1B,UAAMM,QAAQH,SAASI,MAAM,GAAA;AAC7BF,aAASP,eAAeE,eAAeQ,IAAI,CAACC,YAAAA;AAC1C,aAAO;QAAEC,GAAGD,QAAQE;QAAWC,GAAGP,SAASQ,kBAAkBJ,SAASH,KAAAA;MAAO;IAC/E,CAAA;AACA,WAAOD;EACT;;EAGA,aAAaD,sBAAsB;AACjC,UAAMH,WAAW,MAAMa,QAAQC,QAAQC,mBAAAA,CAAAA;AACvC,WAAOf;EACT;EAEAY,kBAAkBI,KAAcC,MAAgB;AAE9C,QAAIC,SAAcF;AAClB,eAAWG,OAAOF,MAAM;AACtB,UAAIE,OAAOD,QAAQ;AACjB,cAAME,WAAWD;AACjBD,iBAASA,OAAOE,QAAAA;MAClB,OAAO;AACLF,iBAASG;AACT;MACF;IACF;AAEA,WAAOH;EACT;AACF;;;AC3BA,IAAMI,iBAA6C,8BAAO;EACxDC,SAAS;IACPC,QAAQ;MACNC,UAAU;IACZ;EACF;EACAC,YAAY;AACd,IAPmD;AAS5C,IAAMC,iCAAN,MAAMA,gCAAAA;EAxBb,OAwBaA;;;;EACXC;EAIAC;EACAC;EAEAC,YACEC,OACQC,SACR;SADQA,UAAAA;SATVL,OAA0B;MACxBM,UAAU,CAAA;IACZ;SAEAL,UAAgCP,eAAAA;AAO9B,SAAKQ,cAAc,KAAKK,WAAWH,KAAAA;EACrC;EAEA,IAAII,kBAAkB;AACpB,QAAI,KAAKH,SAAS;AAChB,aAAO,KAAKA;IACd,OAAO;AACL,YAAM,IAAII,MAAM,iCAAA;IAClB;EACF;EAEA,aAAaC,OAAON,OAAcC,SAA2BM,qBAA2C;AACtG,UAAMC,WAAW,IAAIb,gCAA+BK,OAAOC,OAAAA;AAE3D,UAAMO,SAASC,MAAMF,qBAAqBG,KAAAA;AAE1CF,aAASG,cAAa;AAEtB,WAAOH;EACT;EAEA,MAAMC,MAAMG,gBAA0B;AACpC,SAAKC,aAAY;AACjB,UAAM,KAAKC,UAAUF,cAAAA;AACrB,WAAO;EACT;EAEA,MAAME,UAAUF,gBAA0B;AACxC,UAAMG,eAAe,KAAKC,4BAA2B;AAErD,UAAMd,WAAmC;MAACa;;AAE1C,QAAIH,gBAAgB;AAElB,YAAMK,aAAa,MAAM,KAAKC,8BAA6B;AAC3DhB,eAASiB,QAAQF,UAAAA;AAGjB,YAAMG,qBAAqBH,WAAWrB,KAAKyB,GAAG,EAAC;AAC/CN,mBAAanB,KAAKuB,QAAQC,kBAAAA;IAC5B;AAEA,SAAKxB,OAAO;MACVM;IACF;AAEA,WAAO;EACT;EAEAW,eAAe;AACb,QAAI,KAAKhB,QAAQN,SAAS;AACxB,WAAKM,QAAQN,QAAQ+B,QAAQ,KAAKC,cAAa;AAC/C,WAAK1B,QAAQN,QAAQC,SAAS,KAAKgC,eAAc;IACnD;AACA,SAAK3B,QAAQ4B,SAAS,KAAKC,eAAc;AAEzC,WAAO;EACT;EAEAf,gBAAgB;AACd,SAAKf,OAAO;MAAE,GAAG,KAAKA;IAAK;AAC3B,SAAKC,UAAU;MAAE,GAAG,KAAKA;IAAQ;EACnC;EAEU2B,iBAAiB;AACzB,WAAO;MACLG,QAAQ;QACNC,YAAY;QACZC,eAAe;MACjB;IACF;EACF;EAEUH,iBAAiB;AACzB,WAAO;MACLI,GAAG;QACDC,MAAM;UACJC,OAAO,KAAKlC,aAAamC;QAC3B;QACAC,MAAM;UACJC,MAAM;QACR;QACAC,MAAM;MACR;MACAC,GAAG;QACDN,MAAM;UACJC,OAAO,KAAKlC,aAAamC;QAC3B;MACF;IACF;EACF;EAEUV,gBAAgB;AACxB,WAAO;MACLe,SAAS;MACTC,MAAM,6CACJ,KAAKnC,iBAAiBoC,OAAO,CAAA,EAAGC,YAAY,IAAIC,KAAK,KAAKtC,gBAAgBoC,OAAO,CAAA,EAAGC,SAAS,EAAEE,mBAAkB,IAAK,EAAA;IAE1H;EACF;EAEUxC,WAAWH,OAAc;AACjC,UAAM4C,OAAO5C,MAAM6C,QAAQC,SAAS;AACpC,WAAO;MACLC,qBAAqB/C,MAAM6C,QAAQG,QAAQC;MAC3CC,uBAAuBlD,MAAM6C,QAAQM,UAAUF;MAC/ChB,WAAWW,OAAO5C,MAAM6C,QAAQO,KAAK,GAAA,IAAOpD,MAAM6C,QAAQO,KAAK,GAAA;IACjE;EACF;EAEQpC,8BAAoD;AAC1D,WAAO;MACLqC,YAAY;QAAC;;MACbC,kBAAkB;MAClB1D,MAAM,KAAKQ,gBAAgBoC,OAAOe,IAAIC,CAAAA,WAAU;QAAE1B,GAAG0B,MAAMf,aAAa;QAAGJ,GAAGmB,MAAMC;MAAM,EAAA;MAC1FC,OAAO;MACP,GAAGC,gBAAgB,KAAK7D,aAAaiD,mBAAAA;MACrC,GAAGa,eAAe,KAAK9D,aAAaiD,mBAAAA;IACtC;EACF;EAEA,MAAc7B,gCAA+D;AAC3E,UAAM,EAAE2C,aAAY,IAAK,MAAMC,eAAerD,MAAM,kBAAA;AACpD,WAAO;MACLb,MAAMiE;MACNH,OAAO;MACP,GAAGE,eAAe,KAAK9D,aAAaoD,qBAAAA;MACpC,GAAGS,gBAAgB,KAAK7D,aAAaoD,qBAAAA;IACvC;EACF;AACF;;;ALjJAa,aAAAA,MAAQC,SAASC,4BAAeC,wBAAWC,2BAAcC,0BAAaC,0BAAaC,oBAAOC,sBAASC,mBAAAA;AAM5F,IAAMC,0BAAkE,wBAAC,EAAEC,SAAS,GAAGC,MAAAA,MAAO;AACnG,QAAMC,uBAAuBF;AAC7B,QAAMG,YAAQC,2BAAAA;AACd,QAAM,CAACC,MAAMC,OAAAA,QAAWC,uBAA4B;IAAEC,UAAU,CAAA;EAAG,CAAA;AACnE,QAAM,CAACC,SAASC,UAAAA,QAAcH,uBAA+B,CAAC,CAAA;AAE9DI,gDAEE,OAAOC,YAAAA;AACL,UAAM,EAAEP,MAAAA,OAAMI,SAAAA,SAAO,IAAK,MAAMI,+BAA+BC,OAAOX,OAAOD,sBAAsB;MAAEa,OAAO;IAAK,CAAA;AACjH,QAAIH,QAAAA,GAAW;AACbN,cAAQD,KAAAA;AACRK,iBAAWD,QAAAA;IACb;EACF,GACA;IAACP;IAAsBC;GAAM;AAG/B,SACE,6BAAAa,QAAA,cAACC,8BAAAA;IAAS,GAAGhB;IAAOiB,MAAMhB,yBAAyBiB;IAAWC,WAAU;KACrElB,uBACG,6BAAAc,QAAA,cAACK,6BAAAA;IAAKZ;IAAkBJ;OACxB,IAAA;AAGV,GAzB+E;;;AM/B/E,kCAA+D;AAIxD,IAAMiB,4BAAiD;EAC5D,OAAGC,uDAA0B;IAC3BC,WAAW,6BAAM,MAAN;IACXC,YAAY;MACVC,KAAK;QACHC,YAAYC;MACd;IACF;IACAC,MAAM;EACR,CAAA;AACF;","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/browser/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/browser/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/browser/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
|