@jackens/nnn 2024.2.15 → 2024.2.17

package/chartable.d.ts

@@ -6,7 +6,6 @@
  * - `gapX`: X axis spacing
  * - `gapY`: Y axis spacing
  * - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
- * - `id`: chart id
  * - `left`: left padding
  * - `maxY`: number of Y axis lines
  * - `reverse`: flag to reverse all data series
@@ -15,12 +14,11 @@
  * - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
  * - `top`: top padding
  */
-export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, reverse, right, rotate, table, top }: {
+export function chartable({ bottom, gapX, gapY, headerColumn, left, maxY, reverse, right, rotate, table, top }: {
     bottom?: number;
     gapX?: number;
     gapY?: number;
     headerColumn?: boolean;
-    id?: string;
     left?: number;
     maxY?: number;
     reverse?: boolean;
@@ -28,6 +26,6 @@ export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, re
     rotate?: boolean;
     table: HTMLTableElement;
     top?: number;
-}): SVGSVGElement;
+}): Node;
 
 export const tests: {};

package/chartable.js

@@ -1,6 +1,7 @@
 import { s } from './h.js'
 
 const COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
+const PADDING = 15
 
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
@@ -10,7 +11,6 @@ const COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
  * - `gapX`: X axis spacing
  * - `gapY`: Y axis spacing
  * - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
- * - `id`: chart id
  * - `left`: left padding
  * - `maxY`: number of Y axis lines
  * - `reverse`: flag to reverse all data series
@@ -24,7 +24,6 @@ const COLORS = ['#e22', '#e73', '#fc3', '#ad4', '#4d9', '#3be', '#45d', '#c3e']
  *   gapX?: number;
  *   gapY?: number;
  *   headerColumn?: boolean;
- *   id?: string;
  *   left?: number;
  *   maxY?: number;
  *   reverse?: boolean;
