${
aspects.length > 0
? html`${renderTablist({
items: [
{ id: 'wheel', label: this.t('Wheel') },
{ id: 'grid', label: this.t('Aspect grid') },
],
active: view,
onSelect: (v) => {
this.view = v;
},
label: this.t('Natal chart views'),
idPrefix: 'natal',
controls: true,
})}
${view === 'wheel' ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
`
: this.renderWheel(planets, aspects)
}
${this.t('Positions')}: ${formatNumber(this.effectiveLang(), planets.length, 0)}
${aspects.length > 0 ? html`${this.t('{{count}} aspects', { count: aspects.length })}` : nothing}
${
// The system names the CUSPS, so it is only true while there are
// cusps. Without them the caveat takes its place rather than sitting
// beside it and contradicting it.
this.hasCusps && data.houseSystem
? html`${this.t('{{system}} houses', { system: data.houseSystem })}`
: html`${this.t('Equal sectors from the Ascendant, no house cusps in this response')}`
}
${
aspects.length > 0
? html`${this.t('Harmonious aspects')}
${this.t('Challenging aspects')}`
: nothing
}
${this.renderPositionDetails(data)}
${this.renderDetails()}
${
// Ungated on purpose. The figures are chart geometry, not a reading, and
// only the paragraph inside each card answers to hide-readings. Do NOT
// wrap this call in the flag: the reasoning, and the escape hatch for a
// page that wants the block gone anyway, are on renderPatterns.
this.renderPatterns()
}
${this.renderAspectDetails(aspects)}
${this.renderInterpretations()}
`;
}
private renderWheel(planets: PlanetEntry[], aspects: AspectEntry[]) {
return this.viewport.renderChartViewport(
html`
${
summary?.dominantElement || summary?.dominantModality
? html`
${summary.dominantElement ? html`${this.t('Dominant element')}: ${display(summary, 'dominantElement')}` : nothing}
${summary.dominantModality ? html`${this.t('Dominant modality')}: ${display(summary, 'dominantModality')}` : nothing}
`
: nothing
}
${
ai
? html`
${this.t('Harmonious: {{count}}', { count: ai.harmonious })}
${this.t('Challenging: {{count}}', { count: ai.challenging })}
${this.t('Neutral: {{count}}', { count: ai.neutral })}
`
: nothing
}
${
retrogrades.length > 0
? html`
${retrogrades.map(({ value, label }) => {
// `?? ''` and never a slice: the full name is printed right
// beside the glyph, so a miss must drop the glyph, not invent
// one. This is the site that shipped `No North Node R`,
// `So South Node R` and `Bl Black Moon Lilith` on a live chart.
const glyph = planetGlyph(value) ?? '';
return html`${glyph} ${label} R`;
})}
`
: nothing
}
${
// Prose about the aspect balance, not the balance itself: the counts
// above it are the data and stay.
ai?.summary && !this.hideReadings
? html`
${ai.summary}
`
: nothing
}
${this.renderElementModalityGrid()}