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

package/dist/esm/Plugin.js

@@ -0,0 +1,14 @@
+import { createPayloadRenderPlugin } from '@xyo-network/react-payload-plugin';
+import { PriceForecastDetailsBox } from './components';
+export const PriceForecastRenderPlugin = {
+    ...createPayloadRenderPlugin({
+        canRender: () => true,
+        components: {
+            box: {
+                detailsBox: PriceForecastDetailsBox,
+            },
+        },
+        name: 'PriceForecast',
+    }),
+};
+//# sourceMappingURL=Plugin.js.map

package/dist/esm/Plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plugin.js","sourceRoot":"","sources":["../../src/Plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAuB,MAAM,mCAAmC,CAAA;AAElG,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAA;AAEtD,MAAM,CAAC,MAAM,yBAAyB,GAAwB;IAC5D,GAAG,yBAAyB,CAAC;QAC3B,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI;QACrB,UAAU,EAAE;YACV,GAAG,EAAE;gBACH,UAAU,EAAE,uBAAuB;aACpC;SACF;QACD,IAAI,EAAE,eAAe;KACtB,CAAC;CACH,CAAA"}

package/dist/esm/components/DetailsBox.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+import { ForecastLineChartConfigBuilder } from '../lib';
+ChartJS.register(CategoryScale, TimeScale, PointElement, LineElement, LinearScale, Title, Tooltip, Legend);
+export const 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, options } = await ForecastLineChartConfigBuilder.create(theme, priceForecastPayload, { fetch: true });
+        if (mounted()) {
+            setData(data);
+            setOptions(options);
+        }
+    }, [priceForecastPayload, theme]);
+    return (_jsx(FlexCol, { ...props, busy: priceForecastPayload === undefined, minHeight: "25vh", children: priceForecastPayload ? _jsx(Line, { options: options, data: data }) : null }));
+};
+//# sourceMappingURL=DetailsBox.js.map

package/dist/esm/components/DetailsBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsBox.js","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAG7D,OAAO,EACL,aAAa,EACb,KAAK,IAAI,OAAO,EAGhB,MAAM,EACN,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,GACR,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEtC,OAAO,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAA;AAEvD,OAAO,CAAC,QAAQ,CAAC,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AAM1G,MAAM,CAAC,MAAM,uBAAuB,GAA2C,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvG,MAAM,oBAAoB,GAAG,OAAsC,CAAA;IACnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAoB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAuB,EAAE,CAAC,CAAA;IAEhE,cAAc;IACZ,uDAAuD;IACvD,KAAK,EAAE,OAAO,EAAE,EAAE;QAChB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,8BAA8B,CAAC,MAAM,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA;QACnH,IAAI,OAAO,EAAE,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,UAAU,CAAC,OAAO,CAAC,CAAA;SACpB;IACH,CAAC,EACD,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAC9B,CAAA;IAED,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,EAAE,IAAI,EAAE,oBAAoB,KAAK,SAAS,EAAE,SAAS,EAAC,MAAM,YAC3E,oBAAoB,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,GAC7D,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './DetailsBox';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './Plugin';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA"}

package/dist/esm/lib/DataLineStyles.js

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

package/dist/esm/lib/DataLineStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataLineStyles.js","sourceRoot":"","sources":["../../../src/lib/DataLineStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAErC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,CAAC;IACjD,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IACtD,WAAW,EAAE,KAAK;CACnB,CAAC,CAAA"}

package/dist/esm/lib/DataPointStyles.js

@@ -0,0 +1,8 @@
+export const DataPointStyles = (pointHoverBackgroundColor) => ({
+    pointHitRadius: 20,
+    pointHoverBackgroundColor,
+    pointHoverRadius: 10,
+    pointRadius: 5,
+    pointStyle: 'circle',
+});
+//# sourceMappingURL=DataPointStyles.js.map

package/dist/esm/lib/DataPointStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataPointStyles.js","sourceRoot":"","sources":["../../../src/lib/DataPointStyles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,yBAAkC,EAAE,EAAE,CAAC,CAAC;IACtE,cAAc,EAAE,EAAE;IAClB,yBAAyB;IACzB,gBAAgB,EAAE,EAAE;IACpB,WAAW,EAAE,CAAC;IACd,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAA"}

package/dist/esm/lib/ForecastLineChartConfigBuilder.js

