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

24
src/pages/ProductDetails.tsx
View File

@@ -6,6 +6,11 @@ import DateRangePicker from '../components/DateRangePicker';
import type { DateRange, ProductDetailsAnalytics } from '../types';
import { fetchProductDetailsAnalytics } from '../dataService';
const CHART_GRID_COLOR = 'var(--chart-grid)';
const CHART_AXIS_COLOR = 'var(--chart-axis)';
const CHART_CURSOR_COLOR = 'var(--chart-cursor)';
const CHART_DETAIL_BAR_COLOR = 'var(--chart-detail-bar)';
type CustomTooltipProps = {
active?: boolean;
payload?: Array<{ value: number }>;
@@ -15,9 +20,12 @@ type CustomTooltipProps = {
const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
if (active && payload && payload.length) {
return (
<div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
<p className="font-bold mb-1" style={{ color: '#9ECAE1' }}>{label}</p>
<p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p>
<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: CHART_DETAIL_BAR_COLOR }}>{label}</p>
<p className="m-0" style={{ color: 'var(--chart-tooltip-text)' }}>Vendas: {payload[0].value}</p>
</div>
);
}
@@ -135,17 +143,17 @@ const ProductDetails = () => {
<div className="h-[400px] w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
<XAxis
dataKey="date" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
dataKey="date" stroke={CHART_AXIS_COLOR} fontSize={10} tickLine={false} axisLine={false}
interval={0}
angle={-45}
textAnchor="end"
height={80}
/>
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
<Bar dataKey="value" fill="#9ECAE1" radius={[4, 4, 0, 0]} />
<YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
<Bar dataKey="value" fill={CHART_DETAIL_BAR_COLOR} radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>