Skip to content

Commit aa3ca11

Browse files
EnderKaranEnderKaran
committed
kısmi analytics map sorunu çözüldü
1 parent 85a2a24 commit aa3ca11

File tree

3 files changed

+207
-205
lines changed

3 files changed

+207
-205
lines changed

‎src/components/Charts/DemographicsMap.jsx‎

Lines changed: 99 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -9,110 +9,113 @@ const geoUrl = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";
99

1010
// Sahte (mock) veri
1111
const demographicsData = [
12-
{ countryCode: 'US', countryName: 'USA', customerCount: '2,379', percentage: 79 },
13-
{ countryCode: 'FR', countryName: 'France', customerCount: '589', percentage: 23 },
12+
  { countryCode: 'US', countryName: 'USA', customerCount: '2,379', percentage: 79 },
13+
  { countryCode: 'FR', countryName: 'France', customerCount: '589', percentage: 23 },
1414
];
1515

1616
const markers = [
17-
{ name: "USA", coordinates: [-100.0, 39.0] },
18-
{ name: "France", coordinates: [2.3522, 48.8566] },
19-
{ name: "India", coordinates: [78.9629, 20.5937] },
20-
{ name: "Australia", coordinates: [133.7751, -25.2744] },
17+
    { name: "USA", coordinates: [-100.0, 39.0] },
18+
    { name: "France", coordinates: [2.3522, 48.8566] },
19+
    { name: "India", coordinates: [78.9629, 20.5937] },
20+
    { name: "Australia", coordinates: [133.7751, -25.2744] },
2121
];
2222

