@jackens/nnn 2024.3.3 → 2024.3.8

package/nnn.d.ts

@@ -1,35 +1,3 @@
-/**
- * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
- *
- * Options:
- * - `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
- * - `headerColumn`: flag indicating that `table` has a header column with X axis labels
- * - `xGap`: X axis spacing
- * - `xLabelsMinHeight`: minimal height of X axis labels
- * - `xLabelsRotate`: flag to rotate X axis labels
- * - `xReverse`: flag to reverse all data series
- * - `yGap`: Y axis spacing
- * - `yLabelsLeftMinWidth`: minimal width of Y axis left labels
- * - `yLabelsRightMinWidth`: minimal width of Y axis right labels
- * - `yMax`: number of Y axis lines
- * - `zLabelsMinWidth`: minimal width of data series labels
- * - `zyMappings`: mappings per data series
- */
-export declare const chartable: ({ table, headerColumn, xGap, xLabelsMinHeight, xLabelsRotate, xReverse, yGap, yLabelsLeftMinWidth, yLabelsRightMinWidth, yMax, zLabelsMinWidth, zyMappings }: {
-    table: HTMLTableElement;
-    headerColumn?: boolean | undefined;
-    xGap?: number | undefined;
-    xLabelsMinHeight?: number | undefined;
-    xLabelsRotate?: boolean | undefined;
-    xReverse?: boolean | undefined;
-    yGap?: number | undefined;
-    yLabelsLeftMinWidth?: number | undefined;
-    yLabelsRightMinWidth?: number | undefined;
-    yMax?: number | undefined;
-    zLabelsMinWidth?: number | undefined;
-    zyMappings?: [(label: string) => number, (value: number) => string][] | undefined;
-}) => SVGSVGElement;
-
 /**
  * A helper that checks equality of the given arguments.
  */
@@ -107,6 +75,11 @@ export declare const s: {
     (tagOrNode: string | Node, ...args1: HArgs1[]): Node;
 };
 
+/**
+ * A convenient shortcut for `s('svg', ['use', { 'xlink:href': '#' + id }], ...args)`.
+ */
+export declare const svgUse: (id: string, ...args: HArgs1[]) => SVGSVGElement;
+
 /**
  * A replacement for the `in` operator (not to be confused with the `for-in` loop) that works properly.
  */
