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

fix: bar graph fixed

Browse Source
This commit is contained in:
suryac 2026-08-18 12:38:35 +05:30
parent 819b43bd77
commit 060ec00d8d
2 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/dv/StoreDetail.tsx
View File

@ -187,8 +187,8 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
<div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
{/* Image Section */} {/* Image Section */}
{imageUrl ? ( {imageUrl ? (
<div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100"> <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100 shrink-0">
<img src={imageUrl} alt={String(businessName)} className="w-full h-full object-cover" /> <img src={imageUrl} alt={String(businessName)} className="absolute inset-0 w-full h-full object-cover" />
</div> </div>
) : ( ) : (
<div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto flex items-center justify-center bg-slate-100 border-r border-slate-200"> <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto flex items-center justify-center bg-slate-100 border-r border-slate-200">
@ -321,32 +321,32 @@ export function StoreDetail({ instanceId, onBack, onEdit, refreshKey }: StoreDet
{/* Order Potential Card */} {/* Order Potential Card */}
{Array.isArray(potential) && potential.length > 0 && ( {Array.isArray(potential) && potential.length > 0 && (
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm"> <Card pad={false} className="overflow-hidden border-emerald-200 shadow-sm">
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]"> <div className="flex items-center gap-2 p-4 border-b border-emerald-100 bg-emerald-50">
<FileText size={16} className="text-slate-400" /> <FileText size={16} className="text-emerald-600" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3> <h3 className="text-xs font-bold text-emerald-800 uppercase tracking-wider m-0">Order Potential</h3>
</div> </div>
<div className="bg-[var(--tiles-card-bg)]"> <div className="bg-[var(--tiles-card-bg)]">
<table className="w-full text-sm text-left"> <table className="w-full text-sm text-left">
<thead className="bg-slate-50 border-b border-slate-100"> <thead className="bg-emerald-50 border-b border-emerald-100">
<tr> <tr>
<th className="py-3 px-5 font-bold text-slate-500 text-xs uppercase tracking-wider">Product Category</th> <th className="py-3 px-5 font-bold text-emerald-800 text-xs uppercase tracking-wider">Product Category</th>
<th className="py-3 px-5 font-bold text-slate-500 text-xs uppercase tracking-wider text-right">Quantity</th> <th className="py-3 px-5 font-bold text-emerald-800 text-xs uppercase tracking-wider text-right">Quantity</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{potential.map((p: any, idx: number) => { {potential.map((p: any, idx: number) => {
if (!p.product_category && !p.quantity) return null; if (!p.product_category && !p.quantity) return null;
return ( return (
<tr key={idx} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/50"> <tr key={idx} className="border-b border-emerald-50 last:border-0 hover:bg-emerald-50/50">
<td className="py-3 px-5 font-semibold text-slate-900">{p.product_category ? String(p.product_category) : '-'}</td> <td className="py-3 px-5 font-semibold text-emerald-900">{p.product_category ? String(p.product_category) : '-'}</td>
<td className="py-3 px-5 text-slate-700 text-right">{p.quantity ? String(p.quantity) : '0'}</td> <td className="py-3 px-5 text-emerald-700 text-right">{p.quantity ? String(p.quantity) : '0'}</td>
</tr> </tr>
); );
})} })}
<tr className="bg-slate-50 border-t border-slate-200 font-bold"> <tr className="bg-emerald-50 border-t border-emerald-200 font-bold">
<td className="py-3 px-5 text-slate-900">Total</td> <td className="py-3 px-5 text-emerald-900">Total</td>
<td className="py-3 px-5 text-slate-900 text-right">{totalPotential}</td> <td className="py-3 px-5 text-emerald-900 text-right">{totalPotential}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

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

@ -126,20 +126,21 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
interval={0} interval={0}
dy={10} dy={10}
dx={-5} dx={-5}
height={70} height={90}
/> />
<YAxis <YAxis
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
tick={{ fontSize: 12, fill: '#64748B' }} tick={{ fontSize: 12, fill: '#64748B' }}
allowDecimals={false} allowDecimals={false}
width={80} width={40}
/> />
<Tooltip <Tooltip
cursor={{ fill: '#F8FAFC', stroke: '#E2E8F0', strokeWidth: 1, strokeDasharray: '3 3' }} 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' }} contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
labelStyle={{ fontWeight: 'bold', color: '#0F172A', marginBottom: '4px' }} labelStyle={{ fontWeight: 'bold', color: '#0F172A', marginBottom: '4px' }}
wrapperStyle={{ zIndex: 1000 }} wrapperStyle={{ zIndex: 1000 }}
allowEscapeViewBox={{ x: true, y: true }}
/> />
{hasSeries && <Legend wrapperStyle={{ paddingTop: '20px' }} />} {hasSeries && <Legend wrapperStyle={{ paddingTop: '20px' }} />}
{seriesKeys.map((key, i) => { {seriesKeys.map((key, i) => {
@ -189,7 +190,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
}; };
return ( return (
<Card key={chart.chart_uid || idx} title={title} className={`shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)] ${isFullWidth ? fullSpanClass : ''}`}> <Card key={chart.chart_uid || idx} title={title} className={`shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)] ${isFullWidth ? fullSpanClass : ''} !overflow-visible`}>
<div className={`h-[320px] w-full mt-4 ${minChartWidth > 100 ? 'overflow-x-auto scrollbar-slim' : ''}`}> <div className={`h-[320px] w-full mt-4 ${minChartWidth > 100 ? 'overflow-x-auto scrollbar-slim' : ''}`}>
{chartType === 5 ? ( {chartType === 5 ? (
<div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim"> <div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim">
@ -215,7 +216,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
</table> </table>
</div> </div>
) : ( ) : (
<div style={{ minWidth: minChartWidth > 100 ? `${minChartWidth}px` : '100%', height: '100%' }}> <div style={{ width: '100%', minWidth: minChartWidth > 100 ? `${minChartWidth}px` : '100%', height: '100%' }}>
<ResponsiveContainer width="100%" height="100%" className="focus:outline-none [&_.recharts-wrapper]:outline-none [&_.recharts-surface]:outline-none" style={{ outline: 'none' }}> <ResponsiveContainer width="100%" height="100%" className="focus:outline-none [&_.recharts-wrapper]:outline-none [&_.recharts-surface]:outline-none" style={{ outline: 'none' }}>
{chartType === 3 || chartType === 4 ? ( {chartType === 3 || chartType === 4 ? (
<PieChart margin={{ top: 10, right: 10, left: 10, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}> <PieChart margin={{ top: 10, right: 10, left: 10, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
@ -223,6 +224,7 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }} contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
itemStyle={{ color: '#0F172A', fontWeight: '500' }} itemStyle={{ color: '#0F172A', fontWeight: '500' }}
wrapperStyle={{ zIndex: 1000 }} wrapperStyle={{ zIndex: 1000 }}
allowEscapeViewBox={{ x: true, y: true }}
/> />
<Legend wrapperStyle={{ paddingTop: '20px' }} /> <Legend wrapperStyle={{ paddingTop: '20px' }} />
<Pie <Pie
@ -243,15 +245,15 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
</Pie> </Pie>
</PieChart> </PieChart>
) : chartType === 1 ? ( ) : chartType === 1 ? (
<LineChart data={finalData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}> <LineChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent()} {renderChartContent()}
</LineChart> </LineChart>
) : chartType === 2 ? ( ) : chartType === 2 ? (
<AreaChart data={finalData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}> <AreaChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent()} {renderChartContent()}
</AreaChart> </AreaChart>
) : ( ) : (
<BarChart data={finalData} margin={{ top: 10, right: 10, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}> <BarChart data={finalData} margin={{ top: 10, right: 30, left: 0, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
{renderChartContent()} {renderChartContent()}
</BarChart> </BarChart>
)} )}