diff --git a/src/apps/dashboard/views.py b/src/apps/dashboard/views.py
index 06c829a..02e5f09 100644
--- a/src/apps/dashboard/views.py
+++ b/src/apps/dashboard/views.py
@@ -300,11 +300,24 @@ def _sky_natus_preview(request):
@login_required(login_url="/")
def sky_view(request):
+ chart_data = request.user.sky_chart_data
+ birth_dt = request.user.sky_birth_dt
+ saved_birth_date = ''
+ saved_birth_time = ''
+ if birth_dt:
+ if request.user.sky_birth_tz:
+ try:
+ birth_dt = birth_dt.astimezone(zoneinfo.ZoneInfo(request.user.sky_birth_tz))
+ except (zoneinfo.ZoneInfoNotFoundError, KeyError):
+ pass
+ saved_birth_date = birth_dt.strftime('%Y-%m-%d')
+ saved_birth_time = birth_dt.strftime('%H:%M')
return render(request, "apps/dashboard/sky.html", {
"preview_url": request.build_absolute_uri("/dashboard/sky/preview"),
"save_url": request.build_absolute_uri("/dashboard/sky/save"),
- "saved_sky": request.user.sky_chart_data,
- "saved_birth_dt": request.user.sky_birth_dt,
+ "saved_sky_json": json.dumps(chart_data) if chart_data else 'null',
+ "saved_birth_date": saved_birth_date,
+ "saved_birth_time": saved_birth_time,
"saved_birth_place": request.user.sky_birth_place,
"saved_birth_lat": request.user.sky_birth_lat,
"saved_birth_lon": request.user.sky_birth_lon,
@@ -329,13 +342,23 @@ def sky_save(request):
return HttpResponse(status=400)
user = request.user
+ birth_tz_str = body.get('birth_tz', '').strip()
birth_dt_str = body.get('birth_dt', '')
if birth_dt_str:
try:
- naive = datetime.fromisoformat(birth_dt_str.replace('Z', '+00:00'))
- user.sky_birth_dt = naive if naive.tzinfo else naive.replace(
- tzinfo=zoneinfo.ZoneInfo('UTC')
- )
+ naive = datetime.fromisoformat(birth_dt_str.replace('Z', '').replace('+00:00', ''))
+ if naive.tzinfo is None and birth_tz_str:
+ try:
+ local_tz = zoneinfo.ZoneInfo(birth_tz_str)
+ user.sky_birth_dt = naive.replace(tzinfo=local_tz).astimezone(
+ zoneinfo.ZoneInfo('UTC')
+ )
+ except (zoneinfo.ZoneInfoNotFoundError, KeyError):
+ user.sky_birth_dt = naive.replace(tzinfo=zoneinfo.ZoneInfo('UTC'))
+ elif naive.tzinfo is None:
+ user.sky_birth_dt = naive.replace(tzinfo=zoneinfo.ZoneInfo('UTC'))
+ else:
+ user.sky_birth_dt = naive.astimezone(zoneinfo.ZoneInfo('UTC'))
except ValueError:
user.sky_birth_dt = None
user.sky_birth_lat = body.get('birth_lat')
diff --git a/src/apps/gameboard/static/apps/gameboard/natus-wheel.js b/src/apps/gameboard/static/apps/gameboard/natus-wheel.js
index 223b067..7d60657 100644
--- a/src/apps/gameboard/static/apps/gameboard/natus-wheel.js
+++ b/src/apps/gameboard/static/apps/gameboard/natus-wheel.js
@@ -103,12 +103,44 @@ const NatusWheel = (() => {
'Cooperation', 'Regeneration', 'Enterprise', 'Career', 'Reward', 'Reprisal',
];
+ const ANGLE_DEFS = {
+ ASC: { label: 'Ascendant', sym: 'ASC', house: 1 },
+ MC: { label: 'Midheaven', sym: 'MC', house: 10 },
+ };
+
+ // Major aspect angles and their exact expected separations
+ const MAJOR_ASPECTS = [
+ { type: 'Conjunction', angle: 0 },
+ { type: 'Sextile', angle: 60 },
+ { type: 'Square', angle: 90 },
+ { type: 'Trine', angle: 120 },
+ { type: 'Opposition', angle: 180 },
+ ];
+
+ const ANGLE_ORB = 10;
+
// Cardinal / Fixed / Mutable — parallel index to SIGNS
const SIGN_MODALITIES = [
'Cardinal', 'Fixed', 'Mutable', 'Cardinal', 'Fixed', 'Mutable',
'Cardinal', 'Fixed', 'Mutable', 'Cardinal', 'Fixed', 'Mutable',
];
+ // Angular / Succedent / Cadent — 1-indexed (index 0 unused)
+ const HOUSE_QUADRANT = [
+ '', 'Angular', 'Succedent', 'Cadent',
+ 'Angular', 'Succedent', 'Cadent',
+ 'Angular', 'Succedent', 'Cadent',
+ 'Angular', 'Succedent', 'Cadent',
+ ];
+
+ // Houses 1–3: Juvenescence; 4–6: Adolescence; 7–9: Maturescence; 10–12: Senescence
+ const HOUSE_PHASE = [
+ '', 'Juvenescence', 'Juvenescence', 'Juvenescence',
+ 'Adolescence', 'Adolescence', 'Adolescence',
+ 'Maturescence', 'Maturescence', 'Maturescence',
+ 'Senescence', 'Senescence', 'Senescence',
+ ];
+
// ── State ─────────────────────────────────────────────────────────────────
let _svg = null;
@@ -125,12 +157,13 @@ const NatusWheel = (() => {
// ── Cycle state ────────────────────────────────────────────────────────────
- let _activeRing = null; // 'planets' | 'elements' | 'signs' | 'houses' | null
+ let _activeRing = null; // 'planets' | 'elements' | 'signs' | 'houses' | 'angles' | null
let _activeIdx = null; // index within the active ring's sorted list
let _planetItems = []; // [{name, degree}] sorted by ecliptic degree ascending
let _elementItems = []; // [{key}] in ELEMENT_ORDER
let _signItems = []; // [{name, symbol, element}] in SIGNS order
let _houseItems = []; // [{num, label}] houses 1–12
+ let _angleItems = []; // [{name, label, house}] — ASC and MC
// Tooltip DOM refs — set by _injectTooltipControls() on each draw().
let _tooltipEl = null;
@@ -214,6 +247,29 @@ const NatusWheel = (() => {
return ``;
}
+ /** Planet symbol wrapped in its metal-color span. data-planet allows test queries. */
+ function _pSym(planetName) {
+ const el = PLANET_ELEMENTS[planetName] || '';
+ const sym = PLANET_SYMBOLS[planetName] || planetName[0];
+ return el
+ ? `${sym}`
+ : `${sym}`;
+ }
+
+ /** Sign icon SVG wrapped in its element-color span. */
+ function _signIcon(signName) {
+ const sign = SIGNS.find(s => s.name === signName) || {};
+ const el = (sign.element || '').toLowerCase();
+ const svg = _signIconSvg(signName) || sign.symbol || '';
+ return el ? `${svg}` : svg;
+ }
+
+ /** Ordinal suffix HTML for a house number, e.g. 2 → "2nd". */
+ function _houseOrdinal(n) {
+ const sfx = n === 1 ? 'st' : n === 2 ? 'nd' : n === 3 ? 'rd' : 'th';
+ return `${n}${sfx}`;
+ }
+
/** ![]()
for an element-square badge (Ardor.svg etc.). */
function _elementSquareImg(elementKey) {
const info = ELEMENT_INFO[elementKey];
@@ -261,6 +317,10 @@ const NatusWheel = (() => {
num: i + 1,
label: HOUSE_LABELS[i + 1],
}));
+ _angleItems = [
+ { name: 'ASC', deg: data.houses.asc },
+ { name: 'MC', deg: data.houses.mc },
+ ];
}
/** Clear all active-lock classes and reset cycle state. */
@@ -268,6 +328,9 @@ const NatusWheel = (() => {
if (_svg) {
_svg.selectAll('.nw-planet-group').classed('nw-planet--active', false);
_svg.selectAll('.nw-element-group').classed('nw-element--active', false);
+ _svg.selectAll('.nw-sign-group').classed('nw-sign--active', false);
+ _svg.selectAll('[data-house]').classed('nw-house--active', false);
+ _svg.selectAll('[data-angle]').classed('nw-angle--active', false);
}
_activeRing = null;
_activeIdx = null;
@@ -325,6 +388,97 @@ const NatusWheel = (() => {
}
}
+ /** Draw aspect lines from an angle (ASC/MC) to all planets in its aspect index. */
+ function _showAngleAspects(angleName) {
+ if (!_aspectGroup || !_currentData) return;
+ _clearAspectLines();
+
+ const angleDeg = angleName === 'ASC' ? _currentData.houses.asc : _currentData.houses.mc;
+ const asc = _currentData.houses.asc;
+ const a1 = _toAngle(angleDeg, asc);
+ const r1 = R.planetR;
+
+ (_aspectIndex[angleName] || []).forEach(({ partner, type, applying_planet }) => {
+ const pdata = _currentData.planets[partner];
+ if (!pdata) return;
+ const a2 = _toAngle(pdata.degree, asc);
+ const style = ASPECT_STYLES[type] || { dash: 'none', width: 0.8 };
+ const color = _aspectColor(applying_planet);
+
+ const line = _aspectGroup.append('line')
+ .attr('x1', _cx + r1 * Math.cos(a1))
+ .attr('y1', _cy + r1 * Math.sin(a1))
+ .attr('x2', _cx + R.planetR * Math.cos(a2))
+ .attr('y2', _cy + R.planetR * Math.sin(a2))
+ .attr('stroke', color)
+ .attr('stroke-width', style.width * 2)
+ .attr('stroke-opacity', 0.9);
+
+ if (style.dash !== 'none') line.attr('stroke-dasharray', style.dash);
+ });
+ }
+
+ /** Lock-activate an angle (ASC or MC) — show tooltip + draw aspect lines. */
+ function _activateAngle(angleName) {
+ if (_activeRing === 'angles' && _activeIdx === angleName) {
+ _closeTooltip();
+ return;
+ }
+ _clearActive();
+ _activeRing = 'angles';
+ _activeIdx = angleName;
+
+ if (_svg) _svg.select(`[data-angle="${angleName}"]`).classed('nw-angle--active', true);
+
+ const def = ANGLE_DEFS[angleName] || {};
+ const angleDeg = angleName === 'ASC' ? _currentData.houses.asc : _currentData.houses.mc;
+ const signIdx = Math.floor(angleDeg / 30) % 12;
+ const sign = SIGNS[signIdx] || {};
+ const inDeg = (angleDeg % 30).toFixed(1);
+ const icon = _signIconSvg(sign.name) || sign.symbol || '';
+ const elKey = (sign.element || '').toLowerCase();
+
+ let aspectHtml = '';
+ const myAspects = _aspectIndex[angleName] || [];
+ if (myAspects.length) {
+ aspectHtml = '';
+ myAspects.forEach(({ partner, type, orb, applying_planet }) => {
+ const ppdata = _currentData.planets[partner] || {};
+ const asym = ASPECT_SYMBOLS[type] || type;
+ const lineSvg = _aspectLineSvg(type, applying_planet);
+ aspectHtml +=
+ `` +
+ `${lineSvg} ${asym} ${_pSym(partner)} in ${_signIcon(ppdata.sign)}` +
+ ` ${APPLY_SYM} ${orb}°` +
+ `
`;
+ });
+ aspectHtml += '';
+ }
+
+ if (_ttBody) {
+ _ttBody.innerHTML =
+ `` +
+ `` +
+ `@${inDeg}° ${sign.name || ''}` +
+ `${icon}` +
+ `
` +
+ `${_houseOrdinal(def.house)} House (${HOUSE_LABELS[def.house] || ''})
` +
+ aspectHtml;
+ }
+
+ _aspectsVisible = false;
+ _positionTooltipAtItem('angles', angleName);
+ if (_tooltipEl) {
+ _tooltipEl.style.display = 'block';
+ _tooltipEl.querySelector('.nw-asp-don')?.style.removeProperty('display');
+ _tooltipEl.querySelector('.nw-asp-doff')?.style.removeProperty('display');
+ }
+ _updateAspectToggleUI();
+ }
+
/**
* Position the tooltip in the vertical half of the wheel opposite to the
* clicked planet/element.
@@ -357,6 +511,9 @@ const NatusWheel = (() => {
} else if (ring === 'houses') {
const grp = svgNode.querySelector(`[data-house="${_houseItems[idx].num}"]`);
el = grp && (grp.querySelector('path') || grp);
+ } else if (ring === 'angles') {
+ const grp = svgNode.querySelector(`[data-angle="${idx}"]`);
+ el = grp && (grp.querySelector('text') || grp);
}
if (el) iRect = el.getBoundingClientRect();
}
@@ -404,16 +561,29 @@ const NatusWheel = (() => {
if (myAspects.length) {
aspectHtml = '';
myAspects.forEach(({ partner, type, orb, applying_planet }) => {
- const psym = PLANET_SYMBOLS[partner] || partner[0];
- const ppdata = _currentData.planets[partner] || {};
- const sicon = _signIconSvg(ppdata.sign) || (SIGNS.find(s => s.name === ppdata.sign) || {}).symbol || '';
+ const isAngle = partner === 'ASC' || partner === 'MC';
+ const ppdata = isAngle ? {} : (_currentData.planets[partner] || {});
const asym = ASPECT_SYMBOLS[type] || type;
- const dirsym = applying_planet === item.name ? APPLY_SYM : SEP_SYM;
- const lineSvg = _aspectLineSvg(type, applying_planet);
+ const applying = applying_planet === item.name;
+ const lineSvg = _aspectLineSvg(type, applying_planet);
+ const partnerSym = isAngle
+ ? `${(ANGLE_DEFS[partner] || {}).sym || partner}`
+ : _pSym(partner);
+ let signPart;
+ if (isAngle) {
+ const aDeg = partner === 'ASC' ? _currentData.houses.asc : _currentData.houses.mc;
+ const aSign = SIGNS[Math.floor(aDeg / 30) % 12];
+ signPart = aSign ? ` in ${_signIcon(aSign.name)}` : '';
+ } else {
+ signPart = ` in ${_signIcon(ppdata.sign)}`;
+ }
+ const orbHtml = applying
+ ? `${APPLY_SYM} ${orb}°`
+ : `${orb}° ${SEP_SYM}`;
aspectHtml +=
`` +
- `${lineSvg} ${asym} ${psym} in ${sicon}` +
- ` (${dirsym} ${orb}°)` +
+ `${lineSvg} ${asym} ${partnerSym}${signPart}` +
+ ` ${orbHtml}` +
`
`;
});
aspectHtml += '';
@@ -427,7 +597,7 @@ const NatusWheel = (() => {
`` +
`` +
`@${inDeg}° ${pdata.sign}${rx}` +
- `${icon}` +
+ `${icon}` +
`
` +
aspectHtml;
}
@@ -464,14 +634,13 @@ const NatusWheel = (() => {
if (CLASSIC_ELEMENTS.has(item.key)) {
const contribs = elData.contributors || [];
bodyHtml = `${vecImg} +${count} (${pct}%)
`;
+ bodyHtml += ``;
if (contribs.length) {
bodyHtml += '';
contribs.forEach(c => {
- const psym = PLANET_SYMBOLS[c.planet] || c.planet[0];
const pdata = (_currentData.planets || {})[c.planet] || {};
const inDeg = pdata.degree !== undefined ? _inSignDeg(pdata.degree).toFixed(1) : '?';
- const sicon = _signIconSvg(c.sign) || (SIGNS.find(s => s.name === c.sign) || {}).symbol || '';
- bodyHtml += `
${psym} @ ${inDeg}° ${sicon} +1
`;
+ bodyHtml += `
${_pSym(c.planet)} @ ${inDeg}° ${_signIcon(c.sign)} +1
`;
});
bodyHtml += '
${vecImg} +${count} (${pct}%)
`;
if (stellia.length) {
+ const isTie = stellia.length > 1;
bodyHtml += '';
stellia.forEach(st => {
const bonus = st.planets.length - 1;
- bodyHtml += ``;
- st.planets.forEach(p => {
- const psym = PLANET_SYMBOLS[p.planet] || p.planet[0];
- const pdata = (_currentData.planets || {})[p.planet] || {};
- const inDeg = pdata.degree !== undefined ? _inSignDeg(pdata.degree).toFixed(1) : '?';
- const sicon = _signIconSvg(p.sign) || (SIGNS.find(s => s.name === p.sign) || {}).symbol || '';
- bodyHtml += `
${psym} @ ${inDeg}° ${sicon}
`;
- });
+ bodyHtml += ``;
+ if (isTie) {
+ st.planets.forEach(p => {
+ const pdata = (_currentData.planets || {})[p.planet] || {};
+ const inDeg = pdata.degree !== undefined ? _inSignDeg(pdata.degree).toFixed(1) : '?';
+ bodyHtml += `
${_pSym(p.planet)} @ ${inDeg}° ${_signIcon(p.sign)}
`;
+ });
+ } else {
+ const psyms = st.planets.map(p => _pSym(p.planet)).join(' ');
+ bodyHtml += `
${_signIcon(st.sign)} : ${psyms}
`;
+ }
});
bodyHtml += '
';
parades.forEach(pd => {
const bonus = pd.signs.length - 1;
- bodyHtml += ``;
- // Group planets by sign, sorted by ecliptic degree (counterclockwise = ascending)
+ bodyHtml += ``;
const bySign = {};
pd.planets.forEach(p => {
if (!bySign[p.sign]) bySign[p.sign] = [];
@@ -522,9 +694,8 @@ const NatusWheel = (() => {
});
pd.signs.forEach(sign => {
const planets = bySign[sign] || [];
- const sicon = _signIconSvg(sign) || (SIGNS.find(s => s.name === sign) || {}).symbol || sign;
- const psyms = planets.map(p => PLANET_SYMBOLS[p.planet] || p.planet[0]).join(' ');
- bodyHtml += `
${sicon} (${psyms})
`;
+ const psyms = planets.map(p => _pSym(p.planet)).join(' ');
+ bodyHtml += `
${_signIcon(sign)} : ${psyms}
`;
});
});
bodyHtml += '
${psym} @${inDeg}°` +
- (domain ? `, House of ${domain}` : '') + `
`;
+ `${_pSym(pname)} @${inDeg}°${houseHtml}
`;
});
+
+ if (cusps.length) {
+ cusps.forEach((cuspDeg, i) => {
+ const norm = ((cuspDeg % 360) + 360) % 360;
+ if (Math.floor(norm / 30) === idx) {
+ const houseNum = i + 1;
+ const inDeg = _inSignDeg(cuspDeg).toFixed(1);
+ cuspsHtml +=
+ `${_houseOrdinal(houseNum)} House @${inDeg}° ${_signIcon(sign.name)}
`;
+ }
+ });
+ }
}
if (_ttBody) {
_ttBody.innerHTML =
`` +
`` +
`${modality} ${sign.element}` +
vecImg +
`
` +
- (planetsHtml ? `${planetsHtml}
` : '');
+ `` +
+ (planetsHtml ? `${planetsHtml}
` : `—
`) +
+ `
` +
+ `` +
+ (cuspsHtml ? `${cuspsHtml}
` : `—
`);
}
_positionTooltipAtItem('signs', idx);
if (_tooltipEl) {
@@ -595,9 +786,11 @@ const NatusWheel = (() => {
}
function _activateHouse(idx) {
+ _clearActive();
_activeRing = 'houses';
_activeIdx = idx;
const house = _houseItems[idx];
+ _svg.select(`[data-house="${house.num}"]`).classed('nw-house--active', true);
const cusps = (_currentData && (_currentData.houses || {}).cusps) || [];
let planetsHtml = '';
@@ -606,20 +799,26 @@ const NatusWheel = (() => {
.filter(([, p]) => _planetHouse(p.degree, cusps) === house.num)
.sort((a, b) => a[1].degree - b[1].degree);
inHouse.forEach(([pname, pdata]) => {
- const psym = PLANET_SYMBOLS[pname] || pname[0];
const inDeg = _inSignDeg(pdata.degree).toFixed(1);
- const sicon = _signIconSvg(pdata.sign) || (SIGNS.find(s => s.name === pdata.sign) || {}).symbol || '';
- planetsHtml += `${psym} @${inDeg}° ${sicon}
`;
+ planetsHtml += `${_pSym(pname)} @${inDeg}° ${_signIcon(pdata.sign)}
`;
});
}
+ const quadrant = HOUSE_QUADRANT[house.num] || '';
+ const phase = HOUSE_PHASE[house.num] || '';
+
if (_ttBody) {
_ttBody.innerHTML =
`` +
- (planetsHtml ? `${planetsHtml}
` : '');
+ `` +
+ (planetsHtml ? `${planetsHtml}
` : `—
`);
}
_positionTooltipAtItem('houses', idx);
if (_tooltipEl) {
@@ -662,6 +861,8 @@ const NatusWheel = (() => {
if (_aspectsVisible) {
if (_activeRing === 'planets' && _activeIdx !== null) {
_showPlanetAspects(_planetItems[_activeIdx].name);
+ } else if (_activeRing === 'angles' && _activeIdx !== null) {
+ _showAngleAspects(_activeIdx);
}
} else {
_clearAspectLines();
@@ -691,9 +892,9 @@ const NatusWheel = (() => {
e.stopPropagation(); _stepCycle(1);
});
_tooltipEl.querySelector('.nw-asp-don')
- .addEventListener('click', (e) => { e.stopPropagation(); _toggleAspects(); });
+ .addEventListener('click', (e) => { e.stopPropagation(); if (!e.currentTarget.classList.contains('btn-disabled')) _toggleAspects(); });
_tooltipEl.querySelector('.nw-asp-doff')
- .addEventListener('click', (e) => { e.stopPropagation(); _toggleAspects(); });
+ .addEventListener('click', (e) => { e.stopPropagation(); if (!e.currentTarget.classList.contains('btn-disabled')) _toggleAspects(); });
// Sync button to current state in case of redraw mid-session.
_updateAspectToggleUI();
}
@@ -705,15 +906,6 @@ const NatusWheel = (() => {
document.addEventListener('click', (e) => {
if (_activeRing === null) return;
if (_tooltipEl && _tooltipEl.contains(e.target)) return;
- // DON/DOFF have pointer-events:none when disabled — check bounding rect directly
- if (_tooltipEl) {
- for (const cls of ['.nw-asp-don', '.nw-asp-doff', '.nw-tt-prv', '.nw-tt-nxt']) {
- const btn = _tooltipEl.querySelector(cls);
- if (!btn) continue;
- const r = btn.getBoundingClientRect();
- if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return;
- }
- }
_closeTooltip();
}, { signal: _outsideClickController.signal });
}
@@ -750,13 +942,13 @@ const NatusWheel = (() => {
const asc = data.houses.asc;
const mc = data.houses.mc;
const points = [
- { deg: asc, label: 'ASC' },
- { deg: asc + 180, label: 'DSC' },
- { deg: mc, label: 'MC' },
- { deg: mc + 180, label: 'IC' },
+ { deg: asc, label: 'ASC', clickable: true },
+ { deg: asc + 180, label: 'DSC', clickable: false },
+ { deg: mc, label: 'MC', clickable: true },
+ { deg: mc + 180, label: 'IC', clickable: false },
];
const axisGroup = g.append('g').attr('class', 'nw-axes');
- points.forEach(({ deg, label }) => {
+ points.forEach(({ deg, label, clickable }) => {
const a = _toAngle(deg, asc);
const x1 = _cx + R.houseInner * Math.cos(a);
const y1 = _cy + R.houseInner * Math.sin(a);
@@ -766,7 +958,8 @@ const NatusWheel = (() => {
.attr('x1', x1).attr('y1', y1)
.attr('x2', x2).attr('y2', y2)
.attr('class', 'nw-axis-line');
- axisGroup.append('text')
+
+ const textEl = axisGroup.append('text')
.attr('x', _cx + (R.ascMcR + 12) * Math.cos(a))
.attr('y', _cy + (R.ascMcR + 12) * Math.sin(a))
.attr('text-anchor', 'middle')
@@ -774,6 +967,37 @@ const NatusWheel = (() => {
.attr('font-size', `${_r * 0.055}px`)
.attr('class', 'nw-axis-label')
.text(label);
+
+ if (clickable) {
+ const hitR = _r * 0.055 + 6;
+ const hitGroup = axisGroup.append('g')
+ .attr('class', 'nw-angle-group')
+ .attr('data-angle', label)
+ .style('cursor', 'pointer');
+
+ // Invisible hit circle over the label
+ hitGroup.append('circle')
+ .attr('cx', _cx + (R.ascMcR + 12) * Math.cos(a))
+ .attr('cy', _cy + (R.ascMcR + 12) * Math.sin(a))
+ .attr('r', hitR)
+ .attr('fill', 'transparent');
+
+ // Move the text into the clickable group
+ textEl.remove();
+ hitGroup.append('text')
+ .attr('x', _cx + (R.ascMcR + 12) * Math.cos(a))
+ .attr('y', _cy + (R.ascMcR + 12) * Math.sin(a))
+ .attr('text-anchor', 'middle')
+ .attr('dominant-baseline', 'middle')
+ .attr('font-size', `${_r * 0.055}px`)
+ .attr('class', 'nw-axis-label')
+ .text(label);
+
+ hitGroup.on('click', function (event) {
+ event.stopPropagation();
+ _activateAngle(label);
+ });
+ }
});
}
@@ -822,7 +1046,7 @@ const NatusWheel = (() => {
.attr('cx', lx)
.attr('cy', ly)
.attr('r', cr)
- .attr('class', `nw-sign-icon-bg--${sign.element.toLowerCase()}`);
+ .attr('class', `nw-sign-icon-bg nw-sign-icon-bg--${sign.element.toLowerCase()}`);
if (_signPaths[sign.name]) {
signSlice.append('path')
@@ -848,8 +1072,22 @@ const NatusWheel = (() => {
return { i, startA, sa, ea, midA: (sa + ea) / 2 };
});
- houses.forEach(({ i, sa, ea }) => {
- houseGroup.append('path')
+ houses.forEach(({ i, startA, sa, ea, midA }) => {
+ // Per-house group — wraps fill + number so CSS can target both on hover/active
+ const grp = houseGroup.append('g')
+ .attr('class', 'nw-house-group')
+ .attr('data-house', i + 1)
+ .on('click', function (event) {
+ event.stopPropagation();
+ const clickIdx = i;
+ if (_activeRing === 'houses' && _activeIdx === clickIdx) {
+ _closeTooltip();
+ } else {
+ _activateHouse(clickIdx);
+ }
+ });
+
+ grp.append('path')
.attr('transform', `translate(${_cx},${_cy})`)
.attr('d', arc({
innerRadius: R.houseInner,
@@ -857,30 +1095,9 @@ const NatusWheel = (() => {
startAngle: sa + Math.PI / 2,
endAngle: ea + Math.PI / 2,
}))
- .attr('class', i % 2 === 0 ? 'nw-house-fill--even' : 'nw-house-fill--odd')
- .attr('data-house', i + 1)
- .on('click', function (event) {
- event.stopPropagation();
- const clickIdx = i; // _houseItems[i].num === i+1
- if (_activeRing === 'houses' && _activeIdx === clickIdx) {
- _closeTooltip();
- } else {
- _activateHouse(clickIdx);
- }
- });
- });
+ .attr('class', i % 2 === 0 ? 'nw-house-fill--even' : 'nw-house-fill--odd');
- houses.forEach(({ i, startA, midA }) => {
- if (i % 3 === 0) {
- houseGroup.append('line')
- .attr('x1', _cx + R.houseInner * Math.cos(startA))
- .attr('y1', _cy + R.houseInner * Math.sin(startA))
- .attr('x2', _cx + R.signInner * Math.cos(startA))
- .attr('y2', _cy + R.signInner * Math.sin(startA))
- .attr('class', 'nw-house-cusp');
- }
-
- houseGroup.append('text')
+ grp.append('text')
.attr('x', _cx + R.houseNumR * Math.cos(midA))
.attr('y', _cy + R.houseNumR * Math.sin(midA))
.attr('text-anchor', 'middle')
@@ -889,6 +1106,16 @@ const NatusWheel = (() => {
.attr('class', 'nw-house-num')
.attr('pointer-events', 'none')
.text(i + 1);
+
+ // Cusp lines at quadrant boundaries stay in houseGroup (not clickable)
+ if (i % 3 === 0) {
+ houseGroup.append('line')
+ .attr('x1', _cx + R.houseInner * Math.cos(startA))
+ .attr('y1', _cy + R.houseInner * Math.sin(startA))
+ .attr('x2', _cx + R.signInner * Math.cos(startA))
+ .attr('y2', _cy + R.signInner * Math.sin(startA))
+ .attr('class', 'nw-house-cusp');
+ }
});
}
@@ -989,6 +1216,17 @@ const NatusWheel = (() => {
* Build the aspect index (planet → aspects list) and create the persistent
* nw-aspects group. Lines are drawn per-planet on click, not here.
*/
+ /** Compute aspect type + orb between an angle (deg) and a planet (deg), or null. */
+ function _angleAspectWith(angleDeg, planetDeg) {
+ let diff = Math.abs(planetDeg - angleDeg) % 360;
+ if (diff > 180) diff = 360 - diff;
+ for (const { type, angle } of MAJOR_ASPECTS) {
+ const orb = Math.abs(diff - angle);
+ if (orb <= ANGLE_ORB) return { type, orb: +orb.toFixed(1) };
+ }
+ return null;
+ }
+
function _drawAspects(g, data) {
_aspectIndex = {};
Object.entries(data.planets).forEach(([name]) => { _aspectIndex[name] = []; });
@@ -1000,6 +1238,19 @@ const NatusWheel = (() => {
_aspectIndex[planet2].push({ partner: planet1, ...shared });
});
+ // Compute planet-angle aspects client-side (planet always applies to angle).
+ ['ASC', 'MC'].forEach(angleName => {
+ const angleDeg = angleName === 'ASC' ? data.houses.asc : data.houses.mc;
+ _aspectIndex[angleName] = [];
+ Object.entries(data.planets).forEach(([pname, pdata]) => {
+ const asp = _angleAspectWith(angleDeg, pdata.degree);
+ if (!asp) return;
+ const shared = { type: asp.type, orb: asp.orb, applying_planet: pname };
+ _aspectIndex[angleName].push({ partner: pname, ...shared });
+ _aspectIndex[pname].push({ partner: angleName, ...shared });
+ });
+ });
+
_aspectGroup = g.append('g').attr('class', 'nw-aspects');
}
diff --git a/src/static/tests/NatusWheelSpec.js b/src/static/tests/NatusWheelSpec.js
index 8a9ebca..259862c 100644
--- a/src/static/tests/NatusWheelSpec.js
+++ b/src/static/tests/NatusWheelSpec.js
@@ -819,3 +819,137 @@ describe("NatusWheel — house ring click tooltips", () => {
expect(tooltipEl.style.display).toBe("none");
});
});
+
+// ── T15 — ASC / MC angle click tooltips + aspect lines ────────────────────────
+//
+// ASC and MC labels are clickable groups ([data-angle='ASC'] / [data-angle='MC']).
+// Clicking shows a tooltip similar to a planet tooltip:
+// Title: "Ascendant" (ASC) or "Midheaven" (MC)
+// Degree in sign + sign name, plus the house number the angle defines.
+// Aspect list for planets within 10° orb of the angle (client-side computed).
+// Aspect lines drawn to those planets.
+// Clicking same angle again closes the tooltip.
+// Planet tooltips include angle aspects in their own aspect lists.
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
+
+ // ASC=0°(Aries): Sun@8° → Conjunction orb 8° ✓; Mars@188° → Opposition orb 8° ✓
+ // MC=90°(Cancer): Moon@97° → Conjunction orb 7° ✓
+ const ANGLE_CHART = {
+ planets: {
+ Sun: { sign: "Aries", degree: 8.0, retrograde: false },
+ Moon: { sign: "Cancer", degree: 97.0, retrograde: false },
+ Mars: { sign: "Libra", degree: 188.0, retrograde: false },
+ },
+ houses: {
+ cusps: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330],
+ asc: 0.0,
+ mc: 90.0,
+ },
+ elements: { Fire: 2, Stone: 0, Air: 1, Water: 1, Time: 0, Space: 0 },
+ aspects: [],
+ distinctions: {
+ "1":1,"2":0,"3":0,"4":1,"5":0,"6":0,
+ "7":1,"8":0,"9":0,"10":1,"11":0,"12":0,
+ },
+ house_system: "O",
+ };
+
+ let svgEl, tooltipEl;
+
+ beforeEach(() => {
+ svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svgEl.setAttribute("id", "id_natus_svg");
+ svgEl.setAttribute("width", "400");
+ svgEl.setAttribute("height", "400");
+ svgEl.style.width = "400px";
+ svgEl.style.height = "400px";
+ document.body.appendChild(svgEl);
+
+ tooltipEl = document.createElement("div");
+ tooltipEl.id = "id_natus_tooltip";
+ tooltipEl.className = "tt";
+ tooltipEl.style.display = "none";
+ document.body.appendChild(tooltipEl);
+
+ NatusWheel.draw(svgEl, ANGLE_CHART);
+ });
+
+ afterEach(() => {
+ NatusWheel.clear();
+ svgEl.remove();
+ tooltipEl.remove();
+ });
+
+ // T15a — ASC label is a clickable group with data-angle='ASC'
+ it("T15a: clicking [data-angle='ASC'] shows tooltip with 'Ascendant' title and house 1", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ expect(ascGroup).not.toBeNull("expected [data-angle='ASC'] to exist in the SVG");
+
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ expect(tooltipEl.style.display).toBe("block");
+ const text = tooltipEl.textContent;
+ expect(text).toContain("Ascendant");
+ // ASC=0° is the cusp of House 1
+ expect(text).toContain("1");
+ });
+
+ // T15b — MC label is a clickable group with data-angle='MC'
+ it("T15b: clicking [data-angle='MC'] shows tooltip with 'Midheaven' title and house 10", () => {
+ const mcGroup = svgEl.querySelector("[data-angle='MC']");
+ expect(mcGroup).not.toBeNull("expected [data-angle='MC'] to exist in the SVG");
+
+ mcGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ expect(tooltipEl.style.display).toBe("block");
+ const text = tooltipEl.textContent;
+ expect(text).toContain("Midheaven");
+ expect(text).toContain("10");
+ });
+
+ // T15c — ASC tooltip shows degree-in-sign and sign name
+ it("T15c: ASC tooltip shows the in-sign degree and sign of the Ascendant", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ const text = tooltipEl.textContent;
+ // ASC=0° → 0° Aries
+ expect(text).toContain("Aries");
+ expect(text).toContain("0.0");
+ });
+
+ // T15d — clicking same angle a second time hides the tooltip
+ it("T15d: clicking the same angle again hides the tooltip", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ expect(tooltipEl.style.display).toBe("block");
+
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ expect(tooltipEl.style.display).toBe("none");
+ });
+
+ // T15e — ASC tooltip lists planets within 10° orb (client-side computed)
+ it("T15e: ASC tooltip includes aspect rows for planets within 10° orb", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
+ // Sun at 8° → Conjunction (orb 8°) ✓ — _pSym emits data-planet attr
+ expect(bodyHtml).toContain('data-planet="Sun"');
+ // Mars at 188° → Opposition to ASC (0°), angular distance 172° → orb 8° ✓
+ expect(bodyHtml).toContain('data-planet="Mars"');
+ });
+
+ // T15f — planet tooltip includes ASC in its aspect list when within orb
+ it("T15f: planet tooltip for Sun lists ASC as an aspect partner", () => {
+ const sunGroup = svgEl.querySelector("[data-planet='Sun']");
+ expect(sunGroup).not.toBeNull();
+
+ sunGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
+ expect(bodyHtml).toContain("ASC");
+ });
+});
diff --git a/src/static_src/scss/_natus.scss b/src/static_src/scss/_natus.scss
index 00d99c1..65c4900 100644
--- a/src/static_src/scss/_natus.scss
+++ b/src/static_src/scss/_natus.scss
@@ -373,33 +373,33 @@ html.natus-open .natus-modal-wrap {
.nw-axis-line { stroke: rgba(var(--secUser), 1); stroke-width: 1.5px; }
.nw-axis-label { fill: rgba(var(--secUser), 1); }
-// Sign ring — uniform --priMe bg at half opacity
+// Sign ring — uniform --priYl bg at half opacity
.nw-sign--fire,
.nw-sign--stone,
.nw-sign--air,
.nw-sign--water {
- fill: rgba(var(--priMe), 0.25);
+ fill: rgba(var(--priYl), 0.25);
stroke: rgba(var(--terUser), 1);
stroke-width: 0.75px;
}
// Icon bg circles — element fill + matching border
-.nw-sign-icon-bg--fire { fill: rgba(var(--terRd), 0.92); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
-.nw-sign-icon-bg--stone { fill: rgba(var(--priYl), 0.92); stroke: rgba(var(--priLm), 1); stroke-width: 1px; }
-.nw-sign-icon-bg--air { fill: rgba(var(--terGn), 0.92); stroke: rgba(var(--priTk), 1); stroke-width: 1px; }
-.nw-sign-icon-bg--water { fill: rgba(var(--priCy), 0.92); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--fire { fill: rgba(var(--quaRd), 0.92); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--stone { fill: rgba(var(--quaFs), 0.92); stroke: rgba(var(--priMe), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--air { fill: rgba(var(--quiCy), 0.92); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
+.nw-sign-icon-bg--water { fill: rgba(var(--sixId), 0.92); stroke: rgba(var(--priVt), 1); stroke-width: 1px; }
// Inline SVG path icons — per-element colors
-.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
-.nw-sign-icon--stone { fill: rgba(var(--terLm), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
-.nw-sign-icon--air { fill: rgba(var(--priTk), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
-.nw-sign-icon--water { fill: rgba(var(--terBl), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
+.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); }
+.nw-sign-icon--stone { fill: rgba(var(--priMe), 1); }
+.nw-sign-icon--air { fill: rgba(var(--priBl), 1); }
+.nw-sign-icon--water { fill: rgba(var(--priVt), 1); }
-// House ring — uniform --priFs bg
+// House ring — uniform --priGn bg
.nw-house-cusp { stroke: rgba(var(--terUser), 1); stroke-width: 1.2px; }
.nw-house-num { fill: rgba(var(--ninUser), 1); }
-.nw-house-fill--even { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
-.nw-house-fill--odd { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
+.nw-house-fill--even { fill: rgba(var(--secGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
+.nw-house-fill--odd { fill: rgba(var(--quiGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
// Planets — base geometry
.nw-planet-circle,
@@ -431,17 +431,34 @@ html.natus-open .natus-modal-wrap {
.nw-planet-label--pu { fill: rgba(var(--sixPu), 1); stroke: rgba(var(--sixPu), 0.6); }
.nw-rx { fill: rgba(var(--terUser), 1); }
-// Hover and active-lock glow — planet groups and element slice groups
+// Hover and active-lock glow — planet, element, sign, house groups
.nw-planet-group,
-.nw-element-group { cursor: pointer; }
+.nw-element-group,
+.nw-sign-group,
+.nw-house-group { cursor: pointer; }
.nw-planet-group:hover,
.nw-planet-group.nw-planet--active,
+.nw-planet-group.nw-planet--asp-active,
.nw-element-group:hover,
-.nw-element-group.nw-element--active {
+.nw-element-group.nw-element--active,
+.nw-sign-group:hover,
+.nw-sign-group.nw-sign--active,
+.nw-house-group:hover,
+.nw-house-group.nw-house--active {
filter: drop-shadow(0 0 5px rgba(var(--ninUser), 0.9));
}
+// Zodiac icon circles — muted by default, full opacity on hover/active
+.nw-sign-icon-bg { opacity: 0.5; }
+.nw-sign-group:hover .nw-sign-icon-bg,
+.nw-sign-group.nw-sign--active .nw-sign-icon-bg { opacity: 1; }
+
+// House numbers — muted by default, full opacity on hover/active
+.nw-house-num { opacity: 0.75; }
+.nw-house-group:hover .nw-house-num,
+.nw-house-group.nw-house--active .nw-house-num { opacity: 1; }
+
// ── Planet tick lines — hidden until parent group is active ──────────────────
.nw-planet-tick {
fill: none;
@@ -521,6 +538,14 @@ body[class*="-light"] {
font-size: 1.2rem;
opacity: 0.85;
}
+ .tt-angle-sym {
+ font-variant-caps: all-small-caps;
+ font-size: 1.1rem;
+ opacity: 0.85;
+ }
+ .tt-angle-house .tt-ord {
+ margin-left: 0;
+ }
.tt-planet-loc {
display: flex;
align-items: center;
@@ -560,6 +585,19 @@ body[class*="-light"] {
margin-top: 0.1rem;
font-size: 0.85rem;
}
+ .tt-sign-section-header {
+ font-size: 0.65rem;
+ font-weight: 600;
+ opacity: 0.55;
+ letter-spacing: 0.04em;
+ margin-bottom: 0.15rem;
+ }
+ .tt-sign-cusps {
+ display: flex;
+ flex-direction: column;
+ gap: 0.15rem;
+ font-size: 0.85rem;
+ }
// House tooltip — "House of X" | number; planets in house
.tt-house-header {
@@ -581,12 +619,24 @@ body[class*="-light"] {
opacity: 1;
flex-shrink: 0;
}
+ .tt-house-type {
+ display: block;
+ font-size: 0.6em;
+ font-weight: 400;
+ opacity: 0.7;
+ margin-top: 0.1em;
+ }
.tt-house-planets {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.85rem;
}
+ .tt-house-planet-row {
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+ }
// DON|DOFF aspect line toggle — stacked at top-left outside the tooltip box,
// matching the PRV/NXT pattern at the bottom corners.
@@ -595,6 +645,7 @@ body[class*="-light"] {
position: absolute;
left: -1rem;
margin: 0;
+ pointer-events: auto; // override btn-disabled; click must land here, not pass through to SVG
}
.nw-asp-don { top: -1rem; }
.nw-asp-doff { top: 1.2rem; }
@@ -627,12 +678,30 @@ body[class*="-light"] {
.tt-asp-line { flex-shrink: 0; vertical-align: middle; }
- .tt-asp-orb,
+ .tt-asp-orb {
+ margin-left: auto;
+ opacity: 0.6;
+ font-size: 0.65rem;
+ padding-left: 0.5rem;
+ white-space: nowrap;
+ }
.tt-asp-in {
opacity: 0.6;
font-size: 0.65rem;
padding-left: 0.25rem;
}
+ .tt-dim {
+ opacity: 0.6;
+ font-size: 0.65rem;
+ }
+ .tt-ord {
+ font-size: 0.6rem;
+ vertical-align: 0.25rem;
+ line-height: 0;
+ opacity: 1;
+ margin-left: -0.25rem;
+ letter-spacing: 0;
+ }
// Element tooltip — title + square badge
.tt-el-header {
@@ -672,9 +741,14 @@ body[class*="-light"] {
.tt-el-formation-header {
font-size: 0.85rem;
- font-weight: 600;
- text-decoration: underline;
+ font-weight: 700;
margin-top: 0.35rem;
+ .tt-el-formation-label {
+ font-size: 0.65rem;
+ font-weight: 600;
+ opacity: 0.55;
+ letter-spacing: 0.04em;
+ }
}
.tt-el-formation {
@@ -708,6 +782,24 @@ body[class*="-light"] {
.tt-title--el-water { color: rgba(var(--priId), 1); }
}
+// Sign tooltip title + sign icon SVG — element border colors (Stone/Air/Fire/Water schema)
+#id_natus_tooltip,
+#id_natus_tooltip_2 {
+ .tt-title--sign-fire { color: rgba(var(--priOr), 1); }
+ .tt-title--sign-stone { color: rgba(var(--priMe), 1); }
+ .tt-title--sign-air { color: rgba(var(--priBl), 1); }
+ .tt-title--sign-water { color: rgba(var(--priVt), 1); }
+
+ .tt-sign-icon-wrap--fire .tt-sign-icon,
+ .tt-planet-sign-icon--fire .tt-sign-icon { fill: rgba(var(--priOr), 1); }
+ .tt-sign-icon-wrap--stone .tt-sign-icon,
+ .tt-planet-sign-icon--stone .tt-sign-icon { fill: rgba(var(--priMe), 1); }
+ .tt-sign-icon-wrap--air .tt-sign-icon,
+ .tt-planet-sign-icon--air .tt-sign-icon { fill: rgba(var(--priBl), 1); }
+ .tt-sign-icon-wrap--water .tt-sign-icon,
+ .tt-planet-sign-icon--water .tt-sign-icon { fill: rgba(var(--priVt), 1); }
+}
+
// On light palettes — switch to tertiary tier for legibility
body[class*="-light"] #id_natus_tooltip,
body[class*="-light"] #id_natus_tooltip_2 {
diff --git a/src/static_src/tests/NatusWheelSpec.js b/src/static_src/tests/NatusWheelSpec.js
index 8a9ebca..259862c 100644
--- a/src/static_src/tests/NatusWheelSpec.js
+++ b/src/static_src/tests/NatusWheelSpec.js
@@ -819,3 +819,137 @@ describe("NatusWheel — house ring click tooltips", () => {
expect(tooltipEl.style.display).toBe("none");
});
});
+
+// ── T15 — ASC / MC angle click tooltips + aspect lines ────────────────────────
+//
+// ASC and MC labels are clickable groups ([data-angle='ASC'] / [data-angle='MC']).
+// Clicking shows a tooltip similar to a planet tooltip:
+// Title: "Ascendant" (ASC) or "Midheaven" (MC)
+// Degree in sign + sign name, plus the house number the angle defines.
+// Aspect list for planets within 10° orb of the angle (client-side computed).
+// Aspect lines drawn to those planets.
+// Clicking same angle again closes the tooltip.
+// Planet tooltips include angle aspects in their own aspect lists.
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe("NatusWheel — angle (ASC/MC) click tooltips", () => {
+
+ // ASC=0°(Aries): Sun@8° → Conjunction orb 8° ✓; Mars@188° → Opposition orb 8° ✓
+ // MC=90°(Cancer): Moon@97° → Conjunction orb 7° ✓
+ const ANGLE_CHART = {
+ planets: {
+ Sun: { sign: "Aries", degree: 8.0, retrograde: false },
+ Moon: { sign: "Cancer", degree: 97.0, retrograde: false },
+ Mars: { sign: "Libra", degree: 188.0, retrograde: false },
+ },
+ houses: {
+ cusps: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330],
+ asc: 0.0,
+ mc: 90.0,
+ },
+ elements: { Fire: 2, Stone: 0, Air: 1, Water: 1, Time: 0, Space: 0 },
+ aspects: [],
+ distinctions: {
+ "1":1,"2":0,"3":0,"4":1,"5":0,"6":0,
+ "7":1,"8":0,"9":0,"10":1,"11":0,"12":0,
+ },
+ house_system: "O",
+ };
+
+ let svgEl, tooltipEl;
+
+ beforeEach(() => {
+ svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svgEl.setAttribute("id", "id_natus_svg");
+ svgEl.setAttribute("width", "400");
+ svgEl.setAttribute("height", "400");
+ svgEl.style.width = "400px";
+ svgEl.style.height = "400px";
+ document.body.appendChild(svgEl);
+
+ tooltipEl = document.createElement("div");
+ tooltipEl.id = "id_natus_tooltip";
+ tooltipEl.className = "tt";
+ tooltipEl.style.display = "none";
+ document.body.appendChild(tooltipEl);
+
+ NatusWheel.draw(svgEl, ANGLE_CHART);
+ });
+
+ afterEach(() => {
+ NatusWheel.clear();
+ svgEl.remove();
+ tooltipEl.remove();
+ });
+
+ // T15a — ASC label is a clickable group with data-angle='ASC'
+ it("T15a: clicking [data-angle='ASC'] shows tooltip with 'Ascendant' title and house 1", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ expect(ascGroup).not.toBeNull("expected [data-angle='ASC'] to exist in the SVG");
+
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ expect(tooltipEl.style.display).toBe("block");
+ const text = tooltipEl.textContent;
+ expect(text).toContain("Ascendant");
+ // ASC=0° is the cusp of House 1
+ expect(text).toContain("1");
+ });
+
+ // T15b — MC label is a clickable group with data-angle='MC'
+ it("T15b: clicking [data-angle='MC'] shows tooltip with 'Midheaven' title and house 10", () => {
+ const mcGroup = svgEl.querySelector("[data-angle='MC']");
+ expect(mcGroup).not.toBeNull("expected [data-angle='MC'] to exist in the SVG");
+
+ mcGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ expect(tooltipEl.style.display).toBe("block");
+ const text = tooltipEl.textContent;
+ expect(text).toContain("Midheaven");
+ expect(text).toContain("10");
+ });
+
+ // T15c — ASC tooltip shows degree-in-sign and sign name
+ it("T15c: ASC tooltip shows the in-sign degree and sign of the Ascendant", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ const text = tooltipEl.textContent;
+ // ASC=0° → 0° Aries
+ expect(text).toContain("Aries");
+ expect(text).toContain("0.0");
+ });
+
+ // T15d — clicking same angle a second time hides the tooltip
+ it("T15d: clicking the same angle again hides the tooltip", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ expect(tooltipEl.style.display).toBe("block");
+
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+ expect(tooltipEl.style.display).toBe("none");
+ });
+
+ // T15e — ASC tooltip lists planets within 10° orb (client-side computed)
+ it("T15e: ASC tooltip includes aspect rows for planets within 10° orb", () => {
+ const ascGroup = svgEl.querySelector("[data-angle='ASC']");
+ ascGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
+ // Sun at 8° → Conjunction (orb 8°) ✓ — _pSym emits data-planet attr
+ expect(bodyHtml).toContain('data-planet="Sun"');
+ // Mars at 188° → Opposition to ASC (0°), angular distance 172° → orb 8° ✓
+ expect(bodyHtml).toContain('data-planet="Mars"');
+ });
+
+ // T15f — planet tooltip includes ASC in its aspect list when within orb
+ it("T15f: planet tooltip for Sun lists ASC as an aspect partner", () => {
+ const sunGroup = svgEl.querySelector("[data-planet='Sun']");
+ expect(sunGroup).not.toBeNull();
+
+ sunGroup.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+ const bodyHtml = tooltipEl.querySelector(".nw-tt-body").innerHTML;
+ expect(bodyHtml).toContain("ASC");
+ });
+});
diff --git a/src/templates/apps/dashboard/sky.html b/src/templates/apps/dashboard/sky.html
index 85d0d6a..d877c0c 100644
--- a/src/templates/apps/dashboard/sky.html
+++ b/src/templates/apps/dashboard/sky.html
@@ -20,13 +20,13 @@
+ {% if saved_birth_date %}value="{{ saved_birth_date }}"{% endif %}>
+ value="{{ saved_birth_time|default:'12:00' }}">
Local time at birth place. Use 12:00 if unknown.
@@ -121,7 +121,7 @@
const PLACE_DELAY = 400;
const CHART_DELAY = 300;
- NatusWheel.preload();
+ const _preloadReady = NatusWheel.preload();
// ── Status helper ───────────────────────────────────────────────────────
@@ -313,9 +313,18 @@
return m ? m[1] : '';
}
- // ── Auto-preview on load if form is pre-filled from saved sky ───────────
+ // ── Draw saved sky on load; only call PySwiss if no saved chart yet ─────
- if (_formReady()) schedulePreview();
+ const _savedSky = {{ saved_sky_json|safe }};
+ _preloadReady.then(() => {
+ if (_savedSky) {
+ _lastChartData = _savedSky;
+ confirmBtn.disabled = false;
+ NatusWheel.draw(svgEl, _savedSky);
+ } else if (_formReady()) {
+ schedulePreview();
+ }
+ });
})();
{% endblock %}