@mcp-b/viz-components 0.2.22 → 0.3.1

package/dist/{chart-B-xXO_Qw.js → chart-BSbFRQju.js}

@@ -152,11 +152,13 @@ var SigveloChart = class extends SigveloElement {
 		})).filter((entry) => entry.value !== void 0);
 		if (numeric.length === 0) return nothing;
 		const includeZero = this.type === "bar";
-		const y = scaleLinear().domain(paddedExtent(numeric.map((entry) => entry.value), includeZero)).nice().range([innerHeight, 0]);
+		const values = numeric.map((entry) => entry.value);
+		const bins = this.type === "histogram" ? bin().thresholds(Math.min(12, Math.max(1, Math.ceil(Math.sqrt(values.length)))))(values) : void 0;
+		const y = scaleLinear().domain(bins ? [0, Math.max(1, ...bins.map((bucket) => bucket.length))] : paddedExtent(values, includeZero)).nice().range([innerHeight, 0]);
 		const labels = numeric.map((entry) => labelAt(entry.row, this.xField, entry.index));
 		const xBand = scaleBand().domain(numeric.map((_, index) => index)).range([0, innerWidth]).padding(.2);
 		const baseline = includeZero ? y(0) : innerHeight;
-		const yTicks = y.ticks(4);
+		const yTicks = y.ticks(4).filter((tick) => !bins || Number.isInteger(tick));
 		const labelStride = Math.max(1, Math.ceil(labels.length / 8));
 		const axes = svg`
       ${yTicks.map((tick) => {
@@ -210,18 +212,15 @@ var SigveloChart = class extends SigveloElement {
               >`)}
       </g>`;
 		}
-		if (this.type === "histogram") {
-			const values = numeric.map((entry) => entry.value);
-			const bins = bin().thresholds(Math.min(12, Math.max(1, Math.ceil(Math.sqrt(values.length)))))(values);
-			const countScale = scaleLinear().domain([0, Math.max(1, ...bins.map((bucket) => bucket.length))]).range([innerHeight, 0]);
+		if (bins) {
 			const bucketWidth = innerWidth / Math.max(1, bins.length);
 			return svg`${axes}<g transform="translate(${PADDING.left}, ${PADDING.top})"
           >${bins.map((bucket, index) => svg`<rect
                 class="mark"
                 x=${index * bucketWidth + 1}
-                y=${countScale(bucket.length)}
+                y=${y(bucket.length)}
                 width=${Math.max(1, bucketWidth - 2)}
-                height=${innerHeight - countScale(bucket.length)}
+                height=${innerHeight - y(bucket.length)}
                 ><title>${bucket.x0 ?? 0}–${bucket.x1 ?? 0}: ${bucket.length}</title></rect
               >`)}</g
         >`;

package/dist/components/chart/chart.js

@@ -1,2 +1,2 @@
-import { t as SigveloChart } from "../../chart-B-xXO_Qw.js";
+import { t as SigveloChart } from "../../chart-BSbFRQju.js";
 export { SigveloChart };

package/dist/components/distribution/distribution.js

@@ -1,4 +1,4 @@
-import "../../chart-B-xXO_Qw.js";
+import "../../chart-BSbFRQju.js";
 import { t as __decorate } from "../../decorate-DcF3lt7P.js";
 import { html } from "lit";
 import { property } from "lit/decorators.js";

package/dist/components/legend/legend.d.ts

@@ -9,7 +9,14 @@ interface LegendItem {
 /** @tag sigvelo-viz-legend @summary Displays a compact color legend for charts and thematic maps. */
 declare class SigveloVizLegend extends SigveloElement {
   static styles: CSSResultGroup;
-  title: string;
+  /**
+   * The visible text above the swatches, which also names the region.
+   *
+   * Not `title`: that is a global HTML attribute, so a Lit property of that name
+   * would make this heading and the browser's tooltip the same value, and each
+   * would overwrite the other.
+   */
+  heading: string;
   items: readonly LegendItem[];
   render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/legend/legend.js

@@ -29,15 +29,15 @@ const styles = css`
 var SigveloVizLegend = class extends SigveloElement {
 	constructor(..._args) {
 		super(..._args);
-		this.title = "Legend";
+		this.heading = "Legend";
 		this.items = [];
 	}
 	static {
 		this.styles = [hostStyles, styles];
 	}
 	render() {
-		return html`<section aria-label=${this.title} part="legend">
-      <strong part="title">${this.title}</strong>
+		return html`<section aria-labelledby="heading" part="legend">
+      <strong id="heading" part="heading">${this.heading}</strong>
       <div class="items">
         ${this.items.map((item) => html`<span class="item" part="item"
               ><span class="swatch" style=${`background:${item.color}`} part="swatch"></span
@@ -47,7 +47,7 @@ var SigveloVizLegend = class extends SigveloElement {
     </section>`;
 	}
 };
-__decorate([property()], SigveloVizLegend.prototype, "title", void 0);
+__decorate([property()], SigveloVizLegend.prototype, "heading", void 0);
 __decorate([property({ attribute: false })], SigveloVizLegend.prototype, "items", void 0);
 customElements.define("sigvelo-viz-legend", SigveloVizLegend);
 //#endregion

package/dist/docs/custom-elements.json

@@ -318,11 +318,12 @@
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "heading",
               "type": {
                 "text": "string"
               },
-              "default": "\"Legend\""
+              "default": "\"Legend\"",
+              "description": "The visible text above the swatches, which also names the region.\n\nNot `title`: that is a global HTML attribute, so a Lit property of that name\nwould make this heading and the browser's tooltip the same value, and each\nwould overwrite the other."
             },
             {
               "kind": "field",

package/dist/index.js

@@ -1,4 +1,4 @@
-import { t as SigveloChart } from "./chart-B-xXO_Qw.js";
+import { t as SigveloChart } from "./chart-BSbFRQju.js";
 import { SigveloChartCard } from "./components/chart-card/chart-card.js";
 import { SigveloDistribution } from "./components/distribution/distribution.js";
 import { SigveloVizLegend } from "./components/legend/legend.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/viz-components",
-  "version": "0.2.22",
+  "version": "0.3.1",
   "description": "D3-backed, framework-agnostic Sigvelo visualization web components.",
   "keywords": [
     "charts",
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@mcp-b/wc-support": "0.2.19"
+    "@mcp-b/wc-support": "0.3.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",