feat: Proposal voting timeline (#1255)

* feat: voting timeline

* fix: build error

* Requested changes

* minor style fixes

* custom tooltip started

* zoom in chart removed

* useProfiles hook

* tooltip styled

* type removed

* fix: tooltip x position

* final touchups

* requested changes

package.json

@@ -60,11 +60,14 @@
     "@tanstack/react-query": "^4.29.7",
     "autoprefixer": "^10.4.4",
     "chalk": "^4.1.2",
-    "chart.js": "^3.8.2",
+    "chart.js": "^4.4.0",
+    "chartjs-adapter-dayjs-4": "^1.0.4",
+    "chartjs-plugin-annotation": "^3.0.1",
     "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.21.1",
     "cssnano": "^6.0.1",
+    "dayjs": "^1.11.9",
     "dayjs-precise-range": "^1.0.1",
     "dcl-catalyst-client": "^21.5.0",
     "decentraland-gatsby": "^5.86.3",
@@ -97,7 +100,7 @@
     "pg-tsquery": "^8.3.0",
     "postcss": "^8.4.12",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.3.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^17.0.2",
     "react-flickity-component": "^3.6.2",
     "react-hook-form": "^7.43.5",

src/components/Charts/LineChart.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Chart } from 'react-chartjs-2'
 import { useIntl } from 'react-intl'
 
-import { ChartArea, ChartData, Chart as ChartJS } from 'chart.js'
+import type { ChartArea, ChartData, Chart as ChartJS } from 'chart.js'
 import 'chart.js/auto'
 
 import useAbbreviatedFormatter from '../../hooks/useAbbreviatedFormatter'

src/components/Charts/ProposalVPChart.css

@@ -0,0 +1,49 @@
+#ProposalVPChartTooltip {
+  --padding-size: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: rgba(22, 20, 26, 0.9);
+  border-radius: 5px;
+  color: var(--white-900);
+  opacity: 1;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, 0);
+  transition: all 0.1s ease;
+  width: max-content;
+  padding: var(--padding-size);
+  z-index: 100;
+}
+
+#ProposalVPChartTooltip .avatar {
+  --size: 40px;
+  min-width: var(--size) !important;
+  max-width: var(--size) !important;
+  min-height: var(--size) !important;
+  max-height: var(--size) !important;
+  border-radius: 100%;
+  background-color: var(--black-600);
+  vertical-align: middle;
+  margin: 0;
+}
+
+#ProposalVPChartTooltip .container {
+  margin: 0;
+  margin-left: var(--padding-size);
+}
+
+#ProposalVPChartTooltip .title {
+  font-size: 13px;
+  font-style: normal;
+  line-height: 18px;
+  max-width: 160px;
+}
+
+#ProposalVPChartTooltip .details {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  opacity: 0.6;
+}