@@ -0,0 +1,130 @@
+import { DataLineStyles } from './DataLineStyles';
+import { DataPointStyles } from './DataPointStyles';
+import { SourcePayloads } from './SourcePayloads';
+const defaultOptions = () => ({
+    plugins: {
+        legend: {
+            position: 'top',
+        },
+    },
+    responsive: true,
+});
+export class ForecastLineChartConfigBuilder {
+    payload;
+    data = {
+        datasets: [],
+    };
+    options = defaultOptions();
+    themeColors;
+    constructor(theme, payload) {
+        this.payload = payload;
+        this.themeColors = this.parseTheme(theme);
+    }
+    get forecastPayload() {
+        if (this.payload) {
+            return this.payload;
+        }
+        else {
+            throw 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) {
+            // 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);
+            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),
+        };
+    }
+}
+//# sourceMappingURL=ForecastLineChartConfigBuilder.js.map

package/dist/esm/lib/ForecastLineChartConfigBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForecastLineChartConfigBuilder.js","sourceRoot":"","sources":["../../../src/lib/ForecastLineChartConfigBuilder.ts"],"names":[],"mappings":"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"}

package/dist/esm/lib/MockSourcePayloads.js

@@ -0,0 +1,20 @@
+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(),
+        },
+    ];
+};
+//# sourceMappingURL=MockSourcePayloads.js.map

package/dist/esm/lib/MockSourcePayloads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockSourcePayloads.js","sourceRoot":"","sources":["../../../src/lib/MockSourcePayloads.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,MAAM,GAAG,MAAM,CAAA;IACrB,OAAO;QACL;YACE,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,cAAc,EAAE;YACrG,iBAAiB,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,GAAG,EAAE,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,kBAAkB,EAAE;YACtH,MAAM,EAAE,qCAAqC;YAC7C,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM;SAC/B;QACD;YACE,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE;YAC5F,iBAAiB,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,GAAG,EAAE,CAAC,mBAAmB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,kBAAkB,EAAE;YACtH,MAAM,EAAE,qCAAqC;YAC7C,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;SACtB;KACF,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/lib/SourcePayloads.js

@@ -0,0 +1,41 @@
+import { MockSourcePayloads } from './MockSourcePayloads';
+export class SourcePayloads {
+    sourcePayloads;
+    sourcePrices = [];
+    constructor(sourcePayloads) {
+        this.sourcePayloads = sourcePayloads;
+    }
+    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) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let result = obj;
+        for (const key of path) {
+            if (key in result) {
+                const foundKey = key;
+                result = result[foundKey];
+            }
+            else {
+                result = undefined;
+                break;
+            }
+        }
+        return result;
+    }
+}
+//# sourceMappingURL=SourcePayloads.js.map

package/dist/esm/lib/SourcePayloads.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourcePayloads.js","sourceRoot":"","sources":["../../../src/lib/SourcePayloads.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAEzD,MAAM,OAAO,cAAc;IAGN;IAFnB,YAAY,GAAY,EAAE,CAAA;IAE1B,YAAmB,cAAyB;QAAzB,mBAAc,GAAd,cAAc,CAAW;IAAG,CAAC;IAEhD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,cAAc,CAAA;IAC5B,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,QAAgB;QACjC,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,mBAAmB,EAAE,CAAA;QACvD,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,CAAA;QAEzC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACjC,QAAQ,CAAC,YAAY,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YACrD,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAA;QAChF,CAAC,CAAC,CAAA;QACF,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,8BAA8B;IAC9B,MAAM,CAAC,KAAK,CAAC,mBAAmB;QAC9B,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAA;QAC5D,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,iBAAiB,CAAC,GAAY,EAAE,IAAc;QAC5C,8DAA8D;QAC9D,IAAI,MAAM,GAAQ,GAAG,CAAA;QACrB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;YACtB,IAAI,GAAG,IAAI,MAAM,EAAE;gBACjB,MAAM,QAAQ,GAAG,GAA0B,CAAA;gBAC3C,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;aAC1B;iBAAM;gBACL,MAAM,GAAG,SAAS,CAAA;gBAClB,MAAK;aACN;SACF;QAED,OAAO,MAAM,CAAA;IACf,CAAC;CACF"}

package/dist/esm/lib/index.js

@@ -0,0 +1,4 @@
+export * from './ForecastLineChartConfigBuilder';
+export * from './MockSourcePayloads';
+export * from './SourcePayloads';
+//# sourceMappingURL=index.js.map

package/dist/esm/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA"}

package/dist/types/Plugin.d.ts

@@ -0,0 +1,3 @@
+import { PayloadRenderPlugin } from '@xyo-network/react-payload-plugin';
+export declare const PriceForecastRenderPlugin: PayloadRenderPlugin;
+//# sourceMappingURL=Plugin.d.ts.map

