Feature/#574 chart legend

package.json

@@ -4,7 +4,7 @@
   "homepage": ".",
   "private": true,
   "engines": {
-    "node": ">=4.4.7 <=14.16.4"
+    "node": ">=4.4.7 <=14.17.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -162,6 +162,8 @@
     }
   },
   "jest": {
-    "transformIgnorePatterns": ["/node_modules/(?!@amcharts)"]
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@amcharts)"
+    ]
   }
 }

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/AuctionDetails/index.tsx

@@ -254,10 +254,8 @@ const AuctionDetails = (props: Props) => {
   const { auctionDetails } = useAuctionDetails(auctionIdentifier)
 
   const { showPriceInverted } = useOrderPlacementState()
-  const {
-    orderbookPrice: auctionCurrentPrice,
-    orderbookPriceReversed: auctionPriceReversed,
-  } = useOrderbookState()
+  const { orderbookPrice: auctionCurrentPrice, orderbookPriceReversed: auctionPriceReversed } =
+    useOrderbookState()
   const { onInvertPrices } = useSwapActionHandlers()
 
   // Start with inverted prices, if orderbook is also show inverted,

src/components/auction/Charts/XYChart.ts

@@ -5,8 +5,11 @@ import * as am4core from '@amcharts/amcharts4/core'
 import am4themesSpiritedaway from '@amcharts/amcharts4/themes/spiritedaway'
 import { Decimal } from 'decimal.js'
 
+import bidsPic from '../../../assets/images/bidsLegendItem.svg'
+import currPricePic from '../../../assets/images/currPriceLegendItem.svg'
+import newOrderPic from '../../../assets/images/newOrderLegendItem.svg'
+import sellSupplyPic from '../../../assets/images/sellSupplyLegendItem.svg'
 import { ChainId, getTokenDisplay } from '../../../utils'
-
 // Recalculates very big and very small numbers by reducing their length according to rules and applying suffix/prefix.
 const numberFormatter = new am4core.NumberFormatter()
 numberFormatter.numberFormat = '###.00 a'
@@ -34,7 +37,7 @@ export const XYChart = (props: XYChartProps): am4charts.XYChart => {
 
   chart.paddingTop = 20
   chart.marginTop = 20
-  chart.paddingBottom = 0
+  chart.paddingBottom = 20
   chart.paddingLeft = 0
   chart.paddingRight = 0
   chart.marginBottom = 0
@@ -46,10 +49,37 @@ export const XYChart = (props: XYChartProps): am4charts.XYChart => {
     white: '#FFFFFF',
     grey: '#565A69',
     orange: '#FF6347',
-    tooltipBg: '#001429',
-    tooltipBorder: '#174172',
+    darkBlue: '#001429',
+    blue: '#174172',
   }
 
+  // Legend
+  chart.legend = new am4charts.Legend()
+  chart.legend.position = 'bottom'
+  chart.legend.marginBottom = 15
+  chart.legend.marginTop = 10
+
+  chart.legend.useDefaultMarker = true
+  /* Remove square from marker template */
+  const marker = chart.legend.markers.template
+  marker.disposeChildren()
+  marker.width = 23
+  marker.height = 23
+
+  /* Add custom image instead */
+  const flag = marker.createChild(am4core.Image)
+  flag.width = 23
+  flag.height = 23
+  flag.verticalCenter = 'top'
+  flag.horizontalCenter = 'left'
+  flag.adapter.add('href', (href: any, target: any) => {
+    if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.dummyData) {
+      return target.dataItem.dataContext.dummyData.flag
+    } else {
+      return href
+    }
+  })
+
   // Create axes
   const priceAxis = chart.xAxes.push(new am4charts.ValueAxis())
   const volumeAxis = chart.yAxes.push(new am4charts.ValueAxis())
@@ -76,55 +106,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.strokeWidth = 1
+  bidSeries.name = 'Bids'
   bidSeries.stroke = am4core.color(colors.green)
   bidSeries.fill = bidSeries.stroke
   bidSeries.startLocation = 0.5
   bidSeries.fillOpacity = 0.1
   bidSeries.dummyData = {
+    flag: bidsPic,
     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.strokeWidth = 1
+  askSeries.name = 'Sell Supply'
   askSeries.stroke = am4core.color(colors.red)
   askSeries.fill = askSeries.stroke
   askSeries.fillOpacity = 0.1
   askSeries.dummyData = {
+    flag: sellSupplyPic,
     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.strokeWidth = 1
+  inputSeries.name = 'New orders'
   inputSeries.stroke = am4core.color(colors.orange)
   inputSeries.fill = inputSeries.stroke
   inputSeries.fillOpacity = 0.1
   inputSeries.dummyData = {
+    flag: newOrderPic,
     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.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',
+    flag: currPricePic,
+    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
@@ -147,15 +182,12 @@ export const XYChart = (props: XYChartProps): am4charts.XYChart => {
   chart.zoomOutButton.icon.strokeWidth = 2
   chart.zoomOutButton.tooltip.text = 'Zoom out'
 
-  // 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 +196,7 @@ interface DrawInformation {
   baseToken: Token
   quoteToken: Token
   chainId: ChainId
+  textAuctionCurrentPrice: string
 }
 
 const formatNumberForChartTooltip = (n: number) => {
@@ -175,7 +208,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 +221,29 @@ export const drawInformation = (props: DrawInformation) => {
 
   xAxis.title.text = priceTitle
   yAxis.title.text = volumeTitle
+  const renderCurrentPriceLegendText = (textToReplace: string) => {
+    const regex = '(?<=">)[^<\\/strong>]*'
+    const match = textToReplace.match(new RegExp(regex))
+    if (match) {
+      return textToReplace.replace(regex, textAuctionCurrentPrice)
+    }
+    return textToReplace
+  }
 
   const {
-    values: [askPricesSeries, bidPricesSeries],
+    values: [askPricesSeries, bidPricesSeries, inputSeries, priceSeries],
   } = chart.series
 
+  inputSeries.dummyData = {
+    flag: newOrderPic,
+    description: renderCurrentPriceLegendText(inputSeries.dummyData.description),
+  }
+
+  priceSeries.dummyData = {
+    flag: currPricePic,
+    description: renderCurrentPriceLegendText(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/Claimer/index.tsx

@@ -122,10 +122,10 @@ const Claimer: React.FC<Props> = (props) => {
         setUserConfirmedTx(false)
       })
 
-  const biddingTokenDisplay = useMemo(() => getTokenDisplay(biddingToken, chainId), [
-    biddingToken,
-    chainId,
-  ])
+  const biddingTokenDisplay = useMemo(
+    () => getTokenDisplay(biddingToken, chainId),
+    [biddingToken, chainId],
+  )
 
   const biddingTokenDisplayWrapped = useMemo(
     () =>
@@ -137,10 +137,10 @@ const Claimer: React.FC<Props> = (props) => {
     [biddingTokenDisplay],
   )
 
-  const auctioningTokenDisplay = useMemo(() => getTokenDisplay(auctioningToken, chainId), [
-    auctioningToken,
-    chainId,
-  ])
+  const auctioningTokenDisplay = useMemo(
+    () => getTokenDisplay(auctioningToken, chainId),
+    [auctioningToken, chainId],
+  )
 
   const isLoading = useMemo(
     () =>

src/components/auction/OrderPlacement/index.tsx

@@ -151,13 +151,15 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
   const [pendingConfirmation, setPendingConfirmation] = useState<boolean>(true) // waiting for user confirmation
   const [txHash, setTxHash] = useState<string>('')
 
-  const auctioningToken = React.useMemo(() => derivedAuctionInfo.auctioningToken, [
-    derivedAuctionInfo.auctioningToken,
-  ])
+  const auctioningToken = React.useMemo(
+    () => derivedAuctionInfo.auctioningToken,
+    [derivedAuctionInfo.auctioningToken],
+  )
 
-  const biddingToken = React.useMemo(() => derivedAuctionInfo.biddingToken, [
-    derivedAuctionInfo.biddingToken,
-  ])
+  const biddingToken = React.useMemo(
+    () => derivedAuctionInfo.biddingToken,
+    [derivedAuctionInfo.biddingToken],
+  )
 
   const parsedBiddingAmount = tryParseAmount(sellAmount, biddingToken)
   const approvalTokenAmount: TokenAmount | undefined = parsedBiddingAmount
@@ -222,14 +224,14 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
   }
 
   const pendingText = `Placing order`
-  const biddingTokenDisplay = useMemo(() => getTokenDisplay(biddingToken, chainId), [
-    biddingToken,
-    chainId,
-  ])
-  const auctioningTokenDisplay = useMemo(() => getTokenDisplay(auctioningToken, chainId), [
-    auctioningToken,
-    chainId,
-  ])
+  const biddingTokenDisplay = useMemo(
+    () => getTokenDisplay(biddingToken, chainId),
+    [biddingToken, chainId],
+  )
+  const auctioningTokenDisplay = useMemo(
+    () => getTokenDisplay(auctioningToken, chainId),
+    [auctioningToken, chainId],
+  )
   const notApproved = approval === ApprovalState.NOT_APPROVED || approval === ApprovalState.PENDING
   const orderPlacingOnly = auctionState === AuctionState.ORDER_PLACING
   const coversClearingPrice = (price: string | undefined, showPriceInverted: boolean): boolean => {
@@ -278,9 +280,10 @@ const OrderPlacement: React.FC<OrderPlacementProps> = (props) => {
     [derivedAuctionInfo?.auctionEndDate, derivedAuctionInfo?.orderCancellationEndDate],
   )
 
-  const isPrivate = React.useMemo(() => auctionDetails && auctionDetails.isPrivateAuction, [
-    auctionDetails,
-  ])
+  const isPrivate = React.useMemo(
+    () => auctionDetails && auctionDetails.isPrivateAuction,
+    [auctionDetails],
+  )
   const signatureAvailable = React.useMemo(() => signature && signature.length > 10, [signature])
 
   const onMaxInput = React.useCallback(() => {

src/components/auction/Orderbook/index.tsx

@@ -21,6 +21,7 @@ const Wrapper = styled(BaseCard)`
   height: 100%;
   min-height: 352px;
   min-width: 100%;
+  padding-bottom: 0;
 `
 interface OrderbookProps {
   derivedAuctionInfo: DerivedAuctionInfo