98 lines
3.5 KiB
JavaScript
98 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import LineChart from '../../charts/LineChart01';
|
|
import Icon from '../../images/icon-03.svg';
|
|
import EditMenu from '../../components/DropdownEditMenu';
|
|
|
|
// Import utilities
|
|
import { tailwindConfig, hexToRGB } from '../../utils/Utils';
|
|
|
|
function DashboardCard03() {
|
|
|
|
const chartData = {
|
|
labels: [
|
|
'12-01-2020', '01-01-2021', '02-01-2021',
|
|
'03-01-2021', '04-01-2021', '05-01-2021',
|
|
'06-01-2021', '07-01-2021', '08-01-2021',
|
|
'09-01-2021', '10-01-2021', '11-01-2021',
|
|
'12-01-2021', '01-01-2022', '02-01-2022',
|
|
'03-01-2022', '04-01-2022', '05-01-2022',
|
|
'06-01-2022', '07-01-2022', '08-01-2022',
|
|
'09-01-2022', '10-01-2022', '11-01-2022',
|
|
'12-01-2022', '01-01-2023',
|
|
],
|
|
datasets: [
|
|
// Indigo line
|
|
{
|
|
data: [
|
|
540, 466, 540, 466, 385, 432, 334,
|
|
334, 289, 289, 200, 289, 222, 289,
|
|
289, 403, 554, 304, 289, 270, 134,
|
|
270, 829, 344, 388, 364,
|
|
],
|
|
fill: true,
|
|
backgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.blue[500])}, 0.08)`,
|
|
borderColor: tailwindConfig().theme.colors.indigo[500],
|
|
borderWidth: 2,
|
|
tension: 0,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 3,
|
|
pointBackgroundColor: tailwindConfig().theme.colors.indigo[500],
|
|
clip: 20,
|
|
},
|
|
// Gray line
|
|
{
|
|
data: [
|
|
689, 562, 477, 477, 477, 477, 458,
|
|
314, 430, 378, 430, 498, 642, 350,
|
|
145, 145, 354, 260, 188, 188, 300,
|
|
300, 282, 364, 660, 554,
|
|
],
|
|
borderColor: tailwindConfig().theme.colors.slate[300],
|
|
borderWidth: 2,
|
|
tension: 0,
|
|
pointRadius: 0,
|
|
pointHoverRadius: 3,
|
|
pointBackgroundColor: tailwindConfig().theme.colors.slate[300],
|
|
clip: 20,
|
|
},
|
|
],
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white shadow-lg rounded-sm border border-slate-200">
|
|
<div className="px-5 pt-5">
|
|
<header className="flex justify-between items-start mb-2">
|
|
{/* Icon */}
|
|
<img src={Icon} width="32" height="32" alt="Icon 03" />
|
|
{/* Menu button */}
|
|
<EditMenu align="right" className="relative inline-flex">
|
|
<li>
|
|
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 1</Link>
|
|
</li>
|
|
<li>
|
|
<Link className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" to="#0">Option 2</Link>
|
|
</li>
|
|
<li>
|
|
<Link className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" to="#0">Remove</Link>
|
|
</li>
|
|
</EditMenu>
|
|
</header>
|
|
<h2 className="text-lg font-semibold text-slate-800 mb-2">Acme Professional</h2>
|
|
<div className="text-xs font-semibold text-slate-400 uppercase mb-1">Sales</div>
|
|
<div className="flex items-start">
|
|
<div className="text-3xl font-bold text-slate-800 mr-2">$9,962</div>
|
|
<div className="text-sm font-semibold text-white px-1.5 bg-emerald-500 rounded-full">+49%</div>
|
|
</div>
|
|
</div>
|
|
{/* Chart built with Chart.js 3 */}
|
|
<div className="grow">
|
|
{/* Change the height attribute to adjust the chart height */}
|
|
<LineChart data={chartData} width={389} height={128} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DashboardCard03;
|