@rowsncolumns/spreadsheet 10.6.0 → 10.6.4

package/dist/esm/api/cf-data-bar.d.ts

@@ -0,0 +1,73 @@
+export type DataBarAxisMode = "automatic" | "middle" | "none";
+export type DataBarGeometryInput = {
+    value: number;
+    /** Resolved lower bound of the rule. */
+    min: number;
+    /** Resolved upper bound of the rule. */
+    max: number;
+    /** Absent = Excel 2007 rule semantics (no axis). */
+    axisPosition?: DataBarAxisMode | null;
+    /** Percent of the cell width; default 10. */
+    minLength?: number | null;
+    /** Percent of the cell width; default 90. */
+    maxLength?: number | null;
+    direction?: "leftToRight" | "rightToLeft" | "context" | null;
+};
+export type DataBarGeometry = {
+    /** Left edge, 0..1 of the bar area (left-to-right, mirrored for RTL). */
+    barStart: number;
+    /** Right edge, 0..1 of the bar area. */
+    barEnd: number;
+    negative: boolean;
+    /** Axis x, 0..1 of the bar area; absent when no axis is drawn. */
+    axisPosition?: number;
+};
+export declare const DATA_BAR_DEFAULT_MIN_LENGTH = 10;
+export declare const DATA_BAR_DEFAULT_MAX_LENGTH = 90;
+/**
+ * Where a value's bar sits inside the cell. `null` when nothing is drawn
+ * (non-finite inputs).
+ */
+export declare const computeDataBarGeometry: ({ value, min: rawMin, max: rawMax, axisPosition, minLength, maxLength, direction, }: DataBarGeometryInput) => DataBarGeometry | null;
+/** The canvas calls `paintDataBar` makes — satisfied by both a Konva `Context` and a 2D context wrapper. */
+export type CfPaintContext = {
+    beginPath(): void;
+    closePath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    stroke(): void;
+    fillRect(x: number, y: number, width: number, height: number): void;
+    strokeRect(x: number, y: number, width: number, height: number): void;
+    setLineDash(segments: number[]): void;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
+    setAttr(attr: string, value: unknown): void;
+};
+export type PaintedDataBar = {
+    color: string;
+    barStart: number;
+    barEnd: number;
+    negative?: boolean;
+    borderColor?: string;
+    gradient?: boolean;
+    axisPosition?: number;
+    axisColor?: string;
+    direction?: "leftToRight" | "rightToLeft";
+};
+/** Horizontal / vertical padding between the bar area and the cell edges, in px at 100 %. */
+export declare const DATA_BAR_INSET_X = 1;
+export declare const DATA_BAR_INSET_Y = 2;
+/**
+ * The pale end of Excel's data-bar gradient: the bar colour blended 90 %
+ * towards white.
+ */
+export declare const dataBarGradientTip: (color: string) => string;
+/**
+ * Paint one cell's data bar in the cell's local coordinates (`0,0` = the
+ * cell's top-left corner).
+ */
+export declare const paintDataBar: (ctx: CfPaintContext, cell: {
+    width: number;
+    height: number;
+    scale?: number;
+}, bar: PaintedDataBar) => void;
+//# sourceMappingURL=cf-data-bar.d.ts.map

package/dist/esm/api/cf-data-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cf-data-bar.d.ts","sourceRoot":"","sources":["../../../api/cf-data-bar.ts"],"names":[],"mappings":"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"}

package/dist/esm/api/cf-data-bar.js

