Merge branch 'ItsJustMeChris-main'

public/locales/en/common.json

@@ -126,7 +126,11 @@
         "total": "Total"
     },
     "coinmarketcap": {
-        "configure": "Configure one or more crypto currencies to track"
+        "configure": "Configure one or more crypto currencies to track",
+        "1hour": "1 Hour",
+        "1day": "1 Day",
+        "7days": "7 Days",
+        "30days": "30 Days"
     },
     "gotify": {
         "apps": "Applications",

src/components/services/dropdown.jsx

@@ -0,0 +1,48 @@
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { BiCog } from "react-icons/bi";
+import classNames from "classnames";
+
+export default function Dropdown({ options, value, setValue }) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="text-xs inline-flex w-full items-center rounded bg-theme-200/50 dark:bg-theme-900/20 px-3 py-1.5">
+          {options.find((option) => option.value === value).label}
+          <BiCog className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-theme-200/50 dark:bg-theme-900/50 backdrop-blur shadow-md focus:outline-none text-theme-700 dark:text-theme-200">
+          <div className="py-1">
+            {options.map((option) => (
+              <Menu.Item key={option.value} as={Fragment}>
+                <button
+                  onClick={() => {
+                    setValue(option.value);
+                  }}
+                  type="button"
+                  className={classNames(
+                    value === option.value ? "bg-theme-300/40 dark:bg-theme-900/40" : "",
+                    "w-full block px-3 py-1.5 text-sm hover:bg-theme-300/70 hover:dark:bg-theme-900/70 text-left"
+                  )}
+                >
+                  {option.label}
+                </button>
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

src/components/services/item.jsx

@@ -1,9 +1,12 @@
 import Image from "next/future/image";
 import { Disclosure } from "@headlessui/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import Status from "./status";
 import Widget from "./widget";
 import Docker from "./widgets/service/docker";
+import Dropdown from "./dropdown";
 
 function resolveIcon(icon) {
   if (icon.startsWith("http")) {
@@ -22,6 +25,8 @@ function resolveIcon(icon) {
 }
 
 export default function Item({ service }) {
+  const { t } = useTranslation();
+
   const handleOnClick = () => {
     if (service.href && service.href !== "#") {
       window.open(service.href, "_blank").focus();

src/components/services/widget.jsx

@@ -45,7 +45,7 @@ const widgetMappings = {
   npm: Npm,
   tautulli: Tautulli,
   gotify: Gotify,
-  prowlarr: Prowlarr
+  prowlarr: Prowlarr,
 };
 
 export default function Widget({ service }) {

src/components/services/widgets/service/coinmarketcap.jsx

@@ -1,15 +1,26 @@
 import useSWR from "swr";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import getSymbolFromCurrency from "currency-symbol-map";
 
 import Widget from "../widget";
 import Block from "../block";
 
+import Dropdown from "components/services/dropdown";
 import { formatApiUrl } from "utils/api-helpers";
+import classNames from "classnames";
 
 export default function CoinMarketCap({ service }) {
   const { t } = useTranslation();
 
+  const dateRangeOptions = [
+    { label: t("coinmarketcap.1hour"), value: "1h" },
+    { label: t("coinmarketcap.1day"), value: "24h" },
+    { label: t("coinmarketcap.7days"), value: "7d" },
+    { label: t("coinmarketcap.30days"), value: "30d" },
+  ];
+
+  const [dateRange, setDateRange] = useState(dateRangeOptions[0].value);
+
   const config = service.widget;
   const currencyCode = config.currency ?? "USD";
   const { symbols } = config;
@@ -30,7 +41,7 @@ export default function CoinMarketCap({ service }) {
     return <Widget error={t("widget.api_error")} />;
   }
 
-  if (!statsData) {
+  if (!statsData || !dateRange) {
     return (
       <Widget>
         <Block value={t("coinmarketcap.configure")} />
@@ -39,28 +50,36 @@ export default function CoinMarketCap({ service }) {
   }
 
   const { data } = statsData;
-  const currencySymbol = getSymbolFromCurrency(currencyCode);
 
   return (
     <Widget>
+      <div className={classNames(service.description ? "-top-10" : "-top-8", "absolute right-1")}>
+        <Dropdown options={dateRangeOptions} value={dateRange} setValue={setDateRange} />
+      </div>
+
       <div className="flex flex-col w-full">
-        {symbols.map((key) => (
+        {symbols.map((symbol) => (
           <div
-            key={data[key].symbol}
+            key={data[symbol].symbol}
             className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-row items-center justify-between p-1 text-xs"
           >
-            <div className="font-thin pl-2">{data[key].name}</div>
+            <div className="font-thin pl-2">{data[symbol].name}</div>
             <div className="flex flex-row text-right">
               <div className="font-bold mr-2">
-                {currencySymbol}
-                {data[key].quote[currencyCode].price.toFixed(2)}
+                {t("common.number", {
+                  value: data[symbol].quote[currencyCode].price,
+                  style: "currency",
+                  currency: currencyCode,
+                })}
               </div>
               <div
                 className={`font-bold w-10 mr-2 ${
-                  data[key].quote[currencyCode].percent_change_1h > 0 ? "text-emerald-300" : "text-rose-300"
+                  data[symbol].quote[currencyCode][`percent_change_${dateRange}`] > 0
+                    ? "text-emerald-300"
+                    : "text-rose-300"
                 }`}
               >
-                {data[key].quote[currencyCode].percent_change_1h.toFixed(2)}%
+                {data[symbol].quote[currencyCode][`percent_change_${dateRange}`].toFixed(2)}%
               </div>
             </div>
           </div>

src/components/services/widgets/widget.jsx

@@ -7,5 +7,5 @@ export default function Widget({ error = false, children }) {
     );
   }
 
-  return <div className="flex flex-row w-full">{children}</div>;
+  return <div className="relative flex flex-row w-full">{children}</div>;
 }