منصوبے کے بارے میں

goatdash [GoatCounter](https://www.goatcounter.com/) تجزیات کے لیے ایک ہلکا پھلکا اور پرائیویسی سے بھرپور ڈیش بورڈ ہے۔ یہ مکمل طور پر کلینٹ سائیڈ پر وینیلی جاوا اسکرپٹ کے طور پر چلتا ہے جس میں کوئی dependancies، build tooling، یا اپنا backend server نہیں ہے۔ اسے ڈیپلائے کرنے کے لیے صرف چند static files کسی بھی web host پر کاپی کریں۔ ## یہ کیا کرتا ہے ڈیش بورڈ GoatCounter کے public v0 API کے ذریعے ایک یا ایک سے زیادہ GoatCounter instances سے HTTPS کے ذریعے جڑتا ہے۔ یہ درج ذیل analytics data دکھاتا ہے: - **پانچ KPI cards**: منفرد visitors (trend کے ساتھ)، pageviews، ٹاپ page، tracked paths، اور total events۔ - **Referrer breakdown**: direct، search engines، campaigns، اور other sites کے ذریعے traffic کو چینلز میں گروپ کیا گیا ہے، جن میں individual referrers اور وہ pages جن تک وہ پہنچتے ہیں، drill-down شامل ہے۔ - **Choropleth world map**: مربع الجذر scale کے ذریعے ممالک کو visit count کے مطابق shade کرتا ہے، جس میں hover tooltips، zoom، pan، اور reset ہیں۔ - **ہر جگہ drill-down**: کسی بھی page پر کلک کر کے اس کے referrers، کسی بھی referrer پر کلک کر کے وہ pages دیکھیں جنہوں نے drive کیا، browsers/systems/devices کو ان کی versions، countries کو regions، اور campaigns کو ان کی source URLs تک۔ - **لچکدار date ranges**: آج، 7 دن، 30 دن، 90 دن، یا custom start/end period۔ ## Multi-site سپورٹ goatdash multi-site setups کے گرد ڈیزائن کیا گیا ہے جہاں ہر site اپنے domain پر رہتی ہے لیکن ایک واحد GoatCounter اکاؤنٹ شیئر کرتی ہے۔ GoatCounter `Host` ہیڈر سے درست site کو resolve کرتا ہے، لہذا ڈیش بورڈ ہر site کو cross-origin طور پر اس کے اپنے domain پر query کرتا ہے۔ Sidebar `/api/v0/sites` سے تمام sites کی فہرست دکھاتا ہے جو API key کی permissions میں scoped ہے۔ inactive sites کا background precaching کی وجہ سے site switching تیز ہے۔ ## Architecture اور stack - **Vanilla JS only**: کوئی React نہیں، کوئی bundler نہیں، کوئی CDN calls نہیں۔ مجموعی طور پر سات static files۔ - **کوئی backend نہیں**: براؤเซอร์ براہ راست GoatCounter API سے بات کرتا ہے۔ کوئی server نہیں جسے patch کیا جائے، کوئی database نہیں جسے backup کیا جائے، یا کوئی service نہیں جسے زندہ رکھا جائے۔ - **Service worker**: app shell اور versioned assets کو cache کرتا ہے تاکہ instant reloads ممکن ہوں؛ API responses کو stale-while-revalidate کے ساتھ cache کیا جاتا ہے۔ - **Theme**: dark، light، یا auto mode، topbar buttons کے ذریعے تبدیل کیا جاتا ہے اور strict CSP (`default-src 'self'`) کے ساتھ compatible `theme.js` script کے ذریعے paint سے پہلے apply کیا جاتا ہے۔ - **Language**: Spanish، English، یا auto-detect، جو `localStorage` میں persist کیا جاتا ہے۔ - **Demo mode**: بغیر API key کے realistic sample data لوڈ کرتا ہے تاکہ exploration ممکن ہو۔ ## Installation کوئی install script نہیں ہے اور نہ ہی compile کرنے کی ضرورت ہے۔ کسی بھی HTTP server سے static files serve کریں: ```sh python3 -m http.server 8000 ``` Requirements: ایک static web server اور ایک GoatCounter instance جس کا v0 API HTTPS کے ذریعے براؤزر سے reachable ہو۔ Docker، Node، یا build tools کی کوئی ضرورت نہیں۔ Production multi-site deployments کے لیے، اپنے web server کو configure کریں کہ وہ dedicated domain (مثلاً `stats.example.com`) سے files serve کرے اور یقینی بنائے کہ index HTML پر `Cache-Control: no-store` سیٹ ہو۔ Asset files version query strings استعمال کرتی ہیں (مثلاً `app.js?v=3`) اور ہر deploy پر un stale cache issues سے بچنے کے لیے bump کیے جانے چاہئیں۔ ایک optional systemd-based weekly self-updater بھی فراہم کیا گیا ہے (`deploy/goatdash-update.sh`) جو latest GitHub release کو download کرتا ہے، اس کا SHA256 checksum verify کرتا ہے، موجودہ installation کا backup لیتا ہے، اور نئی version swap کر دیتا ہے۔ ## Configuration پہلی بار load پر connect screen سے پوچھا جاتا ہے: - آپ کی site(s) کا **GoatCounter URL** (مثلاً `https://stats.cloudless.club`)۔ - GoatCounter میں Settings > API کے تحت بنایا گیا ایک **API key**، جس میں کم از کم Count اور Read statistics permissions ہوں۔ دونوں values براؤزر کے `localStorage` میں ذخیرہ کی جاتی ہیں اور صرف HTTPS کے ذریعے آپ کے GoatCounter instance کو transmitted ہوتی ہیں۔ Theme، language، selected site، اور date range بھی locally persist کیے جاتے ہیں۔ Multi-site setups کے لیے، ہر site کے پاس GoatCounter installation کی طرف pointing کرنے والا اپنا domain ہونا چاہیے۔ GoatCounter `Access-Control-Allow-Origin: *` بھیجتا ہے، جس سے proxy کے بغیر cross-origin requests ممکن ہوتی ہیں۔ نوٹ کریں کہ ہر authenticated request ایک `OPTIONS` preflight trigger کرتی ہے، جس سے ہر API call کے لیے دو round trips ہوتے ہیں۔ ## Usage صفحہ کھولیں اور اپنا GoatCounter URL اور API key درج کریں، یا **Try Demo** پر کلک کر کے sample data کے ساتھ explore کریں۔ segmented control سے date ranges switch کریں، gear menu سے theme/language تبدیل کریں یا disconnect کریں، اور کسی بھی metric card پر drill-down کے لیے کلک کریں۔ refresh menu caches کو clear کرتا ہے اور سب کچھ دوبارہ fetch کرتا ہے۔ ## Development پراجیکٹ میں `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js`, اور `sw.js` کے تحت plain HTML, CSS, اور JavaScript شامل ہیں۔ اس میں `package.json`, bundler, یا test harness نہیں ہے۔ local development کے لیے: ```sh python3 -m http.server 8000 ``` `fixtures.js` میں demo fixture data real API response shape کو mirrors کرتا ہے۔ ## License AGPL-3.0۔ world map asset (`assets/world-map.js`) Abhishekh Singh کے MIT-licensed goatcounter-dashboard سے verbatim retained ہے اور MIT رہتا ہے۔