gitea_admin/krishna_sales
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added chart for so

Browse Source
This commit is contained in:
suryac 2026-08-18 16:10:08 +05:30
parent 4a821d5e02
commit 513e833ead
1 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/reusable/AnalyticsChart.tsx
View File

@ -91,12 +91,22 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
chartType = 3; // Pie
} else if (lowerKey.includes('route')) {
chartType = 4; // Donut
} else if (lowerKey.includes('calls')) {
chartType = 6; // Horizontal Bar
} else if (lowerKey.includes('brand') || lowerKey.includes('product')) {
chartType = 5; // Table
} else if (lowerKey.includes('monthly') || lowerKey.includes('yearly')) {
chartType = 0; // Bar
}
if (chartType === 6) {
finalData.sort((a, b) => {
const aVal = hasSeries ? a[seriesKeys[0]] || 0 : a.value || 0;
const bVal = hasSeries ? b[seriesKeys[0]] || 0 : b.value || 0;
return aVal - bVal;
});
}
// Determine if it should span full width
const isFullWidth = (gridCols === 1) || (!gridCols && charts.length <= 2) || hasSeries || lowerKey.includes('monthly') || lowerKey.includes('yearly') || finalData.length > 8;
@ -104,37 +114,65 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
const minChartWidth = 100;
const renderChartContent = () => {
const renderChartContent = (isHorizontal = false) => {
return (
<>
<defs>
<linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2="0" y2="1">
<linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2={isHorizontal ? "1" : "0"} y2={isHorizontal ? "0" : "1"}>
<stop offset="0%" stopColor="#1F4D36" stopOpacity={1} />
<stop offset="100%" stopColor="#1F4D36" stopOpacity={0.6} />
</linearGradient>
<linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2="0" y2="1">
<linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2={isHorizontal ? "1" : "0"} y2={isHorizontal ? "0" : "1"}>
<stop offset="0%" stopColor="#3B82F6" stopOpacity={1} />
<stop offset="100%" stopColor="#3B82F6" stopOpacity={0.6} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
<CartesianGrid strokeDasharray="3 3" vertical={!isHorizontal} horizontal={isHorizontal} stroke="#E2E8F0" />
{isHorizontal ? (
<>
<XAxis type="number" hide />
<YAxis
dataKey="dimension"
type="category"
axisLine={false}
tickLine={false}
tick={{ fontSize: 12, fill: '#64748B' }}
width={85}
interval={0}
tickFormatter={(text) => {
if (typeof text === 'string' && text.length > 14) {
return `${text.substring(0, 14)}...`;
}
return text;
}}
/>
</>
) : (
<>
<XAxis
dataKey="dimension"
axisLine={false}
tickLine={false}
tick={{ fontSize: 11, fill: '#64748B', angle: -45, textAnchor: 'end' }}
tick={{ fontSize: 11, fill: '#64748B', textAnchor: 'middle' }}
interval={0}
dy={10}
dx={-5}
height={90}
height={40}
tickFormatter={(text) => {
if (typeof text === 'string' && text.length > 14) {
return `${text.substring(0, 14)}...`;
}
return text;
}}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fontSize: 12, fill: '#64748B' }}
allowDecimals={false}
width={40}
width={70}
/>
</>
)}
<Tooltip
cursor={{ fill: '#F8FAFC', stroke: '#E2E8F0', strokeWidth: 1, strokeDasharray: '3 3' }}
contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
@ -179,7 +217,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
dataKey={key}
name={hasSeries ? key : "Value"}
fill={barFill}
radius={[4, 4, 0, 0]}
radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
maxBarSize={40}
/>
);
@ -245,16 +283,20 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
</Pie>
</PieChart>
) : chartType === 1 ? (
<LineChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent()}
<LineChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent(false)}
</LineChart>
) : chartType === 2 ? (
<AreaChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent()}
<AreaChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent(false)}
</AreaChart>
) : chartType === 6 ? (
<BarChart layout="vertical" data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent(true)}
</BarChart>
) : (
<BarChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent()}
<BarChart data={finalData} margin={{ top: 10, right: 30, left: 10, bottom: 5 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent(false)}
</BarChart>
)}
</ResponsiveContainer>