@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{barChart/barChart.ts → bar-chart/bar-chart.ts}

@@ -1,16 +1,15 @@
 import { Array, Match, Option, Schema, pipe } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import * as ChartTable from "../chartTable/chartTable.ts";
+import * as ChartTable from "../chart-table/chart-table.ts";
 import * as Chip from "../chip/chip.ts";
-import * as EmptyState from "../emptyState/emptyState.ts";
+import * as EmptyState from "../empty-state/empty-state.ts";
 import * as Mark from "../mark/mark.ts";
 
-// VIEW
-
 /** `Warn`: the reading prints on amber. `Error`: in a red chip. The cells stay ink either way:
  *  the reading carries the colour, as a meter's does. */
 export const Tone = Schema.Literals(["Warn", "Error"]);
+
 export type Tone = typeof Tone.Type;
 
 /** One bar. */
@@ -27,7 +26,7 @@ export type BarPoint = Readonly<{
 export type ViewConfig = Readonly<{
   /** Names the chart: the caption of the table screen readers read in its place. */
   label: string;
-  points: ReadonlyArray<BarPoint>;
+  points: readonly BarPoint[];
   /** A bar per line, the label at the left and the reading at the right: for many categories
    *  and long names. Without it, an upright column per point: for a run over time. */
   isRows?: boolean;
@@ -42,24 +41,24 @@ export type ViewConfig = Readonly<{
   empty?: string;
 }>;
 
-/** Columns print every reading up to this many; past it only a toned one, and the scale reads
- *  the rest. */
 const READ_EACH = 12;
 
-/** Cells in a column (they stack 10px tall) and in a row (the meter's twenty). */
 const COLUMN_CELLS = 10;
 const ROW_CELLS = 20;
 
-/** How many cells a value lights: rounded, but never none for a value above zero, and none for
- *  a missing one. */
-const litCount = (maybeValue: Option.Option<number>, top: number, cells: number): number =>
+const litCount = (
+  maybeValue: Option.Option<number>,
+  top: number,
+  cells: number
+): number =>
   pipe(
     ChartTable.chartValue(maybeValue),
     Option.filter((value) => value > 0 && top > 0),
     Option.match({
       onNone: () => 0,
-      onSome: (value) => Math.min(cells, Math.max(1, Math.round((value / top) * cells))),
-    }),
+      onSome: (value) =>
+        Math.min(cells, Math.max(1, Math.round((value / top) * cells))),
+    })
   );
 
 const said = (maybeValue: Option.Option<number>): string =>
@@ -68,9 +67,13 @@ const said = (maybeValue: Option.Option<number>): string =>
     onSome: ChartTable.chartNumber,
   });
 
-const toneSaid = (tone: Tone): string => (tone === "Warn" ? "warning" : "error");
+const toneSaid = (tone: Tone): string =>
+  tone === "Warn" ? "warning" : "error";
 
-const readingView = <Message>(point: BarPoint, h: HtmlBuilder<Message>): Html => {
+const readingView = <Message>(
+  point: BarPoint,
+  h: HtmlBuilder<Message>
+): Html => {
   const text = said(point.maybeValue);
 
   return Match.value(point.tone).pipe(
@@ -81,28 +84,32 @@ const readingView = <Message>(point: BarPoint, h: HtmlBuilder<Message>): Html =>
       h.span(
         [
           h.Class(
-            Option.isNone(ChartTable.chartValue(point.maybeValue)) ? "bar-num none" : "bar-num",
+            Option.isNone(ChartTable.chartValue(point.maybeValue))
+              ? "bar-num none"
+              : "bar-num"
           ),
         ],
-        [text],
-      ),
-    ),
+        [text]
+      )
+    )
   );
 };
 
 const cellsView = <Message>(
   count: number,
   isOn: (index: number) => boolean,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> =>
-  Array.makeBy(count, (index) => h.span([h.Class(isOn(index) ? "cell on" : "cell")]));
+  h: HtmlBuilder<Message>
+): readonly Html[] =>
+  Array.makeBy(count, (index) =>
+    h.span([h.Class(isOn(index) ? "cell on" : "cell")])
+  );
 
 const lineView = <Message>(
   point: BarPoint,
   row: number,
   top: number,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const gridRow = h.Style({ gridRow: `${row}` });
   const lit = litCount(point.maybeValue, top, ROW_CELLS);
 
@@ -110,31 +117,34 @@ const lineView = <Message>(
     h.span([h.Class("bar-label"), gridRow], [point.label]),
     h.span(
       [h.Class("bar-cells"), gridRow],
-      cellsView(ROW_CELLS, (index) => index < lit, h),
+      cellsView(ROW_CELLS, (index) => index < lit, h)
     ),
     h.span([h.Class("bar-value"), gridRow], [readingView(point, h)]),
   ];
 };
 
 const columnView = <Message>(
-  points: ReadonlyArray<BarPoint>,
+  points: readonly BarPoint[],
   top: number,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ) => {
   const isEachRead = points.length <= READ_EACH;
   const step = isEachRead ? 1 : ChartTable.labelStep(points.length);
 
-  return (point: BarPoint, index: number): ReadonlyArray<Html> => {
+  return (point: BarPoint, index: number): readonly Html[] => {
     const column = index + 2;
     const gridColumn = h.Style({ gridColumn: `${column}` });
     const lit = litCount(point.maybeValue, top, COLUMN_CELLS);
     const isRead = isEachRead || point.tone !== undefined;
 
     return [
-      h.span([h.Class("bar-value"), gridColumn], isRead ? [readingView(point, h)] : []),
+      h.span(
+        [h.Class("bar-value"), gridColumn],
+        isRead ? [readingView(point, h)] : []
+      ),
       h.span(
         [h.Class("bar-cells"), gridColumn],
-        cellsView(COLUMN_CELLS, (cell) => cell >= COLUMN_CELLS - lit, h),
+        cellsView(COLUMN_CELLS, (cell) => cell >= COLUMN_CELLS - lit, h)
       ),
       ...(index % step === 0
         ? [
@@ -145,7 +155,7 @@ const columnView = <Message>(
                   gridColumn: `${column} / span ${Math.min(step, points.length - index)}`,
                 }),
               ],
-              [point.label],
+              [point.label]
             ),
           ]
         : []),
@@ -153,11 +163,18 @@ const columnView = <Message>(
   };
 };
 