@@ -0,0 +1,178 @@
+// Data-bar conditional formatting: bar geometry and canvas painting.
+//
+// Mirrors Excel 2010+ data bars (https://support.microsoft.com/office/
+// use-data-bars-color-scales-and-icon-sets-to-highlight-data-
+// f118d0b6-f19e-4ca2-8c9d-e4eac0b3b0f1, "Format all cells based on their
+// values" > Data Bar):
+//   - bar length scales between the rule's minimum and maximum, from
+//     `minLength` to `maxLength` percent of the cell (OOXML defaults 10/90;
+//     Excel 2010+ rules write 0/100);
+//   - negative values draw on the other side of an axis ("Automatic" places
+//     the axis in proportion to the negative share of the range, "Cell
+//     midpoint" at the centre, "None" draws negative bars from the same edge
+//     as positive ones);
+//   - gradient (default) or solid fill, optional border, separate negative
+//     fill / border colours, left-to-right or right-to-left direction.
+export const DATA_BAR_DEFAULT_MIN_LENGTH = 10;
+export const DATA_BAR_DEFAULT_MAX_LENGTH = 90;
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+const lengthFractions = (minLength, maxLength) => {
+    const lo = clamp01((minLength ?? DATA_BAR_DEFAULT_MIN_LENGTH) / 100);
+    const hi = clamp01((maxLength ?? DATA_BAR_DEFAULT_MAX_LENGTH) / 100);
+    return hi < lo ? [hi, lo] : [lo, hi];
+};
+/**
+ * Where a value's bar sits inside the cell. `null` when nothing is drawn
+ * (non-finite inputs).
+ */
+export const computeDataBarGeometry = ({ value, min: rawMin, max: rawMax, axisPosition, minLength, maxLength, direction, }) => {
+    if (!Number.isFinite(value) ||
+        !Number.isFinite(rawMin) ||
+        !Number.isFinite(rawMax)) {
+        return null;
+    }
+    // Excel: a minimum above the maximum collapses onto the maximum.
+    const min = Math.min(rawMin, rawMax);
+    const max = rawMax;
+    const [lo, hi] = lengthFractions(minLength, maxLength);
+    const lengthFor = (fraction) => lo + clamp01(fraction) * (hi - lo);
+    const negative = value < 0;
+    const clamped = Math.max(min, Math.min(max, value));
+    const mode = axisPosition ?? "none";
+    let barStart = 0;
+    let barEnd = 0;
+    let axis;
+    if (mode === "middle") {
+        axis = 0.5;
+        const magnitude = Math.max(Math.abs(min), Math.abs(max));
+        const length = 0.5 * lengthFor(magnitude > 0 ? Math.abs(clamped) / magnitude : 1);
+        if (negative) {
+            barStart = 0.5 - length;
+            barEnd = 0.5;
+        }
+        else {
+            barStart = 0.5;
+            barEnd = 0.5 + length;
+        }
+    }
+    else if (mode === "automatic" && min < 0 && max > 0) {
+        axis = -min / (max - min);
+        if (negative) {
+            const length = axis * lengthFor(clamped / min);
+            barStart = axis - length;
+            barEnd = axis;
+        }
+        else {
+            const length = (1 - axis) * lengthFor(clamped / max);
+            barStart = axis;
+            barEnd = axis + length;
+        }
+    }
+    else if (mode === "automatic" && max <= 0 && min < 0) {
+        // Only negative values: the axis sits on the right edge and every bar
+        // grows leftwards from it.
+        axis = 1;
+        const span = max - min;
+        const length = lengthFor(span > 0 ? (max - clamped) / span : 1);
+        barStart = 1 - length;
+        barEnd = 1;
+    }
+    else {
+        // No axis (or Automatic with no negative bound): every bar grows from
+        // the left edge, scaled between min and max.
+        const span = max - min;
+        barStart = 0;
+        barEnd = lengthFor(span > 0 ? (clamped - min) / span : 1);
+    }
+    if (direction === "rightToLeft") {
+        const start = 1 - barEnd;
+        barEnd = 1 - barStart;
+        barStart = start;
+        if (axis !== undefined)
+            axis = 1 - axis;
+    }
+    return {
+        barStart: clamp01(barStart),
+        barEnd: clamp01(barEnd),
+        negative,
+        ...(axis !== undefined ? { axisPosition: axis } : {}),
+    };
+};
+/** Horizontal / vertical padding between the bar area and the cell edges, in px at 100 %. */
+export const DATA_BAR_INSET_X = 1;
+export const DATA_BAR_INSET_Y = 2;
+const parseHex = (color) => {
+    const m = /^#?([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(color.trim());
+    if (m) {
+        const n = parseInt(m[1], 16);
+        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    }
+    const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(color.trim());
+    if (rgb)
+        return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    return null;
+};
+/**
+ * The pale end of Excel's data-bar gradient: the bar colour blended 90 %
+ * towards white.
+ */
+export const dataBarGradientTip = (color) => {
+    const rgb = parseHex(color);
+    if (!rgb)
+        return "#ffffff";
+    const blend = (c) => Math.round(c + (255 - c) * 0.9);
+    return `rgb(${blend(rgb[0])}, ${blend(rgb[1])}, ${blend(rgb[2])})`;
+};
+/**
+ * Paint one cell's data bar in the cell's local coordinates (`0,0` = the
+ * cell's top-left corner).
+ */
+export const paintDataBar = (ctx, cell, bar) => {
+    const scale = cell.scale ?? 1;
+    const areaX = DATA_BAR_INSET_X * scale;
+    const areaY = DATA_BAR_INSET_Y * scale;
+    const areaWidth = Math.max(0, cell.width - 2 * DATA_BAR_INSET_X * scale);
+    const areaHeight = Math.max(0, cell.height - 2 * DATA_BAR_INSET_Y * scale);
+    if (areaWidth <= 0 || areaHeight <= 0)
+        return;
+    const left = areaX + clamp01(bar.barStart) * areaWidth;
+    const right = areaX + clamp01(bar.barEnd) * areaWidth;
+    const barWidth = right - left;
+    if (barWidth > 0) {
+        if (bar.gradient === false) {
+            ctx.setAttr("fillStyle", bar.color);
+        }
+        else {
+            // The gradient runs from the bar's base (the axis, or the edge it
+            // grows from) to its tip.
+            const rtl = bar.direction === "rightToLeft";
+            const hasAxis = bar.axisPosition !== undefined;
+            const growsLeft = (!!bar.negative && hasAxis) !== rtl;
+            const gradient = growsLeft
+                ? ctx.createLinearGradient(right, 0, left, 0)
+                : ctx.createLinearGradient(left, 0, right, 0);
+            gradient.addColorStop(0, bar.color);
+            gradient.addColorStop(1, dataBarGradientTip(bar.color));
+            ctx.setAttr("fillStyle", gradient);
+        }
+        ctx.fillRect(left, areaY, barWidth, areaHeight);
+        if (bar.borderColor) {
+            ctx.setLineDash([]);
+            ctx.setAttr("strokeStyle", bar.borderColor);
+            ctx.setAttr("lineWidth", scale);
+            ctx.strokeRect(left + 0.5, areaY + 0.5, Math.max(0, barWidth - 1), Math.max(0, areaHeight - 1));
+        }
+    }
+    if (bar.axisPosition !== undefined) {
+        const axisX = Math.round(areaX + clamp01(bar.axisPosition) * areaWidth) + 0.5;
+        ctx.beginPath();
+        ctx.setLineDash([scale, scale]);
+        ctx.setAttr("strokeStyle", bar.axisColor ?? "#000000");
+        ctx.setAttr("lineWidth", scale);
+        ctx.moveTo(axisX, 0);
+        ctx.lineTo(axisX, cell.height);
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.closePath();
+    }
+};

