@esic-lab/data-core-ui 0.0.72 → 0.0.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +54 -52
  4. package/dist/index.mjs +54 -52
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -645,9 +645,10 @@ type Props = {
645
645
  yLabel?: string;
646
646
  xLabel?: string;
647
647
  modeLabel?: "line" | "45";
648
+ layout?: "vertical" | "horizontal";
648
649
  colorPalette?: string[];
649
650
  };
650
- declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
651
+ declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, layout, }: Props) => react_jsx_runtime.JSX.Element;
651
652
 
652
653
  interface PieChartProps {
653
654
  title?: string;
package/dist/index.d.ts CHANGED
@@ -645,9 +645,10 @@ type Props = {
645
645
  yLabel?: string;
646
646
  xLabel?: string;
647
647
  modeLabel?: "line" | "45";
648
+ layout?: "vertical" | "horizontal";
648
649
  colorPalette?: string[];
649
650
  };
650
- declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
651
+ declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, layout, }: Props) => react_jsx_runtime.JSX.Element;
651
652
 
652
653
  interface PieChartProps {
653
654
  title?: string;
package/dist/index.js CHANGED
@@ -4702,7 +4702,8 @@ var BarChart = ({
4702
4702
  yLabel,
4703
4703
  xLabel,
4704
4704
  modeLabel,
4705
- colorPalette = defaultColorPalette
4705
+ colorPalette = defaultColorPalette,
4706
+ layout
4706
4707
  }) => {
4707
4708
  const svgRef = (0, import_react21.useRef)(null);
4708
4709
  const gRef = (0, import_react21.useRef)(null);
@@ -4734,69 +4735,69 @@ var BarChart = ({
4734
4735
  const innerW = width - margin.left - margin.right;
4735
4736
  const innerH = height - margin.top - margin.bottom;
4736
4737
  svg.attr("width", width).attr("height", height);
4737
- const x = d3.scaleBand().domain(xDomain).range([0, innerW]).padding(0.2);
4738
- const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
4739
- const xAxis = d3.axisBottom(x).tickSizeOuter(0).tickSize(0).tickFormat((d) => d);
4740
- const yAxis = d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"));
4741
- const grid = d3.axisLeft(y).ticks(5).tickSize(-innerW).scale(y);
4742
- const gridG = svg.append("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px");
4743
- gridG.selectAll("path").remove();
4744
- const barsG = svg.append("g").attr("class", "bars");
4745
- svg.selectAll(".grid").data([0]).join("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px").call((g2) => g2.selectAll("path").remove()).call(
4746
- (g2) => g2.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1)
4747
- // keep faint
4748
- );
4749
- svg.select(".grid").lower();
4750
- xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4751
- const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4752
- if (modeLabel === "45") {
4753
- labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4754
- } else if (modeLabel === "line") {
4755
- labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
4738
+ const isHorizontal = layout === "horizontal";
4739
+ g.attr("transform", `translate(${margin.left},${margin.top})`);
4740
+ const xBand = d3.scaleBand().domain(xDomain).padding(0.2);
4741
+ const yBand = d3.scaleBand().domain(xDomain).padding(0.2);
4742
+ const xLin = d3.scaleLinear().domain(yDomain).nice();
4743
+ const yLin = d3.scaleLinear().domain(yDomain).nice();
4744
+ if (!isHorizontal) {
4745
+ xBand.range([0, innerW]);
4746
+ yLin.range([innerH, 0]);
4747
+ } else {
4748
+ yBand.range([0, innerH]);
4749
+ xLin.range([0, innerW]);
4750
+ }
4751
+ const xAxis = !isHorizontal ? d3.axisBottom(xBand).tickSizeOuter(0).tickSize(0) : d3.axisBottom(xLin).ticks(5).tickFormat(d3.format("~s"));
4752
+ const yAxis = !isHorizontal ? d3.axisLeft(yLin).ticks(5).tickFormat(d3.format("~s")) : d3.axisLeft(yBand).tickSizeOuter(0).tickSize(0);
4753
+ xAxisG.attr("transform", `translate(${margin.left},${margin.top + innerH})`).call(xAxis);
4754
+ yAxisG.attr("transform", `translate(${margin.left},${margin.top})`).call(yAxis);
4755
+ const xTickTexts = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Kanit, sans-serif");
4756
+ if (!isHorizontal) {
4757
+ if (modeLabel === "45") {
4758
+ xTickTexts.attr("transform", "rotate(-45)").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4759
+ } else {
4760
+ xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
4761
+ }
4756
4762
  } else {
4757
- labels.style("text-anchor", "middle").attr("dy", "1.5em");
4763
+ xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle");
4758
4764
  }
4765
+ const grid = !isHorizontal ? d3.axisLeft(yLin).ticks(5).tickSize(-innerW).tickFormat(() => "") : d3.axisBottom(xLin).ticks(5).tickSize(-innerH).tickFormat(() => "");
4766
+ const gridG = svg.selectAll("g.grid").data([null]).join("g").attr("class", "grid").attr(
4767
+ "transform",
4768
+ !isHorizontal ? `translate(${margin.left},${margin.top})` : `translate(${margin.left},${margin.top + innerH})`
4769
+ ).call(grid);
4770
+ gridG.selectAll("path").remove();
4771
+ gridG.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1);
4772
+ svg.select("g.grid").lower();
4759
4773
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
4760
- (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
4774
+ (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", !isHorizontal ? 0 : innerWidth - margin.right - margin.left + 20).attr("y", !isHorizontal ? -10 : innerHeight / 2 + margin.bottom + margin.top + 20).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4761
4775
  (update) => update.text((d) => d)
4762
4776
  );
4763
4777
  xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
4764
- (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
4765
- (update) => update.text((d) => d).attr("x", width)
4778
+ (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", !isHorizontal ? innerWidth - margin.right - margin.left + 20 : 0).attr("y", !isHorizontal ? -10 : -(innerHeight / 2) - margin.bottom - margin.top - 20).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4779
+ (update) => update.text((d) => d)
4766
4780
  );
4767
- const t = d3.transition().duration(400);
4781
+ const t = svg.transition().duration(400);
4768
4782
  const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
4769
4783
  bars.join(
4770
- // (enter) =>
4771
- // enter
4772
- // .append("rect")
4773
- // .attr("class", "bar")
4774
- // .attr("x", (d) => margin.left)
4775
- // .attr("width", x.bandwidth())
4776
- // .attr("y", () => margin.top + y(0))
4777
- // .attr("height", () => innerH - y(0))
4778
- // .attr("rx", 5) // rounded corners
4779
- // .attr("ry", 5) // rounded corners
4780
- // .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
4781
- // .append("title")
4782
- // .text((d) => `${d.x}: ${d.y}`)
4783
- // .merge(bars) // merge the existing bars after joining
4784
- // .attr("width", x.bandwidth())
4785
- // .attr("y", (d) => y(d.y))
4786
- // .attr("height", (d) => innerH - y(d.y))
4787
- // .call((enter) => enter.raise()), // Bring the new bars to the front
4788
4784
  (enter) => {
4789
- const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
4790
- rects.append("title").text((d) => `${d.x}: ${d.y}`);
4791
- return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
4785
+ const e = enter.append("rect").attr("class", "bar").attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
4786
+ if (!isHorizontal) {
4787
+ e.attr("x", (d) => xBand(d.x) ?? 0).attr("width", xBand.bandwidth()).attr("y", yLin(0)).attr("height", innerH - yLin(0));
4788
+ } else {
4789
+ e.attr("x", 0).attr("width", 0).attr("y", (d) => yBand(d.x) ?? 0).attr("height", yBand.bandwidth());
4790
+ }
4791
+ e.append("title").text((d) => `${d.x}: ${d.y}`);
4792
+ return e.transition(t).attr("x", (d) => !isHorizontal ? xBand(d.x) ?? 0 : 0).attr("y", (d) => !isHorizontal ? yLin(d.y) : yBand(d.x) ?? 0).attr("width", (d) => !isHorizontal ? xBand.bandwidth() : xLin(d.y)).attr("height", (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth());
4792
4793
  },
4793
- (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
4794
- // Update color on update
4795
- (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
4794
+ (update) => update.call((u) => u.raise()).transition(t).attr("x", (d) => !isHorizontal ? xBand(d.x) ?? 0 : 0).attr("y", (d) => !isHorizontal ? yLin(d.y) : yBand(d.x) ?? 0).attr("width", (d) => !isHorizontal ? xBand.bandwidth() : xLin(d.y)).attr("height", (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth()).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
4795
+ (exit) => exit.transition(t).attr("width", !isHorizontal ? xBand.bandwidth() : 0).attr("height", !isHorizontal ? innerH - yLin(0) : yBand.bandwidth()).remove()
4796
4796
  );
4797
- g.selectAll("text.bar-label").data(data).join(
4798
- (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).style("overflow", "visible").text((d) => d.y),
4799
- (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
4797
+ const labels = g.selectAll("text.bar-label").data(data, (d) => d.x);
4798
+ labels.join(
4799
+ (enter) => enter.append("text").attr("class", "bar-label").style("font-weight", "bold").style("font-family", "Kanit, sans-serif").style("font-size", "80px").style("fill", (d, i) => colorPalette[i % colorPalette.length]).attr("text-anchor", !isHorizontal ? "middle" : "start").attr("x", (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6).attr("y", (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 4).text((d) => d.y),
4800
+ (update) => update.transition(t).attr("text-anchor", !isHorizontal ? "middle" : "start").attr("x", (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6).attr("y", (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 24).text((d) => d.y),
4800
4801
  (exit) => exit.remove()
4801
4802
  );
4802
4803
  };
@@ -4804,6 +4805,7 @@ var BarChart = ({
4804
4805
  render();
4805
4806
  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
4806
4807
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
4808
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("title", { children: "Bar chart" }),
4807
4809
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4808
4810
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),
4809
4811
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: yAxisRef })
package/dist/index.mjs CHANGED
@@ -4636,7 +4636,8 @@ var BarChart = ({
4636
4636
  yLabel,
4637
4637
  xLabel,
4638
4638
  modeLabel,
4639
- colorPalette = defaultColorPalette
4639
+ colorPalette = defaultColorPalette,
4640
+ layout
4640
4641
  }) => {
4641
4642
  const svgRef = useRef8(null);
4642
4643
  const gRef = useRef8(null);
@@ -4668,69 +4669,69 @@ var BarChart = ({
4668
4669
  const innerW = width - margin.left - margin.right;
4669
4670
  const innerH = height - margin.top - margin.bottom;
4670
4671
  svg.attr("width", width).attr("height", height);
4671
- const x = d3.scaleBand().domain(xDomain).range([0, innerW]).padding(0.2);
4672
- const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
4673
- const xAxis = d3.axisBottom(x).tickSizeOuter(0).tickSize(0).tickFormat((d) => d);
4674
- const yAxis = d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"));
4675
- const grid = d3.axisLeft(y).ticks(5).tickSize(-innerW).scale(y);
4676
- const gridG = svg.append("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px");
4677
- gridG.selectAll("path").remove();
4678
- const barsG = svg.append("g").attr("class", "bars");
4679
- svg.selectAll(".grid").data([0]).join("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px").call((g2) => g2.selectAll("path").remove()).call(
4680
- (g2) => g2.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1)
4681
- // keep faint
4682
- );
4683
- svg.select(".grid").lower();
4684
- xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4685
- const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4686
- if (modeLabel === "45") {
4687
- labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4688
- } else if (modeLabel === "line") {
4689
- labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
4672
+ const isHorizontal = layout === "horizontal";
4673
+ g.attr("transform", `translate(${margin.left},${margin.top})`);
4674
+ const xBand = d3.scaleBand().domain(xDomain).padding(0.2);
4675
+ const yBand = d3.scaleBand().domain(xDomain).padding(0.2);
4676
+ const xLin = d3.scaleLinear().domain(yDomain).nice();
4677
+ const yLin = d3.scaleLinear().domain(yDomain).nice();
4678
+ if (!isHorizontal) {
4679
+ xBand.range([0, innerW]);
4680
+ yLin.range([innerH, 0]);
4681
+ } else {
4682
+ yBand.range([0, innerH]);
4683
+ xLin.range([0, innerW]);
4684
+ }
4685
+ const xAxis = !isHorizontal ? d3.axisBottom(xBand).tickSizeOuter(0).tickSize(0) : d3.axisBottom(xLin).ticks(5).tickFormat(d3.format("~s"));
4686
+ const yAxis = !isHorizontal ? d3.axisLeft(yLin).ticks(5).tickFormat(d3.format("~s")) : d3.axisLeft(yBand).tickSizeOuter(0).tickSize(0);
4687
+ xAxisG.attr("transform", `translate(${margin.left},${margin.top + innerH})`).call(xAxis);
4688
+ yAxisG.attr("transform", `translate(${margin.left},${margin.top})`).call(yAxis);
4689
+ const xTickTexts = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Kanit, sans-serif");
4690
+ if (!isHorizontal) {
4691
+ if (modeLabel === "45") {
4692
+ xTickTexts.attr("transform", "rotate(-45)").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4693
+ } else {
4694
+ xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
4695
+ }
4690
4696
  } else {
4691
- labels.style("text-anchor", "middle").attr("dy", "1.5em");
4697
+ xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle");
4692
4698
  }
4699
+ const grid = !isHorizontal ? d3.axisLeft(yLin).ticks(5).tickSize(-innerW).tickFormat(() => "") : d3.axisBottom(xLin).ticks(5).tickSize(-innerH).tickFormat(() => "");
4700
+ const gridG = svg.selectAll("g.grid").data([null]).join("g").attr("class", "grid").attr(
4701
+ "transform",
4702
+ !isHorizontal ? `translate(${margin.left},${margin.top})` : `translate(${margin.left},${margin.top + innerH})`
4703
+ ).call(grid);
4704
+ gridG.selectAll("path").remove();
4705
+ gridG.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1);
4706
+ svg.select("g.grid").lower();
4693
4707
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
4694
- (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
4708
+ (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", !isHorizontal ? 0 : innerWidth - margin.right - margin.left + 20).attr("y", !isHorizontal ? -10 : innerHeight / 2 + margin.bottom + margin.top + 20).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4695
4709
  (update) => update.text((d) => d)
4696
4710
  );
4697
4711
  xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
4698
- (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
4699
- (update) => update.text((d) => d).attr("x", width)
4712
+ (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", !isHorizontal ? innerWidth - margin.right - margin.left + 20 : 0).attr("y", !isHorizontal ? -10 : -(innerHeight / 2) - margin.bottom - margin.top - 20).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4713
+ (update) => update.text((d) => d)
4700
4714
  );
4701
- const t = d3.transition().duration(400);
4715
+ const t = svg.transition().duration(400);
4702
4716
  const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
4703
4717
  bars.join(
4704
- // (enter) =>
4705
- // enter
4706
- // .append("rect")
4707
- // .attr("class", "bar")
4708
- // .attr("x", (d) => margin.left)
4709
- // .attr("width", x.bandwidth())
4710
- // .attr("y", () => margin.top + y(0))
4711
- // .attr("height", () => innerH - y(0))
4712
- // .attr("rx", 5) // rounded corners
4713
- // .attr("ry", 5) // rounded corners
4714
- // .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
4715
- // .append("title")
4716
- // .text((d) => `${d.x}: ${d.y}`)
4717
- // .merge(bars) // merge the existing bars after joining
4718
- // .attr("width", x.bandwidth())
4719
- // .attr("y", (d) => y(d.y))
4720
- // .attr("height", (d) => innerH - y(d.y))
4721
- // .call((enter) => enter.raise()), // Bring the new bars to the front
4722
4718
  (enter) => {
4723
- const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
4724
- rects.append("title").text((d) => `${d.x}: ${d.y}`);
4725
- return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
4719
+ const e = enter.append("rect").attr("class", "bar").attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
4720
+ if (!isHorizontal) {
4721
+ e.attr("x", (d) => xBand(d.x) ?? 0).attr("width", xBand.bandwidth()).attr("y", yLin(0)).attr("height", innerH - yLin(0));
4722
+ } else {
4723
+ e.attr("x", 0).attr("width", 0).attr("y", (d) => yBand(d.x) ?? 0).attr("height", yBand.bandwidth());
4724
+ }
4725
+ e.append("title").text((d) => `${d.x}: ${d.y}`);
4726
+ return e.transition(t).attr("x", (d) => !isHorizontal ? xBand(d.x) ?? 0 : 0).attr("y", (d) => !isHorizontal ? yLin(d.y) : yBand(d.x) ?? 0).attr("width", (d) => !isHorizontal ? xBand.bandwidth() : xLin(d.y)).attr("height", (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth());
4726
4727
  },
4727
- (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
4728
- // Update color on update
4729
- (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
4728
+ (update) => update.call((u) => u.raise()).transition(t).attr("x", (d) => !isHorizontal ? xBand(d.x) ?? 0 : 0).attr("y", (d) => !isHorizontal ? yLin(d.y) : yBand(d.x) ?? 0).attr("width", (d) => !isHorizontal ? xBand.bandwidth() : xLin(d.y)).attr("height", (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth()).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
4729
+ (exit) => exit.transition(t).attr("width", !isHorizontal ? xBand.bandwidth() : 0).attr("height", !isHorizontal ? innerH - yLin(0) : yBand.bandwidth()).remove()
4730
4730
  );
4731
- g.selectAll("text.bar-label").data(data).join(
4732
- (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).style("overflow", "visible").text((d) => d.y),
4733
- (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
4731
+ const labels = g.selectAll("text.bar-label").data(data, (d) => d.x);
4732
+ labels.join(
4733
+ (enter) => enter.append("text").attr("class", "bar-label").style("font-weight", "bold").style("font-family", "Kanit, sans-serif").style("font-size", "80px").style("fill", (d, i) => colorPalette[i % colorPalette.length]).attr("text-anchor", !isHorizontal ? "middle" : "start").attr("x", (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6).attr("y", (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 4).text((d) => d.y),
4734
+ (update) => update.transition(t).attr("text-anchor", !isHorizontal ? "middle" : "start").attr("x", (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6).attr("y", (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 24).text((d) => d.y),
4734
4735
  (exit) => exit.remove()
4735
4736
  );
4736
4737
  };
@@ -4738,6 +4739,7 @@ var BarChart = ({
4738
4739
  render();
4739
4740
  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
4740
4741
  return /* @__PURE__ */ jsx46("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs37("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
4742
+ /* @__PURE__ */ jsx46("title", { children: "Bar chart" }),
4741
4743
  /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4742
4744
  /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),
4743
4745
  /* @__PURE__ */ jsx46("g", { ref: yAxisRef })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esic-lab/data-core-ui",
3
- "version": "0.0.72",
3
+ "version": "0.0.73",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",