GradeGolden Dawn Grade Tree, from magick-components
The Tree of Life as the map of the Golden Dawn's grades: each sphere labelled with its grade's number and name, with the grade's element, order and planet below. Like the Tree, it links nothing unless given sephirahHref or pathHref (a sphere's row names its grade as gdGradeId). Any of TreeOfLife's props override these.
import GradeTree from "magick-components/gd/GradeTree";magick-components is on npm, under MIT (how to install it), and its source is in the app's repository.
<GradeTree />| Prop | Type | Default | Description |
|---|---|---|---|
activePath | string | A path's id ("1_2"): it is drawn on top and highlighted, the rest faded. Any other value throws. | |
activeSephirah | string | null | A sephirah's id ("tiferet"): that sphere is drawn and the others faded. null fades them all; not given, none is faded. Any other value throws, as for activePath. | |
bottomText | string | The field path(s) set on an arc below each sphere's label, as field takes them; name.en when not given, and none when empty. | |
colorScale | "king" | "queen" | The scale the spheres are coloured in: queen when not given. | |
field | string | What each sphere is labelled with: a field path into its magick-data row (name.he, planet.name.en.en, stones.*.name.en; index is the sphere's number), or several joined by commas, which are drawn space-separated. name.roman when not given or empty. | |
flip | boolean | Seen from behind, the body's view; the stylesheet mirrors the figure. | |
fontBaseUrl | string | Where Noto Sans and Noto Sans Hebrew are served, as NotoSans-Regular.ttf and NotoSansHebrew-Regular.ttf under it. Given one, the SVG carries @font-face rules for them, which an exported SVG needs; the rules name the families for the whole page, as any @font-face does. Without it the Tree only names the families, and the page supplies them (or falls back to Arial and sans-serif). | |
fontSize | string | number | The labels' font size. When not given, from field: 32 for index, 20 for name.he and godName.name.he, otherwise 10. | |
height | string | number | The SVG's height; from the width and the figure's shape when not given. | |
id | string | The <svg>'s id, which its stylesheet is scoped to and every id inside it begins with (<id>-paths, <id>-topTextPath0): letters, digits, - and _, starting with a letter. One from useId when not given, so that several Trees can share a page. | |
labels | readonly string[] | Each sphere's label, Keter first and Da'at eleventh, in place of field's. | |
letterAttr | "hebrew" | "hermetic" | Whose letters the paths carry: hermetic when not given. | |
pathHref | ((path: TreeOfLifePathRow) => string | null) | Each path's link, given its magick-data row, or null for none. Without it the paths are not links. | |
sephirahHref | ((sephirah: SephirahRow) => string | null) | Each sphere's link, given its magick-data row, or null for none. Without it the spheres are not links. | |
showDaat | boolean | Draws Da'at. Only the Queen scale colours it, so the King scale leaves it out. | |
topText | string | The field path(s) set on an arc above each sphere's label, as field takes them; index when not given, and none when empty. | |
width | string | number | The SVG's width; the container's, "100%", when not given. |