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

redesign

Browse Source
This commit is contained in:
smanylov
2026-01-05 15:07:10 +07:00
parent 9f41386b65
commit c438ae3fb9
11 changed files with 127 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/PieChartComponent.tsx
+5 -4
View File
@@ -31,20 +31,21 @@ export const PieChartComponent = ({ data }: {
data={data}
cx="50%"
cy="50%"
innerRadius={70}
outerRadius={90}
innerRadius={75}
outerRadius={100}
paddingAngle={0}
dataKey="value"
stroke="none"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
<Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
<div className="flex gap-6">
{data.map((entry, index) => (
<div key={`cell-${index}`} className="text-white">
<div key={`cell-${index}`} className="">
<span className="w-2 h-2 rounded-full font-bold inline-block mr-1.5" style={{ backgroundColor: entry.color }}></span>
<span>{t(entry.name)}</span>
</div>
src/app/components/StackedBarChart.tsx
+48 -41
View File
@@ -1,6 +1,7 @@
'use client'
import { useTranslations } from 'next-intl';
import { useMemo } from 'react';
import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
type Files = {
@@ -23,12 +24,19 @@ interface BarShapeProps {
export const StackedBarChart = ({ data }: Files) => {
const t = useTranslations('Global');
const strokeColor = "#dfdede24";
const strokeWidth = 1;
const CHECKS_COLOR = '#6366f1';
const VIOLATIONS_COLOR = '#f08c00'
const BORDER_RADIUS = 5;
const STROKE_COLOR = "#dfdede24";
const STROKE_WIDTH = 1;
const { totalChecks, totalViolations } = useMemo(() => ({
totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0),
totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0)
}), [data]);
const renderBarWithPartialBorder = (props: BarShapeProps) => {
const { x, y, width, height, fill } = props;
const borderRadius = 10;
return (
<>
@@ -39,39 +47,39 @@ export const StackedBarChart = ({ data }: Files) => {
width={width}
height={height}
fill={fill}
rx={borderRadius}
ry={borderRadius}
rx={BORDER_RADIUS}
ry={BORDER_RADIUS}
/>
{/* Левая граница (центральная часть, без закруглений) */}
<line
x1={x}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x}
y2={y + height - borderRadius}
y2={y + height - BORDER_RADIUS}
/>
{/* Правая граница (центральная часть, без закруглений) */}
<line
x1={x + width}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x + width}
y2={y + height - borderRadius}
y2={y + height - BORDER_RADIUS}
/>
{/* Нижняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y + height}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y + height}
/>
{/* Верхняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y}
/>
</>
@@ -80,7 +88,6 @@ export const StackedBarChart = ({ data }: Files) => {
const renderBarWithTopBorder = (props: BarShapeProps) => {
const { x, y, width, height, fill } = props;
const borderRadius = 10;
if (height <= 0 || width <= 0) return null;
@@ -93,48 +100,48 @@ export const StackedBarChart = ({ data }: Files) => {
width={width}
height={height}
fill={fill}
rx={borderRadius}
ry={borderRadius}
rx={BORDER_RADIUS}
ry={BORDER_RADIUS}
/>
{/* Левая граница (центральная часть, без закруглений) */}
<line
x1={x}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x}
y2={y + height - borderRadius}
stroke={strokeColor}
strokeWidth={strokeWidth}
y2={y + height - BORDER_RADIUS}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Правая граница (центральная часть, без закруглений) */}
<line
x1={x + width}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x + width}
y2={y + height - borderRadius}
stroke={strokeColor}
strokeWidth={strokeWidth}
y2={y + height - BORDER_RADIUS}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Нижняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y + height}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y + height}
stroke={strokeColor}
strokeWidth={strokeWidth}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Верхняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y}
stroke={strokeColor}
strokeWidth={strokeWidth}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
</>
);
@@ -159,44 +166,44 @@ export const StackedBarChart = ({ data }: Files) => {
{/* <Tooltip /> */}
<XAxis
dataKey="name"
stroke="#fff"
stroke={CHECKS_COLOR}
fontSize={12}
axisLine={false}
/>
<Bar
dataKey="checks"
stackId="a"
label={{ position: 'top', fill: '#fff', fontSize: 12 }}
label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
radius={5}
shape={renderBarWithPartialBorder as any}
>
{data.map((_entry, index) => (
<Cell key={`cell-${index}`} fill={'#fff'} />
<Cell key={`cell-${index}`} fill={CHECKS_COLOR} />
))}
</Bar>
<Bar
dataKey="violations"
stackId="b"
label={{ position: 'top', fill: '#fff', fontSize: 12 }}
label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
radius={5}
shape={renderBarWithTopBorder as any}
>
{data.map((_entry, index) => (
<Cell key={`cell-${index}`} fill={'#f08c00'}/>
<Cell key={`cell-${index}`} fill={VIOLATIONS_COLOR} />
))}
</Bar>
</BarChart>
</div>
<div className="protection-stat-total-info">
<div
className="font-bold"
className={`font-bold text-[${CHECKS_COLOR}]`}
>
{t('check')}: 777
{t('check')}: {totalChecks}
</div>
<div
className="font-bold text-[#f08c00]"
className={`font-bold text-[${VIOLATIONS_COLOR}]`}
>
{t('violations')}: 777
{t('violations')}: {totalViolations}
</div>
</div>
</div>