@xyo-network/react-price-forecast-plugin 7.5.8 → 7.5.11

package/dist/browser/index.mjs

@@ -1,13 +1,20 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // 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 React, { useState } from "react";
+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/ForecastLineChartConfigBuilder.ts
@@ -15,23 +22,23 @@ import { useIsDark } from "@xylabs/react-theme";
 
 // src/lib/DataLineStyles.ts
 import { alphaCss } from "@xylabs/react-theme";
-var DataLineStyles = /* @__PURE__ */ __name((color) => ({
+var DataLineStyles = (color) => ({
   backgroundColor: color ? alphaCss(color, 0.5) : void 0,
   borderColor: color
-}), "DataLineStyles");
+});
 
 // src/lib/DataPointStyles.ts
-var DataPointStyles = /* @__PURE__ */ __name((pointHoverBackgroundColor) => ({
+var DataPointStyles = (pointHoverBackgroundColor) => ({
   pointHitRadius: 20,
   pointHoverBackgroundColor,
   pointHoverRadius: 10,
   pointRadius: 5,
   pointStyle: "circle"
-}), "DataPointStyles");
+});
 
 // src/lib/MockSourcePayloads.ts
 import { asSchema } from "@xyo-network/payload-model";
-var MockSourcePayloads = /* @__PURE__ */ __name(() => {
+var MockSourcePayloads = () => {
   const tenMin = 6e5;
   return [
     {
@@ -69,13 +76,10 @@ var MockSourcePayloads = /* @__PURE__ */ __name(() => {
       timestamp: Date.now()
     }
   ];
-}, "MockSourcePayloads");
+};
 
 // src/lib/SourcePayloads.ts
 var SourcePayloads = class {
-  static {
-    __name(this, "SourcePayloads");
-  }
   sourcePayloads;
   sourcePrices = [];
   constructor(sourcePayloads) {
@@ -89,10 +93,7 @@ var SourcePayloads = class {
     const instance = new this(sourcePayloads);
     const paths = jsonPath.split(".");
     instance.sourcePrices = sourcePayloads.map((payload) => {
-      return {
-        x: payload.timestamp,
-        y: instance.jsonPathTraverser(payload, paths)
-      };
+      return { x: payload.timestamp, y: instance.jsonPathTraverser(payload, paths) };
     });
     return instance;
   }
@@ -117,21 +118,12 @@ var SourcePayloads = class {
 };
 
 // src/lib/ForecastLineChartConfigBuilder.ts
-var defaultOptions = /* @__PURE__ */ __name(() => ({
-  plugins: {
-    legend: {
-      position: "top"
-    }
-  },
+var defaultOptions = () => ({
+  plugins: { legend: { position: "top" } },
   responsive: true
-}), "defaultOptions");
+});
 var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
-  static {
-    __name(this, "ForecastLineChartConfigBuilder");
-  }
-  data = {
-    datasets: []
-  };
+  data = { datasets: [] };
   options = defaultOptions();
   themeColors;
   payload;
@@ -159,18 +151,14 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
   }
   async buildData(includeSources) {
     const forecastData = this.generateDataSetForecastData();
-    const datasets = [
-      forecastData
-    ];
+    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
-    };
+    this.data = { datasets };
     return this;
   }
   buildOptions() {
@@ -182,12 +170,8 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
     return this;
   }
   refreshValues() {
-    this.data = {
-      ...this.data
-    };
-    this.options = {
-      ...this.options
-    };
+    this.data = { ...this.data };
+    this.options = { ...this.options };
   }
   generateLegend() {
     return {
@@ -200,19 +184,11 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
   generateScales() {
     return {
       x: {
-        grid: {
-          color: this.themeColors?.gridColor
-        },
-        time: {
-          unit: "minute"
-        },
+        grid: { color: this.themeColors?.gridColor },
+        time: { unit: "minute" },
         type: "time"
       },
-      y: {
-        grid: {
-          color: this.themeColors?.gridColor
-        }
-      }
+      y: { grid: { color: this.themeColors?.gridColor } }
     };
   }
   generateTitle() {
@@ -231,14 +207,9 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
   }
   generateDataSetForecastData() {
     return {
-      borderDash: [
-        5
-      ],
+      borderDash: [5],
       borderDashOffset: 0.5,
-      data: this.forecastPayload.values.map((price) => ({
-        x: price.timestamp ?? 0,
-        y: price.value
-      })),
+      data: this.forecastPayload.values.map((price) => ({ x: price.timestamp ?? 0, y: price.value })),
       label: "Forecast Price",
       ...DataPointStyles(this.themeColors?.dataSetColorPrimary),
       ...DataLineStyles(this.themeColors?.dataSetColorPrimary)
@@ -256,46 +227,32 @@ var ForecastLineChartConfigBuilder = class _ForecastLineChartConfigBuilder {
 };
 
 // src/components/DetailsBox.tsx
+import { jsx } from "react/jsx-runtime";
 ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend);
-var PriceForecastDetailsBox = /* @__PURE__ */ __name(({ payload, ...props }) => {
+var PriceForecastDetailsBox = ({ payload, ...props }) => {
   const priceForecastPayload = payload;
   const theme = useTheme();
-  const [data, setData] = useState({
-    datasets: []
-  });
+  const [data, setData] = useState({ datasets: [] });
   const [options, setOptions] = useState({});
-  useAsyncEffect(async (mounted) => {
-    const { data: data2, options: options2 } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, {
-      fetch: true
-    });
-    if (mounted()) {
-      setData(data2);
-      setOptions(options2);
-    }
-  }, [
-    priceForecastPayload,
-    theme
-  ]);
-  return /* @__PURE__ */ React.createElement(FlexCol, {
-    ...props,
-    busy: priceForecastPayload === void 0,
-    minHeight: "25vh"
-  }, priceForecastPayload ? /* @__PURE__ */ React.createElement(Line, {
-    options,
-    data
-  }) : null);
-}, "PriceForecastDetailsBox");
+  useAsyncEffect(
+    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: /* @__PURE__ */ __name(() => true, "canRender"),
-    components: {
-      box: {
-        detailsBox: PriceForecastDetailsBox
-      }
-    },
+    canRender: () => true,
+    components: { box: { detailsBox: PriceForecastDetailsBox } },
     name: "PriceForecast"
   })
 };

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/DetailsBox.tsx","../../src/lib/ForecastLineChartConfigBuilder.ts","../../src/lib/DataLineStyles.ts","../../src/lib/DataPointStyles.ts","../../src/lib/MockSourcePayloads.ts","../../src/lib/SourcePayloads.ts","../../src/Plugin.ts"],"sourcesContent":["import 'chartjs-adapter-luxon'\n\nimport { useTheme } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type {\n  ChartData,\n  ChartOptions,\n} from 'chart.js'\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  Tooltip,\n} from 'chart.js'\nimport React, { useState } from 'react'\nimport { Line } from 'react-chartjs-2'\n\nimport { ForecastLineChartConfigBuilder } from '../lib/index.ts'\n\nChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend)\n\nexport interface PriceForecastDetailsBoxProps extends FlexBoxProps {\n  payload?: Payload\n}\n\nexport const PriceForecastDetailsBox: React.FC<PriceForecastDetailsBoxProps> = ({ payload, ...props }) => {\n  const priceForecastPayload = payload as ForecastPayload | undefined\n  const theme = useTheme()\n  const [data, setData] = useState<ChartData<'line'>>({ datasets: [] })\n  const [options, setOptions] = useState<ChartOptions<'line'>>({})\n\n  useAsyncEffect(\n\n    async (mounted) => {\n      const { data, options } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true })\n      if (mounted()) {\n        setData(data)\n        setOptions(options)\n      }\n    },\n    [priceForecastPayload, theme],\n  )\n\n  return (\n    <FlexCol {...props} busy={priceForecastPayload === undefined} minHeight=\"25vh\">\n      {priceForecastPayload\n        ? <Line options={options} data={data} />\n        : null}\n    </FlexCol>\n  )\n}\n","import type { Theme } from '@mui/material'\nimport { useIsDark } from '@xylabs/react-theme'\nimport type { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport type {\n  ChartData, ChartDataset, ChartOptions, LegendOptions, Point, ScaleChartOptions,\n} from 'chart.js'\n\nimport { DataLineStyles } from './DataLineStyles.ts'\nimport { DataPointStyles } from './DataPointStyles.ts'\nimport { SourcePayloads } from './SourcePayloads.ts'\n\ninterface SourcePayloadConfig {\n  fetch: boolean\n  sampleSize?: number\n}\n\ninterface ThemeColors {\n  dataSetColorPrimary: string\n  dataSetColorSecondary: string\n  gridColor: string\n}\n\nconst defaultOptions: () => ChartOptions<'line'> = () => ({\n  plugins: { legend: { position: 'top' as const } },\n  responsive: true,\n})\n\nexport class ForecastLineChartConfigBuilder {\n  data: ChartData<'line'> = { datasets: [] }\n\n  options: ChartOptions<'line'> = defaultOptions()\n  themeColors: ThemeColors | undefined\n\n  private payload?: ForecastPayload\n\n  constructor(\n    theme: Theme,\n    payload?: ForecastPayload,\n  ) {\n    this.payload = payload\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 = { datasets }\n\n    return this\n  }\n\n  buildOptions() {\n    if (this.options.plugins) {\n      this.options.plugins.title = this.generateTitle()\n      this.options.plugins.legend = this.generateLegend()\n    }\n    this.options.scales = this.generateScales()\n\n    return this\n  }\n\n  refreshValues() {\n    this.data = { ...this.data }\n    this.options = { ...this.options }\n  }\n\n  protected generateLegend() {\n    return {\n      labels: {\n        pointStyle: 'circle',\n        usePointStyle: true,\n      },\n    } as LegendOptions<'line'>\n  }\n\n  protected generateScales() {\n    return {\n      x: {\n        grid: { color: this.themeColors?.gridColor },\n        time: { unit: 'minute' },\n        type: 'time',\n      },\n      y: { grid: { color: this.themeColors?.gridColor } },\n    } as unknown as ScaleChartOptions<'line'>['scales']\n  }\n\n  protected generateTitle() {\n    return {\n      display: true,\n      text: `Gas Price Forecaster (GWEI over time from ${\n        this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ''\n      })`,\n    }\n  }\n\n  protected parseTheme(theme: Theme) {\n    // eslint-disable-next-line react-x/rules-of-hooks, react-hooks/rules-of-hooks\n    const dark = useIsDark()\n    return {\n      dataSetColorPrimary: theme.vars.palette.primary.light,\n      dataSetColorSecondary: theme.vars.palette.secondary.light,\n      gridColor: dark ? theme.vars.palette.grey[800] : theme.vars.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 { alphaCss } from '@xylabs/react-theme'\n\nexport const DataLineStyles = (color?: string) => ({\n  backgroundColor: color ? alphaCss(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","import { asSchema } from '@xyo-network/payload-model'\n\nexport const MockSourcePayloads = () => {\n  const tenMin = 600_000\n  return [\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: {\n        high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25,\n      },\n      priorityFeePerGas: {\n        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      },\n      schema: asSchema('network.xyo.blockchain.ethereum.gas', true),\n      timestamp: Date.now() - tenMin,\n    },\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: {\n        high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25,\n      },\n      priorityFeePerGas: {\n        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      },\n      schema: asSchema('network.xyo.blockchain.ethereum.gas', true),\n      timestamp: Date.now(),\n    },\n  ]\n}\n","import type { Payload } from '@xyo-network/payload-model'\nimport type { Point } from 'chart.js'\n\nimport { MockSourcePayloads } from './MockSourcePayloads.ts'\n\nexport class SourcePayloads {\n  sourcePayloads: Payload[]\n  sourcePrices: Point[] = []\n\n  constructor(sourcePayloads: Payload[]) {\n    this.sourcePayloads = sourcePayloads\n  }\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 type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\nimport { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\n\nimport { PriceForecastDetailsBox } from './components/index.ts'\n\nexport const PriceForecastRenderPlugin: PayloadRenderPlugin = {\n  ...createPayloadRenderPlugin({\n    canRender: () => true,\n    components: { box: { detailsBox: PriceForecastDetailsBox } },\n    name: 'PriceForecast',\n  }),\n}\n"],"mappings":"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","names":["useTheme","useAsyncEffect","FlexCol","CategoryScale","Chart","ChartJS","Legend","LinearScale","LineElement","PointElement","TimeScale","Title","Tooltip","React","useState","Line","useIsDark","alphaCss","DataLineStyles","color","backgroundColor","alphaCss","undefined","borderColor","DataPointStyles","pointHoverBackgroundColor","pointHitRadius","pointHoverRadius","pointRadius","pointStyle","asSchema","MockSourcePayloads","tenMin","baseFee","feePerGas","high","low","medium","veryHigh","priorityFeePerGas","schema","asSchema","timestamp","Date","now","SourcePayloads","sourcePayloads","sourcePrices","payloads","build","jsonPath","fetchSourcePayloads","instance","paths","split","map","payload","x","timestamp","y","jsonPathTraverser","Promise","resolve","MockSourcePayloads","obj","path","result","key","foundKey","undefined","defaultOptions","plugins","legend","position","responsive","ForecastLineChartConfigBuilder","data","datasets","options","themeColors","payload","theme","parseTheme","forecastPayload","Error","create","sourcePayloadConfig","instance","build","fetch","refreshValues","includeSources","buildOptions","buildData","forecastData","generateDataSetForecastData","sourceData","generateDataSetSourcePayloads","unshift","lastSourceDataItem","at","title","generateTitle","generateLegend","scales","generateScales","labels","pointStyle","usePointStyle","x","grid","color","gridColor","time","unit","type","y","display","text","values","timestamp","Date","toLocaleDateString","dark","useIsDark","dataSetColorPrimary","vars","palette","primary","light","dataSetColorSecondary","secondary","grey","borderDash","borderDashOffset","map","price","value","label","DataPointStyles","DataLineStyles","sourcePrices","SourcePayloads","ChartJS","register","CategoryScale","TimeScale","PointElement","LineElement","LinearScale","Title","Tooltip","Legend","PriceForecastDetailsBox","payload","props","priceForecastPayload","theme","useTheme","data","setData","useState","datasets","options","setOptions","useAsyncEffect","mounted","ForecastLineChartConfigBuilder","create","fetch","FlexCol","busy","undefined","minHeight","Line","createPayloadRenderPlugin","PriceForecastRenderPlugin","createPayloadRenderPlugin","canRender","components","box","detailsBox","PriceForecastDetailsBox","name"]}
+{"version":3,"sources":["../../src/components/DetailsBox.tsx","../../src/lib/ForecastLineChartConfigBuilder.ts","../../src/lib/DataLineStyles.ts","../../src/lib/DataPointStyles.ts","../../src/lib/MockSourcePayloads.ts","../../src/lib/SourcePayloads.ts","../../src/Plugin.ts"],"sourcesContent":["import 'chartjs-adapter-luxon'\n\nimport { useTheme } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport type { Payload } from '@xyo-network/payload-model'\nimport type {\n  ChartData,\n  ChartOptions,\n} from 'chart.js'\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  TimeScale,\n  Title,\n  Tooltip,\n} from 'chart.js'\nimport React, { useState } from 'react'\nimport { Line } from 'react-chartjs-2'\n\nimport { ForecastLineChartConfigBuilder } from '../lib/index.ts'\n\nChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend)\n\nexport interface PriceForecastDetailsBoxProps extends FlexBoxProps {\n  payload?: Payload\n}\n\nexport const PriceForecastDetailsBox: React.FC<PriceForecastDetailsBoxProps> = ({ payload, ...props }) => {\n  const priceForecastPayload = payload as ForecastPayload | undefined\n  const theme = useTheme()\n  const [data, setData] = useState<ChartData<'line'>>({ datasets: [] })\n  const [options, setOptions] = useState<ChartOptions<'line'>>({})\n\n  useAsyncEffect(\n\n    async (mounted) => {\n      const { data, options } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true })\n      if (mounted()) {\n        setData(data)\n        setOptions(options)\n      }\n    },\n    [priceForecastPayload, theme],\n  )\n\n  return (\n    <FlexCol {...props} busy={priceForecastPayload === undefined} minHeight=\"25vh\">\n      {priceForecastPayload\n        ? <Line options={options} data={data} />\n        : null}\n    </FlexCol>\n  )\n}\n","import type { Theme } from '@mui/material'\nimport { useIsDark } from '@xylabs/react-theme'\nimport type { ForecastPayload } from '@xyo-network/diviner-forecasting-model'\nimport type {\n  ChartData, ChartDataset, ChartOptions, LegendOptions, Point, ScaleChartOptions,\n} from 'chart.js'\n\nimport { DataLineStyles } from './DataLineStyles.ts'\nimport { DataPointStyles } from './DataPointStyles.ts'\nimport { SourcePayloads } from './SourcePayloads.ts'\n\ninterface SourcePayloadConfig {\n  fetch: boolean\n  sampleSize?: number\n}\n\ninterface ThemeColors {\n  dataSetColorPrimary: string\n  dataSetColorSecondary: string\n  gridColor: string\n}\n\nconst defaultOptions: () => ChartOptions<'line'> = () => ({\n  plugins: { legend: { position: 'top' as const } },\n  responsive: true,\n})\n\nexport class ForecastLineChartConfigBuilder {\n  data: ChartData<'line'> = { datasets: [] }\n\n  options: ChartOptions<'line'> = defaultOptions()\n  themeColors: ThemeColors | undefined\n\n  private payload?: ForecastPayload\n\n  constructor(\n    theme: Theme,\n    payload?: ForecastPayload,\n  ) {\n    this.payload = payload\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 = { datasets }\n\n    return this\n  }\n\n  buildOptions() {\n    if (this.options.plugins) {\n      this.options.plugins.title = this.generateTitle()\n      this.options.plugins.legend = this.generateLegend()\n    }\n    this.options.scales = this.generateScales()\n\n    return this\n  }\n\n  refreshValues() {\n    this.data = { ...this.data }\n    this.options = { ...this.options }\n  }\n\n  protected generateLegend() {\n    return {\n      labels: {\n        pointStyle: 'circle',\n        usePointStyle: true,\n      },\n    } as LegendOptions<'line'>\n  }\n\n  protected generateScales() {\n    return {\n      x: {\n        grid: { color: this.themeColors?.gridColor },\n        time: { unit: 'minute' },\n        type: 'time',\n      },\n      y: { grid: { color: this.themeColors?.gridColor } },\n    } as unknown as ScaleChartOptions<'line'>['scales']\n  }\n\n  protected generateTitle() {\n    return {\n      display: true,\n      text: `Gas Price Forecaster (GWEI over time from ${\n        this.forecastPayload?.values[0].timestamp ? new Date(this.forecastPayload.values[0].timestamp).toLocaleDateString() : ''\n      })`,\n    }\n  }\n\n  protected parseTheme(theme: Theme) {\n    // eslint-disable-next-line react-x/rules-of-hooks, react-hooks/rules-of-hooks\n    const dark = useIsDark()\n    return {\n      dataSetColorPrimary: theme.vars.palette.primary.light,\n      dataSetColorSecondary: theme.vars.palette.secondary.light,\n      gridColor: dark ? theme.vars.palette.grey[800] : theme.vars.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 { alphaCss } from '@xylabs/react-theme'\n\nexport const DataLineStyles = (color?: string) => ({\n  backgroundColor: color ? alphaCss(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","import { asSchema } from '@xyo-network/payload-model'\n\nexport const MockSourcePayloads = () => {\n  const tenMin = 600_000\n  return [\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: {\n        high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25,\n      },\n      priorityFeePerGas: {\n        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      },\n      schema: asSchema('network.xyo.blockchain.ethereum.gas', true),\n      timestamp: Date.now() - tenMin,\n    },\n    {\n      baseFee: 38.901_553_878_25,\n      feePerGas: {\n        high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25,\n      },\n      priorityFeePerGas: {\n        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      },\n      schema: asSchema('network.xyo.blockchain.ethereum.gas', true),\n      timestamp: Date.now(),\n    },\n  ]\n}\n","import type { Payload } from '@xyo-network/payload-model'\nimport type { Point } from 'chart.js'\n\nimport { MockSourcePayloads } from './MockSourcePayloads.ts'\n\nexport class SourcePayloads {\n  sourcePayloads: Payload[]\n  sourcePrices: Point[] = []\n\n  constructor(sourcePayloads: Payload[]) {\n    this.sourcePayloads = sourcePayloads\n  }\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 type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\nimport { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'\n\nimport { PriceForecastDetailsBox } from './components/index.ts'\n\nexport const PriceForecastRenderPlugin: PayloadRenderPlugin = {\n  ...createPayloadRenderPlugin({\n    canRender: () => true,\n    components: { box: { detailsBox: PriceForecastDetailsBox } },\n    name: 'PriceForecast',\n  }),\n}\n"],"mappings":"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","names":["data","options"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-price-forecast-plugin",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,55 +36,179 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-async-effect": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-theme": "~7.1.17",
-    "@xyo-network/diviner-forecasting-model": "~5.3.17",
-    "@xyo-network/payload-model": "~5.3.17",
-    "@xyo-network/react-payload-plugin": "7.5.8",
-    "chart.js": "~4.5.1",
-    "chartjs-adapter-luxon": "~1.3.1",
-    "react-chartjs-2": "~5.3.1"
+    "@xyo-network/react-payload-plugin": "~7.5.11"
   },
   "devDependencies": {
-    "@emotion/react": "~11.14.0",
-    "@emotion/styled": "~11.14.1",
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
+    "@mui/x-tree-view": "~8.27.2",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@textea/json-viewer": "~4.0.1",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-dialogs": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-identicon": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-select": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-forecasting-model": "~5.5.5",
+    "@xyo-network/diviner-model": "^5.5.5",
+    "@xyo-network/diviner-schema-list-model": "~5.5.2",
+    "@xyo-network/diviner-schema-stats-model": "~5.5.2",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-abstract": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/node-core-types": "~4.1.10",
+    "@xyo-network/node-memory": "~5.5.5",
+    "@xyo-network/node-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/payload-validator": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/schema-cache": "~5.5.1",
+    "@xyo-network/schema-payload-plugin": "~5.5.1",
+    "@xyo-network/typeof": "~5.3.30",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "ajv": "^8.18.0",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "chart.js": "^4.5.1",
+    "chartjs-adapter-luxon": "~1.3.1",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
     "luxon": "^3.7.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-chartjs-2": "~5.3.1",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "luxon": "~3.7.1",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@mui/system": "^7.3.10",
+    "@mui/x-tree-view": "~8.27.2",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@textea/json-viewer": "~4.0.1",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-dialogs": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-identicon": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-quick-tip-button": "~7.1.20",
+    "@xylabs/react-select": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-forecasting-model": "~5.5.5",
+    "@xyo-network/diviner-model": "^5.5.5",
+    "@xyo-network/diviner-schema-list-model": "~5.5.2",
+    "@xyo-network/diviner-schema-stats-model": "~5.5.2",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-abstract": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/node-core-types": "~4.1.10",
+    "@xyo-network/node-memory": "~5.5.5",
+    "@xyo-network/node-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/payload-validator": "^5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/schema-cache": "~5.5.1",
+    "@xyo-network/schema-payload-plugin": "~5.5.1",
+    "@xyo-network/typeof": "~5.3.30",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "ajv": "^8.18.0",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "chart.js": "^4.5.1",
+    "chartjs-adapter-luxon": "~1.3.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "luxon": "^3.7.2",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-chartjs-2": "~5.3.1",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/Plugin.ts

@@ -1,12 +0,0 @@
-import type { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin'
-
-import { PriceForecastDetailsBox } from './components/index.ts'
-
-export const PriceForecastRenderPlugin: PayloadRenderPlugin = {
-  ...createPayloadRenderPlugin({
-    canRender: () => true,
-    components: { box: { detailsBox: PriceForecastDetailsBox } },
-    name: 'PriceForecast',
-  }),
-}

package/src/components/DetailsBox.stories.tsx

@@ -1,78 +0,0 @@
-import {
-  Button, ButtonGroup, Typography,
-} from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol } from '@xylabs/react-flexbox'
-import { ForecastPayloadSchema } from '@xyo-network/diviner-forecasting-model'
-import type { RefObject } from 'react'
-import React, { useRef, useState } from 'react'
-
-import { MockSourcePayloads } from '../lib/index.ts'
-import { PriceForecastDetailsBox } from './DetailsBox.tsx'
-
-const tenMin = 600_000
-
-const ForecastingDivinerPayload = {
-  schema: ForecastPayloadSchema,
-  values: [1, 2, 3, 4, 5, 6, 7, 8].map(item => ({
-    error: 0,
-    timestamp: Date.now() + tenMin * item,
-    value: 100 * item,
-  })),
-}
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PriceForecastDetailsBox,
-  parameters: { docs: { page: null } },
-  title: 'plugin/price-forecast/DetailsBox',
-} as Meta<typeof PriceForecastDetailsBox>
-
-const Template: StoryFn<typeof PriceForecastDetailsBox> = ({ payload, ...args }) => {
-  const [showPayloads, setShowPayloads] = useState(false)
-  const forecastPayloadRef = useRef<HTMLParagraphElement>(null)
-  const sourcePayloadsRef = useRef<HTMLParagraphElement>(null)
-  const handleClick = (ref: RefObject<HTMLParagraphElement | null>) => {
-    setShowPayloads(!showPayloads)
-    if (ref.current) ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
-  }
-  return (
-    <>
-      <PriceForecastDetailsBox mb={3} payload={payload} {...args} />
-      <FlexCol>
-        <ButtonGroup>
-          <Button variant="contained" onClick={() => handleClick(forecastPayloadRef)}>
-            Forecast Payload
-          </Button>
-          <Button variant="contained" onClick={() => handleClick(sourcePayloadsRef)}>
-            Source Payloads
-          </Button>
-        </ButtonGroup>
-      </FlexCol>
-      <pre>
-        <Typography ref={forecastPayloadRef}>
-          ForecastPayload:
-          {' '}
-          <code>{JSON.stringify(payload, null, 2)}</code>
-        </Typography>
-      </pre>
-      <pre>
-        <Typography ref={sourcePayloadsRef}>
-          SourcePayloads:
-          {' '}
-          <pre>{JSON.stringify(MockSourcePayloads(), null, 2)}</pre>
-        </Typography>
-      </pre>
-    </>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = { payload: ForecastingDivinerPayload }
-
-export { Default, WithData }
-
-export default StorybookEntry

package/src/components/DetailsBox.tsx

@@ -1,60 +0,0 @@
-import 'chartjs-adapter-luxon'
-
-import { useTheme } from '@mui/material'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import type { ForecastPayload } from '@xyo-network/diviner-forecasting-model'
-import type { Payload } from '@xyo-network/payload-model'
-import type {
-  ChartData,
-  ChartOptions,
-} from 'chart.js'
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  TimeScale,
-  Title,
-  Tooltip,
-} from 'chart.js'
-import React, { useState } from 'react'
-import { Line } from 'react-chartjs-2'
-
-import { ForecastLineChartConfigBuilder } from '../lib/index.ts'
-
-ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend)
-
-export interface PriceForecastDetailsBoxProps extends FlexBoxProps {
-  payload?: Payload
-}
-
-export const PriceForecastDetailsBox: React.FC<PriceForecastDetailsBoxProps> = ({ payload, ...props }) => {
-  const priceForecastPayload = payload as ForecastPayload | undefined
-  const theme = useTheme()
-  const [data, setData] = useState<ChartData<'line'>>({ datasets: [] })
-  const [options, setOptions] = useState<ChartOptions<'line'>>({})
-
-  useAsyncEffect(
-
-    async (mounted) => {
-      const { data, options } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true })
-      if (mounted()) {
-        setData(data)
-        setOptions(options)
-      }
-    },
-    [priceForecastPayload, theme],
-  )
-
-  return (
-    <FlexCol {...props} busy={priceForecastPayload === undefined} minHeight="25vh">
-      {priceForecastPayload
-        ? <Line options={options} data={data} />
-        : null}
-    </FlexCol>
-  )
-}

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from './DetailsBox.tsx'

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './components/index.ts'
-export * from './Plugin.ts'

