Merge branch 'feature/#574-chart-legend' of https://github.com/gnosis…

…/ido-ux into feature/#574-chart-legend

src/components/auction/AuctionBody/index.tsx

@@ -13,7 +13,6 @@ import OrdersTable from '../OrdersTable'
 const Grid = styled.div`
   display: flex;
   flex-direction: column;
-  margin: 0 0 40px;
 
   @media (min-width: ${({ theme }) => theme.themeBreakPoints.xxl}) {
     display: grid;
@@ -28,6 +27,7 @@ const GridCol = styled.div`
   flex-direction: column;
   max-width: 100%;
   justify-content: flex-end;
+  margin: 0 0 40px;
   @media (max-width: ${({ theme }) => theme.themeBreakPoints.xxl}) {
     overflow-x: auto;
   }

src/components/auction/Charts/XYChart.ts

@@ -46,8 +46,8 @@ export const XYChart = (props: XYChartProps): am4charts.XYChart => {
     white: '#FFFFFF',
     grey: '#565A69',
     orange: '#FF6347',
-    tooltipBg: '#001429',
-    tooltipBorder: '#174172',
+    darkBlue: '#001429',
+    blue: '#174172',
   }
 
   // Create axes
@@ -76,55 +76,60 @@ export const XYChart = (props: XYChartProps): am4charts.XYChart => {
   const bidSeries = chart.series.push(new am4charts.StepLineSeries())
   bidSeries.dataFields.valueX = 'priceNumber'
   bidSeries.dataFields.valueY = 'bidValueY'
+  bidSeries.name = 'Bids'
   bidSeries.strokeWidth = 1
   bidSeries.stroke = am4core.color(colors.green)
   bidSeries.fill = bidSeries.stroke
   bidSeries.startLocation = 0.5
   bidSeries.fillOpacity = 0.1
   bidSeries.dummyData = {
     description:
-      'Shows the price (x axis) and size (y axis) of the bids that have been placed, both expressed in the bid token',
+      'Shows the price (x axis) and size (y axis)<br/> of the bids that have been placed,<br/> both expressed in the bid token',
   }
 
   // Create serie, red line, shows the minimum sell price (x axis) the auctioneer is willing to accept
   const askSeries = chart.series.push(new am4charts.LineSeries())
   askSeries.dataFields.valueX = 'priceNumber'
   askSeries.dataFields.valueY = 'askValueY'
+  askSeries.name = 'Sell Suply'
   askSeries.strokeWidth = 1
   askSeries.stroke = am4core.color(colors.red)
   askSeries.fill = askSeries.stroke
   askSeries.fillOpacity = 0.1
   askSeries.dummyData = {
     description:
-      'Shows sell supply of the auction based on the price and nominated in the bidding token',
+      'Shows sell supply of the auction<br/> based on the price and nominated<br/> in the bidding token',
   }
 
   // New order to be placed
   const inputSeries = chart.series.push(new am4charts.LineSeries())
   inputSeries.dataFields.valueX = 'priceNumber'
   inputSeries.dataFields.valueY = 'newOrderValueY'
+  inputSeries.name = 'New orders'
   inputSeries.strokeWidth = 1
   inputSeries.stroke = am4core.color(colors.orange)
   inputSeries.fill = inputSeries.stroke
   inputSeries.fillOpacity = 0.1
   inputSeries.dummyData = {
     description:
-      'Shows the new order that would be placed based on the current amount and price input',
+      'Shows the new order<br/> that would be placed based<br/> on the current amount and price input',
   }
 
   // Dotted white line -> shows the Current price, which is the closing price of the auction if
   // no more bids are submitted or cancelled and the auction ends
+  const currPriceMockVal = '4.05 DAI'
+
   const priceSeries = chart.series.push(new am4charts.LineSeries())
   priceSeries.dataFields.valueX = 'priceNumber'
   priceSeries.dataFields.valueY = 'clearingPriceValueY'
+  priceSeries.name = 'Current price'
   priceSeries.strokeWidth = 2
   priceSeries.strokeDasharray = '3,3'
   priceSeries.stroke = am4core.color(colors.white)
-  priceSeries.fill = inputSeries.stroke
+  priceSeries.fill = priceSeries.stroke
   priceSeries.fillOpacity = 0.1
   priceSeries.dummyData = {
-    description:
-      'Shows the current price. This price would be the closing price of the auction if no more bids are submitted or cancelled',
+    description: `Shows the current price: <strong style="font-size:14px;">[${currPriceMockVal}]</strong> <br/>This price would be<br/> the closing price of the auction<br/> if no more bids are submitted or cancelled`,
   }
 
   // Add cursor
@@ -150,11 +155,11 @@ export const XYChart = (props: XYChartProps): am4charts.XYChart => {
   // Legend
   chart.legend = new am4charts.Legend()
   chart.legend.labels.template.fill = am4core.color(colors.white)
-  chart.tooltip.getFillFromObject = false
-  chart.tooltip.background.fill = am4core.color(colors.tooltipBg)
-  chart.tooltip.background.stroke = am4core.color(colors.tooltipBorder)
   chart.legend.itemContainers.template.tooltipHTML =
-    '<div style="white-space: normal!important;max-width: 300px;padding:0 5px 5px;">{dataContext.dummyData.description}</div>'
+    '<div>{dataContext.dummyData.description}</div>'
+  chart.tooltip.getFillFromObject = false
+  chart.tooltip.background.stroke = am4core.color(colors.blue)
+  chart.tooltip.background.fill = am4core.color(colors.darkBlue)
 
   return chart
 }
@@ -164,6 +169,7 @@ interface DrawInformation {
   baseToken: Token
   quoteToken: Token
   chainId: ChainId
+  textAuctionCurrentPrice: string
 }
 
 const formatNumberForChartTooltip = (n: number) => {
@@ -175,7 +181,7 @@ const formatNumberForChartTooltip = (n: number) => {
 }
 
 export const drawInformation = (props: DrawInformation) => {
-  const { baseToken, chainId, chart, quoteToken } = props
+  const { baseToken, chainId, chart, quoteToken, textAuctionCurrentPrice } = props
   const baseTokenLabel = baseToken.symbol
   const quoteTokenLabel = getTokenDisplay(quoteToken, chainId)
   const market = quoteTokenLabel + '-' + baseTokenLabel
@@ -188,11 +194,18 @@ export const drawInformation = (props: DrawInformation) => {
 
   xAxis.title.text = priceTitle
   yAxis.title.text = volumeTitle
+  const renderCurrentPriceLegentText = (textToReplace: string) => {
+    return textToReplace.replace(/(?<=">)[^<\\/strong>]*/, textAuctionCurrentPrice)
+  }
 
   const {
-    values: [askPricesSeries, bidPricesSeries],
+    values: [askPricesSeries, bidPricesSeries, , priceSeries],
   } = chart.series
 
+  priceSeries.dummyData = {
+    description: renderCurrentPriceLegentText(priceSeries.dummyData.description),
+  }
+
   askPricesSeries.adapter.add('tooltipText', (text, target) => {
     const valueX = target?.tooltipDataItem?.values?.valueX?.value ?? 0
     const valueY = target?.tooltipDataItem?.values?.valueY?.value ?? 0

src/components/auction/OrderbookChart/index.tsx

@@ -3,10 +3,14 @@ import styled from 'styled-components'
 import { Token } from 'uniswap-xdai-sdk'
 
 import useChart from '../../../hooks/useChart'
+import { useOrderPlacementState } from '../../../state/orderPlacement/hooks'
+import { useOrderbookState } from '../../../state/orderbook/hooks'
 import { ChainId } from '../../../utils'
+import { abbreviation } from '../../../utils/numeral'
 import { InlineLoading } from '../../common/InlineLoading'
 import { SpinnerSize } from '../../common/Spinner'
 import { XYChart } from '../Charts/XYChart'
+import { CalculatorClearingPrice } from '../OrderbookWidget'
 
 export enum Offer {
   Bid,
@@ -50,7 +54,6 @@ const Wrapper = styled.div`
   flex-grow: 1;
   flex-shrink: 0;
   justify-content: center;
-  height: 100%;
   max-height: 340px;
   position: relative;
   width: 100%;
@@ -101,13 +104,24 @@ const Wrapper = styled.div`
 
 const OrderBookChart: React.FC<Props> = (props) => {
   const { baseToken, chainId, data, quoteToken } = props
+  const { asks, bids, userOrderPrice, userOrderVolume } = useOrderbookState()
+  const { showPriceInverted } = useOrderPlacementState()
+  const calculatedAuctionPrice = CalculatorClearingPrice.fromOrderbook(bids, asks[0], {
+    price: userOrderPrice,
+    volume: userOrderVolume,
+  })
+
+  const textAuctionCurrentPrice = showPriceInverted
+    ? `${abbreviation(calculatedAuctionPrice.priceReversed)} ${baseToken.symbol}`
+    : `${abbreviation(calculatedAuctionPrice.price)} ${quoteToken.symbol}`
 
   const { loading, mountPoint } = useChart({
     createChart: XYChart,
     data,
     baseToken,
     quoteToken,
     chainId,
+    textAuctionCurrentPrice,
   })
 
   return (

src/hooks/useChart.ts

@@ -13,10 +13,11 @@ interface Props {
   baseToken: Token
   quoteToken: Token
   chainId: ChainId
+  textAuctionCurrentPrice: string
 }
 
 const useChart = (props: Props) => {
-  const { baseToken, chainId, createChart, data, quoteToken } = props
+  const { baseToken, chainId, createChart, data, quoteToken, textAuctionCurrentPrice } = props
 
   const [loading, setLoading] = useState(false)
 
@@ -54,10 +55,11 @@ const useChart = (props: Props) => {
       baseToken,
       quoteToken,
       chainId,
+      textAuctionCurrentPrice,
     })
 
     chartRef.current.data = data
-  }, [baseToken, quoteToken, data, chainId])
+  }, [baseToken, quoteToken, data, chainId, textAuctionCurrentPrice])
 
   return { chartRef, mountPoint, loading }
 }