@xyo-network/react-price-forecast-plugin 2.48.8

package/src/components/DetailsBox.stories.tsx

@@ -0,0 +1,78 @@
+import { Button, ButtonGroup, Typography } from '@mui/material'
+import { Meta, StoryFn } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { ForecastPayloadSchema } from '@xyo-network/diviner-forecasting-model'
+import { RefObject, useRef, useState } from 'react'
+
+import { MockSourcePayloads } from '../lib'
+import { PriceForecastDetailsBox } from './DetailsBox'
+
+const tenMin = 600000
+
+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> = (args) => {
+  const [showPayloads, setShowPayloads] = useState(false)
+  const forecastPayloadRef = useRef<HTMLParagraphElement>(null)
+  const sourcePayloadsRef = useRef<HTMLParagraphElement>(null)
+  const handleClick = (ref: RefObject<HTMLParagraphElement>) => {
+    setShowPayloads(!showPayloads)
+    if (ref.current) ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+  return (
+    <>
+      <PriceForecastDetailsBox mb={3} {...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(args.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 }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/DetailsBox.tsx

@@ -0,0 +1,55 @@
+import 'chartjs-adapter-luxon'
+
+import { useTheme } from '@mui/material'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { ForecastPayload } from '@xyo-network/diviner-forecasting-model'
+import { Payload } from '@xyo-network/payload-model'
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  ChartData,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip,
+} from 'chart.js'
+import { useState } from 'react'
+import { Line } from 'react-chartjs-2'
+
+import { ForecastLineChartConfigBuilder } from '../lib'
+
+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(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    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

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

package/src/index.ts

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

package/src/lib/DataLineStyles.ts

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

package/src/lib/DataPointStyles.ts

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

package/src/lib/ForecastLineChartConfigBuilder.ts

@@ -0,0 +1,169 @@
+import { Theme } from '@mui/material'
+import { ForecastPayload } from '@xyo-network/diviner-forecasting-model'
+import { ChartData, ChartDataset, ChartOptions, LegendOptions, Point, ScaleChartOptions } from 'chart.js'
+// eslint-disable-next-line import/no-unresolved
+import { _DeepPartialObject } from 'chart.js/dist/types/utils'
+
+import { DataLineStyles } from './DataLineStyles'
+import { DataPointStyles } from './DataPointStyles'
+import { SourcePayloads } from './SourcePayloads'
+
+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
+
+  constructor(theme: Theme, private payload?: ForecastPayload) {
+    this.themeColors = this.parseTheme(theme)
+  }
+
+  get forecastPayload() {
+    if (this.payload) {
+      return this.payload
+    } else {
+      throw 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(): _DeepPartialObject<LegendOptions<'line'>> {
+    return {
+      labels: {
+        pointStyle: 'circle',
+        usePointStyle: true,
+      },
+    }
+  }
+
+  protected generateScales(): _DeepPartialObject<ScaleChartOptions<'line'>['scales']> {
+    return {
+      x: {
+        grid: {
+          color: this.themeColors?.gridColor,
+        },
+        time: {
+          unit: 'minute',
+        },
+        type: 'time',
+      },
+      y: {
+        grid: {
+          color: this.themeColors?.gridColor,
+        },
+      },
+    }
+  }
+
+  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) {
+    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],
+    }
+  }
+
+  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

@@ -0,0 +1,19 @@
+export const MockSourcePayloads = () => {
+  const tenMin = 600000
+  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(),
+    },
+  ]
+}

package/src/lib/SourcePayloads.ts

@@ -0,0 +1,47 @@
+import { Payload } from '@xyo-network/payload-model'
+import { Point } from 'chart.js'
+
+import { MockSourcePayloads } from './MockSourcePayloads'
+
+export class SourcePayloads {
+  sourcePrices: Point[] = []
+
+  constructor(public sourcePayloads: Payload[]) {}
+
+  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

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