@esic-lab/data-core-ui 0.0.69 → 0.0.70

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 +11 -2
  4. package/dist/index.mjs +11 -2
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -642,9 +642,10 @@ type Props = {
642
642
  };
643
643
  yLabel?: string;
644
644
  xLabel?: string;
645
+ modeLabel?: "line" | "45";
645
646
  colorPalette?: string[];
646
647
  };
647
- declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
648
+ declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
648
649
 
649
650
  interface PieChartProps {
650
651
  title?: string;
package/dist/index.d.ts CHANGED
@@ -642,9 +642,10 @@ type Props = {
642
642
  };
643
643
  yLabel?: string;
644
644
  xLabel?: string;
645
+ modeLabel?: "line" | "45";
645
646
  colorPalette?: string[];
646
647
  };
647
- declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
648
+ declare const BarChart: ({ data, height, margin, yLabel, xLabel, modeLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
648
649
 
649
650
  interface PieChartProps {
650
651
  title?: string;
package/dist/index.js CHANGED
@@ -4691,6 +4691,7 @@ var BarChart = ({
4691
4691
  margin = defaultMargin,
4692
4692
  yLabel,
4693
4693
  xLabel,
4694
+ modeLabel,
4694
4695
  colorPalette = defaultColorPalette
4695
4696
  }) => {
4696
4697
  const svgRef = (0, import_react21.useRef)(null);
@@ -4737,6 +4738,14 @@ var BarChart = ({
4737
4738
  );
4738
4739
  svg.select(".grid").lower();
4739
4740
  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");
4741
+ const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4742
+ if (modeLabel === "45") {
4743
+ labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4744
+ } else if (modeLabel === "line") {
4745
+ labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
4746
+ } else {
4747
+ labels.style("text-anchor", "middle").attr("dy", "1.5em");
4748
+ }
4740
4749
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
4741
4750
  (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),
4742
4751
  (update) => update.text((d) => d)
@@ -4776,14 +4785,14 @@ var BarChart = ({
4776
4785
  (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
4777
4786
  );
4778
4787
  g.selectAll("text.bar-label").data(data).join(
4779
- (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]).text((d) => d.y),
4788
+ (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),
4780
4789
  (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),
4781
4790
  (exit) => exit.remove()
4782
4791
  );
4783
4792
  };
4784
4793
  (0, import_react21.useEffect)(() => {
4785
4794
  render();
4786
- }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
4795
+ }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
4787
4796
  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: [
4788
4797
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4789
4798
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),
package/dist/index.mjs CHANGED
@@ -4625,6 +4625,7 @@ var BarChart = ({
4625
4625
  margin = defaultMargin,
4626
4626
  yLabel,
4627
4627
  xLabel,
4628
+ modeLabel,
4628
4629
  colorPalette = defaultColorPalette
4629
4630
  }) => {
4630
4631
  const svgRef = useRef8(null);
@@ -4671,6 +4672,14 @@ var BarChart = ({
4671
4672
  );
4672
4673
  svg.select(".grid").lower();
4673
4674
  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");
4675
+ const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4676
+ if (modeLabel === "45") {
4677
+ labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4678
+ } else if (modeLabel === "line") {
4679
+ labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
4680
+ } else {
4681
+ labels.style("text-anchor", "middle").attr("dy", "1.5em");
4682
+ }
4674
4683
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
4675
4684
  (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),
4676
4685
  (update) => update.text((d) => d)
@@ -4710,14 +4719,14 @@ var BarChart = ({
4710
4719
  (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
4711
4720
  );
4712
4721
  g.selectAll("text.bar-label").data(data).join(
4713
- (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]).text((d) => d.y),
4722
+ (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),
4714
4723
  (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),
4715
4724
  (exit) => exit.remove()
4716
4725
  );
4717
4726
  };
4718
4727
  useEffect9(() => {
4719
4728
  render();
4720
- }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
4729
+ }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
4721
4730
  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: [
4722
4731
  /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4723
4732
  /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esic-lab/data-core-ui",
3
- "version": "0.0.69",
3
+ "version": "0.0.70",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",