# SVG-εικόνες χαρτών

Το `/v1/render/*` επιστρέφει έναν χάρτη ως έτοιμο SVG: τροχό γέννησης, διπλό και τριπλό τροχό, σύνθετο, βεδικούς χάρτες (βόρειο, νότιο, ανατολικό), πλέγμα όψεων, κοσμόγραμμα, φάση Σελήνης, χρονοδιάγραμμα, βιορυθμούς, ζώνη έκλειψης και αστρικό χάρτη. Εσύ στέλνεις τα δεδομένα γέννησης, εμείς υπολογίζουμε τον χάρτη και τον σχεδιάζουμε. Πλήρης λίστα διαδρομών και παραμέτρων στο [εγχειρίδιο API](/docs/api/).

Ο ίδιος κώδικας σχεδίασης έχει δημοσιευτεί ως πακέτο npm [`@astroway/render`](https://www.npmjs.com/package/@astroway/render): αν έχεις ήδη τα δεδομένα του χάρτη, ο τροχός μπορεί να σχεδιαστεί στον browser ή στον δικό σου server, και θα είναι πανομοιότυπος με αυτόν που επιστρέφει το API, byte προς byte. Η έκδοση σχεδίασης του 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-attributes

Στο θέμα `css`, οι δυτικοί τροχοί (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) και το πλέγμα όψεων έχουν σταθερές κλάσεις. Τα ονόματα μόνο προστίθενται, ποτέ δεν μετονομάζονται, οπότε μπορείς να γράψεις στυλ και scripts πάνω τους.

- Τροχός: `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`, και οι δύο πρέπει να είναι έτοιμοι χάρτες). Η εικόνα θα είναι byte προς byte ίδια με αυτή που προκύπτει από τα δεδομένα γέννησης.

```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 credits, επειδή ο χάρτης υπολογίζεται. Με έναν έτοιμο χάρτη `chart`, οι κλήσεις `/v1/render/wheel-western`, `/v1/render/aspect-grid` και `/v1/render/bi-wheel` κοστίζουν 1 credit. Το θέμα, οι κλάσεις και οι ετικέτες δεν επηρεάζουν την τιμή.