feat: portfolio card chart

* Adds charts back to the portfolio card with random data for now

* Patches LWC to bring in the latest release, which allows for curved
  charts

apps/ui/app/components/Portfolios/PortfolioCard/portfolio-card-chart.tsx

@@ -0,0 +1,81 @@
+import { AreaChart } from '@baggers/ui-components';
+import { useState } from 'react';
+import { Theme, useTheme } from '~/components/theme';
+
+const POINTS = [
+  { time: `2018-12-22`, value: 32.51 },
+  { time: `2018-12-23`, value: 31.11 },
+  { time: `2018-12-24`, value: 27.02 },
+  { time: `2018-12-25`, value: 27.32 },
+  { time: `2018-12-26`, value: 25.17 },
+  { time: `2018-12-27`, value: 28.89 },
+  { time: `2018-12-28`, value: 25.46 },
+  { time: `2018-12-29`, value: 23.92 },
+  { time: `2018-12-30`, value: 22.68 },
+  { time: `2018-12-31`, value: 22.67 },
+  { time: `2019-01-01`, value: 22.67 },
+  { time: `2019-01-02`, value: 22.67 },
+  { time: `2019-01-03`, value: 22.67 },
+  { time: `2019-01-04`, value: 22.67 },
+  { time: `2019-01-05`, value: 22.67 },
+  { time: `2019-01-07`, value: 22.67 },
+];
+export const PortfolioCardChart = () => {
+  const [chartData] = useState(
+    POINTS.map((point) => ({ ...point, value: Math.random() * 30 }))
+  );
+
+  return (
+    <AreaChart
+      fitContent
+      className="h-[400px]"
+      options={{
+        layout: {
+          background: {
+            color: 'transparent',
+          },
+        },
+        handleScale: false,
+        handleScroll: false,
+        watermark: {
+          visible: false,
+        },
+        crosshair: {
+          horzLine: {
+            visible: false,
+          },
+          mode: undefined,
+
+          vertLine: {
+            visible: false,
+          },
+        },
+        rightPriceScale: {
+          visible: false,
+        },
+        timeScale: {
+          visible: false,
+        },
+        grid: {
+          vertLines: {
+            visible: false,
+          },
+          horzLines: {
+            visible: false,
+          },
+        },
+      }}
+      seriesOptions={{
+        lineColor: 'rgba(116, 47, 246, 0.8)',
+        lineWidth: 3,
+
+        topColor: 'rgba(154, 106, 255, 0.55)',
+        bottomColor: 'rgba(84, 116, 254, 0.01)',
+
+        crosshairMarkerVisible: false,
+        lineType: 2,
+      }}
+      data={chartData}
+    />
+  );
+};

apps/ui/app/components/Portfolios/PortfolioCard/portfolio-card-header.tsx

@@ -20,7 +20,9 @@ export function PortfolioCardHeader({
           'py-3'
         )}
       >
-        <span className="text-lg font-bold">{portfolio.name}</span>
+        <span className="text-lg font-bold">
+          {portfolio.name || 'Unnamed Portfolio'}
+        </span>
         <span className="text-xs line-clamp-1">
           {portfolio.description}
         </span>

apps/ui/app/components/Portfolios/PortfolioCard/portfolio-card-inner-card.tsx

@@ -15,11 +15,13 @@ export function PortfolioCardInnerCard({
         'from-[rgba(84,116,254,0.1)]',
         'to-[rgba(154,106,255,0.2)]',
         'rounded-3xl',
+        'w-full',
         'transition-all',
         'h-5/6',
         'pt-4',
         'pb-8',
-        'grid'
+        'flex flex-col',
+        'place-content-between'
       )}
     >
       {children}

apps/ui/app/components/Portfolios/PortfolioCard/portfolio-card-total-value.tsx

@@ -7,7 +7,7 @@ export function PortfolioCardTotalValue({
 }: PortfolioCardProps) {
   const { t } = useTranslation();
   return (
-    <div className="place-self-center font-[Helvetica] grid place-items-center">
+    <div className="font-[Helvetica] grid">
       <span className="text-sm font-thin">
         {t('total_value', 'Total value')}
       </span>

apps/ui/app/components/Portfolios/PortfolioCard/portfolio-card.tsx

@@ -2,6 +2,7 @@ import { PortfolioSummary } from '@baggers/graphql-types';
 import { Link } from '@remix-run/react';
 import { useT } from '~/hooks/useT';
 import { tlsx } from '~/util/clsx';
+import { PortfolioCardChart } from './portfolio-card-chart';
 import { PortfolioCardHeader } from './portfolio-card-header';
 import { PortfolioCardInnerCard } from './portfolio-card-inner-card';
 import { PortfolioCardPerformance } from './portfolio-card-performance';
@@ -20,7 +21,7 @@ export function PortfolioCard({ portfolio }: PortfolioCardProps) {
       className={tlsx(
         'dark:bg-paper-dark bg-paper-light',
         'rounded-3xl',
-        'h-[600px]',
+        'h-[800px]',
         'drop-shadow-md',
         'hover:cursor-pointer',
         'hover:outline hover:dark:outline-primary-dark hover:outline-primary-light',
@@ -31,8 +32,13 @@ export function PortfolioCard({ portfolio }: PortfolioCardProps) {
       )}
     >
       <PortfolioCardInnerCard>
-        <PortfolioCardHeader portfolio={portfolio} />
-        <PortfolioCardTotalValue portfolio={portfolio} />
+        <div>
+          <PortfolioCardHeader portfolio={portfolio} />
+          <div className="flex place-content-center mt-12">
+            <PortfolioCardTotalValue portfolio={portfolio} />
+          </div>
+        </div>
+        <PortfolioCardChart />
         <PortfolioCardPerformance portfolio={portfolio} />
       </PortfolioCardInnerCard>
       <PortfolioCardTags portfolio={portfolio} />

apps/ui/app/pages/portfolios/created/created-portfolios.tsx

@@ -1,6 +1,6 @@
-import { tlsx } from '@baggers/ui-components/src/util/clsx';
 import { Form } from '@remix-run/react';
 import { PortfolioCard } from '~/components/Portfolios/PortfolioCard';
+import { tlsx } from '~/util/clsx';
 import { CreatedHeader } from './created-header';
 import { CreatePortfoliosProps } from './types';
 

apps/ui/app/root.tsx

@@ -1,4 +1,3 @@
-import { tlsx } from '@baggers/ui-components/src/util/clsx';
 import {
   Headers,
   LinksFunction,
@@ -74,7 +73,7 @@ export function App() {
         />
       </head>
       <body
-        className={tlsx(
+        className={clsx(
           'dark:bg-background-dark bg-background-light',
           'dark:text-text-dark text-text-light',
           'px-12'