2323
function DemographicsMap({ isDark }) {
2424

25-
return (
26-
<div className={`p-6 rounded-xl border shadow-sm transition-colors duration-300 ${
27-
isDark
28-
? 'bg-slate-800 border-slate-700/50'
29-
: 'bg-white border-slate-200/50'
30-
}`}>
31-
{/* Kart Başlığı */}
32-
<div className="flex items-center justify-between mb-4">
33-
<div>
34-
<h3 className={`font-bold ${isDark ? 'text-white' : 'text-slate-800'}`}>Customers Demographic</h3>
35-
<p className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Number of customer based on country</p>
36-
</div>
37-
<button className={isDark ? 'text-slate-400 hover:text-slate-200' : 'text-slate-500 hover:text-slate-700'}>
38-
<MoreVertical size={20} />
39-
</button>
40-
</div>
25+
  return (
26+
// DÜZELTME 1: Ana kart div'i flex-col ve sabit yükseklikte (h-[500px]) yapıldı
27+
    <div className={`p-6 rounded-xl border shadow-sm transition-colors duration-300 flex flex-col h-[500px] ${
28+
        isDark
29+
            ? 'bg-slate-800 border-slate-700/50'
30+
            : 'bg-white border-slate-200/50'
31+
    }`}>
32+
      {/* Kart Başlığı (flex-shrink-0 ile boyutu sabitlendi) */}
33+
      <div className="flex items-center justify-between flex-shrink-0 mb-4">
34+
        <div>
35+
          <h3 className={`font-bold ${isDark ? 'text-white' : 'text-slate-800'}`}>Customers Demographic</h3>
36+
          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>Number of customer based on country</p>
37+
        </div>
38+
        <button className={isDark ? 'text-slate-400 hover:text-slate-200' : 'text-slate-500 hover:text-slate-700'}>
39+
            <MoreVertical size={20} />
40+
        </button>
41+
      </div>
4142

42-
{/* Harita Konteyneri */}
43-
<div className='mb-6 h-72 w-full' data-tooltip-id="country-tooltip">
44-
<ComposableMap
45-
projectionConfig={{
46-
scale: 160,
47-
center: [15, 20]
48-
}}
49-
>
50-
<Geographies geography={geoUrl}>
51-
{({ geographies }) =>
52-
geographies.map((geo) => (
53-
<Geography
54-
key={geo.rsmKey}
55-
geography={geo}
56-
57-
data-tooltip-content={geo.properties.name}
58-
style={{
59-
default: { fill: isDark ? "#475569" : "#E2E8F0", outline: "none" },
60-
hover: { fill: isDark ? "#6366F1" : "#A5B4FC", outline: "none" },
61-
pressed: { fill: isDark ? "#4F46E5" : "#818CF8", outline: "none" },
62-
}}
63-
/>
64-
))
65-
}
66-
</Geographies>
67-
{markers.map(({ name, coordinates }) => (
68-
<Marker key={name} coordinates={coordinates}>
69-
<circle r={4} fill="#6366F1" stroke={isDark ? '#1E293B' : '#FFF'} strokeWidth={1.5} />
70-
</Marker>
71-
))}
72-
</ComposableMap>
73-
74-
<ReactTooltip
75-
id="country-tooltip"
76-
variant={isDark ? 'light' : 'dark'}
77-
style={{
78-
borderRadius: '6px',
79-
padding: '4px 10px',
80-
fontSize: '12px',
81-
zIndex: 999 // Her zaman en üstte görünmesini sağlar
82-
}}
83-
/>
84-
</div>
43+
      {/* DÜZELTME 2: Harita Konteyneri (h-72 kaldırıldı, flex-1 eklendi) */}
44+
      <div className='flex-1 w-full mb-6' data-tooltip-id="country-tooltip">
45+
        <ComposableMap
46+
// DÜZELTME 3: Haritanın kapsayıcıyı %100 doldurması için style eklendi
47+
style={{ width: '100%', height: '100%' }}
48+
            projectionConfig={{
49+
                scale: 160,
50+
                center: [15, 20]
51+
            }}
52+
        >
53+
          <Geographies geography={geoUrl}>
54+
            {({ geographies }) =>
55+
              geographies.map((geo) => (
56+
                <Geography
57+
                  key={geo.rsmKey}
58+
                  geography={geo}
59+
                 
60+
                  data-tooltip-content={geo.properties.name}
61+
                  style={{
62+
                    default: { fill: isDark ? "#475569" : "#E2E8F0", outline: "none" },
63+
                    hover: { fill: isDark ? "#6366F1" : "#A5B4FC", outline: "none" },
64+
                    pressed: { fill: isDark ? "#4F46E5" : "#818CF8", outline: "none" },
65+
                }}
66+
                />
67+
              ))
68+
            }
69+
          </Geographies>
70+
          {markers.map(({ name, coordinates }) => (
71+
            <Marker key={name} coordinates={coordinates}>
72+
                <circle r={4} fill="#6366F1" stroke={isDark ? '#1E293B' : '#FFF'} strokeWidth={1.5} />
73+
            </Marker>
74+
          ))}
75+
        </ComposableMap>
76+
       
77+
        <ReactTooltip
78+
            id="country-tooltip"
79+
            variant={isDark ? 'light' : 'dark'}
80+
            style={{
81+
                borderRadius: '6px',
82+
                padding: '4px 10px',
83+
                fontSize: '12px',
84+
                zIndex: 999 // Her zaman en üstte görünmesini sağlar
85+
            }}
86+
        />
87+
      </div>
8588

86-
{/* Ülke Listesi */}
87-
<div className="space-y-4">
88-
{demographicsData.map(item => (
89-
<div key={item.countryCode}>
90-
<div className="flex items-center justify-between mb-1">
91-
<div className="flex items-center space-x-3">
92-
<CountryFlag
93-
countryCode={item.countryCode}
94-
svg
95-
style={{
96-
width: '1.5em',
97-
height: '1.5em',
98-
borderRadius: '4px'
99-
}}
100-
/>
101-
<div>
102-
<p className={`font-semibold text-sm ${isDark ? 'text-white' : 'text-slate-800'}`}>{item.countryName}</p>
103-
<p className={`text-xs ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>{item.customerCount} Customers</p>
104-
</div>
105-
</div>
106-
<span className={`font-semibold text-sm ${isDark ? 'text-white' : 'text-slate-800'}`}>{item.percentage}%</span>
107-
</div>
108-
<div className={`w-full rounded-full h-1.5 ${isDark ? 'bg-slate-700' : 'bg-slate-200'}`}>
109-
<div className="bg-indigo-500 h-1.5 rounded-full" style={{ width: `${item.percentage}%` }}></div>
110-
</div>
111-
</div>
112-
))}
113-
</div>
114-
</div>
115-
);
89+
      {/* Ülke Listesi (flex-shrink-0 ile boyutu sabitlendi) */}
90+
      <div className="flex-shrink-0 space-y-4">
91+
        {demographicsData.map(item => (
92+
          <div key={item.countryCode}>
93+
            <div className="flex items-center justify-between mb-1">
94+
                <div className="flex items-center space-x-3">
95+
                    <CountryFlag
96+
                        countryCode={item.countryCode}
97+
                        svg
98+
                        style={{
99+
                            width: '1.5em',
100+
                            height: '1.5em',
101+
                            borderRadius: '4px'
102+
                        }}
103+
                    />
104+
                    <div>
105+
                        <p className={`font-semibold text-sm ${isDark ? 'text-white' : 'text-slate-800'}`}>{item.countryName}</p>
106+
                        <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>{item.customerCount} Customers</p>
107+
                    </div>
108+
                </div>
109+
                <span className={`font-semibold text-sm ${isDark ? 'text-white' : 'text-slate-800'}`}>{item.percentage}%</span>
110+
            </div>
111+
            <div className={`w-full rounded-full h-1.5 ${isDark ? 'bg-slate-700' : 'bg-slate-200'}`}>
112+
                <div className="bg-indigo-500 h-1.5 rounded-full" style={{ width: `${item.percentage}%` }}></div>
113+
            </div>
114+
          </div>
115+
        ))}
116+
      </div>
117+
    </div>
118+
  );
116119
}
117120

118-
export default DemographicsMap;
121+
export default DemographicsMap;

0 commit comments

Comments
 (0)