@luangiai/laso-tuvi

Tử Vi (Purple Star Astrology) chart renderer — HTML string builder with interactive highlights.

Installation

npm install @luangiai/laso-tuvi

Usage

import { renderChart, initChartInteractions, extractChartData } from '@luangiai/laso-tuvi'
import '@luangiai/laso-tuvi/chart.css'

// Parse API response
const chartData = extractChartData(apiResponse)

if (chartData) {
  // Render chart as HTML string
  const html = renderChart(chartData.diaBan, chartData.thienBan)

  // Mount to DOM
  const container = document.getElementById('chart')
  container.innerHTML = html

  // Enable interactive highlights (Tam Hợp, Xung Chiếu, Lục Hợp)
  const cleanup = initChartInteractions(container)

  // Call cleanup() to remove event listeners when done
}

API

renderChart(diaBan, thienBan, options?)

Returns an HTML string of the 12-palace Tử Vi chart.

| Parameter | Type | Description | |-----------|------|-------------| | diaBan | DiaBan | Earthly palace grid (12 palaces with stars) | | thienBan | ThienBan | Heavenly information (birth data, stems, branches) | | options | RenderChartOptions | Optional. { websiteUrl?: string } |

initChartInteractions(root)

Adds mouse and touch interactivity to a rendered chart. Highlights palace relationships on hover/tap:

• Tam Hợp — harmony triangles (purple)
• Xung Chiếu — opposition lines (red)
• Lục Hợp — harmony pairs

Returns a cleanup function that removes all listeners and SVG overlays.

extractChartData(data)

Parses API responses into { diaBan, thienBan }. Handles multiple response wrapper shapes. Returns null if the data structure is invalid.

Local Development

git clone [email protected]:agentics-vn/laso-tuvi.git
cd laso-tuvi
npm install
npm run build

License

MIT