kunthawat/ALwrity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ALwrity version 0.5.5

Browse Source
This commit is contained in:
ajaysi
2025-08-19 21:48:33 +05:30
parent 5f104bf427
commit 74e22b421a
97 changed files with 16770 additions and 5000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
frontend/src/components/shared/charts/AdvancedChartComponents.tsx Normal file
View File

@@ -0,0 +1,410 @@
import React from 'react';
import {
LineChart,
Line,
BarChart,
Bar,
PieChart,
Pie,
Cell,
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
RadarChart,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis,
Radar,
ComposedChart
} from 'recharts';
import { Box, Typography, Paper, useTheme } from '@mui/material';
// Color palette for charts
const CHART_COLORS = {
primary: '#667eea',
secondary: '#764ba2',
success: '#4caf50',
warning: '#ff9800',
error: '#f44336',
info: '#2196f3',
light: '#f5f5f5',
dark: '#333333'
};
// Performance Trend Chart Component
interface PerformanceTrendChartProps {
data: Array<{
date: string;
traffic_growth: number;
engagement_rate: number;
conversion_rate: number;
content_quality_score: number;
}>;
title?: string;
height?: number;
}
const PerformanceTrendChart: React.FC<PerformanceTrendChartProps> = ({
data,
title = 'Performance Trends',
height = 400
}) => {
const theme = useTheme();
return (
<Paper elevation={2} sx={{ p: 3, height }}>
<Typography variant="h6" gutterBottom sx={{ mb: 3 }}>
{title}
</Typography>
<ResponsiveContainer width="100%" height="85%">
<ComposedChart data={data}>
<CartesianGrid strokeDasharray="3 3" stroke={theme.palette.divider} />
<XAxis
dataKey="date"
stroke={theme.palette.text.secondary}
fontSize={12}
/>
<YAxis
stroke={theme.palette.text.secondary}
fontSize={12}
/>
<Tooltip
contentStyle={{
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 8
}}
/>
<Legend />
<Area
type="monotone"
dataKey="content_quality_score"
stackId="1"
stroke={CHART_COLORS.info}
fill={CHART_COLORS.info}
fillOpacity={0.3}
name="Content Quality Score"
/>
<Line
type="monotone"
dataKey="traffic_growth"
stroke={CHART_COLORS.primary}
strokeWidth={3}
dot={{ fill: CHART_COLORS.primary, strokeWidth: 2, r: 4 }}
name="Traffic Growth (%)"
/>
<Line
type="monotone"
dataKey="engagement_rate"
stroke={CHART_COLORS.success}
strokeWidth={3}
dot={{ fill: CHART_COLORS.success, strokeWidth: 2, r: 4 }}
name="Engagement Rate (%)"
/>
<Line
type="monotone"
dataKey="conversion_rate"
stroke={CHART_COLORS.warning}
strokeWidth={3}
dot={{ fill: CHART_COLORS.warning, strokeWidth: 2, r: 4 }}
name="Conversion Rate (%)"
/>
</ComposedChart>
</ResponsiveContainer>
</Paper>
);
};
// Quality Metrics Radar Chart Component
interface QualityMetricsRadarProps {
data: Array<{
metric: string;
score: number;
target: number;
}>;
title?: string;
height?: number;
}
const QualityMetricsRadar: React.FC<QualityMetricsRadarProps> = ({
data,
title = 'Quality Metrics Analysis',
height = 400
}) => {
const theme = useTheme();
return (
<Paper elevation={2} sx={{ p: 3, height }}>
<Typography variant="h6" gutterBottom sx={{ mb: 3 }}>
{title}
</Typography>
<ResponsiveContainer width="100%" height="85%">
<RadarChart data={data}>
<PolarGrid stroke={theme.palette.divider} />
<PolarAngleAxis
dataKey="metric"
tick={{ fill: theme.palette.text.primary, fontSize: 12 }}
/>
<PolarRadiusAxis
angle={90}
domain={[0, 100]}
tick={{ fill: theme.palette.text.secondary, fontSize: 10 }}
/>
<Radar
name="Current Score"
dataKey="score"
stroke={CHART_COLORS.primary}
fill={CHART_COLORS.primary}
fillOpacity={0.3}
/>
<Radar
name="Target Score"
dataKey="target"
stroke={CHART_COLORS.success}
fill={CHART_COLORS.success}
fillOpacity={0.1}
strokeDasharray="5 5"
/>
<Legend />
<Tooltip
contentStyle={{
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 8
}}
/>
</RadarChart>
</ResponsiveContainer>
</Paper>
);
};
// Performance Metrics Bar Chart Component
interface PerformanceMetricsBarProps {
data: Array<{
metric: string;
value: number;
target: number;
status: 'excellent' | 'good' | 'needs_attention';
}>;
title?: string;
height?: number;
}
const PerformanceMetricsBar: React.FC<PerformanceMetricsBarProps> = ({
data,
title = 'Performance Metrics',
height = 400
}) => {
const theme = useTheme();
const getStatusColor = (status: string) => {
switch (status) {
case 'excellent': return CHART_COLORS.success;
case 'good': return CHART_COLORS.warning;
case 'needs_attention': return CHART_COLORS.error;
default: return CHART_COLORS.primary;
}
};
return (
<Paper elevation={2} sx={{ p: 3, height }}>
<Typography variant="h6" gutterBottom sx={{ mb: 3 }}>
{title}
</Typography>
<ResponsiveContainer width="100%" height="85%">
<BarChart data={data} layout="horizontal">
<CartesianGrid strokeDasharray="3 3" stroke={theme.palette.divider} />
<XAxis
type="number"
stroke={theme.palette.text.secondary}
fontSize={12}
/>
<YAxis
type="category"
dataKey="metric"
stroke={theme.palette.text.secondary}
fontSize={12}
width={120}
/>
<Tooltip
contentStyle={{
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 8
}}
/>
<Legend />
<Bar
dataKey="value"
fill={CHART_COLORS.primary}
radius={[0, 4, 4, 0]}
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={getStatusColor(entry.status)}
/>
))}
</Bar>
<Bar
dataKey="target"
fill={CHART_COLORS.info}
fillOpacity={0.5}
radius={[0, 4, 4, 0]}
/>
</BarChart>
</ResponsiveContainer>
</Paper>
);
};
// Content Distribution Pie Chart Component
interface ContentDistributionPieProps {
data: Array<{
name: string;
value: number;
color?: string;
}>;
title?: string;
height?: number;
}
const ContentDistributionPie: React.FC<ContentDistributionPieProps> = ({
data,
title = 'Content Distribution',
height = 400
}) => {
const theme = useTheme();
const COLORS = [
CHART_COLORS.primary,
CHART_COLORS.secondary,
CHART_COLORS.success,
CHART_COLORS.warning,
CHART_COLORS.error,
CHART_COLORS.info
];
return (
<Paper elevation={2} sx={{ p: 3, height }}>
<Typography variant="h6" gutterBottom sx={{ mb: 3 }}>
{title}
</Typography>
<ResponsiveContainer width="100%" height="85%">
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
labelLine={false}
label={({ name, percent }) => `${name} ${((percent || 0) * 100).toFixed(0)}%`}
outerRadius={80}
fill="#8884d8"
dataKey="value"
>
{data.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={entry.color || COLORS[index % COLORS.length]}
/>
))}
</Pie>
<Tooltip
contentStyle={{
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 8
}}
/>
</PieChart>
</ResponsiveContainer>
</Paper>
);
};
// Real-time Performance Gauge Component
interface PerformanceGaugeProps {
value: number;
maxValue: number;
title: string;
color?: string;
size?: number;
}
const PerformanceGauge: React.FC<PerformanceGaugeProps> = ({
value,
maxValue,
title,
color = CHART_COLORS.primary,
size = 200
}) => {
const percentage = (value / maxValue) * 100;
const circumference = 2 * Math.PI * 80; // radius = 80
const strokeDasharray = circumference;
const strokeDashoffset = circumference - (percentage / 100) * circumference;
return (
<Box sx={{ textAlign: 'center', p: 2 }}>
<Typography variant="h6" gutterBottom>
{title}
</Typography>
<Box sx={{ position: 'relative', display: 'inline-block' }}>
<svg width={size} height={size} viewBox="0 0 200 200">
{/* Background circle */}
<circle
cx="100"
cy="100"
r="80"
fill="none"
stroke="#e0e0e0"
strokeWidth="12"
/>
{/* Progress circle */}
<circle
cx="100"
cy="100"
r="80"
fill="none"
stroke={color}
strokeWidth="12"
strokeDasharray={strokeDasharray}
strokeDashoffset={strokeDashoffset}
strokeLinecap="round"
transform="rotate(-90 100 100)"
/>
</svg>
<Box
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
textAlign: 'center'
}}
>
<Typography variant="h4" sx={{ fontWeight: 'bold', color }}>
{value}
</Typography>
<Typography variant="body2" color="text.secondary">
of {maxValue}
</Typography>
</Box>
</Box>
</Box>
);
};
// Export all components
export {
PerformanceTrendChart,
QualityMetricsRadar,
PerformanceMetricsBar,
ContentDistributionPie,
PerformanceGauge
};