feat: improve provider leases graph (#246)

apps/api/src/services/db/statsService.ts

@@ -167,6 +167,11 @@ export async function getGraphData(dataName: AuthorizedGraphDataName): Promise<G
     value: getter(day.lastBlock)
   }));
 
+  if (dataName === "activeGPU") {
+    const firstWithValue = stats.findIndex(x => x.value > 0);
+    stats = stats.filter((_, i) => i >= firstWithValue);
+  }
+
   if (isRelative) {
     const relativeStats = stats.reduce((arr, dataPoint, index) => {
       arr[index] = {
@@ -275,6 +280,9 @@ export const getProviderActiveLeasesGraphData = async (providerAddress: string)
         AND l."createdHeight" <= d."lastBlockHeightYet"
         AND (l."closedHeight" IS NULL OR l."closedHeight" > d."lastBlockHeightYet")
         AND (l."predictedClosedHeight" IS NULL OR l."predictedClosedHeight" > d."lastBlockHeightYet")
+    INNER JOIN "provider" p
+        ON p."owner" = l."providerAddress"
+    WHERE d."lastBlockHeightYet" >= p."createdHeight"
     GROUP BY "date"
     ORDER BY "date" ASC`,
     {

apps/deploy-web/package.json

@@ -38,9 +38,9 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.4.4",
     "@mui/material-nextjs": "^5.15.11",
-    "@nivo/core": "^0.80.0",
-    "@nivo/line": "^0.86.0",
-    "@nivo/pie": "^0.80.0",
+    "@nivo/core": "^0.87.0",
+    "@nivo/line": "^0.87.0",
+    "@nivo/pie": "^0.87.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-spring/web": "^9.3.1",

apps/deploy-web/src/components/home/HomeContainer.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import React from "react";
 import { Spinner } from "@akashnetwork/ui/components";
+import dynamic from "next/dynamic";
 
 import { Footer } from "@src/components/layout/Footer";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
@@ -15,7 +16,10 @@ import { DeploymentDto } from "@src/types/deployment";
 import Layout from "../layout/Layout";
 import CloudmosImportPanel from "./CloudmosImportPanel";
 import { WelcomePanel } from "./WelcomePanel";
-import { YourAccount } from "./YourAccount";
+
+const YourAccount = dynamic(() => import("./YourAccount"), {
+  ssr: false
+});
 
 export function HomeContainer() {
   const { address, isWalletLoaded } = useWallet();

apps/deploy-web/src/components/home/YourAccount.tsx

@@ -378,8 +378,10 @@ const BalancePie: React.FunctionComponent<BalancePieProps> = ({ label, data, get
         arcLabelsSkipAngle={10}
         theme={{
           // background: theme === "dark" ? lighten(theme.palette.background.paper, 0.0525) : theme.palette.background.paper,
-          textColor: "#fff",
-          fontSize: 12,
+          text: {
+            fill: "#fff",
+            fontSize: 12
+          },
           tooltip: {
             basic: {
               color: resolvedTheme === "dark" ? "#fff" : customColors.main
@@ -393,3 +395,5 @@ const BalancePie: React.FunctionComponent<BalancePieProps> = ({ label, data, get
     </div>
   );
 };
+
+export default YourAccount;

apps/deploy-web/src/components/new-deployment/TemplateList.tsx

@@ -73,7 +73,7 @@ export const TemplateList: React.FunctionComponent = () => {
       </div>
 
       <div className="mb-8">
-        <div className="grid grid-cols-2 gap-2 md:grid-cols-4 md:gap-4">
+        <div className="grid grid-cols-1 gap-2 md:grid-cols-3 md:gap-4">
           <DeployOptionBox
             title={helloWorldTemplate.title}
             description={helloWorldTemplate.description}

apps/deploy-web/src/components/providers/NetworkCapacity.tsx

@@ -223,8 +223,10 @@ const usePieTheme = () => {
   const { resolvedTheme } = useTheme();
   const tw = useTailwind();
   return {
-    textColor: "#fff",
-    fontSize: 12,
+    text: {
+      fill: "#fff",
+      fontSize: 12
+    },
     tooltip: {
       basic: {
         color: resolvedTheme === "dark" ? tw.theme.colors.white : tw.theme.colors.current

apps/deploy-web/src/components/sdl/EnvVarList.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 export const EnvVarList: React.FunctionComponent<Props> = ({ currentService, setIsEditingEnv, serviceIndex }) => {
   return (
-    <FormPaper>
+    <FormPaper className="whitespace-break-spaces break-all">
       <div className="mb-2 flex items-center">
         <strong className="text-sm">Environment Variables</strong>
 

apps/deploy-web/src/styles/index.css

@@ -10,6 +10,10 @@ body {
   padding: 0 !important;
 }
 
+header {
+  width: calc(100% - var(--removed-body-scroll-bar-size, 0px)) !important;
+}
+
 .text-truncate {
   overflow: hidden;
   text-overflow: ellipsis;

apps/stats-web/package.json

@@ -13,7 +13,7 @@
     "@akashnetwork/ui": "*",
     "@cosmjs/encoding": "^0.32.0",
     "@json2csv/plainjs": "^7.0.4",
-    "@nivo/line": "^0.84.0",
+    "@nivo/line": "^0.87.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-table": "^8.11.2",

apps/stats-web/src/components/layout/MobileNav.tsx

@@ -2,17 +2,21 @@ import { useState } from "react";
 import Drawer from "react-modern-drawer";
 import { Button } from "@akashnetwork/ui/components";
 import { ArrowUpRightSquare, Discord, Github, Menu, Rocket, StatsUpSquare, X as TwitterX } from "iconoir-react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 
 import { AkashConsoleDarkLogo, AkashConsoleLightLogo } from "../icons/AkashConsoleLogo";
 import { ModeToggle } from "../ModeToggle";
 import { NavLinks } from "../NavLinks";
-import NetworkSelect from "./NetworkSelect";
 
 import "react-modern-drawer/dist/index.css";
 
 import useCookieTheme from "@/hooks/useTheme";
 
+const NetworkSelect = dynamic(() => import("./NetworkSelect"), {
+  ssr: false
+});
+
 export function MobileNav() {
   const theme = useCookieTheme();
   const [isOpen, setIsOpen] = useState(false);

apps/stats-web/src/components/layout/Nav.tsx

@@ -6,7 +6,12 @@ import Link from "next/link";
 import { AkashConsoleDarkLogo, AkashConsoleLightLogo } from "../icons/AkashConsoleLogo";
 import { ModeToggle } from "../ModeToggle";
 import { MobileNav } from "./MobileNav";
-import NetworkSelect from "./NetworkSelect";
+
+const NetworkSelect = dynamic(() => import("./NetworkSelect"), {
+  ssr: false
+});
+
+import dynamic from "next/dynamic";
 
 import useCookieTheme from "@/hooks/useTheme";