@santi020k/lumen-astro 3.0.0 → 4.0.0

package/internal/ComparisonChart.astro

@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import { createLumenComparisonGeometry, getLumenChartToneClassName, type LumenChartLabels, type LumenComparisonDatum, type LumenComparisonOptions, resolveLumenChartLabels } from '@santi020k/lumen-core'
+
+import Chart from '../components/Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'>, LumenComparisonOptions {
+  data: readonly LumenComparisonDatum[]
+  className?: string
+  heading?: string
+  description?: string
+  caption?: string
+  presentation?: 'bare' | 'default'
+  summary?: string
+  formatValue?: (value: number) => string
+  labels?: Partial<LumenChartLabels>
+  referenceLabel?: string
+  valueLabel?: string
+  showTable?: boolean
+}
+
+const { data, domain, paired = false, formatValue = String, labels, referenceLabel = 'Before', valueLabel, showTable = true, class: classProp, className, ...props } = Astro.props
+const text = resolveLumenChartLabels(labels)
+const title = valueLabel ?? text.value
+const model = createLumenComparisonGeometry(data, { domain, paired })
+const format = (value: number | null) => value === null ? text.notAvailable : formatValue(value)
+---
+<Chart
+{...props}
+class:list={['ui-comparison-chart', classProp, className]}
+>
+  {!model.valid || model.rows.length === 0 ?
+<p class="ui-chart__empty" role="status">{model.valid ? text.empty : text.invalidData}</p> :
+(
+<>
+    <div class="ui-comparison-chart__legend"><span>{text.category}</span><span>{paired ? `${referenceLabel} → ${title}` : title}</span></div>
+    <ul class="ui-comparison-chart__rows">
+      {model.rows.map((row, index) => (
+<li class={getLumenChartToneClassName(row.tone, index)}>
+        <div class="ui-comparison-chart__label"><span>{row.label}</span><span>{paired && <>{format(row.reference)} <span aria-hidden="true">→</span> </>}<strong>{format(row.value)}</strong></span></div>
+        <div class="ui-comparison-chart__track" aria-hidden="true">
+          {row.valuePosition !== null && row.referencePosition !== null && (
+<span
+class="ui-comparison-chart__connector"
+style={{ left: `${row.start * 100}%`, width: `${row.width * 100}%` }}
+/>
+)}
+          {paired && row.referencePosition !== null && (
+<span
+class="ui-comparison-chart__reference"
+style={{ left: `${row.referencePosition * 100}%` }}
+/>
+)}
+          {row.valuePosition !== null && <span class="ui-comparison-chart__dot" style={{ left: `${row.valuePosition * 100}%` }} />}
+        </div>
+      </li>
+))}
+    </ul>
+    <div class="ui-bullet-chart__ticks" aria-hidden="true">{model.ticks.map(tick => <span>{formatValue(tick)}</span>)}</div>
+    {showTable && (
+<details class="ui-chart__data"><summary>{text.viewData}</summary><div role="group" tabindex="0" aria-label={text.chartData}><table>
+      <thead><tr><th scope="col">{text.category}</th>{paired && <th scope="col">{referenceLabel}</th>}<th scope="col">{title}</th></tr></thead>
+      <tbody>{model.rows.map(row => <tr><th scope="row">{row.label}</th>{paired && <td>{format(row.reference)}</td>}<td>{format(row.value)}</td></tr>)}</tbody>
+    </table></div></details>
+)}
+  </>
+)}
+</Chart>

package/internal/IntervalChart.astro

