@xyo-network/react-price-forecast-plugin 2.75.0 → 2.75.2

package/dist/browser/index.cjs

@@ -1,2 +1,271 @@
-"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var k=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},L=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of O(e))!T.call(o,r)&&r!==t&&c(o,r,{get:()=>e[r],enumerable:!(a=v(e,r))||a.enumerable});return o};var R=o=>L(c({},"__esModule",{value:!0}),o);var H={};k(H,{PriceForecastDetailsBox:()=>u,PriceForecastRenderPlugin:()=>G});module.exports=R(H);var $=require("chartjs-adapter-luxon"),f=require("@mui/material"),g=require("@xylabs/react-async-effect"),_=require("@xylabs/react-flexbox"),s=require("chart.js"),m=require("react"),C=require("react-chartjs-2");var y=require("@mui/material"),d=o=>({backgroundColor:o?(0,y.alpha)(o,.5):void 0,borderColor:o});var p=o=>({pointHitRadius:20,pointHoverBackgroundColor:o,pointHoverRadius:10,pointRadius:5,pointStyle:"circle"});var P=()=>[{baseFee:38.90155387825,feePerGas:{high:47.9945864396,low:39.006868093,medium:39.306868093,veryHigh:44.45384380525},priorityFeePerGas:{high:1.0266666666666666,low:-.41000000000000003,medium:.38,veryHigh:1.3900000000000001},schema:"network.xyo.blockchain.ethereum.gas",timestamp:Date.now()-6e5},{baseFee:38.90155387825,feePerGas:{high:47.9945864396,low:39.006868093,medium:100,veryHigh:44.45384380525},priorityFeePerGas:{high:1.0266666666666666,low:-.41000000000000003,medium:.38,veryHigh:1.3900000000000001},schema:"network.xyo.blockchain.ethereum.gas",timestamp:Date.now()}];var n=class{constructor(e){this.sourcePayloads=e}sourcePrices=[];get payloads(){return this.sourcePayloads}static async build(e){let t=await this.fetchSourcePayloads(),a=new this(t),r=e.split(".");return a.sourcePrices=t.map(i=>({x:i.timestamp,y:a.jsonPathTraverser(i,r)})),a}static async fetchSourcePayloads(){return await Promise.resolve(P())}jsonPathTraverser(e,t){let a=e;for(let r of t)if(r in a)a=a[r];else{a=void 0;break}return a}};var B=()=>({plugins:{legend:{position:"top"}},responsive:!0}),l=class o{constructor(e,t){this.payload=t;this.themeColors=this.parseTheme(e)}data={datasets:[]};options=B();themeColors;get forecastPayload(){if(this.payload)return this.payload;throw new Error("ForecastPayload was not defined")}static async create(e,t,a){let r=new o(e,t);return await r.build(a?.fetch),r.refreshValues(),r}async build(e){return this.buildOptions(),await this.buildData(e),this}async buildData(e){let t=this.generateDataSetForecastData(),a=[t];if(e){let r=await this.generateDataSetSourcePayloads();a.unshift(r);let i=r.data.at(-1);t.data.unshift(i)}return this.data={datasets:a},this}buildOptions(){return this.options.plugins&&(this.options.plugins.title=this.generateTitle(),this.options.plugins.legend=this.generateLegend()),this.options.scales=this.generateScales(),this}refreshValues(){this.data={...this.data},this.options={...this.options}}generateLegend(){return{labels:{pointStyle:"circle",usePointStyle:!0}}}generateScales(){return{x:{grid:{color:this.themeColors?.gridColor},time:{unit:"minute"},type:"time"},y:{grid:{color:this.themeColors?.gridColor}}}}generateTitle(){return{display:!0,text:`Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp?new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString():""})`}}parseTheme(e){let t=e.palette.mode==="dark";return{dataSetColorPrimary:e.palette.primary.light,dataSetColorSecondary:e.palette.secondary.light,gridColor:t?e.palette.grey[800]:e.palette.grey[300]}}generateDataSetForecastData(){return{borderDash:[5],borderDashOffset:.5,data:this.forecastPayload.values.map(e=>({x:e.timestamp??0,y:e.value})),label:"Forecast Price",...p(this.themeColors?.dataSetColorPrimary),...d(this.themeColors?.dataSetColorPrimary)}}async generateDataSetSourcePayloads(){let{sourcePrices:e}=await n.build("feePerGas.medium");return{data:e,label:"Source Prices",...d(this.themeColors?.dataSetColorSecondary),...p(this.themeColors?.dataSetColorSecondary)}}};var h=require("react/jsx-runtime");s.Chart.register(s.CategoryScale,s.TimeScale,s.PointElement,s.LineElement,s.LinearScale,s.Title,s.Tooltip,s.Legend);var u=({payload:o,...e})=>{let t=o,a=(0,f.useTheme)(),[r,i]=(0,m.useState)({datasets:[]}),[D,b]=(0,m.useState)({});return(0,g.useAsyncEffect)(async x=>{let{data:F,options:w}=await l.create(a,t,{fetch:!0});x()&&(i(F),b(w))},[t,a]),(0,h.jsx)(_.FlexCol,{...e,busy:t===void 0,minHeight:"25vh",children:t?(0,h.jsx)(C.Line,{options:D,data:r}):null})};var S=require("@xyo-network/react-payload-plugin");var G={...(0,S.createPayloadRenderPlugin)({canRender:()=>!0,components:{box:{detailsBox:u}},name:"PriceForecast"})};
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PriceForecastDetailsBox: () => PriceForecastDetailsBox,
+  PriceForecastRenderPlugin: () => PriceForecastRenderPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/DetailsBox.tsx
+var import_chartjs_adapter_luxon = require("chartjs-adapter-luxon");
+var import_material2 = require("@mui/material");
+var import_react_async_effect = require("@xylabs/react-async-effect");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_chart = require("chart.js");
+var import_react = require("react");
+var import_react_chartjs_2 = require("react-chartjs-2");
+
+// src/lib/DataLineStyles.ts
+var import_material = require("@mui/material");
+var DataLineStyles = (color) => ({
+  backgroundColor: color ? (0, import_material.alpha)(color, 0.5) : void 0,
+  borderColor: color
+});
+
+// src/lib/DataPointStyles.ts
+var DataPointStyles = (pointHoverBackgroundColor) => ({
+  pointHitRadius: 20,
+  pointHoverBackgroundColor,
+  pointHoverRadius: 10,
+  pointRadius: 5,
+  pointStyle: "circle"
+});
+
+// src/lib/MockSourcePayloads.ts
+var MockSourcePayloads = () => {
+  const tenMin = 6e5;
+  return [
+    {
+      baseFee: 38.90155387825,
+      feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },
+      priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
+      schema: "network.xyo.blockchain.ethereum.gas",
+      timestamp: Date.now() - tenMin
+    },
+    {
+      baseFee: 38.90155387825,
+      feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },
+      priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
+      schema: "network.xyo.blockchain.ethereum.gas",
+      timestamp: Date.now()
+    }
+  ];
+};
+
+// src/lib/SourcePayloads.ts
+var SourcePayloads = class {
+  constructor(sourcePayloads) {
+    this.sourcePayloads = sourcePayloads;
+  }
+  sourcePrices = [];
+  get payloads() {
+    return this.sourcePayloads;
+  }
+  static async build(jsonPath) {
+    const sourcePayloads = await this.fetchSourcePayloads();
+    const instance = new this(sourcePayloads);
+    const paths = jsonPath.split(".");
+    instance.sourcePrices = sourcePayloads.map((payload) => {
+      return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
+    });
+    return instance;
+  }
+  // TODO - fetch from archivist
+  static async fetchSourcePayloads() {
+    const payloads = await Promise.resolve(MockSourcePayloads());
+    return payloads;
+  }
+  jsonPathTraverser(obj, path) {
+    let result = obj;
+    for (const key of path) {
+      if (key in result) {
+        const foundKey = key;
+        result = result[foundKey];
+      } else {
+        result = void 0;
+        break;
+      }
+    }
+    return result;
+  }
+};
+
+// src/lib/ForecastLineChartConfigBuilder.ts
+var defaultOptions = () => ({
+  plugins: {
+    legend: {
+      position: "top"
+    }
+  },
+  responsive: true
+});
+var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
+  constructor(theme, payload) {
+    this.payload = payload;
+    this.themeColors = this.parseTheme(theme);
+  }
+  data = {
+    datasets: []
+  };
+  options = defaultOptions();
+  themeColors;
+  get forecastPayload() {
+    if (this.payload) {
+      return this.payload;
+    } else {
+      throw new Error("ForecastPayload was not defined");
+    }
+  }
+  static async create(theme, payload, sourcePayloadConfig) {
+    const instance = new _ForecastLineChartConfigBuilder(theme, payload);
+    await instance.build(sourcePayloadConfig?.fetch);
+    instance.refreshValues();
+    return instance;
+  }
+  async build(includeSources) {
+    this.buildOptions();
+    await this.buildData(includeSources);
+    return this;
+  }
+  async buildData(includeSources) {
+    const forecastData = this.generateDataSetForecastData();
+    const datasets = [forecastData];
+    if (includeSources) {
+      const sourceData = await this.generateDataSetSourcePayloads();
+      datasets.unshift(sourceData);
+      const lastSourceDataItem = sourceData.data.at(-1);
+      forecastData.data.unshift(lastSourceDataItem);
+    }
+    this.data = {
+      datasets
+    };
+    return this;
+  }
+  buildOptions() {
+    if (this.options.plugins) {
+      this.options.plugins.title = this.generateTitle();
+      this.options.plugins.legend = this.generateLegend();
+    }
+    this.options.scales = this.generateScales();
+    return this;
+  }
+  refreshValues() {
+    this.data = { ...this.data };
+    this.options = { ...this.options };
+  }
+  generateLegend() {
+    return {
+      labels: {
+        pointStyle: "circle",
+        usePointStyle: true
+      }
+    };
+  }
+  generateScales() {
+    return {
+      x: {
+        grid: {
+          color: this.themeColors?.gridColor
+        },
+        time: {
+          unit: "minute"
+        },
+        type: "time"
+      },
+      y: {
+        grid: {
+          color: this.themeColors?.gridColor
+        }
+      }
+    };
+  }
+  generateTitle() {
+    return {
+      display: true,
+      text: `Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ""})`
+    };
+  }
+  parseTheme(theme) {
+    const dark = theme.palette.mode === "dark";
+    return {
+      dataSetColorPrimary: theme.palette.primary.light,
+      dataSetColorSecondary: theme.palette.secondary.light,
+      gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300]
+    };
+  }
+  generateDataSetForecastData() {
+    return {
+      borderDash: [5],
+      borderDashOffset: 0.5,
+      data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
+      label: "Forecast Price",
+      ...DataPointStyles(this.themeColors?.dataSetColorPrimary),
+      ...DataLineStyles(this.themeColors?.dataSetColorPrimary)
+    };
+  }
+  async generateDataSetSourcePayloads() {
+    const { sourcePrices } = await SourcePayloads.build("feePerGas.medium");
+    return {
+      data: sourcePrices,
+      label: "Source Prices",
+      ...DataLineStyles(this.themeColors?.dataSetColorSecondary),
+      ...DataPointStyles(this.themeColors?.dataSetColorSecondary)
+    };
+  }
+};
+
+// src/components/DetailsBox.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+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);
+var PriceForecastDetailsBox = ({ payload, ...props }) => {
+  const priceForecastPayload = payload;
+  const theme = (0, import_material2.useTheme)();
+  const [data, setData] = (0, import_react.useState)({ datasets: [] });
+  const [options, setOptions] = (0, import_react.useState)({});
+  (0, import_react_async_effect.useAsyncEffect)(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
+      if (mounted()) {
+        setData(data2);
+        setOptions(options2);
+      }
+    },
+    [priceForecastPayload, theme]
+  );
+  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 });
+};
+
+// src/Plugin.ts
+var import_react_payload_plugin = require("@xyo-network/react-payload-plugin");
+var PriceForecastRenderPlugin = {
+  ...(0, import_react_payload_plugin.createPayloadRenderPlugin)({
+    canRender: () => true,
+    components: {
+      box: {
+        detailsBox: PriceForecastDetailsBox
+      }
+    },
+    name: "PriceForecast"
+  })
+};
 //# sourceMappingURL=index.cjs.map

