This commit is contained in:
Minseo Lee 2024-08-30 00:15:49 +09:00
parent bb4862a6f7
commit c5ccd53228
6 changed files with 19 additions and 19 deletions

View file

@ -43,19 +43,19 @@ export function WebsiteMetricsBar({
...pageviews, ...pageviews,
label: formatMessage(labels.views), label: formatMessage(labels.views),
change: pageviews.value - pageviews.prev, change: pageviews.value - pageviews.prev,
formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)), formatValue: (n: number) => intl.formatNumber(n, formatLongNumberOptions(n)),
}, },
{ {
...visits, ...visits,
label: formatMessage(labels.visits), label: formatMessage(labels.visits),
change: visits.value - visits.prev, change: visits.value - visits.prev,
formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)), formatValue: (n: number) => intl.formatNumber(n, formatLongNumberOptions(n)),
}, },
{ {
...visitors, ...visitors,
label: formatMessage(labels.visitors), label: formatMessage(labels.visitors),
change: visitors.value - visitors.prev, change: visitors.value - visitors.prev,
formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)), formatValue: (n: number) => intl.formatNumber(n, formatLongNumberOptions(n)),
}, },
{ {
label: formatMessage(labels.bounceRate), label: formatMessage(labels.bounceRate),

View file

@ -18,22 +18,22 @@ export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
<MetricCard <MetricCard
value={data?.visitors?.value} value={data?.visitors?.value}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
value={data?.visits?.value} value={data?.visits?.value}
label={formatMessage(labels.visits)} label={formatMessage(labels.visits)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
value={data?.pageviews?.value} value={data?.pageviews?.value}
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
value={data?.events?.value} value={data?.events?.value}
label={formatMessage(labels.events)} label={formatMessage(labels.events)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
</MetricsBar> </MetricsBar>
<WebsiteDateFilter websiteId={websiteId} /> <WebsiteDateFilter websiteId={websiteId} />

View file

@ -17,25 +17,25 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
className={styles.card} className={styles.card}
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
value={totals.views} value={totals.views}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
value={totals.visitors} value={totals.visitors}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.events)} label={formatMessage(labels.events)}
value={totals.events} value={totals.events}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.countries)} label={formatMessage(labels.countries)}
value={totals.countries} value={totals.countries}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
</div> </div>
</div> </div>

View file

@ -18,22 +18,22 @@ export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
<MetricCard <MetricCard
value={data?.visitors?.value} value={data?.visitors?.value}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
value={data?.visits?.value} value={data?.visits?.value}
label={formatMessage(labels.visits)} label={formatMessage(labels.visits)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
value={data?.pageviews?.value} value={data?.pageviews?.value}
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
value={data?.countries?.value} value={data?.countries?.value}
label={formatMessage(labels.countries)} label={formatMessage(labels.countries)}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
</MetricsBar> </MetricsBar>
<WebsiteDateFilter websiteId={websiteId} /> <WebsiteDateFilter websiteId={websiteId} />

View file

@ -13,17 +13,17 @@ export function SessionStats({ data }) {
<MetricCard <MetricCard
label={formatMessage(labels.visits)} label={formatMessage(labels.visits)}
value={data?.visits} value={data?.visits}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
value={data?.views} value={data?.views}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
label={formatMessage(labels.events)} label={formatMessage(labels.events)}
value={data?.events} value={data?.events}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))} formatValue={(n: number) => intl.formatNumber(n, formatLongNumberOptions(n))}
/> />
<MetricCard <MetricCard
label={formatMessage(labels.visitDuration)} label={formatMessage(labels.visitDuration)}

View file

@ -97,7 +97,7 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
<div className={styles.value}> <div className={styles.value}>
{change} {change}
<animated.div className={styles.value} title={props?.y as any}> <animated.div className={styles.value} title={props?.y as any}>
{props.y?.to((n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)))} {props.y?.to((n: number) => intl.formatNumber(n, formatLongNumberOptions(n)))}
</animated.div> </animated.div>
</div> </div>
{showPercentage && ( {showPercentage && (