Feature/chart 5 - creating custom tooltips

package.json

@@ -15,6 +15,7 @@
     "axios-extensions": "^3.1.3",
     "canvg": "^3.0.7",
     "core-js": "^3.6.5",
+    "date-fns": "^2.27.0",
     "decimal.js-light": "^2.5.1",
     "js-base64": "^3.6.1",
     "lightweight-charts": "^3.7.0",

src/components/UI/SwapChart.vue

@@ -6,8 +6,47 @@
 </template>
 
 <script>
-import { createChart } from 'lightweight-charts'
+import { isBusinessDay, createChart } from 'lightweight-charts'
+import { format } from 'date-fns'
 
+const WIDTH_PRICE_BAR = 54
+const tooltipsConfiguration = [
+  {
+    name: 'time',
+    position: 'left',
+    tooltipWidth: 93,
+    formatDate({ day, month, year }) {
+      return format(new Date(year, month, day), 'dd MMM. yy')
+    },
+    getData(param, { widthChartContainer }) {
+      const dateStr = isBusinessDay(param.time)
+        ? this.formatDate(param.time)
+        : new Date(param.time * 1000).toLocaleDateString()
+
+      let left = param.point.x - this.tooltipWidth / 2
+      left = Math.max(0, Math.min(widthChartContainer - this.tooltipWidth, left))
+
+      return {
+        text: `${dateStr}`,
+        position: `${left + WIDTH_PRICE_BAR}px`
+      }
+    }
+  },
+  {
+    name: 'price',
+    position: 'top',
+    tooltipHeight: 16,
+    getData(param, { areaSeries }) {
+      const price = param.seriesPrices.get(areaSeries)
+      const coordinate = Math.round(areaSeries.priceToCoordinate(price))
+
+      return {
+        text: `$${price}`,
+        position: `${coordinate - this.tooltipHeight / 2}px`
+      }
+    }
+  }
+]
 export default {
   name: 'SwapChart',
   props: {
@@ -45,8 +84,41 @@ export default {
     this.chart = createChart(this.$refs.swapChart, this.chartOptions)
     this.areaSeries = this.chart.addAreaSeries(this.areaStyleOptions)
     this.areaSeries.setData(this.datasets)
+
+    this.createTooltips()
   },
   methods: {
+    createTooltips() {
+      tooltipsConfiguration.forEach(tooltip => {
+        const widthChartContainer = this.$refs.swapChart.clientWidth
+        const tooltipNode = document.createElement('div')
+        tooltipNode.className = `tooltip tooltip--${tooltip.name}`
+
+        this.$refs.swapChart.appendChild(tooltipNode)
+
+        this.chart.subscribeCrosshairMove(param => {
+          if (
+            !param.time ||
+            param.point.x < 0 ||
+            param.point.y > widthChartContainer ||
+            param.point.y < 0 ||
+            param.point.y > 171
+          ) {
+            tooltipNode.style.display = 'none'
+            return
+          }
+
+          const tooltipData = tooltip.getData(param, {
+            widthChartContainer,
+            areaSeries: this.areaSeries
+          })
+
+          tooltipNode.style.display = 'block'
+          tooltipNode.innerHTML = tooltipData.text
+          tooltipNode.style[tooltip.position] = tooltipData.position
+        })
+      })
+    },
     updateChartOptions(newOptions) {
       this.chart.applyOptions(newOptions)
     },
@@ -63,7 +135,41 @@ export default {
 </script>
 
 <style lang="scss">
+.tooltip {
+  position: absolute;
+  display: none;
+  font-family: 'Nunito';
+  font-weight: 600;
+  padding: 2px 4px;
+  font-size: 9px;
+  line-height: 12px;
+  border-radius: 22px;
+  text-align: center;
+  z-index: 1000;
+  bottom: 10px;
+  pointer-events: none;
+
+  .theme--light & {
+    background-color: $--black;
+    color: #fff;
+  }
+
+  .theme--dark & {
+    background-color: $--white;
+    color: $--black;
+  }
+
+  &--time {
+    width: 93px;
+  }
+
+  &--price {
+    width: 48px;
+    height: 16px;
+  }
+}
 .swap-chart {
+  position: relative;
   &__no-data {
     position: absolute;
     left: 50%;
@@ -73,7 +179,7 @@ export default {
     color: get-theme-for($text, 'primary');
     font-weight: $--font-weight-medium;
     text-align: center;
-    z-index: 1000;
+    z-index: 1;
   }
 }
 </style>

src/components/UI/index.js

@@ -6,7 +6,7 @@ import SwapButtonGoBack from './SwapButtonGoBack.vue'
 import SwapCopyWrapper from './SwapCopyWrapper.vue'
 import SwapSkeleton from './SwapSkeleton.vue'
 import SwapChart from './SwapChart.vue'
-import swapSwitch from './swapSwitch.vue'
+import SwapSwitch from './SwapSwitch.vue'
 
 export default {
   install(Vue) {
@@ -18,6 +18,6 @@ export default {
     Vue.component('SwapCopyWrapper', SwapCopyWrapper)
     Vue.component('SwapSkeleton', SwapSkeleton)
     Vue.component('SwapChart', SwapChart)
-    Vue.component('swapSwitch', swapSwitch)
+    Vue.component('SwapSwitch', SwapSwitch)
   }
 }

src/components/Wallets/WalletChart.vue

@@ -26,6 +26,11 @@ const GRID_COLOR = {
   [LIGHT_THEME_KEY]: '#f6f6f6'
 }
 
+const CROSSHAIR = {
+  [DARK_THEME_KEY]: '#f6f6f6',
+  [LIGHT_THEME_KEY]: '#101010'
+}
+
 const COLOR_GRADIENT = {
   top: {
     [DARK_THEME_KEY]: 'rgba(97, 68, 229, 1)',
@@ -85,6 +90,26 @@ export default {
             return `$${price.toFixed(2)}`
           }
         },
+        timeScale: {
+          timeVisible: true,
+          borderVisible: false
+        },
+        crosshair: {
+          horzLine: {
+            visible: true,
+            style: 3,
+            width: 1,
+            color: CROSSHAIR[currentTheme],
+            labelVisible: false
+          },
+          vertLine: {
+            visible: true,
+            style: 3,
+            width: 1,
+            color: CROSSHAIR[currentTheme],
+            labelVisible: false
+          }
+        },
         grid: {
           vertLines: {
             color: GRID_COLOR[currentTheme]
@@ -99,10 +124,6 @@ export default {
         leftPriceScale: {
           visible: true,
           borderVisible: false
-        },
-        timeScale: {
-          timeVisible: true,
-          borderVisible: false
         }
       }