cleaning up, no mapping in graph tooltip

2022-09-26 14:35:52 -07:00 · 2022-09-26 14:35:52 -07:00 · 4ed62fd5d7
commit 4ed62fd5d7
parent 33b33c92f9
5 changed files with 71 additions and 95 deletions
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@ -155,8 +155,6 @@ export function BetsList(props: { user: User }) {
    (c) => contractsMetrics[c.id].netPayout
  )

-  // const totalPnl = user.profitCached.allTime
-  // const totalProfitPercent = (totalPnl / user.totalDeposits) * 100
  const investedProfitPercent =
    ((currentBetsValue - currentInvested) / (currentInvested + 0.1)) * 100

--- a/web/components/contract/contracts-grid.tsx
+++ b/web/components/contract/contracts-grid.tsx
@ -55,13 +55,6 @@ export function ContractsGrid(props: {
  }

  if (contracts.length === 0) {
-    // if (profile) {
-    //   return (
-    //     <p className="mx-2 text-gray-500">
-    //       This creator does not yet have any markets.
-    //     </p>
-    //   )
-    // } else {
    return (
      <p className="mx-2 text-gray-500">
        No markets found. Why not{' '}
@ -70,7 +63,6 @@ export function ContractsGrid(props: {
        </SiteLink>
      </p>
    )
-    // }
  }

  return (
--- a/web/components/portfolio/portfolio-value-graph.tsx
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@ -1,5 +1,6 @@
 import { ResponsiveLine } from '@nivo/line'
 import { PortfolioMetrics } from 'common/user'
+import { filterDefined } from 'common/util/array'
 import { formatMoney } from 'common/util/format'
 import dayjs from 'dayjs'
 import { last } from 'lodash'
@ -10,13 +11,127 @@ import { Col } from '../layout/col'
 export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
  portfolioHistory: PortfolioMetrics[]
  mode: 'value' | 'profit'
-  setGraphDisplayNumber: (arg0: number | string | null) => void
+  handleGraphDisplayChange: (arg0: string | number | null) => void
  height?: number
 }) {
-  const { portfolioHistory, height, mode, setGraphDisplayNumber } = props
+  const { portfolioHistory, height, mode, handleGraphDisplayChange } = props
  const { width } = useWindowSize()

-  function getPoints(line: 'value' | 'posProfit' | 'negProfit') {
+  const valuePoints = getPoints('value', portfolioHistory)
+  const posProfitPoints = getPoints('posProfit', portfolioHistory)
+  const negProfitPoints = getPoints('negProfit', portfolioHistory)
+
+  const valuePointsY = valuePoints.map((p) => p.y)
+  const posProfitPointsY = posProfitPoints.map((p) => p.y)
+  const negProfitPointsY = negProfitPoints.map((p) => p.y)
+
+  let data
+
+  if (mode === 'value') {
+    data = [{ id: 'value', data: valuePoints, color: '#4f46e5' }]
+  } else {
+    data = [
+      {
+        id: 'negProfit',
+        data: negProfitPoints,
+        color: '#dc2626',
+      },
+      {
+        id: 'posProfit',
+        data: posProfitPoints,
+        color: '#14b8a6',
+      },
+    ]
+  }
+  const numYTickValues = 2
+  const endDate = last(data[0].data)?.x
+
+  const yMin =
+    mode === 'value'
+      ? Math.min(...filterDefined(valuePointsY))
+      : Math.min(
+          ...filterDefined(negProfitPointsY),
+          ...filterDefined(posProfitPointsY)
+        )
+
+  const yMax =
+    mode === 'value'
+      ? Math.max(...filterDefined(valuePointsY))
+      : Math.max(
+          ...filterDefined(negProfitPointsY),
+          ...filterDefined(posProfitPointsY)
+        )
+
+  return (
+    <div
+      className="w-full overflow-hidden"
+      style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
+      onMouseLeave={() => handleGraphDisplayChange(null)}
+    >
+      <ResponsiveLine
+        margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
+        data={data}
+        xScale={{
+          type: 'time',
+          min: valuePoints[0]?.x,
+          max: endDate,
+        }}
+        yScale={{
+          type: 'linear',
+          stacked: false,
+          min: yMin,
+          max: yMax,
+        }}
+        curve="stepAfter"
+        enablePoints={false}
+        colors={{ datum: 'color' }}
+        axisBottom={{
+          tickValues: 0,
+        }}
+        pointBorderColor="#fff"
+        pointSize={valuePoints.length > 100 ? 0 : 6}
+        axisLeft={{
+          tickValues: numYTickValues,
+          format: '.3s',
+        }}
+        enableGridX={false}
+        enableGridY={true}
+        gridYValues={numYTickValues}
+        enableSlices="x"
+        animate={false}
+        yFormat={(value) => formatMoney(+value)}
+        enableArea={true}
+        areaOpacity={0.1}
+        sliceTooltip={({ slice }) => {
+          handleGraphDisplayChange(slice.points[0].data.yFormatted)
+          return (
+            <div className="rounded bg-white px-4 py-2 opacity-80">
+              <div
+                key={slice.points[0].id}
+                className="text-xs font-semibold sm:text-sm"
+              >
+                <Col>
+                  <div>
+                    {dayjs(slice.points[0].data.xFormatted).format('MMM/D/YY')}
+                  </div>
+                  <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
+                    {dayjs(slice.points[0].data.xFormatted).format('h:mm A')}
+                  </div>
+                </Col>
+              </div>
+              {/* ))} */}
+            </div>
+          )
+        }}
+      ></ResponsiveLine>
+    </div>
+  )
+})
+
+export function getPoints(
+  line: 'value' | 'posProfit' | 'negProfit',
+  portfolioHistory: PortfolioMetrics[]
+) {
  const points = portfolioHistory.map((p) => {
    const { timestamp, balance, investmentValue, totalDeposits } = p
    const value = balance + investmentValue
@ -33,131 +148,8 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
    return {
      x: new Date(timestamp),
      y:
-          line === 'value'
-            ? value
-            : line === 'posProfit'
-            ? posProfit
-            : negProfit,
+        line === 'value' ? value : line === 'posProfit' ? posProfit : negProfit,
    }
  })
  return points
 }
-
-  let data
-
-  if (mode === 'value') {
-    data = [{ id: 'value', data: getPoints('value'), color: '#4f46e5' }]
-  } else {
-    data = [
-      {
-        id: 'negProfit',
-        data: getPoints('negProfit'),
-        color: '#dc2626',
-      },
-      {
-        id: 'posProfit',
-        data: getPoints('posProfit'),
-        color: '#14b8a6',
-      },
-    ]
-  }
-  const firstPoints = data[0].data
-  const numYTickValues = 2
-  const endDate = last(data[0].data)?.x
-
-  const firstPointsY = firstPoints
-    .map((p) => p.y)
-    .filter((y) => {
-      return y !== null
-    })
-
-  const yMin =
-    mode === 'value'
-      ? Math.min(...firstPointsY)
-      : Math.min(
-          ...firstPointsY,
-          ...data[1].data
-            .filter((p) => {
-              return p.y !== null
-            })
-            .map((p) => p.y)
-        )
-
-  const yMax =
-    mode === 'value'
-      ? Math.max(...firstPointsY)
-      : Math.max(
-          ...firstPointsY,
-          ...data[1].data
-            .filter((p) => {
-              return p.y !== null
-            })
-            .map((p) => p.y)
-        )
-
-  return (
-    <div
-      className="w-full overflow-hidden"
-      style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
-      onMouseLeave={() => setGraphDisplayNumber(null)}
-    >
-      <ResponsiveLine
-        margin={{ top: 10, right: 0, left: 40, bottom: 10 }}
-        data={data}
-        xScale={{
-          type: 'time',
-          min: firstPoints[0]?.x,
-          max: endDate,
-        }}
-        yScale={{
-          type: 'linear',
-          stacked: false,
-          min: yMin,
-          max: yMax,
-        }}
-        curve="stepAfter"
-        enablePoints={false}
-        colors={{ datum: 'color' }}
-        axisBottom={{
-          tickValues: 0,
-        }}
-        pointBorderColor="#fff"
-        pointSize={firstPoints.length > 100 ? 0 : 6}
-        axisLeft={{
-          tickValues: numYTickValues,
-          format: '.3s',
-        }}
-        enableGridX={false}
-        enableGridY={true}
-        gridYValues={numYTickValues}
-        enableSlices="x"
-        animate={false}
-        yFormat={(value) => formatMoney(+value)}
-        enableArea={true}
-        areaOpacity={0.1}
-        sliceTooltip={({ slice }) => {
-          slice.points.map((point) =>
-            setGraphDisplayNumber(point.data.yFormatted)
-          )
-          return (
-            <div className="rounded bg-white px-4 py-2 opacity-80">
-              {slice.points.map((point) => (
-                <div
-                  key={point.id}
-                  className="text-xs font-semibold sm:text-sm"
-                >
-                  <Col>
-                    <div>{dayjs(point.data.xFormatted).format('MMM/D/YY')}</div>
-                    <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
-                      {dayjs(point.data.xFormatted).format('h:mm A')}
-                    </div>
-                  </Col>
-                </div>
-              ))}
-            </div>
-          )
-        }}
-      ></ResponsiveLine>
-    </div>
-  )
-})
--- a/web/components/portfolio/portfolio-value-section.tsx
+++ b/web/components/portfolio/portfolio-value-section.tsx
@ -16,8 +16,10 @@ export const PortfolioValueSection = memo(
    const [portfolioPeriod, setPortfolioPeriod] = useState<Period>('weekly')
    const portfolioHistory = usePortfolioHistory(userId, portfolioPeriod)
    const [graphMode, setGraphMode] = useState<'profit' | 'value'>('value')
-    const [graphDisplayNumber, setGraphDisplayNumber] = useState(null)
-    const handleGraphDisplayChange = (num) => {
+    const [graphDisplayNumber, setGraphDisplayNumber] = useState<
+      number | string | null
+    >(null)
+    const handleGraphDisplayChange = (num: string | number | null) => {
      setGraphDisplayNumber(num)
    }

@ -70,7 +72,7 @@ export const PortfolioValueSection = memo(
                className={clsx(
                  graphMode === 'profit'
                    ? graphDisplayNumber
-                      ? graphDisplayNumber[2] === '-'
+                      ? graphDisplayNumber.toString().includes('-')
                        ? 'text-red-600'
                        : 'text-teal-500'
                      : totalProfit > 0
@ -90,13 +92,11 @@ export const PortfolioValueSection = memo(
              </div>
            </Col>
          </Row>
-          {/* <GraphToggle setGraphMode={setGraphMode} graphMode={graphMode} /> */}
        </Row>
        <PortfolioValueGraph
          portfolioHistory={currPortfolioHistory}
-          includeTime={true}
          mode={graphMode}
-          setGraphDisplayNumber={handleGraphDisplayChange}
+          handleGraphDisplayChange={handleGraphDisplayChange}
        />
        <PortfolioPeriodSelection
          portfolioPeriod={portfolioPeriod}
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@ -47,7 +47,8 @@ export function UserPage(props: { user: User }) {
  const isMobile = useIsMobile()

  useEffect(() => {
-    // const claimedMana = router.query['claimed-mana'] === 'yes'
+    const claimedMana = router.query['claimed-mana'] === 'yes'
+    setShowConfetti(claimedMana)
    const query = { ...router.query }
    if (query.claimedMana || query.show) {
      delete query['claimed-mana']
@ -218,14 +219,6 @@ export function UserPage(props: { user: User }) {
                  </Col>
                ),
              },
-              // {
-              //   title: 'Stats',
-              //   content: (
-              //     <Col className="mb-8">
-              //       <PortfolioValueSection userId={user.id} />
-              //     </Col>
-              //   ),
-              // },
            ]}
          />
        </Col>
@ -263,6 +256,7 @@ export function ProfilePrivateStats(props: {

    const showLoansModel = router.query['show'] === 'loans'
    setShowLoansModal(showLoansModel)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <>