Overhaul billing view

This overhauled billing view displays revenue and spending as a NET
activity to avoid confusion about the source of the spending itself
since we can't attribute that as accuratley as the previous dashboard
format implied.

Author: jkilpatr

package.json

@@ -1,7 +1,7 @@
 {
   "name": "althea-dash",
   "productName": "althea",
-  "version": "0.4.14",
+  "version": "0.4.16",
   "private": true,
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -118,4 +118,4 @@
     "glob-all": "^3.1.0",
     "purgecss-webpack-plugin": "^4.1.3"
   }
-}
+}

src/Finances/Billing.js

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Alert, Button, Card, CardBody, Input, Table } from "reactstrap";
 import Pagination from "../Pagination";
 import { get, useStore } from "store";
-import { groupUsage } from "utils";
+import { groupClientUsageData } from "utils";
 import ExportCSV from "./ExportCSV";
 
 import { enUS as en, es, fr } from "date-fns/locale";
@@ -52,9 +52,8 @@ const Billing = (operatorAddress, ipAddress) => {
 
   const [rows, data] = useMemo(
     () =>
-      groupUsage(
+      groupClientUsageData(
         info,
-        true,
         usage,
         period,
         symbol_or_star,

src/SellingBandwidth/RevenueHistory.js

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Alert, Button, Card, CardBody, Input, Table } from "reactstrap";
 import Pagination from "../Pagination";
 import { get, useStore } from "store";
-import { groupUsage } from "utils";
+import { groupRelayUsageData } from "utils";
 import ExportCSV from "../Finances/ExportCSV";
 
 import { enUS as en, es, fr } from "date-fns/locale";
@@ -13,7 +13,8 @@ const RevenueHistory = () => {
   const locale = { en, es, fr }[i18n.language];
 
   const [period, setPeriod] = useState("w");
-  const [usage, setUsage] = useState([]);
+  const [clientUsage, setClientUsage] = useState([]);
+  const [relayUsage, setRelayUsage] = useState([]);
   const [{ symbol }] = useStore();
   const [page, setPage] = useState(1);
   const [exporting, setExporting] = useState(false);
@@ -40,10 +41,12 @@ const RevenueHistory = () => {
     (async () => {
       try {
         let payments = await get("/usage/payments");
-        let usage = await get("/usage/relay");
+        let clientUsage = await get("/usage/client");
+        let relayUsage = await get("/usage/relay");
         let info = await get("/info");
         let localization = await get("/localization");
-        if (!(usage instanceof Error)) setUsage(usage);
+        if (!(clientUsage instanceof Error)) setClientUsage(clientUsage);
+        if (!(relayUsage instanceof Error)) setRelayUsage(relayUsage);
         if (!(localization instanceof Error)) setLocalization(localization);
         if (!(info instanceof Error)) setInfo(info);
         if (!(payments instanceof Error)) setPayments(payments);
@@ -56,18 +59,28 @@ const RevenueHistory = () => {
 
   const [rows, data] = useMemo(
     () =>
-      groupUsage(
+      groupRelayUsageData(
         info,
-        false,
-        usage,
+        clientUsage,
+        relayUsage,
         period,
         symbol_or_star,
         locale,
         page,
         limit,
         payments
       ),
-    [info, usage, period, symbol_or_star, locale, page, limit, payments]
+    [
+      info,
+      relayUsage,
+      period,
+      symbol_or_star,
+      locale,
+      page,
+      limit,
+      payments,
+      clientUsage,
+    ]
   );
 
   return (
@@ -110,12 +123,13 @@ const RevenueHistory = () => {
                   </div>
                 </div>
               </div>
+              <p>{t("revenueDescription")}</p>
               <div className="table-responsive">
                 <Table className="table-striped">
                   <thead>
                     <tr>
                       <th>{t("period")}</th>
-                      <th className="text-right">{t("usage")}</th>
+                      <th className="text-right">{t("relayUsage")}</th>
                       <th className="text-right">{t("totalRevenue")}</th>
                     </tr>
                   </thead>

src/locales/en/translations.json

@@ -55,8 +55,10 @@
   "withdrawalInProgress": "Your withdrawal request has been submitted. The funds will be converted to ETH before being sent to your address.",
   "withdrawAllSuccess": "Your withdrawal request has been submitted. Once any Dai funds have been converted to ETH, the entire ETH balance will be withdrawn.",
   "withdrawAll": "Withdraw All Funds",
-  "totalRevenue": "Total Revenue",
+  "totalRevenue": "Net Revenue",
   "revenueHistory": "Revenue History",
+  "revenueDescription": "This display shows net revenue, the total change in the router wallet balance. If the value is positive your router is earning money as a relay. If the value is negative relay bandwidth is offsetting spending on your own data usage.",
+  "relayUsage": "Relayed Data",
   "beforeYouChange": "Before you change the pricing, you should <a href='https://althea.net'>read more about best practices</a> of selling your bandwidth and pricing.",
   "theAmountYouPay": "The amount you pay your network operator every month. This value can be increased above the default to facilitate payment plans. But can not be reduced below the base operator fee set by your operator.",
   "theseSettings": "These settings typically do not need to be updated and are used by technicians during the initial setup. Be sure you know what you're doing, as changes here may cause a service interruption.",

src/locales/es/translations.json

@@ -42,6 +42,8 @@
   "withdrawAll": "Retirar todos los fondos",
   "totalRevenue": "Total Revenue",
   "revenueHistory": " Historial de ingresos ",
+  "revenueDescription": "Esta pantalla muestra los ingresos netos, el cambio total en el saldo de la billetera del enrutador. Si el valor es positivo, su enrutador está ganando dinero como retransmisor. Si el valor es negativo, el ancho de banda de retransmisión está compensando el gasto en su propio uso de datos",
+  "relayUsage": "Datos transmitidos",
   "beforeYouChange": "Antes de cambiar el precio, debe <a href='https://althea.net'>leer más sobre las mejores prácticas</a> para vender su ancho de banda y precios.",
   "theAmountYouPay": "La cantidad que paga al organizador de su red cada mes",
   "theseSettings": "Estas configuraciones generalmente no necesitan actualizarse y son utilizadas por los técnicos durante la configuración inicial. Asegúrese de saber lo que está haciendo, ya que los cambios aquí pueden causar una interrupción del servicio.",