@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
@@ -1,256 +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/components/index.ts
21
- var components_exports = {};
22
- __export(components_exports, {
23
- PriceForecastDetailsBox: () => PriceForecastDetailsBox
24
- });
25
- module.exports = __toCommonJS(components_exports);
26
-
27
- // src/components/DetailsBox.tsx
28
- var import_chartjs_adapter_luxon = require("chartjs-adapter-luxon");
29
- var import_material2 = require("@mui/material");
30
- var import_react_async_effect = require("@xylabs/react-async-effect");
31
- var import_react_flexbox = require("@xylabs/react-flexbox");
32
- var import_chart = require("chart.js");
33
- var import_react = require("react");
34
- var import_react_chartjs_2 = require("react-chartjs-2");
35
-
36
- // src/lib/DataLineStyles.ts
37
- var import_material = require("@mui/material");
38
- var DataLineStyles = (color) => ({
39
- backgroundColor: color ? (0, import_material.alpha)(color, 0.5) : void 0,
40
- borderColor: color
41
- });
42
-
43
- // src/lib/DataPointStyles.ts
44
- var DataPointStyles = (pointHoverBackgroundColor) => ({
45
- pointHitRadius: 20,
46
- pointHoverBackgroundColor,
47
- pointHoverRadius: 10,
48
- pointRadius: 5,
49
- pointStyle: "circle"
50
- });
51
-
52
- // src/lib/MockSourcePayloads.ts
53
- var MockSourcePayloads = () => {
54
- const tenMin = 6e5;
55
- return [
56
- {
57
- baseFee: 38.90155387825,
58
- feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },
59
- priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
60
- schema: "network.xyo.blockchain.ethereum.gas",
61
- timestamp: Date.now() - tenMin
62
- },
63
- {
64
- baseFee: 38.90155387825,
65
- feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },
66
- priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
67
- schema: "network.xyo.blockchain.ethereum.gas",
68
- timestamp: Date.now()
69
- }
70
- ];
71
- };
72
-
73
- // src/lib/SourcePayloads.ts
74
- var SourcePayloads = class {
75
- constructor(sourcePayloads) {
76
- this.sourcePayloads = sourcePayloads;
77
- }
78
- sourcePrices = [];
79
- get payloads() {
80
- return this.sourcePayloads;
81
- }
82
- static async build(jsonPath) {
83
- const sourcePayloads = await this.fetchSourcePayloads();
84
- const instance = new this(sourcePayloads);
85
- const paths = jsonPath.split(".");
86
- instance.sourcePrices = sourcePayloads.map((payload) => {
87
- return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
88
- });
89
- return instance;
90
- }
91
- // TODO - fetch from archivist
92
- static async fetchSourcePayloads() {
93
- const payloads = await Promise.resolve(MockSourcePayloads());
94
- return payloads;
95
- }
96
- jsonPathTraverser(obj, path) {
97
- let result = obj;
98
- for (const key of path) {
99
- if (key in result) {
100
- const foundKey = key;
101
- result = result[foundKey];
102
- } else {
103
- result = void 0;
104
- break;
105
- }
106
- }
107
- return result;
108
- }
109
- };
110
-
111
- // src/lib/ForecastLineChartConfigBuilder.ts
112
- var defaultOptions = () => ({
113
- plugins: {
114
- legend: {
115
- position: "top"
116
- }
117
- },
118
- responsive: true
119
- });
120
- var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
121
- constructor(theme, payload) {
122
- this.payload = payload;
123
- this.themeColors = this.parseTheme(theme);
124
- }
125
- data = {
126
- datasets: []
127
- };
128
- options = defaultOptions();
129
- themeColors;
130
- get forecastPayload() {
131
- if (this.payload) {
132
- return this.payload;
133
- } else {
134
- throw Error("ForecastPayload was not defined");
135
- }
136
- }
137
- static async create(theme, payload, sourcePayloadConfig) {
138
- const instance = new _ForecastLineChartConfigBuilder(theme, payload);
139
- await instance.build(sourcePayloadConfig?.fetch);
140
- instance.refreshValues();
141
- return instance;
142
- }
143
- async build(includeSources) {
144
- this.buildOptions();
145
- await this.buildData(includeSources);
146
- return this;
147
- }
148
- async buildData(includeSources) {
149
- const forecastData = this.generateDataSetForecastData();
150
- const datasets = [forecastData];
151
- if (includeSources) {
152
- const sourceData = await this.generateDataSetSourcePayloads();
153
- datasets.unshift(sourceData);
154
- const lastSourceDataItem = sourceData.data.at(-1);
155
- forecastData.data.unshift(lastSourceDataItem);
156
- }
157
- this.data = {
158
- datasets
159
- };
160
- return this;
161
- }
162
- buildOptions() {
163
- if (this.options.plugins) {
164
- this.options.plugins.title = this.generateTitle();
165
- this.options.plugins.legend = this.generateLegend();
166
- }
167
- this.options.scales = this.generateScales();
168
- return this;
169
- }
170
- refreshValues() {
171
- this.data = { ...this.data };
172
- this.options = { ...this.options };
173
- }
174
- generateLegend() {
175
- return {
176
- labels: {
177
- pointStyle: "circle",
178
- usePointStyle: true
179
- }
180
- };
181
- }
182
- generateScales() {
183
- return {
184
- x: {
185
- grid: {
186
- color: this.themeColors?.gridColor
187
- },
188
- time: {
189
- unit: "minute"
190
- },
191
- type: "time"
192
- },
193
- y: {
194
- grid: {
195
- color: this.themeColors?.gridColor
196
- }
197
- }
198
- };
199
- }
200
- generateTitle() {
201
- return {
202
- display: true,
203
- text: `Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ""})`
204
- };
205
- }
206
- parseTheme(theme) {
207
- const dark = theme.palette.mode === "dark";
208
- return {
209
- dataSetColorPrimary: theme.palette.primary.light,
210
- dataSetColorSecondary: theme.palette.secondary.light,
211
- gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300]
212
- };
213
- }
214
- generateDataSetForecastData() {
215
- return {
216
- borderDash: [5],
217
- borderDashOffset: 0.5,
218
- data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
219
- label: "Forecast Price",
220
- ...DataPointStyles(this.themeColors?.dataSetColorPrimary),
221
- ...DataLineStyles(this.themeColors?.dataSetColorPrimary)
222
- };
223
- }
224
- async generateDataSetSourcePayloads() {
225
- const { sourcePrices } = await SourcePayloads.build("feePerGas.medium");
226
- return {
227
- data: sourcePrices,
228
- label: "Source Prices",
229
- ...DataLineStyles(this.themeColors?.dataSetColorSecondary),
230
- ...DataPointStyles(this.themeColors?.dataSetColorSecondary)
231
- };
232
- }
233
- };
234
-
235
- // src/components/DetailsBox.tsx
236
- var import_jsx_runtime = require("react/jsx-runtime");
237
- 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);
238
- var PriceForecastDetailsBox = ({ payload, ...props }) => {
239
- const priceForecastPayload = payload;
240
- const theme = (0, import_material2.useTheme)();
241
- const [data, setData] = (0, import_react.useState)({ datasets: [] });
242
- const [options, setOptions] = (0, import_react.useState)({});
243
- (0, import_react_async_effect.useAsyncEffect)(
244
- // eslint-disable-next-line react-hooks/exhaustive-deps
245
- async (mounted) => {
246
- const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
247
- if (mounted()) {
248
- setData(data2);
249
- setOptions(options2);
250
- }
251
- },
252
- [priceForecastPayload, theme]
253
- );
254
- 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 });
255
- };
256
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/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"],"sourcesContent":["export * from './DetailsBox'\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,243 +0,0 @@
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
- export {
241
- PriceForecastDetailsBox
242
- };
243
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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"],"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"],"mappings":"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","names":["data","options"]}
@@ -1,31 +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/lib/DataLineStyles.ts
21
- var DataLineStyles_exports = {};
22
- __export(DataLineStyles_exports, {
23
- DataLineStyles: () => DataLineStyles
24
- });
25
- module.exports = __toCommonJS(DataLineStyles_exports);
26
- var import_material = require("@mui/material");
27
- var DataLineStyles = (color) => ({
28
- backgroundColor: color ? (0, import_material.alpha)(color, 0.5) : void 0,
29
- borderColor: color
30
- });
31
- //# sourceMappingURL=DataLineStyles.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/lib/DataLineStyles.ts"],"sourcesContent":["import { alpha } from '@mui/material'\n\nexport const DataLineStyles = (color?: string) => ({\n backgroundColor: color ? alpha(color, 0.5) : undefined,\n borderColor: color,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAsB;AAEf,IAAM,iBAAiB,CAAC,WAAoB;AAAA,EACjD,iBAAiB,YAAQ,uBAAM,OAAO,GAAG,IAAI;AAAA,EAC7C,aAAa;AACf;","names":[]}
@@ -1,10 +0,0 @@
1
- // src/lib/DataLineStyles.ts
2
- import { alpha } from "@mui/material";
3
- var DataLineStyles = (color) => ({
4
- backgroundColor: color ? alpha(color, 0.5) : void 0,
5
- borderColor: color
6
- });
7
- export {
8
- DataLineStyles
9
- };
10
- //# sourceMappingURL=DataLineStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/lib/DataLineStyles.ts"],"sourcesContent":["import { alpha } from '@mui/material'\n\nexport const DataLineStyles = (color?: string) => ({\n backgroundColor: color ? alpha(color, 0.5) : undefined,\n borderColor: color,\n})\n"],"mappings":";AAAA,SAAS,aAAa;AAEf,IAAM,iBAAiB,CAAC,WAAoB;AAAA,EACjD,iBAAiB,QAAQ,MAAM,OAAO,GAAG,IAAI;AAAA,EAC7C,aAAa;AACf;","names":[]}
@@ -1,33 +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/lib/DataPointStyles.ts
21
- var DataPointStyles_exports = {};
22
- __export(DataPointStyles_exports, {
23
- DataPointStyles: () => DataPointStyles
24
- });
25
- module.exports = __toCommonJS(DataPointStyles_exports);
26
- var DataPointStyles = (pointHoverBackgroundColor) => ({
27
- pointHitRadius: 20,
28
- pointHoverBackgroundColor,
29
- pointHoverRadius: 10,
30
- pointRadius: 5,
31
- pointStyle: "circle"
32
- });
33
- //# sourceMappingURL=DataPointStyles.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/lib/DataPointStyles.ts"],"sourcesContent":["export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({\n pointHitRadius: 20,\n pointHoverBackgroundColor,\n pointHoverRadius: 10,\n pointRadius: 5,\n pointStyle: 'circle',\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,IAAM,kBAAkB,CAAC,+BAAwC;AAAA,EACtE,gBAAgB;AAAA,EAChB;AAAA,EACA,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,YAAY;AACd;","names":[]}
@@ -1,12 +0,0 @@
1
- // src/lib/DataPointStyles.ts
2
- var DataPointStyles = (pointHoverBackgroundColor) => ({
3
- pointHitRadius: 20,
4
- pointHoverBackgroundColor,
5
- pointHoverRadius: 10,
6
- pointRadius: 5,
7
- pointStyle: "circle"
8
- });
9
- export {
10
- DataPointStyles
11
- };
12
- //# sourceMappingURL=DataPointStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/lib/DataPointStyles.ts"],"sourcesContent":["export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({\n pointHitRadius: 20,\n pointHoverBackgroundColor,\n pointHoverRadius: 10,\n pointRadius: 5,\n pointStyle: 'circle',\n})\n"],"mappings":";AAAO,IAAM,kBAAkB,CAAC,+BAAwC;AAAA,EACtE,gBAAgB;AAAA,EAChB;AAAA,EACA,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,YAAY;AACd;","names":[]}