@xyo-network/react-price-forecast-plugin 2.61.8 → 2.61.10

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.
Files changed (74) hide show
  1. package/dist/docs.json +3923 -671
  2. package/package.json +8 -8
  3. package/dist/browser/Plugin.cjs +0 -270
  4. package/dist/browser/Plugin.cjs.map +0 -1
  5. package/dist/browser/Plugin.js +0 -259
  6. package/dist/browser/Plugin.js.map +0 -1
  7. package/dist/browser/components/DetailsBox.cjs +0 -254
  8. package/dist/browser/components/DetailsBox.cjs.map +0 -1
  9. package/dist/browser/components/DetailsBox.js +0 -243
  10. package/dist/browser/components/DetailsBox.js.map +0 -1
  11. package/dist/browser/components/index.cjs +0 -256
  12. package/dist/browser/components/index.cjs.map +0 -1
  13. package/dist/browser/components/index.js +0 -243
  14. package/dist/browser/components/index.js.map +0 -1
  15. package/dist/browser/lib/DataLineStyles.cjs +0 -31
  16. package/dist/browser/lib/DataLineStyles.cjs.map +0 -1
  17. package/dist/browser/lib/DataLineStyles.js +0 -10
  18. package/dist/browser/lib/DataLineStyles.js.map +0 -1
  19. package/dist/browser/lib/DataPointStyles.cjs +0 -33
  20. package/dist/browser/lib/DataPointStyles.cjs.map +0 -1
  21. package/dist/browser/lib/DataPointStyles.js +0 -12
  22. package/dist/browser/lib/DataPointStyles.js.map +0 -1
  23. package/dist/browser/lib/ForecastLineChartConfigBuilder.cjs +0 -225
  24. package/dist/browser/lib/ForecastLineChartConfigBuilder.cjs.map +0 -1
  25. package/dist/browser/lib/ForecastLineChartConfigBuilder.js +0 -202
  26. package/dist/browser/lib/ForecastLineChartConfigBuilder.js.map +0 -1
  27. package/dist/browser/lib/MockSourcePayloads.cjs +0 -45
  28. package/dist/browser/lib/MockSourcePayloads.cjs.map +0 -1
  29. package/dist/browser/lib/MockSourcePayloads.js +0 -24
  30. package/dist/browser/lib/MockSourcePayloads.js.map +0 -1
  31. package/dist/browser/lib/SourcePayloads.cjs +0 -85
  32. package/dist/browser/lib/SourcePayloads.cjs.map +0 -1
  33. package/dist/browser/lib/SourcePayloads.js +0 -62
  34. package/dist/browser/lib/SourcePayloads.js.map +0 -1
  35. package/dist/browser/lib/index.cjs +0 -227
  36. package/dist/browser/lib/index.cjs.map +0 -1
  37. package/dist/browser/lib/index.js +0 -204
  38. package/dist/browser/lib/index.js.map +0 -1
  39. package/dist/node/Plugin.cjs +0 -278
  40. package/dist/node/Plugin.cjs.map +0 -1
  41. package/dist/node/Plugin.js +0 -263
  42. package/dist/node/Plugin.js.map +0 -1
  43. package/dist/node/components/DetailsBox.cjs +0 -262
  44. package/dist/node/components/DetailsBox.cjs.map +0 -1
  45. package/dist/node/components/DetailsBox.js +0 -247
  46. package/dist/node/components/DetailsBox.js.map +0 -1
  47. package/dist/node/components/index.cjs +0 -264
  48. package/dist/node/components/index.cjs.map +0 -1
  49. package/dist/node/components/index.js +0 -247
  50. package/dist/node/components/index.js.map +0 -1
  51. package/dist/node/lib/DataLineStyles.cjs +0 -35
  52. package/dist/node/lib/DataLineStyles.cjs.map +0 -1
  53. package/dist/node/lib/DataLineStyles.js +0 -10
  54. package/dist/node/lib/DataLineStyles.js.map +0 -1
  55. package/dist/node/lib/DataPointStyles.cjs +0 -37
  56. package/dist/node/lib/DataPointStyles.cjs.map +0 -1
  57. package/dist/node/lib/DataPointStyles.js +0 -12
  58. package/dist/node/lib/DataPointStyles.js.map +0 -1
  59. package/dist/node/lib/ForecastLineChartConfigBuilder.cjs +0 -233
  60. package/dist/node/lib/ForecastLineChartConfigBuilder.cjs.map +0 -1
  61. package/dist/node/lib/ForecastLineChartConfigBuilder.js +0 -206
  62. package/dist/node/lib/ForecastLineChartConfigBuilder.js.map +0 -1
  63. package/dist/node/lib/MockSourcePayloads.cjs +0 -49
  64. package/dist/node/lib/MockSourcePayloads.cjs.map +0 -1
  65. package/dist/node/lib/MockSourcePayloads.js +0 -24
  66. package/dist/node/lib/MockSourcePayloads.js.map +0 -1
  67. package/dist/node/lib/SourcePayloads.cjs +0 -89
  68. package/dist/node/lib/SourcePayloads.cjs.map +0 -1
  69. package/dist/node/lib/SourcePayloads.js +0 -62
  70. package/dist/node/lib/SourcePayloads.js.map +0 -1
  71. package/dist/node/lib/index.cjs +0 -237
  72. package/dist/node/lib/index.cjs.map +0 -1
  73. package/dist/node/lib/index.js +0 -208
  74. package/dist/node/lib/index.js.map +0 -1
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": "^3.0.15",
14
- "@xylabs/react-flexbox": "^3.0.15",
15
- "@xyo-network/diviner-forecasting-model": "^2.75.7",
16
- "@xyo-network/payload-model": "^2.75.7",
17
- "@xyo-network/react-payload-plugin": "~2.64.8",
13
+ "@xylabs/react-async-effect": "^3.0.18",
14
+ "@xylabs/react-flexbox": "^3.0.18",
15
+ "@xyo-network/diviner-forecasting-model": "^2.75.16",
16
+ "@xyo-network/payload-model": "^2.75.16",
17
+ "@xyo-network/react-payload-plugin": "~2.64.10",
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.6",
25
- "@xylabs/ts-scripts-yarn3": "^3.0.82",
26
- "@xylabs/tsconfig-react": "^3.0.82",
25
+ "@xylabs/ts-scripts-yarn3": "^3.1.3",
26
+ "@xylabs/tsconfig-react": "^3.1.3",
27
27
  "typescript": "^5.2.2"
