Skip to content

Commit

Permalink
clients/web: fix type issues with previous mocked features
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankie567
frankie567 committed Feb 3, 2025
1 parent b145f62 commit aa6da70
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 99 deletions.
147 changes: 67 additions & 80 deletions clients/apps/web/src/components/Customer/CustomerUsageView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
import { Meter, MeterEvent } from '@/app/api/meters/data'
import { MeterChart } from '@/components/Meter/MeterChart'
import { useMeterEvents, useMeters } from '@/hooks/queries/meters'
import { Customer, MetricType, TimeInterval } from '@polar-sh/api'
import Button from '@polar-sh/ui/components/atoms/Button'
import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
import { Status } from '@polar-sh/ui/components/atoms/Status'
import { useMeters } from '@/hooks/queries/meters'
import { Customer, Meter } from '@polar-sh/api'
import { TabsContent } from '@polar-sh/ui/components/atoms/Tabs'
import { twMerge } from 'tailwind-merge'
import AmountLabel from '../Shared/AmountLabel'

export const CustomerUsageView = ({ customer }: { customer: Customer }) => {
const { data: meters } = useMeters(customer.organization_id)
Expand All @@ -24,79 +17,73 @@ export const CustomerUsageView = ({ customer }: { customer: Customer }) => {
}

const CustomerMeter = ({ meter }: { meter: Meter }) => {
const { data: meterEvents } = useMeterEvents(meter?.slug)
// const { data } = useMeterEvents(meter.id)
// const meterEvents = useMemo(() => {
// if (!data) return []
// return data.pages.flatMap((page) => page.items)
// }, [data])

const mockedMeterData = Array.from({ length: 7 }, (_, i) => {
const date = new Date()
date.setDate(date.getDate() - i)
return {
timestamp: date,
usage:
meterEvents?.items
.filter((event: MeterEvent) => {
const eventDate = new Date(event.created_at)
return eventDate.toDateString() === date.toDateString()
})
.reduce(
(total: number, event: MeterEvent) => total + event.value,
0,
) ?? 0,
}
}).reverse()
// const mockedMeterData = Array.from({ length: 7 }, (_, i) => {
// const date = new Date()
// date.setDate(date.getDate() - i)
// return {
// timestamp: date,
// usage:
// meterEvents
// .filter((event) => {
// const eventDate = new Date(event.timestamp)
// return eventDate.toDateString() === date.toDateString()
// })
// .reduce((total: number, event) => total + event.value, 0) ?? 0,
// }
// }).reverse()

if (!meter) return null

return (
<ShadowBox className="flex flex-row gap-x-8 p-4">
<div className="dark:bg-polar-800 flex w-full max-w-xs flex-col justify-between gap-y-6 rounded-3xl bg-white p-8">
<div className="flex flex-col gap-y-4">
<div className="flex flex-row items-center gap-x-4">
<h2 className="text-xl">{meter.name}</h2>
<Status
className={twMerge(
'w-fit capitalize',
meter?.status === 'active'
? 'bg-emerald-100 text-emerald-500 dark:bg-emerald-950'
: 'bg-red-100 text-red-500 dark:bg-red-950',
)}
status={meter?.status}
/>
</div>
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-500 text-sm text-gray-500">
Last 7 Days
</span>
<h3 className="text-xl">{meter.value}</h3>
</div>
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-500 text-sm text-gray-500">
Credits Remaining
</span>
<h3 className="text-xl">{Math.max(0, 100 - meter.value)}</h3>
</div>
<div className="flex flex-col gap-y-1">
<span className="dark:text-polar-500 text-sm text-gray-500">
Overage
</span>
<h3 className="text-xl">
<AmountLabel amount={0} currency="USD" />
</h3>
</div>
</div>
<div className="flex flex-row items-center gap-x-2">
<Button>View Events</Button>
<Button variant="ghost">Revoke Access</Button>
</div>
</div>
<MeterChart
data={mockedMeterData}
interval={TimeInterval.DAY}
metric={{
display_name: 'Usage',
slug: 'usage',
type: MetricType.SCALAR,
}}
/>
</ShadowBox>
)
return null

// return (
// <ShadowBox className="flex flex-row gap-x-8 p-4">
// <div className="dark:bg-polar-800 flex w-full max-w-xs flex-col justify-between gap-y-6 rounded-3xl bg-white p-8">
// <div className="flex flex-col gap-y-4">
// <div className="flex flex-row items-center gap-x-4">
// <h2 className="text-xl">{meter.name}</h2>
// </div>
// <div className="flex flex-col gap-y-1">
// <span className="dark:text-polar-500 text-sm text-gray-500">
// Last 7 Days
// </span>
// <h3 className="text-xl">{meter.value}</h3>
// </div>
// <div className="flex flex-col gap-y-1">
// <span className="dark:text-polar-500 text-sm text-gray-500">
// Credits Remaining
// </span>
// <h3 className="text-xl">{Math.max(0, 100 - meter.value)}</h3>
// </div>
// <div className="flex flex-col gap-y-1">
// <span className="dark:text-polar-500 text-sm text-gray-500">
// Overage
// </span>
// <h3 className="text-xl">
// <AmountLabel amount={0} currency="USD" />
// </h3>
// </div>
// </div>
// <div className="flex flex-row items-center gap-x-2">
// <Button>View Events</Button>
// <Button variant="ghost">Revoke Access</Button>
// </div>
// </div>
// <MeterChart
// data={mockedMeterData}
// interval={TimeInterval.DAY}
// metric={{
// display_name: 'Usage',
// slug: 'usage',
// type: MetricType.SCALAR,
// }}
// />
// </ShadowBox>
// )
}
11 changes: 6 additions & 5 deletions clients/apps/web/src/components/Meter/MeterContextView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Meter } from '@/app/api/meters/data'
import { MeterDetails } from '@/components/Meter/MeterDetails'
import { AddOutlined } from '@mui/icons-material'
import { Meter } from '@polar-sh/api'
import Button from '@polar-sh/ui/components/atoms/Button'
import { List, ListItem } from '@polar-sh/ui/components/atoms/List'
import { useTheme } from 'next-themes'
Expand Down Expand Up @@ -48,6 +48,7 @@ export interface MeterContextViewProps {

export const MeterContextView = ({ meter }: MeterContextViewProps) => {
const { resolvedTheme } = useTheme()
const value = 4342

return (
<div className="flex flex-col gap-y-8 overflow-y-auto px-8 py-12">
Expand Down Expand Up @@ -100,13 +101,13 @@ export const MeterContextView = ({ meter }: MeterContextViewProps) => {
className="absolute left-0 top-0 h-full w-full -rotate-90"
viewBox="0 0 36 36"
>
{(meter.value / alert.threshold) * 100 >= 100 && (
{(value / alert.threshold) * 100 >= 100 && (
<circle
cx="18"
cy="18"
r="1"
fill={
(meter.value / alert.threshold) * 100 >= 100
(value / alert.threshold) * 100 >= 100
? 'rgb(52, 211, 153)'
: 'rgb(96, 165, 250)'
}
Expand All @@ -129,11 +130,11 @@ export const MeterContextView = ({ meter }: MeterContextViewProps) => {
cy="18"
r="8"
stroke={
(meter.value / alert.threshold) * 100 >= 100
(value / alert.threshold) * 100 >= 100
? 'rgb(52, 211, 153)'
: 'rgb(96, 165, 250)'
}
strokeDasharray={`${Math.round((meter.value / alert.threshold) * 100)}, 100`}
strokeDasharray={`${Math.round((value / alert.threshold) * 100)}, 100`}
strokeWidth="3"
fill="none"
/>
Expand Down
2 changes: 1 addition & 1 deletion clients/apps/web/src/components/Meter/MeterDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { Meter } from '@/app/api/meters/data'
import { Meter } from '@polar-sh/api'
import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
import CopyToClipboardButton from '../CopyToClipboardButton/CopyToClipboardButton'
import { DetailRow } from '../Shared/DetailRow'
Expand Down
16 changes: 3 additions & 13 deletions clients/apps/web/src/components/Meter/MeterGetStarted.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meter } from '@/app/api/meters/data'
import { Meter } from '@polar-sh/api'
import {
SyntaxHighlighterClient,
SyntaxHighlighterProvider,
Expand All @@ -8,7 +8,7 @@ export interface MeterGetStartedProps {
meter: Meter
}

export const MeterGetStarted = ({ meter }: MeterGetStartedProps) => {
export const MeterGetStarted = ({}: MeterGetStartedProps) => {
return (
<div className="dark:bg-polar-800 dark:border-polar-700 flex flex-col gap-y-4 rounded-2xl border border-gray-200 bg-gray-100 p-6">
<div className="flex flex-col gap-y-2">
Expand All @@ -20,17 +20,7 @@ export const MeterGetStarted = ({ meter }: MeterGetStartedProps) => {
</div>
<pre className="dark:bg-polar-900 rounded-lg bg-white p-4 font-mono text-sm">
<SyntaxHighlighterProvider>
<SyntaxHighlighterClient
lang="typescript"
code={`import { Usage } from "@polar-sh/nextjs";
export const POST = Usage()
.model(openai("gpt-4o-mini"))
.customer(async (req) => req.headers.get("X-Polar-Customer-Id") ?? "")
.increment("${meter.slug}", (ctx) => ctx.usage.promptTokens)
.handler(async (req, res, model) => /** Handle request and model as usual */);
`}
/>
<SyntaxHighlighterClient lang="typescript" code={`TBD`} />
</SyntaxHighlighterProvider>
</pre>
</div>
Expand Down

0 comments on commit aa6da70

Please sign in to comment.