File "geo-chart.tsx"
Full Path: /home/markqprx/iniasli.pro/client/admin/analytics/geo-chart/geo-chart.tsx
File size: 3.49 KB
MIME-type: text/html
Charset: utf-8
import {
LocationDatasetItem,
ReportMetric,
} from '@common/admin/analytics/report-metric';
import React, {useMemo, useRef} from 'react';
import {useGoogleGeoChart} from './use-google-geo-chart';
import {ChartLayout, ChartLayoutProps} from '@common/charts/chart-layout';
import {Trans} from '@common/i18n/trans';
import {ChartLoadingIndicator} from '@common/charts/chart-loading-indicator';
import {Button} from '@common/ui/buttons/button';
import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
import clsx from 'clsx';
import {InfoDialogTrigger} from '@common/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger';
import {FormattedCountryName} from '@common/i18n/formatted-country-name';
interface GeoChartData extends Partial<ChartLayoutProps> {
data?: ReportMetric<LocationDatasetItem>;
onCountrySelected?: (countryCode: string | undefined) => void;
country?: string;
}
export function GeoChart({
data: metricData,
isLoading,
onCountrySelected,
country,
...layoutProps
}: GeoChartData) {
const placeholderRef = useRef<HTMLDivElement>(null);
const regionInteractivity = !!onCountrySelected;
// memo data to avoid redrawing chart on rerender
const initialData = metricData?.datasets[0].data;
const data = useMemo(() => {
return initialData || [];
}, [initialData]);
useGoogleGeoChart({placeholderRef, data, country, onCountrySelected});
return (
<ChartLayout
{...layoutProps}
className="min-w-500"
title={
<div className="flex items-center">
<Trans message="Top Locations" />
{country ? (
<span className="pl-4">
({<FormattedCountryName code={country} />})
</span>
) : null}
{regionInteractivity && <InfoTrigger />}
</div>
}
contentIsFlex={isLoading}
>
{isLoading && <ChartLoadingIndicator />}
<div className="flex gap-24">
<div
ref={placeholderRef}
className="flex-auto w-[480px] min-h-[340px]"
/>
<div className="w-[170px]">
<div className="text-sm max-h-[340px] w-full flex-initial overflow-y-auto">
{data.map(location => (
<div
key={location.label}
className={clsx(
'flex items-center gap-4 mb-4',
regionInteractivity && 'cursor-pointer hover:underline'
)}
role={regionInteractivity ? 'button' : undefined}
onClick={() => {
onCountrySelected?.(location.code);
}}
>
<div className="max-w-110 whitespace-nowrap overflow-hidden overflow-ellipsis">
{location.label}
</div>
<div>({location.percentage})%</div>
</div>
))}
</div>
{country && (
<Button
variant="outline"
size="xs"
className="mt-14"
startIcon={<ArrowBackIcon />}
onClick={() => {
onCountrySelected?.(undefined);
}}
>
<Trans message="Back to countries" />
</Button>
)}
</div>
</div>
</ChartLayout>
);
}
function InfoTrigger() {
return (
<InfoDialogTrigger
title={<Trans message="Zooming in" />}
body={
<Trans message="Click on a country inside the map or country list to zoom in and see city data for that country." />
}
/>
);
}