From ddd816fd6cb52685190b122ba265f957e31a9cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Mon, 18 Mar 2024 18:25:46 +0900
Subject: [PATCH 01/33] add bar chart and histgram branches

---
 stanzas/barchart/index.ts      | 21 +++++++++++++++++++++
 stanzas/barchart/metadata.json |  6 ++++++
 2 files changed, 27 insertions(+)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index b184a9a1..8e7446ee 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -33,6 +33,17 @@ export default class Barchart extends MetaStanza {
   }
 
   async renderNext() {
+    // If "binKey" is specified, this component behaves as a histogram; if not, it behaves as a bar chart.
+    const binKey = this.params["data-bin_key"];
+    console.log(binKey)
+    if (binKey) {
+      this.drawHistogram(binKey);
+    } else {
+      this.drawBarChart();
+    }
+  }
+
+  drawBarChart() {
     const color = scaleOrdinal().range(getStanzaColors(this));
 
     const width = +this.css("--togostanza-canvas-width");
@@ -40,6 +51,7 @@ export default class Barchart extends MetaStanza {
 
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
+    console.log(xKeyName, yKeyName)
     const xAxisTitle =
       typeof this.params["axis-x-title"] === "undefined"
         ? xKeyName
@@ -64,6 +76,7 @@ export default class Barchart extends MetaStanza {
     const y2Sym = Symbol("y2");
 
     const values = structuredClone(this._data);
+    console.log(values);
 
     const xAxisLabels = [
       ...new Set(values.map((d) => d[xKeyName])),
@@ -84,6 +97,7 @@ export default class Barchart extends MetaStanza {
       map.get(curr[groupKeyName]).push(curr);
       return map;
     }, new Map());
+    console.log(this._dataByGroup)
 
     this._dataByX = values.reduce((map, curr) => {
       if (!map.has(curr[xKeyName])) {
@@ -92,8 +106,10 @@ export default class Barchart extends MetaStanza {
       map.get(curr[xKeyName]).push(curr);
       return map;
     }, new Map());
+    console.log(this._dataByX)
 
     const groupNames = this._dataByGroup.keys() as Iterable<string>;
+    console.log(groupKeyName)
 
     color.domain(groupNames);
 
@@ -263,6 +279,11 @@ export default class Barchart extends MetaStanza {
       }
       this.tooltips.setup(this._main.querySelectorAll("[data-tooltip]"));
     }
+
+  }
+
+  drawHistogram(binKey: string,) {
+    console.log(binKey)
   }
 
   handleEvent(event) {
diff --git a/stanzas/barchart/metadata.json b/stanzas/barchart/metadata.json
index 97d63903..5b7c51ba 100644
--- a/stanzas/barchart/metadata.json
+++ b/stanzas/barchart/metadata.json
@@ -26,6 +26,12 @@
       "stanza:description": "Data type",
       "stanza:required": true
     },
+    {
+      "stanza:key": "data-bin_key",
+      "stanza:type": "text",
+      "stanza:example": "count",
+      "stanza:description": "If specified, the key is processed as a bin"
+    },
     {
       "stanza:key": "axis-x-key",
       "stanza:type": "text",

From 2d38a1dc5b16cec70f5b5b382c6177734aa0d437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 19 Mar 2024 15:47:42 +0900
Subject: [PATCH 02/33] inprogress...

---
 stanzas/barchart/index.ts | 70 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 8e7446ee..1dd543b5 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -11,7 +11,7 @@ import {
   downloadCSVMenuItem,
   downloadTSVMenuItem,
 } from "togostanza-utils";
-import { scaleBand, scaleOrdinal, select } from "d3";
+import { scaleBand, scaleOrdinal, scaleLinear, select, bin } from "d3";
 
 export default class Barchart extends MetaStanza {
   xAxisGen: Axis;
@@ -51,7 +51,6 @@ export default class Barchart extends MetaStanza {
 
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
-    console.log(xKeyName, yKeyName)
     const xAxisTitle =
       typeof this.params["axis-x-title"] === "undefined"
         ? xKeyName
@@ -282,8 +281,71 @@ export default class Barchart extends MetaStanza {
 
   }
 
-  drawHistogram(binKey: string,) {
-    console.log(binKey)
+  drawHistogram(binKey: string) {
+
+    const values = structuredClone(this._data);
+    console.log(values);
+    const data = values.map((d) => +d[binKey]);
+    console.log(data);
+
+    const width = +this.css("--togostanza-canvas-width");
+    const height = +this.css("--togostanza-canvas-height");
+
+    let svg = select(this._main.querySelector("svg")),
+      margin = {top: 20, right: 20, bottom: 30, left: 40},
+      g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+    svg
+      .attr("width", width)
+      .attr("height", height);
+
+    // X軸とY軸のスケールを設定
+    const x = scaleLinear()
+      .domain([Math.min(...data), Math.max(...data)]) // データの範囲に合わせて調整
+      .rangeRound([0, width]);
+    const y = scaleLinear()
+      .range([height, 0]);
+
+      console.log(x.domain())
+
+    // ビンの設定
+    const bins = bin()
+      .domain(x.domain() as [number, number])
+      .thresholds(x.ticks(20)) // 20個のビンに分ける
+      (data);
+    console.log(bins)
+
+
+
+
+
+  // // Y軸のスケールをビンのデータに合わせて設定
+  // y.domain([0, d3.max(bins, d => d.length)]);
+
+  // // バーを描画
+  // const bar = g.selectAll(".bar")
+  //   .data(bins)
+  //   .enter().append("g")
+  //     .attr("class", "bar")
+  //     .attr("transform", d => `translate(${x(d.x0)},${y(d.length)})`);
+
+  // bar.append("rect")
+  //     .attr("x", 1)
+  //     .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
+  //     .attr("height", d => height - y(d.length))
+  //     .attr("fill", "steelblue");
+
+  // // X軸を追加
+  // g.append("g")
+  //     .attr("class", "axis axis--x")
+  //     .attr("transform", `translate(0,${height})`)
+  //     .call(d3.axisBottom(x));
+
+  // // Y軸を追加
+  // g.append("g")
+  //     .attr("class", "axis axis--y")
+  //     .call(d3.axisLeft(y));
+
+
   }
 
   handleEvent(event) {

From 8cf899ee3f15faee123360f789bf051c0331c2f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 19 Mar 2024 18:32:20 +0900
Subject: [PATCH 03/33] draw bin

---
 stanzas/barchart/index.ts | 114 ++++++++++++++++++++------------------
 1 file changed, 61 insertions(+), 53 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 1dd543b5..4bb65e57 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -11,7 +11,16 @@ import {
   downloadCSVMenuItem,
   downloadTSVMenuItem,
 } from "togostanza-utils";
-import { scaleBand, scaleOrdinal, scaleLinear, select, bin } from "d3";
+import {
+  scaleBand,
+  scaleOrdinal,
+  scaleLinear,
+  select,
+  bin,
+  max,
+  axisBottom,
+  axisLeft,
+} from "d3";
 
 export default class Barchart extends MetaStanza {
   xAxisGen: Axis;
@@ -35,7 +44,7 @@ export default class Barchart extends MetaStanza {
   async renderNext() {
     // If "binKey" is specified, this component behaves as a histogram; if not, it behaves as a bar chart.
     const binKey = this.params["data-bin_key"];
-    console.log(binKey)
+    console.log(binKey);
     if (binKey) {
       this.drawHistogram(binKey);
     } else {
@@ -96,7 +105,7 @@ export default class Barchart extends MetaStanza {
       map.get(curr[groupKeyName]).push(curr);
       return map;
     }, new Map());
-    console.log(this._dataByGroup)
+    console.log(this._dataByGroup);
 
     this._dataByX = values.reduce((map, curr) => {
       if (!map.has(curr[xKeyName])) {
@@ -105,10 +114,10 @@ export default class Barchart extends MetaStanza {
       map.get(curr[xKeyName]).push(curr);
       return map;
     }, new Map());
-    console.log(this._dataByX)
+    console.log(this._dataByX);
 
     const groupNames = this._dataByGroup.keys() as Iterable<string>;
-    console.log(groupKeyName)
+    console.log(groupKeyName);
 
     color.domain(groupNames);
 
@@ -278,11 +287,9 @@ export default class Barchart extends MetaStanza {
       }
       this.tooltips.setup(this._main.querySelectorAll("[data-tooltip]"));
     }
-
   }
 
   drawHistogram(binKey: string) {
-
     const values = structuredClone(this._data);
     console.log(values);
     const data = values.map((d) => +d[binKey]);
@@ -291,61 +298,62 @@ export default class Barchart extends MetaStanza {
     const width = +this.css("--togostanza-canvas-width");
     const height = +this.css("--togostanza-canvas-height");
 
-    let svg = select(this._main.querySelector("svg")),
-      margin = {top: 20, right: 20, bottom: 30, left: 40},
-      g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
-    svg
-      .attr("width", width)
-      .attr("height", height);
+    let svg = select(this._main.querySelector("svg"));
+    if (!svg.empty()) {
+      svg.remove();
+      this.xAxisGen = null;
+      this.yAxisGen = null;
+    }
+    svg = select(this._main).append("svg");
+    svg.attr("width", width).attr("height", height);
+
+    const margin = { top: 20, right: 20, bottom: 30, left: 40 },
+      g = svg
+        .append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
 
     // X軸とY軸のスケールを設定
     const x = scaleLinear()
       .domain([Math.min(...data), Math.max(...data)]) // データの範囲に合わせて調整
       .rangeRound([0, width]);
-    const y = scaleLinear()
-      .range([height, 0]);
-
-      console.log(x.domain())
+    const y = scaleLinear().range([height, 0]);
 
     // ビンの設定
     const bins = bin()
       .domain(x.domain() as [number, number])
-      .thresholds(x.ticks(20)) // 20個のビンに分ける
-      (data);
-    console.log(bins)
-
-
-
-
-
-  // // Y軸のスケールをビンのデータに合わせて設定
-  // y.domain([0, d3.max(bins, d => d.length)]);
-
-  // // バーを描画
-  // const bar = g.selectAll(".bar")
-  //   .data(bins)
-  //   .enter().append("g")
-  //     .attr("class", "bar")
-  //     .attr("transform", d => `translate(${x(d.x0)},${y(d.length)})`);
-
-  // bar.append("rect")
-  //     .attr("x", 1)
-  //     .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
-  //     .attr("height", d => height - y(d.length))
-  //     .attr("fill", "steelblue");
-
-  // // X軸を追加
-  // g.append("g")
-  //     .attr("class", "axis axis--x")
-  //     .attr("transform", `translate(0,${height})`)
-  //     .call(d3.axisBottom(x));
-
-  // // Y軸を追加
-  // g.append("g")
-  //     .attr("class", "axis axis--y")
-  //     .call(d3.axisLeft(y));
-
-
+      .thresholds(x.ticks(20))(
+      // 20個のビンに分ける
+      data
+    );
+    console.log(bins);
+
+    // Y軸のスケールをビンのデータに合わせて設定
+    y.domain([0, max(bins, (d) => d.length)]);
+
+    // バーを描画
+    const bar = g
+      .selectAll(".bar")
+      .data(bins)
+      .enter()
+      .append("g")
+      .attr("class", "bar")
+      .attr("transform", (d) => `translate(${x(d.x0)},${y(d.length)})`);
+
+    bar
+      .append("rect")
+      .attr("x", 1)
+      .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
+      .attr("height", (d) => height - y(d.length))
+      .attr("fill", "steelblue");
+
+    // X軸を追加
+    g.append("g")
+      .attr("class", "axis axis--x")
+      .attr("transform", `translate(0,${height})`)
+      .call(axisBottom(x));
+
+    // Y軸を追加
+    g.append("g").attr("class", "axis axis--y").call(axisLeft(y));
   }
 
   handleEvent(event) {

From 0c871f6af90f95407c5bb211ea0af61fab1e52e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 19 Mar 2024 18:56:28 +0900
Subject: [PATCH 04/33] adjust size

---
 stanzas/barchart/index.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 4bb65e57..221f2bee 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -295,8 +295,11 @@ export default class Barchart extends MetaStanza {
     const data = values.map((d) => +d[binKey]);
     console.log(data);
 
-    const width = +this.css("--togostanza-canvas-width");
-    const height = +this.css("--togostanza-canvas-height");
+    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
+    const width =
+      +this.css("--togostanza-canvas-width") - margin.left - margin.right;
+    const height =
+      +this.css("--togostanza-canvas-height") - margin.top - margin.bottom;
 
     let svg = select(this._main.querySelector("svg"));
     if (!svg.empty()) {
@@ -305,12 +308,13 @@ export default class Barchart extends MetaStanza {
       this.yAxisGen = null;
     }
     svg = select(this._main).append("svg");
-    svg.attr("width", width).attr("height", height);
+    svg
+      .attr("width", +this.css("--togostanza-canvas-width"))
+      .attr("height", +this.css("--togostanza-canvas-height"));
 
-    const margin = { top: 20, right: 20, bottom: 30, left: 40 },
-      g = svg
-        .append("g")
-        .attr("transform", `translate(${margin.left},${margin.top})`);
+    const g = svg
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
 
     // X軸とY軸のスケールを設定
     const x = scaleLinear()

From 42574ab57da2638aac3244bff78e51035d8248a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 19 Mar 2024 20:49:24 +0900
Subject: [PATCH 05/33] change flag to toggle histogram or not

---
 stanzas/barchart/index.ts      | 17 ++++++++------
 stanzas/barchart/metadata.json | 43 +++++++++++++++++++++++++---------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 221f2bee..ca89abcb 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -43,12 +43,13 @@ export default class Barchart extends MetaStanza {
 
   async renderNext() {
     // If "binKey" is specified, this component behaves as a histogram; if not, it behaves as a bar chart.
-    const binKey = this.params["data-bin_key"];
-    console.log(binKey);
-    if (binKey) {
-      this.drawHistogram(binKey);
-    } else {
-      this.drawBarChart();
+    switch (this.params["data-interpretation"]) {
+      case "categorical":
+        this.drawBarChart();
+        break;
+      case "distribution":
+        this.drawHistogram();
+        break;
     }
   }
 
@@ -289,7 +290,9 @@ export default class Barchart extends MetaStanza {
     }
   }
 
-  drawHistogram(binKey: string) {
+  drawHistogram() {
+    const binKey = this.params["axis-x-key"];
+    console.log(binKey);
     const values = structuredClone(this._data);
     console.log(values);
     const data = values.map((d) => +d[binKey]);
diff --git a/stanzas/barchart/metadata.json b/stanzas/barchart/metadata.json
index 5b7c51ba..11f85da7 100644
--- a/stanzas/barchart/metadata.json
+++ b/stanzas/barchart/metadata.json
@@ -8,7 +8,10 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE", "Einishi Tech"],
+  "stanza:contributor": [
+    "PENQE",
+    "Einishi Tech"
+  ],
   "stanza:created": "2021-01-18",
   "stanza:updated": "2021-02-16",
   "stanza:parameter": [
@@ -21,28 +24,40 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
     },
     {
-      "stanza:key": "data-bin_key",
-      "stanza:type": "text",
-      "stanza:example": "count",
-      "stanza:description": "If specified, the key is processed as a bin"
+      "stanza:key": "data-interpretation",
+      "stanza:type": "single-choice",
+      "stanza:choice": [
+        "categorical",
+        "distribution"
+      ],
+      "stanza:example": "distribution",
+      "stanza:description": "\"categorical\" is interpreted as a so-called bar chart, and \"distribution\" as a histogram."
     },
     {
       "stanza:key": "axis-x-key",
       "stanza:type": "text",
-      "stanza:example": "chromosome",
+      "stanza:example": "count",
       "stanza:description": "X axis data key",
       "stanza:required": true
     },
     {
       "stanza:key": "axis-x-placement",
       "stanza:type": "single-choice",
-      "stanza:choice": ["top", "bottom"],
+      "stanza:choice": [
+        "top",
+        "bottom"
+      ],
       "stanza:example": "bottom",
       "stanza:description": "axis placement",
       "stanza:required": false
@@ -104,7 +119,10 @@
     {
       "stanza:key": "axis-y-placement",
       "stanza:type": "single-choice",
-      "stanza:choice": ["left", "right"],
+      "stanza:choice": [
+        "left",
+        "right"
+      ],
       "stanza:example": "left",
       "stanza:description": "Y axis placement",
       "stanza:required": false
@@ -167,7 +185,10 @@
     {
       "stanza:key": "grouping-arrangement",
       "stanza:type": "single-choice",
-      "stanza:choice": ["stacked", "grouped"],
+      "stanza:choice": [
+        "stacked",
+        "grouped"
+      ],
       "stanza:example": "grouped",
       "stanza:description": "Bars arrangement",
       "stanza:required": false
@@ -351,4 +372,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
+}
\ No newline at end of file

From 95e2d9ff3ab66841089d7196883adea21911f60c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Wed, 20 Mar 2024 15:06:43 +0900
Subject: [PATCH 06/33] update axis

---
 stanzas/barchart/index.ts | 90 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 80 insertions(+), 10 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index ca89abcb..7d51a847 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -85,11 +85,11 @@ export default class Barchart extends MetaStanza {
     const y2Sym = Symbol("y2");
 
     const values = structuredClone(this._data);
-    console.log(values);
 
     const xAxisLabels = [
       ...new Set(values.map((d) => d[xKeyName])),
     ] as string[];
+    console.log(xAxisLabels);
 
     let params;
     try {
@@ -106,7 +106,6 @@ export default class Barchart extends MetaStanza {
       map.get(curr[groupKeyName]).push(curr);
       return map;
     }, new Map());
-    console.log(this._dataByGroup);
 
     this._dataByX = values.reduce((map, curr) => {
       if (!map.has(curr[xKeyName])) {
@@ -118,7 +117,6 @@ export default class Barchart extends MetaStanza {
     console.log(this._dataByX);
 
     const groupNames = this._dataByGroup.keys() as Iterable<string>;
-    console.log(groupKeyName);
 
     color.domain(groupNames);
 
@@ -129,6 +127,7 @@ export default class Barchart extends MetaStanza {
       d[y1Sym] = 0;
       d[y2Sym] = d[yKeyName];
     });
+    console.log(values);
 
     let y2s = [];
 
@@ -291,11 +290,33 @@ export default class Barchart extends MetaStanza {
   }
 
   drawHistogram() {
-    const binKey = this.params["axis-x-key"];
-    console.log(binKey);
+    const xKeyName = this.params["axis-x-key"];
+    const yKeyName = this.params["axis-y-key"];
+    const xAxisTitle =
+      typeof this.params["axis-x-title"] === "undefined"
+        ? xKeyName
+        : this.params["axis-x-title"];
+    const yAxisTitle =
+      typeof this.params["axis-y-title"] === "undefined"
+        ? yKeyName
+        : this.params["axis-y-title"];
+
+    const showLegend = this.params["legend-visible"];
+    const legendTitle = this.params["legend-title"];
+
     const values = structuredClone(this._data);
     console.log(values);
-    const data = values.map((d) => +d[binKey]);
+
+    let params;
+    try {
+      params = paramsModel.parse(this.params);
+    } catch (error) {
+      console.log(error);
+      return;
+    }
+    console.log(params);
+
+    const data = values.map((d) => +d[xKeyName]);
     console.log(data);
 
     const margin = { top: 20, right: 20, bottom: 30, left: 40 };
@@ -353,11 +374,60 @@ export default class Barchart extends MetaStanza {
       .attr("height", (d) => height - y(d.length))
       .attr("fill", "steelblue");
 
+    const axisArea = {
+      x: 0,
+      y: 0,
+      width: +this.css("--togostanza-canvas-width"),
+      height: +this.css("--togostanza-canvas-height"),
+    };
+
     // X軸を追加
-    g.append("g")
-      .attr("class", "axis axis--x")
-      .attr("transform", `translate(0,${height})`)
-      .call(axisBottom(x));
+    const xParams: AxisParamsI = {
+      placement: params["axis-x-placement"],
+      domain: [Math.min(...data), Math.max(...data)],
+      drawArea: axisArea,
+      margins: this.MARGIN,
+      tickLabelsAngle: params["axis-x-ticks_label_angle"],
+      title: xAxisTitle,
+      titlePadding: params["axis-x-title_padding"],
+      scale: "linear",
+      gridInterval: params["axis-x-gridlines_interval"],
+      gridIntervalUnits: params["axis-x-gridlines_interval_units"],
+      ticksInterval: params["axis-x-ticks_interval"],
+      ticksIntervalUnits: params["axis-x-ticks_interval_units"],
+      ticksLabelsFormat: params["axis-x-ticks_labels_format"],
+    };
+    const maxY = Math.max(...data);
+    const yDomain = [0, maxY * 1.02];
+    const yParams: AxisParamsI = {
+      placement: params["axis-y-placement"],
+      domain: yDomain,
+      drawArea: axisArea,
+      margins: this.MARGIN,
+      tickLabelsAngle: params["axis-y-ticks_label_angle"],
+      title: yAxisTitle,
+      titlePadding: params["axis-y-title_padding"],
+      scale: "linear",
+      gridInterval: params["axis-y-gridlines_interval"],
+      gridIntervalUnits: params["axis-x-gridlines_interval_units"],
+      ticksInterval: params["axis-y-ticks_interval"],
+      ticksIntervalUnits: params["axis-y-ticks_interval_units"],
+      ticksLabelsFormat: params["axis-y-ticks_labels_format"],
+    };
+
+    if (!this.xAxisGen) {
+      this.xAxisGen = new Axis(svg.node());
+    }
+    if (!this.yAxisGen) {
+      this.yAxisGen = new Axis(svg.node());
+    }
+    this.xAxisGen.update(xParams);
+    this.yAxisGen.update(yParams);
+
+    // g.append("g")
+    //   .attr("class", "axis axis--x")
+    //   .attr("transform", `translate(0,${height})`)
+    //   .call(axisBottom(x));
 
     // Y軸を追加
     g.append("g").attr("class", "axis axis--y").call(axisLeft(y));

From d7513ff040c58a2403caeddcb71469b5bf9ae071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Wed, 20 Mar 2024 17:39:56 +0900
Subject: [PATCH 07/33] improve y axis

---
 stanzas/barchart/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 7d51a847..bb52591f 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -397,7 +397,10 @@ export default class Barchart extends MetaStanza {
       ticksIntervalUnits: params["axis-x-ticks_interval_units"],
       ticksLabelsFormat: params["axis-x-ticks_labels_format"],
     };
-    const maxY = Math.max(...data);
+    const maxY = bins.reduce(
+      (acc, bin) => (bin.length > acc ? bin.length : acc),
+      0
+    );
     const yDomain = [0, maxY * 1.02];
     const yParams: AxisParamsI = {
       placement: params["axis-y-placement"],

From afe716015554454ef09943e3c9cd027bf7c2d5c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 21 Mar 2024 09:02:06 +0900
Subject: [PATCH 08/33] inprogress...

---
 stanzas/barchart/index.ts | 55 ++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index bb52591f..49e362b0 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -304,6 +304,8 @@ export default class Barchart extends MetaStanza {
     const showLegend = this.params["legend-visible"];
     const legendTitle = this.params["legend-title"];
 
+    const numberOfBin = 20;
+
     const values = structuredClone(this._data);
     console.log(values);
 
@@ -336,9 +338,7 @@ export default class Barchart extends MetaStanza {
       .attr("width", +this.css("--togostanza-canvas-width"))
       .attr("height", +this.css("--togostanza-canvas-height"));
 
-    const g = svg
-      .append("g")
-      .attr("transform", `translate(${margin.left},${margin.top})`);
+    this._graphArea = svg.append("g").attr("class", "chart");
 
     // X軸とY軸のスケールを設定
     const x = scaleLinear()
@@ -349,7 +349,7 @@ export default class Barchart extends MetaStanza {
     // ビンの設定
     const bins = bin()
       .domain(x.domain() as [number, number])
-      .thresholds(x.ticks(20))(
+      .thresholds(x.ticks(numberOfBin))(
       // 20個のビンに分ける
       data
     );
@@ -358,22 +358,6 @@ export default class Barchart extends MetaStanza {
     // Y軸のスケールをビンのデータに合わせて設定
     y.domain([0, max(bins, (d) => d.length)]);
 
-    // バーを描画
-    const bar = g
-      .selectAll(".bar")
-      .data(bins)
-      .enter()
-      .append("g")
-      .attr("class", "bar")
-      .attr("transform", (d) => `translate(${x(d.x0)},${y(d.length)})`);
-
-    bar
-      .append("rect")
-      .attr("x", 1)
-      .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
-      .attr("height", (d) => height - y(d.length))
-      .attr("fill", "steelblue");
-
     const axisArea = {
       x: 0,
       y: 0,
@@ -382,6 +366,7 @@ export default class Barchart extends MetaStanza {
     };
 
     // X軸を追加
+    console.log(this.MARGIN);
     const xParams: AxisParamsI = {
       placement: params["axis-x-placement"],
       domain: [Math.min(...data), Math.max(...data)],
@@ -424,16 +409,44 @@ export default class Barchart extends MetaStanza {
     if (!this.yAxisGen) {
       this.yAxisGen = new Axis(svg.node());
     }
+
     this.xAxisGen.update(xParams);
     this.yAxisGen.update(yParams);
 
+    this._graphArea.attr(
+      "transform",
+      `translate(${this.xAxisGen.axisArea.x},${this.xAxisGen.axisArea.y})`
+    );
+    // const g = svg
+    //   .append("g")
+    //   .attr("transform", `translate(${margin.left},${margin.top})`);
+
     // g.append("g")
     //   .attr("class", "axis axis--x")
     //   .attr("transform", `translate(0,${height})`)
     //   .call(axisBottom(x));
 
     // Y軸を追加
-    g.append("g").attr("class", "axis axis--y").call(axisLeft(y));
+    // g.append("g").attr("class", "axis axis--y").call(axisLeft(y));
+
+    // バーを描画
+    const bar = this._graphArea
+      .selectAll(".bar")
+      .data(bins)
+      .enter()
+      .append("g")
+      .attr("class", "bar")
+      .attr(
+        "transform",
+        (d) => `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`
+      );
+
+    bar
+      .append("rect")
+      .attr("x", 1)
+      .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
+      .attr("height", (d) => height - y(d.length))
+      .attr("fill", "steelblue");
   }
 
   handleEvent(event) {

From 4ee945f3dba3f68240382596551be14c25c483a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Wed, 3 Apr 2024 16:03:05 +0900
Subject: [PATCH 09/33] inprogress

---
 stanzas/barchart/index.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 49e362b0..9487c0e5 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -321,11 +321,11 @@ export default class Barchart extends MetaStanza {
     const data = values.map((d) => +d[xKeyName]);
     console.log(data);
 
-    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
+    // const margin = { top: 20, right: 20, bottom: 30, left: 40 };
     const width =
-      +this.css("--togostanza-canvas-width") - margin.left - margin.right;
+      +this.css("--togostanza-canvas-width") - this.MARGIN.LEFT - this.MARGIN.RIGHT;
     const height =
-      +this.css("--togostanza-canvas-height") - margin.top - margin.bottom;
+      +this.css("--togostanza-canvas-height") - this.MARGIN.TOP - this.MARGIN.BOTTOM;
 
     let svg = select(this._main.querySelector("svg"));
     if (!svg.empty()) {
@@ -382,6 +382,7 @@ export default class Barchart extends MetaStanza {
       ticksIntervalUnits: params["axis-x-ticks_interval_units"],
       ticksLabelsFormat: params["axis-x-ticks_labels_format"],
     };
+    console.log(xParams)
     const maxY = bins.reduce(
       (acc, bin) => (bin.length > acc ? bin.length : acc),
       0
@@ -430,6 +431,8 @@ export default class Barchart extends MetaStanza {
     // g.append("g").attr("class", "axis axis--y").call(axisLeft(y));
 
     // バーを描画
+    console.log(this.xAxisGen.axisGen)
+    console.log(this.xAxisGen.axisGen.scale())
     const bar = this._graphArea
       .selectAll(".bar")
       .data(bins)
@@ -438,7 +441,10 @@ export default class Barchart extends MetaStanza {
       .attr("class", "bar")
       .attr(
         "transform",
-        (d) => `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`
+        (d) => {
+          console.log(d)
+          console.log( this.xAxisGen.axisGen.scale()(d.x0) )
+          return `translate(${this.xAxisGen.axisGen.scale()(d.x0)},0)`}
       );
 
     bar
@@ -524,6 +530,7 @@ function drawStackedBars(
     .append("g")
     .classed("bar-group", true)
     .attr("transform", (d) => {
+      console.log(d);
       return `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`;
     });
 

From 385ee71f6fd1acee898eb64e44ae991b15bbb905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 4 Apr 2024 11:29:06 +0900
Subject: [PATCH 10/33] fix y position

---
 stanzas/barchart/index.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 9487c0e5..e63e9c31 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -449,7 +449,7 @@ export default class Barchart extends MetaStanza {
 
     bar
       .append("rect")
-      .attr("x", 1)
+      .attr("y", (d) => y(d.length))
       .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
       .attr("height", (d) => height - y(d.length))
       .attr("fill", "steelblue");
@@ -493,9 +493,7 @@ function drawGroupedBars(
     .enter()
     .append("g")
     .classed("bar-group", true)
-    .attr("transform", (d) => {
-      return `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`;
-    });
+    .attr("transform", (d) => `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`);
 
   barGroup
     .selectAll("rect")

From 9dd56f22e7e1981549b2b5d500167d9e77c4dba3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 4 Apr 2024 11:41:36 +0900
Subject: [PATCH 11/33] support fill color

---
 stanzas/barchart/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index e63e9c31..bdd21899 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -447,12 +447,15 @@ export default class Barchart extends MetaStanza {
           return `translate(${this.xAxisGen.axisGen.scale()(d.x0)},0)`}
       );
 
+      const css = (key) => getComputedStyle(this.element).getPropertyValue(key);
+      const fill = css("--togostanza-theme-series_0_color");
+
     bar
       .append("rect")
       .attr("y", (d) => y(d.length))
       .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
       .attr("height", (d) => height - y(d.length))
-      .attr("fill", "steelblue");
+      .attr("fill", fill);
   }
 
   handleEvent(event) {

From 64073cf5fe73f1fdd4323d1155bd3712e29e0b95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 4 Apr 2024 12:22:54 +0900
Subject: [PATCH 12/33] support bin count

---
 stanzas/barchart/index.ts      | 12 +++++++++---
 stanzas/barchart/metadata.json |  7 +++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index bdd21899..3975abef 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -349,7 +349,7 @@ export default class Barchart extends MetaStanza {
     // ビンの設定
     const bins = bin()
       .domain(x.domain() as [number, number])
-      .thresholds(x.ticks(numberOfBin))(
+      .thresholds(x.ticks(this.params["data-bin-count"]))(
       // 20個のビンに分ける
       data
     );
@@ -431,8 +431,7 @@ export default class Barchart extends MetaStanza {
     // g.append("g").attr("class", "axis axis--y").call(axisLeft(y));
 
     // バーを描画
-    console.log(this.xAxisGen.axisGen)
-    console.log(this.xAxisGen.axisGen.scale())
+    console.log(bins)
     const bar = this._graphArea
       .selectAll(".bar")
       .data(bins)
@@ -456,6 +455,13 @@ export default class Barchart extends MetaStanza {
       .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
       .attr("height", (d) => height - y(d.length))
       .attr("fill", fill);
+    
+    if (this.params["event-outgoing_change_selected_nodes"]) {
+      bar.on("click", (_, d) =>
+      console.log(d)
+        // emitSelectedEvent.apply(this, [d[1][0]["__togostanza_id__"]])
+      );
+    }
   }
 
   handleEvent(event) {
diff --git a/stanzas/barchart/metadata.json b/stanzas/barchart/metadata.json
index 11f85da7..f004d8a2 100644
--- a/stanzas/barchart/metadata.json
+++ b/stanzas/barchart/metadata.json
@@ -44,6 +44,13 @@
       "stanza:example": "distribution",
       "stanza:description": "\"categorical\" is interpreted as a so-called bar chart, and \"distribution\" as a histogram."
     },
+    {
+      "stanza:key": "data-bin-count",
+      "stanza:type": "number",
+      "stanza:example": 20,
+      "stanza:default": 20,
+      "stanza:description": "Specifies the number of histograms. Valid when \"distribution\" is selected for \"data-interpretation\"."
+    },
     {
       "stanza:key": "axis-x-key",
       "stanza:type": "text",

From 2ea4fec0e9d0e1bb94beb57da9b1520f86583586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 4 Apr 2024 12:53:05 +0900
Subject: [PATCH 13/33] embed original values into bins

---
 stanzas/barchart/index.ts | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 3975abef..14632802 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -342,7 +342,7 @@ export default class Barchart extends MetaStanza {
 
     // X軸とY軸のスケールを設定
     const x = scaleLinear()
-      .domain([Math.min(...data), Math.max(...data)]) // データの範囲に合わせて調整
+      .domain([Math.min(...data), Math.max(...data) + 1]) // データの範囲に合わせて調整
       .rangeRound([0, width]);
     const y = scaleLinear().range([height, 0]);
 
@@ -353,6 +353,10 @@ export default class Barchart extends MetaStanza {
       // 20個のビンに分ける
       data
     );
+    bins.forEach((bin) => {
+      // 各ビンにデータ元のデータを追加
+      bin["__values__"] = values.filter(value => value[xKeyName] >= bin.x0 && value[xKeyName] < bin.x1)
+    });
     console.log(bins);
 
     // Y軸のスケールをビンのデータに合わせて設定
@@ -369,7 +373,7 @@ export default class Barchart extends MetaStanza {
     console.log(this.MARGIN);
     const xParams: AxisParamsI = {
       placement: params["axis-x-placement"],
-      domain: [Math.min(...data), Math.max(...data)],
+      domain: x.domain() as [number, number],
       drawArea: axisArea,
       margins: this.MARGIN,
       tickLabelsAngle: params["axis-x-ticks_label_angle"],
@@ -440,10 +444,7 @@ export default class Barchart extends MetaStanza {
       .attr("class", "bar")
       .attr(
         "transform",
-        (d) => {
-          console.log(d)
-          console.log( this.xAxisGen.axisGen.scale()(d.x0) )
-          return `translate(${this.xAxisGen.axisGen.scale()(d.x0)},0)`}
+        (d) => `translate(${this.xAxisGen.axisGen.scale()(d.x0)},0)`
       );
 
       const css = (key) => getComputedStyle(this.element).getPropertyValue(key);
@@ -457,10 +458,12 @@ export default class Barchart extends MetaStanza {
       .attr("fill", fill);
     
     if (this.params["event-outgoing_change_selected_nodes"]) {
-      bar.on("click", (_, d) =>
-      console.log(d)
-        // emitSelectedEvent.apply(this, [d[1][0]["__togostanza_id__"]])
-      );
+      bar.on("click", (_, d) => {
+        d["__values__"].forEach((value) => {
+          console.log(value["__togostanza_id__"])
+          emitSelectedEvent.apply(this, [value["__togostanza_id__"]])
+        })
+      });
     }
   }
 

From db2df782f961b4200fc1c134a2154bdf077ddeab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 4 Apr 2024 13:35:31 +0900
Subject: [PATCH 14/33] support event dispatch

---
 stanzas/barchart/index.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 14632802..f5ae8e2b 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -244,7 +244,7 @@ export default class Barchart extends MetaStanza {
     }
     if (this.params["event-outgoing_change_selected_nodes"]) {
       barGroup.on("click", (_, d) =>
-        emitSelectedEvent.apply(this, [d[1][0]["__togostanza_id__"]])
+        emitSelectedEventByBarChart.apply(this, [d[1][0]["__togostanza_id__"]])
       );
     }
 
@@ -459,10 +459,8 @@ export default class Barchart extends MetaStanza {
     
     if (this.params["event-outgoing_change_selected_nodes"]) {
       bar.on("click", (_, d) => {
-        d["__values__"].forEach((value) => {
-          console.log(value["__togostanza_id__"])
-          emitSelectedEvent.apply(this, [value["__togostanza_id__"]])
-        })
+        const ids = d["__values__"].map(value => value["__togostanza_id__"]);
+        emitSelectedEventByHistogram.apply(this, [ids]);
       });
     }
   }
@@ -605,7 +603,7 @@ function addErrorBars(
 }
 
 // emit selected event
-function emitSelectedEvent(this: Barchart, id: any) {
+function emitSelectedEventByBarChart(this: Barchart, id: any) {
   // collect selected bars
   const barGroups = this._graphArea.selectAll("g.bar-group");
   const filteredBars = barGroups.filter(".-selected");
@@ -626,6 +624,14 @@ function emitSelectedEvent(this: Barchart, id: any) {
   );
   changeSelectedStyle.apply(this, [ids]);
 }
+function emitSelectedEventByHistogram(this: Barchart, ids: any[]) {
+  // dispatch event
+  this.element.dispatchEvent(
+    new CustomEvent("changeSelectedNodes", {
+      detail: ids,
+    })
+  );
+}
 
 function changeSelectedStyle(this: Barchart, ids: string[]) {
   console.log(ids);

From 57f909b032209772f0391380439a605b4608d966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 4 Apr 2024 13:43:02 +0900
Subject: [PATCH 15/33] tweak

---
 stanzas/barchart/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index f5ae8e2b..87503511 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -459,7 +459,7 @@ export default class Barchart extends MetaStanza {
     
     if (this.params["event-outgoing_change_selected_nodes"]) {
       bar.on("click", (_, d) => {
-        const ids = d["__values__"].map(value => value["__togostanza_id__"]);
+        const ids = d["__values__"].map(value => value["__togostanza_id__"] + ""); // TODO: キャストをどうにかしたい
         emitSelectedEventByHistogram.apply(this, [ids]);
       });
     }

From b76879861e85ae0519aafc328d29dcdcf2f861f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Mon, 8 Apr 2024 16:23:52 +0900
Subject: [PATCH 16/33] inprogress

---
 stanzas/barchart/index.ts         | 32 +++++++++++++++++++++++++------
 stanzas/pagination-table/index.js |  1 +
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 87503511..b996a4a0 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -435,7 +435,6 @@ export default class Barchart extends MetaStanza {
     // g.append("g").attr("class", "axis axis--y").call(axisLeft(y));
 
     // バーを描画
-    console.log(bins)
     const bar = this._graphArea
       .selectAll(".bar")
       .data(bins)
@@ -631,13 +630,34 @@ function emitSelectedEventByHistogram(this: Barchart, ids: any[]) {
       detail: ids,
     })
   );
+  changeSelectedStyle.apply(this, [ids]);
 }
 
 function changeSelectedStyle(this: Barchart, ids: string[]) {
   console.log(ids);
-  const barGroups = this._graphArea.selectAll("g.bar-group");
-  barGroups.classed(
-    "-selected",
-    (d) => ids.indexOf(d[1][0].__togostanza_id__) !== -1
-  );
+  switch (this.params["data-interpretation"]) {
+    case "categorical": {
+      const barGroups = this._graphArea.selectAll("g.bar-group");
+      barGroups.classed(
+        "-selected",
+        (d) => ids.indexOf(d[1][0].__togostanza_id__) !== -1
+      );
+    }
+      break;
+    case "distribution": {
+      const bars = this._graphArea.selectAll("g.bar");
+      console.log(bars);
+      bars.classed(
+        "-selected",
+        (d) => {
+          // ids.indexOf(d["__values__"][0].__togostanza_id__) !== -1
+          console.log(d)
+          return false;
+        }
+      );
+    }
+      break;
+  }
+
+
 }
diff --git a/stanzas/pagination-table/index.js b/stanzas/pagination-table/index.js
index dfb61122..b61486b1 100644
--- a/stanzas/pagination-table/index.js
+++ b/stanzas/pagination-table/index.js
@@ -36,6 +36,7 @@ export default class PaginationTable extends Stanza {
   }
 
   handleEvent(event) {
+    console.log(this.params["event-incoming_change_selected_nodes"])
     if (this.params["event-incoming_change_selected_nodes"]) {
       this._component.updateSelectedRows(event.detail);
     }

From a326de2e9072c59afaeaf6faf61c3066063bbb86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Wed, 10 Apr 2024 13:01:07 +0900
Subject: [PATCH 17/33] support event sharing

---
 stanzas/barchart/index.ts        | 66 +++++++++++++++++---------------
 stanzas/barchart/style.scss      |  2 +-
 stanzas/pagination-table/app.vue |  6 +--
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index b996a4a0..b2b8e6a3 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -323,9 +323,13 @@ export default class Barchart extends MetaStanza {
 
     // const margin = { top: 20, right: 20, bottom: 30, left: 40 };
     const width =
-      +this.css("--togostanza-canvas-width") - this.MARGIN.LEFT - this.MARGIN.RIGHT;
+      +this.css("--togostanza-canvas-width") -
+      this.MARGIN.LEFT -
+      this.MARGIN.RIGHT;
     const height =
-      +this.css("--togostanza-canvas-height") - this.MARGIN.TOP - this.MARGIN.BOTTOM;
+      +this.css("--togostanza-canvas-height") -
+      this.MARGIN.TOP -
+      this.MARGIN.BOTTOM;
 
     let svg = select(this._main.querySelector("svg"));
     if (!svg.empty()) {
@@ -355,7 +359,9 @@ export default class Barchart extends MetaStanza {
     );
     bins.forEach((bin) => {
       // 各ビンにデータ元のデータを追加
-      bin["__values__"] = values.filter(value => value[xKeyName] >= bin.x0 && value[xKeyName] < bin.x1)
+      bin["__values__"] = values.filter(
+        (value) => value[xKeyName] >= bin.x0 && value[xKeyName] < bin.x1
+      );
     });
     console.log(bins);
 
@@ -386,7 +392,7 @@ export default class Barchart extends MetaStanza {
       ticksIntervalUnits: params["axis-x-ticks_interval_units"],
       ticksLabelsFormat: params["axis-x-ticks_labels_format"],
     };
-    console.log(xParams)
+    console.log(xParams);
     const maxY = bins.reduce(
       (acc, bin) => (bin.length > acc ? bin.length : acc),
       0
@@ -446,8 +452,8 @@ export default class Barchart extends MetaStanza {
         (d) => `translate(${this.xAxisGen.axisGen.scale()(d.x0)},0)`
       );
 
-      const css = (key) => getComputedStyle(this.element).getPropertyValue(key);
-      const fill = css("--togostanza-theme-series_0_color");
+    const css = (key) => getComputedStyle(this.element).getPropertyValue(key);
+    const fill = css("--togostanza-theme-series_0_color");
 
     bar
       .append("rect")
@@ -455,10 +461,10 @@ export default class Barchart extends MetaStanza {
       .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1)
       .attr("height", (d) => height - y(d.length))
       .attr("fill", fill);
-    
+
     if (this.params["event-outgoing_change_selected_nodes"]) {
       bar.on("click", (_, d) => {
-        const ids = d["__values__"].map(value => value["__togostanza_id__"] + ""); // TODO: キャストをどうにかしたい
+        const ids = d["__values__"].map((value) => value["__togostanza_id__"]);
         emitSelectedEventByHistogram.apply(this, [ids]);
       });
     }
@@ -502,7 +508,10 @@ function drawGroupedBars(
     .enter()
     .append("g")
     .classed("bar-group", true)
-    .attr("transform", (d) => `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`);
+    .attr(
+      "transform",
+      (d) => `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`
+    );
 
   barGroup
     .selectAll("rect")
@@ -634,30 +643,25 @@ function emitSelectedEventByHistogram(this: Barchart, ids: any[]) {
 }
 
 function changeSelectedStyle(this: Barchart, ids: string[]) {
-  console.log(ids);
   switch (this.params["data-interpretation"]) {
-    case "categorical": {
-      const barGroups = this._graphArea.selectAll("g.bar-group");
-      barGroups.classed(
-        "-selected",
-        (d) => ids.indexOf(d[1][0].__togostanza_id__) !== -1
-      );
-    }
+    case "categorical":
+      {
+        const barGroups = this._graphArea.selectAll("g.bar-group");
+        barGroups.classed(
+          "-selected",
+          (d) => ids.indexOf(d[1][0].__togostanza_id__) !== -1
+        );
+      }
       break;
-    case "distribution": {
-      const bars = this._graphArea.selectAll("g.bar");
-      console.log(bars);
-      bars.classed(
-        "-selected",
-        (d) => {
-          // ids.indexOf(d["__values__"][0].__togostanza_id__) !== -1
-          console.log(d)
-          return false;
-        }
-      );
-    }
+    case "distribution":
+      {
+        const bars = this._graphArea.selectAll("g.bar");
+        bars.classed("-selected", (d) =>
+          d["__values__"].some((value) =>
+            ids.includes(value["__togostanza_id__"])
+          )
+        );
+      }
       break;
   }
-
-
 }
diff --git a/stanzas/barchart/style.scss b/stanzas/barchart/style.scss
index a7134722..2d0b3825 100644
--- a/stanzas/barchart/style.scss
+++ b/stanzas/barchart/style.scss
@@ -20,7 +20,7 @@ svg {
     stroke: var(--togostanza-axis-zero_line_color);
   }
 
-  .bar-group {
+  .bar-group, .bar {
     > rect {
       stroke-width: 0.5px;
       stroke: var(--togostanza-border-color);
diff --git a/stanzas/pagination-table/app.vue b/stanzas/pagination-table/app.vue
index e701f834..01654d43 100644
--- a/stanzas/pagination-table/app.vue
+++ b/stanzas/pagination-table/app.vue
@@ -649,7 +649,7 @@ export default defineComponent({
       const isShift = event.shiftKey;
       const isCmd = event.metaKey || event.ctrlKey;
       const filteredRowIds = filteredRows.value.map((row) => {
-        return row.find((obj) => obj.column.id === "__togostanza_id__").value;
+        return +row.find((obj) => obj.column.id === "__togostanza_id__").value;
       });
 
       // get index and ID
@@ -690,7 +690,7 @@ export default defineComponent({
         })
       );
       state.lastSelectedRow = rowId;
-      state.selectedRows = [...selectedRows];
+      state.selectedRows = [...selectedRows.map(row => row.toString())];
     };
 
     const handleMouseDown = (event) => {
@@ -717,7 +717,7 @@ export default defineComponent({
     };
 
     const updateSelectedRows = (rows) => {
-      state.selectedRows = [...rows];
+      state.selectedRows = [...rows.map(row => row.toString())];
     };
 
     return {

From 97d903380d590e0ad2689ca83c35514528267bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 11 Apr 2024 19:02:37 +0900
Subject: [PATCH 18/33] modify treemap

---
 stanzas/treemap/index.js      |  2 +-
 stanzas/treemap/metadata.json | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/stanzas/treemap/index.js b/stanzas/treemap/index.js
index 4fc74838..464c1ce4 100644
--- a/stanzas/treemap/index.js
+++ b/stanzas/treemap/index.js
@@ -65,7 +65,7 @@ export default class TreeMapStanza extends MetaStanza {
     const drawContent = async () => {
       const data = this.__data.asTree({
         nodeLabelKey: this.params["node-label_key"].trim(),
-        nodeGroupKey: this.params["node-group_key"].trim(),
+        nodeGroupKey: "",
         nodeValueKey: this.params["node-value_key"].trim(),
       }).data;
 
diff --git a/stanzas/treemap/metadata.json b/stanzas/treemap/metadata.json
index 3ee330a6..78a0cc84 100644
--- a/stanzas/treemap/metadata.json
+++ b/stanzas/treemap/metadata.json
@@ -11,7 +11,9 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE"],
+  "stanza:contributor": [
+    "PENQE"
+  ],
   "stanza:created": "2021-10-25",
   "stanza:updated": "2021-10-25",
   "stanza:parameter": [
@@ -24,18 +26,16 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
     },
-    {
-      "stanza:key": "node-group_key",
-      "stanza:type": "text",
-      "stanza:example": "parent",
-      "stanza:description": "Group key",
-      "stanza:required": true
-    },
     {
       "stanza:key": "node-label_key",
       "stanza:type": "text",
@@ -183,4 +183,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
+}
\ No newline at end of file

From 8f94e4fc7446c420dcd9ed5739451a022820dfb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 11 Apr 2024 19:11:45 +0900
Subject: [PATCH 19/33] support asTree

---
 stanzas/column-tree/index.js      |  2 +-
 stanzas/column-tree/metadata.json | 25 ++++++++++++++-----------
 stanzas/sunburst/index.js         |  2 +-
 stanzas/sunburst/metadata.json    | 26 +++++++++++++++-----------
 stanzas/treemap/index.js          |  2 +-
 5 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/stanzas/column-tree/index.js b/stanzas/column-tree/index.js
index 8402328d..c4b4a669 100644
--- a/stanzas/column-tree/index.js
+++ b/stanzas/column-tree/index.js
@@ -26,7 +26,7 @@ export default class ColumnTree extends MetaStanza {
     });
     camelCaseParams.data = this.__data.asTree({
       nodeLabelKey: this.params["node-label_key"].trim(),
-      nodeGroupKey: this.params["node-group_key"].trim(),
+      nodeGroupKey: undefined,
       nodeValueKey: this.params["node-value_key"].trim(),
     }).data;
 
diff --git a/stanzas/column-tree/metadata.json b/stanzas/column-tree/metadata.json
index 0c0e0733..fb64951f 100644
--- a/stanzas/column-tree/metadata.json
+++ b/stanzas/column-tree/metadata.json
@@ -11,7 +11,9 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE"],
+  "stanza:contributor": [
+    "PENQE"
+  ],
   "stanza:created": "2021-08-13",
   "stanza:updated": "2021-08-13",
   "stanza:parameter": [
@@ -24,7 +26,12 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
@@ -40,17 +47,13 @@
       "stanza:example": "size",
       "stanza:description": "Key for data attribute to display as value"
     },
-    {
-      "stanza:key": "node-group_key",
-      "stanza:type": "text",
-      "stanza:example": "parent",
-      "stanza:description": "Group key",
-      "stanza:required": true
-    },
     {
       "stanza:key": "node-value_alignment",
       "stanza:type": "single-choice",
-      "stanza:choice": ["vertical", "horizontal"],
+      "stanza:choice": [
+        "vertical",
+        "horizontal"
+      ],
       "stanza:example": "horizontal",
       "stanza:description": "Set alignment of node content"
     },
@@ -189,4 +192,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/stanzas/sunburst/index.js b/stanzas/sunburst/index.js
index 3690ebbd..a983d5ce 100644
--- a/stanzas/sunburst/index.js
+++ b/stanzas/sunburst/index.js
@@ -109,7 +109,7 @@ export default class Sunburst extends MetaStanza {
     const main = this._main;
     const data = this.__data.asTree({
       nodeLabelKey: this.params["node-label_key"].trim(),
-      nodeGroupKey: this.params["node-group_key"].trim(),
+      nodeGroupKey: undefined,
       nodeValueKey: this.params["node-value_key"].trim(),
     }).data;
 
diff --git a/stanzas/sunburst/metadata.json b/stanzas/sunburst/metadata.json
index d28d7307..3d578202 100644
--- a/stanzas/sunburst/metadata.json
+++ b/stanzas/sunburst/metadata.json
@@ -11,7 +11,9 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE"],
+  "stanza:contributor": [
+    "PENQE"
+  ],
   "stanza:created": "2021-10-28",
   "stanza:updated": "2021-10-28",
   "stanza:parameter": [
@@ -24,18 +26,16 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
     },
-    {
-      "stanza:key": "node-group_key",
-      "stanza:type": "text",
-      "stanza:example": "parent",
-      "stanza:description": "Group key",
-      "stanza:required": true
-    },
     {
       "stanza:key": "node-value_key",
       "stanza:type": "text",
@@ -77,7 +77,11 @@
     {
       "stanza:key": "scaling",
       "stanza:type": "single-choice",
-      "stanza:choice": ["By value", "Equal children", "Equal parents"],
+      "stanza:choice": [
+        "By value",
+        "Equal children",
+        "Equal parents"
+      ],
       "stanza:example": "By value",
       "stanza:description": "Scaling of the nodes"
     },
@@ -212,4 +216,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/stanzas/treemap/index.js b/stanzas/treemap/index.js
index 464c1ce4..02981616 100644
--- a/stanzas/treemap/index.js
+++ b/stanzas/treemap/index.js
@@ -65,7 +65,7 @@ export default class TreeMapStanza extends MetaStanza {
     const drawContent = async () => {
       const data = this.__data.asTree({
         nodeLabelKey: this.params["node-label_key"].trim(),
-        nodeGroupKey: "",
+        nodeGroupKey: undefined,
         nodeValueKey: this.params["node-value_key"].trim(),
       }).data;
 

From da73fef2bb2b63d93098bb011cdd5b32ded5c311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 11 Apr 2024 22:17:06 +0900
Subject: [PATCH 20/33] tweak

---
 stanzas/column-tree/index.js | 1 -
 stanzas/sunburst/index.js    | 1 -
 stanzas/treemap/index.js     | 1 -
 3 files changed, 3 deletions(-)

diff --git a/stanzas/column-tree/index.js b/stanzas/column-tree/index.js
index c4b4a669..311a0ca5 100644
--- a/stanzas/column-tree/index.js
+++ b/stanzas/column-tree/index.js
@@ -26,7 +26,6 @@ export default class ColumnTree extends MetaStanza {
     });
     camelCaseParams.data = this.__data.asTree({
       nodeLabelKey: this.params["node-label_key"].trim(),
-      nodeGroupKey: undefined,
       nodeValueKey: this.params["node-value_key"].trim(),
     }).data;
 
diff --git a/stanzas/sunburst/index.js b/stanzas/sunburst/index.js
index a983d5ce..fb66e98c 100644
--- a/stanzas/sunburst/index.js
+++ b/stanzas/sunburst/index.js
@@ -109,7 +109,6 @@ export default class Sunburst extends MetaStanza {
     const main = this._main;
     const data = this.__data.asTree({
       nodeLabelKey: this.params["node-label_key"].trim(),
-      nodeGroupKey: undefined,
       nodeValueKey: this.params["node-value_key"].trim(),
     }).data;
 
diff --git a/stanzas/treemap/index.js b/stanzas/treemap/index.js
index 02981616..82ddbcf0 100644
--- a/stanzas/treemap/index.js
+++ b/stanzas/treemap/index.js
@@ -65,7 +65,6 @@ export default class TreeMapStanza extends MetaStanza {
     const drawContent = async () => {
       const data = this.__data.asTree({
         nodeLabelKey: this.params["node-label_key"].trim(),
-        nodeGroupKey: undefined,
         nodeValueKey: this.params["node-value_key"].trim(),
       }).data;
 

From 87daf556f1b6a0be99f032e686b2a63def87b843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 9 May 2024 12:23:06 +0900
Subject: [PATCH 21/33] import util and add logs

---
 stanzas/barchart/index.ts         | 6 ++++++
 stanzas/pagination-table/index.js | 2 +-
 stanzas/treemap/index.js          | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 60ad0e0b..67e36aa6 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -21,6 +21,7 @@ import {
   axisLeft,
 } from "d3";
 import getStanzaColors from "../../lib/ColorGenerator";
+import { toggleSelectIds, emitSelectedEvent } from "../../lib/utils";
 
 export default class Barchart extends MetaStanza {
   xAxisGen: Axis;
@@ -474,6 +475,9 @@ export default class Barchart extends MetaStanza {
   }
 
   handleEvent(event) {
+    console.trace(event.detail);
+    console.log(this.params["event-incoming_change_selected_nodes"]);
+    console.log(event.detail === this.params["data-url"]);
     const { dataUrl } = event.detail;
     if (
       this.params["event-incoming_change_selected_nodes"] &&
@@ -654,6 +658,7 @@ function emitSelectedEventByHistogram(this: Barchart, ids: any[]) {
 }
 
 function changeSelectedStyle(this: Barchart, ids: string[]) {
+  console.log(ids, this.params["data-interpretation"]);
   switch (this.params["data-interpretation"]) {
     case "categorical":
       {
@@ -667,6 +672,7 @@ function changeSelectedStyle(this: Barchart, ids: string[]) {
     case "distribution":
       {
         const bars = this._graphArea.selectAll("g.bar");
+        console.log(bars);
         bars.classed("-selected", (d) =>
           d["__values__"].some((value) =>
             ids.includes(value["__togostanza_id__"])
diff --git a/stanzas/pagination-table/index.js b/stanzas/pagination-table/index.js
index 76f6f286..b1bc87fd 100644
--- a/stanzas/pagination-table/index.js
+++ b/stanzas/pagination-table/index.js
@@ -36,7 +36,7 @@ export default class PaginationTable extends Stanza {
   }
 
   handleEvent(event) {
-    console.log(this.params["event-incoming_change_selected_nodes"])
+    console.log(event, this.params["event-incoming_change_selected_nodes"]);
     if (this.params["event-incoming_change_selected_nodes"]) {
       this._component.updateSelectedRows(event.detail);
     }
diff --git a/stanzas/treemap/index.js b/stanzas/treemap/index.js
index 82ddbcf0..c1aac170 100644
--- a/stanzas/treemap/index.js
+++ b/stanzas/treemap/index.js
@@ -96,6 +96,7 @@ export default class TreeMapStanza extends MetaStanza {
   }
 
   handleEvent(event) {
+    console.log(event.detail);
     const { selectedIds, dataUrl } = event.detail;
 
     if (

From 7a165a78f89f256c4160e22c0bb3744a0c40af2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Fri, 10 May 2024 21:20:09 +0900
Subject: [PATCH 22/33] support new select API in paginaiton table

---
 stanzas/barchart/index.ts        |  7 ++-----
 stanzas/pagination-table/app.vue | 28 ++++++++++++++-----------
 stanzas/treemap/index.js         | 35 ++++++++++++++------------------
 3 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 67e36aa6..603d189b 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -475,15 +475,12 @@ export default class Barchart extends MetaStanza {
   }
 
   handleEvent(event) {
-    console.trace(event.detail);
-    console.log(this.params["event-incoming_change_selected_nodes"]);
-    console.log(event.detail === this.params["data-url"]);
-    const { dataUrl } = event.detail;
+    const { selectedIds, dataUrl } = event.detail;
     if (
       this.params["event-incoming_change_selected_nodes"] &&
       dataUrl === this.params["data-url"]
     ) {
-      changeSelectedStyle.apply(this, [event.detail.selectedIds]);
+      changeSelectedStyle.apply(this, [selectedIds]);
     }
   }
 }
diff --git a/stanzas/pagination-table/app.vue b/stanzas/pagination-table/app.vue
index 01654d43..b5d53c5f 100644
--- a/stanzas/pagination-table/app.vue
+++ b/stanzas/pagination-table/app.vue
@@ -658,7 +658,7 @@ export default defineComponent({
         rowIndex;
       const rowId = filteredRowIds[actualRowIndex];
       // selected rows
-      let selectedRows = [...state.selectedRows];
+      let selectedIds = [...state.selectedRows];
       // update selected rows
       if (isShift && state.lastSelectedRow !== null) {
         const lastSelectedRowIndex = filteredRowIds.indexOf(
@@ -667,30 +667,33 @@ export default defineComponent({
         const start = Math.min(lastSelectedRowIndex, actualRowIndex);
         const end = Math.max(lastSelectedRowIndex, actualRowIndex);
         for (let i = start; i <= end; i++) {
-          if (!selectedRows.includes(filteredRowIds[i])) {
-            selectedRows.push(filteredRowIds[i]);
+          if (!selectedIds.includes(filteredRowIds[i])) {
+            selectedIds.push(filteredRowIds[i]);
           }
         }
       } else if (isCmd) {
-        if (selectedRows.includes(rowId)) {
-          selectedRows.splice(selectedRows.indexOf(rowId), 1);
+        if (selectedIds.includes(rowId)) {
+          selectedIds.splice(selectedIds.indexOf(rowId), 1);
         } else {
-          selectedRows.push(rowId);
+          selectedIds.push(rowId);
         }
       } else {
-        selectedRows = [rowId];
+        selectedIds = [rowId];
       }
 
       // dispatch event
-
       const stanza = rootElement.value.parentNode.parentNode.parentNode.host;
       stanza.dispatchEvent(
         new CustomEvent("changeSelectedNodes", {
-          detail: selectedRows,
+          detail: {
+            selectedIds,
+            targetId: rowId,
+            dataUrl: params.dataUrl
+          },
         })
       );
       state.lastSelectedRow = rowId;
-      state.selectedRows = [...selectedRows.map(row => row.toString())];
+      state.selectedRows = [...selectedIds.map(row => row.toString())];
     };
 
     const handleMouseDown = (event) => {
@@ -716,8 +719,9 @@ export default defineComponent({
       return state.selectedRows.includes(rowID);
     };
 
-    const updateSelectedRows = (rows) => {
-      state.selectedRows = [...rows.map(row => row.toString())];
+    const updateSelectedRows = (emitSelectedEventParams) => {
+      const {selectedIds} = emitSelectedEventParams
+      state.selectedRows = [...selectedIds.map(id => id.toString())];
     };
 
     return {
diff --git a/stanzas/treemap/index.js b/stanzas/treemap/index.js
index c1aac170..561c609c 100644
--- a/stanzas/treemap/index.js
+++ b/stanzas/treemap/index.js
@@ -96,7 +96,6 @@ export default class TreeMapStanza extends MetaStanza {
   }
 
   handleEvent(event) {
-    console.log(event.detail);
     const { selectedIds, dataUrl } = event.detail;
 
     if (
@@ -253,11 +252,10 @@ function draw(el, dataset, opts, stanza) {
       .text((d) =>
         d === root
           ? ""
-          : `${name(d)}\n${
-              d?.children
-                ? format(sum(d, (d) => d?.data?.data.value || 0))
-                : d.data.data.value
-            }`
+          : `${name(d)}\n${d?.children
+            ? format(sum(d, (d) => d?.data?.data.value || 0))
+            : d.data.data.value
+          }`
       );
 
     node
@@ -266,11 +264,10 @@ function draw(el, dataset, opts, stanza) {
       .classed("breadcrumb", (d) => d === root)
       .attr("id", (d) => (d.leafUid = uid("leaf")).id)
       .attr("style", (d) => {
-        return `fill: ${
-          d === root
+        return `fill: ${d === root
             ? "var(--togostanza-theme-background_color)"
             : colorScale(d.data.data.label)
-        }`;
+          }`;
       });
 
     //Add inner nodes to show that it's a zoomable tile
@@ -408,13 +405,11 @@ function draw(el, dataset, opts, stanza) {
       if (d === root) {
         return `translate(0,0)`;
       } else if (d.parent !== root) {
-        return `translate(${x(d.x0) - x(d.parent.x0)},${
-          y(d.y0) - y(d.parent.y0)
-        })`;
+        return `translate(${x(d.x0) - x(d.parent.x0)},${y(d.y0) - y(d.parent.y0)
+          })`;
       } else {
-        return `translate(${x(d.x0) + gapWidth},${
-          y(d.y0) + rootHeight + gapWidth
-        })`;
+        return `translate(${x(d.x0) + gapWidth},${y(d.y0) + rootHeight + gapWidth
+          })`;
       }
     });
 
@@ -510,11 +505,11 @@ function getLineHeight(el) {
   temp.setAttribute(
     "style",
     "margin:0; padding:0; " +
-      "font-family:" +
-      (el.style.fontFamily || "inherit") +
-      "; " +
-      "font-size:" +
-      (el.style.fontSize || "inherit")
+    "font-family:" +
+    (el.style.fontFamily || "inherit") +
+    "; " +
+    "font-size:" +
+    (el.style.fontSize || "inherit")
   );
   temp.innerHTML = "A";
 

From 5c81641af44549c713f5757d3862affdd923111c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Mon, 13 May 2024 16:29:44 +0900
Subject: [PATCH 23/33] support new API in barchart

---
 stanzas/barchart/index.ts         | 12 +++++++-----
 stanzas/pagination-table/app.vue  |  2 +-
 stanzas/pagination-table/index.js |  1 -
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 603d189b..9a4808f7 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -469,7 +469,7 @@ export default class Barchart extends MetaStanza {
     if (this.params["event-outgoing_change_selected_nodes"]) {
       bar.on("click", (_, d) => {
         const ids = d["__values__"].map((value) => value["__togostanza_id__"]);
-        emitSelectedEventByHistogram.apply(this, [ids]);
+        emitSelectedEventByHistogram.apply(this, [ids, this.params["data-url"]], );
       });
     }
   }
@@ -644,18 +644,21 @@ function emitSelectedEventByBarChart(this: Barchart, id: any, dataUrl: string) {
   );
   changeSelectedStyle.apply(this, [ids]);
 }
-function emitSelectedEventByHistogram(this: Barchart, ids: any[]) {
+function emitSelectedEventByHistogram(this: Barchart, ids: any[], dataUrl: string) {
   // dispatch event
   this.element.dispatchEvent(
     new CustomEvent("changeSelectedNodes", {
-      detail: ids,
+      detail: {
+        selectedIds: ids,
+        targetId: ids[0],
+        dataUrl,
+      },
     })
   );
   changeSelectedStyle.apply(this, [ids]);
 }
 
 function changeSelectedStyle(this: Barchart, ids: string[]) {
-  console.log(ids, this.params["data-interpretation"]);
   switch (this.params["data-interpretation"]) {
     case "categorical":
       {
@@ -669,7 +672,6 @@ function changeSelectedStyle(this: Barchart, ids: string[]) {
     case "distribution":
       {
         const bars = this._graphArea.selectAll("g.bar");
-        console.log(bars);
         bars.classed("-selected", (d) =>
           d["__values__"].some((value) =>
             ids.includes(value["__togostanza_id__"])
diff --git a/stanzas/pagination-table/app.vue b/stanzas/pagination-table/app.vue
index b5d53c5f..ab195b2d 100644
--- a/stanzas/pagination-table/app.vue
+++ b/stanzas/pagination-table/app.vue
@@ -720,7 +720,7 @@ export default defineComponent({
     };
 
     const updateSelectedRows = (emitSelectedEventParams) => {
-      const {selectedIds} = emitSelectedEventParams
+      const {selectedIds} = emitSelectedEventParams;
       state.selectedRows = [...selectedIds.map(id => id.toString())];
     };
 
diff --git a/stanzas/pagination-table/index.js b/stanzas/pagination-table/index.js
index b1bc87fd..bcc7670b 100644
--- a/stanzas/pagination-table/index.js
+++ b/stanzas/pagination-table/index.js
@@ -36,7 +36,6 @@ export default class PaginationTable extends Stanza {
   }
 
   handleEvent(event) {
-    console.log(event, this.params["event-incoming_change_selected_nodes"]);
     if (this.params["event-incoming_change_selected_nodes"]) {
       this._component.updateSelectedRows(event.detail);
     }

From 5314d749f70acf52a011088b2a564d5c11d2621a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Mon, 13 May 2024 16:59:11 +0900
Subject: [PATCH 24/33] support lint

---
 stanzas/barchart/metadata.json    | 2 +-
 stanzas/column-tree/metadata.json | 2 +-
 stanzas/sunburst/metadata.json    | 2 +-
 stanzas/treemap/metadata.json     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/stanzas/barchart/metadata.json b/stanzas/barchart/metadata.json
index f004d8a2..6a2278e1 100644
--- a/stanzas/barchart/metadata.json
+++ b/stanzas/barchart/metadata.json
@@ -379,4 +379,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/stanzas/column-tree/metadata.json b/stanzas/column-tree/metadata.json
index fb64951f..303f225e 100644
--- a/stanzas/column-tree/metadata.json
+++ b/stanzas/column-tree/metadata.json
@@ -192,4 +192,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/stanzas/sunburst/metadata.json b/stanzas/sunburst/metadata.json
index 3d578202..a2ded947 100644
--- a/stanzas/sunburst/metadata.json
+++ b/stanzas/sunburst/metadata.json
@@ -216,4 +216,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/stanzas/treemap/metadata.json b/stanzas/treemap/metadata.json
index 78a0cc84..b7a60dd3 100644
--- a/stanzas/treemap/metadata.json
+++ b/stanzas/treemap/metadata.json
@@ -183,4 +183,4 @@
       "stanza:description": "Event that fires when the selected node is changed"
     }
   ]
-}
\ No newline at end of file
+}

From df9896c8ae67a9856cd9b918f8eb587144ac4e2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 14 May 2024 14:24:01 +0900
Subject: [PATCH 25/33] use util function instead of dispatch event

---
 stanzas/barchart/index.ts | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 9a4808f7..c49864aa 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -633,28 +633,22 @@ function emitSelectedEventByBarChart(this: Barchart, id: any, dataUrl: string) {
     ids.splice(indexInSelectedBars, 1);
   }
   // dispatch event
-  this.element.dispatchEvent(
-    new CustomEvent("changeSelectedNodes", {
-      detail: {
-        selectedIds: ids,
-        targetId: id,
-        dataUrl,
-      },
-    })
-  );
+  emitSelectedEvent({
+    rootElement: this.element,
+    targetId: id,
+    selectedIds: ids,
+    dataUrl,
+  })
   changeSelectedStyle.apply(this, [ids]);
 }
 function emitSelectedEventByHistogram(this: Barchart, ids: any[], dataUrl: string) {
   // dispatch event
-  this.element.dispatchEvent(
-    new CustomEvent("changeSelectedNodes", {
-      detail: {
-        selectedIds: ids,
-        targetId: ids[0],
-        dataUrl,
-      },
-    })
-  );
+  emitSelectedEvent({
+    rootElement: this.element,
+    targetId: ids[0],
+    selectedIds: ids,
+    dataUrl,
+  })
   changeSelectedStyle.apply(this, [ids]);
 }
 

From 335a3c1df49fd12bdbd9188e193a97de55e6460b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 14 May 2024 14:45:04 +0900
Subject: [PATCH 26/33] resolve lint errors

---
 stanzas/barchart/index.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index c49864aa..b5615286 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -19,15 +19,19 @@ import {
   max,
   axisBottom,
   axisLeft,
+  BaseType,
 } from "d3";
 import getStanzaColors from "../../lib/ColorGenerator";
-import { toggleSelectIds, emitSelectedEvent } from "../../lib/utils";
+import { emitSelectedEvent } from "../../lib/utils";
 
 export default class Barchart extends MetaStanza {
   xAxisGen: Axis;
   yAxisGen: Axis;
-  _graphArea: d3.Selection<SVGGElement, {}, SVGElement, any>;
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  _graphArea: d3.Selection<SVGGElement, {}, SVGElement, unknown>;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   _dataByGroup: Map<string | number, {}[]>;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   _dataByX: Map<string | number, {}[]>;
   legend: Legend;
   tooltips: ToolTip;
@@ -100,7 +104,8 @@ export default class Barchart extends MetaStanza {
       return;
     }
 
-    this._dataByGroup = values.reduce((map: Map<any, {}[]>, curr) => {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    this._dataByGroup = values.reduce((map: Map<unknown, {}[]>, curr: { [x: string]: unknown; }) => {
       if (!map.has(curr[groupKeyName])) {
         return map.set(curr[groupKeyName], [curr]);
       }
@@ -218,8 +223,10 @@ export default class Barchart extends MetaStanza {
 
     let barGroup: d3.Selection<
       SVGGElement,
+      // eslint-disable-next-line @typescript-eslint/ban-types
       [string | number, {}[]],
       SVGGElement,
+      // eslint-disable-next-line @typescript-eslint/ban-types
       {}
     >;
     let groupScale;
@@ -308,8 +315,6 @@ export default class Barchart extends MetaStanza {
     const showLegend = this.params["legend-visible"];
     const legendTitle = this.params["legend-title"];
 
-    const numberOfBin = 20;
-
     const values = structuredClone(this._data);
     console.log(values);
 
@@ -580,7 +585,8 @@ function drawStackedBars(
 
 function addErrorBars(
   this: Barchart,
-  rect: d3.Selection<SVGGElement, {}, any, any>,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  rect: d3.Selection<SVGGElement, {}, BaseType, unknown>,
   errorKeyName: string,
   groupKeyName: string,
   groupScale: d3.ScaleBand<string>
@@ -619,7 +625,7 @@ function addErrorBars(
 }
 
 // emit selected event
-function emitSelectedEventByBarChart(this: Barchart, id: any, dataUrl: string) {
+function emitSelectedEventByBarChart(this: Barchart, id: unknown, dataUrl: string) {
   // collect selected bars
   const barGroups = this._graphArea.selectAll("g.bar-group");
   const filteredBars = barGroups.filter(".-selected");
@@ -641,7 +647,7 @@ function emitSelectedEventByBarChart(this: Barchart, id: any, dataUrl: string) {
   })
   changeSelectedStyle.apply(this, [ids]);
 }
-function emitSelectedEventByHistogram(this: Barchart, ids: any[], dataUrl: string) {
+function emitSelectedEventByHistogram(this: Barchart, ids: unknown[], dataUrl: string) {
   // dispatch event
   emitSelectedEvent({
     rootElement: this.element,

From b093360ba0e97f77c9cbf074cdac070d3be9f02e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 14 May 2024 16:54:48 +0900
Subject: [PATCH 27/33] commonize x axis drawing

---
 stanzas/barchart/index.ts | 92 +++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 48 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index b5615286..a89b51fb 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -66,10 +66,6 @@ export default class Barchart extends MetaStanza {
 
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
-    const xAxisTitle =
-      typeof this.params["axis-x-title"] === "undefined"
-        ? xKeyName
-        : this.params["axis-x-title"];
     const yAxisTitle =
       typeof this.params["axis-y-title"] === "undefined"
         ? yKeyName
@@ -91,11 +87,6 @@ export default class Barchart extends MetaStanza {
 
     const values = structuredClone(this._data);
 
-    const xAxisLabels = [
-      ...new Set(values.map((d) => d[xKeyName])),
-    ] as string[];
-    console.log(xAxisLabels);
-
     let params;
     try {
       params = paramsModel.parse(this.params);
@@ -168,27 +159,20 @@ export default class Barchart extends MetaStanza {
       this.yAxisGen = null;
     }
     svg = select(this._main).append("svg");
-    svg.attr("width", width).attr("height", height);
+    svg
+      .attr("width", +this.css("--togostanza-canvas-width"))
+      .attr("height", +this.css("--togostanza-canvas-height"));
 
     this._graphArea = svg.append("g").attr("class", "chart");
 
     const axisArea = { x: 0, y: 0, width, height };
 
-    const xParams: AxisParamsI = {
-      placement: params["axis-x-placement"],
-      domain: xAxisLabels,
-      drawArea: axisArea,
-      margins: this.MARGIN,
-      tickLabelsAngle: params["axis-x-ticks_label_angle"],
-      title: xAxisTitle,
-      titlePadding: params["axis-x-title_padding"],
-      scale: "ordinal",
-      gridInterval: params["axis-x-gridlines_interval"],
-      gridIntervalUnits: params["axis-x-gridlines_interval_units"],
-      ticksInterval: params["axis-x-ticks_interval"],
-      ticksIntervalUnits: params["axis-x-ticks_interval_units"],
-      ticksLabelsFormat: params["axis-x-ticks_labels_format"],
-    };
+    const xParams = getXAxis.apply(this, [
+      [
+        ...new Set(structuredClone(this._data).map((d) => d[xKeyName])),
+      ] as string[],
+      "ordinal"
+    ]);
 
     const yParams: AxisParamsI = {
       placement: params["axis-y-placement"],
@@ -303,10 +287,6 @@ export default class Barchart extends MetaStanza {
   drawHistogram() {
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
-    const xAxisTitle =
-      typeof this.params["axis-x-title"] === "undefined"
-        ? xKeyName
-        : this.params["axis-x-title"];
     const yAxisTitle =
       typeof this.params["axis-y-title"] === "undefined"
         ? yKeyName
@@ -330,7 +310,6 @@ export default class Barchart extends MetaStanza {
     const data = values.map((d) => +d[xKeyName]);
     console.log(data);
 
-    // const margin = { top: 20, right: 20, bottom: 30, left: 40 };
     const width =
       +this.css("--togostanza-canvas-width") -
       this.MARGIN.LEFT -
@@ -372,7 +351,6 @@ export default class Barchart extends MetaStanza {
         (value) => value[xKeyName] >= bin.x0 && value[xKeyName] < bin.x1
       );
     });
-    console.log(bins);
 
     // Y軸のスケールをビンのデータに合わせて設定
     y.domain([0, max(bins, (d) => d.length)]);
@@ -385,23 +363,11 @@ export default class Barchart extends MetaStanza {
     };
 
     // X軸を追加
-    console.log(this.MARGIN);
-    const xParams: AxisParamsI = {
-      placement: params["axis-x-placement"],
-      domain: x.domain() as [number, number],
-      drawArea: axisArea,
-      margins: this.MARGIN,
-      tickLabelsAngle: params["axis-x-ticks_label_angle"],
-      title: xAxisTitle,
-      titlePadding: params["axis-x-title_padding"],
-      scale: "linear",
-      gridInterval: params["axis-x-gridlines_interval"],
-      gridIntervalUnits: params["axis-x-gridlines_interval_units"],
-      ticksInterval: params["axis-x-ticks_interval"],
-      ticksIntervalUnits: params["axis-x-ticks_interval_units"],
-      ticksLabelsFormat: params["axis-x-ticks_labels_format"],
-    };
-    console.log(xParams);
+    const xParams = getXAxis.apply(this, [
+      x.domain() as [number, number],
+      "linear"
+    ]);
+
     const maxY = bins.reduce(
       (acc, bin) => (bin.length > acc ? bin.length : acc),
       0
@@ -681,3 +647,33 @@ function changeSelectedStyle(this: Barchart, ids: string[]) {
       break;
   }
 }
+
+function getXAxis(this: Barchart, domain, scale) {
+  const xKeyName = this.params["axis-x-key"];
+  const xAxisTitle =
+  typeof this.params["axis-x-title"] === "undefined"
+    ? xKeyName
+    : this.params["axis-x-title"];
+
+  const xParams: AxisParamsI = {
+    placement: this.params["axis-x-placement"],
+    domain,
+    drawArea: {
+      x: 0,
+      y: 0,
+      width: +this.css("--togostanza-canvas-width"),
+      height: +this.css("--togostanza-canvas-height"),
+    },
+    margins: this.MARGIN,
+    tickLabelsAngle: this.params["axis-x-ticks_label_angle"],
+    title: xAxisTitle,
+    titlePadding: this.params["axis-x-title_padding"],
+    scale,
+    gridInterval: this.params["axis-x-gridlines_interval"],
+    gridIntervalUnits: this.params["axis-x-gridlines_interval_units"],
+    ticksInterval: this.params["axis-x-ticks_interval"],
+    ticksIntervalUnits: this.params["axis-x-ticks_interval_units"],
+    ticksLabelsFormat: this.params["axis-x-ticks_labels_format"],
+  };
+  return xParams;
+}

From 5d2892fcd172dc5ec5d1f7c4ab2484003aa7d863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 14 May 2024 16:59:23 +0900
Subject: [PATCH 28/33] optimize for svg drawing

---
 stanzas/barchart/index.ts | 53 ++++++++++++++++-----------------------
 1 file changed, 22 insertions(+), 31 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index a89b51fb..9a47d2a4 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -20,6 +20,7 @@ import {
   axisBottom,
   axisLeft,
   BaseType,
+  Selection,
 } from "d3";
 import getStanzaColors from "../../lib/ColorGenerator";
 import { emitSelectedEvent } from "../../lib/utils";
@@ -47,23 +48,31 @@ export default class Barchart extends MetaStanza {
   }
 
   async renderNext() {
+    let svg = select(this._main.querySelector("svg"));
+    if (!svg.empty()) {
+      svg.remove();
+      this.xAxisGen = null;
+      this.yAxisGen = null;
+    }
+    svg = select(this._main).append("svg");
+    svg
+      .attr("width", +this.css("--togostanza-canvas-width"))
+      .attr("height", +this.css("--togostanza-canvas-height"));
+
     // If "binKey" is specified, this component behaves as a histogram; if not, it behaves as a bar chart.
     switch (this.params["data-interpretation"]) {
       case "categorical":
-        this.drawBarChart();
+        this.drawBarChart(svg);
         break;
       case "distribution":
-        this.drawHistogram();
+        this.drawHistogram(svg);
         break;
     }
   }
 
-  drawBarChart() {
+  drawBarChart(svg: Selection<SVGSVGElement, unknown, null, undefined>) {
     const color = scaleOrdinal().range(getStanzaColors(this));
 
-    const width = +this.css("--togostanza-canvas-width");
-    const height = +this.css("--togostanza-canvas-height");
-
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
     const yAxisTitle =
@@ -151,21 +160,14 @@ export default class Barchart extends MetaStanza {
 
     const yDomain = [0, maxY * 1.02];
 
-    let svg = select(this._main.querySelector("svg"));
-
-    if (!svg.empty()) {
-      svg.remove();
-      this.xAxisGen = null;
-      this.yAxisGen = null;
-    }
-    svg = select(this._main).append("svg");
-    svg
-      .attr("width", +this.css("--togostanza-canvas-width"))
-      .attr("height", +this.css("--togostanza-canvas-height"));
-
     this._graphArea = svg.append("g").attr("class", "chart");
 
-    const axisArea = { x: 0, y: 0, width, height };
+    const axisArea = {
+      x: 0,
+      y: 0,
+      width: +this.css("--togostanza-canvas-width"),
+      height: +this.css("--togostanza-canvas-height"),
+    };
 
     const xParams = getXAxis.apply(this, [
       [
@@ -284,7 +286,7 @@ export default class Barchart extends MetaStanza {
     }
   }
 
-  drawHistogram() {
+  drawHistogram(svg: Selection<SVGSVGElement, unknown, null, undefined>) {
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
     const yAxisTitle =
@@ -319,17 +321,6 @@ export default class Barchart extends MetaStanza {
       this.MARGIN.TOP -
       this.MARGIN.BOTTOM;
 
-    let svg = select(this._main.querySelector("svg"));
-    if (!svg.empty()) {
-      svg.remove();
-      this.xAxisGen = null;
-      this.yAxisGen = null;
-    }
-    svg = select(this._main).append("svg");
-    svg
-      .attr("width", +this.css("--togostanza-canvas-width"))
-      .attr("height", +this.css("--togostanza-canvas-height"));
-
     this._graphArea = svg.append("g").attr("class", "chart");
 
     // X軸とY軸のスケールを設定

From 1ffd4ab546414b1a916a4fc64a06ef07addc71eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 14 May 2024 17:13:36 +0900
Subject: [PATCH 29/33] optimize for y axis

---
 stanzas/barchart/index.ts | 94 +++++++++++++++------------------------
 1 file changed, 36 insertions(+), 58 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 9a47d2a4..7d111284 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -75,10 +75,6 @@ export default class Barchart extends MetaStanza {
 
     const xKeyName = this.params["axis-x-key"];
     const yKeyName = this.params["axis-y-key"];
-    const yAxisTitle =
-      typeof this.params["axis-y-title"] === "undefined"
-        ? yKeyName
-        : this.params["axis-y-title"];
     const groupKeyName = this.params["grouping-key"];
     const grouingArrangement = this.params["grouping-arrangement"];
 
@@ -156,19 +152,8 @@ export default class Barchart extends MetaStanza {
       }
     }
 
-    const maxY = Math.max(...y2s);
-
-    const yDomain = [0, maxY * 1.02];
-
     this._graphArea = svg.append("g").attr("class", "chart");
 
-    const axisArea = {
-      x: 0,
-      y: 0,
-      width: +this.css("--togostanza-canvas-width"),
-      height: +this.css("--togostanza-canvas-height"),
-    };
-
     const xParams = getXAxis.apply(this, [
       [
         ...new Set(structuredClone(this._data).map((d) => d[xKeyName])),
@@ -176,21 +161,10 @@ export default class Barchart extends MetaStanza {
       "ordinal"
     ]);
 
-    const yParams: AxisParamsI = {
-      placement: params["axis-y-placement"],
-      domain: yDomain,
-      drawArea: axisArea,
-      margins: this.MARGIN,
-      tickLabelsAngle: params["axis-y-ticks_label_angle"],
-      title: yAxisTitle,
-      titlePadding: params["axis-y-title_padding"],
-      scale: "linear",
-      gridInterval: params["axis-y-gridlines_interval"],
-      gridIntervalUnits: params["axis-x-gridlines_interval_units"],
-      ticksInterval: params["axis-y-ticks_interval"],
-      ticksIntervalUnits: params["axis-y-ticks_interval_units"],
-      ticksLabelsFormat: params["axis-y-ticks_labels_format"],
-    };
+    const maxY = Math.max(...y2s);
+    const yDomain = [0, maxY * 1.02];
+
+    const yParams = getYAxis.apply(this, [yDomain])
 
     if (!this.xAxisGen) {
       this.xAxisGen = new Axis(svg.node());
@@ -288,11 +262,6 @@ export default class Barchart extends MetaStanza {
 
   drawHistogram(svg: Selection<SVGSVGElement, unknown, null, undefined>) {
     const xKeyName = this.params["axis-x-key"];
-    const yKeyName = this.params["axis-y-key"];
-    const yAxisTitle =
-      typeof this.params["axis-y-title"] === "undefined"
-        ? yKeyName
-        : this.params["axis-y-title"];
 
     const showLegend = this.params["legend-visible"];
     const legendTitle = this.params["legend-title"];
@@ -307,7 +276,6 @@ export default class Barchart extends MetaStanza {
       console.log(error);
       return;
     }
-    console.log(params);
 
     const data = values.map((d) => +d[xKeyName]);
     console.log(data);
@@ -346,13 +314,6 @@ export default class Barchart extends MetaStanza {
     // Y軸のスケールをビンのデータに合わせて設定
     y.domain([0, max(bins, (d) => d.length)]);
 
-    const axisArea = {
-      x: 0,
-      y: 0,
-      width: +this.css("--togostanza-canvas-width"),
-      height: +this.css("--togostanza-canvas-height"),
-    };
-
     // X軸を追加
     const xParams = getXAxis.apply(this, [
       x.domain() as [number, number],
@@ -364,21 +325,8 @@ export default class Barchart extends MetaStanza {
       0
     );
     const yDomain = [0, maxY * 1.02];
-    const yParams: AxisParamsI = {
-      placement: params["axis-y-placement"],
-      domain: yDomain,
-      drawArea: axisArea,
-      margins: this.MARGIN,
-      tickLabelsAngle: params["axis-y-ticks_label_angle"],
-      title: yAxisTitle,
-      titlePadding: params["axis-y-title_padding"],
-      scale: "linear",
-      gridInterval: params["axis-y-gridlines_interval"],
-      gridIntervalUnits: params["axis-x-gridlines_interval_units"],
-      ticksInterval: params["axis-y-ticks_interval"],
-      ticksIntervalUnits: params["axis-y-ticks_interval_units"],
-      ticksLabelsFormat: params["axis-y-ticks_labels_format"],
-    };
+
+    const yParams = getYAxis.apply(this, [yDomain])
 
     if (!this.xAxisGen) {
       this.xAxisGen = new Axis(svg.node());
@@ -668,3 +616,33 @@ function getXAxis(this: Barchart, domain, scale) {
   };
   return xParams;
 }
+
+function getYAxis(this: Barchart, yDomain) {
+  const yKeyName = this.params["axis-y-key"];
+  const yAxisTitle =
+    typeof this.params["axis-y-title"] === "undefined"
+      ? yKeyName
+      : this.params["axis-y-title"];
+
+  const yParams: AxisParamsI = {
+    placement: this.params["axis-y-placement"],
+    domain: yDomain,
+    drawArea: {
+      x: 0,
+      y: 0,
+      width: +this.css("--togostanza-canvas-width"),
+      height: +this.css("--togostanza-canvas-height"),
+    },
+    margins: this.MARGIN,
+    tickLabelsAngle: this.params["axis-y-ticks_label_angle"],
+    title: yAxisTitle,
+    titlePadding: this.params["axis-y-title_padding"],
+    scale: "linear",
+    gridInterval: this.params["axis-y-gridlines_interval"],
+    gridIntervalUnits: this.params["axis-x-gridlines_interval_units"],
+    ticksInterval: this.params["axis-y-ticks_interval"],
+    ticksIntervalUnits: this.params["axis-y-ticks_interval_units"],
+    ticksLabelsFormat: this.params["axis-y-ticks_labels_format"],
+  };
+  return yParams;
+}
\ No newline at end of file

From 5197f7f055dbec34bead7e2beb6845c9492260a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Tue, 14 May 2024 17:20:49 +0900
Subject: [PATCH 30/33] optimize for TypeScript

---
 stanzas/barchart/index.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 7d111284..2f875022 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -24,6 +24,7 @@ import {
 } from "d3";
 import getStanzaColors from "../../lib/ColorGenerator";
 import { emitSelectedEvent } from "../../lib/utils";
+import { AxisDomain } from "d3-axis";
 
 export default class Barchart extends MetaStanza {
   xAxisGen: Axis;
@@ -129,7 +130,6 @@ export default class Barchart extends MetaStanza {
       d[y1Sym] = 0;
       d[y2Sym] = d[yKeyName];
     });
-    console.log(values);
 
     let y2s = [];
 
@@ -278,7 +278,6 @@ export default class Barchart extends MetaStanza {
     }
 
     const data = values.map((d) => +d[xKeyName]);
-    console.log(data);
 
     const width =
       +this.css("--togostanza-canvas-width") -
@@ -586,8 +585,7 @@ function changeSelectedStyle(this: Barchart, ids: string[]) {
       break;
   }
 }
-
-function getXAxis(this: Barchart, domain, scale) {
+function getXAxis(this: Barchart, domain: AxisDomain[], scale: "linear" | "time" | "log10" | "ordinal") { // Update the type of 'scale'
   const xKeyName = this.params["axis-x-key"];
   const xAxisTitle =
   typeof this.params["axis-x-title"] === "undefined"
@@ -617,7 +615,7 @@ function getXAxis(this: Barchart, domain, scale) {
   return xParams;
 }
 
-function getYAxis(this: Barchart, yDomain) {
+function getYAxis(this: Barchart, domain: AxisDomain[]) {
   const yKeyName = this.params["axis-y-key"];
   const yAxisTitle =
     typeof this.params["axis-y-title"] === "undefined"
@@ -626,7 +624,7 @@ function getYAxis(this: Barchart, yDomain) {
 
   const yParams: AxisParamsI = {
     placement: this.params["axis-y-placement"],
-    domain: yDomain,
+    domain,
     drawArea: {
       x: 0,
       y: 0,

From b0f28e21316291033623adf0981dd7054831fa58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 16 May 2024 16:53:50 +0900
Subject: [PATCH 31/33] support lint

---
 stanzas/barchart/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 2f875022..91f59ea9 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -643,4 +643,4 @@ function getYAxis(this: Barchart, domain: AxisDomain[]) {
     ticksLabelsFormat: this.params["axis-y-ticks_labels_format"],
   };
   return yParams;
-}
\ No newline at end of file
+}

From d953eb5e02afd1d5faa06106684e1c4e98a9faf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Mon, 27 May 2024 18:45:12 +0900
Subject: [PATCH 32/33] delete logs

---
 stanzas/barchart/index.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 91f59ea9..79f30878 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -117,8 +117,7 @@ export default class Barchart extends MetaStanza {
       map.get(curr[xKeyName]).push(curr);
       return map;
     }, new Map());
-    console.log(this._dataByX);
-
+    
     const groupNames = this._dataByGroup.keys() as Iterable<string>;
 
     color.domain(groupNames);
@@ -267,8 +266,7 @@ export default class Barchart extends MetaStanza {
     const legendTitle = this.params["legend-title"];
 
     const values = structuredClone(this._data);
-    console.log(values);
-
+    
     let params;
     try {
       params = paramsModel.parse(this.params);
@@ -463,7 +461,6 @@ function drawStackedBars(
     .append("g")
     .classed("bar-group", true)
     .attr("transform", (d) => {
-      console.log(d);
       return `translate(${this.xAxisGen.axisGen.scale()(d[0])},0)`;
     });
 

From a2a9dbafe47f3327e1207c65ebc2d85b558c1641 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B8=E9=87=8E=20=E6=9C=97=E5=A4=AB?= <nagano@me.com>
Date: Thu, 30 May 2024 10:20:26 +0900
Subject: [PATCH 33/33] for lint

---
 stanzas/barchart/index.ts | 63 +++++++++++++++++++++++++--------------
 1 file changed, 41 insertions(+), 22 deletions(-)

diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
index 79f30878..6321fdae 100644
--- a/stanzas/barchart/index.ts
+++ b/stanzas/barchart/index.ts
@@ -102,13 +102,16 @@ export default class Barchart extends MetaStanza {
     }
 
     // eslint-disable-next-line @typescript-eslint/ban-types
-    this._dataByGroup = values.reduce((map: Map<unknown, {}[]>, curr: { [x: string]: unknown; }) => {
-      if (!map.has(curr[groupKeyName])) {
-        return map.set(curr[groupKeyName], [curr]);
-      }
-      map.get(curr[groupKeyName]).push(curr);
-      return map;
-    }, new Map());
+    this._dataByGroup = values.reduce(
+      (map: Map<unknown, {}[]>, curr: { [x: string]: unknown }) => {
+        if (!map.has(curr[groupKeyName])) {
+          return map.set(curr[groupKeyName], [curr]);
+        }
+        map.get(curr[groupKeyName]).push(curr);
+        return map;
+      },
+      new Map()
+    );
 
     this._dataByX = values.reduce((map, curr) => {
       if (!map.has(curr[xKeyName])) {
@@ -117,7 +120,7 @@ export default class Barchart extends MetaStanza {
       map.get(curr[xKeyName]).push(curr);
       return map;
     }, new Map());
-    
+
     const groupNames = this._dataByGroup.keys() as Iterable<string>;
 
     color.domain(groupNames);
@@ -157,13 +160,13 @@ export default class Barchart extends MetaStanza {
       [
         ...new Set(structuredClone(this._data).map((d) => d[xKeyName])),
       ] as string[],
-      "ordinal"
+      "ordinal",
     ]);
 
     const maxY = Math.max(...y2s);
     const yDomain = [0, maxY * 1.02];
 
-    const yParams = getYAxis.apply(this, [yDomain])
+    const yParams = getYAxis.apply(this, [yDomain]);
 
     if (!this.xAxisGen) {
       this.xAxisGen = new Axis(svg.node());
@@ -266,7 +269,7 @@ export default class Barchart extends MetaStanza {
     const legendTitle = this.params["legend-title"];
 
     const values = structuredClone(this._data);
-    
+
     let params;
     try {
       params = paramsModel.parse(this.params);
@@ -314,7 +317,7 @@ export default class Barchart extends MetaStanza {
     // X軸を追加
     const xParams = getXAxis.apply(this, [
       x.domain() as [number, number],
-      "linear"
+      "linear",
     ]);
 
     const maxY = bins.reduce(
@@ -323,7 +326,7 @@ export default class Barchart extends MetaStanza {
     );
     const yDomain = [0, maxY * 1.02];
 
-    const yParams = getYAxis.apply(this, [yDomain])
+    const yParams = getYAxis.apply(this, [yDomain]);
 
     if (!this.xAxisGen) {
       this.xAxisGen = new Axis(svg.node());
@@ -376,7 +379,10 @@ export default class Barchart extends MetaStanza {
     if (this.params["event-outgoing_change_selected_nodes"]) {
       bar.on("click", (_, d) => {
         const ids = d["__values__"].map((value) => value["__togostanza_id__"]);
-        emitSelectedEventByHistogram.apply(this, [ids, this.params["data-url"]], );
+        emitSelectedEventByHistogram.apply(this, [
+          ids,
+          this.params["data-url"],
+        ]);
       });
     }
   }
@@ -526,7 +532,11 @@ function addErrorBars(
 }
 
 // emit selected event
-function emitSelectedEventByBarChart(this: Barchart, id: unknown, dataUrl: string) {
+function emitSelectedEventByBarChart(
+  this: Barchart,
+  id: unknown,
+  dataUrl: string
+) {
   // collect selected bars
   const barGroups = this._graphArea.selectAll("g.bar-group");
   const filteredBars = barGroups.filter(".-selected");
@@ -545,17 +555,21 @@ function emitSelectedEventByBarChart(this: Barchart, id: unknown, dataUrl: strin
     targetId: id,
     selectedIds: ids,
     dataUrl,
-  })
+  });
   changeSelectedStyle.apply(this, [ids]);
 }
-function emitSelectedEventByHistogram(this: Barchart, ids: unknown[], dataUrl: string) {
+function emitSelectedEventByHistogram(
+  this: Barchart,
+  ids: unknown[],
+  dataUrl: string
+) {
   // dispatch event
   emitSelectedEvent({
     rootElement: this.element,
     targetId: ids[0],
     selectedIds: ids,
     dataUrl,
-  })
+  });
   changeSelectedStyle.apply(this, [ids]);
 }
 
@@ -582,12 +596,17 @@ function changeSelectedStyle(this: Barchart, ids: string[]) {
       break;
   }
 }
-function getXAxis(this: Barchart, domain: AxisDomain[], scale: "linear" | "time" | "log10" | "ordinal") { // Update the type of 'scale'
+function getXAxis(
+  this: Barchart,
+  domain: AxisDomain[],
+  scale: "linear" | "time" | "log10" | "ordinal"
+) {
+  // Update the type of 'scale'
   const xKeyName = this.params["axis-x-key"];
   const xAxisTitle =
-  typeof this.params["axis-x-title"] === "undefined"
-    ? xKeyName
-    : this.params["axis-x-title"];
+    typeof this.params["axis-x-title"] === "undefined"
+      ? xKeyName
+      : this.params["axis-x-title"];
 
   const xParams: AxisParamsI = {
     placement: this.params["axis-x-placement"],