From 70ebf066631f0c3893c74db8369a4ed9afc72008 Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 17 Dec 2025 12:50:01 +0700 Subject: [PATCH] fix stacked bar shar diagram --- src/app/components/StackedBarChart.tsx | 134 ++++---- src/app/styles/global-styles.scss | 3 +- src/app/styles/marking-pages.scss | 293 ---------------- .../{dashboard.scss => pages-styles.scss} | 312 ++++++++++++++++++ .../ui/marking-page/protection-summary.tsx | 37 ++- 5 files changed, 398 insertions(+), 381 deletions(-) delete mode 100644 src/app/styles/marking-pages.scss rename src/app/styles/{dashboard.scss => pages-styles.scss} (50%) diff --git a/src/app/components/StackedBarChart.tsx b/src/app/components/StackedBarChart.tsx index ef9af12..4ea4ecf 100644 --- a/src/app/components/StackedBarChart.tsx +++ b/src/app/components/StackedBarChart.tsx @@ -21,62 +21,56 @@ interface BarShapeProps { export const StackedBarChart = ({ data }: Files) => { const t = useTranslations('Global'); - const editedData = data.map(e => { - return { - name: e.name, - checks: e.checks - e.violations, - violations: e.violations - } - }) - - const mainColors = ['#0088FE20', '#00C49F20', '#FFBB2820', '#FF804220', '#FF000020', '#FFC0CB20']; - const secondColors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', 'red', 'pink']; - const strokeColor = "#dfdede24"; const strokeWidth = 1; const renderBarWithPartialBorder = (props: BarShapeProps) => { const { x, y, width, height, fill } = props; + const borderRadius = 10; return ( <> - {/* Основной прямоугольник без обводки */} + {/* Основной прямоугольник с закругленными углами */} - {/* Левая граница */} + {/* Левая граница (центральная часть, без закруглений) */} - {/* Правая граница */} + {/* Правая граница (центральная часть, без закруглений) */} - {/* Нижняя граница */} + {/* Нижняя граница (прямая часть между закруглениями) */} + + {/* Верхняя граница (прямая часть между закруглениями) */} + ); @@ -90,82 +84,66 @@ export const StackedBarChart = ({ data }: Files) => { return ( <> - {/* Основной прямоугольник с закруглением ТОЛЬКО ВЕРХНИХ углов */} - - {/* Верхняя граница */} - - - {/* Левая граница */} + {/* Левая граница (центральная часть, без закруглений) */} - {/* Правая граница */} + {/* Правая граница (центральная часть, без закруглений) */} + + {/* Нижняя граница (прямая часть между закруглениями) */} + - {/* Левый верхний закругленный угол */} - - - {/* Правый верхний закругленный угол */} - - ) as any; + ); }; return ( { dataKey="checks" stackId="a" label={{ position: 'top', fill: '#fff', fontSize: 12 }} + radius={5} shape={renderBarWithPartialBorder as any} > {data.map((_entry, index) => ( - + ))} {data.map((_entry, index) => ( - + ))} diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 2cb73d0..856c77a 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -1,9 +1,8 @@ @use './header.scss'; -@use './dashboard.scss'; +@use './pages-styles.scss'; @use './settings.scss'; @use './payment-container.scss'; @use './reports.scss'; -@use './marking-pages.scss'; @use './privacy-and-terms-pages.scss'; @use './VKLogin.scss'; diff --git a/src/app/styles/marking-pages.scss b/src/app/styles/marking-pages.scss deleted file mode 100644 index a36fb5c..0000000 --- a/src/app/styles/marking-pages.scss +++ /dev/null @@ -1,293 +0,0 @@ -.protection-summary { - background: linear-gradient(135deg, #e8f5e8, #c8e6c9); - border: 2px solid #4caf50; - border-radius: 15px; - padding: 20px; - margin-bottom: 25px; - text-align: center; - - h3 { - color: #2e7d32; - margin-bottom: 15px; - font-size: 18px; - } - - .protection-stats { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 15px; - margin-top: 15px; - } - - .stat-card { - background: rgba(255, 255, 255, 0.8); - padding: 15px; - border-radius: 10px; - text-align: center; - } - - .stat-number { - font-size: 24px; - font-weight: bold; - color: #2e7d32; - } - - .stat-label { - font-size: 12px; - color: #666; - margin-top: 5px; - } -} - -.upload-section { - background: white; - border-radius: 20px; - padding: 30px; - margin-bottom: 30px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - - h3 { - margin-bottom: 20px; - color: #111827; - font-size: 20px; - } - - .drag-drop-zone { - border: 3px dashed #6366f1; - border-radius: 15px; - padding: 40px 20px; - text-align: center; - background: linear-gradient(135deg, #f0f9ff, #e0f2fe); - margin-bottom: 20px; - transition: all 0.3s ease; - - .icon { - width: 70px; - height: 70px; - margin: 0 auto; - color: #6366f1; - } - - h4 { - color: #6366f1; - margin-bottom: 5px; - font-size: 22px; - } - - .description { - color: #6b7280; - margin-bottom: 5px; - text-align: start; - } - - .btn-primary { - background: linear-gradient(45deg, #6566f1, #5a5ce9); - margin-bottom: 40px; - } - } - - .selected-file { - border-radius: 15px; - background: #fff; - padding: 10px; - - &-file-info { - text-align: left; - } - - .uploaded-image { - border-radius: 0.25rem; - max-height: calc(4px * 40); - margin-inline: auto; - margin-bottom: 20px; - border: 1px solid #d1d5db; - } - - .btn-confirm { - background: linear-gradient(45deg, #6566f1, #01579b); - color: white; - border: none; - padding: 5px 15px; - border-radius: 12px; - cursor: pointer; - font-weight: 600; - font-size: 16px; - transition: 0.3s; - min-width: 160px; - transform: translateY(0px); - box-shadow: none; - } - - .btn-cancel { - background: #fff; - color: rgb(99, 102, 241); - border: 2px solid rgb(99, 102, 241); - padding: 5px 15px; - border-radius: 12px; - cursor: pointer; - font-weight: 600; - font-size: 16px; - transition: 0.3s; - min-width: 120px; - } - - .btn:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px #6366f14d; - } - } -} - -.test-section { - background: linear-gradient(135deg, #fff3e0, #ffe0b2); - border-radius: 20px; - padding: 30px; - margin-bottom: 30px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - - h3 { - margin-bottom: 20px; - color: #e65100; - font-size: 20px; - } - - .test-section-content { - border: 2px dashed #ff9800; - border-radius: 10px; - padding: 20px; - text-align: center; - background: #fff8e1; - - h4 { - font-size: 32px; - margin-bottom: 10px; - } - - .btn { - background: linear-gradient(45deg, #ff9800, #f57c00); - } - - p { - margin-top: 15px; - font-size: 12px; - color: #e65100; - } - } -} - -.protected-files-table { - background: white; - border-radius: 15px; - overflow: hidden; - margin-top: 30px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - - h3 { - padding: 20px 20px 0; - color: #111827; - font-size: 18px; - margin-bottom: 20px; - } - - table { - width: 100%; - border-collapse: collapse; - } - - th { - background: linear-gradient(180deg, #6366f1, #8b5cf6); - color: white; - padding: 15px; - text-align: left; - font-weight: 600; - font-size: 14px; - } - - td { - padding: 15px; - border-bottom: 1px solid #f3f4f6; - vertical-align: middle; - } - - .files-table { - &-file { - display: flex; - align-items: center; - } - - &-icon { - width: 40px; - height: 40px; - background: #f0f9ff; - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 12px; - border: 2px solid #6366f1; - color: #6366f1; - } - - &-title { - font-weight: 500; - color: #111827; - font-size: 14px; - } - - &-protect { - font-size: 11px; - color: #6366f1; - font-weight: 600; - } - - &-size { - color: #6b7280; - font-size: 14px; - } - - &-protect { - display: flex; - align-items: center; - } - - &-bar { - width: 30px; - height: 6px; - background: #e5e7eb; - border-radius: 3px; - margin-right: 8px; - } - - &-fill { - width: 100%; - height: 100%; - background: #6366f1; - border-radius: 3px; - } - - &-date { - color: #6b7280; - font-size: 13px; - } - } - - .btn-secondary { - background: #6366f1; - color: white; - padding: 5px 16px 5px 10px; - } - - .icon { - height: 18px; - } - - .real-protection-badge { - background: linear-gradient(135deg, #6366f1, #8b5cf6); - color: white; - padding: 2px 6px; - border-radius: 4px; - font-size: 9px; - font-weight: bold; - margin-left: 5px; - } -} \ No newline at end of file diff --git a/src/app/styles/dashboard.scss b/src/app/styles/pages-styles.scss similarity index 50% rename from src/app/styles/dashboard.scss rename to src/app/styles/pages-styles.scss index 056c1c4..62d4ba4 100644 --- a/src/app/styles/dashboard.scss +++ b/src/app/styles/pages-styles.scss @@ -118,6 +118,24 @@ font-size: 14px; opacity: 0.9; } + + &-total-info { + position: absolute; + top: 10; + left: 10; + background-color: #1f293718; + padding: 10px; + border-radius: 10; + font-size: 15px; + } + + .stacked-bar-chart { + border-radius: 10; + width: 100%; + padding: 0 20px; + display: flex; + justify-content: center; + } } &-switch { @@ -340,3 +358,297 @@ } } } + +.protection-summary { + background: linear-gradient(135deg, #e8f5e8, #c8e6c9); + border: 2px solid #4caf50; + border-radius: 15px; + padding: 20px; + margin-bottom: 25px; + text-align: center; + + h3 { + color: #2e7d32; + margin-bottom: 15px; + font-size: 18px; + } + + .protection-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 15px; + margin-top: 15px; + } + + .stat-card { + background: rgba(255, 255, 255, 0.8); + padding: 15px; + border-radius: 10px; + text-align: center; + } + + .stat-number { + font-size: 24px; + font-weight: bold; + color: #2e7d32; + } + + .stat-label { + font-size: 12px; + color: #666; + margin-top: 5px; + } +} + +.upload-section { + background: white; + border-radius: 20px; + padding: 30px; + margin-bottom: 30px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + h3 { + margin-bottom: 20px; + color: #111827; + font-size: 20px; + } + + .drag-drop-zone { + border: 3px dashed #6366f1; + border-radius: 15px; + padding: 40px 20px; + text-align: center; + background: linear-gradient(135deg, #f0f9ff, #e0f2fe); + margin-bottom: 20px; + transition: all 0.3s ease; + + .icon { + width: 70px; + height: 70px; + margin: 0 auto; + color: #6366f1; + } + + h4 { + color: #6366f1; + margin-bottom: 5px; + font-size: 22px; + } + + .description { + color: #6b7280; + margin-bottom: 5px; + text-align: start; + } + + .btn-primary { + background: linear-gradient(45deg, #6566f1, #5a5ce9); + margin-bottom: 40px; + } + } + + .selected-file { + border-radius: 15px; + background: #fff; + padding: 10px; + + &-file-info { + text-align: left; + } + + .uploaded-image { + border-radius: 0.25rem; + max-height: calc(4px * 40); + margin-inline: auto; + margin-bottom: 20px; + border: 1px solid #d1d5db; + } + + .btn-confirm { + background: linear-gradient(45deg, #6566f1, #01579b); + color: white; + border: none; + padding: 5px 15px; + border-radius: 12px; + cursor: pointer; + font-weight: 600; + font-size: 16px; + transition: 0.3s; + min-width: 160px; + transform: translateY(0px); + box-shadow: none; + } + + .btn-cancel { + background: #fff; + color: rgb(99, 102, 241); + border: 2px solid rgb(99, 102, 241); + padding: 5px 15px; + border-radius: 12px; + cursor: pointer; + font-weight: 600; + font-size: 16px; + transition: 0.3s; + min-width: 120px; + } + + .btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px #6366f14d; + } + } +} + +.test-section { + background: linear-gradient(135deg, #fff3e0, #ffe0b2); + border-radius: 20px; + padding: 30px; + margin-bottom: 30px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + h3 { + margin-bottom: 20px; + color: #e65100; + font-size: 20px; + } + + .test-section-content { + border: 2px dashed #ff9800; + border-radius: 10px; + padding: 20px; + text-align: center; + background: #fff8e1; + + h4 { + font-size: 32px; + margin-bottom: 10px; + } + + .btn { + background: linear-gradient(45deg, #ff9800, #f57c00); + } + + p { + margin-top: 15px; + font-size: 12px; + color: #e65100; + } + } +} + +.protected-files-table { + background: white; + border-radius: 15px; + overflow: hidden; + margin-top: 30px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + h3 { + padding: 20px 20px 0; + color: #111827; + font-size: 18px; + margin-bottom: 20px; + } + + table { + width: 100%; + border-collapse: collapse; + } + + th { + background: linear-gradient(180deg, #6366f1, #8b5cf6); + color: white; + padding: 15px; + text-align: left; + font-weight: 600; + font-size: 14px; + } + + td { + padding: 15px; + border-bottom: 1px solid #f3f4f6; + vertical-align: middle; + } + + .files-table { + &-file { + display: flex; + align-items: center; + } + + &-icon { + width: 40px; + height: 40px; + background: #f0f9ff; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 12px; + border: 2px solid #6366f1; + color: #6366f1; + } + + &-title { + font-weight: 500; + color: #111827; + font-size: 14px; + } + + &-protect { + font-size: 11px; + color: #6366f1; + font-weight: 600; + } + + &-size { + color: #6b7280; + font-size: 14px; + } + + &-protect { + display: flex; + align-items: center; + } + + &-bar { + width: 30px; + height: 6px; + background: #e5e7eb; + border-radius: 3px; + margin-right: 8px; + } + + &-fill { + width: 100%; + height: 100%; + background: #6366f1; + border-radius: 3px; + } + + &-date { + color: #6b7280; + font-size: 13px; + } + } + + .btn-secondary { + background: #6366f1; + color: white; + padding: 5px 16px 5px 10px; + } + + .icon { + height: 18px; + } + + .real-protection-badge { + background: linear-gradient(135deg, #6366f1, #8b5cf6); + color: white; + padding: 2px 6px; + border-radius: 4px; + font-size: 9px; + font-weight: bold; + margin-left: 5px; + } +} \ No newline at end of file diff --git a/src/app/ui/marking-page/protection-summary.tsx b/src/app/ui/marking-page/protection-summary.tsx index 757366e..2981eec 100644 --- a/src/app/ui/marking-page/protection-summary.tsx +++ b/src/app/ui/marking-page/protection-summary.tsx @@ -6,34 +6,39 @@ import { useTranslations } from 'next-intl'; const data = [ { - name: 'Page A', + name: 'File A', checks: 4000, violations: 2000 }, { - name: 'Page B', + name: 'File B', checks: 3000, - violations: 1398 + violations: 1400 }, { - name: 'Page C', + name: 'File C', checks: 2000, violations: 1000 }, { - name: 'Page D', + name: 'File D', checks: 2780, violations: 1000 }, { - name: 'Page E', + name: 'File E', checks: 5090, violations: 4800 }, { - name: 'Page F', + name: 'File F', checks: 5390, violations: 3800 + }, + { + name: 'File H', + checks: 4000, + violations: 1500 } ]; @@ -73,8 +78,22 @@ export default function ProtectionSummary() { } {isOpen ? ( -
- +
+
+ +
+
+
+ {t('check')}: 777 +
+
+ {t('violations')}: 777 +
+
) : (