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

fix stacked bar shar diagram

Browse Source
This commit is contained in:
smanylov
2025-12-17 12:50:01 +07:00
parent c42d5eae27
commit 70ebf06663
5 changed files with 398 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/StackedBarChart.tsx
+57 -77
View File
@@ -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 (
<>
{/* Основной прямоугольник без обводки */}
{/* Основной прямоугольник с закругленными углами */}
<rect
x={x}
y={y}
width={width}
height={height}
fill={fill}
rx={borderRadius}
ry={borderRadius}
/>
{/* Левая граница */}
{/* Левая граница (центральная часть, без закруглений) */}
<line
x1={x}
y1={y}
y1={y + borderRadius}
x2={x}
y2={y + height}
stroke={strokeColor}
strokeWidth={strokeWidth}
y2={y + height - borderRadius}
/>
{/* Правая граница */}
{/* Правая граница (центральная часть, без закруглений) */}
<line
x1={x + width}
y1={y}
y1={y + borderRadius}
x2={x + width}
y2={y + height}
stroke={strokeColor}
strokeWidth={strokeWidth}
y2={y + height - borderRadius}
/>
{/* Нижняя граница */}
{/* Нижняя граница (прямая часть между закруглениями) */}
<line
x1={x}
x1={x + borderRadius}
y1={y + height}
x2={x + width}
x2={x + width - borderRadius}
y2={y + height}
stroke={strokeColor}
strokeWidth={strokeWidth}
/>
{/* Верхняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
y1={y}
x2={x + width - borderRadius}
y2={y}
/>
</>
);
@@ -90,82 +84,66 @@ export const StackedBarChart = ({ data }: Files) => {
return (
<>
{/* Основной прямоугольник с закруглением ТОЛЬКО ВЕРХНИХ углов */}
<path
d={`
M ${x + borderRadius} ${y}
L ${x + width - borderRadius} ${y}
Q ${x + width} ${y} ${x + width} ${y + borderRadius}
L ${x + width} ${y + height}
L ${x} ${y + height}
L ${x} ${y + borderRadius}
Q ${x} ${y} ${x + borderRadius} ${y}
Z
`}
{/* Основной прямоугольник с закругленными углами */}
<rect
x={x}
y={y}
width={width}
height={height}
fill={fill}
rx={borderRadius}
ry={borderRadius}
/>
{/* Верхняя граница */}
<path
d={`
M ${x + borderRadius} ${y}
L ${x + width - borderRadius} ${y}
`}
stroke={strokeColor}
strokeWidth={strokeWidth}
fill="none"
/>
{/* Левая граница */}
{/* Левая граница (центральная часть, без закруглений) */}
<line
x1={x}
y1={y + borderRadius}
x2={x}
y2={y + height}
y2={y + height - borderRadius}
stroke={strokeColor}
strokeWidth={strokeWidth}
/>
{/* Правая граница */}
{/* Правая граница (центральная часть, без закруглений) */}
<line
x1={x + width}
y1={y + borderRadius}
x2={x + width}
y2={y + height - borderRadius}
stroke={strokeColor}
strokeWidth={strokeWidth}
/>
{/* Нижняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
y1={y + height}
x2={x + width - borderRadius}
y2={y + height}
stroke={strokeColor}
strokeWidth={strokeWidth}
/>
{/* Левый верхний закругленный угол */}
<path
d={`
M ${x} ${y + borderRadius}
Q ${x} ${y} ${x + borderRadius} ${y}
`}
{/* Верхняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
y1={y}
x2={x + width - borderRadius}
y2={y}
stroke={strokeColor}
strokeWidth={strokeWidth}
fill="none"
/>
{/* Правый верхний закругленный угол */}
<path
d={`
M ${x + width - borderRadius} ${y}
Q ${x + width} ${y} ${x + width} ${y + borderRadius}
`}
stroke={strokeColor}
strokeWidth={strokeWidth}
fill="none"
/>
</>
) as any;
);
};
return (
<BarChart
style={{ width: '100%', maxWidth: '400px', maxHeight: '210px', aspectRatio: 1.618 }}
style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
responsive
data={editedData}
data={data}
barCategoryGap={15}
margin={{
top: 20,
right: 0,
@@ -184,20 +162,22 @@ export const StackedBarChart = ({ data }: Files) => {
dataKey="checks"
stackId="a"
label={{ position: 'top', fill: '#fff', fontSize: 12 }}
radius={5}
shape={renderBarWithPartialBorder as any}
>
{data.map((_entry, index) => (
<Cell key={`cell-${index}`} fill={secondColors[index % 20]} />
<Cell key={`cell-${index}`} fill={'#fff'} />
))}
</Bar>
<Bar
dataKey="violations"
stackId="a"
stackId="b"
label={{ position: 'top', fill: '#fff', fontSize: 12 }}
radius={5}
shape={renderBarWithTopBorder as any}
>
{data.map((_entry, index) => (
<Cell key={`cell-${index}`} fill={mainColors[index % 20]} />
<Cell key={`cell-${index}`} fill={'#f08c00'} />
))}
</Bar>
</BarChart>