28
28
  },
29
29
  "peerDependencies": {
@@ -85,6 +85,6 @@
85
85
  },
86
86
  "sideEffects": false,
87
87
  "types": "dist/browser/index.d.ts",
88
- "version": "2.61.8",
88
+ "version": "2.61.10",
89
89
  "type": "module"
90
90
  }
@@ -1,270 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/Plugin.ts
21
- var Plugin_exports = {};
22
- __export(Plugin_exports, {
23
- PriceForecastRenderPlugin: () => PriceForecastRenderPlugin
24
- });
25
- module.exports = __toCommonJS(Plugin_exports);
26
- var import_react_payload_plugin = require("@xyo-network/react-payload-plugin");
27
-
28
- // src/components/DetailsBox.tsx
29
- var import_chartjs_adapter_luxon = require("chartjs-adapter-luxon");
30
- var import_material2 = require("@mui/material");
31
- var import_react_async_effect = require("@xylabs/react-async-effect");
32
- var import_react_flexbox = require("@xylabs/react-flexbox");
33
- var import_chart = require("chart.js");
34
- var import_react = require("react");
35
- var import_react_chartjs_2 = require("react-chartjs-2");
36
-
37
- // src/lib/DataLineStyles.ts
38
- var import_material = require("@mui/material");
39
- var DataLineStyles = (color) => ({
40
- backgroundColor: color ? (0, import_material.alpha)(color, 0.5) : void 0,
41
- borderColor: color
42
- });
43
-
44
- // src/lib/DataPointStyles.ts
45
- var DataPointStyles = (pointHoverBackgroundColor) => ({
46
- pointHitRadius: 20,
47
- pointHoverBackgroundColor,
48
- pointHoverRadius: 10,
49
- pointRadius: 5,
50
- pointStyle: "circle"
51
- });
52
-
53
- // src/lib/MockSourcePayloads.ts
54
- var MockSourcePayloads = () => {
55
- const tenMin = 6e5;
56
- return [
57
- {
58
- baseFee: 38.90155387825,
59
- feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },
60
- priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
61
- schema: "network.xyo.blockchain.ethereum.gas",
62
- timestamp: Date.now() - tenMin
63
- },
64
- {
65
- baseFee: 38.90155387825,
66
- feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },
67
- priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
68
- schema: "network.xyo.blockchain.ethereum.gas",
69
- timestamp: Date.now()
70
- }
71
- ];
72
- };
73
-
74
- // src/lib/SourcePayloads.ts
75
- var SourcePayloads = class {
76
- constructor(sourcePayloads) {
77
- this.sourcePayloads = sourcePayloads;
78
- }
79
- sourcePrices = [];
80
- get payloads() {
81
- return this.sourcePayloads;
82
- }
83
- static async build(jsonPath) {
84
- const sourcePayloads = await this.fetchSourcePayloads();
85
- const instance = new this(sourcePayloads);
86
- const paths = jsonPath.split(".");
87
- instance.sourcePrices = sourcePayloads.map((payload) => {
88
- return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
89
- });
90
- return instance;
91
- }
92
- // TODO - fetch from archivist
93
- static async fetchSourcePayloads() {
94
- const payloads = await Promise.resolve(MockSourcePayloads());
95
- return payloads;
96
- }
97
- jsonPathTraverser(obj, path) {
98
- let result = obj;
99
- for (const key of path) {
100
- if (key in result) {
101
- const foundKey = key;
102
- result = result[foundKey];
103
- } else {
104
- result = void 0;
105
- break;
106
- }
107
- }
108
- return result;
109
- }
110
- };
111
-
112
- // src/lib/ForecastLineChartConfigBuilder.ts
113
- var defaultOptions = () => ({
114
- plugins: {
115
- legend: {
116
- position: "top"
117
- }
118
- },
119
- responsive: true
120
- });
121
- var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
122
- constructor(theme, payload) {
123
- this.payload = payload;
124
- this.themeColors = this.parseTheme(theme);
125
- }
126
- data = {
127
- datasets: []
128
- };
129
- options = defaultOptions();
130
- themeColors;
131
- get forecastPayload() {
132
- if (this.payload) {
133
- return this.payload;
134
- } else {
135
- throw Error("ForecastPayload was not defined");
136
- }
137
- }
138
- static async create(theme, payload, sourcePayloadConfig) {
139
- const instance = new _ForecastLineChartConfigBuilder(theme, payload);
140
- await instance.build(sourcePayloadConfig?.fetch);
141
- instance.refreshValues();
142
- return instance;
143
- }
144
- async build(includeSources) {
145
- this.buildOptions();
146
- await this.buildData(includeSources);
147
- return this;
148
- }
149
- async buildData(includeSources) {
150
- const forecastData = this.generateDataSetForecastData();
151
- const datasets = [forecastData];
152
- if (includeSources) {
153
- const sourceData = await this.generateDataSetSourcePayloads();
154
- datasets.unshift(sourceData);
155
- const lastSourceDataItem = sourceData.data.at(-1);
156
- forecastData.data.unshift(lastSourceDataItem);
157
- }
158
- this.data = {
159
- datasets
160
- };
161
- return this;
162
- }
163
- buildOptions() {
164
- if (this.options.plugins) {
165
- this.options.plugins.title = this.generateTitle();
166
- this.options.plugins.legend = this.generateLegend();
167
- }
168
- this.options.scales = this.generateScales();
169
- return this;
170
- }
171
- refreshValues() {
172
- this.data = { ...this.data };
173
- this.options = { ...this.options };
174
- }
175
- generateLegend() {
176
- return {
177
- labels: {
178
- pointStyle: "circle",
179
- usePointStyle: true
180
- }
181
- };
182
- }
183
- generateScales() {
184
- return {
185
- x: {
186
- grid: {
187
- color: this.themeColors?.gridColor
188
- },
189
- time: {
190
- unit: "minute"
191
- },
192
- type: "time"
193
- },
194
- y: {
195
- grid: {
196
- color: this.themeColors?.gridColor
197
- }
198
- }
199
- };
200
- }
201
- generateTitle() {
202
- return {
203
- display: true,
204
- text: `Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ""})`
205
- };
206
- }
207
- parseTheme(theme) {
208
- const dark = theme.palette.mode === "dark";
209
- return {
210
- dataSetColorPrimary: theme.palette.primary.light,
211
- dataSetColorSecondary: theme.palette.secondary.light,
212
- gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300]
213
- };
214
- }
215
- generateDataSetForecastData() {
216
- return {
217
- borderDash: [5],
218
- borderDashOffset: 0.5,
219
- data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
220
- label: "Forecast Price",
221
- ...DataPointStyles(this.themeColors?.dataSetColorPrimary),
222
- ...DataLineStyles(this.themeColors?.dataSetColorPrimary)
223
- };
224
- }
225
- async generateDataSetSourcePayloads() {
226
- const { sourcePrices } = await SourcePayloads.build("feePerGas.medium");
227
- return {
228
- data: sourcePrices,
229
- label: "Source Prices",
230
- ...DataLineStyles(this.themeColors?.dataSetColorSecondary),
231
- ...DataPointStyles(this.themeColors?.dataSetColorSecondary)
232
- };
233
- }
234
- };
235
-
236
- // src/components/DetailsBox.tsx
237
- var import_jsx_runtime = require("react/jsx-runtime");
238
- 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 }) => {
240
- const priceForecastPayload = payload;
241
- const theme = (0, import_material2.useTheme)();
242
- const [data, setData] = (0, import_react.useState)({ datasets: [] });
243
- const [options, setOptions] = (0, import_react.useState)({});
244
- (0, import_react_async_effect.useAsyncEffect)(
245
- // eslint-disable-next-line react-hooks/exhaustive-deps
246
- async (mounted) => {
247
- const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
248
- if (mounted()) {
249
- setData(data2);
250
- setOptions(options2);
251
- }
252
- },
253
- [priceForecastPayload, theme]
254
- );
255
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_flexbox.FlexCol, { ...props, busy: priceForecastPayload === void 0, minHeight: "25vh", children: priceForecastPayload ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_chartjs_2.Line, { options, data }) : null });
256
- };
257
-
258
- // src/Plugin.ts
259
- var PriceForecastRenderPlugin = {
260
- ...(0, import_react_payload_plugin.createPayloadRenderPlugin)({
261
- canRender: () => true,
262
- components: {
263
- box: {
264
- detailsBox: PriceForecastDetailsBox
265
- }
266
- },
267
- name: "PriceForecast"
268
- })
269
- };
270
- //# sourceMappingURL=Plugin.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Plugin.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"],"sourcesContent":["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","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"],"mappings":"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","names":["import_material","ChartJS","data","options"]}
@@ -1,259 +0,0 @@
1
- // src/Plugin.ts
2
- import { createPayloadRenderPlugin } from "@xyo-network/react-payload-plugin";
3
-
4
- // src/components/DetailsBox.tsx
5
- import "chartjs-adapter-luxon";
6
- import { useTheme } from "@mui/material";
7
- import { useAsyncEffect } from "@xylabs/react-async-effect";
8
- import { FlexCol } from "@xylabs/react-flexbox";
9
- import {
10
- CategoryScale,
11
- Chart as ChartJS,
12
- Legend,
13
- LinearScale,
14
- LineElement,
15
- PointElement,
16
- TimeScale,
17
- Title,
18
- Tooltip
19
- } from "chart.js";
20
- import { useState } from "react";
21
- import { Line } from "react-chartjs-2";
22
-
23
- // src/lib/DataLineStyles.ts
24
- import { alpha } from "@mui/material";
25
- var DataLineStyles = (color) => ({
26
- backgroundColor: color ? alpha(color, 0.5) : void 0,
27
- borderColor: color
28
- });
29
-
30
- // src/lib/DataPointStyles.ts
31
- var DataPointStyles = (pointHoverBackgroundColor) => ({
32
- pointHitRadius: 20,
33
- pointHoverBackgroundColor,
34
- pointHoverRadius: 10,
35
- pointRadius: 5,
36
- pointStyle: "circle"
37
- });
38
-
39
- // src/lib/MockSourcePayloads.ts
40
- var MockSourcePayloads = () => {
41
- const tenMin = 6e5;
42
- return [
43
- {
44
- baseFee: 38.90155387825,
45
- feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },
46
- priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
47
- schema: "network.xyo.blockchain.ethereum.gas",
48
- timestamp: Date.now() - tenMin
49
- },
50
- {
51
- baseFee: 38.90155387825,
52
- feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },
53
- priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
54
- schema: "network.xyo.blockchain.ethereum.gas",
55
- timestamp: Date.now()
56
- }
57
- ];
58
- };
59
-
60
- // src/lib/SourcePayloads.ts
61
- var SourcePayloads = class {
62
- constructor(sourcePayloads) {
63
- this.sourcePayloads = sourcePayloads;
64
- }
65
- sourcePrices = [];
66
- get payloads() {
67
- return this.sourcePayloads;
68
- }
69
- static async build(jsonPath) {
70
- const sourcePayloads = await this.fetchSourcePayloads();
71
- const instance = new this(sourcePayloads);
72
- const paths = jsonPath.split(".");
73
- instance.sourcePrices = sourcePayloads.map((payload) => {
74
- return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
75
- });
76
- return instance;
77
- }
78
- // TODO - fetch from archivist
79
- static async fetchSourcePayloads() {
80
- const payloads = await Promise.resolve(MockSourcePayloads());
81
- return payloads;
82
- }
83
- jsonPathTraverser(obj, path) {
84
- let result = obj;
85
- for (const key of path) {
86
- if (key in result) {
87
- const foundKey = key;
88
- result = result[foundKey];
89
- } else {
90
- result = void 0;
91
- break;
92
- }
93
- }
94
- return result;
95
- }
96
- };
97
-
98
- // src/lib/ForecastLineChartConfigBuilder.ts
99
- var defaultOptions = () => ({
100
- plugins: {
101
- legend: {
102
- position: "top"
103
- }
104
- },
105
- responsive: true
106
- });
107
- var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
108
- constructor(theme, payload) {
109
- this.payload = payload;
110
- this.themeColors = this.parseTheme(theme);
111
- }
112
- data = {
113
- datasets: []
114
- };
115
- options = defaultOptions();
116
- themeColors;
117
- get forecastPayload() {
118
- if (this.payload) {
119
- return this.payload;
120
- } else {
121
- throw Error("ForecastPayload was not defined");
122
- }
123
- }
124
- static async create(theme, payload, sourcePayloadConfig) {
125
- const instance = new _ForecastLineChartConfigBuilder(theme, payload);
126
- await instance.build(sourcePayloadConfig?.fetch);
127
- instance.refreshValues();
128
- return instance;
129
- }
130
- async build(includeSources) {
131
- this.buildOptions();
132
- await this.buildData(includeSources);
133
- return this;
134
- }
135
- async buildData(includeSources) {
136
- const forecastData = this.generateDataSetForecastData();
137
- const datasets = [forecastData];
138
- if (includeSources) {
139
- const sourceData = await this.generateDataSetSourcePayloads();
140
- datasets.unshift(sourceData);
141
- const lastSourceDataItem = sourceData.data.at(-1);
142
- forecastData.data.unshift(lastSourceDataItem);
143
- }
144
- this.data = {
145
- datasets
146
- };
147
- return this;
148
- }
149
- buildOptions() {
150
- if (this.options.plugins) {
151
- this.options.plugins.title = this.generateTitle();
152
- this.options.plugins.legend = this.generateLegend();
153
- }
154
- this.options.scales = this.generateScales();
155
- return this;
156
- }
157
- refreshValues() {
158
- this.data = { ...this.data };
159
- this.options = { ...this.options };
160
- }
161
- generateLegend() {
162
- return {
163
- labels: {
164
- pointStyle: "circle",
165
- usePointStyle: true
166
- }
167
- };
168
- }
169
- generateScales() {
170
- return {
171
- x: {
172
- grid: {
173
- color: this.themeColors?.gridColor
174
- },
175
- time: {
176
- unit: "minute"
177
- },
178
- type: "time"
179
- },
180
- y: {
181
- grid: {
182
- color: this.themeColors?.gridColor
183
- }
184
- }
185
- };
186
- }
187
- generateTitle() {
188
- return {
189
- display: true,
190
- text: `Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ""})`
191
- };
192
- }
193
- parseTheme(theme) {
194
- const dark = theme.palette.mode === "dark";
195
- return {
196
- dataSetColorPrimary: theme.palette.primary.light,
197
- dataSetColorSecondary: theme.palette.secondary.light,
198
- gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300]
199
- };
200
- }
201
- generateDataSetForecastData() {
202
- return {
203
- borderDash: [5],
204
- borderDashOffset: 0.5,
205
- data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
206
- label: "Forecast Price",
207
- ...DataPointStyles(this.themeColors?.dataSetColorPrimary),
208
- ...DataLineStyles(this.themeColors?.dataSetColorPrimary)
209
- };
210
- }
211
- async generateDataSetSourcePayloads() {
212
- const { sourcePrices } = await SourcePayloads.build("feePerGas.medium");
213
- return {
214
- data: sourcePrices,
215
- label: "Source Prices",
216
- ...DataLineStyles(this.themeColors?.dataSetColorSecondary),
217
- ...DataPointStyles(this.themeColors?.dataSetColorSecondary)
218
- };
219
- }
220
- };
221
-
222
- // src/components/DetailsBox.tsx
223
- import { jsx } from "react/jsx-runtime";
224
- ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend);
225
- var PriceForecastDetailsBox = ({ payload, ...props }) => {
226
- const priceForecastPayload = payload;
227
- const theme = useTheme();
228
- const [data, setData] = useState({ datasets: [] });
229
- const [options, setOptions] = useState({});
230
- useAsyncEffect(
231
- // eslint-disable-next-line react-hooks/exhaustive-deps
232
- async (mounted) => {
233
- const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
234
- if (mounted()) {
235
- setData(data2);
236
- setOptions(options2);
237
- }
238
- },
239
- [priceForecastPayload, theme]
240
- );
241
- return /* @__PURE__ */ jsx(FlexCol, { ...props, busy: priceForecastPayload === void 0, minHeight: "25vh", children: priceForecastPayload ? /* @__PURE__ */ jsx(Line, { options, data }) : null });
242
- };
243
-
244
- // src/Plugin.ts
245
- var PriceForecastRenderPlugin = {
246
- ...createPayloadRenderPlugin({
247
- canRender: () => true,
248
- components: {
249
- box: {
250
- detailsBox: PriceForecastDetailsBox
251
- }
252
- },
253
- name: "PriceForecast"
254
- })
255
- };
256
- export {
257
- PriceForecastRenderPlugin
258
- };
259
- //# sourceMappingURL=Plugin.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Plugin.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"],"sourcesContent":["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","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"],"mappings":"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","names":["data","options"]}