package/src/lib/DataLineStyles.ts

@@ -1,6 +0,0 @@
-import { alphaCss } from '@xylabs/react-theme'
-
-export const DataLineStyles = (color?: string) => ({
-  backgroundColor: color ? alphaCss(color, 0.5) : undefined,
-  borderColor: color,
-})

package/src/lib/DataPointStyles.ts

@@ -1,7 +0,0 @@
-export const DataPointStyles = (pointHoverBackgroundColor?: string) => ({
-  pointHitRadius: 20,
-  pointHoverBackgroundColor,
-  pointHoverRadius: 10,
-  pointRadius: 5,
-  pointStyle: 'circle',
-})

package/src/lib/ForecastLineChartConfigBuilder.ts

@@ -1,162 +0,0 @@
-import type { Theme } from '@mui/material'
-import { useIsDark } from '@xylabs/react-theme'
-import type { ForecastPayload } from '@xyo-network/diviner-forecasting-model'
-import type {
-  ChartData, ChartDataset, ChartOptions, LegendOptions, Point, ScaleChartOptions,
-} from 'chart.js'
-
-import { DataLineStyles } from './DataLineStyles.ts'
-import { DataPointStyles } from './DataPointStyles.ts'
-import { SourcePayloads } from './SourcePayloads.ts'
-
-interface SourcePayloadConfig {
-  fetch: boolean
-  sampleSize?: number
-}
-
-interface ThemeColors {
-  dataSetColorPrimary: string
-  dataSetColorSecondary: string
-  gridColor: string
-}
-
-const defaultOptions: () => ChartOptions<'line'> = () => ({
-  plugins: { legend: { position: 'top' as const } },
-  responsive: true,
-})
-
-export class ForecastLineChartConfigBuilder {
-  data: ChartData<'line'> = { datasets: [] }
-
-  options: ChartOptions<'line'> = defaultOptions()
-  themeColors: ThemeColors | undefined
-
-  private payload?: ForecastPayload
-
-  constructor(
-    theme: Theme,
-    payload?: ForecastPayload,
-  ) {
-    this.payload = payload
-    this.themeColors = this.parseTheme(theme)
-  }
-
-  get forecastPayload() {
-    if (this.payload) {
-      return this.payload
-    } else {
-      throw new Error('ForecastPayload was not defined')
-    }
-  }
-
-  static async create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig) {
-    const instance = new ForecastLineChartConfigBuilder(theme, payload)
-
-    await instance.build(sourcePayloadConfig?.fetch)
-
-    instance.refreshValues()
-
-    return instance
-  }
-
-  async build(includeSources?: boolean) {
-    this.buildOptions()
-    await this.buildData(includeSources)
-    return this
-  }
-
-  async buildData(includeSources?: boolean) {
-    const forecastData = this.generateDataSetForecastData()
-
-    const datasets: ChartDataset<'line'>[] = [forecastData]
-
-    if (includeSources) {
-      // build data from sources in forecastPayload
-      const sourceData = await this.generateDataSetSourcePayloads()
-      datasets.unshift(sourceData)
-
-      // add last source point as first item in prediction to connect the lines
-      const lastSourceDataItem = sourceData.data.at(-1) as Point
-      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 }
-  }
-
-  protected generateLegend() {
-    return {
-      labels: {
-        pointStyle: 'circle',
-        usePointStyle: true,
-      },
-    } as LegendOptions<'line'>
-  }
-
-  protected generateScales() {
-    return {
-      x: {
-        grid: { color: this.themeColors?.gridColor },
-        time: { unit: 'minute' },
-        type: 'time',
-      },
-      y: { grid: { color: this.themeColors?.gridColor } },
-    } as unknown as ScaleChartOptions<'line'>['scales']
-  }
-
-  protected 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() : ''
-      })`,
-    }
-  }
-
-  protected parseTheme(theme: Theme) {
-    // eslint-disable-next-line react-x/rules-of-hooks, react-hooks/rules-of-hooks
-    const dark = useIsDark()
-    return {
-      dataSetColorPrimary: theme.vars.palette.primary.light,
-      dataSetColorSecondary: theme.vars.palette.secondary.light,
-      gridColor: dark ? theme.vars.palette.grey[800] : theme.vars.palette.grey[300],
-    }
-  }
-
-  private generateDataSetForecastData(): ChartDataset<'line'> {
-    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),
-    }
-  }
-
-  private async generateDataSetSourcePayloads(): Promise<ChartDataset<'line'>> {
-    const { sourcePrices } = await SourcePayloads.build('feePerGas.medium')
-    return {
-      data: sourcePrices,
-      label: 'Source Prices',
-      ...DataLineStyles(this.themeColors?.dataSetColorSecondary),
-      ...DataPointStyles(this.themeColors?.dataSetColorSecondary),
-    }
-  }
-}

package/src/lib/MockSourcePayloads.ts

@@ -1,29 +0,0 @@
-import { asSchema } from '@xyo-network/payload-model'
-
-export const MockSourcePayloads = () => {
-  const tenMin = 600_000
-  return [
-    {
-      baseFee: 38.901_553_878_25,
-      feePerGas: {
-        high: 47.994_586_439_6, low: 39.006_868_093, medium: 39.306_868_093, veryHigh: 44.453_843_805_25,
-      },
-      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,
-      },
-      schema: asSchema('network.xyo.blockchain.ethereum.gas', true),
-      timestamp: Date.now() - tenMin,
-    },
-    {
-      baseFee: 38.901_553_878_25,
-      feePerGas: {
-        high: 47.994_586_439_6, low: 39.006_868_093, medium: 100, veryHigh: 44.453_843_805_25,
-      },
-      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,
-      },
-      schema: asSchema('network.xyo.blockchain.ethereum.gas', true),
-      timestamp: Date.now(),
-    },
-  ]
-}

package/src/lib/SourcePayloads.ts

@@ -1,50 +0,0 @@
-import type { Payload } from '@xyo-network/payload-model'
-import type { Point } from 'chart.js'
-
-import { MockSourcePayloads } from './MockSourcePayloads.ts'
-
-export class SourcePayloads {
-  sourcePayloads: Payload[]
-  sourcePrices: Point[] = []
-
-  constructor(sourcePayloads: Payload[]) {
-    this.sourcePayloads = sourcePayloads
-  }
-
-  get payloads() {
-    return this.sourcePayloads
-  }
-
-  static async build(jsonPath: string) {
-    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: Payload, path: string[]) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let result: any = obj
-    for (const key of path) {
-      if (key in result) {
-        const foundKey = key as keyof typeof result
-        result = result[foundKey]
-      } else {
-        result = undefined
-        break
-      }
-    }
-
-    return result
-  }
-}

package/src/lib/index.ts

@@ -1,3 +0,0 @@
-export * from './ForecastLineChartConfigBuilder.ts'
-export * from './MockSourcePayloads.ts'
-export * from './SourcePayloads.ts'