Merge branch 'develop' into 'filters_logic'

# Conflicts:
#   src/cryptometrics/components/button/Button.js

src/cryptometrics/.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# parcel
+.parcel-cache

src/cryptometrics/.postcssrc

+{
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
\ No newline at end of file

src/cryptometrics/components/button/Button.js

-import classNames from "classnames";
 import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
 
-export default function Button({ children, className, onClick, type }) {
+/**
+ * Custom button component
+ *
+ * @component
+ * @example
+ * return (
+ *   <Button className="bg-indigo-500 text-white" onClick={() => console.log("Button pressed")}>
+ *      Hello!
+ *   </Button>
+ * )
+ */
+function Button({ children, className, onClick, type }) {
   return (
     <button
       className={classNames("py-2 px-5 rounded-xl", className)}
@@ -12,3 +24,20 @@ export default function Button({ children, className, onClick, type }) {
     </button>
   );
 }
+
+Button.propTypes = {
+  /**
+   * The content inside the button
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Additional CSS classes for the button (optional)
+   */
+  className: PropTypes.string,
+  /**
+   * The function to run when button is pressed
+   */
+  onClick: PropTypes.func,
+};
+
+export default Button;

src/cryptometrics/components/button/ToggleButton.js

+import React from "react";
+import classNames from "classnames";
+
+export function ToggleButton({ children, setActive, active, id }) {
+  return (
+    <button
+      className={classNames(" px-3 py-2 rounded-md font-light", {
+        "dark:bg-white dark:text-gray-800": active === id,
+        "dark:bg-black dark:text-gray-400": active !== id,
+      })}
+      onClick={() => setActive(id)}
+    >
+      {children}
+    </button>
+  );
+}

src/cryptometrics/components/charts/CompareChart.js

-import classNames from "classnames";
 import React, { useState, useRef } from "react";
 import ReactECharts from "echarts-for-react";
-import { useCryptoTimeSeriesRangeData } from "../../queries";
+import { useCryptoList, useCryptoTimeSeriesRangeData } from "../../queries";
 import moment from "moment";
+import { ToggleButton } from "../button/ToggleButton";
+import Dropdown from "../dropdown/Dropdown";
+import { ChevronDoubleRightIcon } from "@heroicons/react/outline";
 
 const unixNow = () => {
   return moment().unix();
@@ -15,13 +17,16 @@ const unixSubtractId = (id) => {
 function CompareChart() {
   const [timerange, setTimerange] = useState("6month");
   const chartRef = useRef(null);
+  const listOfCoins = useCryptoList("usd", 21, false);
+  const [firstCrypto, setFirstCrypto] = useState("solana");
+  const [secondCrypto, setSecondCrypto] = useState("ethereum");
   const cryptoQuery = useCryptoTimeSeriesRangeData(
-    "solana",
+    firstCrypto,
     unixSubtractId(timerange),
     unixNow()
   );
   const cryptoQuery2 = useCryptoTimeSeriesRangeData(
-    "avalanche-2",
+    secondCrypto,
     unixSubtractId(timerange),
     unixNow()
   );
@@ -67,7 +72,7 @@ function CompareChart() {
       {
         type: "line",
         data: cryptoQuery.data?.prices,
-        name: "Solana",
+        name: firstCrypto,
         smooth: true,
         symbol: "none",
         lineStyle: {
@@ -82,7 +87,7 @@ function CompareChart() {
       {
         type: "line",
         data: cryptoQuery2.data?.prices,
-        name: "Avalanche",
+        name: secondCrypto,
         smooth: true,
         symbol: "none",
         lineStyle: {
@@ -118,6 +123,24 @@ function CompareChart() {
         <ToggleButton id="1year" active={timerange} setActive={setTimerange}>
           1Y
         </ToggleButton>
+
+        <div className="flex-1">{/* Space Fillter */}</div>
+
+        <div className="flex flex-row space-x-5 items-center">
+          <Dropdown
+            list={listOfCoins.isLoading ? [] : listOfCoins.data}
+            value={firstCrypto}
+            setValue={setFirstCrypto}
+            disabled={[secondCrypto]}
+          />
+          <ChevronDoubleRightIcon className="w-5 h-5 dark:text-gray-300" />
+          <Dropdown
+            list={listOfCoins.isLoading ? [] : listOfCoins.data}
+            value={secondCrypto}
+            setValue={setSecondCrypto}
+            disabled={[firstCrypto]}
+          />
+        </div>
       </div>
       <div className="h-[600px] mt-10">
         <ReactECharts
@@ -132,18 +155,4 @@ function CompareChart() {
   );
 }
 
-function ToggleButton({ children, setActive, active, id }) {
-  return (
-    <button
-      className={classNames(" px-3 py-2 rounded-md font-light", {
-        "dark:bg-white dark:text-gray-800": active === id,
-        "dark:bg-black dark:text-gray-400": active !== id,
-      })}
-      onClick={() => setActive(id)}
-    >
-      {children}
-    </button>
-  );
-}
-
 export default CompareChart;

src/cryptometrics/components/dropdown/Dropdown.js

+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { ChevronDownIcon } from "@heroicons/react/outline";
+
+function getCoin(list, id) {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].id == id) {
+      return list[i];
+    }
+  }
+  return null;
+}
+
+function Dropdown({ list, value, setValue, disabled }) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [value]);
+
+  return (
+    <div className="relative">
+      <button
+        className={classNames(" px-3 py-2 rounded-md font-light", {
+          "dark:bg-white dark:text-gray-800": false,
+          "dark:bg-black dark:text-gray-400": true,
+        })}
+        onClick={() => setOpen(!open)}
+      >
+        <div className="flex flex-row items-center space-x-2">
+          <p>{getCoin(list, value)?.name}</p>
+          <ChevronDownIcon className="h-5 w-5" />
+        </div>
+      </button>
+      {open && (
+        <div className="absolute h-fit max-h-52 min-w-[9rem] w-fit bg-dark-900 top-12 right-0 rounded-xl z-50 overflow-y-scroll">
+          <div className="my-2">
+            {list.map((coin, index) => {
+              return (
+                <DropdownItem
+                  onClick={() => setValue(coin.id)}
+                  key={index}
+                  selected={coin.id === value}
+                  disabled={disabled.includes(coin.id)}
+                >
+                  {coin.name}
+                </DropdownItem>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DropdownItem({ children, onClick, selected, disabled }) {
+  return (
+    <div
+      className={classNames("py-2 px-4 rounded-xl mx-2", {
+        "opacity-75 dark:text-gray-500": disabled,
+        "bg-white dark:text-black": selected,
+        "hover:bg-dark-600 dark:text-white cursor-pointer":
+          !disabled && !selected,
+      })}
+      onClick={selected || disabled ? undefined : onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Dropdown;

src/cryptometrics/jsdoc.json

+{
+  "tags": {
+    "allowUnknownTags": true
+  },
+  "source": {
+    "include": ["components", "pages"]
+  },
+  "plugins": ["plugins/markdown", "better-docs/component"],
+  "opts": {
+    "encoding": "utf8",
+    "destination": "docs/",
+    "recurse": true,
+    "verbose": true,
+    "template": "./node_modules/better-docs"
+  },
+  "templates": {
+    "better-docs": {
+      "name": "CryptoMetrics",
+      "component": {
+        "entry": ["import '../styles/docs.css';"]
+      }
+    }
+  }
+}

src/cryptometrics/package.json

@@ -5,7 +5,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "docs": "jsdoc -c ./jsdoc.json"
   },
   "dependencies": {
     "@heroicons/react": "^1.0.5",
@@ -27,9 +28,13 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.2",
+    "better-docs": "2.4.1",
     "eslint": "8.9.0",
     "eslint-config-next": "12.1.0",
+    "jsdoc": "^3.6.10",
+    "parcel": "^2.3.2",
     "postcss": "^8.4.6",
+    "postcss-modules": "^4.3.1",
     "tailwindcss": "^3.0.23"
   }
 }

src/cryptometrics/styles/docs.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;