package/dist/browser/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/DetailsBox.tsx","../../src/lib/DataLineStyles.ts","../../src/lib/DataPointStyles.ts","../../src/lib/MockSourcePayloads.ts","../../src/lib/SourcePayloads.ts","../../src/lib/ForecastLineChartConfigBuilder.ts","../../src/Plugin.ts"],"sourcesContent":["export * from './components'\nexport * from './Plugin'\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 ?\n        <Line options={options} data={data} />\n      : null}\n    </FlexCol>\n  )\n}\n","import { alpha } from '@mui/material'\n\nexport const DataLineStyles = (color?: string) => ({\n  backgroundColor: color ? alpha(color, 0.5) : undefined,\n  borderColor: color,\n})\n","export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({\n  pointHitRadius: 20,\n  pointHoverBackgroundColor,\n  pointHoverRadius: 10,\n  pointRadius: 5,\n  pointStyle: 'circle',\n})\n","export const MockSourcePayloads = () => {\n  const tenMin = 600_000\n  return [\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25 },\n      priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n      schema: 'network.xyo.blockchain.ethereum.gas',\n      timestamp: Date.now() - tenMin,\n    },\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25 },\n      priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n      schema: 'network.xyo.blockchain.ethereum.gas',\n      timestamp: Date.now(),\n    },\n  ]\n}\n","import { Payload } from '@xyo-network/payload-model'\nimport { Point } from 'chart.js'\n\nimport { MockSourcePayloads } from './MockSourcePayloads'\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 new Error('ForecastPayload was not defined')\n    }\n  }\n\n  static async create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig) {\n    const instance = new ForecastLineChartConfigBuilder(theme, payload)\n\n    await instance.build(sourcePayloadConfig?.fetch)\n\n    instance.refreshValues()\n\n    return instance\n  }\n\n  async build(includeSources?: boolean) {\n    this.buildOptions()\n    await this.buildData(includeSources)\n    return this\n  }\n\n  async buildData(includeSources?: boolean) {\n    const forecastData = this.generateDataSetForecastData()\n\n    const datasets: ChartDataset<'line'>[] = [forecastData]\n\n    if (includeSources) {\n      // build data from sources in forecastPayload\n      const sourceData = await this.generateDataSetSourcePayloads()\n      datasets.unshift(sourceData)\n\n      // add last source point as first item in prediction to connect the lines\n      const lastSourceDataItem = sourceData.data.at(-1) as Point\n      forecastData.data.unshift(lastSourceDataItem)\n    }\n\n    this.data = {\n      datasets,\n    }\n\n    return this\n  }\n\n  buildOptions() {\n    if (this.options.plugins) {\n      this.options.plugins.title = this.generateTitle()\n      this.options.plugins.legend = this.generateLegend()\n    }\n    this.options.scales = this.generateScales()\n\n    return this\n  }\n\n  refreshValues() {\n    this.data = { ...this.data }\n    this.options = { ...this.options }\n  }\n\n  protected generateLegend(): _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":["src_exports","__export","PriceForecastDetailsBox","PriceForecastRenderPlugin","__toCommonJS","import_chartjs_adapter_luxon","import_material","import_react_async_effect","import_react_flexbox","import_chart","import_react","import_react_chartjs_2","import_material","DataLineStyles","color","DataPointStyles","pointHoverBackgroundColor","MockSourcePayloads","SourcePayloads","sourcePayloads","jsonPath","instance","paths","payload","MockSourcePayloads","obj","path","result","key","defaultOptions","ForecastLineChartConfigBuilder","_ForecastLineChartConfigBuilder","theme","payload","sourcePayloadConfig","instance","includeSources","forecastData","datasets","sourceData","lastSourceDataItem","dark","price","DataPointStyles","DataLineStyles","sourcePrices","SourcePayloads","import_jsx_runtime","ChartJS","PriceForecastDetailsBox","payload","props","priceForecastPayload","theme","data","setData","options","setOptions","mounted","ForecastLineChartConfigBuilder","import_react_payload_plugin","PriceForecastRenderPlugin","PriceForecastDetailsBox"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/DetailsBox.tsx","../../src/lib/DataLineStyles.ts","../../src/lib/DataPointStyles.ts","../../src/lib/MockSourcePayloads.ts","../../src/lib/SourcePayloads.ts","../../src/lib/ForecastLineChartConfigBuilder.ts","../../src/Plugin.ts"],"sourcesContent":["export * from './components'\nexport * from './Plugin'\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 ?\n        <Line options={options} data={data} />\n      : null}\n    </FlexCol>\n  )\n}\n","import { alpha } from '@mui/material'\n\nexport const DataLineStyles = (color?: string) => ({\n  backgroundColor: color ? alpha(color, 0.5) : undefined,\n  borderColor: color,\n})\n","export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({\n  pointHitRadius: 20,\n  pointHoverBackgroundColor,\n  pointHoverRadius: 10,\n  pointRadius: 5,\n  pointStyle: 'circle',\n})\n","export const MockSourcePayloads = () => {\n  const tenMin = 600_000\n  return [\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25 },\n      priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n      schema: 'network.xyo.blockchain.ethereum.gas',\n      timestamp: Date.now() - tenMin,\n    },\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: { high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25 },\n      priorityFeePerGas: { high: 1.026_666_666_666_666_6, low: -0.410_000_000_000_000_03, medium: 0.38, veryHigh: 1.390_000_000_000_000_1 },\n      schema: 'network.xyo.blockchain.ethereum.gas',\n      timestamp: Date.now(),\n    },\n  ]\n}\n","import { Payload } from '@xyo-network/payload-model'\nimport { Point } from 'chart.js'\n\nimport { MockSourcePayloads } from './MockSourcePayloads'\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 new Error('ForecastPayload was not defined')\n    }\n  }\n\n  static async create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig) {\n    const instance = new ForecastLineChartConfigBuilder(theme, payload)\n\n    await instance.build(sourcePayloadConfig?.fetch)\n\n    instance.refreshValues()\n\n    return instance\n  }\n\n  async build(includeSources?: boolean) {\n    this.buildOptions()\n    await this.buildData(includeSources)\n    return this\n  }\n\n  async buildData(includeSources?: boolean) {\n    const forecastData = this.generateDataSetForecastData()\n\n    const datasets: ChartDataset<'line'>[] = [forecastData]\n\n    if (includeSources) {\n      // build data from sources in forecastPayload\n      const sourceData = await this.generateDataSetSourcePayloads()\n      datasets.unshift(sourceData)\n\n      // add last source point as first item in prediction to connect the lines\n      const lastSourceDataItem = sourceData.data.at(-1) as Point\n      forecastData.data.unshift(lastSourceDataItem)\n    }\n\n    this.data = {\n      datasets,\n    }\n\n    return this\n  }\n\n  buildOptions() {\n    if (this.options.plugins) {\n      this.options.plugins.title = this.generateTitle()\n      this.options.plugins.legend = this.generateLegend()\n    }\n    this.options.scales = this.generateScales()\n\n    return this\n  }\n\n  refreshValues() {\n    this.data = { ...this.data }\n    this.options = { ...this.options }\n  }\n\n  protected generateLegend(): _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":["import_material","ChartJS","data","options"]}

package/dist/browser/index.js

@@ -1,2 +1,258 @@
-import"chartjs-adapter-luxon";import{useTheme as S}from"@mui/material";import{useAsyncEffect as D}from"@xylabs/react-async-effect";import{FlexCol as b}from"@xylabs/react-flexbox";import{CategoryScale as x,Chart as F,Legend as w,LinearScale as v,LineElement as O,PointElement as T,TimeScale as k,Title as L,Tooltip as R}from"chart.js";import{useState as p}from"react";import{Line as B}from"react-chartjs-2";import{alpha as _}from"@mui/material";var l=r=>({backgroundColor:r?_(r,.5):void 0,borderColor:r});var c=r=>({pointHitRadius:20,pointHoverBackgroundColor:r,pointHoverRadius:10,pointRadius:5,pointStyle:"circle"});var d=()=>[{baseFee:38.90155387825,feePerGas:{high:47.9945864396,low:39.006868093,medium:39.306868093,veryHigh:44.45384380525},priorityFeePerGas:{high:1.0266666666666666,low:-.41000000000000003,medium:.38,veryHigh:1.3900000000000001},schema:"network.xyo.blockchain.ethereum.gas",timestamp:Date.now()-6e5},{baseFee:38.90155387825,feePerGas:{high:47.9945864396,low:39.006868093,medium:100,veryHigh:44.45384380525},priorityFeePerGas:{high:1.0266666666666666,low:-.41000000000000003,medium:.38,veryHigh:1.3900000000000001},schema:"network.xyo.blockchain.ethereum.gas",timestamp:Date.now()}];var i=class{constructor(e){this.sourcePayloads=e}sourcePrices=[];get payloads(){return this.sourcePayloads}static async build(e){let t=await this.fetchSourcePayloads(),a=new this(t),o=e.split(".");return a.sourcePrices=t.map(s=>({x:s.timestamp,y:a.jsonPathTraverser(s,o)})),a}static async fetchSourcePayloads(){return await Promise.resolve(d())}jsonPathTraverser(e,t){let a=e;for(let o of t)if(o in a)a=a[o];else{a=void 0;break}return a}};var C=()=>({plugins:{legend:{position:"top"}},responsive:!0}),n=class r{constructor(e,t){this.payload=t;this.themeColors=this.parseTheme(e)}data={datasets:[]};options=C();themeColors;get forecastPayload(){if(this.payload)return this.payload;throw new Error("ForecastPayload was not defined")}static async create(e,t,a){let o=new r(e,t);return await o.build(a?.fetch),o.refreshValues(),o}async build(e){return this.buildOptions(),await this.buildData(e),this}async buildData(e){let t=this.generateDataSetForecastData(),a=[t];if(e){let o=await this.generateDataSetSourcePayloads();a.unshift(o);let s=o.data.at(-1);t.data.unshift(s)}return this.data={datasets:a},this}buildOptions(){return this.options.plugins&&(this.options.plugins.title=this.generateTitle(),this.options.plugins.legend=this.generateLegend()),this.options.scales=this.generateScales(),this}refreshValues(){this.data={...this.data},this.options={...this.options}}generateLegend(){return{labels:{pointStyle:"circle",usePointStyle:!0}}}generateScales(){return{x:{grid:{color:this.themeColors?.gridColor},time:{unit:"minute"},type:"time"},y:{grid:{color:this.themeColors?.gridColor}}}}generateTitle(){return{display:!0,text:`Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp?new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString():""})`}}parseTheme(e){let t=e.palette.mode==="dark";return{dataSetColorPrimary:e.palette.primary.light,dataSetColorSecondary:e.palette.secondary.light,gridColor:t?e.palette.grey[800]:e.palette.grey[300]}}generateDataSetForecastData(){return{borderDash:[5],borderDashOffset:.5,data:this.forecastPayload.values.map(e=>({x:e.timestamp??0,y:e.value})),label:"Forecast Price",...c(this.themeColors?.dataSetColorPrimary),...l(this.themeColors?.dataSetColorPrimary)}}async generateDataSetSourcePayloads(){let{sourcePrices:e}=await i.build("feePerGas.medium");return{data:e,label:"Source Prices",...l(this.themeColors?.dataSetColorSecondary),...c(this.themeColors?.dataSetColorSecondary)}}};import{jsx as m}from"react/jsx-runtime";F.register(x,k,T,O,v,L,R,w);var h=({payload:r,...e})=>{let t=r,a=S(),[o,s]=p({datasets:[]}),[u,y]=p({});return D(async P=>{let{data:f,options:g}=await n.create(a,t,{fetch:!0});P()&&(s(f),y(g))},[t,a]),m(b,{...e,busy:t===void 0,minHeight:"25vh",children:t?m(B,{options:u,data:o}):null})};import{createPayloadRenderPlugin as G}from"@xyo-network/react-payload-plugin";var ne={...G({canRender:()=>!0,components:{box:{detailsBox:h}},name:"PriceForecast"})};export{h as PriceForecastDetailsBox,ne as PriceForecastRenderPlugin};
+// src/components/DetailsBox.tsx
+import "chartjs-adapter-luxon";
+import { useTheme } from "@mui/material";
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { FlexCol } from "@xylabs/react-flexbox";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip
+} from "chart.js";
+import { useState } from "react";
+import { Line } from "react-chartjs-2";
+
+// src/lib/DataLineStyles.ts
+import { alpha } from "@mui/material";
+var DataLineStyles = (color) => ({
+  backgroundColor: color ? alpha(color, 0.5) : void 0,
+  borderColor: color
+});
+
+// src/lib/DataPointStyles.ts
+var DataPointStyles = (pointHoverBackgroundColor) => ({
+  pointHitRadius: 20,
+  pointHoverBackgroundColor,
+  pointHoverRadius: 10,
+  pointRadius: 5,
+  pointStyle: "circle"
+});
+
+// src/lib/MockSourcePayloads.ts
+var MockSourcePayloads = () => {
+  const tenMin = 6e5;
+  return [
+    {
+      baseFee: 38.90155387825,
+      feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 39.306868093, veryHigh: 44.45384380525 },
+      priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
+      schema: "network.xyo.blockchain.ethereum.gas",
+      timestamp: Date.now() - tenMin
+    },
+    {
+      baseFee: 38.90155387825,
+      feePerGas: { high: 47.9945864396, low: 39.006868093, medium: 100, veryHigh: 44.45384380525 },
+      priorityFeePerGas: { high: 1.0266666666666666, low: -0.41000000000000003, medium: 0.38, veryHigh: 1.3900000000000001 },
+      schema: "network.xyo.blockchain.ethereum.gas",
+      timestamp: Date.now()
+    }
+  ];
+};
+
+// src/lib/SourcePayloads.ts
+var SourcePayloads = class {
+  constructor(sourcePayloads) {
+    this.sourcePayloads = sourcePayloads;
+  }
+  sourcePrices = [];
+  get payloads() {
+    return this.sourcePayloads;
+  }
+  static async build(jsonPath) {
+    const sourcePayloads = await this.fetchSourcePayloads();
+    const instance = new this(sourcePayloads);
+    const paths = jsonPath.split(".");
+    instance.sourcePrices = sourcePayloads.map((payload) => {
+      return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
+    });
+    return instance;
+  }
+  // TODO - fetch from archivist
+  static async fetchSourcePayloads() {
+    const payloads = await Promise.resolve(MockSourcePayloads());
+    return payloads;
+  }
+  jsonPathTraverser(obj, path) {
+    let result = obj;
+    for (const key of path) {
+      if (key in result) {
+        const foundKey = key;
+        result = result[foundKey];
+      } else {
+        result = void 0;
+        break;
+      }
+    }
+    return result;
+  }
+};
+
+// src/lib/ForecastLineChartConfigBuilder.ts
+var defaultOptions = () => ({
+  plugins: {
+    legend: {
+      position: "top"
+    }
+  },
+  responsive: true
+});
+var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
+  constructor(theme, payload) {
+    this.payload = payload;
+    this.themeColors = this.parseTheme(theme);
+  }
+  data = {
+    datasets: []
+  };
+  options = defaultOptions();
+  themeColors;
+  get forecastPayload() {
+    if (this.payload) {
+      return this.payload;
+    } else {
+      throw new Error("ForecastPayload was not defined");
+    }
+  }
+  static async create(theme, payload, sourcePayloadConfig) {
+    const instance = new _ForecastLineChartConfigBuilder(theme, payload);
+    await instance.build(sourcePayloadConfig?.fetch);
+    instance.refreshValues();
+    return instance;
+  }
+  async build(includeSources) {
+    this.buildOptions();
+    await this.buildData(includeSources);
+    return this;
+  }
+  async buildData(includeSources) {
+    const forecastData = this.generateDataSetForecastData();
+    const datasets = [forecastData];
+    if (includeSources) {
+      const sourceData = await this.generateDataSetSourcePayloads();
+      datasets.unshift(sourceData);
+      const lastSourceDataItem = sourceData.data.at(-1);
+      forecastData.data.unshift(lastSourceDataItem);
+    }
+    this.data = {
+      datasets
+    };
+    return this;
+  }
+  buildOptions() {
+    if (this.options.plugins) {
+      this.options.plugins.title = this.generateTitle();
+      this.options.plugins.legend = this.generateLegend();
+    }
+    this.options.scales = this.generateScales();
+    return this;
+  }
+  refreshValues() {
+    this.data = { ...this.data };
+    this.options = { ...this.options };
+  }
+  generateLegend() {
+    return {
+      labels: {
+        pointStyle: "circle",
+        usePointStyle: true
+      }
+    };
+  }
+  generateScales() {
+    return {
+      x: {
+        grid: {
+          color: this.themeColors?.gridColor
+        },
+        time: {
+          unit: "minute"
+        },
+        type: "time"
+      },
+      y: {
+        grid: {
+          color: this.themeColors?.gridColor
+        }
+      }
+    };
+  }
+  generateTitle() {
+    return {
+      display: true,
+      text: `Gas Price Forecaster (GWEI over time from ${this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ""})`
+    };
+  }
+  parseTheme(theme) {
+    const dark = theme.palette.mode === "dark";
+    return {
+      dataSetColorPrimary: theme.palette.primary.light,
+      dataSetColorSecondary: theme.palette.secondary.light,
+      gridColor: dark ? theme.palette.grey[800] : theme.palette.grey[300]
+    };
+  }
+  generateDataSetForecastData() {
+    return {
+      borderDash: [5],
+      borderDashOffset: 0.5,
+      data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
+      label: "Forecast Price",
+      ...DataPointStyles(this.themeColors?.dataSetColorPrimary),
+      ...DataLineStyles(this.themeColors?.dataSetColorPrimary)
+    };
+  }
+  async generateDataSetSourcePayloads() {
+    const { sourcePrices } = await SourcePayloads.build("feePerGas.medium");
+    return {
+      data: sourcePrices,
+      label: "Source Prices",
+      ...DataLineStyles(this.themeColors?.dataSetColorSecondary),
+      ...DataPointStyles(this.themeColors?.dataSetColorSecondary)
+    };
+  }
+};
+
+// src/components/DetailsBox.tsx
+import { jsx } from "react/jsx-runtime";
+ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend);
+var PriceForecastDetailsBox = ({ payload, ...props }) => {
+  const priceForecastPayload = payload;
+  const theme = useTheme();
+  const [data, setData] = useState({ datasets: [] });
+  const [options, setOptions] = useState({});
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
+      if (mounted()) {
+        setData(data2);
+        setOptions(options2);
+      }
+    },
+    [priceForecastPayload, theme]
+  );
+  return /* @__PURE__ */ jsx(FlexCol, { ...props, busy: priceForecastPayload === void 0, minHeight: "25vh", children: priceForecastPayload ? /* @__PURE__ */ jsx(Line, { options, data }) : null });
+};
+
+// src/Plugin.ts
+import { createPayloadRenderPlugin } from "@xyo-network/react-payload-plugin";
+var PriceForecastRenderPlugin = {
+  ...createPayloadRenderPlugin({
+    canRender: () => true,
+    components: {
+      box: {
+        detailsBox: PriceForecastDetailsBox
+      }
+    },
+    name: "PriceForecast"
+  })
+};
+export {
+  PriceForecastDetailsBox,
+  PriceForecastRenderPlugin
+};
 //# sourceMappingURL=index.js.map