Dashboards · Youj

Installation & usage

npx @youj/cli add app-analytics-overview

Also installs alert, app-page, badge, button, card, chart, counter, date-range-picker, empty, field, icon-pencil, reveal, skeleton, sparkline, stat-card, table, toggle-group, treemap, use-announcer, use-controllable-state, use-now, youj-core, youj-ui-core.

The CLI copies the block to blocks/app/analytics-overview.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

analyticsOverview-view.tsx

'use client'

import { AnalyticsOverview, type AnalyticsOverviewProps } from '@/blocks/app/analytics-overview'

export function AnalyticsOverviewView({ range, summary, kpis, metric }: Pick<AnalyticsOverviewProps, 'range' | 'summary' | 'kpis' | 'metric'>) {
  return (
    <AnalyticsOverview
      range={range}
      summary={summary}
      kpis={kpis}
      metric={metric}
      copy={{ title: 'Analytics overview' }}
      onRangeChange={(range) => {
        // your code
      }}
      onMetricChange={(metric) => {
        // your code
      }}
      onRetry={() => {
        // your code
      }}
    />
  )
}

Reference

Props22 props, 8 types

Props

AnalyticsOverview props
Prop	Type	Default
`theme`	`ThemeInput` Wraps the block in this theme. Default: the theme around it.	–
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) and the frame's gutter, across the whole width, with no store header of its own. default true	`true`
`headingLevel`	`1 \| 2 \| 3` The title's level. default 1	`1`
`range`	`DateSpan` The span shown (controlled); pair it with `onRangeChange`.	–
`defaultRange`	`DateSpan` The span shown first. Default: the last 30 days.	–
`onRangeChange`	`(range: DateSpan) => void` Called with each complete span the picker settles on.	–
`summary`	`Summary` The page's figures for the span shown, from your analytics API. Default: the demo store's, computed for the span.	–
`kpis`	`AnalyticsKpi[]` The headline numbers, in order. default revenue, orders, conversion rate and average order	`revenue, orders, conversion rate and average order`
`metric`	`Metric` `'revenue''orders''visitors'` The trend chart's metric (controlled); pair it with `onMetricChange`.	–
`defaultMetric`	`Metric` `'revenue''orders''visitors'` The trend chart's first metric. default 'revenue'	`'revenue'`
`onMetricChange`	`(metric: Metric) => void` Called with the metric the trend switch lands on.	–
`today`	`Date \| number` Today, the last day the picker offers. Default: the browser's today once mounted (a fixed demo day before, so hydration matches).	–
`minDate`	`Date` The first day the picker offers. default the demo store's launch, Jan 6, 2025	`the demo store's launch, Jan 6, 2025`
`currency`	`string` The currency of every amount. default 'USD'	`'USD'`
`locale`	`string` Formats dates and numbers. Default: the YoujProvider locale.	–
`brand`	`{ name: string; logo?: ReactNode }` The store in the standalone header: its name and mark. Default: Fieldnote Supply and a pencil.	–
`actions`	`ReactNode` Beside the date picker: an export button, a filter. Default: none.	–
`loading`	`boolean` Skeletons in place of the figures while your data loads; the layout holds. default false	`false`
`error`	`ReactNode` Shown in place of the figures when they fail to load, with a retry button when `onRetry` is set. Default: none.	–
`onRetry`	`() => void` Retries loading after an `error`. Default: none.	–
`empty`	`ReactNode` Replaces the message for a span without visitors or orders. Default: `copy.empty` and `copy.emptyDetail`.	–
`copy`	`Partial<AnalyticsOverviewCopy>` Any of the page's strings, to rewrite or translate. Default: the demo's English strings.	–

`AnalyticsCategory`

AnalyticsCategory props
Prop	Type	Default
`key`Required	`string`	–
`label`Required	`string`	–
`revenue`Required	`number`	–

`AnalyticsChannel`

AnalyticsChannel props
Prop	Type	Default
`key`Required	`string`	–
`label`Required	`string`	–
`revenue`Required	`number`	–

`AnalyticsKpi`

AnalyticsKpi props
Prop	Type	Default
`label`Required	`string`	–
`value`Required	`(totals: Day) => number`	–
`format`Required	`Intl.NumberFormatOptions` Money formats without a `currency` take the block's.	–
`tone`Required	`'chart-1' \| 'chart-2' \| 'chart-3' \| 'chart-4' \| 'chart-5'`	–
`bars`	`boolean` Draws bars a bucket (sums and counts); without it a line (rates and averages).	–

`AnalyticsDateSpan`

AnalyticsDateSpan props
Prop	Type	Default
`from`Required	`Date`	–
`to`Required	`Date`	–

`AnalyticsDay`

AnalyticsDay props
Prop	Type	Default
`visitors`Required	`number`	–
`orders`Required	`number`	–
`revenue`Required	`number`	–

`AnalyticsPoint`

AnalyticsPoint props
Prop	Type	Default
`label`Required	`string` The axis label: an hour, a day, a week's first day or a month.	–
`visitors`Required	`number`	–
`orders`Required	`number`	–
`revenue`Required	`number`	–

`AnalyticsProduct`

AnalyticsProduct props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`category`Required	`string` A category's `key`.	–
`revenue`Required	`number` Revenue this period, in the block's currency.	–
`units`Required	`number`	–
`previous`Required	`number` Revenue in the period before.	–
`trend`Required	`number[]` Revenue per bucket, for the row's sparkline.	–

`AnalyticsSummary`

AnalyticsSummary props
Prop	Type	Default
`span`Required	`DateSpan`	–
`previousSpan`Required	`DateSpan`	–
`days`Required	`number`	–
`unit`Required	`'hour' \| 'day' \| 'week' \| 'month'` How the series is bucketed.	–
`totals`Required	`Day`	–
`previousTotals`Required	`Day`	–
`series`Required	`Point[]`	–
`previousSeries`Required	`Point[]` The previous period, bucketed the same way and aligned by index.	–
`channels`Required	`AnalyticsChannel[]` In legend order; each takes the next chart color.	–
`products`Required	`ProductRow[]` Ranked by revenue; the top five are listed.	–
`categories`Required	`AnalyticsCategory[]` Ranked by revenue; the first is highlighted.	–

Strings40 keys for copy

Built from17 components

Accessibilitylandmarks, headings, loading

#Installation & usage

#Description

#Code

#Reference

Props

AnalyticsCategory

AnalyticsChannel

AnalyticsKpi

AnalyticsDateSpan

AnalyticsDay

AnalyticsPoint

AnalyticsProduct

AnalyticsSummary

Strings

Built from

Components used

#Accessibility