frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

transfer stacked bart chart from overview block

Browse Source
This commit is contained in:
smanylov
2025-12-28 11:34:22 +07:00
parent bd2ec273a9
commit 6d9313cbb8
7 changed files with 244 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/marking-page/protection-summary.tsx
+11 -107
View File
@@ -1,128 +1,32 @@
'use client'
import { useState } from 'react';
import { StackedBarChart } from '@/app/components/StackedBarChart';
import { useTranslations } from 'next-intl';
const data = [
{
name: 'File A',
checks: 4000,
violations: 2000
},
{
name: 'File B',
checks: 3000,
violations: 1400
},
{
name: 'File C',
checks: 2000,
violations: 1000
},
{
name: 'File D',
checks: 2780,
violations: 1000
},
{
name: 'File E',
checks: 5090,
violations: 4800
},
{
name: 'File F',
checks: 5390,
violations: 3800
},
{
name: 'File H',
checks: 4000,
violations: 1500
}
];
export default function ProtectionSummary() {
const [isOpen, setIsOpen] = useState(false);
const t = useTranslations('Global');
return (
<div className="protection-overview">
<div className="protection-overview grow">
<h3>{t('protecting-your-content')}</h3>
<p>{t('current-status-of')}</p>
<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
<div className="protection-stats">
<div className="protection-stat total-files">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('total-files')}</div>
</div>
<div className="protection-stat total-checks">
{isOpen ? (
<>
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">
{t('size')}
</div>
</>
) :
<>
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
</div>
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
</div>
</>
}
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
</div>
{isOpen ? (
<div className="protection-stat total-usage relative">
<div className="stacked-bar-chart">
<StackedBarChart data={data} />
</div>
<div className="protection-stat-total-info">
<div
className="font-bold"
>
{t('check')}: 777
</div>
<div
className="font-bold text-[#f08c00]"
>
{t('violations')}: 777
</div>
</div>
<div className="protection-stat total-usage">
<div className="protection-stat-value">0 / 0</div>
<div className="protection-stat-label">
{t('disk-space-used')}
</div>
) : (
<div className="protection-stat total-usage">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">
{t('size')}
</div>
</div>
)}
</div>
</div>
<button
className="protection-overview-switch cursor-pointer"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<svg
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
)
}