@xyo-network/react-price-forecast-plugin 7.6.3 → 8.0.0

package/dist/browser/components/DetailsBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAgBzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,MAAM,WAAW,4BAA6B,SAAQ,YAAY;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyB1E,CAAA"}
+{"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAA;AAI9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAGzD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAgBzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,MAAM,WAAW,4BAA6B,SAAQ,YAAY;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA6B1E,CAAA"}

package/dist/browser/index.mjs

@@ -244,7 +244,15 @@ var PriceForecastDetailsBox = ({ payload, ...props }) => {
     },
     [priceForecastPayload, theme]
   );
-  return /* @__PURE__ */ jsx(FlexCol, { ...props, busy: priceForecastPayload === void 0, minHeight: "25vh", children: priceForecastPayload ? /* @__PURE__ */ jsx(Line, { options, data }) : null });
+  return /* @__PURE__ */ jsx(
+    FlexCol,
+    {
+      ...props,
+      busy: priceForecastPayload === void 0,
+      sx: [{ minHeight: "25vh" }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: priceForecastPayload ? /* @__PURE__ */ jsx(Line, { options, data }) : null
+    }
+  );
 };
 
 // src/Plugin.ts

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":["data","options"]}
+{"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\n      {...props}\n      busy={priceForecastPayload === undefined}\n      sx={[{ minHeight: '25vh' }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\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.6.3",
+  "version": "8.0.0",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -41,16 +41,16 @@
     "README.md"
   ],
   "dependencies": {
-    "@xyo-network/react-payload-plugin": "~7.6.3"
+    "@xyo-network/react-payload-plugin": "~8.0.0"
   },
   "devDependencies": {
     "@bitauth/libauth": "~3.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
-    "@mui/system": "^7.3.11",
-    "@mui/x-tree-view": "~8.27.2",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
+    "@mui/system": "~9.0",
+    "@mui/x-tree-view": "~9.1",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@react-spring/web": "~10.0.3",
@@ -59,23 +59,23 @@
     "@textea/json-viewer": "~4.0.1",
     "@types/react": "^19.2.14",
     "@xylabs/pixel": "~5.1.2",
-    "@xylabs/react-async-effect": "~7.2.4",
-    "@xylabs/react-button": "~7.2.4",
-    "@xylabs/react-flexbox": "~7.2.4",
-    "@xylabs/react-hooks": "~7.2.4",
-    "@xylabs/react-identicon": "~7.2.4",
-    "@xylabs/react-link": "~7.2.4",
-    "@xylabs/react-promise": "~7.2.4",
-    "@xylabs/react-quick-tip-button": "~7.2.4",
-    "@xylabs/react-select": "~7.2.4",
-    "@xylabs/react-shared": "~7.2.4",
-    "@xylabs/react-theme": "~7.2.4",
+    "@xylabs/react-async-effect": "~8.0",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-hooks": "~8.0",
+    "@xylabs/react-identicon": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-promise": "~8.0",
+    "@xylabs/react-quick-tip-button": "~8.0",
+    "@xylabs/react-select": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/react-theme": "~8.0",
     "@xylabs/sdk-js": "^5.1.2",
     "@xylabs/threads": "~5.1.2",
-    "@xylabs/toolchain": "~7.13.15",
-    "@xylabs/tsconfig": "^7.13.15",
-    "@xylabs/tsconfig-dom": "^7.13.15",
-    "@xylabs/tsconfig-react": "~7.13.15",
+    "@xylabs/toolchain": "~7.13.22",
+    "@xylabs/tsconfig": "^7.13.22",
+    "@xylabs/tsconfig-dom": "^7.13.22",
+    "@xylabs/tsconfig-react": "~7.13.22",
     "@xyo-network/account": "~5.6.2",
     "@xyo-network/account-model": "^5.6.3",
     "@xyo-network/boundwitness-builder": "^5.6.2",
@@ -89,7 +89,7 @@
     "@xyo-network/diviner-schema-stats": "~5.6.4",
     "@xyo-network/manifest-model": "~5.6.3",
     "@xyo-network/module-model": "^5.6.4",
-    "@xyo-network/node-core-types": "~4.2.1",
+    "@xyo-network/node-core-types": "~4.2.2",
     "@xyo-network/node-memory": "~5.6.4",
     "@xyo-network/node-model": "^5.6.4",
     "@xyo-network/payload-builder": "^5.6.2",
@@ -130,7 +130,7 @@
     "spark-md5": "~3.0.2",
     "storybook": "^10.3.6",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.11",
     "wasm-feature-detect": "~1.8.0",
     "zod": "^4.4.3"
   },
@@ -138,27 +138,27 @@
     "@bitauth/libauth": "~3.0",
     "@emotion/react": "^11.14",
     "@emotion/styled": "^11.14",
-    "@mui/icons-material": "^7.3",
-    "@mui/material": "^7.3",
-    "@mui/system": "^7.3",
-    "@mui/x-tree-view": "~8.27",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
+    "@mui/system": "~9.0",
+    "@mui/x-tree-view": "~9.1",
     "@opentelemetry/api": "^1.9",
     "@opentelemetry/sdk-trace-base": "^2.7",
     "@react-spring/web": "~10.0",
     "@scure/base": "~2.2",
     "@textea/json-viewer": "~4.0",
     "@xylabs/pixel": "~5.1",
-    "@xylabs/react-async-effect": "~7.2",
-    "@xylabs/react-button": "~7.2",
-    "@xylabs/react-flexbox": "~7.2",
-    "@xylabs/react-hooks": "~7.2",
-    "@xylabs/react-identicon": "~7.2",
-    "@xylabs/react-link": "~7.2",
-    "@xylabs/react-promise": "~7.2",
-    "@xylabs/react-quick-tip-button": "~7.2",
-    "@xylabs/react-select": "~7.2",
-    "@xylabs/react-shared": "~7.2",
-    "@xylabs/react-theme": "~7.2",
+    "@xylabs/react-async-effect": "~8.0",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-hooks": "~8.0",
+    "@xylabs/react-identicon": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-promise": "~8.0",
+    "@xylabs/react-quick-tip-button": "~8.0",
+    "@xylabs/react-select": "~8.0",
+    "@xylabs/react-shared": "~8.0",
+    "@xylabs/react-theme": "~8.0",
     "@xylabs/sdk-js": "^5.1",
     "@xylabs/threads": "~5.1",
     "@xyo-network/account": "~5.6",