openreplay/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomLegend.tsx
Andrey Babushkin fd5c0c9747
Add lokalisation (#3092)
* applied eslint

* add locales and lint the project

* removed error boundary

* updated locales

* fix min files

* fix locales
2025-03-06 17:43:15 +01:00

51 lines
1.2 KiB
TypeScript

import React from 'react';
import { Legend } from 'recharts';
interface CustomLegendProps {
payload?: any[];
}
function CustomLegend({ payload }: CustomLegendProps) {
return (
<div
className="custom-legend"
style={{
display: 'flex',
justifyContent: 'center',
gap: '1rem',
flexWrap: 'wrap',
}}
>
{payload?.map((entry) => (
<div
key={entry.value}
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
>
{entry.value.includes('(Comparison)') ? (
<div
style={{
width: 20,
height: 2,
backgroundImage:
'linear-gradient(to right, black 50%, transparent 50%)',
backgroundSize: '4px 2px',
backgroundRepeat: 'repeat-x',
}}
/>
) : (
<div
style={{
width: 20,
height: 2,
backgroundColor: entry.color,
}}
/>
)}
<span className="text-sm">{entry.value}</span>
</div>
))}
</div>
);
}
export default CustomLegend;