watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-20 12:35:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Replace formatLongNumber with intl.formatNumber

Browse source
This commit is contained in:
Minseo Lee 2024-08-30 09:59:43 +09:00
parent 5636bd9617
commit 16f86c7715
12 changed files with 44 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/charts/BarChart.tsx
View file

@ -1,7 +1,8 @@
import BarChartTooltip from 'components/charts/BarChartTooltip';
import Chart, { ChartProps } from 'components/charts/Chart';
import { useTheme } from 'components/hooks';
import { renderNumberLabels } from 'lib/charts';
import { formatLongNumberOptions } from 'lib/format';
import { useIntl } from 'react-intl';
import { useMemo, useState } from 'react';
export interface BarChartProps extends ChartProps {
@ -18,6 +19,7 @@ export interface BarChartProps extends ChartProps {
export function BarChart(props: BarChartProps) {
const [tooltip, setTooltip] = useState(null);
const { colors } = useTheme();
const intl = useIntl();
const {
renderXLabel,
renderYLabel,
@ -66,7 +68,8 @@ export function BarChart(props: BarChartProps) {
},
ticks: {
color: colors.chart.text,
callback: renderYLabel || renderNumberLabels,
callback: (n: number) =>
renderYLabel || intl.formatNumber(n, formatLongNumberOptions(n)),
},
},
},

5
src/components/charts/BarChartTooltip.tsx
View file

@ -1,5 +1,5 @@
import { Flexbox, StatusLight } from 'react-basics';
import { formatLongNumber } from 'lib/format';
import { formatLongNumberOptions } from 'lib/format';
import { useIntl } from 'react-intl';
const formats = {
@ -31,7 +31,8 @@ export default function BarChartTooltip({ tooltip, unit }) {
<div>{intl.formatDate(dataPoints[0].raw.d || dataPoints[0].raw.x, formats[unit])}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
{intl.formatNumber(dataPoints[0].raw.y, formatLongNumberOptions(dataPoints[0].raw.y))}{' '}
{dataPoints[0].dataset.label}
</StatusLight>
</div>
</Flexbox>

7
src/components/charts/BubbleChart.tsx
View file

@ -1,7 +1,8 @@
import { Chart, ChartProps } from 'components/charts/Chart';
import { useState } from 'react';
import { StatusLight } from 'react-basics';
import { formatLongNumber } from 'lib/format';
import { formatLongNumberOptions } from 'lib/format';
import { useIntl } from 'react-intl';
export interface BubbleChartProps extends ChartProps {
type?: 'bubble';
@ -10,6 +11,7 @@ export interface BubbleChartProps extends ChartProps {
export default function BubbleChart(props: BubbleChartProps) {
const [tooltip, setTooltip] = useState(null);
const { type = 'bubble' } = props;
const intl = useIntl();
const handleTooltip = ({ tooltip }) => {
const { labelColors, dataPoints } = tooltip;
@ -17,7 +19,8 @@ export default function BubbleChart(props: BubbleChartProps) {
setTooltip(
tooltip.opacity ? (
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints?.[0]?.raw)} {dataPoints?.[0]?.label}
{intl.formatNumber(dataPoints?.[0]?.raw, formatLongNumberOptions(dataPoints?.[0]?.raw))}{' '}
{dataPoints?.[0]?.label}
</StatusLight>
) : null,
);

7
src/components/charts/PieChart.tsx
View file

@ -1,7 +1,8 @@
import { Chart, ChartProps } from 'components/charts/Chart';
import { useState } from 'react';
import { StatusLight } from 'react-basics';
import { formatLongNumber } from 'lib/format';
import { formatLongNumberOptions } from 'lib/format';
import { useIntl } from 'react-intl';
export interface PieChartProps extends ChartProps {
type?: 'doughnut' | 'pie';
@ -10,6 +11,7 @@ export interface PieChartProps extends ChartProps {
export default function PieChart(props: PieChartProps) {
const [tooltip, setTooltip] = useState(null);
const { type = 'pie' } = props;
const intl = useIntl();
const handleTooltip = ({ tooltip }) => {
const { labelColors, dataPoints } = tooltip;
@ -17,7 +19,8 @@ export default function PieChart(props: PieChartProps) {
setTooltip(
tooltip.opacity ? (
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints?.[0]?.raw)} {dataPoints?.[0]?.label}
{intl.formatNumber(dataPoints?.[0]?.raw, formatLongNumberOptions(dataPoints?.[0]?.raw))}{' '}
{dataPoints?.[0]?.label}
</StatusLight>
) : null,
);

2
src/components/metrics/ListTable.tsx
View file

@ -104,7 +104,7 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
<div className={styles.percent}>
<animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<animated.span>
{props.width.to(n => intl.formatNumber(+n / 100, { style: 'percent' }))}
{props.width.to(n => intl.formatNumber(n / 100, { style: 'percent' }))}
</animated.span>
</div>
)}

6
src/components/metrics/MetricsBar.tsx
View file

@ -1,7 +1,8 @@
import { ReactNode } from 'react';
import { Loading, cloneChildren } from 'react-basics';
import ErrorMessage from 'components/common/ErrorMessage';
import { formatLongNumber } from 'lib/format';
import { formatLongNumberOptions } from 'lib/format';
import { useIntl } from 'react-intl';
import styles from './MetricsBar.module.css';
export interface MetricsBarProps {
@ -12,7 +13,8 @@ export interface MetricsBarProps {
}
export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
const formatFunc = n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`);
const intl = useIntl();
const formatFunc = (n: number) => intl.formatNumber(n, formatLongNumberOptions(n));
return (
<div className={styles.bar}>

5
src/components/metrics/WorldMap.tsx
View file

@ -8,7 +8,7 @@ import { useDateRange, useTheme, useWebsiteMetrics } from 'components/hooks';
import { useIntl } from 'react-intl';
import { useLocale } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { formatLongNumber } from 'lib/format';
import { formatLongNumberOptions } from 'lib/format';
import { percentFilter } from 'lib/filters';
import styles from './WorldMap.module.css';
@ -62,8 +62,9 @@ export function WorldMap({
if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code);
setTooltipPopup(
`${intl.formatDisplayName(code, { type: 'region' })}: ${formatLongNumber(
`${intl.formatDisplayName(code, { type: 'region' })}: ${intl.formatNumber(
country?.y || 0,
formatLongNumberOptions(country?.y || 0),
)} ${visitorsLabel}` as any,
);
};