blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add off-white theme mode
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-26 11:11:36 -03:00
parent 789a9304a0
commit 3d25bc5179
10 changed files with 174 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/pages/Dashboard.tsx
View File

@@ -32,6 +32,10 @@ const SELLER_COLORS = [
const BAR_FILL_OPACITY = 0.5;
const BAR_STROKE_OPACITY = 0.85;
const PIE_FILL_OPACITY = 0.68;
const CHART_GRID_COLOR = 'var(--chart-grid)';
const CHART_AXIS_COLOR = 'var(--chart-axis)';
const CHART_CURSOR_COLOR = 'var(--chart-cursor)';
const CHART_LABEL_COLOR = 'var(--chart-label)';
const getBarGlowStyle = (color: string) => ({
filter: `drop-shadow(0 0 3px ${color}40)`
@@ -67,14 +71,17 @@ type CustomTooltipProps = {
const CustomTooltip = ({ active, payload, label, isCurrency, valueLabel }: CustomTooltipProps) => {
if (active && payload && payload.length) {
const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
const color = payload[0].payload?.fill || payload[0].color || 'var(--chart-detail-bar)';
const displayLabel = label || payload[0].name;
const value = isCurrency ? formatCurrency(payload[0].value) : payload[0].value;
const displayValueLabel = valueLabel || (isCurrency ? 'Receita:' : 'Vendas:');
return (
<div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
<div
className="rounded-xl border p-3 shadow-lg"
style={{ backgroundColor: 'var(--chart-tooltip-bg)', borderColor: 'var(--chart-tooltip-border)' }}
>
<p className="font-bold mb-1" style={{ color }}>{displayLabel}</p>
<p className="text-[#ededed] m-0">{displayValueLabel} {value}</p>
<p className="m-0" style={{ color: 'var(--chart-tooltip-text)' }}>{displayValueLabel} {value}</p>
</div>
);
}
@@ -256,19 +263,19 @@ const Dashboard = () => {
{revenueBySellerChartData.length ? (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={revenueBySellerChartData} layout="vertical" margin={{ top: 5, right: 88, left: 8, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" horizontal={false} />
<XAxis type="number" stroke="#888888" fontSize={11} tickLine={false} axisLine={false} tickFormatter={(value) => `${Number(value) / 1000}k`} />
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} horizontal={false} />
<XAxis type="number" stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} tickFormatter={(value) => `${Number(value) / 1000}k`} />
<YAxis
dataKey="name"
type="category"
width={150}
stroke="#888888"
stroke={CHART_AXIS_COLOR}
fontSize={11}
tickLine={false}
axisLine={false}
tickFormatter={(value) => truncateLabel(String(value))}
/>
<Tooltip content={<CustomTooltip isCurrency valueLabel="Receita:" />} cursor={{ fill: '#222222' }} />
<Tooltip content={<CustomTooltip isCurrency valueLabel="Receita:" />} cursor={{ fill: CHART_CURSOR_COLOR }} />
<Bar dataKey="value" radius={[0, 4, 4, 0]} isAnimationActive={false}>
{revenueBySellerChartData.map((entry) => (
<Cell
@@ -281,7 +288,7 @@ const Dashboard = () => {
style={getBarGlowStyle(entry.fill)}
/>
))}
<LabelList dataKey="value" position="right" fill="#ededed" fontSize={11} fontWeight={700} formatter={(value) => formatCurrency(Number(value) || 0)} />
<LabelList dataKey="value" position="right" fill={CHART_LABEL_COLOR} fontSize={11} fontWeight={700} formatter={(value) => formatCurrency(Number(value) || 0)} />
</Bar>
</BarChart>
</ResponsiveContainer>
@@ -297,19 +304,19 @@ const Dashboard = () => {
{ticketBySellerChartData.length ? (
<ResponsiveContainer width="100%" height="100%">
<BarChart data={ticketBySellerChartData} layout="vertical" margin={{ top: 5, right: 88, left: 8, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" horizontal={false} />
<XAxis type="number" stroke="#888888" fontSize={11} tickLine={false} axisLine={false} tickFormatter={(value) => `${Number(value) / 1000}k`} />
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} horizontal={false} />
<XAxis type="number" stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} tickFormatter={(value) => `${Number(value) / 1000}k`} />
<YAxis
dataKey="name"
type="category"
width={150}
stroke="#888888"
stroke={CHART_AXIS_COLOR}
fontSize={11}
tickLine={false}
axisLine={false}
tickFormatter={(value) => truncateLabel(String(value))}
/>
<Tooltip content={<CustomTooltip isCurrency valueLabel="Ticket médio:" />} cursor={{ fill: '#222222' }} />
<Tooltip content={<CustomTooltip isCurrency valueLabel="Ticket médio:" />} cursor={{ fill: CHART_CURSOR_COLOR }} />
<Bar dataKey="value" radius={[0, 4, 4, 0]} isAnimationActive={false}>
{ticketBySellerChartData.map((entry) => (
<Cell
@@ -322,7 +329,7 @@ const Dashboard = () => {
style={getBarGlowStyle(entry.fill)}
/>
))}
<LabelList dataKey="value" position="right" fill="#ededed" fontSize={11} fontWeight={700} formatter={(value) => formatCurrency(Number(value) || 0)} />
<LabelList dataKey="value" position="right" fill={CHART_LABEL_COLOR} fontSize={11} fontWeight={700} formatter={(value) => formatCurrency(Number(value) || 0)} />
</Bar>
</BarChart>
</ResponsiveContainer>
@@ -372,13 +379,13 @@ const Dashboard = () => {
<div className="h-80 w-full flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
<XAxis
dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
dataKey="name" stroke={CHART_AXIS_COLOR} fontSize={10} tickLine={false} axisLine={false}
tick={false}
/>
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
<YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
<Bar dataKey="value" radius={[4, 4, 0, 0]} onClick={(data) => { if(data?.payload?.id) navigate(`/products/${data.payload.id}`) }} style={{ cursor: 'pointer' }}>
{salesByProduct.map((entry) => (
<Cell
@@ -423,7 +430,7 @@ const Dashboard = () => {
/>
))}
</Pie>
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: CHART_CURSOR_COLOR }} />
</PieChart>
</ResponsiveContainer>
</div>