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

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 (3) hide show
  1. package/dist/index.js +84 -16
  2. package/dist/index.mjs +84 -16
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4711,6 +4711,24 @@ var BarChart = ({
4711
4711
  const yAxisRef = (0, import_react21.useRef)(null);
4712
4712
  const containerRef = (0, import_react21.useRef)(null);
4713
4713
  const widthRef = (0, import_react21.useRef)(0);
4714
+ function ellipsizeTickText(selection, maxWidth) {
4715
+ selection.each(function() {
4716
+ const textEl = this;
4717
+ const full = (textEl.textContent ?? "").trim();
4718
+ textEl.textContent = full;
4719
+ if (textEl.getComputedTextLength() <= maxWidth) return;
4720
+ let lo = 0;
4721
+ let hi = full.length;
4722
+ const suffix = "\u2026";
4723
+ while (lo < hi) {
4724
+ const mid = Math.ceil((lo + hi) / 2);
4725
+ textEl.textContent = full.slice(0, mid) + suffix;
4726
+ if (textEl.getComputedTextLength() <= maxWidth) lo = mid;
4727
+ else hi = mid - 1;
4728
+ }
4729
+ textEl.textContent = full.slice(0, lo) + suffix;
4730
+ });
4731
+ }
4714
4732
  (0, import_react21.useEffect)(() => {
4715
4733
  if (!containerRef.current) return;
4716
4734
  const ro = new ResizeObserver((entries) => {
@@ -4724,7 +4742,10 @@ var BarChart = ({
4724
4742
  const xDomain = (0, import_react21.useMemo)(() => data.map((d) => d.x), [data]);
4725
4743
  const yDomain = (0, import_react21.useMemo)(() => {
4726
4744
  const maxY = d3.max(data, (d) => d.y);
4727
- return [0, (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1];
4745
+ return [
4746
+ 0,
4747
+ (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1
4748
+ ];
4728
4749
  }, [data]);
4729
4750
  const render = () => {
4730
4751
  const svg = d3.select(svgRef.current);
@@ -4762,6 +4783,8 @@ var BarChart = ({
4762
4783
  } else {
4763
4784
  xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle");
4764
4785
  }
4786
+ const maxLabelWidth = isHorizontal ? 50 : Math.max(40, (xBand.bandwidth?.() ?? 0) - 30);
4787
+ ellipsizeTickText(xTickTexts, maxLabelWidth);
4765
4788
  const grid = !isHorizontal ? d3.axisLeft(yLin).ticks(5).tickSize(-innerW).tickFormat(() => "") : d3.axisBottom(xLin).ticks(5).tickSize(-innerH).tickFormat(() => "");
4766
4789
  const gridG = svg.selectAll("g.grid").data([null]).join("g").attr("class", "grid").attr(
4767
4790
  "transform",
@@ -4771,12 +4794,30 @@ var BarChart = ({
4771
4794
  gridG.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1);
4772
4795
  svg.select("g.grid").lower();
4773
4796
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
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),
4797
+ (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr(
4798
+ "x",
4799
+ !isHorizontal ? 0 : innerWidth - margin.right - margin.left + 20
4800
+ ).attr(
4801
+ "y",
4802
+ !isHorizontal ? -10 : innerHeight / 2 + margin.bottom + margin.top + 20
4803
+ ).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4775
4804
  (update) => update.text((d) => d)
4776
4805
  );
4777
- xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
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)
4806
+ yAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
4807
+ (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr(
4808
+ "x",
4809
+ !isHorizontal ? innerWidth - margin.right - margin.left + 20 : 0
4810
+ ).attr(
4811
+ "y",
4812
+ !isHorizontal ? -10 : -(innerHeight / 2) - margin.bottom - margin.top - 20
4813
+ ).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4814
+ (update) => update.text((d) => d).attr(
4815
+ "x",
4816
+ !isHorizontal ? innerWidth - margin.right - margin.left : 0
4817
+ ).attr(
4818
+ "y",
4819
+ !isHorizontal ? innerHeight / 2 - margin.top : -(innerHeight / 2) - margin.bottom - margin.top - 20
4820
+ )
4780
4821
  );
4781
4822
  const t = svg.transition().duration(400);
4782
4823
  const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
@@ -4789,27 +4830,54 @@ var BarChart = ({
4789
4830
  e.attr("x", 0).attr("width", 0).attr("y", (d) => yBand(d.x) ?? 0).attr("height", yBand.bandwidth());
4790
4831
  }
4791
4832
  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());
4833
+ 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(
4834
+ "height",
4835
+ (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth()
4836
+ );
4793
4837
  },
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]),
4838
+ (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(
4839
+ "height",
4840
+ (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth()
4841
+ ).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
4795
4842
  (exit) => exit.transition(t).attr("width", !isHorizontal ? xBand.bandwidth() : 0).attr("height", !isHorizontal ? innerH - yLin(0) : yBand.bandwidth()).remove()
4796
4843
  );
4797
4844
  const labels = g.selectAll("text.bar-label").data(data, (d) => d.x);
4798
4845
  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),
4846
+ (enter) => enter.append("text").attr("class", "bar-label").style("font-weight", "bold").style("font-family", "Kanit, sans-serif").style("font-size", "50px").style("fill", (d, i) => colorPalette[i % colorPalette.length]).attr("text-anchor", !isHorizontal ? "middle" : "start").attr(
4847
+ "x",
4848
+ (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6
4849
+ ).attr(
4850
+ "y",
4851
+ (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 4
4852
+ ).text((d) => d.y),
4853
+ (update) => update.transition(t).attr("text-anchor", !isHorizontal ? "middle" : "start").attr(
4854
+ "x",
4855
+ (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6
4856
+ ).attr(
4857
+ "y",
4858
+ (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 24
4859
+ ).text((d) => d.y),
4801
4860
  (exit) => exit.remove()
4802
4861
  );
4803
4862
  };
4804
4863
  (0, import_react21.useEffect)(() => {
4805
4864
  render();
4806
4865
  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
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" }),
4809
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4810
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),
4811
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: yAxisRef })
4812
- ] }) });
4866
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
4867
+ "svg",
4868
+ {
4869
+ ref: svgRef,
4870
+ role: "img",
4871
+ "aria-label": "Bar chart",
4872
+ style: { display: "block", width: "100%", height },
4873
+ children: [
4874
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("title", { children: "Bar chart" }),
4875
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4876
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),
4877
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: yAxisRef })
4878
+ ]
4879
+ }
4880
+ ) });
4813
4881
  };
