File "referrer-chart.tsx"
Full Path: /home/markqprx/iniasli.pro/resources/client/dashboard/reports/referrer-chart.tsx
File size: 2.09 KB
MIME-type: text/plain
Charset: utf-8
import {Trans} from '@common/i18n/trans';
import {LinkStyle} from '@common/ui/buttons/external-link';
import {Chip} from '@common/ui/forms/input-field/chip-field/chip';
import {ChartLayout, ChartLayoutProps} from '@common/charts/chart-layout';
import React from 'react';
import {DatasetItem, ReportMetric} from '@common/admin/analytics/report-metric';
import clsx from 'clsx';
import {ChartLoadingIndicator} from '@common/charts/chart-loading-indicator';
import {removeProtocol} from '@common/utils/urls/remove-protocol';
import {RemoteFavicon} from '@common/ui/remote-favicon';
interface ReferrerChartProps extends Partial<ChartLayoutProps> {
data?: ReportMetric<DatasetItem>;
}
export function ReferrerChart({
data,
isLoading,
...layoutProps
}: ReferrerChartProps) {
const dataItems = data?.datasets[0].data || [];
return (
<ChartLayout
{...layoutProps}
className="w-1/2 min-w-500 md:min-w-0"
title={<Trans message="Referrers" />}
contentIsFlex={isLoading}
contentClassName="max-h-[370px] overflow-y-auto"
>
{isLoading && <ChartLoadingIndicator />}
{dataItems.map((dataItem, index) => (
<div
key={dataItem.label || index}
className="mb-20 flex items-center justify-between gap-24 text-sm"
>
{dataItem.label ? (
<div className="flex items-center gap-8">
<RemoteFavicon url={dataItem.label} />
<a
className={clsx(
LinkStyle,
'overflow-hidden overflow-ellipsis whitespace-nowrap lowercase',
)}
href={dataItem.label}
target="_blank"
rel="noreferrer"
>
{removeProtocol(dataItem.label)}
</a>
</div>
) : (
<Trans message="Direct, Email, SMS" />
)}
<Chip
radius="rounded"
size="xs"
color="primary"
className="font-semibold"
>
{dataItem.value}
</Chip>
</div>
))}
</ChartLayout>
);
}