Skip to content

Commit 2a8e62f

Browse files
EnderKaranEnderKaran
committed
hatalar çözüldü ve orders table kısmına filtreleme eklendi
1 parent aa3ca11 commit 2a8e62f

File tree

4 files changed

+336
-312
lines changed

4 files changed

+336
-312
lines changed

‎src/components/Charts/DemographicsMap.jsx‎

Lines changed: 97 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -9,113 +9,112 @@ 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-
// 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>
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>
4241

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
42+
{/* Harita Konteyneri - Responsive yapıldı */}
43+
<div className='w-full mb-6' style={{ height: '350px' }} data-tooltip-id="country-tooltip">
44+
<ComposableMap
45+
width={800}
46+
height={350}
4747
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>
48+
projectionConfig={{
49+
scale: 140,
50+
center: [10, 10]
51+
}}
52+
>
53+
<Geographies geography={geoUrl}>
54+
{({ geographies }) =>
55+
geographies.map((geo) => (
56+
<Geography
57+
key={geo.rsmKey}
58+
geography={geo}
59+
data-tooltip-content={geo.properties.name}
60+
style={{
61+
default: { fill: isDark ? "#475569" : "#E2E8F0", outline: "none" },
62+
hover: { fill: isDark ? "#6366F1" : "#A5B4FC", outline: "none" },
63+
pressed: { fill: isDark ? "#4F46E5" : "#818CF8", outline: "none" },
64+
}}
65+
/>
66+
))
67+
}
68+
</Geographies>
69+
{markers.map(({ name, coordinates }) => (
70+
<Marker key={name} coordinates={coordinates}>
71+
<circle r={5} fill="#6366F1" stroke={isDark ? '#1E293B' : '#FFF'} strokeWidth={2} />
72+
</Marker>
73+
))}
74+
</ComposableMap>
75+
76+
<ReactTooltip
77+
id="country-tooltip"
78+
variant={isDark ? 'light' : 'dark'}
79+
style={{
80+
borderRadius: '6px',
81+
padding: '4px 10px',
82+
fontSize: '12px',
83+
zIndex: 999
84+
}}
85+
/>
86+
</div>
8887

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

121-
export default DemographicsMap;
120+
export default DemographicsMap;

0 commit comments

Comments
 (0)