package/dist/esm/api/cf-icons.d.ts

@@ -0,0 +1,73 @@
+import type { IconSetFamily } from "../types";
+export type CfIconShape = {
+    kind: "arrow";
+    angle: number;
+    color: string;
+} | {
+    kind: "circle";
+    color: string;
+} | {
+    kind: "rimmedCircle";
+    color: string;
+} | {
+    kind: "flag";
+    color: string;
+} | {
+    kind: "diamond";
+    color: string;
+} | {
+    kind: "triangleUp";
+    color: string;
+} | {
+    kind: "triangleDown";
+    color: string;
+} | {
+    kind: "dash";
+    color: string;
+} | {
+    kind: "symbol";
+    glyph: "check" | "exclamation" | "cross";
+    color: string;
+} | {
+    kind: "symbolPlain";
+    glyph: "check" | "exclamation" | "cross";
+    color: string;
+} | {
+    kind: "star";
+    fill: 0 | 0.5 | 1;
+} | {
+    kind: "rating";
+    filled: number;
+} | {
+    kind: "quarters";
+    filled: number;
+} | {
+    kind: "boxes";
+    filled: number;
+};
+/** Every icon set, lowest bucket first (OOXML `iconId` order). */
+export declare const CF_ICON_SETS: Record<IconSetFamily, CfIconShape[]>;
+/** Families Excel only stores in the x14 extension (no Excel 2007 equivalent). */
+export declare const X14_ONLY_ICON_SETS: ReadonlySet<IconSetFamily>;
+export declare const getCfIcon: (iconSet: string | null | undefined, iconId: number | null | undefined) => CfIconShape | undefined;
+/** The canvas calls the icon painter makes — satisfied by a Konva `Context`. */
+export type CfIconPaintContext = {
+    save(): void;
+    restore(): void;
+    beginPath(): void;
+    closePath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterClockwise?: boolean): void;
+    rect(x: number, y: number, width: number, height: number): void;
+    fill(): void;
+    stroke(): void;
+    clip(): void;
+    setAttr(attr: string, value: unknown): void;
+};
+/**
+ * Paint `icon` into the square at (`x`, `y`) with side `size` (local canvas
+ * coordinates).
+ */
+export declare const paintCfIcon: (ctx: CfIconPaintContext, icon: CfIconShape, x: number, y: number, size: number) => void;
+//# sourceMappingURL=cf-icons.d.ts.map

