Consistency fixes:
- Extract getThisWeekRange/getThisMonthRange to shared lib/utils/dateRanges.ts
(removed 4 identical copy-pasted definitions)
- Add error boundaries for behavior, cdn, search, pagespeed pages
(4 new error.tsx files — previously fell through to generic parent error)
- Add "View setup guide" CTA to empty states on journeys and behavior pages
(previously showed text with no actionable button)
- Fix non-lazy useState initializer in funnel detail page
- Fix Bot & Spam settings header from text-xl to text-2xl (matches all other sections)
- Add useMinimumLoading to PageSpeed skeleton (consistent with all other pages)
Cleanup:
- Remove 438 redundant dark: class prefixes (app is dark-mode only)
text-neutral-500 dark:text-neutral-400 → text-neutral-400 (206 occurrences)
text-neutral-900 dark:text-white → text-white (232 occurrences)
- Remove dead @stripe/react-stripe-js and @stripe/stripe-js packages
(billing migrated to Polar, no code imports Stripe)
- Remove duplicate motion package (framer-motion is the one actually used)
Backend returns timestamps already bucketed in site timezone but as
UTC values. Using getUTCHours/getUTCMinutes prevents the browser
from adding its local timezone offset.
Added formatLabel prop to XAxis component. When viewing Today (hour
or minute interval), X-axis shows "2:00 PM" instead of "Mar 22".
Tooltip shows time for intra-day, date for multi-day.
Integrated 21st.dev AreaChart component with animated crosshair,
spring-based tooltip, and date ticker. Uses brand orange for the
line/fill with dark-only CSS variables.
Numbers smoothly count up/down when switching date ranges,
applying filters, or as real-time visitor count changes.
Uses framer-motion useSpring for natural spring physics.
All dates now use day-first ordering (14 Mar 2025) and 24-hour time
(14:30) via a single formatDate.ts module, replacing scattered inline
toLocaleDateString/toLocaleTimeString calls across 12 files.
Swap the old dot grid overlay inside the Recharts SVG for a GridPattern
component rendered behind the chart card. Uses a vertical mask gradient
to fade edges for a cleaner look.
Add LRU cache provider (200 entries) to prevent unbounded SWR memory
growth. Clean up stale PKCE localStorage keys on app init. Cap chart
annotations to 20 visible reference lines with overflow indicator.
The setInterval that drives the "Live · Xs ago" display was at the page level,
forcing all 10+ dashboard components to re-render every second. Now it lives
inside Chart — the only consumer — so the rest of the dashboard is unaffected.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Chart: wrap chartData (Date formatting on every data point) and
metricsWithTrends in useMemo — these ran on every render.
Globe: memoize marker computation (Math.max + filter + map on every render).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Swap the main site dashboard chart from a bar chart to a line chart
using 21st.dev's line-charts-6 component with dot grid background,
glow shadow, and animated active dots. Add Badge trend indicators
on metric cards using Phosphor icons. All existing features preserved
(annotations, comparison, export, live indicator, interval controls).
New UI primitives: line-charts-6, badge-2, card, button-1, avatar.
Added shadcn-compatible CSS variables and Tailwind color mappings.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ChartContainer: replace stroke-border/fill-muted (ShadCN tokens we
don't have) with var(--chart-grid) so recharts CSS overrides actually work
- Dashboard chart: remove YAxis (ShadCN interactive bar has none)
- Remove unused formatAxisValue, formatAxisDuration, tick calculations
- Exact ShadCN structure: CartesianGrid vertical={false}, XAxis with
tickMargin/minTickGap, single Bar with fill var(--color-{metric})
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove cursor={false} to enable hover highlight
- Remove rounded bar corners for flat ShadCN look
- Remove explicit stroke/color on grid and axes (inherit from CSS)
- Use var(--color-{metric}) for bar fill
- Reduce chart height to 250px (ShadCN default)
- Simplify bar props to match ShadCN minimal pattern
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ShadCN-style bar chart with rounded corners, solid fill,
clean grid, and translucent comparison bars.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent
primitives ported from ShadCN's chart pattern. Refactor all 3 chart
locations (dashboard, funnels, uptime) to use CSS variable-driven
theming instead of duplicated CHART_COLORS_LIGHT/DARK objects.
- Add --chart-1 through --chart-5, --chart-grid, --chart-axis CSS vars
- Remove duplicated color objects from 3 files (-223 lines)
- Add accessibilityLayer to all charts
- Rounded bar corners on funnel chart
- Tooltips use Tailwind dark classes instead of imperative style props
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Custom calendar (DatePicker) instead of native date input
- Custom dropdown (Select) instead of native select
- EU date format (DD/MM/YYYY) in tooltips and form
- Right-click context menu on chart to add annotations
- Optional time field (HH:MM) for precise timestamps
- Escape key to dismiss, loading state on save
- Bump @ciphera-net/ui to 0.0.95
- Remove sparklines from stat cards (redundant with main chart)
- Widen Y-axis to 40px, add allowDecimals=false for count metrics
- Move avg label from inside chart to toolbar badge
- Lighter grid lines, simpler gradient, thinner strokes
- Streamline toolbar: inline controls, icon-only export, no trailing separator
- Move live indicator from absolute to proper flow element
- Cleaner empty states without dashed border boxes
- Extract TrendBadge component, add tabular-nums for aligned numbers
Fix formatAxisValue to show 1 decimal place for floats instead of raw
floating-point numbers. Update changelog with all UI improvements from
this session.
