@jackens/nnn 2024.2.9 → 2024.2.10

package/chartable.d.ts

@@ -6,38 +6,32 @@
  * - `gapX`: X axis spacing
  * - `gapY`: Y axis spacing
  * - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
- * - `headerRow`: flag indicating that `table` has a header row (with data series labels)
  * - `id`: chart id
  * - `left`: left padding (for data series labels)
  * - `maxY`: number of Y axis lines
  * - `reverse`: flag to reverse all data series
  * - `right`: right padding (for data series labels)
+ * - `rotate`: flag to rotate X axis labels
  * - `singleScale`: flag to force single scale
  * - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
  * - `title`: chart title
  * - `top`: top padding (for the title)
- * - `xLabels`: X axis labels
- * - `zLabels`: data series labels
- * - `zxY`: chart data
  */
-export function chartable({ bottom, gapX, gapY, headerColumn, headerRow, id, left, maxY, reverse, right, singleScale, table, title, top, xLabels, zLabels, zxY }?: {
+export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, reverse, right, rotate, singleScale, table, title, top }: {
     bottom?: number;
     gapX?: number;
     gapY?: number;
     headerColumn?: boolean;
-    headerRow?: boolean;
     id?: string;
     left?: number;
     maxY?: number;
     reverse?: boolean;
     right?: number;
+    rotate?: boolean;
     singleScale?: boolean;
-    table?: HTMLTableElement;
+    table: HTMLTableElement;
     title?: string;
     top?: number;
-    xLabels?: string[];
-    zLabels?: string[];
-    zxY?: number[][];
 }): SVGSVGElement;
 
 export const tests: {};

package/chartable.js

@@ -10,38 +10,32 @@ 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)
- * - `headerRow`: flag indicating that `table` has a header row (with data series labels)
  * - `id`: chart id
  * - `left`: left padding (for data series labels)
  * - `maxY`: number of Y axis lines
  * - `reverse`: flag to reverse all data series
  * - `right`: right padding (for data series labels)
+ * - `rotate`: flag to rotate X axis labels
  * - `singleScale`: flag to force single scale
  * - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
  * - `title`: chart title
  * - `top`: top padding (for the title)
- * - `xLabels`: X axis labels
- * - `zLabels`: data series labels
- * - `zxY`: chart data
  *
  * @param {{
  *   bottom?: number;
  *   gapX?: number;
  *   gapY?: number;
  *   headerColumn?: boolean;
- *   headerRow?: boolean;
  *   id?: string;
  *   left?: number;
  *   maxY?: number;
  *   reverse?: boolean;
  *   right?: number;
+ *   rotate?: boolean;
  *   singleScale?: boolean;
- *   table?: HTMLTableElement;
+ *   table: HTMLTableElement;
  *   title?: string;
  *   top?: number;
- *   xLabels?: string[];
- *   zLabels?: string[];
- *   zxY?: number[][];
  * }} options
  */
 export const chartable = ({
@@ -49,42 +43,37 @@ export const chartable = ({
   gapX = 70,
   gapY = 30,
   headerColumn = false,
-  headerRow = true,
   id,
   left = 200,
   maxY = 10,
   reverse = false,
   right = 200,
+  rotate = false,
   singleScale = false,
   table,
   title,
-  top = 70,
-  xLabels = [],
-  zLabels = [],
-  zxY = []
-} = {}) => {
-  if (table != null) {
-    const zxYNotPassed = !zxY.length
-    const xLabelsNotPassed = !xLabels.length
-    const zLabelsNotPassed = !zLabels.length
-
-    table.querySelectorAll('tr').forEach((row, r) =>
-      // @ts-ignore
-      row.querySelectorAll('td,th').forEach((/** @type {HTMLTableCellElement} */ col, c) => {
-        const x = r - +headerRow
-        const z = c - +headerColumn
-        const value = col.innerText
-
-        if (x >= 0 && z >= 0 && zxYNotPassed) {
-          zxY[z] = zxY[z] ?? []
-          zxY[z][x] = parseFloat(value)
-        } else if (x >= 0 && z < 0 && xLabelsNotPassed) {
-          xLabels[x] = value
-        } else if (x < 0 && z >= 0 && zLabelsNotPassed) {
-          zLabels[z] = value
-        }
-      }))
-  }
+  top = 70
+}) => {
+  const /** @type {number[][]} */ zxY = []
+  const /** @type {string[]}   */ xLabels = []
+  const /** @type {string[]}   */ zLabels = []
+
+  table.querySelectorAll('tr').forEach((row, r) =>
+    // @ts-ignore
+    row.querySelectorAll('td,th').forEach((/** @type {HTMLTableCellElement} */ col, c) => {
+      const x = r - 1
+      const z = c - +headerColumn
+      const value = col.innerText
+
+      if (x >= 0 && z >= 0) {
+        zxY[z] = zxY[z] ?? []
+        zxY[z][x] = parseFloat(value)
+      } else if (x >= 0 && z < 0) {
+        xLabels[x] = value
+      } else if (x < 0 && z >= 0) {
+        zLabels[z] = value
+      }
+    }))
 
   if (reverse) {
     xLabels.reverse()
@@ -217,9 +206,10 @@ export const chartable = ({
   xLabels.length > 0
     ? ['g', { transform: `translate(${left} ${top + h})` },
         ['g', { class: 'chartable-x-labels', transform: 'translate(0 15)' },
-          ...xi.map((x, i) => ['text',
-            { x, y: 0, 'text-anchor': 'middle', 'alignment-baseline': 'hanging' },
-            xLabels[i]])]]
+          ...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
   )
 }

package/package.json

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

package/readme.md

@@ -2,7 +2,7 @@
 
 Jackens’ JavaScript helpers.
 
-<sub>Version: <code class="version">2024.2.9</code></sub>
+<sub>Version: <code class="version">2024.2.10</code></sub>
 
 ## Installation
 
@@ -101,24 +101,21 @@ The type of arguments of the `jcss` helper.
 ### chartable
 
 ```ts
-export function chartable({ bottom, gapX, gapY, headerColumn, headerRow, id, left, maxY, reverse, right, singleScale, table, title, top, xLabels, zLabels, zxY }?: {
+export function chartable({ bottom, gapX, gapY, headerColumn, id, left, maxY, reverse, right, rotate, singleScale, table, title, top }: {
     bottom?: number;
     gapX?: number;
     gapY?: number;
     headerColumn?: boolean;
-    headerRow?: boolean;
     id?: string;
     left?: number;
     maxY?: number;
     reverse?: boolean;
     right?: number;
+    rotate?: boolean;
     singleScale?: boolean;
-    table?: HTMLTableElement;
+    table: HTMLTableElement;
     title?: string;
     top?: number;
-    xLabels?: string[];
-    zLabels?: string[];
-    zxY?: number[][];
 }): SVGSVGElement;
 ```
 
@@ -129,19 +126,16 @@ Options:
 - `gapX`: X axis spacing
 - `gapY`: Y axis spacing
 - `headerColumn`: flag indicating that `table` has a header column (with X axis labels)
-- `headerRow`: flag indicating that `table` has a header row (with data series labels)
 - `id`: chart id
 - `left`: left padding (for data series labels)
 - `maxY`: number of Y axis lines
 - `reverse`: flag to reverse all data series
 - `right`: right padding (for data series labels)
+- `rotate`: flag to rotate X axis labels
 - `singleScale`: flag to force single scale
 - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
 - `title`: chart title
 - `top`: top padding (for the title)
-- `xLabels`: X axis labels
-- `zLabels`: data series labels
-- `zxY`: chart data
 
 ### eq