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/[locale]/pages/marking-audio/page.tsx
+44
View File
@@ -3,6 +3,45 @@ import FilesTable from '@/app/ui/dashboard/files-table';
import PageTitle from '@/app/ui/page-title';
import UploadSectionFile from '@/app/components/upload-section-file';
import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
import { StackedBarChart } from '@/app/components/StackedBarChart';
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 async function Page() {
const FILE_TYPE = "audio";
@@ -11,7 +50,12 @@ export default async function Page() {
return (
<div>
<PageTitle title="audio-protection" />
<div className="flex justify-between flex-wrap gap-8">
<ProtectionSummary />
<div className="protection-overview grow">
<StackedBarChart data={data} />
</div>
</div>
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable />
</div>
src/app/[locale]/pages/marking-photo/page.tsx
+44
View File
@@ -3,6 +3,45 @@ import FilesTable from '@/app/ui/dashboard/files-table';
import PageTitle from '@/app/ui/page-title';
import UploadSectionFile from '@/app/components/upload-section-file';
import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
import {StackedBarChart} from '@/app/components/StackedBarChart';
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 async function Page() {
const FILE_TYPE = "image";
@@ -11,7 +50,12 @@ export default async function Page() {
return (
<div>
<PageTitle title="image-protection" />
<div className="flex justify-between flex-wrap gap-8">
<ProtectionSummary />
<div className="protection-overview grow">
<StackedBarChart data={data} />
</div>
</div>
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable />
</div>
src/app/[locale]/pages/marking-video/page.tsx
+44
View File
@@ -3,6 +3,45 @@ import FilesTable from '@/app/ui/dashboard/files-table';
import PageTitle from '@/app/ui/page-title';
import UploadSectionFile from '@/app/components/upload-section-file';
import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
import { StackedBarChart } from '@/app/components/StackedBarChart';
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 async function Page() {
const FILE_TYPE = "video";
@@ -11,7 +50,12 @@ export default async function Page() {
return (
<div>
<PageTitle title="video-protection" />
<div className="flex justify-between flex-wrap gap-8">
<ProtectionSummary />
<div className="protection-overview grow">
<StackedBarChart data={data} />
</div>
</div>
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable />
</div>
src/app/components/StackedBarChart.tsx
+20
View File
@@ -1,3 +1,5 @@
'use client'
import { useTranslations } from 'next-intl';
import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
@@ -139,6 +141,9 @@ export const StackedBarChart = ({ data }: Files) => {
};
return (
<>
<div className="protection-stat relative">
<div className="stacked-bar-chart">
<BarChart
style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
responsive
@@ -181,5 +186,20 @@ export const StackedBarChart = ({ data }: Files) => {
))}
</Bar>
</BarChart>
</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>
</>
);
};
src/app/styles/pages-styles.scss
+28 -1
View File
@@ -78,10 +78,27 @@
justify-content: center;
align-items: center;
&.total-checks,
&.total-files {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 0 10px;
.protection-stat-value {
justify-self: end;
padding-right: 10px;
padding-left: 10px;
}
.protection-stat-label {
text-align: start;
}
}
&-row {
display: flex;
align-items: center;
justify-content: start;
justify-content: center;
gap: 10px;
width: 100%;
}
@@ -99,6 +116,7 @@
&-label {
font-size: 14px;
opacity: 0.9;
text-align: center;
}
&-total-info {
@@ -150,6 +168,11 @@
transition: all 0.3s ease;
}
}
&:has(.stacked-bar-chart) {
height: 100%;
padding-left: 100px;
}
}
&-switch {
@@ -157,6 +180,10 @@
right: 10px;
top: 10px;
}
&:has(.stacked-bar-chart) {
padding: 0;
}
}
.stats-wrapper {
src/app/ui/dashboard/protection-overview.tsx
+8 -1
View File
@@ -39,7 +39,7 @@ export default function ProtectionOverview() {
<div className="protection-stat-label">{t('total-files')}</div>
</div>
<div className="protection-stat total-checks">
{/* <div className="protection-stat total-checks">
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
@@ -48,6 +48,13 @@ export default function ProtectionOverview() {
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
</div>
</div> */}
<div className="protection-stat total-checks">
<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>
</>
) : (
src/app/ui/marking-page/protection-summary.tsx
+4 -100
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>
{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>
) : (
<div className="protection-stat total-usage">
<div className="protection-stat-value">0</div>
<div className="protection-stat-value">0 / 0</div>
<div className="protection-stat-label">
{t('size')}
{t('disk-space-used')}
</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>
)
}