feat: clean up UI

mocolicious · Nov 25, 2022 · b2e9acf · b2e9acf
1 parent b99f9d5
commit b2e9acf
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 78 deletions.
diff --git a/apps/web/src/app/feature/home/home-index.tsx b/apps/web/src/app/feature/home/home-index.tsx
@@ -8,9 +8,11 @@ const useStyles = createStyles((theme) => ({
     paddingTop: 120,
     paddingBottom: 80,
 
-    '@media (max-width: 755px)': {
+    [theme.fn.smallerThan('md')]: {
       paddingTop: 80,
       paddingBottom: 60,
+      paddingLeft: 0,
+      paddingRight: 0,
     },
   },
 
@@ -44,7 +46,7 @@ const useStyles = createStyles((theme) => ({
 
     '@media (max-width: 520px)': {
       fontSize: 28,
-      textAlign: 'left',
+      // textAlign: 'left',
     },
   },
 
@@ -112,10 +114,6 @@ export function HomeIndex() {
             Get all the data, right from the source.
           </Text>
         </Container>
-        <Box>
-          <HomeStatsSummary />
-          <HomeStatsPayoutSummary />
-        </Box>
         <div className={classes.controls}>
           <Button
             component={Link}
@@ -128,6 +126,10 @@ export function HomeIndex() {
             Explore the Kin Ecosystem
           </Button>
         </div>
+        <Box>
+          <HomeStatsSummary />
+          <HomeStatsPayoutSummary />
+        </Box>
       </Stack>
     </Container>
   )

diff --git a/apps/web/src/app/feature/home/home-stats.summary.tsx b/apps/web/src/app/feature/home/home-stats.summary.tsx
@@ -1,17 +1,29 @@
-import { Box, Card, Container, Flex, Grid, Group, Skeleton, Stack, Text } from '@mantine/core'
+import { Box, Card, Container, createStyles, Flex, Grid, Skeleton, Stack, Text } from '@mantine/core'
 import { useKrePayoutSummaryQuery, useKreSummaryQuery } from '../../../sdk'
 import { formatNumber } from '../days/days-api'
 import { DaysBox, DaysStatBox } from '../days/days-detail'
 import { stringToColor } from '../stats/features/string-to-color'
 import { PieChart } from '../stats/ui/pie-chart'
 
+const useStyles = createStyles((theme) => ({
+  container: {
+    padding: theme.spacing.md,
+    [theme.fn.smallerThan('md')]: {
+      padding: 0,
+      paddingTop: theme.spacing.xs,
+      paddingBottom: theme.spacing.xs,
+    },
+  },
+}))
+
 export function HomeStatsSummary() {
+  const { classes } = useStyles()
   const [{ data, fetching: loading }] = useKreSummaryQuery()
 
   const last = data?.item
 
   return (
-    <Container my="md">
+    <Container className={classes.container}>
       <Box px={4} py={12}>
         <Text size={28}>Ecosystem Statistics</Text>
       </Box>
@@ -86,6 +98,7 @@ export function HomeStatsSummary() {
 }
 
 export function HomeStatsPayoutSummary() {
+  const { classes } = useStyles()
   const [{ data, fetching: loading }] = useKrePayoutSummaryQuery()
 
   const item = data?.item
@@ -106,7 +119,7 @@ export function HomeStatsPayoutSummary() {
   }
 
   return (
-    <Container my="md">
+    <Container className={classes.container}>
       <Box px={4} py={12}>
         <Text size={28}>KRE Payouts</Text>
       </Box>

diff --git a/apps/web/src/app/feature/stats/features/stats-list-feature.tsx b/apps/web/src/app/feature/stats/features/stats-list-feature.tsx
@@ -55,7 +55,7 @@ export function StatsListFeature() {
 
   const topApps = dailySummaryAppResult?.apps?.slice(0, 10) ?? []
 
-  const labels = [...topApps.map((app) => app.name), 'Rest']
+  const pieLabels = [...topApps.map((app) => app.name), 'Rest']
 
   const percentages = [
     ...topApps.map((app) => {
@@ -67,12 +67,10 @@ export function StatsListFeature() {
   const rest = 100 - sum
 
   const pieData = {
-    labels,
+    labels: pieLabels,
     datasets: [
       {
         data: [...percentages, rest],
-        backgroundColor: labels.map((label) => stringToColor(`${label}`, 25)),
-        borderColor: labels.map((label) => stringToColor(`${label}`)),
       },
     ],
   }

diff --git a/apps/web/src/app/feature/stats/ui/line-chart.tsx b/apps/web/src/app/feature/stats/ui/line-chart.tsx
@@ -3,10 +3,9 @@ import {
   CategoryScale,
   Chart as ChartJS,
   ChartData,
-  ChartEvent,
+  ChartOptions,
+  Colors,
   Legend,
-  LegendElement,
-  LegendItem,
   LinearScale,
   LineElement,
   PointElement,
@@ -16,58 +15,34 @@ import {
 import React from 'react'
 import { Line } from 'react-chartjs-2'
 
-import { getAutoColors } from './get-auto-colors.plugin'
-
-const autocolors = getAutoColors()
-
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, autocolors)
-
-const handler = ChartJS.defaults.plugins.legend.onClick as (
-  e: ChartEvent,
-  legendItem: LegendItem,
-  legend: LegendElement<any>,
-) => void
+ChartJS.register(CategoryScale, Colors, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)
 
 export function LineChart({ data }: { data: ChartData<'line'> }) {
   const theme = useMantineTheme()
   const color = theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[4]
 
-  const options = {
+  const options: ChartOptions<'line'> = {
     maintainAspectRatio: false,
     responsive: true,
     plugins: {
-      autocolors,
       legend: {
         position: 'bottom' as const,
-        onClick: (e: ChartEvent, legendItem: LegendItem, legend: LegendElement<any>) => {
-          console.log({
-            e,
-            legendItem,
-            legend,
-          })
-          handler(e, legendItem, legend)
-        },
+      },
+      decimation: {
+        enabled: true,
+        algorithm: 'lttb',
+      },
+    },
+    datasets: {
+      line: {
+        indexAxis: 'x',
       },
     },
     scales: {
       x: { grid: { color } },
       y: { grid: { color } },
     },
-    xAxes: [
-      {
-        scaleLabel: { display: true },
-      },
-    ],
   }
 
-  return (
-    <Line
-      height={600}
-      options={options}
-      data={data}
-      onSelect={(e) => {
-        console.log('click', e)
-      }}
-    />
-  )
+  return <Line height={600} options={options} data={data} />
 }
diff --git a/apps/web/src/app/feature/stats/ui/pie-chart.tsx b/apps/web/src/app/feature/stats/ui/pie-chart.tsx
@@ -1,15 +1,15 @@
 import { useMantineTheme } from '@mantine/core'
-import { ArcElement, Chart as ChartJS, ChartData, Legend, Tooltip } from 'chart.js'
+import { ArcElement, Chart as ChartJS, ChartData, ChartOptions, Colors, Legend, Tooltip } from 'chart.js'
 import React from 'react'
 import { Pie } from 'react-chartjs-2'
 
-ChartJS.register(ArcElement, Tooltip, Legend)
+ChartJS.register(ArcElement, Colors, Tooltip, Legend)
 
 export function PieChart({ data }: { data: ChartData<'pie'> }) {
   const theme = useMantineTheme()
   const color = theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[4]
 
-  const options = {
+  const options: ChartOptions<'pie'> = {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
@@ -21,11 +21,6 @@ export function PieChart({ data }: { data: ChartData<'pie'> }) {
       x: { grid: { color } },
       y: { grid: { color } },
     },
-    xAxes: [
-      {
-        scaleLabel: { display: true },
-      },
-    ],
   }
 
   return <Pie options={options} data={data} height={460} />

diff --git a/apps/web/src/app/ui/layout/ui-layout-header.tsx b/apps/web/src/app/ui/layout/ui-layout-header.tsx
@@ -92,11 +92,13 @@ export function UiLayoutHeader({ links, name }: { links: UiLinks; name: string }
         <Link to="/" replace>
           <img src="/assets/logo.svg" height={36} alt={'Kin Logo'} />
         </Link>
-        <Group spacing={5} className={classes.links}>
-          {items}
+        <Group>
+          <Group spacing={5} className={classes.links}>
+            {items}
+          </Group>
           <UiLayoutThemeToggle />
         </Group>
-        <Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" />
+        {/*<Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" />*/}
         <Transition transition="pop-top-right" duration={200} mounted={opened}>
           {(styles) => (
             <Paper className={classes.dropdown} withBorder style={styles}>

diff --git a/libs/api/stats/data-access/src/lib/api-stats-data-access.service.ts b/libs/api/stats/data-access/src/lib/api-stats-data-access.service.ts
@@ -226,11 +226,7 @@ export class ApiStatsDataAccessService implements OnModuleInit {
           kin,
           usd,
           top10: parseJsonString(item.top10 as string),
-        }))
-        .then((res) => {
-          console.log('res', res)
-          return res
-        }),
+        })),
     )
   }
 

diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "apollo-server-express": "^3.6.3",
     "axios": "^1.1.3",
     "camel-case": "^4.1.2",
-    "chart.js": "^3.9.1",
+    "chart.js": "^4.0.1",
     "chartjs-plugin-autocolors": "^0.0.7",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
@@ -58,7 +58,7 @@
     "joi": "^17.6.0",
     "lru-cache": "^6.0.0",
     "react": "18.2.0",
-    "react-chartjs-2": "^4.3.1",
+    "react-chartjs-2": "^5.0.1",
     "react-dom": "18.2.0",
     "react-router-dom": "6.3.0",
     "reflect-metadata": "^0.1.13",

diff --git a/yarn.lock b/yarn.lock
@@ -7312,10 +7312,10 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chart.js@^3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
-  integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
+chart.js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.0.1.tgz#93d5d50ac222a5b3b6ac7488e82e1553ac031592"
+  integrity sha512-5/8/9eBivwBZK81mKvmIwTb2Pmw4D/5h1RK9fBWZLLZ8mCJ+kfYNmV9rMrGoa5Hgy2/wVDBMLSUDudul2/9ihA==
 
 chartjs-plugin-autocolors@^0.0.7:
   version "0.0.7"
@@ -14148,10 +14148,10 @@ raw-loader@^4.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-react-chartjs-2@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz#9941e7397fb963f28bb557addb401e9ff96c6681"
-  integrity sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==
+react-chartjs-2@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.0.1.tgz#7ef7dd57441903e8d34e1d06a1aead1095d0bca8"
+  integrity sha512-u38C9OxynlNCBp+79grgXRs7DSJ9w8FuQ5/HO5FbYBbri8HSZW+9SWgjVshLkbXBfXnMGWakbHEtvN0nL2UG7Q==
 
 [email protected]:
   version "18.2.0"