@jackens/nnn 2024.2.19 → 2024.2.20

package/chartable.d.ts

@@ -5,27 +5,29 @@
  * - `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
- * - `xLabelsPx`:
+ * - `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
- * - `yLabelsLeftPx`:
- * - `yLabelsRightPx`:
+ * - `yLabelsLeftMinWidth`: minimal width of Y axis left labels
+ * - `yLabelsRightMinWidth`: minimal width of Y axis right labels
  * - `yMax`: number of Y axis lines
- * - `zLabelsPx`:
+ * - `zLabelsMinWidth`: minimal width of data series labels
+ * - `zyMappings`: mappings per data series
  */
-export function chartable({ table, headerColumn, xGap, xLabelsPx, xLabelsRotate, xReverse, yGap, yLabelsLeftPx, yLabelsRightPx, yMax, zLabelsPx }: {
+export function chartable({ table, headerColumn, xGap, xLabelsMinHeight, xLabelsRotate, xReverse, yGap, yLabelsLeftMinWidth, yLabelsRightMinWidth, yMax, zLabelsMinWidth, zyMappings }: {
     table: HTMLTableElement;
-    headerColumn?: boolean;
-    xGap?: number;
-    xLabelsPx?: number;
-    xLabelsRotate?: boolean;
-    xReverse?: boolean;
-    yGap?: number;
-    yLabelsLeftPx?: number;
-    yLabelsRightPx?: number;
-    yMax?: number;
-    zLabelsPx?: number;
+    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;
 
 export const tests: {};

package/chartable.js

@@ -7,6 +7,8 @@ const _svg = s('svg', { viewBox: '0 0 0 0', width: 0, height: 0 })
 
 h(document.body, ['div', { $style: { width: 0, height: 0 } }, _svg])
 
+const toFixed2 = (/** @type {number} */ value) => value.toFixed(2)
+
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
  *
@@ -14,41 +16,44 @@ h(document.body, ['div', { $style: { width: 0, height: 0 } }, _svg])
  * - `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
- * - `xLabelsPx`:
+ * - `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
- * - `yLabelsLeftPx`:
- * - `yLabelsRightPx`:
+ * - `yLabelsLeftMinWidth`: minimal width of Y axis left labels
+ * - `yLabelsRightMinWidth`: minimal width of Y axis right labels
  * - `yMax`: number of Y axis lines
- * - `zLabelsPx`:
+ * - `zLabelsMinWidth`: minimal width of data series labels
+ * - `zyMappings`: mappings per data series
  *
  * @param {{
  *   table: HTMLTableElement;
  *   headerColumn?: boolean;
  *   xGap?: number;
- *   xLabelsPx?: number;
+ *   xLabelsMinHeight?: number;
  *   xLabelsRotate?: boolean;
  *   xReverse?: boolean;
  *   yGap?: number;
- *   yLabelsLeftPx?: number;
- *   yLabelsRightPx?: number;
+ *   yLabelsLeftMinWidth?: number;
+ *   yLabelsRightMinWidth?: number;
  *   yMax?: number;
- *   zLabelsPx?: number;
+ *   zLabelsMinWidth?: number;
+ *   zyMappings?: [(label: string) => number, (value: number) => string][];
  * }} options
  */
 export const chartable = ({
   table,
   headerColumn = false,
   xGap = 70,
-  xLabelsPx = 0,
+  xLabelsMinHeight = 0,
   xLabelsRotate = false,
   xReverse = false,
   yGap = 30,
-  yLabelsLeftPx = 100,
-  yLabelsRightPx = 100,
+  yLabelsLeftMinWidth = 100,
+  yLabelsRightMinWidth = 100,
   yMax = 10,
-  zLabelsPx = 0
+  zLabelsMinWidth = 0,
+  zyMappings = []
 }) => {
   const /** @type {number[][]} */ zxValues = []
   const /** @type {string[]}   */ xLabels = []
@@ -63,7 +68,7 @@ export const chartable = ({
 
       if (x >= 0 && z >= 0) {
         zxValues[z] = zxValues[z] ?? []
-        zxValues[z][x] = parseFloat(value)
+        zxValues[z][x] = (zyMappings?.[z]?.[0] ?? parseFloat)(value)
       } else if (x >= 0 && z < 0) {
         xLabels[x] = value
       } else if (x < 0 && z >= 0) {
@@ -104,17 +109,14 @@ export const chartable = ({
     const maxValue = Math.max(...values.filter(value => !isNaN(value)))
 
     yPx.forEach((yp, y) => {
-      const textL = s('text',
-        { x: 0, y: yp, 'text-anchor': 'end', 'alignment-baseline': 'middle' },
-        (maxValue - (maxValue - minValue) / yMax * (y + 1)).toFixed(2))
-      const textR = s('text',
-        { x: 0, y: yp, 'text-anchor': 'start', 'alignment-baseline': 'middle' },
-        (maxValue - (maxValue - minValue) / yMax * (y + 1)).toFixed(2))
+      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)
 
-      yLabelsLeftPx = Math.max(yLabelsLeftPx, textL.getBBox().width)
-      yLabelsRightPx = Math.max(yLabelsRightPx, textL.getBBox().width)
+      yLabelsLeftMinWidth = Math.max(yLabelsLeftMinWidth, textL.getBBox().width)
+      yLabelsRightMinWidth = Math.max(yLabelsRightMinWidth, textR.getBBox().width)
 
       s(gYLabelsL[z], textL)
       s(gYLabelsR[z], textR)
@@ -132,7 +134,7 @@ export const chartable = ({
 
     s(_svg, text)
 
-    zLabelsPx = Math.max(zLabelsPx, text.getBBox().width)
+    zLabelsMinWidth = Math.max(zLabelsMinWidth, text.getBBox().width)
 
     gZLabels[z] = text
 
@@ -161,22 +163,22 @@ export const chartable = ({
 
       s(_svg, text)
 
-      xLabelsPx = Math.max(xLabelsPx, xLabelsRotate ? text.getBBox().width : text.getBBox().height)
+      xLabelsMinHeight = Math.max(xLabelsMinHeight, xLabelsRotate ? text.getBBox().width : text.getBBox().height)
 
       s(gXLabels, text)
     })
   }
 
-  const svgW = width + yLabelsLeftPx + yLabelsRightPx + zLabelsPx + 4 * PADDING
-  const svgH = height + xLabelsPx + (xLabels.length > 0 ? 3 : 2) * PADDING
+  const svgW = width + yLabelsLeftMinWidth + yLabelsRightMinWidth + zLabelsMinWidth + 4 * PADDING
+  const svgH = height + xLabelsMinHeight + (xLabels.length > 0 ? 3 : 2) * PADDING
 
-  s(gGraph, { transform: `translate(${yLabelsLeftPx + PADDING} ${PADDING})` })
+  s(gGraph, { transform: `translate(${yLabelsLeftMinWidth + PADDING} ${PADDING})` })
 
-  gYLabelsL.forEach(g => s(g, { transform: `translate(${yLabelsLeftPx} ${PADDING})` }))
-  gYLabelsR.forEach(g => s(g, { transform: `translate(${width + yLabelsLeftPx + 2 * 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 + yLabelsLeftPx + yLabelsRightPx + 3 * PADDING} ${PADDING})` })
-  s(gXLabels, { transform: `translate(${yLabelsLeftPx + PADDING} ${height + 2 * PADDING})` })
+  s(gZColors, { transform: `translate(${width + yLabelsLeftMinWidth + yLabelsRightMinWidth + 3 * PADDING} ${PADDING})` })
+  s(gXLabels, { transform: `translate(${yLabelsLeftMinWidth + PADDING} ${height + 2 * PADDING})` })
 
   onclick(0)
 
@@ -187,7 +189,7 @@ export const chartable = ({
     ...gYLabelsL,
     ...gYLabelsR,
     gZColors,
-    ['g', { transform: `translate(${width + yLabelsLeftPx + yLabelsRightPx + 4 * PADDING} ${PADDING})` }, ...gZLabels])
+    ['g', { transform: `translate(${width + yLabelsLeftMinWidth + yLabelsRightMinWidth + 4 * PADDING} ${PADDING})` }, ...gZLabels])
 }
 
 export const tests = {}

package/package.json

@@ -27,6 +27,8 @@
     "localization",
     "nanolight",
     "nnn",
+    "omit",
+    "pick",
     "RWD",
     "SVG",
     "translation",
@@ -40,5 +42,5 @@
   "types": "nnn.d.ts",
   "name": "@jackens/nnn",
   "type": "module",
-  "version": "2024.2.19"
+  "version": "2024.2.20"
 }

package/readme.md

@@ -2,7 +2,7 @@
 
 Jackens’ JavaScript helpers.
 
-<sub>Version: <code class="version">2024.2.19</code></sub>
+<sub>Version: <code class="version">2024.2.20</code></sub>
 
 ## Installation
 
@@ -103,18 +103,19 @@ The type of arguments of the `jcss` helper.
 ### chartable
 
 ```ts
-export function chartable({ table, headerColumn, xGap, xLabelsPx, xLabelsRotate, xReverse, yGap, yLabelsLeftPx, yLabelsRightPx, yMax, zLabelsPx }: {
+export function chartable({ table, headerColumn, xGap, xLabelsMinHeight, xLabelsRotate, xReverse, yGap, yLabelsLeftMinWidth, yLabelsRightMinWidth, yMax, zLabelsMinWidth, zyMappings }: {
     table: HTMLTableElement;
-    headerColumn?: boolean;
-    xGap?: number;
-    xLabelsPx?: number;
-    xLabelsRotate?: boolean;
-    xReverse?: boolean;
-    yGap?: number;
-    yLabelsLeftPx?: number;
-    yLabelsRightPx?: number;
-    yMax?: number;
-    zLabelsPx?: number;
+    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;
 ```
 
@@ -124,14 +125,15 @@ 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
-- `xLabelsPx`:
+- `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
-- `yLabelsLeftPx`:
-- `yLabelsRightPx`:
+- `yLabelsLeftMinWidth`: minimal width of Y axis left labels
+- `yLabelsRightMinWidth`: minimal width of Y axis right labels
 - `yMax`: number of Y axis lines
-- `zLabelsPx`:
+- `zLabelsMinWidth`: minimal width of data series labels
+- `zyMappings`: mappings per data series
 
 ### eq