package/dist/types/Plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plugin.d.ts","sourceRoot":"","sources":["../../src/Plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AAIlG,eAAO,MAAM,yBAAyB,EAAE,mBAUvC,CAAA"}

package/dist/types/components/DetailsBox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import 'chartjs-adapter-luxon';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import { Payload } from '@xyo-network/payload-model';
+export interface PriceForecastDetailsBoxProps extends FlexBoxProps {
+    payload?: Payload;
+}
+export declare const PriceForecastDetailsBox: React.FC<PriceForecastDetailsBoxProps>;
+//# sourceMappingURL=DetailsBox.d.ts.map

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

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

package/dist/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DetailsBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './Plugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA"}

package/dist/types/lib/DataLineStyles.d.ts

@@ -0,0 +1,5 @@
+export declare const DataLineStyles: (color?: string) => {
+    backgroundColor: string | undefined;
+    borderColor: string | undefined;
+};
+//# sourceMappingURL=DataLineStyles.d.ts.map

package/dist/types/lib/DataLineStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataLineStyles.d.ts","sourceRoot":"","sources":["../../../src/lib/DataLineStyles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM;;;CAG3C,CAAA"}

package/dist/types/lib/DataPointStyles.d.ts

@@ -0,0 +1,8 @@
+export declare const DataPointStyles: (pointHoverBackgroundColor?: string) => {
+    pointHitRadius: number;
+    pointHoverBackgroundColor: string | undefined;
+    pointHoverRadius: number;
+    pointRadius: number;
+    pointStyle: string;
+};
+//# sourceMappingURL=DataPointStyles.d.ts.map

package/dist/types/lib/DataPointStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataPointStyles.d.ts","sourceRoot":"","sources":["../../../src/lib/DataPointStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,+BAAgC,MAAM;;;;;;CAMhE,CAAA"}

package/dist/types/lib/ForecastLineChartConfigBuilder.d.ts

@@ -0,0 +1,47 @@
+import { Theme } from '@mui/material';
+import { ForecastPayload } from '@xyo-network/diviner-forecasting-model';
+import { ChartData, ChartOptions, LegendOptions, ScaleChartOptions } from 'chart.js';
+import { _DeepPartialObject } from 'chart.js/dist/types/utils';
+interface SourcePayloadConfig {
+    fetch: boolean;
+    sampleSize?: number;
+}
+interface ThemeColors {
+    dataSetColorPrimary: string;
+    dataSetColorSecondary: string;
+    gridColor: string;
+}
+export declare class ForecastLineChartConfigBuilder {
+    private payload?;
+    data: ChartData<'line'>;
+    options: ChartOptions<'line'>;
+    themeColors: ThemeColors | undefined;
+    constructor(theme: Theme, payload?: (import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
+        schema: "network.xyo.diviner.forecasting.forecast";
+        values: import("@xyo-network/diviner-forecasting-model").Forecast[];
+    }) | undefined);
+    get forecastPayload(): import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
+        schema: "network.xyo.diviner.forecasting.forecast";
+        values: import("@xyo-network/diviner-forecasting-model").Forecast[];
+    };
+    static create(theme: Theme, payload?: ForecastPayload, sourcePayloadConfig?: SourcePayloadConfig): Promise<ForecastLineChartConfigBuilder>;
+    build(includeSources?: boolean): Promise<this>;
+    buildData(includeSources?: boolean): Promise<this>;
+    buildOptions(): this;
+    refreshValues(): void;
+    protected generateLegend(): _DeepPartialObject<LegendOptions<'line'>>;
+    protected generateScales(): _DeepPartialObject<ScaleChartOptions<'line'>['scales']>;
+    protected generateTitle(): {
+        display: boolean;
+        text: string;
+    };
+    protected parseTheme(theme: Theme): {
+        dataSetColorPrimary: string;
+        dataSetColorSecondary: string;
+        gridColor: string;
+    };
+    private generateDataSetForecastData;
+    private generateDataSetSourcePayloads;
+}
+export {};
+//# sourceMappingURL=ForecastLineChartConfigBuilder.d.ts.map

