@jackens/nnn 2024.2.9 → 2024.2.11

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/h.d.ts

@@ -6,14 +6,14 @@ export type HArgs = [string | Node, ...HArgs1[]];
 /**
  * The type of arguments of the `h` and `s` helpers.
  */
-export type HArgs1 = Record<string, any> | null | undefined | Node | string | number | [string | Node, ...HArgs1[]];
+export type HArgs1 = Partial<Record<PropertyKey, any>> | null | undefined | Node | string | number | [string | Node, ...HArgs1[]];
 
 /**
  * A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `s`).
  *
  * - The first argument of type `string` specifies the tag of the element to be created.
  * - The first argument of type `Node` specifies the element to be modified.
- * - All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+ * - All other arguments of type `Partial<Record<PropertyKey, any>>` are mappings of attributes and properties.
  *   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
  *   (Note that `$` is not a valid attribute name character.)
  *   All other keys specify *attributes* to be set by `setAttribute`.
@@ -32,7 +32,7 @@ export function h(tagOrNode: string | Node, ...args1: HArgs1[]): Node;
  *
  * - The first argument of type `string` specifies the tag of the element to be created.
  * - The first argument of type `Node` specifies the element to be modified.
- * - All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+ * - All other arguments of type `Partial<Record<PropertyKey, any>>` are mappings of attributes and properties.
  *   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
  *   (Note that `$` is not a valid attribute name character.)
  *   All other keys specify *attributes* to be set by `setAttributeNS`.

package/h.js

@@ -4,7 +4,7 @@ import { is } from './is.js'
 /**
  * The type of arguments of the `h` and `s` helpers.
  *
- * @typedef {Record<string, any> | null | undefined | Node | string | number | HArgs} HArgs1
+ * @typedef {Partial<Record<PropertyKey, any>> | null | undefined | Node | string | number | HArgs} HArgs1
  */
 
 /**
@@ -113,7 +113,7 @@ const _h = (/** @type {string?=} */ namespaceURI) => {
  *
  * - The first argument of type `string` specifies the tag of the element to be created.
  * - The first argument of type `Node` specifies the element to be modified.
- * - All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+ * - All other arguments of type `Partial<Record<PropertyKey, any>>` are mappings of attributes and properties.
  *   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
  *   (Note that `$` is not a valid attribute name character.)
  *   All other keys specify *attributes* to be set by `setAttribute`.
@@ -130,7 +130,7 @@ export const h = _h()
  *
  * - The first argument of type `string` specifies the tag of the element to be created.
  * - The first argument of type `Node` specifies the element to be modified.
- * - All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+ * - All other arguments of type `Partial<Record<PropertyKey, any>>` are mappings of attributes and properties.
  *   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
  *   (Note that `$` is not a valid attribute name character.)
  *   All other keys specify *attributes* to be set by `setAttributeNS`.

package/jcss.d.ts

@@ -8,7 +8,7 @@ export type JcssNode = {
 /**
  * The type of arguments of the `jcss` helper.
  */
-export type JcssRoot = Partial<Record<string, JcssNode>>;
+export type JcssRoot = Partial<Record<PropertyKey, JcssNode>>;
 
 /**
  * A simple CSS-in-JS helper.

package/jcss.js

@@ -11,7 +11,7 @@ import { is } from './is.js'
 /**
  * The type of arguments of the `jcss` helper.
  *
- * @typedef {Partial<Record<string, JcssNode>>} JcssRoot
+ * @typedef {Partial<Record<PropertyKey, JcssNode>>} JcssRoot
  */
 
 const _jcss = (

package/jsOnParse.d.ts

@@ -13,7 +13,7 @@
  * handlers['«handlerName»'](...«params»)
  * ```
  */
-export function jsOnParse(handlers: Partial<Record<string, Function>>, text: string): any;
+export function jsOnParse(handlers: Partial<Record<PropertyKey, Function>>, text: string): any;
 
 export namespace tests {
     function jsOnParse(): void;

package/jsOnParse.js

@@ -18,7 +18,7 @@ import { is } from './is.js'
  * ```
  */
 export const jsOnParse = (
-  /** @type {Partial<Record<string, Function>>} */ handlers,
+  /** @type {Partial<Record<PropertyKey, Function>>} */ handlers,
   /** @type {string}                   */ text
 ) => JSON.parse(text, (key, value) => {
   if (is(Object, value)) {

package/locale.d.ts

@@ -1,7 +1,7 @@
 /**
  * Language translations helper.
  */
-export function locale(map: Partial<Record<string, Partial<Record<string, string>>>>, defaultVersion: string): (text: string, version?: string) => string;
+export function locale(map: Partial<Record<PropertyKey, Partial<Record<PropertyKey, string>>>>, defaultVersion: string): (text: string, version?: string) => string;
 
 export namespace tests {
     function locale(): void;

package/locale.js

@@ -4,7 +4,7 @@ import { is } from './is.js'
  * Language translations helper.
  */
 export const locale = (
-  /** @type {Partial<Record<string, Partial<Record<string, string>>>>} */ map,
+  /** @type {Partial<Record<PropertyKey, Partial<Record<PropertyKey, string>>>>} */ map,
   /** @type {string} */ defaultVersion
 ) => (
   /** @type {string} */ text,

package/package.json

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

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.11</code></sub>
 
 ## Installation
 
@@ -75,7 +75,7 @@ The type of arguments of the `h` and `s` helpers.
 ### HArgs1
 
 ```ts
-export type HArgs1 = Record<string, any> | null | undefined | Node | string | number | [string | Node, ...HArgs1[]];
+export type HArgs1 = Partial<Record<PropertyKey, any>> | null | undefined | Node | string | number | [string | Node, ...HArgs1[]];
 ```
 
 The type of arguments of the `h` and `s` helpers.
@@ -93,7 +93,7 @@ The type of arguments of the `jcss` helper.
 ### JcssRoot
 
 ```ts
-export type JcssRoot = Partial<Record<string, JcssNode>>;
+export type JcssRoot = Partial<Record<PropertyKey, JcssNode>>;
 ```
 
 The type of arguments of the `jcss` helper.
@@ -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
 
@@ -260,7 +254,7 @@ A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style help
 
 - The first argument of type `string` specifies the tag of the element to be created.
 - The first argument of type `Node` specifies the element to be modified.
-- All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+- All other arguments of type `Partial<Record<PropertyKey, any>>` are mappings of attributes and properties.
   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
   (Note that `$` is not a valid attribute name character.)
   All other keys specify *attributes* to be set by `setAttribute`.
@@ -652,7 +646,7 @@ console.assert(actual === expected)
 ### jsOnParse
 
 ```ts
-export function jsOnParse(handlers: Partial<Record<string, Function>>, text: string): any;
+export function jsOnParse(handlers: Partial<Record<PropertyKey, Function>>, text: string): any;
 ```
 
 `JSON.parse` with “JavaScript turned on”.
@@ -717,7 +711,7 @@ console.assert(eq(actual, expected))
 ### locale
 
 ```ts
-export function locale(map: Partial<Record<string, Partial<Record<string, string>>>>, defaultVersion: string): (text: string, version?: string) => string;
+export function locale(map: Partial<Record<PropertyKey, Partial<Record<PropertyKey, string>>>>, defaultVersion: string): (text: string, version?: string) => string;
 ```
 
 Language translations helper.
@@ -888,7 +882,7 @@ A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style help
 
 - The first argument of type `string` specifies the tag of the element to be created.
 - The first argument of type `Node` specifies the element to be modified.
-- All other arguments of type `Record<string, any>` are mappings of attributes and properties.
+- All other arguments of type `Partial<Record<PropertyKey, any>>` are mappings of attributes and properties.
   Keys starting with `$` specify *properties* (without the leading `$`) to be set on the element being created or modified.
   (Note that `$` is not a valid attribute name character.)
   All other keys specify *attributes* to be set by `setAttributeNS`.