-const tableView = <Message>(config: ViewConfig, category: string, h: HtmlBuilder<Message>): Html =>
+const tableView = <Message>(
+  config: ViewConfig,
+  category: string,
+  h: HtmlBuilder<Message>
+): Html =>
   ChartTable.view(
     {
       label: config.label,
-      heads: [category, config.unit === undefined ? "Value" : `Value (${config.unit})`],
+      heads: [
+        category,
+        config.unit === undefined ? "Value" : `Value (${config.unit})`,
+      ],
       rows: Array.map(config.points, (point) => ({
         label: point.label,
         readings: [
@@ -167,7 +184,7 @@ const tableView = <Message>(config: ViewConfig, category: string, h: HtmlBuilder
         ],
       })),
     },
-    h,
+    h
   );
 
 /**
@@ -176,12 +193,23 @@ const tableView = <Message>(config: ViewConfig, category: string, h: HtmlBuilder
  * categories with long names. The picture is hidden from screen readers, who read a table of
  * the same numbers. Renders on the server: no measuring.
  */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { points, isRows = false, max, category = "Category", empty = "nothing to chart" } = config;
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
+  const {
+    points,
+    isRows = false,
+    max,
+    category = "Category",
+    empty = "nothing to chart",
+  } = config;
+
   const top = ChartTable.chartTop(
     Array.map(points, ({ maybeValue }) => maybeValue),
-    Option.fromNullishOr(max),
+    Option.fromNullishOr(max)
   );
+
   const rootAttributes = [h.Class("chart")];
 
   return Array.match(points, {
@@ -194,26 +222,36 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
               [
                 h.Class("bar-rows"),
                 h.AriaHidden(true),
-                h.Style({ "--n": `${present.length}`, "--cells": `${ROW_CELLS}` }),
+                h.Style({
+                  "--n": `${present.length}`,
+                  "--cells": `${ROW_CELLS}`,
+                }),
               ],
-              Array.flatMap(present, (point, index) => lineView(point, index + 1, top, h)),
+              Array.flatMap(present, (point, index) =>
+                lineView(point, index + 1, top, h)
+              )
             ),
           ])
         : h.div(rootAttributes, [
             tableView(config, category, h),
             h.div(
               [
-                h.Class(present.length <= READ_EACH ? "bar-cols each" : "bar-cols"),
+                h.Class(
+                  present.length <= READ_EACH ? "bar-cols each" : "bar-cols"
+                ),
                 h.AriaHidden(true),
-                h.Style({ "--n": `${present.length}`, "--cells": `${COLUMN_CELLS}` }),
+                h.Style({
+                  "--n": `${present.length}`,
+                  "--cells": `${COLUMN_CELLS}`,
+                }),
               ],
               [
                 h.span(
                   [h.Class("bar-scale")],
-                  [h.span([], [ChartTable.chartNumber(top)]), h.span([], ["0"])],
+                  [h.span([], [ChartTable.chartNumber(top)]), h.span([], ["0"])]
                 ),
                 ...Array.flatMap(present, columnView(present, top, h)),
-              ],
+              ]
             ),
           ]),
   });

package/src/bar-chart/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./bar-chart.ts";
+
+export type { BarPoint, Tone, ViewConfig } from "./bar-chart.ts";

package/src/bench/bench.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a bench with `view`. */
 export type ViewConfig = Readonly<{
   /** Above the work, at its own height while the work keeps its floor, past which it scrolls:
@@ -17,11 +15,14 @@ export type ViewConfig = Readonly<{
  *  from the rail's edge). The main landmark (`<main id="main">`). The page does not scroll:
  *  the work scrolls itself where it must (a reel's columns, sideways), and on a short window
  *  the head scrolls in what the work's floor leaves it. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { head, body } = config;
 
   return h.main(
     [h.Id("main"), h.Class("bench")],
-    [h.div([h.Class("bench-head")], head), h.div([h.Class("bench-work")], body)],
+    [h.div([h.Class("bench-head")], head), h.div([h.Class("bench-work")], body)]
   );
 };

package/src/bench/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./bench.ts";
+
 export type { ViewConfig } from "./bench.ts";