@esic-lab/data-core-ui 0.0.71 → 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 +4 -2
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +57 -62
  4. package/dist/index.mjs +57 -62
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -259,6 +259,7 @@ declare function InputField({ value, onChange, placeholder, label, required, dis
259
259
  interface InputFieldNumberProps {
260
260
  value: number | string | null;
261
261
  onChange: (value: number | string | null) => void;
262
+ onBlur?: (e: HTMLInputElement) => void;
262
263
  placeholder?: string;
263
264
  label?: string;
264
265
  required?: boolean;
@@ -282,7 +283,7 @@ interface InputFieldNumberProps {
282
283
  decimalScale?: number;
283
284
  format?: "number" | "currency";
284
285
  }
285
- declare function InputFieldNumber({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
286
+ declare function InputFieldNumber({ value, onChange, onBlur, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
286
287
 
287
288
  interface DatePickerBasicProps {
288
289
  value: Date | null;
@@ -644,9 +645,10 @@ type Props = {
644
645
  yLabel?: string;
645
646
  xLabel?: string;
646
647
  modeLabel?: "line" | "45";
648
+ layout?: "vertical" | "horizontal";
647
649
  colorPalette?: string[];
648
650
  };
649
- 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;
650
652
 
651
653
  interface PieChartProps {
652
654
  title?: string;
package/dist/index.d.ts CHANGED
@@ -259,6 +259,7 @@ declare function InputField({ value, onChange, placeholder, label, required, dis
259
259
  interface InputFieldNumberProps {
260
260
  value: number | string | null;
261
261
  onChange: (value: number | string | null) => void;
262
+ onBlur?: (e: HTMLInputElement) => void;
262
263
  placeholder?: string;
263
264
  label?: string;
264
265
  required?: boolean;
@@ -282,7 +283,7 @@ interface InputFieldNumberProps {
282
283
  decimalScale?: number;
283
284
  format?: "number" | "currency";
284
285
  }
285
- declare function InputFieldNumber({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
286
+ declare function InputFieldNumber({ value, onChange, onBlur, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, decimal, decimalScale, format, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
286
287
 
287
288
  interface DatePickerBasicProps {
288
289
  value: Date | null;
@@ -644,9 +645,10 @@ type Props = {
644
645
  yLabel?: string;
645
646
  xLabel?: string;
646
647
  modeLabel?: "line" | "45";
648
+ layout?: "vertical" | "horizontal";
647
649
  colorPalette?: string[];
648
650
  };
649
- 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;
650
652
 
651
653
  interface PieChartProps {
652
654
  title?: string;
package/dist/index.js CHANGED
@@ -1360,6 +1360,7 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
1360
1360
  function InputFieldNumber({
1361
1361
  value,
1362
1362
  onChange,
1363
+ onBlur,
1363
1364
  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1364
1365
  label,
1365
1366
  required,
@@ -1418,6 +1419,7 @@ function InputFieldNumber({
1418
1419
  {
1419
1420
  value: value ?? void 0,
1420
1421
  onChange: (val) => onChange(val),
1422
+ onBlur: (e) => onBlur?.(e.target),
1421
1423
  placeholder,
1422
1424
  disabled,
1423
1425
  className: `body-1 !w-full ${className ?? ""}`,
@@ -1434,16 +1436,7 @@ function InputFieldNumber({
1434
1436
  precision: decimal ? safeScale : 0,
1435
1437
  inputMode: decimal ? "decimal" : "numeric",
1436
1438
  onKeyDown: (e) => {
1437
- const allowed = [
1438
- "Backspace",
1439
- "Delete",
1440
- "ArrowLeft",
1441
- "ArrowRight",
1442
- "Tab",
1443
- "Enter",
1444
- "Home",
1445
- "End"
1446
- ];
1439
+ const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"];
1447
1440
  if (allowed.includes(e.key)) return;
1448
1441
  if (e.ctrlKey || e.metaKey) return;
1449
1442
  if (!decimal) {
@@ -4709,7 +4702,8 @@ var BarChart = ({
4709
4702
  yLabel,
4710
4703
  xLabel,
4711
4704
  modeLabel,
4712
- colorPalette = defaultColorPalette
4705
+ colorPalette = defaultColorPalette,
4706
+ layout
4713
4707
  }) => {
4714
4708
  const svgRef = (0, import_react21.useRef)(null);
4715
4709
  const gRef = (0, import_react21.useRef)(null);
@@ -4741,69 +4735,69 @@ var BarChart = ({
4741
4735
  const innerW = width - margin.left - margin.right;
4742
4736
  const innerH = height - margin.top - margin.bottom;
4743
4737
  svg.attr("width", width).attr("height", height);
4744
- const x = d3.scaleBand().domain(xDomain).range([0, innerW]).padding(0.2);
4745
- const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
4746
- const xAxis = d3.axisBottom(x).tickSizeOuter(0).tickSize(0).tickFormat((d) => d);
4747
- const yAxis = d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"));
4748
- const grid = d3.axisLeft(y).ticks(5).tickSize(-innerW).scale(y);
4749
- const gridG = svg.append("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px");
4750
- gridG.selectAll("path").remove();
4751
- const barsG = svg.append("g").attr("class", "bars");
4752
- 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(
4753
- (g2) => g2.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1)
4754
- // keep faint
4755
- );
4756
- svg.select(".grid").lower();
4757
- 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");
4758
- const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4759
- if (modeLabel === "45") {
4760
- labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4761
- } else if (modeLabel === "line") {
4762
- 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
+ }
4763
4762
  } else {
4764
- labels.style("text-anchor", "middle").attr("dy", "1.5em");
4763
+ xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle");
4765
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();
4766
4773
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
4767
- (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),
4768
4775
  (update) => update.text((d) => d)
4769
4776
  );
4770
4777
  xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
4771
- (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),
4772
- (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)
4773
4780
  );
4774
- const t = d3.transition().duration(400);
4781
+ const t = svg.transition().duration(400);
4775
4782
  const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
4776
4783
  bars.join(
4777
- // (enter) =>
4778
- // enter
4779
- // .append("rect")
4780
- // .attr("class", "bar")
4781
- // .attr("x", (d) => margin.left)
4782
- // .attr("width", x.bandwidth())
4783
- // .attr("y", () => margin.top + y(0))
4784
- // .attr("height", () => innerH - y(0))
4785
- // .attr("rx", 5) // rounded corners
4786
- // .attr("ry", 5) // rounded corners
4787
- // .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
4788
- // .append("title")
4789
- // .text((d) => `${d.x}: ${d.y}`)
4790
- // .merge(bars) // merge the existing bars after joining
4791
- // .attr("width", x.bandwidth())
4792
- // .attr("y", (d) => y(d.y))
4793
- // .attr("height", (d) => innerH - y(d.y))
4794
- // .call((enter) => enter.raise()), // Bring the new bars to the front
4795
4784
  (enter) => {
4796
- 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]);
4797
- rects.append("title").text((d) => `${d.x}: ${d.y}`);
4798
- 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());
4799
4793
  },
4800
- (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]),
4801
- // Update color on update
4802
- (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()
4803
4796
  );
4804
- g.selectAll("text.bar-label").data(data).join(
4805
- (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),
4806
- (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),
4807
4801
  (exit) => exit.remove()
4808
4802
  );
4809
4803
  };
@@ -4811,6 +4805,7 @@ var BarChart = ({
4811
4805
  render();
4812
4806
  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
4813
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" }),
4814
4809
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4815
4810
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),
4816
4811
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: yAxisRef })
package/dist/index.mjs CHANGED
@@ -1294,6 +1294,7 @@ import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
1294
1294
  function InputFieldNumber({
1295
1295
  value,
1296
1296
  onChange,
1297
+ onBlur,
1297
1298
  placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
1298
1299
  label,
1299
1300
  required,
@@ -1352,6 +1353,7 @@ function InputFieldNumber({
1352
1353
  {
1353
1354
  value: value ?? void 0,
1354
1355
  onChange: (val) => onChange(val),
1356
+ onBlur: (e) => onBlur?.(e.target),
1355
1357
  placeholder,
1356
1358
  disabled,
1357
1359
  className: `body-1 !w-full ${className ?? ""}`,
@@ -1368,16 +1370,7 @@ function InputFieldNumber({
1368
1370
  precision: decimal ? safeScale : 0,
1369
1371
  inputMode: decimal ? "decimal" : "numeric",
1370
1372
  onKeyDown: (e) => {
1371
- const allowed = [
1372
- "Backspace",
1373
- "Delete",
1374
- "ArrowLeft",
1375
- "ArrowRight",
1376
- "Tab",
1377
- "Enter",
1378
- "Home",
1379
- "End"
1380
- ];
1373
+ const allowed = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab", "Enter", "Home", "End"];
1381
1374
  if (allowed.includes(e.key)) return;
1382
1375
  if (e.ctrlKey || e.metaKey) return;
1383
1376
  if (!decimal) {
@@ -4643,7 +4636,8 @@ var BarChart = ({
4643
4636
  yLabel,
4644
4637
  xLabel,
4645
4638
  modeLabel,
4646
- colorPalette = defaultColorPalette
4639
+ colorPalette = defaultColorPalette,
4640
+ layout
4647
4641
  }) => {
4648
4642
  const svgRef = useRef8(null);
4649
4643
  const gRef = useRef8(null);
@@ -4675,69 +4669,69 @@ var BarChart = ({
4675
4669
  const innerW = width - margin.left - margin.right;
4676
4670
  const innerH = height - margin.top - margin.bottom;
4677
4671
  svg.attr("width", width).attr("height", height);
4678
- const x = d3.scaleBand().domain(xDomain).range([0, innerW]).padding(0.2);
4679
- const y = d3.scaleLinear().domain(yDomain).nice().range([innerH, 0]);
4680
- const xAxis = d3.axisBottom(x).tickSizeOuter(0).tickSize(0).tickFormat((d) => d);
4681
- const yAxis = d3.axisLeft(y).ticks(5).tickFormat(d3.format("~s"));
4682
- const grid = d3.axisLeft(y).ticks(5).tickSize(-innerW).scale(y);
4683
- const gridG = svg.append("g").attr("class", "grid").attr("transform", `translate(${margin.left}, ${margin.top})`).call(grid).style("font-size", "14px");
4684
- gridG.selectAll("path").remove();
4685
- const barsG = svg.append("g").attr("class", "bars");
4686
- 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(
4687
- (g2) => g2.selectAll("line").style("stroke", "gray").style("stroke-opacity", 0.1)
4688
- // keep faint
4689
- );
4690
- svg.select(".grid").lower();
4691
- 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");
4692
- const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
4693
- if (modeLabel === "45") {
4694
- labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
4695
- } else if (modeLabel === "line") {
4696
- 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
+ }
4697
4696
  } else {
4698
- labels.style("text-anchor", "middle").attr("dy", "1.5em");
4697
+ xTickTexts.attr("transform", "rotate(0)").style("text-anchor", "middle");
4699
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();
4700
4707
  yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
4701
- (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),
4702
4709
  (update) => update.text((d) => d)
4703
4710
  );
4704
4711
  xAxisG.selectAll(".x-axis-label").data(xLabel ? [xLabel] : []).join(
4705
- (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),
4706
- (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)
4707
4714
  );
4708
- const t = d3.transition().duration(400);
4715
+ const t = svg.transition().duration(400);
4709
4716
  const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
4710
4717
  bars.join(
4711
- // (enter) =>
4712
- // enter
4713
- // .append("rect")
4714
- // .attr("class", "bar")
4715
- // .attr("x", (d) => margin.left)
4716
- // .attr("width", x.bandwidth())
4717
- // .attr("y", () => margin.top + y(0))
4718
- // .attr("height", () => innerH - y(0))
4719
- // .attr("rx", 5) // rounded corners
4720
- // .attr("ry", 5) // rounded corners
4721
- // .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
4722
- // .append("title")
4723
- // .text((d) => `${d.x}: ${d.y}`)
4724
- // .merge(bars) // merge the existing bars after joining
4725
- // .attr("width", x.bandwidth())
4726
- // .attr("y", (d) => y(d.y))
4727
- // .attr("height", (d) => innerH - y(d.y))
4728
- // .call((enter) => enter.raise()), // Bring the new bars to the front
4729
4718
  (enter) => {
4730
- 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]);
4731
- rects.append("title").text((d) => `${d.x}: ${d.y}`);
4732
- 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());
4733
4727
  },
4734
- (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]),
4735
- // Update color on update
4736
- (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()
4737
4730
  );
4738
- g.selectAll("text.bar-label").data(data).join(
4739
- (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),
4740
- (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),
4741
4735
  (exit) => exit.remove()
4742
4736
  );
4743
4737
  };
@@ -4745,6 +4739,7 @@ var BarChart = ({
4745
4739
  render();
4746
4740
  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
4747
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" }),
4748
4743
  /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
4749
4744
  /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),
4750
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.71",
3
+ "version": "0.0.73",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",