@@ -0,0 +1,66 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+import {
+  type createLumenHistogramGeometry,
+  type createLumenWaterfallGeometry,
+  formatLumenChartSummary,
+  getLumenChartToneClassName,
+  type LumenChartLabels,
+  resolveLumenChartLabels
+} from '@santi020k/lumen-core'
+
+import Chart from '../components/Chart.astro'
+
+interface Props extends HTMLAttributes<'figure'> {
+  caption?: string | undefined
+  className?: string | undefined
+  description?: string | undefined
+  heading?: string | undefined
+  labels?: Partial<LumenChartLabels> | undefined
+  model: ReturnType<typeof createLumenWaterfallGeometry> | ReturnType<typeof createLumenHistogramGeometry>
+  formatValue: (value: number) => string
+  formatBoundary: (value: number) => string
+  presentation?: 'bare' | 'default' | undefined
+  showTable?: boolean | undefined
+  summary?: string | undefined
+  valueLabel: string
+}
+
+const { model, labels, formatValue, formatBoundary, showTable = true, summary, valueLabel, ...rest } = Astro.props
+const text = resolveLumenChartLabels(labels)
+const data = model.marks.map(mark => ({ x: mark.key, xLabel: mark.label, y: mark.value }))
+const factualSummary = formatLumenChartSummary([{ id: 'values', label: valueLabel, data }], formatValue, text)
+const hasData = model.marks.length > 0
+---
+
+<Chart {...rest} summary={summary ?? (model.valid ? factualSummary : text.invalidData)}>
+  {!hasData && <p class="ui-chart__empty" role="status">{model.valid ? text.empty : text.invalidData}</p>}
+  {hasData && (
+<>
+    <p class="ui-chart__axis-title">{valueLabel}</p>
+    <div class="ui-chart__plot" role="region" tabindex="0" aria-label={rest['aria-label'] ?? rest.heading ?? text.chartData}>
+      <svg aria-hidden="true" viewBox={`0 0 ${model.width} ${model.height}`}>
+        <g class="ui-chart__grid">{model.ticks.map(tick => <><line x1={model.left} x2={model.right} y1={model.y(tick)} y2={model.y(tick)} /><text x={model.left - 8} y={model.y(tick)}>{formatValue(tick)}</text></>)}</g>
+        <g class="ui-chart__axis-labels">{model.categoryTicks.map(tick => <text text-anchor={tick.textAnchor} x={tick.position} y={model.height - 16}>{tick.label}</text>)}</g>
+        {'connectors' in model && model.connectors.map(connector => (
+<line
+class="ui-waterfall-chart__connector"
+x1={connector.x1}
+x2={connector.x2}
+y1={connector.y}
+y2={connector.y}
+/>
+))}
+        <g class="ui-bar-chart__marks">{model.marks.map(mark => <rect class={getLumenChartToneClassName(mark.tone)} x={mark.x} y={mark.y} width={mark.width} height={mark.height}><title>{mark.label}: {formatValue(mark.value)}</title></rect>)}</g>
+      </svg>
+    </div>
+  </>
+)}
+  {showTable && hasData && (
+<details class="ui-chart__data"><summary>{text.viewData}</summary><div role="group" tabindex="0" aria-label={text.chartData}><table>
+    <thead><tr><th scope="col">{text.category}</th><th scope="col">{text.start}</th><th scope="col">{text.end}</th><th scope="col">{valueLabel}</th>{'bins' in model && model.frequency === 'density' && <th scope="col">{text.count}</th>}</tr></thead>
+    <tbody>{model.marks.map((mark, index) => <tr><th scope="row">{mark.label}</th><td>{formatBoundary(mark.start)}</td><td>{formatBoundary(mark.end)}</td><td>{formatValue(mark.value)}</td>{'bins' in model && model.frequency === 'density' && <td>{model.bins[index]?.count}</td>}</tr>)}</tbody>
+  </table></div></details>
+)}
+</Chart>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -31,6 +31,7 @@
   "files": [
     "bin",
     "components",
+    "internal",
     "runtime",
     "styles",
     "index.ts",
@@ -42,15 +43,16 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen": "^3.0.0",
-    "@santi020k/lumen-core": "^3.0.0",
+    "@santi020k/lumen": "^4.0.0",
+    "@santi020k/lumen-core": "^4.0.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@astrojs/ts-plugin": "^1.10.12",
     "astro": "^7.3.5",
+    "jsdom": "^30.1.1",
     "typescript": "~6.0.3",
-    "vitest": "^5.0.1"
+    "vitest": "^5.0.3"
   },
   "peerDependencies": {
     "astro": ">=5"