@xyo-network/react-price-forecast-plugin 2.59.13 → 2.60.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Plugin.d.mts.map +1 -0
- package/dist/Plugin.d.ts +3 -0
- package/dist/Plugin.d.ts.map +1 -0
- package/dist/components/DetailsBox.d.mts.map +1 -0
- package/dist/components/DetailsBox.d.ts +9 -0
- package/dist/components/DetailsBox.d.ts.map +1 -0
- package/dist/components/DetailsBox.stories.d.mts +6 -0
- package/dist/components/DetailsBox.stories.d.mts.map +1 -0
- package/dist/components/DetailsBox.stories.d.ts +6 -0
- package/dist/components/DetailsBox.stories.d.ts.map +1 -0
- package/dist/components/index.d.mts.map +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/docs.json +4 -4
- package/dist/index.d.mts.map +1 -0
- package/dist/{esm/index.js → index.d.ts} +1 -1
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +276 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +258 -0
- package/dist/index.mjs.map +1 -0
- package/dist/lib/DataLineStyles.d.mts.map +1 -0
- package/dist/lib/DataLineStyles.d.ts +5 -0
- package/dist/lib/DataLineStyles.d.ts.map +1 -0
- package/dist/lib/DataPointStyles.d.mts.map +1 -0
- package/dist/lib/DataPointStyles.d.ts +8 -0
- package/dist/lib/DataPointStyles.d.ts.map +1 -0
- package/dist/lib/ForecastLineChartConfigBuilder.d.mts.map +1 -0
- package/dist/lib/ForecastLineChartConfigBuilder.d.ts +47 -0
- package/dist/lib/ForecastLineChartConfigBuilder.d.ts.map +1 -0
- package/dist/lib/MockSourcePayloads.d.mts.map +1 -0
- package/dist/lib/MockSourcePayloads.d.ts +18 -0
- package/dist/lib/MockSourcePayloads.d.ts.map +1 -0
- package/dist/lib/SourcePayloads.d.mts.map +1 -0
- package/dist/lib/SourcePayloads.d.ts +30 -0
- package/dist/lib/SourcePayloads.d.ts.map +1 -0
- package/dist/lib/index.d.mts.map +1 -0
- package/dist/{esm/lib/index.js → lib/index.d.ts} +1 -1
- package/dist/lib/index.d.ts.map +1 -0
- package/package.json +28 -20
- package/dist/cjs/Plugin.js +0 -15
- package/dist/cjs/Plugin.js.map +0 -1
- package/dist/cjs/components/DetailsBox.js +0 -33
- package/dist/cjs/components/DetailsBox.js.map +0 -1
- package/dist/cjs/components/index.js +0 -5
- package/dist/cjs/components/index.js.map +0 -1
- package/dist/cjs/index.js +0 -6
- package/dist/cjs/index.js.map +0 -1
- package/dist/cjs/lib/DataLineStyles.js +0 -10
- package/dist/cjs/lib/DataLineStyles.js.map +0 -1
- package/dist/cjs/lib/DataPointStyles.js +0 -12
- package/dist/cjs/lib/DataPointStyles.js.map +0 -1
- package/dist/cjs/lib/ForecastLineChartConfigBuilder.js +0 -133
- package/dist/cjs/lib/ForecastLineChartConfigBuilder.js.map +0 -1
- package/dist/cjs/lib/MockSourcePayloads.js +0 -24
- package/dist/cjs/lib/MockSourcePayloads.js.map +0 -1
- package/dist/cjs/lib/SourcePayloads.js +0 -49
- package/dist/cjs/lib/SourcePayloads.js.map +0 -1
- package/dist/cjs/lib/index.js +0 -7
- package/dist/cjs/lib/index.js.map +0 -1
- package/dist/esm/Plugin.js +0 -14
- package/dist/esm/Plugin.js.map +0 -1
- package/dist/esm/components/DetailsBox.js +0 -27
- package/dist/esm/components/DetailsBox.js.map +0 -1
- package/dist/esm/components/index.js +0 -2
- package/dist/esm/components/index.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/lib/DataLineStyles.js +0 -6
- package/dist/esm/lib/DataLineStyles.js.map +0 -1
- package/dist/esm/lib/DataPointStyles.js +0 -8
- package/dist/esm/lib/DataPointStyles.js.map +0 -1
- package/dist/esm/lib/ForecastLineChartConfigBuilder.js +0 -130
- package/dist/esm/lib/ForecastLineChartConfigBuilder.js.map +0 -1
- package/dist/esm/lib/MockSourcePayloads.js +0 -20
- package/dist/esm/lib/MockSourcePayloads.js.map +0 -1
- package/dist/esm/lib/SourcePayloads.js +0 -41
- package/dist/esm/lib/SourcePayloads.js.map +0 -1
- package/dist/esm/lib/index.js.map +0 -1
- package/dist/types/Plugin.d.ts.map +0 -1
- package/dist/types/components/DetailsBox.d.ts.map +0 -1
- package/dist/types/components/index.d.ts.map +0 -1
- package/dist/types/index.d.ts.map +0 -1
- package/dist/types/lib/DataLineStyles.d.ts.map +0 -1
- package/dist/types/lib/DataPointStyles.d.ts.map +0 -1
- package/dist/types/lib/ForecastLineChartConfigBuilder.d.ts.map +0 -1
- package/dist/types/lib/MockSourcePayloads.d.ts.map +0 -1
- package/dist/types/lib/SourcePayloads.d.ts.map +0 -1
- package/dist/types/lib/index.d.ts.map +0 -1
- /package/dist/{types/Plugin.d.ts → Plugin.d.mts} +0 -0
- /package/dist/{types/components/DetailsBox.d.ts → components/DetailsBox.d.mts} +0 -0
- /package/dist/{types/components/index.d.ts → components/index.d.mts} +0 -0
- /package/dist/{types/index.d.ts → index.d.mts} +0 -0
- /package/dist/{types/lib/DataLineStyles.d.ts → lib/DataLineStyles.d.mts} +0 -0
- /package/dist/{types/lib/DataPointStyles.d.ts → lib/DataPointStyles.d.mts} +0 -0
- /package/dist/{types/lib/ForecastLineChartConfigBuilder.d.ts → lib/ForecastLineChartConfigBuilder.d.mts} +0 -0
- /package/dist/{types/lib/MockSourcePayloads.d.ts → lib/MockSourcePayloads.d.mts} +0 -0
- /package/dist/{types/lib/SourcePayloads.d.ts → lib/SourcePayloads.d.mts} +0 -0
- /package/dist/{types/lib/index.d.ts → lib/index.d.mts} +0 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
// src/components/DetailsBox.tsx
|
|
2
|
+
import "chartjs-adapter-luxon";
|
|
3
|
+
import { useTheme } from "@mui/material";
|
|
4
|
+
import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
5
|
+
import { FlexCol } from "@xylabs/react-flexbox";
|
|
6
|
+
import {
|
|
7
|
+
CategoryScale,
|
|
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";
|
|
18
|
+
import { Line } from "react-chartjs-2";
|
|
19
|
+
|
|
20
|
+
// src/lib/DataLineStyles.ts
|
|
21
|
+
import { alpha } from "@mui/material";
|
|
22
|
+
var DataLineStyles = (color) => ({
|
|
23
|
+
backgroundColor: color ? alpha(color, 0.5) : void 0,
|
|
24
|
+
borderColor: color
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
// src/lib/DataPointStyles.ts
|
|
28
|
+
var DataPointStyles = (pointHoverBackgroundColor) => ({
|
|
29
|
+
pointHitRadius: 20,
|
|
30
|
+
pointHoverBackgroundColor,
|
|
31
|
+
pointHoverRadius: 10,
|
|
32
|
+
pointRadius: 5,
|
|
33
|
+
pointStyle: "circle"
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// src/lib/MockSourcePayloads.ts
|
|
37
|
+
var MockSourcePayloads = () => {
|
|
38
|
+
const tenMin = 6e5;
|
|
39
|
+
return [
|
|
40
|
+
{
|
|
41
|
+
baseFee: 38.90155387825,
|
|
42
|
+
feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },
|
|
43
|
+
priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
|
|
44
|
+
schema: "network.xyo.blockchain.ethereum.gas",
|
|
45
|
+
timestamp: Date.now() - tenMin
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
baseFee: 38.90155387825,
|
|
49
|
+
feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },
|
|
50
|
+
priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
|
|
51
|
+
schema: "network.xyo.blockchain.ethereum.gas",
|
|
52
|
+
timestamp: Date.now()
|
|
53
|
+
}
|
|
54
|
+
];
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// src/lib/SourcePayloads.ts
|
|
58
|
+
var SourcePayloads = class {
|
|
59
|
+
constructor(sourcePayloads) {
|
|
60
|
+
this.sourcePayloads = sourcePayloads;
|
|
61
|
+
}
|
|
62
|
+
sourcePrices = [];
|
|
63
|
+
get payloads() {
|
|
64
|
+
return this.sourcePayloads;
|
|
65
|
+
}
|
|
66
|
+
static async build(jsonPath) {
|
|
67
|
+
const sourcePayloads = await this.fetchSourcePayloads();
|
|
68
|
+
const instance = new this(sourcePayloads);
|
|
69
|
+
const paths = jsonPath.split(".");
|
|
70
|
+
instance.sourcePrices = sourcePayloads.map((payload) => {
|
|
71
|
+
return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
|
|
72
|
+
});
|
|
73
|
+
return instance;
|
|
74
|
+
}
|
|
75
|
+
// TODO - fetch from archivist
|
|
76
|
+
static async fetchSourcePayloads() {
|
|
77
|
+
const payloads = await Promise.resolve(MockSourcePayloads());
|
|
78
|
+
return payloads;
|
|
79
|
+
}
|
|
80
|
+
jsonPathTraverser(obj, path) {
|
|
81
|
+
let result = obj;
|
|
82
|
+
for (const key of path) {
|
|
83
|
+
if (key in result) {
|
|
84
|
+
const foundKey = key;
|
|
85
|
+
result = result[foundKey];
|
|
86
|
+
} else {
|
|
87
|
+
result = void 0;
|
|
88
|
+
break;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
return result;
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
// src/lib/ForecastLineChartConfigBuilder.ts
|
|
96
|
+
var defaultOptions = () => ({
|
|
97
|
+
plugins: {
|
|
98
|
+
legend: {
|
|
99
|
+
position: "top"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
responsive: true
|
|
103
|
+
});
|
|
104
|
+
var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
|
|
105
|
+
constructor(theme, payload) {
|
|
106
|
+
this.payload = payload;
|
|
107
|
+
this.themeColors = this.parseTheme(theme);
|
|
108
|
+
}
|
|
109
|
+
data = {
|
|
110
|
+
datasets: []
|
|
111
|
+
};
|
|
112
|
+
options = defaultOptions();
|
|
113
|
+
themeColors;
|
|
114
|
+
get forecastPayload() {
|
|
115
|
+
if (this.payload) {
|
|
116
|
+
return this.payload;
|
|
117
|
+
} else {
|
|
118
|
+
throw Error("ForecastPayload was not defined");
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
static async create(theme, payload, sourcePayloadConfig) {
|
|
122
|
+
const instance = new _ForecastLineChartConfigBuilder(theme, payload);
|
|
123
|
+
await instance.build(sourcePayloadConfig?.fetch);
|
|
124
|
+
instance.refreshValues();
|
|
125
|
+
return instance;
|
|
126
|
+
}
|
|
127
|
+
async build(includeSources) {
|
|
128
|
+
this.buildOptions();
|
|
129
|
+
await this.buildData(includeSources);
|
|
130
|
+
return this;
|
|
131
|
+
}
|
|
132
|
+
async buildData(includeSources) {
|
|
133
|
+
const forecastData = this.generateDataSetForecastData();
|
|
134
|
+
const datasets = [forecastData];
|
|
135
|
+
if (includeSources) {
|
|
136
|
+
const sourceData = await this.generateDataSetSourcePayloads();
|
|
137
|
+
datasets.unshift(sourceData);
|
|
138
|
+
const lastSourceDataItem = sourceData.data.at(-1);
|
|
139
|
+
forecastData.data.unshift(lastSourceDataItem);
|
|
140
|
+
}
|
|
141
|
+
this.data = {
|
|
142
|
+
datasets
|
|
143
|
+
};
|
|
144
|
+
return this;
|
|
145
|
+
}
|
|
146
|
+
buildOptions() {
|
|
147
|
+
if (this.options.plugins) {
|
|
148
|
+
this.options.plugins.title = this.generateTitle();
|
|
149
|
+
this.options.plugins.legend = this.generateLegend();
|
|
150
|
+
}
|
|
151
|
+
this.options.scales = this.generateScales();
|
|
152
|
+
return this;
|
|
153
|
+
}
|
|
154
|
+
refreshValues() {
|
|
155
|
+
this.data = { ...this.data };
|
|
156
|
+
this.options = { ...this.options };
|
|
157
|
+
}
|
|
158
|
+
generateLegend() {
|
|
159
|
+
return {
|
|
160
|
+
labels: {
|
|
161
|
+
pointStyle: "circle",
|
|
162
|
+
usePointStyle: true
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
generateScales() {
|
|
167
|
+
return {
|
|
168
|
+
x: {
|
|
169
|
+
grid: {
|
|
170
|
+
color: this.themeColors?.gridColor
|
|
171
|
+
},
|
|
172
|
+
time: {
|
|
173
|
+
unit: "minute"
|
|
174
|
+
},
|
|
175
|
+
type: "time"
|
|
176
|
+
},
|
|
177
|
+
y: {
|
|
178
|
+
grid: {
|
|
179
|
+
color: this.themeColors?.gridColor
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
generateTitle() {
|
|
185
|
+
return {
|
|
186
|
+
display: true,
|
|
187
|
+
text: `Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ""})`
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
parseTheme(theme) {
|
|
191
|
+
const dark = theme.palette.mode === "dark";
|
|
192
|
+
return {
|
|
193
|
+
dataSetColorPrimary: theme.palette.primary.light,
|
|
194
|
+
dataSetColorSecondary: theme.palette.secondary.light,
|
|
195
|
+
gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300]
|
|
196
|
+
};
|
|
197
|
+
}
|
|
198
|
+
generateDataSetForecastData() {
|
|
199
|
+
return {
|
|
200
|
+
borderDash: [5],
|
|
201
|
+
borderDashOffset: 0.5,
|
|
202
|
+
data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
|
|
203
|
+
label: "Forecast Price",
|
|
204
|
+
...DataPointStyles(this.themeColors?.dataSetColorPrimary),
|
|
205
|
+
...DataLineStyles(this.themeColors?.dataSetColorPrimary)
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
async generateDataSetSourcePayloads() {
|
|
209
|
+
const { sourcePrices } = await SourcePayloads.build("feePerGas.medium");
|
|
210
|
+
return {
|
|
211
|
+
data: sourcePrices,
|
|
212
|
+
label: "Source Prices",
|
|
213
|
+
...DataLineStyles(this.themeColors?.dataSetColorSecondary),
|
|
214
|
+
...DataPointStyles(this.themeColors?.dataSetColorSecondary)
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
// src/components/DetailsBox.tsx
|
|
220
|
+
import { jsx } from "react/jsx-runtime";
|
|
221
|
+
ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend);
|
|
222
|
+
var PriceForecastDetailsBox = ({ payload, ...props }) => {
|
|
223
|
+
const priceForecastPayload = payload;
|
|
224
|
+
const theme = useTheme();
|
|
225
|
+
const [data, setData] = useState({ datasets: [] });
|
|
226
|
+
const [options, setOptions] = useState({});
|
|
227
|
+
useAsyncEffect(
|
|
228
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
229
|
+
async (mounted) => {
|
|
230
|
+
const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
|
|
231
|
+
if (mounted()) {
|
|
232
|
+
setData(data2);
|
|
233
|
+
setOptions(options2);
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
[priceForecastPayload, theme]
|
|
237
|
+
);
|
|
238
|
+
return /* @__PURE__ */ jsx(FlexCol, { ...props, busy: priceForecastPayload === void 0, minHeight: "25vh", children: priceForecastPayload ? /* @__PURE__ */ jsx(Line, { options, data }) : null });
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
// src/Plugin.ts
|
|
242
|
+
import { createPayloadRenderPlugin } from "@xyo-network/react-payload-plugin";
|
|
243
|
+
var PriceForecastRenderPlugin = {
|
|
244
|
+
...createPayloadRenderPlugin({
|
|
245
|
+
canRender: () => true,
|
|
246
|
+
components: {
|
|
247
|
+
box: {
|
|
248
|
+
detailsBox: PriceForecastDetailsBox
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
name: "PriceForecast"
|
|
252
|
+
})
|
|
253
|
+
};
|
|
254
|
+
export {
|
|
255
|
+
PriceForecastDetailsBox,
|
|
256
|
+
PriceForecastRenderPlugin
|
|
257
|
+
};
|
|
258
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../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":["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'\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 ? <Line options={options} data={data} /> : 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 = 600000\n return [\n {\n baseFee: 38.90155387825,\n feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },\n priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },\n schema: 'network.xyo.blockchain.ethereum.gas',\n timestamp: Date.now() - tenMin,\n },\n {\n baseFee: 38.90155387825,\n feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },\n priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },\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'\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// eslint-disable-next-line import/no-unresolved\nimport { _DeepPartialObject } from 'chart.js/dist/types/utils'\n\nimport { DataLineStyles } from './DataLineStyles'\nimport { DataPointStyles } from './DataPointStyles'\nimport { SourcePayloads } from './SourcePayloads'\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 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(): _DeepPartialObject<LegendOptions<'line'>> {\n return {\n labels: {\n pointStyle: 'circle',\n usePointStyle: true,\n },\n }\n }\n\n protected generateScales(): _DeepPartialObject<ScaleChartOptions<'line'>['scales']> {\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 }\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'\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":["data","options"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataLineStyles.d.ts","sourceRoot":"","sources":["../../src/lib/DataLineStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM;;;CAG3C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataLineStyles.d.ts","sourceRoot":"","sources":["../../src/lib/DataLineStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM;;;CAG3C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataPointStyles.d.ts","sourceRoot":"","sources":["../../src/lib/DataPointStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,+BAAgC,MAAM;;;;;;CAMhE,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const DataPointStyles: (pointHoverBackgroundColor?: string) => {
|
|
2
|
+
pointHitRadius: number;
|
|
3
|
+
pointHoverBackgroundColor: string | undefined;
|
|
4
|
+
pointHoverRadius: number;
|
|
5
|
+
pointRadius: number;
|
|
6
|
+
pointStyle: string;
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=DataPointStyles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataPointStyles.d.ts","sourceRoot":"","sources":["../../src/lib/DataPointStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,+BAAgC,MAAM;;;;;;CAMhE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ForecastLineChartConfigBuilder.d.ts","sourceRoot":"","sources":["../../src/lib/ForecastLineChartConfigBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,SAAS,EAAgB,YAAY,EAAE,aAAa,EAAS,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEzG,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAM9D,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,WAAW;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,qBAAqB,EAAE,MAAM,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;CAClB;AAWD,qBAAa,8BAA8B;IASvC,OAAO,CAAC,OAAO,CAAC;IARlB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAEtB;IACD,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,CAAmB;IAChD,WAAW,EAAE,WAAW,GAAG,SAAS,CAAA;gBAGlC,KAAK,EAAE,KAAK,EACJ,OAAO,CAAC;;;kBAAiB;IAKnC,IAAI,eAAe;;;MAMlB;WAEY,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,eAAe,EAAE,mBAAmB,CAAC,EAAE,mBAAmB;IAUhG,KAAK,CAAC,cAAc,CAAC,EAAE,OAAO;IAM9B,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO;IAsBxC,YAAY;IAUZ,aAAa;IAKb,SAAS,CAAC,cAAc,IAAI,kBAAkB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IASrE,SAAS,CAAC,cAAc,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAmBnF,SAAS,CAAC,aAAa;;;;IASvB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK;;;;;IASjC,OAAO,CAAC,2BAA2B;YAWrB,6BAA6B;CAS5C"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Theme } from '@mui/material';
|
|
2
|
+
import { ForecastPayload } from '@xyo-network/diviner-forecasting-model';
|
|
3
|
+
import { ChartData, ChartOptions, LegendOptions, ScaleChartOptions } from 'chart.js';
|
|
4
|
+
import { _DeepPartialObject } from 'chart.js/dist/types/utils';
|
|
5
|
+
interface SourcePayloadConfig {
|
|
6
|
+
fetch: boolean;
|
|
7
|
+
sampleSize?: number;
|
|
8
|
+
}
|
|
9
|
+
interface ThemeColors {
|
|
10
|
+
dataSetColorPrimary: string;
|
|
11
|
+
dataSetColorSecondary: string;
|
|
12
|
+
gridColor: string;
|
|
13
|
+
}
|
|
14
|
+
export declare class ForecastLineChartConfigBuilder {
|
|
15
|
+
private payload?;
|
|
16
|
+
data: ChartData<'line'>;
|
|
17
|
+
options: ChartOptions<'line'>;
|
|
18
|
+
themeColors: ThemeColors | undefined;
|
|
19
|
+
constructor(theme: Theme, payload?: (import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
|
|
20
|
+
schema: "network.xyo.diviner.forecasting.forecast";
|
|
21
|
+
values: import("@xyo-network/diviner-forecasting-model").Forecast[];
|
|
22
|
+
}) | undefined);
|
|
23
|
+
get forecastPayload(): import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
|
|
24
|
+
schema: "network.xyo.diviner.forecasting.forecast";
|
|
25
|
+
values: import("@xyo-network/diviner-forecasting-model").Forecast[];
|
|
26
|
+
};
|
|
27
|
+
static create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig): Promise<ForecastLineChartConfigBuilder>;
|
|
28
|
+
build(includeSources?: boolean): Promise<this>;
|
|
29
|
+
buildData(includeSources?: boolean): Promise<this>;
|
|
30
|
+
buildOptions(): this;
|
|
31
|
+
refreshValues(): void;
|
|
32
|
+
protected generateLegend(): _DeepPartialObject<LegendOptions<'line'>>;
|
|
33
|
+
protected generateScales(): _DeepPartialObject<ScaleChartOptions<'line'>['scales']>;
|
|
34
|
+
protected generateTitle(): {
|
|
35
|
+
display: boolean;
|
|
36
|
+
text: string;
|
|
37
|
+
};
|
|
38
|
+
protected parseTheme(theme: Theme): {
|
|
39
|
+
dataSetColorPrimary: string;
|
|
40
|
+
dataSetColorSecondary: string;
|
|
41
|
+
gridColor: string;
|
|
42
|
+
};
|
|
43
|
+
private generateDataSetForecastData;
|
|
44
|
+
private generateDataSetSourcePayloads;
|
|
45
|
+
}
|
|
46
|
+
export {};
|
|
47
|
+
//# sourceMappingURL=ForecastLineChartConfigBuilder.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ForecastLineChartConfigBuilder.d.ts","sourceRoot":"","sources":["../../src/lib/ForecastLineChartConfigBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,SAAS,EAAgB,YAAY,EAAE,aAAa,EAAS,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEzG,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAM9D,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,WAAW;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,qBAAqB,EAAE,MAAM,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;CAClB;AAWD,qBAAa,8BAA8B;IASvC,OAAO,CAAC,OAAO,CAAC;IARlB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAEtB;IACD,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,CAAmB;IAChD,WAAW,EAAE,WAAW,GAAG,SAAS,CAAA;gBAGlC,KAAK,EAAE,KAAK,EACJ,OAAO,CAAC;;;kBAAiB;IAKnC,IAAI,eAAe;;;MAMlB;WAEY,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,eAAe,EAAE,mBAAmB,CAAC,EAAE,mBAAmB;IAUhG,KAAK,CAAC,cAAc,CAAC,EAAE,OAAO;IAM9B,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO;IAsBxC,YAAY;IAUZ,aAAa;IAKb,SAAS,CAAC,cAAc,IAAI,kBAAkB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IASrE,SAAS,CAAC,cAAc,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAmBnF,SAAS,CAAC,aAAa;;;;IASvB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK;;;;;IASjC,OAAO,CAAC,2BAA2B;YAWrB,6BAA6B;CAS5C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MockSourcePayloads.d.ts","sourceRoot":"","sources":["../../src/lib/MockSourcePayloads.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;GAkB9B,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export declare const MockSourcePayloads: () => {
|
|
2
|
+
baseFee: number;
|
|
3
|
+
feePerGas: {
|
|
4
|
+
high: number;
|
|
5
|
+
low: number;
|
|
6
|
+
medium: number;
|
|
7
|
+
veryHigh: number;
|
|
8
|
+
};
|
|
9
|
+
priorityFeePerGas: {
|
|
10
|
+
high: number;
|
|
11
|
+
low: number;
|
|
12
|
+
medium: number;
|
|
13
|
+
veryHigh: number;
|
|
14
|
+
};
|
|
15
|
+
schema: string;
|
|
16
|
+
timestamp: number;
|
|
17
|
+
}[];
|
|
18
|
+
//# sourceMappingURL=MockSourcePayloads.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MockSourcePayloads.d.ts","sourceRoot":"","sources":["../../src/lib/MockSourcePayloads.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;GAkB9B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SourcePayloads.d.ts","sourceRoot":"","sources":["../../src/lib/SourcePayloads.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,qBAAa,cAAc;IAGN,cAAc,EAAE,OAAO,EAAE;IAF5C,YAAY,EAAE,KAAK,EAAE,CAAK;gBAEP,cAAc,EAAE,OAAO,EAAE;IAE5C,IAAI,QAAQ;;QAEX;WAEY,KAAK,CAAC,QAAQ,EAAE,MAAM;WAYtB,mBAAmB;;;;;;;;;;;;;;;;;IAKhC,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE;CAe/C"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Payload } from '@xyo-network/payload-model';
|
|
2
|
+
import { Point } from 'chart.js';
|
|
3
|
+
export declare class SourcePayloads {
|
|
4
|
+
sourcePayloads: Payload[];
|
|
5
|
+
sourcePrices: Point[];
|
|
6
|
+
constructor(sourcePayloads: Payload[]);
|
|
7
|
+
get payloads(): {
|
|
8
|
+
schema: string;
|
|
9
|
+
}[];
|
|
10
|
+
static build(jsonPath: string): Promise<SourcePayloads>;
|
|
11
|
+
static fetchSourcePayloads(): Promise<{
|
|
12
|
+
baseFee: number;
|
|
13
|
+
feePerGas: {
|
|
14
|
+
high: number;
|
|
15
|
+
low: number;
|
|
16
|
+
medium: number;
|
|
17
|
+
veryHigh: number;
|
|
18
|
+
};
|
|
19
|
+
priorityFeePerGas: {
|
|
20
|
+
high: number;
|
|
21
|
+
low: number;
|
|
22
|
+
medium: number;
|
|
23
|
+
veryHigh: number;
|
|
24
|
+
};
|
|
25
|
+
schema: string;
|
|
26
|
+
timestamp: number;
|
|
27
|
+
}[]>;
|
|
28
|
+
jsonPathTraverser(obj: Payload, path: string[]): any;
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=SourcePayloads.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SourcePayloads.d.ts","sourceRoot":"","sources":["../../src/lib/SourcePayloads.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,qBAAa,cAAc;IAGN,cAAc,EAAE,OAAO,EAAE;IAF5C,YAAY,EAAE,KAAK,EAAE,CAAK;gBAEP,cAAc,EAAE,OAAO,EAAE;IAE5C,IAAI,QAAQ;;QAEX;WAEY,KAAK,CAAC,QAAQ,EAAE,MAAM;WAYtB,mBAAmB;;;;;;;;;;;;;;;;;IAKhC,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE;CAe/C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA"}
|
package/package.json
CHANGED
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xylabs/react-async-effect": "~2.
|
|
14
|
-
"@xylabs/react-flexbox": "~2.
|
|
15
|
-
"@xyo-network/diviner-forecasting-model": "^2.74.
|
|
16
|
-
"@xyo-network/payload-model": "^2.74.
|
|
17
|
-
"@xyo-network/react-payload-plugin": "~2.
|
|
13
|
+
"@xylabs/react-async-effect": "~2.18.4",
|
|
14
|
+
"@xylabs/react-flexbox": "~2.18.4",
|
|
15
|
+
"@xyo-network/diviner-forecasting-model": "^2.74.1",
|
|
16
|
+
"@xyo-network/payload-model": "^2.74.1",
|
|
17
|
+
"@xyo-network/react-payload-plugin": "~2.62.3",
|
|
18
18
|
"chart.js": "^4.4.0",
|
|
19
19
|
"chartjs-adapter-luxon": "^1.3.1",
|
|
20
20
|
"luxon": "^3.4.3",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@storybook/react": "^7.4.3",
|
|
25
|
-
"@xylabs/ts-scripts-yarn3": "^
|
|
26
|
-
"@xylabs/tsconfig-react": "^
|
|
25
|
+
"@xylabs/ts-scripts-yarn3": "^3.0.28",
|
|
26
|
+
"@xylabs/tsconfig-react": "^3.0.28",
|
|
27
27
|
"typescript": "^5.2.2"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
@@ -36,27 +36,35 @@
|
|
|
36
36
|
"react-router-dom": "^6"
|
|
37
37
|
},
|
|
38
38
|
"description": "Common React library for all XYO projects that use React",
|
|
39
|
-
"browser": "dist/esm/index.js",
|
|
40
39
|
"docs": "dist/docs.json",
|
|
41
40
|
"exports": {
|
|
42
41
|
".": {
|
|
43
42
|
"node": {
|
|
44
|
-
"import":
|
|
45
|
-
|
|
43
|
+
"import": {
|
|
44
|
+
"types": "./dist/index.d.mts",
|
|
45
|
+
"default": "./dist/index.mjs"
|
|
46
|
+
},
|
|
47
|
+
"require": {
|
|
48
|
+
"types": "./dist/index.d.ts",
|
|
49
|
+
"default": "./dist/index.js"
|
|
50
|
+
}
|
|
46
51
|
},
|
|
47
52
|
"browser": {
|
|
48
|
-
"import":
|
|
49
|
-
|
|
53
|
+
"import": {
|
|
54
|
+
"types": "./dist/index.d.mts",
|
|
55
|
+
"default": "./dist/index.mjs"
|
|
56
|
+
},
|
|
57
|
+
"require": {
|
|
58
|
+
"types": "./dist/index.d.ts",
|
|
59
|
+
"default": "./dist/index.js"
|
|
60
|
+
}
|
|
50
61
|
},
|
|
51
|
-
"default": "./dist/
|
|
52
|
-
},
|
|
53
|
-
"./dist/docs.json": {
|
|
54
|
-
"default": "./dist/docs.json"
|
|
62
|
+
"default": "./dist/index.mjs"
|
|
55
63
|
},
|
|
56
64
|
"./package.json": "./package.json"
|
|
57
65
|
},
|
|
58
|
-
"main": "dist/
|
|
59
|
-
"module": "dist/
|
|
66
|
+
"main": "dist/index.js",
|
|
67
|
+
"module": "dist/index.mjs",
|
|
60
68
|
"homepage": "https://xyo.network",
|
|
61
69
|
"keywords": [
|
|
62
70
|
"xyo",
|
|
@@ -77,6 +85,6 @@
|
|
|
77
85
|
"license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
|
|
78
86
|
},
|
|
79
87
|
"sideEffects": false,
|
|
80
|
-
"types": "dist/
|
|
81
|
-
"version": "2.
|
|
88
|
+
"types": "dist/index.d.ts",
|
|
89
|
+
"version": "2.60.3"
|
|
82
90
|
}
|
package/dist/cjs/Plugin.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PriceForecastRenderPlugin = void 0;
|
|
4
|
-
const react_payload_plugin_1 = require("@xyo-network/react-payload-plugin");
|
|
5
|
-
const components_1 = require("./components");
|
|
6
|
-
exports.PriceForecastRenderPlugin = Object.assign({}, (0, react_payload_plugin_1.createPayloadRenderPlugin)({
|
|
7
|
-
canRender: () => true,
|
|
8
|
-
components: {
|
|
9
|
-
box: {
|
|
10
|
-
detailsBox: components_1.PriceForecastDetailsBox,
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
name: 'PriceForecast',
|
|
14
|
-
}));
|
|
15
|
-
//# sourceMappingURL=Plugin.js.map
|
package/dist/cjs/Plugin.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Plugin.js","sourceRoot":"","sources":["../../src/Plugin.ts"],"names":[],"mappings":";;;AAAA,4EAAkG;AAElG,6CAAsD;AAEzC,QAAA,yBAAyB,qBACjC,IAAA,gDAAyB,EAAC;IAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI;IACrB,UAAU,EAAE;QACV,GAAG,EAAE;YACH,UAAU,EAAE,oCAAuB;SACpC;KACF;IACD,IAAI,EAAE,eAAe;CACtB,CAAC,EACH"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PriceForecastDetailsBox = void 0;
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
require("chartjs-adapter-luxon");
|
|
7
|
-
const material_1 = require("@mui/material");
|
|
8
|
-
const react_async_effect_1 = require("@xylabs/react-async-effect");
|
|
9
|
-
const react_flexbox_1 = require("@xylabs/react-flexbox");
|
|
10
|
-
const chart_js_1 = require("chart.js");
|
|
11
|
-
const react_1 = require("react");
|
|
12
|
-
const react_chartjs_2_1 = require("react-chartjs-2");
|
|
13
|
-
const lib_1 = require("../lib");
|
|
14
|
-
chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.TimeScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.LinearScale, chart_js_1.Title, chart_js_1.Tooltip, chart_js_1.Legend);
|
|
15
|
-
const PriceForecastDetailsBox = (_a) => {
|
|
16
|
-
var { payload } = _a, props = tslib_1.__rest(_a, ["payload"]);
|
|
17
|
-
const priceForecastPayload = payload;
|
|
18
|
-
const theme = (0, material_1.useTheme)();
|
|
19
|
-
const [data, setData] = (0, react_1.useState)({ datasets: [] });
|
|
20
|
-
const [options, setOptions] = (0, react_1.useState)({});
|
|
21
|
-
(0, react_async_effect_1.useAsyncEffect)(
|
|
22
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
23
|
-
(mounted) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
24
|
-
const { data, options } = yield lib_1.ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
|
|
25
|
-
if (mounted()) {
|
|
26
|
-
setData(data);
|
|
27
|
-
setOptions(options);
|
|
28
|
-
}
|
|
29
|
-
}), [priceForecastPayload, theme]);
|
|
30
|
-
return ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, Object.assign({}, props, { busy: priceForecastPayload === undefined, minHeight: "25vh" }, { children: priceForecastPayload ? (0, jsx_runtime_1.jsx)(react_chartjs_2_1.Line, { options: options, data: data }) : null })));
|
|
31
|
-
};
|
|
32
|
-
exports.PriceForecastDetailsBox = PriceForecastDetailsBox;
|
|
33
|
-
//# sourceMappingURL=DetailsBox.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DetailsBox.js","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";;;;;AAAA,iCAA8B;AAE9B,4CAAwC;AACxC,mEAA2D;AAC3D,yDAA6D;AAG7D,uCAYiB;AACjB,iCAAgC;AAChC,qDAAsC;AAEtC,gCAAuD;AAEvD,gBAAO,CAAC,QAAQ,CAAC,wBAAa,EAAE,oBAAS,EAAE,uBAAY,EAAE,sBAAW,EAAE,sBAAW,EAAE,gBAAK,EAAE,kBAAO,EAAE,iBAAM,CAAC,CAAA;AAMnG,MAAM,uBAAuB,GAA2C,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,sBAAnB,WAAqB,CAAF;IACjG,MAAM,oBAAoB,GAAG,OAAsC,CAAA;IACnE,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAoB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAuB,EAAE,CAAC,CAAA;IAEhE,IAAA,mCAAc;IACZ,uDAAuD;IACvD,CAAO,OAAO,EAAE,EAAE;QAChB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,oCAA8B,CAAC,MAAM,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA;QACnH,IAAI,OAAO,EAAE,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,UAAU,CAAC,OAAO,CAAC,CAAA;SACpB;IACH,CAAC,CAAA,EACD,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAC9B,CAAA;IAED,OAAO,CACL,uBAAC,uBAAO,oBAAK,KAAK,IAAE,IAAI,EAAE,oBAAoB,KAAK,SAAS,EAAE,SAAS,EAAC,MAAM,gBAC3E,oBAAoB,CAAC,CAAC,CAAC,uBAAC,sBAAI,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IAC7D,CACX,CAAA;AACH,CAAC,CAAA;AAvBY,QAAA,uBAAuB,2BAuBnC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B"}
|
package/dist/cjs/index.js
DELETED
package/dist/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA4B;AAC5B,mDAAwB"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DataLineStyles = void 0;
|
|
4
|
-
const material_1 = require("@mui/material");
|
|
5
|
-
const DataLineStyles = (color) => ({
|
|
6
|
-
backgroundColor: color ? (0, material_1.alpha)(color, 0.5) : undefined,
|
|
7
|
-
borderColor: color,
|
|
8
|
-
});
|
|
9
|
-
exports.DataLineStyles = DataLineStyles;
|
|
10
|
-
//# sourceMappingURL=DataLineStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DataLineStyles.js","sourceRoot":"","sources":["../../../src/lib/DataLineStyles.ts"],"names":[],"mappings":";;;AAAA,4CAAqC;AAE9B,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC;IACjD,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,IAAA,gBAAK,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IACtD,WAAW,EAAE,KAAK;CACnB,CAAC,CAAA;AAHW,QAAA,cAAc,kBAGzB"}
|