mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-03 18:22:57 +00:00
Tomáš Dvořák
118 lines
4.2 KiB
Markdown
118 lines
4.2 KiB
Markdown
# Analytics Map Enhancements
|
|
|
|
## Issues Fixed
|
|
|
|
### 1. **Top Cut Off Issue**
|
|
- **Problem**: The map was cutting off the top portion of countries
|
|
- **Solution**:
|
|
- Adjusted `projectionConfig.scale` from 145 to 150
|
|
- Added `center: [0, 20]` to shift the view slightly down
|
|
- Increased default height from 320px to 400px for better visibility
|
|
- Added proper responsive sizing with `width: 800` and `style={{ width: '100%', height: 'auto' }}`
|
|
|
|
### 2. **Countries Not Clickable**
|
|
- **Problem**: Countries appeared interactive but didn't have click functionality
|
|
- **Solution**:
|
|
- Added `onCountryClick` prop to component interface
|
|
- Implemented click handler in Geography component
|
|
- Added proper cursor styling: `cursor: 'pointer'` for countries with data
|
|
- Countries without data show default cursor
|
|
|
|
### 3. **Country Border Visibility**
|
|
- **Problem**: Country borders were barely visible with thin white strokes
|
|
- **Solution**:
|
|
- Changed from white outline to visible gray borders: `#CBD5E0` (light mode) / `#4A5568` (dark mode)
|
|
- Increased stroke width from 0.5 to 0.7 for better visibility
|
|
- Added hover state with thicker borders (1.5) and club secondary color
|
|
- Borders now clearly define country boundaries
|
|
|
|
### 4. **Club Colors Integration**
|
|
- **Problem**: Map used generic blue colors instead of club branding
|
|
- **Solution**:
|
|
- Integrated `useClubTheme()` hook from ClubThemeContext
|
|
- Map gradient now uses club primary and accent colors
|
|
- Hover borders use club secondary color
|
|
- Color interpolation maintains accessibility while using brand colors
|
|
- Intelligently selects colors based on brightness to ensure visibility
|
|
|
|
## New Features
|
|
|
|
### Interactive Countries
|
|
- Countries with visitor data now have:
|
|
- Pointer cursor on hover
|
|
- Visible border highlight in club secondary color
|
|
- Brightened fill color on hover (+30 RGB values)
|
|
- Click functionality (optional callback)
|
|
|
|
### Enhanced Visual Feedback
|
|
- **Hover State**: Countries brighten and show thicker borders
|
|
- **Color Borders**: All countries have visible gray borders
|
|
- **Responsive Design**: Map scales properly to container width
|
|
- **Club Branding**: Uses club's primary, secondary, and accent colors
|
|
|
|
## Component Props
|
|
|
|
```typescript
|
|
type VisitorCountriesMapProps = {
|
|
title?: string; // Map title (default: "Mapa návštěvníků podle země")
|
|
metrics: CountryDatum[]; // Country visitor data
|
|
isLoading?: boolean; // Loading state
|
|
height?: number; // Map height in pixels (default: 400)
|
|
onCountryClick?: ( // Optional click handler
|
|
countryCode: string,
|
|
countryName: string,
|
|
value: number
|
|
) => void;
|
|
};
|
|
```
|
|
|
|
## Usage Example
|
|
|
|
```tsx
|
|
import VisitorCountriesMap from '../../components/admin/VisitorCountriesMap';
|
|
|
|
<VisitorCountriesMap
|
|
metrics={countryMapData}
|
|
isLoading={loading}
|
|
onCountryClick={(code, name, visits) => {
|
|
console.log(`${name} (${code}): ${visits} visits`);
|
|
// Handle country click - e.g., filter data by country
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## Technical Details
|
|
|
|
### Color System
|
|
- **Default Fill**: Light gray for countries without data
|
|
- **Start Fill**: Club primary color (or secondary if primary is too light)
|
|
- **End Fill**: Club accent color (or secondary in dark mode)
|
|
- **Borders**: Gray in default state, club secondary color on hover
|
|
|
|
### Responsiveness
|
|
- Map uses fixed internal width (800px) with percentage-based container width
|
|
- Maintains aspect ratio with `height: 'auto'`
|
|
- Overflow hidden prevents any layout issues
|
|
|
|
### Accessibility
|
|
- Proper cursor feedback for interactive elements
|
|
- High contrast borders for better visibility
|
|
- Color system respects dark/light mode
|
|
- Hover states provide clear visual feedback
|
|
|
|
## Files Modified
|
|
|
|
- `frontend/src/components/admin/VisitorCountriesMap.tsx` - Main map component enhancements
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Map displays without top being cut off
|
|
- [ ] Countries have visible borders
|
|
- [ ] Hover changes border color and thickness
|
|
- [ ] Click functionality works on countries with data
|
|
- [ ] Club colors are applied to the gradient
|
|
- [ ] Map is responsive to container width
|
|
- [ ] Tooltip shows on hover
|
|
- [ ] Legend displays correct color gradient
|
|
- [ ] Works in both light and dark mode
|