package/dist/esm/api/cf-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cf-icons.d.ts","sourceRoot":"","sources":["../../../api/cf-icons.ts"],"names":[],"mappings":"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"}

package/dist/esm/api/cf-icons.js

@@ -0,0 +1,306 @@
+// Conditional-format icon sets drawn as small vector icons on the canvas.
+//
+// Excel's 20 icon sets (https://support.microsoft.com/office/
+// use-data-bars-color-scales-and-icon-sets-to-highlight-data-
+// f118d0b6-f19e-4ca2-8c9d-e4eac0b3b0f1, "Icon sets"). Each set lists its
+// icons in OOXML `iconId` order — index 0 is the icon for the LOWEST bucket —
+// so `iconId` matches what `<iconFilter>` / `<x14:cfIcon>` store. Each icon
+// is described once in a 16 × 16 design box and painted with plain canvas
+// paths, so it scales with zoom and needs no font or image asset.
+const RED = "#E5383B";
+const YELLOW = "#F2C12E";
+const GREEN = "#2BA84A";
+const GRAY = "#7F7F7F";
+const BLACK = "#262626";
+const PINK = "#F4A6A6";
+const DARK_GRAY = "#8C8C8C";
+const GOLD = "#F5B800";
+const BLUE = "#2F6EBA";
+const EMPTY = "#D9D9D9";
+const UP = 0;
+const UP_RIGHT = 45;
+const RIGHT = 90;
+const DOWN_RIGHT = 135;
+const DOWN = 180;
+const arrow = (angle, color) => ({
+    kind: "arrow",
+    angle,
+    color,
+});
+const circle = (color) => ({ kind: "circle", color });
+/** Every icon set, lowest bucket first (OOXML `iconId` order). */
+export const CF_ICON_SETS = {
+    "3Arrows": [arrow(DOWN, RED), arrow(RIGHT, YELLOW), arrow(UP, GREEN)],
+    "3ArrowsGray": [arrow(DOWN, GRAY), arrow(RIGHT, GRAY), arrow(UP, GRAY)],
+    "3Flags": [
+        { kind: "flag", color: RED },
+        { kind: "flag", color: YELLOW },
+        { kind: "flag", color: GREEN },
+    ],
+    "3TrafficLights1": [circle(RED), circle(YELLOW), circle(GREEN)],
+    "3TrafficLights2": [
+        { kind: "rimmedCircle", color: RED },
+        { kind: "rimmedCircle", color: YELLOW },
+        { kind: "rimmedCircle", color: GREEN },
+    ],
+    "3Signs": [
+        { kind: "diamond", color: RED },
+        { kind: "triangleUp", color: YELLOW },
+        circle(GREEN),
+    ],
+    "3Symbols": [
+        { kind: "symbol", glyph: "cross", color: RED },
+        { kind: "symbol", glyph: "exclamation", color: YELLOW },
+        { kind: "symbol", glyph: "check", color: GREEN },
+    ],
+    "3Symbols2": [
+        { kind: "symbolPlain", glyph: "cross", color: RED },
+        { kind: "symbolPlain", glyph: "exclamation", color: YELLOW },
+        { kind: "symbolPlain", glyph: "check", color: GREEN },
+    ],
+    "3Stars": [
+        { kind: "star", fill: 0 },
+        { kind: "star", fill: 0.5 },
+        { kind: "star", fill: 1 },
+    ],
+    "3Triangles": [
+        { kind: "triangleDown", color: RED },
+        { kind: "dash", color: YELLOW },
+        { kind: "triangleUp", color: GREEN },
+    ],
+    "4Arrows": [
+        arrow(DOWN, RED),
+        arrow(DOWN_RIGHT, YELLOW),
+        arrow(UP_RIGHT, YELLOW),
+        arrow(UP, GREEN),
+    ],
+    "4ArrowsGray": [
+        arrow(DOWN, GRAY),
+        arrow(DOWN_RIGHT, GRAY),
+        arrow(UP_RIGHT, GRAY),
+        arrow(UP, GRAY),
+    ],
+    "4RedToBlack": [circle(BLACK), circle(DARK_GRAY), circle(PINK), circle(RED)],
+    "4Rating": [1, 2, 3, 4].map((filled) => ({ kind: "rating", filled })),
+    "4TrafficLights": [circle(BLACK), circle(RED), circle(YELLOW), circle(GREEN)],
+    "5Arrows": [
+        arrow(DOWN, RED),
+        arrow(DOWN_RIGHT, YELLOW),
+        arrow(RIGHT, YELLOW),
+        arrow(UP_RIGHT, YELLOW),
+        arrow(UP, GREEN),
+    ],
+    "5ArrowsGray": [
+        arrow(DOWN, GRAY),
+        arrow(DOWN_RIGHT, GRAY),
+        arrow(RIGHT, GRAY),
+        arrow(UP_RIGHT, GRAY),
+        arrow(UP, GRAY),
+    ],
+    "5Rating": [0, 1, 2, 3, 4].map((filled) => ({ kind: "rating", filled })),
+    "5Quarters": [0, 1, 2, 3, 4].map((filled) => ({ kind: "quarters", filled })),
+    "5Boxes": [0, 1, 2, 3, 4].map((filled) => ({ kind: "boxes", filled })),
+};
+/** Families Excel only stores in the x14 extension (no Excel 2007 equivalent). */
+export const X14_ONLY_ICON_SETS = new Set([
+    "3Stars",
+    "3Triangles",
+    "5Boxes",
+]);
+export const getCfIcon = (iconSet, iconId) => iconSet && iconId != null
+    ? CF_ICON_SETS[iconSet]?.[iconId]
+    : undefined;
+const ARROW_POINTS = [
+    [8, 1],
+    [15, 8],
+    [11, 8],
+    [11, 15],
+    [5, 15],
+    [5, 8],
+    [1, 8],
+];
+const STAR_POINTS = Array.from({ length: 10 }, (_, i) => {
+    const radius = i % 2 === 0 ? 7.5 : 3.2;
+    const angle = -Math.PI / 2 + (i * Math.PI) / 5;
+    return [8 + radius * Math.cos(angle), 8.6 + radius * Math.sin(angle)];
+});
+/**
+ * Paint `icon` into the square at (`x`, `y`) with side `size` (local canvas
+ * coordinates).
+ */
+export const paintCfIcon = (ctx, icon, x, y, size) => {
+    const k = size / 16;
+    const px = (u) => x + u * k;
+    const py = (v) => y + v * k;
+    const polygon = (points) => {
+        ctx.beginPath();
+        points.forEach(([u, v], i) => i === 0 ? ctx.moveTo(px(u), py(v)) : ctx.lineTo(px(u), py(v)));
+        ctx.closePath();
+    };
+    const fillWith = (color) => {
+        ctx.setAttr("fillStyle", color);
+        ctx.fill();
+    };
+    const strokeWith = (color, width) => {
+        ctx.setAttr("strokeStyle", color);
+        ctx.setAttr("lineWidth", width * k);
+        ctx.setAttr("lineCap", "round");
+        ctx.setAttr("lineJoin", "round");
+        ctx.stroke();
+    };
+    const disc = (radius) => {
+        ctx.beginPath();
+        ctx.arc(px(8), py(8), radius * k, 0, Math.PI * 2);
+        ctx.closePath();
+    };
+    const glyph = (kind, color, width) => {
+        ctx.beginPath();
+        if (kind === "check") {
+            ctx.moveTo(px(4.5), py(8.5));
+            ctx.lineTo(px(7), py(11));
+            ctx.lineTo(px(11.5), py(5));
+        }
+        else if (kind === "cross") {
+            ctx.moveTo(px(5), py(5));
+            ctx.lineTo(px(11), py(11));
+            ctx.moveTo(px(11), py(5));
+            ctx.lineTo(px(5), py(11));
+        }
+        else {
+            ctx.moveTo(px(8), py(3.5));
+            ctx.lineTo(px(8), py(9));
+            ctx.moveTo(px(8), py(12));
+            ctx.lineTo(px(8), py(12.2));
+        }
+        strokeWith(color, width);
+    };
+    switch (icon.kind) {
+        case "arrow": {
+            const rad = (icon.angle * Math.PI) / 180;
+            const cos = Math.cos(rad);
+            const sin = Math.sin(rad);
+            polygon(ARROW_POINTS.map(([u, v]) => [
+                8 + (u - 8) * cos - (v - 8) * sin,
+                8 + (u - 8) * sin + (v - 8) * cos,
+            ]));
+            fillWith(icon.color);
+            return;
+        }
+        case "circle":
+            disc(7);
+            fillWith(icon.color);
+            return;
+        case "rimmedCircle":
+            ctx.beginPath();
+            ctx.rect(px(0.5), py(0.5), 15 * k, 15 * k);
+            ctx.closePath();
+            fillWith(BLACK);
+            disc(5.5);
+            fillWith(icon.color);
+            return;
+        case "flag":
+            ctx.beginPath();
+            ctx.rect(px(3), py(1), 1.5 * k, 14 * k);
+            ctx.closePath();
+            fillWith(BLACK);
+            polygon([
+                [4.5, 1.5],
+                [14, 5.25],
+                [4.5, 9],
+            ]);
+            fillWith(icon.color);
+            return;
+        case "diamond":
+            polygon([
+                [8, 1],
+                [15, 8],
+                [8, 15],
+                [1, 8],
+            ]);
+            fillWith(icon.color);
+            return;
+        case "triangleUp":
+            polygon([
+                [8, 2],
+                [15, 14],
+                [1, 14],
+            ]);
+            fillWith(icon.color);
+            return;
+        case "triangleDown":
+            polygon([
+                [1, 2],
+                [15, 2],
+                [8, 14],
+            ]);
+            fillWith(icon.color);
+            return;
+        case "dash":
+            ctx.beginPath();
+            ctx.rect(px(2), py(6), 12 * k, 4 * k);
+            ctx.closePath();
+            fillWith(icon.color);
+            return;
+        case "symbol":
+            disc(7.5);
+            fillWith(icon.color);
+            glyph(icon.glyph, "#FFFFFF", 2);
+            return;
+        case "symbolPlain":
+            glyph(icon.glyph, icon.color, 2.6);
+            return;
+        case "star":
+            if (icon.fill > 0) {
+                ctx.save();
+                if (icon.fill < 1) {
+                    ctx.beginPath();
+                    ctx.rect(px(0), py(0), 8 * k, 16 * k);
+                    ctx.clip();
+                }
+                polygon(STAR_POINTS);
+                fillWith(GOLD);
+                ctx.restore();
+            }
+            polygon(STAR_POINTS);
+            strokeWith(GOLD, 1);
+            return;
+        case "rating":
+            for (let bar = 0; bar < 4; bar++) {
+                const height = 4 + bar * 3.5;
+                ctx.beginPath();
+                ctx.rect(px(1 + bar * 3.75), py(15 - height), 2.75 * k, height * k);
+                ctx.closePath();
+                fillWith(bar < icon.filled ? BLUE : EMPTY);
+            }
+            return;
+        case "quarters":
+            disc(7);
+            fillWith("#FFFFFF");
+            if (icon.filled > 0) {
+                ctx.beginPath();
+                ctx.moveTo(px(8), py(8));
+                ctx.arc(px(8), py(8), 7 * k, -Math.PI / 2, -Math.PI / 2 + (icon.filled / 4) * Math.PI * 2);
+                ctx.closePath();
+                fillWith(BLACK);
+            }
+            disc(7);
+            strokeWith(BLACK, 1);
+            return;
+        case "boxes": {
+            // Quadrants fill clockwise from the top-left.
+            const cells = [
+                [1.5, 1.5],
+                [8.5, 1.5],
+                [8.5, 8.5],
+                [1.5, 8.5],
+            ];
+            cells.forEach(([u, v], i) => {
+                ctx.beginPath();
+                ctx.rect(px(u), py(v), 6 * k, 6 * k);
+                ctx.closePath();
+                fillWith(i < icon.filled ? BLUE : EMPTY);
+            });
+            return;
+        }
+    }
+};