@@ -139,7 +112,7 @@ export type JcNode = {
 export type JcRoot = Partial<Record<PropertyKey, JcNode>>;
 
 /**
- * A simple CSS-in-JS helper.
+ * A simple JS-to-CSS (aka CSS-in-JS) helper.
  *
  * The `root` parameter provides a hierarchical description of CSS rules.
  *

package/nnn.js

@@ -1,3 +1,42 @@
+// src/nnn/eq.ts
+var eq = (x, y) => {
+  if (x === y) {
+    return true;
+  }
+  const xConstructor = x?.constructor;
+  if (xConstructor === y?.constructor) {
+    if (xConstructor === Number) {
+      return isNaN(x) && isNaN(y) || +x === +y;
+    }
+    if (xConstructor === Date) {
+      return +x === +y;
+    }
+    if (xConstructor === String || xConstructor === RegExp) {
+      return "" + x === "" + y;
+    }
+    if (xConstructor === Array) {
+      return x.length === y.length && x.every((item, index) => eq(item, y[index]));
+    }
+    if (xConstructor === Object) {
+      const keysOfX = Object.keys(x);
+      return keysOfX.length === Object.keys(y).length && keysOfX.every((key) => eq(x[key], y[key]));
+    }
+    if (xConstructor === Set || xConstructor === Map) {
+      if (x.size !== y.size) {
+        return false;
+      }
+      const xa = [...x];
+      const ya = [...y];
+      return xa.every((xv) => ya.find((yv) => eq(xv, yv)));
+    }
+  }
+  return false;
+};
+
+// src/nnn/escape.ts
+var escapeValues = (escapeMap, values) => values.map((value) => (escapeMap.get(value?.constructor) ?? escapeMap.get(undefined))?.(value) ?? "");
+var escape = (escapeMap, template, ...values) => String.raw(template, ...escapeValues(escapeMap, values));
+
 // src/nnn/is.ts
 var is = (type, arg) => arg?.constructor === type;
 
@@ -64,156 +103,7 @@ var _h = (namespaceURI) => {
 };
 var h = _h();
 var s = _h("http://www.w3.org/2000/svg");
-
-// src/nnn/chartable.ts
-var COLORS = ["#e22", "#e73", "#fc3", "#ad4", "#4d9", "#3be", "#45d", "#c3e"];
-var PADDING = 15;
-var _svg = s("svg", { viewBox: "0 0 0 0", width: 0, height: 0 });
-h(document.body, ["div", { $style: { width: 0, height: 0 } }, _svg]);
-var toFixed2 = (value) => value.toFixed(2);
-var chartable = ({
-  table,
-  headerColumn = false,
-  xGap = 70,
-  xLabelsMinHeight = 0,
-  xLabelsRotate = false,
-  xReverse = false,
-  yGap = 30,
-  yLabelsLeftMinWidth = 100,
-  yLabelsRightMinWidth = 100,
-  yMax = 10,
-  zLabelsMinWidth = 0,
-  zyMappings = []
-}) => {
-  const zxValues = [];
-  const xLabels = [];
-  const zLabels = [];
-  table.querySelectorAll("tr").forEach((row, r) => row.querySelectorAll("td,th").forEach((col, c) => {
-    const x = r - 1;
-    const z = c - +headerColumn;
-    const value = col.innerText;
-    if (x >= 0 && z >= 0) {
-      zxValues[z] = zxValues[z] ?? [];
-      zxValues[z][x] = (zyMappings?.[z]?.[0] ?? parseFloat)(value);
-    } else if (x >= 0 && z < 0) {
-      xLabels[x] = value;
-    } else if (x < 0 && z >= 0) {
-      zLabels[z] = value;
-    }
-  }));
-  if (xReverse) {
-    xLabels.reverse();
-    zxValues.forEach((xValues) => xValues.reverse());
-  }
-  const xMax = zxValues[0].length;
-  const xPx = Array.from({ length: xMax }, (_, x) => x * xGap);
-  const yPx = Array.from({ length: yMax }, (_, y) => y * yGap);
-  const width = xGap * (xMax - 1);
-  const height = yGap * (yMax - 1);
-  const gGraph = s("g", ...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 gXLabels = s("g");
-  const gYLabelsL = zxValues.map((_) => s("g"));
-  const gYLabelsR = zxValues.map((_) => s("g"));
-  const gZColors = s("g");
-  const gZLabels = [];
-  const onclick = (z) => {
-    gYLabelsL.forEach((g, z2) => s(g, { $style: { display: z2 === z ? "block" : "none" } }));
-    gYLabelsR.forEach((g, z2) => s(g, { $style: { display: z2 === z ? "block" : "none" } }));
-    gZLabels.forEach((text, z2) => s(text, { $style: { fontWeight: z2 === z ? "bold" : "normal", cursor: "pointer" } }));
-  };
-  zxValues.forEach((values, z) => {
-    const fill = COLORS[z % COLORS.length];
-    const minValue = Math.min(...values.filter((value) => !isNaN(value)));
-    const maxValue = Math.max(...values.filter((value) => !isNaN(value)));
-    yPx.forEach((yp, y) => {
-      const value = (zyMappings?.[z]?.[1] ?? toFixed2)(maxValue - (maxValue - minValue) / yMax * (y + 1));
-      const textL = s("text", { x: 0, y: yp, "text-anchor": "end", "alignment-baseline": "middle" }, value);
-      const textR = s("text", { x: 0, y: yp, "text-anchor": "start", "alignment-baseline": "middle" }, value);
-      s(_svg, textL, textR);
-      yLabelsLeftMinWidth = Math.max(yLabelsLeftMinWidth, textL.getBBox().width);
-      yLabelsRightMinWidth = Math.max(yLabelsRightMinWidth, textR.getBBox().width);
-      s(gYLabelsL[z], textL);
-      s(gYLabelsR[z], textR);
-    });
-    const text = s("text", {
-      x: 0,
-      y: yGap * z,
-      "text-anchor": "start",
-      "alignment-baseline": "middle",
-      $onclick: () => onclick(z),
-      $style: { fontWeight: "bold" }
-    }, zLabels[z]);
-    s(_svg, text);
-    zLabelsMinWidth = Math.max(zLabelsMinWidth, text.getBBox().width);
-    gZLabels[z] = text;
-    s(gZColors, ["circle", { cx: 0, cy: yGap * z, r: 5, fill }]);
-    const valuesPx = values.map((value) => isNaN(value) ? value : height * (maxValue - value) / (maxValue - minValue));
-    xPx.forEach((px, x) => {
-      if (!isNaN(valuesPx[x])) {
-        s(gGraph, ["g", ["circle", { cx: px, cy: valuesPx[x], r: 5, fill }]]);
-        if (!isNaN(valuesPx[x - 1])) {
-          s(gGraph, ["line", { x1: px, x2: xPx[x - 1], y1: valuesPx[x], y2: valuesPx[x - 1], stroke: fill }]);
-        }
-      }
-    });
-  });
-  if (xLabels.length > 0) {
-    xPx.forEach((xp, x) => {
-      const text = s("text", xLabelsRotate ? { 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]);
-      s(_svg, text);
-      xLabelsMinHeight = Math.max(xLabelsMinHeight, xLabelsRotate ? text.getBBox().width : text.getBBox().height);
-      s(gXLabels, text);
-    });
-  }
-  const svgW = width + yLabelsLeftMinWidth + yLabelsRightMinWidth + zLabelsMinWidth + 4 * PADDING;
-  const svgH = height + xLabelsMinHeight + (xLabels.length > 0 ? 3 : 2) * PADDING;
-  s(gGraph, { transform: `translate(${yLabelsLeftMinWidth + PADDING} ${PADDING})` });
-  gYLabelsL.forEach((g) => s(g, { transform: `translate(${yLabelsLeftMinWidth} ${PADDING})` }));
-  gYLabelsR.forEach((g) => s(g, { transform: `translate(${width + yLabelsLeftMinWidth + 2 * PADDING} ${PADDING})` }));
-  s(gZColors, { transform: `translate(${width + yLabelsLeftMinWidth + yLabelsRightMinWidth + 3 * PADDING} ${PADDING})` });
-  s(gXLabels, { transform: `translate(${yLabelsLeftMinWidth + PADDING} ${height + 2 * PADDING})` });
-  onclick(0);
-  return s("svg", { viewBox: `0 0 ${svgW} ${svgH}`, width: `${svgW}px`, height: `${svgH}px`, class: "chartable" }, gGraph, gXLabels, ...gYLabelsL, ...gYLabelsR, gZColors, ["g", { transform: `translate(${width + yLabelsLeftMinWidth + yLabelsRightMinWidth + 4 * PADDING} ${PADDING})` }, ...gZLabels]);
-};
-
-// src/nnn/eq.ts
-var eq = (x, y) => {
-  if (x === y) {
-    return true;
-  }
-  const xConstructor = x?.constructor;
-  if (xConstructor === y?.constructor) {
-    if (xConstructor === Number) {
-      return isNaN(x) && isNaN(y) || +x === +y;
-    }
-    if (xConstructor === Date) {
-      return +x === +y;
-    }
-    if (xConstructor === String || xConstructor === RegExp) {
-      return "" + x === "" + y;
-    }
-    if (xConstructor === Array) {
-      return x.length === y.length && x.every((item, index) => eq(item, y[index]));
-    }
-    if (xConstructor === Object) {
-      const keysOfX = Object.keys(x);
-      return keysOfX.length === Object.keys(y).length && keysOfX.every((key) => eq(x[key], y[key]));
-    }
-    if (xConstructor === Set || xConstructor === Map) {
-      if (x.size !== y.size) {
-        return false;
-      }
-      const xa = [...x];
-      const ya = [...y];
-      return xa.every((xv) => ya.find((yv) => eq(xv, yv)));
-    }
-  }
-  return false;
-};
-
-// src/nnn/escape.ts
-var escapeValues = (escapeMap, values) => values.map((value) => (escapeMap.get(value?.constructor) ?? escapeMap.get(undefined))?.(value) ?? "");
-var escape = (escapeMap, template, ...values) => String.raw(template, ...escapeValues(escapeMap, values));
+var svgUse = (id, ...args) => s("svg", ["use", { "xlink:href": "#" + id }], ...args);
 
 // src/nnn/fixTypography.ts
 var TAGS_TO_SKIP = ["IFRAME", "NOSCRIPT", "PRE", "SCRIPT", "STYLE", "TEXTAREA"];
@@ -398,6 +288,7 @@ var uuid1 = ({
 };
 export {
   uuid1,
+  svgUse,
   s,
   refsInfo,
   pro,
@@ -415,6 +306,5 @@ export {
   fixTypography,
   escapeValues,
   escape,
-  eq,
-  chartable
+  eq
 };

package/package.json

@@ -43,5 +43,5 @@
   "types": "nnn.d.ts",
   "name": "@jackens/nnn",
   "type": "module",
-  "version": "2024.3.3"
+  "version": "2024.3.8"
 }

package/readme.md

@@ -2,11 +2,10 @@
 
 Jackens’ JavaScript helpers.
 
-<sub>Version: <code class="version">2024.3.3</code></sub>
+<sub>Version: <code class="version">2024.3.8</code></sub>
 
 ## Examples
 
-- [Chartable Demo](https://jackens.github.io/nnn/chartable/)
 - [Chessboard Demo](https://jackens.github.io/nnn/chessboard/)
 - [Documentation](https://jackens.github.io/nnn/doc/)
 - [Gant Chart Demo](https://jackens.github.io/nnn/gantt/)
@@ -45,7 +44,6 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `HArgs1`: The type of arguments of the `h` and `s` helpers.
 - `JcNode`: The type of arguments of the `jc` helper.
 - `JcRoot`: The type of arguments of the `jc` helper.
-- `chartable`: A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
 - `eq`: A helper that checks equality of the given arguments.
 - `escape`: A generic helper for escaping `values` by given `escapeMap` (in *TemplateStrings* flavor).
 - `escapeValues`: A generic helper for escaping `values` by given `escapeMap`.
@@ -53,7 +51,7 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `h`: A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `s`).
 - `has`: A replacement for the `in` operator (not to be confused with the `for-in` loop) that works properly.
 - `is`: A helper that checks if the given argument is of a certain type.
-- `jc`: A simple CSS-in-JS helper.
+- `jc`: A simple JS-to-CSS (aka CSS-in-JS) helper.
 - `jsOnParse`: `JSON.parse` with “JavaScript turned on”.
 - `locale`: Language translations helper.
 - `nanolight`: A generic helper for syntax highlighting (see also `nanolightJs`).
@@ -64,6 +62,7 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `pro`: A helper that protects calls to nested properties by a `Proxy` that initializes non-existent values with an empty object.
 - `refsInfo`: A helper that provides information about the given `refs`.
 - `s`: A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `h`).
+- `svgUse`: A convenient shortcut for `s('svg', ['use', { 'xlink:href': '#' + id }], ...args)`.
 - `uuid1`: A helper that generates a UUID v1 identifier (with a creation timestamp).
 
 ### EscapeMap
@@ -108,41 +107,6 @@ type JcRoot = Partial<Record<PropertyKey, JcNode>>;
 
 The type of arguments of the `jc` helper.
 
-### chartable
-
-```ts
-const chartable: ({ table, headerColumn, xGap, xLabelsMinHeight, xLabelsRotate, xReverse, yGap, yLabelsLeftMinWidth, yLabelsRightMinWidth, yMax, zLabelsMinWidth, zyMappings }: {
-    table: HTMLTableElement;
-    headerColumn?: boolean | undefined;
-    xGap?: number | undefined;
-    xLabelsMinHeight?: number | undefined;
-    xLabelsRotate?: boolean | undefined;
-    xReverse?: boolean | undefined;
-    yGap?: number | undefined;
-    yLabelsLeftMinWidth?: number | undefined;
-    yLabelsRightMinWidth?: number | undefined;
-    yMax?: number | undefined;
-    zLabelsMinWidth?: number | undefined;
-    zyMappings?: [(label: string) => number, (value: number) => string][] | undefined;
-}) => SVGSVGElement;
-```
-
-A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
-
-Options:
-- `table`: `HTMLTableElement` to extract data, data series labels and X axis labels
-- `headerColumn`: flag indicating that `table` has a header column with X axis labels
-- `xGap`: X axis spacing
-- `xLabelsMinHeight`: minimal height of X axis labels
-- `xLabelsRotate`: flag to rotate X axis labels
-- `xReverse`: flag to reverse all data series
-- `yGap`: Y axis spacing
-- `yLabelsLeftMinWidth`: minimal width of Y axis left labels
-- `yLabelsRightMinWidth`: minimal width of Y axis right labels
-- `yMax`: number of Y axis lines
-- `zLabelsMinWidth`: minimal width of data series labels
-- `zyMappings`: mappings per data series
-
 ### eq
 
 ```ts
@@ -459,7 +423,7 @@ expect(is(Number, num)).toBeTrue()
 const jc: (root: JcRoot, splitter?: string) => string;
 ```
 
-A simple CSS-in-JS helper.
+A simple JS-to-CSS (aka CSS-in-JS) helper.
 
 The `root` parameter provides a hierarchical description of CSS rules.
 
@@ -957,6 +921,14 @@ A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style help
 - All other arguments of type `string`/`number` are converted to `Text` nodes and appended to the element being created or modified.
 - All other arguments of type `HArgs` are passed to `s` and the results are appended to the element being created or modified.
 
+### svgUse
+
+```ts
+const svgUse: (id: string, ...args: HArgs1[]) => SVGSVGElement;
+```
+
+A convenient shortcut for `s('svg', ['use', { 'xlink:href': '#' + id }], ...args)`.
+
 ### uuid1
 
 ```ts