fd5c0c9747
* applied eslint * add locales and lint the project * removed error boundary * updated locales * fix min files * fix locales
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { NoContent } from 'UI';
|
|
import { Styles } from 'Components/Dashboard/Widgets/common';
|
|
import { AreaChart, Area, ResponsiveContainer, XAxis, YAxis } from 'recharts';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface Props {
|
|
data: any;
|
|
label: string;
|
|
}
|
|
|
|
function Chart(props: Props) {
|
|
const { t } = useTranslation();
|
|
const { data, label } = props;
|
|
const gradientDef = Styles.gradientDef();
|
|
|
|
return (
|
|
<NoContent
|
|
size="small"
|
|
title={
|
|
<div className="text-base font-normal">{t('No data available')}</div>
|
|
}
|
|
show={data && data.length === 0}
|
|
style={{ height: '100px' }}
|
|
>
|
|
<ResponsiveContainer height={90} width="100%">
|
|
<AreaChart
|
|
data={data}
|
|
margin={{
|
|
top: 0,
|
|
right: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
}}
|
|
>
|
|
{gradientDef}
|
|
<XAxis hide {...Styles.xaxis} dataKey="time" interval={7} />
|
|
<YAxis
|
|
hide
|
|
{...Styles.yaxis}
|
|
allowDecimals={false}
|
|
tickFormatter={(val) => Styles.tickFormatter(val)}
|
|
label={{ ...Styles.axisLabelLeft, value: label }}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke={Styles.strokeColor}
|
|
fillOpacity={1}
|
|
strokeWidth={2}
|
|
strokeOpacity={0.8}
|
|
fill="url(#colorCount)"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</NoContent>
|
|
);
|
|
}
|
|
|
|
export default Chart;
|