Skip to content

Commit

Permalink
better profile metadata formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@CollinSchneider
CollinSchneider committed Apr 23, 2024
1 parent 75ee155 commit 40a53f1
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 131 deletions.
263 changes: 134 additions & 129 deletions dashboard/src/app/(authenticated)/dashboards/web-analytics/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import LineChartWithValue from "@/components/Dashboards/Components/LineChartWith
import ClickableValueCard from "@/components/Dashboards/Components/ClickableValueCard";
import BarChart from "@/components/Dashboards/Components/BarChart";
import { formatNumbers, formatShrinkNumbers } from "@/lib/utils/numberHelpers";
import PageWithHeader from "@/components/utils/PageWithHeader";
//import { BsArrowLeftShort } from 'react-icons/bs'
//import { dateFormatterForGrouping } from "@/lib/utils/timeseriesHelpers";
// import LoadingView from './LoadingView'
Expand Down Expand Up @@ -172,17 +173,18 @@ export default function PageMetrics() {
}, []);

return (
<main className="mx-auto mb-8 max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mt-8 flex grid grid-cols-2 items-center">
<PageWithHeader
title={
<div>
<Link href="/dashboards" className="mb-0 text-xs font-medium text-gray-400 flex hover:text-swishjam transition duration-300 hover:underline">
<RxBarChart size={16} className="mr-1" />Dashboards
</Link>
<h1 className="mb-0 text-lg font-medium text-gray-700">
Marketing Analytics
Web Analytics
</h1>
</div>

}
buttons={
<div className="flex w-full items-center justify-end">
<Button
variant="ghost"
Expand All @@ -200,141 +202,144 @@ export default function PageMetrics() {
}}
/>
</div>
</div>
<div className="grid grid-cols-4 gap-2 pt-8">
<div className="grid gap-2">
<ClickableValueCard
title="Sessions"
selected={currentSelectedChart == "Sessions"}
value={sessionsTimeseriesData?.value}
previousValue={sessionsTimeseriesData?.previousValue}
previousValueDate={sessionsTimeseriesData?.previousValueDate}
timeseries={sessionsTimeseriesData?.timeseries}
}
>
<>
<div className="grid grid-cols-4 gap-2 pt-2">
<div className="grid gap-2">
<ClickableValueCard
title="Sessions"
selected={currentSelectedChart == "Sessions"}
value={sessionsTimeseriesData?.value}
previousValue={sessionsTimeseriesData?.previousValue}
previousValueDate={sessionsTimeseriesData?.previousValueDate}
timeseries={sessionsTimeseriesData?.timeseries}
valueFormatter={formatNumbers}
onClick={() => setCurrentSelectedChart("Sessions")}
/>
<ClickableValueCard
title="Unique Visitors"
selected={currentSelectedChart === "Unique Visitors"}
value={uniqueVisitorsChart?.value}
previousValue={uniqueVisitorsChart?.previousValue}
previousValueDate={uniqueVisitorsChart?.previousValueDate}
timeseries={uniqueVisitorsChart?.timeseries}
valueFormatter={formatNumbers}
onClick={() => setCurrentSelectedChart("Unique Visitors")}
/>
<ClickableValueCard
title="Page Views"
selected={currentSelectedChart === "Page Views"}
value={pageViewsTimeseriesData?.value}
previousValue={pageViewsTimeseriesData?.previousValue}
previousValueDate={pageViewsTimeseriesData?.previousValueDate}
timeseries={pageViewsTimeseriesData?.timeseries}
valueFormatter={formatNumbers}
onClick={() => setCurrentSelectedChart("Page Views")}
/>
</div>
<div className="col-span-3">
<LineChartWithValue
groupedBy={currentChartLookup[currentSelectedChart]?.groupedBy}
previousValue={currentChartLookup[currentSelectedChart]?.previousValue}
previousValueDate={currentChartLookup[currentSelectedChart]?.previousValueDate}
showAxis={true}
timeseries={currentChartLookup[currentSelectedChart]?.timeseries}
title={currentSelectedChart}
value={currentChartLookup[currentSelectedChart]?.value}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
/>
</div>
</div>
<div className='grid grid-cols-8 gap-2 pt-2'>
<BarChart
title='Page Views'
TableTitle='Top Pages'
className="col-span-8"
data={pageViewsBarChartData}
valueFormatter={formatNumbers}
onClick={() => setCurrentSelectedChart("Sessions")}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
<ClickableValueCard
title="Unique Visitors"
selected={currentSelectedChart === "Unique Visitors"}
value={uniqueVisitorsChart?.value}
previousValue={uniqueVisitorsChart?.previousValue}
previousValueDate={uniqueVisitorsChart?.previousValueDate}
timeseries={uniqueVisitorsChart?.timeseries}
</div>
<div className='grid grid-cols-8 gap-2 pt-2'>
<BarChart
title='Referrers'
TableTitle='Top Referrers'
className="col-span-8"
data={referrersBarChartData}
valueFormatter={formatNumbers}
onClick={() => setCurrentSelectedChart("Unique Visitors")}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
</div>
<div className='grid grid-cols-8 gap-2 pt-2'>
<BarChart
title='Devices'
TableTitle='Top Devices'
className="col-span-8"
data={deviceTypesBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
<ClickableValueCard
title="Page Views"
selected={currentSelectedChart === "Page Views"}
value={pageViewsTimeseriesData?.value}
previousValue={pageViewsTimeseriesData?.previousValue}
previousValueDate={pageViewsTimeseriesData?.previousValueDate}
timeseries={pageViewsTimeseriesData?.timeseries}
</div>
<div className='grid grid-cols-2 gap-2 pt-2'>
<BarChart
title='Browsers'
TableTitle='Top Browsers'
className="col-span-8"
data={browsersBarChartData}
valueFormatter={formatNumbers}
onClick={() => setCurrentSelectedChart("Page Views")}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
</div>
<div className="col-span-3">
<LineChartWithValue
groupedBy={currentChartLookup[currentSelectedChart]?.groupedBy}
previousValue={currentChartLookup[currentSelectedChart]?.previousValue}
previousValueDate={currentChartLookup[currentSelectedChart]?.previousValueDate}
showAxis={true}
timeseries={currentChartLookup[currentSelectedChart]?.timeseries}
title={currentSelectedChart}
value={currentChartLookup[currentSelectedChart]?.value}
<div className='grid grid-cols-2 gap-2 pt-2'>
<BarChart
title='UTM Campaigns'
TableTitle='Top UTM Campaigns'
data={utmCampaignsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
<BarChart
title='UTM Mediums'
TableTitle='Top UTM Mediums'
data={utmMediumsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
<BarChart
title='UTM Sources'
TableTitle='Top UTM Sources'
data={utmSourcesBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
<BarChart
title='UTM Terms'
TableTitle='Top UTM Terms'
className="col-span"
data={utmTermsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
</div>
</div>
<div className='grid grid-cols-8 gap-2 pt-2'>
<BarChart
title='Page Views'
TableTitle='Top Pages'
className="col-span-8"
data={pageViewsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
</div>
<div className='grid grid-cols-8 gap-2 pt-2'>
<BarChart
title='Referrers'
TableTitle='Top Referrers'
className="col-span-8"
data={referrersBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
</div>
<div className='grid grid-cols-8 gap-2 pt-2'>
<BarChart
title='Devices'
TableTitle='Top Devices'
className="col-span-8"
data={deviceTypesBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
</div>
<div className='grid grid-cols-2 gap-2 pt-2'>
<BarChart
title='Browsers'
TableTitle='Top Browsers'
className="col-span-8"
data={browsersBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={true}
/>
</div>
<div className='grid grid-cols-2 gap-2 pt-2'>
<BarChart
title='UTM Campaigns'
TableTitle='Top UTM Campaigns'
data={utmCampaignsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
<BarChart
title='UTM Mediums'
TableTitle='Top UTM Mediums'
data={utmMediumsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
<BarChart
title='UTM Sources'
TableTitle='Top UTM Sources'
data={utmSourcesBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
<BarChart
title='UTM Terms'
TableTitle='Top UTM Terms'
className="col-span"
data={utmTermsBarChartData}
valueFormatter={formatNumbers}
yAxisFormatter={formatShrinkNumbers}
showLegend={true}
showTableInsteadOfLegend={false}
/>
</div>
</main>
</>
</PageWithHeader>
);
}
12 changes: 10 additions & 2 deletions dashboard/src/components/Profiles/ProfileInformationSideBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,21 @@ import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import EnrichedDataItem from "@/components/Profiles/EnrichedDataItem";
import { CopyIcon, Lock } from "lucide-react";
import { Lock } from "lucide-react";
import { humanizeVariable, safelyParseURL } from "@/lib/utils/misc";
import { Tooltipable } from '@/components/ui/tooltip'
import { prettyDateTime } from "@/lib/utils/timeHelpers";
import ProfileTags from "./ProfileTags";
import CopiableText from "../utils/CopiableText";

const shouldHumanizeValue = key => (
!key.toLowerCase().endsWith('_id') &&
!key.toLowerCase().includes('referrer') &&
!key.toLowerCase().includes('url') &&
!key.toLowerCase().includes('email') &&
!key.toLowerCase().includes('gclid')
)

export default function ProfileInformationSideBar({ userData, hasStripeIntegrationEnabled, hasProfileEnrichmentEnabled }) {
const hasNoEnrichmentData = !userData.enrichment_data?.job_title &&
!userData.enrichment_data?.twitter_url &&
Expand Down Expand Up @@ -139,7 +147,7 @@ export default function ProfileInformationSideBar({ userData, hasStripeIntegrati
<div className="px-4 py-2 col-span-1 grid grid-cols-2 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">{humanizeVariable(key)}</dt>
<dd className="text-sm leading-6 text-gray-700 text-right flex flex-col">
{key.endsWith('_id') ? userData.metadata[key] : humanizeVariable([undefined, null].includes(userData.metadata[key]) ? '-' : userData.metadata[key].toString())}
{!shouldHumanizeValue(key) ? userData.metadata[key] : humanizeVariable([undefined, null].includes(userData.metadata[key]) ? '-' : userData.metadata[key].toString())}
</dd>
</div>
))}
Expand Down

0 comments on commit 40a53f1

Please sign in to comment.