v1 revenue report for clickhouse

This commit is contained in:
Francis Cao 2024-09-26 15:36:48 -07:00
parent e173f375c7
commit 2707b39473
19 changed files with 427 additions and 243 deletions

View file

@ -7,6 +7,7 @@ import { useMemo, useState } from 'react';
export interface BarChartProps extends ChartProps {
unit: string;
stacked?: boolean;
currency?: string;
renderXLabel?: (label: string, index: number, values: any[]) => string;
renderYLabel?: (label: string, index: number, values: any[]) => string;
XAxisType?: string;
@ -27,6 +28,7 @@ export function BarChart(props: BarChartProps) {
stacked = false,
minDate,
maxDate,
currency,
} = props;
const options: any = useMemo(() => {
@ -76,7 +78,9 @@ export function BarChart(props: BarChartProps) {
const handleTooltip = ({ tooltip }: { tooltip: any }) => {
const { opacity } = tooltip;
setTooltip(opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} /> : null);
setTooltip(
opacity ? <BarChartTooltip tooltip={tooltip} unit={unit} currency={currency} /> : null,
);
};
return (

View file

@ -1,7 +1,7 @@
import { formatDate } from 'lib/date';
import { Flexbox, StatusLight } from 'react-basics';
import { formatLongNumber } from 'lib/format';
import { useLocale } from 'components/hooks';
import { formatDate } from 'lib/date';
import { formatLongCurrency, formatLongNumber } from 'lib/format';
import { Flexbox, StatusLight } from 'react-basics';
const formats = {
millisecond: 'T',
@ -15,7 +15,7 @@ const formats = {
year: 'yyyy',
};
export default function BarChartTooltip({ tooltip, unit }) {
export default function BarChartTooltip({ tooltip, unit, currency }) {
const { locale } = useLocale();
const { labelColors, dataPoints } = tooltip;
@ -26,7 +26,10 @@ export default function BarChartTooltip({ tooltip, unit }) {
</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
{currency
? formatLongCurrency(dataPoints[0].raw.y, currency)
: formatLongNumber(dataPoints[0].raw.y)}{' '}
{dataPoints[0].dataset.label}
</StatusLight>
</div>
</Flexbox>