# SVG-मानचित्र चित्रण

`/v1/render/*` एक तैयार SVG के रूप में चार्ट लौटाता है: नेटल व्हील, बाय- और ट्राइ-व्हील, कॉम्पोजिट, वैदिक चार्ट (नॉर्थ, साउथ, ईस्ट), एस्पेक्ट ग्रिड, कॉसमोग्राम, चंद्रमा का चरण, टाइमलाइन, बायोरिदम, इकटेनेशन बैंड और स्टार मैप। तू जन्म डेटा भेजता है, हम चार्ट की गणना करते हैं और उसे ड्रॉ करते हैं। सभी रूट्स और पैरामीटर्स की पूरी सूची [API दस्तावेज़](/docs/api/) में है।

वही ड्रॉइंग कोड npm पैकेज [`@astroway/render`](https://www.npmjs.com/package/@astroway/render) के रूप में प्रकाशित किया गया है: अगर तेरे पास पहले से ही चार्ट डेटा है, तो व्हील को ब्राउज़र या अपने सर्वर पर ड्रॉ किया जा सकता है, और यह API द्वारा लौटाए गए परिणाम से बाइट-टू-बाइट मेल खाएगा। ड्रॉइंग संस्करण API हेडर `X-Render-Version` में लौटाता है।

## अनुरोध

```bash
curl -X POST https://api.astroway.info/v1/render/wheel-western \
  -H "X-Api-Key: $ASTROWAY_KEY" -H "Content-Type: application/json" \
  -d '{"date":"1990-05-15","time":"14:30:00","timezoneOffset":3,"latitude":50.45,"longitude":30.52,
       "options":{"theme":"css","format":"svg"}}' > wheel.svg
```

`format: "svg"` स्वयं फ़ाइल लौटाता है, डिफ़ॉल्ट `json` SVG स्ट्रिंग को सामान्य API प्रतिक्रिया में लपेटता है। थीम्स: `light`, `dark`, `console` और `css`।

## थीम css: तेरी साइट के रंग

`theme: "css"` के साथ SVG में प्रत्येक रंग को CSS वैरिएबल के रूप में लिखा जाता है, जिसमें लाइट थीम का रंग फॉलबैक के रूप में होता है, जैसे `var(--aw-ring, #222)`। SVG को HTML पेजों में डालो ( `<img>` में नहीं: वहाँ वैरिएबल्स काम नहीं करेंगे) और वैरिएबल्स सेट करो:

```css
.chart {
  --aw-chart-bg: transparent;
  --aw-ring: #444;
  --aw-fg: currentColor;
  --aw-aspect-tense: crimson;
}
```

बिना किसी वैरिएबल के चार्ट बिल्कुल `light` जैसा दिखेगा। तेरे पेज की CSS नियम वैरिएबल से अधिक प्रबल होते हैं, इसलिए किसी भी एलिमेंट को क्लास से री-कलर किया जा सकता है।

| वैरिएबल | क्या रंगता है |
|---|---|
| `--aw-chart-bg` | चार्ट की पृष्ठभूमि |
| `--aw-fg`, `--aw-muted` | ग्लिफ़ और लेबल, द्वितीयक टेक्स्ट और टिक |
| `--aw-ring` | रिंग और ग्रिड लाइन्स |
| `--aw-houses-fill` | वैदिक चार्ट का क्षेत्र, स्टार मैप डिस्क, इकटेनेशन मैप |
| `--aw-benefic` | बाहरी रिंग के ग्रह, वैदिक चार्ट में लग्न, टाइमलाइन इवेंट्स जिनका अपना रंग नहीं है |
| `--aw-malefic` | रेट्रोग्रेड संकेत ℞, इकटेनेशन बैंड |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | एस्पेक्ट लाइन्स और सिम्बॉल्स |
| `--aw-moon-shadow`, `--aw-moon-light` | चंद्र का चरण |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | बायोरिदम |

## क्लासेस और data-एट्रिब्यूट्स

`css` थीम में वेस्टर्न व्हील (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) और एस्पेक्ट ग्रिड के पास स्थायी क्लासेस होते हैं। नाम केवल जोड़े जाते हैं, कभी नहीं बदले जाते, इसलिए उन पर स्टाइल और स्क्रिप्ट लिखे जा सकते हैं।

- व्हील: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, अक्ष `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), उनके लेबल `aw-label aw-axis-label`, शीर्षक `aw-title`।
- ग्रह: समूह `<g class="aw-planet aw-planet-sun">`, रेट्रोग्रेड में अतिरिक्त `aw-retrograde`, बाहरी रिंग के ग्रह `aw-layer-1`। अंदर `aw-glyph`, `aw-retro` (℞ संकेत) और `aw-planet-tick`।
- एस्पेक्ट: लाइन `aw-aspect aw-aspect-trine`, दो चार्ट के बीच की लाइन भी `aw-cross-aspect`।
- एस्पेक्ट ग्रिड: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`।

ग्रह समूह में `data-planet` (`sun`, `north-node`, `lilith`; बाहरी रिंग पर `b-sun`, तीसरे पर `c-sun`) और `data-label` नाम और स्थिति के साथ होता है: `Mercury 8°00' Taurus, retrograde`। एस्पेक्ट लाइन और ग्रिड सेल में `data-a` और `data-b` होते हैं। इस तरह सभी ग्रह के एस्पेक्ट होवर पर हाइलाइट होते हैं:

```js
svg.querySelectorAll('.aw-planet').forEach((g) => g.addEventListener('mouseenter', () => {
  const id = g.dataset.planet;
  svg.querySelectorAll('.aw-aspect').forEach((line) =>
    line.classList.toggle('is-on', line.dataset.a === id || line.dataset.b === id));
}));
```

## तेरे लेबल्स: labels

वेस्टर्न व्हील `options.labels` स्वीकारते हैं: तेरे अक्ष लेबल्स, `<title>` और `<desc>` के लिए शब्द, जो स्क्रीन रीडर पढ़ते हैं, और `data-label` में नामों के लिए। जो कुंजी नहीं दी गई हैं, वे अंग्रेज़ी में ही रहती हैं; हम खुद कुछ भी अनुवाद नहीं करते।

```json
"options": {
  "theme": "css",
  "labels": {
    "asc": "Асц", "mc": "МС", "title": "Натальна карта",
    "bodies": { "Sun": "Сонце", "Moon": "Місяць" },
    "signs": ["Овен","Телець","Близнюки","Рак","Лев","Діва","Терези","Скорпіон","Стрілець","Козеріг","Водолій","Риби"],
    "retrograde": "ретроградний"
  }
}
```

`bodies` में कुंजियाँ अंग्रेज़ी में हैं (`Sun`, `North Node`), `signs` ठीक बारह नाम हैं, मेष से शुरू होते हुए, प्रत्येक लेबल अधिकतम 40 अक्षर का।

## दो चार्टों के बीच एस्पेक्ट्स

`/v1/render/bi-wheel` के साथ `options.crossAspects: true` अंदर और बाहर के चार्ट के बीच डैश्ड एस्पेक्ट्स ड्रॉ करता है, वही सेट जो `POST /v1/synastry` `crossAspects` के रूप में लौटाता है। जहाँ एक भी बॉडी नहीं ड्रॉ की गई है, वह जोड़ी छोड़ दी जाती है। डिफ़ॉल्ट रूप से बंद है।

## जन्म डेटा की जगह तैयार चार्ट

अगर तेरे पास पहले से ही चार्ट है, क्योंकि तू अभी `POST /v1/chart` कॉल किया है, तो उसे `data` फ़ील्ड `chart` में जन्म डेटा की जगह भेज। फिर हम सिर्फ उसे ड्रॉ करेंगे। यही `wheel-western`, `aspect-grid` और `bi-wheel` के साथ काम करता है (वहाँ `natal.chart` और `outer.chart` होते हैं, दोनों को तैयार चार्ट होना चाहिए)। इमेज बाइट-टू-बाइट वही होगी जैसा जन्म डेटा से मिलता है।

```json
{ "chart": { "planets": [ ... ], "houses": { "cusps": [ ... ], "ascendant": 7.77, "mc": 277.12 }, "aspects": [ ... ] },
  "options": { "theme": "css" } }
```

अनावश्यक प्रतिक्रिया फ़ील्ड को काटने की ज़रूरत नहीं। यह जांचा जाता है कि क्या ड्रॉ किया गया है: 1 से 30 बॉडीज़, लंबाई 0 से 360, ठीक 12 कुस्पिड। जहाँ `chart` और जन्म डेटा दोनों हैं, वह 400 के साथ अस्वीकृत होता है।

## कीमत

`/v1/render/*` को जन्म डेटा के साथ कॉल करने पर 10 क्रेडिट लगते हैं, क्योंकि चार्ट की गणना होती है। तैयार चार्ट `chart` के साथ `/v1/render/wheel-western`, `/v1/render/aspect-grid` और `/v1/render/bi-wheel` कॉल केवल 1 क्रेडिट में होते हैं। थीम, क्लासेस और लेबल्स कीमत को नहीं बदलते।