@@ -39,16 +38,15 @@ export const chartable = ({
   gapX = 70,
   gapY = 30,
   headerColumn = false,
-  id,
-  left = 15,
+  left = 300,
   maxY = 10,
   reverse = false,
-  right = 200,
+  right = 100,
   rotate = false,
   table,
-  top = 15
+  top = PADDING
 }) => {
-  const /** @type {number[][]} */ zxY = []
+  const /** @type {number[][]} */ zxValues = []
   const /** @type {string[]}   */ xLabels = []
   const /** @type {string[]}   */ zLabels = []
 
@@ -60,8 +58,8 @@ export const chartable = ({
       const value = col.innerText
 
       if (x >= 0 && z >= 0) {
-        zxY[z] = zxY[z] ?? []
-        zxY[z][x] = parseFloat(value)
+        zxValues[z] = zxValues[z] ?? []
+        zxValues[z][x] = parseFloat(value)
       } else if (x >= 0 && z < 0) {
         xLabels[x] = value
       } else if (x < 0 && z >= 0) {
@@ -71,60 +69,90 @@ export const chartable = ({
 
   if (reverse) {
     xLabels.reverse()
-    zxY.forEach(xY => xY.reverse())
+    zxValues.forEach(xValues => xValues.reverse())
   }
 
-  const maxX = zxY[0].length
-  const xi = Array.from({ length: maxX }, (_, x) => x * gapX)
-  const yi = Array.from({ length: maxY }, (_, y) => y * gapY)
-  const w = gapX * (maxX - 1)
-  const h = gapY * (maxY - 1)
-  const svgW = left + w + right
-  const svgH = top + h + bottom
-  const /** @type {import('./h.js').HArgs1} */ graph = ['g', { transform: `translate(${left} ${top})` },
-    ...yi.map(y => ['line', { x1: 0, x2: w, y1: y, y2: y, stroke: '#8888' }]),
-    ...xi.map(x => ['line', { x1: x, x2: x, y1: 0, y2: h, stroke: '#8888' }])]
-  const /** @type {import('./h.js').HArgs1} */ colors = ['g', { transform: `translate(${left + w + 25} ${top + 15})` }]
-  const /** @type {import('./h.js').HArgs1} */ labels = ['g', { transform: `translate(${left + w + 40} ${top + 15})` }]
-
-  zxY.forEach((xY, z) => {
+  const maxX = zxValues[0].length
+  const xPx = Array.from({ length: maxX }, (_, x) => x * gapX)
+  const yPx = Array.from({ length: maxY }, (_, y) => y * gapY)
+  const width = gapX * (maxX - 1)
+  const height = gapY * (maxY - 1)
+  const svgW = left + width + right
+  const svgH = top + height + bottom
+
+  const /** @type {import('./h.js').HArgs1} */ gGraph = ['g', { transform: `translate(${left} ${top})` },
+    ...yPx.map(px => ['line', { x1: 0, x2: width, y1: px, y2: px, stroke: '#8888' }]),
+    ...xPx.map(px => ['line', { x1: px, x2: px, y1: 0, y2: height, stroke: '#8888' }])]
+  const /** @type {import('./h.js').HArgs1} */ gZColors = ['g', { transform: `translate(${PADDING} ${top})` }]
+  const /** @type {import('./h.js').HArgs1} */ gZLabels = ['g', { transform: `translate(${2 * PADDING} ${top})` }]
+  const /** @type {import('./h.js').HArgs} */ svg = ['svg',
+    { viewBox: `0 0 ${svgW} ${svgH}`, width: `${svgW}px`, height: `${svgH}px`, class: 'chartable' },
+    gGraph, gZColors, gZLabels]
+
+  if (xLabels.length > 0) {
+    svg.push(['g', { transform: `translate(${left} ${top + height + PADDING})` },
+      ...xPx.slice(0).map((xp, x) => ['text',
+        rotate
+          ? { x: 0, y: -xp, 'text-anchor': 'start', 'alignment-baseline': 'middle', transform: 'rotate(90)' }
+          : { x: xp, y: PADDING, 'text-anchor': 'middle', 'alignment-baseline': 'middle' },
+        xLabels[x]])])
+  }
+
+  const /** @type {[SVGElement, SVGElement, SVGTextElement][]} */ toUpdate = []
+
+  const onclick = (/** @type {number} */ z) => toUpdate.forEach(([gLeftYLabels, gRightYLabels, zLabel], z2) => {
+    s(gLeftYLabels, { $style: { display: z2 === z ? 'block' : 'none' } })
+    s(gRightYLabels, { $style: { display: z2 === z ? 'block' : 'none' } })
+    s(zLabel, { $style: { textDecoration: z2 === z ? 'underline' : 'none', cursor: 'pointer' } })
+  })
+
+  zxValues.forEach((values, z) => {
     const fill = COLORS[z % COLORS.length]
-    const min = Math.min(...xY.filter(x => !isNaN(x)))
-    const max = Math.max(...xY.filter(x => !isNaN(x)))
+    const minValue = Math.min(...values.filter(value => !isNaN(value)))
+    const maxValue = Math.max(...values.filter(value => !isNaN(value)))
 
-    colors.push(['circle', { cx: 0, cy: gapY * (colors.length - 2), r: 5, fill }])
-    labels.push(['text',
-      { x: 0, y: gapY * (labels.length - 2), 'text-anchor': 'start', 'alignment-baseline': 'middle' },
-      zLabels[z]])
+    const valuesPx = values.map(value => isNaN(value) ? value : height * (maxValue - value) / (maxValue - minValue))
 
-    const y = xY.map(x => isNaN(x) ? x : h * (max - x) / (max - min))
+    const gLeftYLabels = s('g', { transform: `translate(${left - PADDING} ${top})` },
+      ...yPx.map((yp, y) => ['text',
+        { x: 0, y: yp, 'text-anchor': 'end', 'alignment-baseline': 'middle' },
+        (maxValue - (maxValue - minValue) / maxY * (y + 1)).toFixed(2)]))
 
-    xi.forEach((x, i) => {
-      if (!isNaN(y[i])) {
-        graph.push(['g', ['circle', { cx: x, cy: y[i], r: 5, fill }, ['title', `${zLabels[z]}: ${xY[i]}`]]])
+    const gRightYLabels = s('g', { transform: `translate(${left + width + PADDING} ${top})` },
+      ...yPx.map((yp, y) => ['text',
+        { x: 0, y: yp, 'text-anchor': 'start', 'alignment-baseline': 'middle' },
+        (maxValue - (maxValue - minValue) / maxY * (y + 1)).toFixed(2)]))
 
-        if (!isNaN(y[i - 1])) {
-          graph.push(['line', { x1: x, x2: xi[i - 1], y1: y[i], y2: y[i - 1], stroke: fill }])
+    svg.push(gLeftYLabels, gRightYLabels)
+
+    const zLabel = s('text', {
+      x: 0,
+      y: gapY * (gZLabels.length - 2),
+      'text-anchor': 'start',
+      'alignment-baseline': 'middle',
+      $onclick: () => onclick(z)
+    },
+    zLabels[z])
+
+    gZLabels.push(zLabel)
+    gZColors.push(['circle', { cx: 0, cy: gapY * (gZColors.length - 2), r: 5, fill }])
+
+    toUpdate.push([gLeftYLabels, gRightYLabels, zLabel])
+
+    xPx.forEach((px, x) => {
+      if (!isNaN(valuesPx[x])) {
+        gGraph.push(['g', ['circle', { cx: px, cy: valuesPx[x], r: 5, fill }]])
+
+        if (!isNaN(valuesPx[x - 1])) {
+          gGraph.push(['line', { x1: px, x2: xPx[x - 1], y1: valuesPx[x], y2: valuesPx[x - 1], stroke: fill }])
         }
       }
     })
   })
 
-  return s('svg', {
-    viewBox: `0 0 ${svgW} ${svgH}`,
-    width: `${svgW}px`,
-    height: `${svgH}px`,
-    class: 'chartable'
-  }, id != null ? { id } : null,
-  graph, colors, labels,
-  xLabels.length > 0
-    ? ['g', { transform: `translate(${left} ${top + h + 15})` },
-        ...xi.slice(0).map((x, i) => ['text', rotate
-          ? { x: 0, y: -x, 'text-anchor': 'start', 'alignment-baseline': 'hanging', transform: 'rotate(90)' }
-          : { x, y: 0, 'text-anchor': 'middle', 'alignment-baseline': 'hanging' },
-        xLabels[i]])]
-    : null
-  )
+  onclick(0)
+
+  return s(...svg)
 }
 
 export const tests = {}

package/package.json

@@ -40,5 +40,5 @@
   "types": "nnn.d.ts",
   "name": "@jackens/nnn",
   "type": "module",
-  "version": "2024.2.15"
+  "version": "2024.2.17"
 }

package/readme.md

@@ -2,7 +2,7 @@
 
 Jackens’ JavaScript helpers.
 
-<sub>Version: <code class="version">2024.2.15</code></sub>
+<sub>Version: <code class="version">2024.2.17</code></sub>
 
 ## Installation
 
@@ -103,12 +103,11 @@ The type of arguments of the `jcss` helper.
 ### chartable
 
 ```ts
-export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, reverse, right, rotate, table, top }: {
+export function chartable({ bottom, gapX, gapY, headerColumn, left, maxY, reverse, right, rotate, table, top }: {
     bottom?: number;
     gapX?: number;
     gapY?: number;
     headerColumn?: boolean;
-    id?: string;
     left?: number;
     maxY?: number;
     reverse?: boolean;
@@ -116,7 +115,7 @@ export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, re
     rotate?: boolean;
     table: HTMLTableElement;
     top?: number;
-}): SVGSVGElement;
+}): Node;
 ```
 
 A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
@@ -126,7 +125,6 @@ Options:
 - `gapX`: X axis spacing
 - `gapY`: Y axis spacing
 - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
-- `id`: chart id
 - `left`: left padding
 - `maxY`: number of Y axis lines
 - `reverse`: flag to reverse all data series