feat(analytics): add combined analytics page for user posts

packages/shared/src/components/ProfileMenu/sections/MainSection.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 
 import { ProfileSection } from '../ProfileSection';
-import { CoinIcon, DevCardIcon, UserIcon } from '../../icons';
+import { AnalyticsIcon, CoinIcon, DevCardIcon, UserIcon } from '../../icons';
 import { settingsUrl, walletUrl, webappUrl } from '../../../lib/constants';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { useHasAccessToCores } from '../../../hooks/useCoresFeature';
@@ -29,6 +29,11 @@ export const MainSection = (): ReactElement => {
           href: `${settingsUrl}/customization/devcard`,
           icon: DevCardIcon,
         },
+        {
+          title: 'Analytics',
+          href: `${webappUrl}analytics`,
+          icon: AnalyticsIcon,
+        },
       ].filter(Boolean)}
     />
   );

packages/shared/src/components/analytics/CombinedImpressionsChart.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { TickProp } from 'recharts/types/util/types';
+import { largeNumberFormat } from '../../lib';
+
+type ImpressionNode = {
+  name: string;
+  value: number;
+  isBoosted: boolean;
+};
+
+export interface CombinedImpressionsChartProps {
+  data: ImpressionNode[] | undefined;
+}
+
+const tickProp: TickProp = {
+  fill: 'var(--theme-text-tertiary)',
+  fontSize: '0.6875rem',
+};
+
+export const CombinedImpressionsChart = ({
+  data,
+}: CombinedImpressionsChartProps): ReactElement => {
+  return (
+    <div className="h-40 w-full">
+      {!!data && (
+        <ResponsiveContainer>
+          <BarChart
+            width={500}
+            height={400}
+            data={data}
+            margin={{
+              top: 10,
+              right: 0,
+              left: -20,
+              bottom: 0,
+            }}
+            barSize={4}
+          >
+            <CartesianGrid
+              strokeDasharray="0"
+              stroke="#A8B3CF"
+              strokeOpacity={0.2}
+              vertical={false}
+            />
+            <XAxis
+              dataKey="name"
+              axisLine={{
+                stroke: 'transparent',
+              }}
+              tickLine={false}
+              tick={tickProp}
+            />
+            <YAxis
+              axisLine={{
+                stroke: 'transparent',
+              }}
+              tickFormatter={(value) => largeNumberFormat(value)}
+              tickLine={false}
+              tick={tickProp}
+              interval={1}
+            />
+            <Tooltip
+              cursor={false}
+              content={({ payload, label }) => (
+                <div className="TooltipContent z-tooltip max-w-full rounded-10 bg-text-primary px-3 py-1 text-surface-invert typo-subhead">
+                  <strong>{largeNumberFormat(payload?.[0]?.value || 0)}</strong>{' '}
+                  impressions on {label}
+                </div>
+              )}
+            />
+            <Bar
+              dataKey="value"
+              radius={10}
+              activeBar={{ fill: 'var(--theme-text-primary)' }}
+            >
+              {data.map((entry) => {
+                return (
+                  <Cell
+                    key={`cell-${entry.name}`}
+                    fill={
+                      !entry.isBoosted
+                        ? 'var(--theme-brand-default)'
+                        : 'var(--theme-accent-blueCheese-default)'
+                    }
+                  />
+                );
+              })}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      )}
+    </div>
+  );
+};

packages/shared/src/graphql/users.ts

@@ -593,6 +593,41 @@ export interface UserProfileAnalyticsHistory {
   updatedAt: Date;
 }
 
+export interface UserPostsAnalytics {
+  id: string;
+  impressions: number;
+  reach: number;
+  upvotes: number;
+  comments: number;
+  bookmarks: number;
+  awards: number;
+  profileViews: number;
+  followers: number;
+  reputation: number;
+  coresEarned: number;
+  shares: number;
+  clicks: number;
+  upvotesRatio: number;
+}
+
+export interface UserPostsAnalyticsHistoryNode {
+  date: string;
+  impressions: number;
+  impressionsAds: number;
+}
+
+export interface UserPostWithAnalytics {
+  id: string;
+  title: string | null;
+  image: string | null;
+  createdAt: string;
+  impressions: number;
+  upvotes: number;
+  reputation: number;
+  isBoosted: boolean;
+  commentsPermalink: string;
+}
+
 export const getReadingStreak = async (): Promise<UserStreak> => {
   const res = await gqlClient.request(USER_STREAK_QUERY);
 
@@ -892,3 +927,59 @@ export const updateNotificationSettings = async (
     notificationFlags,
   });
 };
+
+export const USER_POSTS_ANALYTICS_QUERY = gql`
+  query UserPostsAnalytics {
+    userPostsAnalytics {
+      id
+      impressions
+      reach
+      upvotes
+      comments
+      bookmarks
+      awards
+      profileViews
+      followers
+      reputation
+      coresEarned
+      shares
+      clicks
+      upvotesRatio
+    }
+  }
+`;
+
+export const USER_POSTS_ANALYTICS_HISTORY_QUERY = gql`
+  query UserPostsAnalyticsHistory {
+    userPostsAnalyticsHistory {
+      date
+      impressions
+      impressionsAds
+    }
+  }
+`;
+
+export const USER_POSTS_WITH_ANALYTICS_QUERY = gql`
+  query UserPostsWithAnalytics($after: String, $first: Int) {
+    userPostsWithAnalytics(after: $after, first: $first) {
+      edges {
+        cursor
+        node {
+          id
+          title
+          image
+          createdAt
+          impressions
+          upvotes
+          reputation
+          isBoosted
+          commentsPermalink
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;

packages/shared/src/lib/query.ts

@@ -214,6 +214,9 @@ export enum RequestKey {
   PostAnalyticsHistory = 'post_analytics_history',
   ProfileAnalytics = 'profile_analytics',
   ProfileAnalyticsHistory = 'profile_analytics_history',
+  UserPostsAnalytics = 'user_posts_analytics',
+  UserPostsAnalyticsHistory = 'user_posts_analytics_history',
+  UserPostsWithAnalytics = 'user_posts_with_analytics',
   CheckLocation = 'check_location',
   GenerateBrief = 'generate_brief',
   Opportunity = 'opportunity',

packages/webapp/components/analytics/AnalyticsEmptyState.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import {
+  Button,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import { link } from '@dailydotdev/shared/src/lib/links';
+import Link from '@dailydotdev/shared/src/components/utilities/Link';
+
+export const AnalyticsEmptyState = (): ReactElement => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
+      <div className="flex flex-col gap-2">
+        <Typography
+          type={TypographyType.Title3}
+          bold
+          color={TypographyColor.Primary}
+        >
+          It&apos;s never too late to start posting
+        </Typography>
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Tertiary}
+          className="max-w-md"
+        >
+          Hardest part of being a developer? Where do we start... it&apos;s
+          everything. Go on, share with us your best rant.
+        </Typography>
+      </div>
+      <Link href={link.post.create} prefetch={false}>
+        <Button variant={ButtonVariant.Primary} icon={<PlusIcon />} tag="a">
+          New post
+        </Button>
+      </Link>
+    </div>
+  );
+};