diff --git a/src/@context/Asset.tsx b/src/@context/Asset.tsx index 2f19f690af..8b8d3913c2 100644 --- a/src/@context/Asset.tsx +++ b/src/@context/Asset.tsx @@ -147,9 +147,14 @@ function AssetProvider({ asset.chainId, asset.services[0].datatokenAddress ) + const orders = transactionHistory.token.orders + .slice() + .sort((a, b) => a.createdTimestamp - b.createdTimestamp) + setAsset((prevState) => ({ ...prevState, - transactionHistory + transactionHistory, + orders })) }, [asset?.chainId, asset?.services]) diff --git a/src/@types/AssetExtended.d.ts b/src/@types/AssetExtended.d.ts index dd628aa23b..b8231f0130 100644 --- a/src/@types/AssetExtended.d.ts +++ b/src/@types/AssetExtended.d.ts @@ -5,6 +5,7 @@ import { Asset } from '@oceanprotocol/lib' declare global { interface AssetExtended extends Asset { accessDetails?: AccessDetails - transactionHistory?: TransactionHistory + transactionHistory: TransactionHistory + orders: Order[] } } diff --git a/src/@types/TransactionHistory.d.ts b/src/@types/TransactionHistory.d.ts index ffc2002e9c..591181cf71 100644 --- a/src/@types/TransactionHistory.d.ts +++ b/src/@types/TransactionHistory.d.ts @@ -24,7 +24,7 @@ interface TransactionHistory { publishMarketFeeAddress: string publishMarketFeeToken: string publishMarketFeeAmount: string - orders: [Orders] + orders: Order[] dispensers: [ { id: string diff --git a/src/components/Asset/AssetContent/TransactionHistoryBrushVisualization.tsx b/src/components/Asset/AssetContent/TransactionHistoryBrushVisualization.tsx index bf4f7cdd16..e69de29bb2 100644 --- a/src/components/Asset/AssetContent/TransactionHistoryBrushVisualization.tsx +++ b/src/components/Asset/AssetContent/TransactionHistoryBrushVisualization.tsx @@ -1,188 +0,0 @@ -import React, { useRef, useState, useMemo } from 'react' -import { scaleTime, scaleLinear } from '@visx/scale' -import { Brush } from '@visx/brush' -import { Bounds } from '@visx/brush/lib/types' -import BaseBrush, { - BaseBrushState, - UpdateBrush -} from '@visx/brush/lib/BaseBrush' -import { PatternLines } from '@visx/pattern' -import { Group } from '@visx/group' -import { LinearGradient } from '@visx/gradient' -import { max, extent } from 'd3-array' -import { BrushHandleRenderProps } from '@visx/brush/src/BrushHandle' -import TransactionHistoryVisualization from './TransactionHistoryVisualization' -import { useAsset } from '@context/Asset' - -// Initialize some variables -const brushMargin = { top: 10, bottom: 15, left: 50, right: 20 } -const chartSeparation = 30 -const PATTERN_ID = 'brush_pattern' -const GRADIENT_ID = 'brush_gradient' -export const accentColor = '#f6acc8' -export const background = '#584153' -export const background2 = '#af8baf' -const selectedBrushStyle = { - fill: `url(#${PATTERN_ID})`, - stroke: 'white' -} - -export type BrushProps = { - width: number - height: number - events?: boolean - margin?: { top: number; right: number; bottom: number; left: number } - compact?: boolean -} - -function BrushChart({ - width, - height, - events = false, - margin = { - top: 20, - left: 50, - bottom: 20, - right: 50 - }, - compact = false -}: BrushProps) { - const brushRef = useRef(null) - const { asset } = useAsset() - const txs: TransactionHistory = asset.transactionHistory - const orders = asset.transactionHistory?.token?.orders - ?.slice() - .sort((a, b) => a.createdTimestamp - b.createdTimestamp) - - // const onBrushChange = (domain: Bounds | null) => { - // if (!domain) return - // const { x0, x1, y0, y1 } = domain - // const stockCopy = stock.filter((s) => { - // const x = getDate(s).getTime() - // const y = getStockValue(s) - // return x > x0 && x < x1 && y > y0 && y < y1 - // }) - // setFilteredStock(stockCopy) - // } - - const innerHeight = height - margin.top - margin.bottom - const topChartBottomMargin = compact - ? chartSeparation / 2 - : chartSeparation + 10 - const topChartHeight = 0.8 * innerHeight - topChartBottomMargin - const bottomChartHeight = innerHeight - topChartHeight - chartSeparation - - // bounds - const xMax = Math.max(width - margin.left - margin.right, 0) - const yMax = Math.max(topChartHeight, 0) - const xBrushMax = Math.max(width - brushMargin.left - brushMargin.right, 0) - const yBrushMax = Math.max( - bottomChartHeight - brushMargin.top - brushMargin.bottom, - 0 - ) - - // accessors - const getDate = (d: Order) => new Date(d.createdTimestamp * 1000) - const getY = (d: Order) => parseFloat(d.amount) - - // scales - const brushDateScale = useMemo( - () => - scaleTime({ - range: [50, xBrushMax - 50], - domain: [ - new Date(orders?.length && orders[0]?.createdTimestamp * 1000), - new Date() - ] - }), - [xBrushMax, orders] - ) - const brushStockScale = useMemo( - () => - scaleLinear({ - range: [yMax, 0], - nice: true - }), - [yMax] - ) - - // const initialBrushPosition = useMemo( - // () => ({ - // start: { x: brushDateScale(getDate(txs?.token?.orders[0])) }, - // end: { x: brushDateScale(getDate(txs?.token?.orders[0])) } - // // end: { - // // x: brushDateScale(getDate(orders?.length && orders[orders?.length - 1])) - // // } - // }), - // [brushDateScale, orders] - // ) - - // // event handlers - // const handleClearClick = () => { - // if (brushRef?.current) { - // setFilteredStock(stock) - // brushRef.current.reset() - // } - // } - - // const handleResetClick = () => { - // if (brushRef?.current) { - // const updater: UpdateBrush = (prevBrush) => { - // const newExtent = brushRef.current!.getExtent( - // initialBrushPosition.start, - // initialBrushPosition.end - // ) - - // const newState: BaseBrushState = { - // ...prevBrush, - // start: { y: newExtent.y0, x: newExtent.x0 }, - // end: { y: newExtent.y1, x: newExtent.x1 }, - // extent: newExtent - // } - - // return newState - // } - // brushRef.current.updateBrush(updater) - // } - // } - - return ( - - - - - - - - - ) -} -// // We need to manually offset the handles for them to be rendered at the right position -// const BrushHandle = ({ x, height, isBrushActive }: BrushHandleRenderProps) => { -// const pathWidth = 8 -// const pathHeight = 15 -// if (!isBrushActive) { -// return null -// } -// return ( -// -// -// -// ) -// } - -export default BrushChart diff --git a/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx b/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx index 4413482b36..118a87448a 100644 --- a/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx +++ b/src/components/Asset/AssetContent/TransactionHistoryVisualization.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useRef, useState } from 'react' +import React, { useEffect, useMemo, useRef, useState } from 'react' import { LinearGradient } from '@visx/gradient' import { scaleLinear, scaleTime } from '@visx/scale' import { Group } from '@visx/group' @@ -13,8 +13,10 @@ import { WithTooltipProvidedProps } from '@visx/tooltip/lib/enhancers/withToolti import { AxisBottom } from '@visx/axis' import { Bounds } from '@visx/brush/lib/types' import { extent } from 'd3-array' -import { filter } from 'lodash' import BaseBrush from '@visx/brush/lib/BaseBrush' +import { BrushHandleRenderProps } from '@visx/brush/lib/BrushHandle' +import { PatternLines } from '@visx/pattern' +import { Brush } from '@visx/brush' // tooltip const tooltipStyles = { @@ -52,12 +54,17 @@ export default withTooltip( }: TimelineProps & WithTooltipProvidedProps) => { const brushRef = useRef(null) const { asset } = useAsset() - const txs: TransactionHistory = asset.transactionHistory - const orders = asset.transactionHistory?.token?.orders - .slice() - .sort((a, b) => a.createdTimestamp - b.createdTimestamp) + const { orders } = asset - const [filteredOrders, setFilteredOrders] = useState(orders?.slice()) + const [initialOrders, setInitialOrders] = useState([]) + const [filteredOrders, setFilteredOrders] = useState([]) + + useEffect(() => { + orders && setInitialOrders(orders) + }, [orders]) + useEffect(() => { + orders && setFilteredOrders(orders) + }, [orders]) // bounds const xMax = width - 30 @@ -67,79 +74,30 @@ export default withTooltip( const getDate = (d: Order) => new Date(d?.createdTimestamp * 1000) const getY = (d: Order) => parseFloat(d?.amount) - // const onBrushChange = (domain: Bounds | null) => { - // if (!domain) return - // const { x0, x1, y0, y1 } = domain - // const ordersCopy = - // orders?.length && - // orders?.filter((order) => { - // const x = getDate(order).getTime() - // const y = getY(order) - // return x > x0 && x < x1 && y > y0 && y < y1 - // }) - // setFilteredOrders(ordersCopy) - // setFilteredOrders(orders) - // } + const onBrushChange = (domain: Bounds | null) => { + if (!domain) return + const { x0, x1 } = domain + console.log(x0) + console.log(x1) + const ordersCopy = + orders && + orders.filter((order) => { + const x = getDate(order).getTime() + return x > x0 && x < x1 // && y > y0 && y < y1 + }) + console.log([...ordersCopy]) + setFilteredOrders(ordersCopy) + } // scales const xScale = useMemo( () => scaleTime({ range: [50, xMax - 50], - domain: [ - new Date(orders?.length && orders[0]?.createdTimestamp * 1000), - new Date() - ] + domain: extent(filteredOrders, getDate) as [Date, Date] }), - [xMax, orders] + [xMax, filteredOrders] ) - // const xScale = useMemo( - // () => - // scaleTime({ - // range: [50, xMax - 50], - // domain: [ - // new Date( - // filteredOrders?.length && - // filteredOrders[0]?.createdTimestamp * 1000 - // ), - // new Date() - // ] - // }), - // [xMax, filteredOrders] - // ) - // const xScale = useMemo( - // () => - // scaleTime({ - // range: [50, xMax - 50], - // domain: [new Date(orders?.length && getDate(orders[0])), new Date()] - // }), - // [xMax, orders] - // ) - // const xScale = useMemo( - // () => - // scaleTime({ - // range: [50, xMax - 50], - // domain: extent(orders, getDate) as [Date, Date] - // }), - // [xMax, orders] - // ) - // const xScale = useMemo( - // () => - // scaleTime({ - // range: [50, xMax - 50], - // domain: [ - // new Date( - // filteredOrders?.length && - // filteredOrders[0]?.createdTimestamp * 1000 - // ), - // new Date( - // filteredOrders?.length && - // filteredOrders[filteredOrders?.length]?.createdTimestamp * 1000 - // ) || new Date() - // ] - // }), - // [xMax, filteredOrders] - // ) const yScale = useMemo( () => scaleLinear({ @@ -148,6 +106,22 @@ export default withTooltip( }), [yMax] ) + const xBrushScale = useMemo( + () => + scaleTime({ + range: [50, xMax - 50], + domain: extent(initialOrders, getDate) as [Date, Date] + }), + [xMax, initialOrders] + ) + const yBrushScale = useMemo( + () => + scaleLinear({ + range: [yMax, 0], + nice: true + }), + [yMax] + ) // event handlers const handleClearClick = () => { @@ -157,15 +131,89 @@ export default withTooltip( } } + // We need to manually offset the handles for them to be rendered at the right position + const BrushHandle = ({ + x, + height, + isBrushActive + }: BrushHandleRenderProps) => { + const pathWidth = 8 + const pathHeight = 15 + if (!isBrushActive) { + return null + } + return ( + + + + ) + } + return (
- {orders?.map((order: Order, i) => { + {initialOrders.map((order: Order, i) => { + return ( + + + + ) + })} + axisBottomTickLabelProps} + /> + + + setFilteredOrders(orders)} + selectedBoxStyle={{ + fill: `url(#${'brush_pattern'})`, + stroke: 'black' + }} + useWindowMoveEvents + renderBrushHandle={(props) => } + /> + + {filteredOrders.map((order: Order, i) => { return ( - - {/* {console.log(getDate(order))} */} + ( stroke="rgba(33,33,33,0.5)" fill={tooltipData === order ? 'white' : '#000000'} onMouseOver={() => { - const top = height / 2 - yScale(getY(order)) + 10 + const top = height - 110 const left = xScale(getDate(order)) showTooltip({ tooltipData: order, @@ -189,7 +237,7 @@ export default withTooltip( })}
-

Transaction History Brush Visualization

- {/*
- -
*/} +

Transaction History Visualization

- {/*
-

Transaction History Visualization

- -
*/} -