4814
4882
 
4815
4883
  // src/Chart/PieChart/PieChart.tsx
@@ -4854,7 +4922,7 @@ var PieChart = ({
4854
4922
  description && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "caption-1", children: description }),
4855
4923
  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex", children: [
4856
4924
  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("svg", { ref: svgRef }),
4857
- /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center", children: [
4925
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "grid grid-cols-3 gap-2 items-center body-2", children: [
4858
4926
  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "w-[20px] h-[20px]", style: { backgroundColor: d.color } }),
4859
4927
  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: d.label }),
4860
4928
  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { children: d.value })
package/dist/index.mjs CHANGED
@@ -4645,6 +4645,24 @@ var BarChart = ({
4645
4645
  const yAxisRef = useRef8(null);
4646
4646
  const containerRef = useRef8(null);
4647
4647
  const widthRef = useRef8(0);
4648
+ function ellipsizeTickText(selection, maxWidth) {
4649
+ selection.each(function() {
4650
+ const textEl = this;
4651
+ const full = (textEl.textContent ?? "").trim();
4652
+ textEl.textContent = full;
4653
+ if (textEl.getComputedTextLength() <= maxWidth) return;
4654
+ let lo = 0;
4655
+ let hi = full.length;
4656
+ const suffix = "\u2026";
4657
+ while (lo < hi) {
4658
+ const mid = Math.ceil((lo + hi) / 2);
4659
+ textEl.textContent = full.slice(0, mid) + suffix;
4660
+ if (textEl.getComputedTextLength() <= maxWidth) lo = mid;
4661
+ else hi = mid - 1;
4662
+ }
4663
+ textEl.textContent = full.slice(0, lo) + suffix;
4664
+ });
4665
+ }
4648
4666
  useEffect9(() => {
4649
4667
  if (!containerRef.current) return;
4650
4668
  const ro = new ResizeObserver((entries) => {
@@ -4658,7 +4676,10 @@ var BarChart = ({
4658
4676
  const xDomain = useMemo2(() => data.map((d) => d.x), [data]);
4659
4677
  const yDomain = useMemo2(() => {
4660
4678
  const maxY = d3.max(data, (d) => d.y);
4661
- return [0, (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1];
4679
+ return [
4680
+ 0,
4681
+ (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1
4682
+ ];
4662
4683
  }, [data]);
4663
4684
  const render = () => {
4664
4685
  const svg = d3.select(svgRef.current);
@@ -4696,6 +4717,8 @@ var BarChart = ({
4696
4717
  } else {
4697
4718
  xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle");
4698
4719
  }
4720
+ const maxLabelWidth = isHorizontal ? 50 : Math.max(40, (xBand.bandwidth?.() ?? 0) - 30);
4721
+ ellipsizeTickText(xTickTexts, maxLabelWidth);
4699
4722
  const grid = !isHorizontal ? d3.axisLeft(yLin).ticks(5).tickSize(-innerW).tickFormat(() => "") : d3.axisBottom(xLin).ticks(5).tickSize(-innerH).tickFormat(() => "");
4700
4723
  const gridG = svg.selectAll("g.grid").data([null]).join("g").attr("class", "grid").attr(
4701
4724
  "transform",
@@ -4705,12 +4728,30 @@ var BarChart = ({
4705
4728
  gridG.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1);
4706
4729
  svg.select("g.grid").lower();
4707
4730
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
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),
4731
+ (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr(
4732
+ "x",
4733
+ !isHorizontal ? 0 : innerWidth - margin.right - margin.left + 20
4734
+ ).attr(
4735
+ "y",
4736
+ !isHorizontal ? -10 : innerHeight / 2 + margin.bottom + margin.top + 20
4737
+ ).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4709
4738
  (update) => update.text((d) => d)
4710
4739
  );
4711
- xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
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)
4740
+ yAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
4741
+ (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr(
4742
+ "x",
4743
+ !isHorizontal ? innerWidth - margin.right - margin.left + 20 : 0
4744
+ ).attr(
4745
+ "y",
4746
+ !isHorizontal ? -10 : -(innerHeight / 2) - margin.bottom - margin.top - 20
4747
+ ).attr("text-anchor", "middle").style("font-size", "18px").style("font-family", "Kanit, sans-serif").text((d) => d),
4748
+ (update) => update.text((d) => d).attr(
4749
+ "x",
4750
+ !isHorizontal ? innerWidth - margin.right - margin.left : 0
4751
+ ).attr(
4752
+ "y",
4753
+ !isHorizontal ? innerHeight / 2 - margin.top : -(innerHeight / 2) - margin.bottom - margin.top - 20
4754
+ )
4714
4755
  );
4715
4756
  const t = svg.transition().duration(400);
4716
4757
  const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
@@ -4723,27 +4764,54 @@ var BarChart = ({
4723
4764
  e.attr("x", 0).attr("width", 0).attr("y", (d) => yBand(d.x) ?? 0).attr("height", yBand.bandwidth());
4724
4765
  }
4725
4766
  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());
4767
+ 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(
4768
+ "height",
4769
+ (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth()
4770
+ );
4727
4771
  },
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]),
4772
+ (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(
4773
+ "height",
4774
+ (d) => !isHorizontal ? innerH - yLin(d.y) : yBand.bandwidth()
4775
+ ).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
4729
4776
  (exit) => exit.transition(t).attr("width", !isHorizontal ? xBand.bandwidth() : 0).attr("height", !isHorizontal ? innerH - yLin(0) : yBand.bandwidth()).remove()
4730
4777
  );
4731
4778
  const labels = g.selectAll("text.bar-label").data(data, (d) => d.x);
4732
4779
  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),
4780
+ (enter) => enter.append("text").attr("class", "bar-label").style("font-weight", "bold").style("font-family", "Kanit, sans-serif").style("font-size", "50px").style("fill", (d, i) => colorPalette[i % colorPalette.length]).attr("text-anchor", !isHorizontal ? "middle" : "start").attr(
4781
+ "x",
4782
+ (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6
4783
+ ).attr(
4784
+ "y",
4785
+ (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 4
4786
+ ).text((d) => d.y),
4787
+ (update) => update.transition(t).attr("text-anchor", !isHorizontal ? "middle" : "start").attr(
4788
+ "x",
4789
+ (d) => !isHorizontal ? (xBand(d.x) ?? 0) + xBand.bandwidth() / 2 : xLin(d.y) + 6
4790
+ ).attr(
4791
+ "y",
4792
+ (d) => !isHorizontal ? yLin(d.y) - 6 : (yBand(d.x) ?? 0) + yBand.bandwidth() / 2 + 24
4793
+ ).text((d) => d.y),
4735
4794
  (exit) => exit.remove()
4736
4795
  );
4737
4796
  };
4738
4797
  useEffect9(() => {
4739
4798
  render();
4740
4799
  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
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" }),
4743
- /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4744
- /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),
4745
- /* @__PURE__ */ jsx46("g", { ref: yAxisRef })
4746
- ] }) });
4800
+ return /* @__PURE__ */ jsx46("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs37(
4801
+ "svg",
4802
+ {
4803
+ ref: svgRef,
4804
+ role: "img",
4805
+ "aria-label": "Bar chart",
4806
+ style: { display: "block", width: "100%", height },
4807
+ children: [
4808
+ /* @__PURE__ */ jsx46("title", { children: "Bar chart" }),
4809
+ /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4810
+ /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),
4811
+ /* @__PURE__ */ jsx46("g", { ref: yAxisRef })
4812
+ ]
4813
+ }
4814
+ ) });
4747
4815
  };
4748
4816
 
4749
4817
  // src/Chart/PieChart/PieChart.tsx
@@ -4788,7 +4856,7 @@ var PieChart = ({
4788
4856
  description && /* @__PURE__ */ jsx47("p", { className: "caption-1", children: description }),
4789
4857
  /* @__PURE__ */ jsxs38("div", { className: "flex", children: [
4790
4858
  /* @__PURE__ */ jsx47("svg", { ref: svgRef }),
4791
- /* @__PURE__ */ jsx47("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-3 gap-2 items-center", children: [
4859
+ /* @__PURE__ */ jsx47("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-3 gap-2 items-center body-2", children: [
4792
4860
  /* @__PURE__ */ jsx47("div", { className: "w-[20px] h-[20px]", style: { backgroundColor: d.color } }),
4793
4861
  /* @__PURE__ */ jsx47("div", { children: d.label }),
4794
4862
  /* @__PURE__ */ jsx47("div", { children: d.value })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esic-lab/data-core-ui",
3
- "version": "0.0.73",
3
+ "version": "0.0.75",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",