package/dist/types/lib/ForecastLineChartConfigBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForecastLineChartConfigBuilder.d.ts","sourceRoot":"","sources":["../../../src/lib/ForecastLineChartConfigBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AACxE,OAAO,EAAE,SAAS,EAAgB,YAAY,EAAE,aAAa,EAAS,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAEzG,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAM9D,UAAU,mBAAmB;IAC3B,KAAK,EAAE,OAAO,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,WAAW;IACnB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,qBAAqB,EAAE,MAAM,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;CAClB;AAWD,qBAAa,8BAA8B;IAOf,OAAO,CAAC,OAAO,CAAC;IAN1C,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAEtB;IACD,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,CAAmB;IAChD,WAAW,EAAE,WAAW,GAAG,SAAS,CAAA;gBAExB,KAAK,EAAE,KAAK,EAAU,OAAO,CAAC;;;kBAAiB;IAI3D,IAAI,eAAe;;;MAMlB;WAEY,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,eAAe,EAAE,mBAAmB,CAAC,EAAE,mBAAmB;IAUhG,KAAK,CAAC,cAAc,CAAC,EAAE,OAAO;IAM9B,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO;IAsBxC,YAAY;IAUZ,aAAa;IAKb,SAAS,CAAC,cAAc,IAAI,kBAAkB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IASrE,SAAS,CAAC,cAAc,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAmBnF,SAAS,CAAC,aAAa;;;;IASvB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK;;;;;IASjC,OAAO,CAAC,2BAA2B;YAWrB,6BAA6B;CAS5C"}

package/dist/types/lib/MockSourcePayloads.d.ts

@@ -0,0 +1,18 @@
+export declare const MockSourcePayloads: () => {
+    baseFee: number;
+    feePerGas: {
+        high: number;
+        low: number;
+        medium: number;
+        veryHigh: number;
+    };
+    priorityFeePerGas: {
+        high: number;
+        low: number;
+        medium: number;
+        veryHigh: number;
+    };
+    schema: string;
+    timestamp: number;
+}[];
+//# sourceMappingURL=MockSourcePayloads.d.ts.map

package/dist/types/lib/MockSourcePayloads.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockSourcePayloads.d.ts","sourceRoot":"","sources":["../../../src/lib/MockSourcePayloads.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;GAkB9B,CAAA"}

package/dist/types/lib/SourcePayloads.d.ts

@@ -0,0 +1,30 @@
+import { Payload } from '@xyo-network/payload-model';
+import { Point } from 'chart.js';
+export declare class SourcePayloads {
+    sourcePayloads: Payload[];
+    sourcePrices: Point[];
+    constructor(sourcePayloads: Payload[]);
+    get payloads(): (import("@xyo-network/payload-model").SchemaFields & import("@xyo-network/payload-model").PayloadFields & {
+        schema: string;
+    })[];
+    static build(jsonPath: string): Promise<SourcePayloads>;
+    static fetchSourcePayloads(): Promise<{
+        baseFee: number;
+        feePerGas: {
+            high: number;
+            low: number;
+            medium: number;
+            veryHigh: number;
+        };
+        priorityFeePerGas: {
+            high: number;
+            low: number;
+            medium: number;
+            veryHigh: number;
+        };
+        schema: string;
+        timestamp: number;
+    }[]>;
+    jsonPathTraverser(obj: Payload, path: string[]): any;
+}
+//# sourceMappingURL=SourcePayloads.d.ts.map

package/dist/types/lib/SourcePayloads.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SourcePayloads.d.ts","sourceRoot":"","sources":["../../../src/lib/SourcePayloads.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,qBAAa,cAAc;IAGN,cAAc,EAAE,OAAO,EAAE;IAF5C,YAAY,EAAE,KAAK,EAAE,CAAK;gBAEP,cAAc,EAAE,OAAO,EAAE;IAE5C,IAAI,QAAQ;;SAEX;WAEY,KAAK,CAAC,QAAQ,EAAE,MAAM;WAYtB,mBAAmB;;;;;;;;;;;;;;;;;IAKhC,iBAAiB,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE;CAe/C"}

package/dist/types/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ForecastLineChartConfigBuilder';
+export * from './MockSourcePayloads';
+export * from './SourcePayloads';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA"}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@xyo-network/react-price-forecast-plugin",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-async-effect": "^2.17.1",
+    "@xylabs/react-flexbox": "^2.17.1",
+    "@xyo-network/diviner-forecasting-model": "^2.56.0",
+    "@xyo-network/payload-model": "^2.56.0",
+    "@xyo-network/react-payload-plugin": "^2.49.2",
+    "chart.js": "^4.3.0",
+    "chartjs-adapter-luxon": "^1.3.1",
+    "luxon": "^3.3.0",
+    "react-chartjs-2": "^5.2.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^7.0.7",
+    "@xylabs/ts-scripts-yarn3": "^2.17.6",
+    "@xylabs/tsconfig-react": "^2.17.5",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "axios": "^1.3.4",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/types/index.d.ts",
+  "version": "2.48.8"
+}

package/src/Plugin.ts

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