Metrics 01

1import { format } from "date-fns"
2 
3import Grid from "@/components/charts/grid"
4import LineChart, { Line } from "@/components/charts/line-chart"
5import { ChartTooltip } from "@/components/charts/tooltip"
6import {
7  Metric,
8  MetricLabel,
9  MetricValue,
10} from "@/registry/blocks/metrics-01/components/metric"
11 
12export function Metrics01() {
13  return (
14    <div className="max-w-screen overflow-x-clip">
15      <div className="container mx-auto px-4">
16        <div className="border-x border-line py-8">
17          <div className="screen-line-top screen-line-bottom">
18            <h2 className="screen-line-bottom ml-4 font-heading text-3xl font-medium tracking-tight">
19              Insights
20              <sup className="top-[-0.75em] ml-1 text-sm font-medium tracking-normal text-muted-foreground">
21                ({format(new Date(data.startDate), "dd.MM")} –{" "}
22                {format(new Date(data.endDate), "dd.MM")})
23              </sup>
24            </h2>
25 
26            <div className="relative">
27              <div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-2 md:grid-cols-4">
28                <div className="border-r border-line" />
29                <div className="border-r border-line max-md:hidden" />
30                <div className="border-r border-line max-md:hidden" />
31              </div>
32 
33              <dl className="grid grid-cols-2 md:grid-cols-4">
34                <Metric>
35                  <MetricLabel>Unique visitors</MetricLabel>
36                  <MetricValue>
37                    {data.summary.uniqueVisitors.toLocaleString()}
38                  </MetricValue>
39                </Metric>
40 
41                <Metric>
42                  <MetricLabel>Sessions</MetricLabel>
43                  <MetricValue>
44                    {data.summary.totalSessions.toLocaleString()}
45                  </MetricValue>
46                </Metric>
47 
48                <Metric>
49                  <MetricLabel>Views</MetricLabel>
50                  <MetricValue>
51                    {data.summary.totalScreenViews.toLocaleString()}
52                  </MetricValue>
53                </Metric>
54 
55                <Metric>
56                  <MetricLabel>Session duration</MetricLabel>
57                  <MetricValue>
58                    {formatDuration(data.summary.avgSessionDuration)}
59                  </MetricValue>
60                </Metric>
61              </dl>
62            </div>
63 
64            {data.series.length > 0 ? (
65              <LineChart
66// … truncated