@economic/taco 2.57.0-charts.2 → 2.57.0-charts.4

package/dist/taco.d.ts

@@ -461,6 +461,7 @@ declare interface ChartProps<TData extends object> {
     xAxisTickFormatter?: TickFormatter;
     yAxisScale?: ScaleType | Function;
     yAxisTickFormatter?: TickFormatter;
+    yAxisWidth?: number;
 }
 
 declare type ChartValueFormatter = (value: number) => string | JSX.Element;

package/dist/taco.js

@@ -82743,15 +82743,18 @@ var AreaChart$1 = generateCategoricalChart({
   }],
   formatAxisMap: formatAxisMap2
 });
-function getAxisProps(scale2, tickFormatter, dataKey) {
+function getAxisProps(scale2, tickFormatter, dataKey, width) {
+  const isYAxis = dataKey === void 0;
   return {
     axisLine: false,
     dataKey,
     fontSize: 11,
+    interval: "preserveStartEnd",
     scale: scale2,
     tickLine: false,
-    tickMargin: 8,
-    tickFormatter
+    tickMargin: isYAxis ? 2 : 6,
+    tickFormatter,
+    width: width ?? 55
   };
 }
 function ChartContainer(props) {
@@ -82794,7 +82797,7 @@ function Legend$1(props) {
     handleToggle(item.dataKey);
   };
   const moreButton = (moreButtonText) => /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "transparent", className: "text-grey-700 !h-5 !min-h-[1.25rem] !px-1.5 text-xs" }, moreButtonText);
-  return /* @__PURE__ */ React__default.createElement(OverflowGroup, { className: "w-full gap-x-1", moreButton }, items.map((item, index2) => {
+  return /* @__PURE__ */ React__default.createElement(OverflowGroup, { className: "mt-2.5 w-full gap-x-1", moreButton }, items.map((item, index2) => {
     const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
       [`bg-${item.color}`]: !item.isHidden,
       border: item.isHidden
@@ -82984,7 +82987,7 @@ function useChart(children, options) {
       };
     });
     const shapes2 = items2.filter((item) => !hiddenItems[item.dataKey]).map((item) => {
-      const color2 = getThemeColor(item.color, "blue-500");
+      const color2 = getThemeColor(item.color, "blue-300");
       return {
         activeDot: {
           strokeWidth: 1
@@ -82992,7 +82995,7 @@ function useChart(children, options) {
         color: color2,
         dataKey: item.dataKey,
         dot: {
-          fillOpacity: 0.6
+          fillOpacity: 0.8
         },
         isAnimationActive: false,
         fill: color2,
@@ -83026,6 +83029,7 @@ function useChartDataHiddenState() {
 function AreaChart(props) {
   const {
     children,
+    className: customClassName,
     data,
     dataKey,
     showDots = false,
@@ -83041,13 +83045,19 @@ function AreaChart(props) {
     yAxisTickFormatter,
     ...attributes
   } = props;
-  const className = clsx("aspect-video", attributes.className);
+  const className = clsx("relative aspect-video", { "mb-6": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-area" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className: "h-full w-full", "data-taco": "chart-area" }, /* @__PURE__ */ React__default.createElement(
     AreaChart$1,
     {
       data,
-      margin: { bottom: 10, left: 10, right: 10, top: 10 },
+      margin: {
+        bottom: 0,
+        // ensures dots on the edges of the chart don't get cropped
+        left: 4,
+        right: 4,
+        top: 4
+      },
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
     /* @__PURE__ */ React__default.createElement(CartesianGrid, { vertical: false }),
@@ -83066,6 +83076,7 @@ function AreaChart(props) {
         key: shape.dataKey,
         ...shape,
         dot: showDots ? shape.dot : false,
+        fillOpacity: 0.4,
         stackId: stacked ? "stack" : void 0,
         type
       }
@@ -83076,11 +83087,12 @@ function Area(_) {
   return null;
 }
 AreaChart.Area = Area;
-const BAR_WIDTH = 20;
+const BAR_WIDTH = 18;
 function BarChart(props) {
   const isHorizontal = props.layout === "horizontal";
   const {
     children,
+    className: customClassName,
     data,
     dataKey,
     showLabels = false,
@@ -83092,17 +83104,24 @@ function BarChart(props) {
     xAxisTickFormatter,
     yAxisScale,
     yAxisTickFormatter,
+    yAxisWidth,
     ...attributes
   } = props;
-  const className = clsx("aspect-video", attributes.className);
+  const className = clsx("relative aspect-video", { "mb-6": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-bar" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className: "h-full w-full", "data-taco": "chart-bar" }, /* @__PURE__ */ React__default.createElement(
     BarChart$1,
     {
       data,
       barCategoryGap: "15%",
       barGap: "7.5%",
-      margin: { bottom: 10, left: isHorizontal ? -15 : 10, right: 10, top: 10 },
+      margin: {
+        bottom: 0,
+        left: 0,
+        right: 0,
+        // ensures labels on top of bars don't get cropped
+        top: isHorizontal ? 0 : 10
+      },
       layout: isHorizontal ? "vertical" : void 0,
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
@@ -83119,7 +83138,12 @@ function BarChart(props) {
     /* @__PURE__ */ React__default.createElement(
       YAxis,
       {
-        ...getAxisProps(yAxisScale, yAxisTickFormatter, isHorizontal ? dataKey : void 0),
+        ...getAxisProps(
+          yAxisScale,
+          yAxisTickFormatter,
+          isHorizontal ? dataKey : void 0,
+          yAxisWidth
+        ),
         hide: !showYAxis,
         type: isHorizontal ? "category" : void 0
       }
@@ -83130,17 +83154,17 @@ function BarChart(props) {
         key: shape.dataKey,
         ...shape,
         activeBar: { fillOpacity: 1, strokeWidth: 0 },
-        strokeWidth: 0,
         maxBarSize: BAR_WIDTH,
         radius: getRadius(index2, shapes.length, !!stacked, isHorizontal),
-        stackId: stacked ? "stack" : void 0
+        stackId: stacked ? "stack" : void 0,
+        strokeWidth: 0
       },
       showLabels ? /* @__PURE__ */ React__default.createElement(
         LabelList,
         {
           position: isHorizontal ? "insideRight" : "top",
           formatter: shape.formatter,
-          offset: isHorizontal ? 6 : 8,
+          offset: 6,
           fill: isHorizontal ? getInverseThemeColor(shape.color ?? "") : "black",
           fontSize: 11
         }
@@ -83233,7 +83257,15 @@ function Total(props) {
     const total2 = items.filter((item) => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);
     return (formatter == null ? void 0 : formatter(total2)) ?? new Intl.NumberFormat(localization.locale).format(total2);
   }, [items]);
-  return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className: "absolute-center-x flex aspect-square flex-col items-center justify-center rounded-full" }, /* @__PURE__ */ React__default.createElement("span", { className: "truncate text-2xl font-bold tabular-nums" }, total), unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 -mb-1 -mt-0.5 truncate text-xs" }, unit2) : null);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ...attributes,
+      className: "absolute-center-x flex aspect-square flex-col items-center justify-center rounded-full pt-[2px]"
+    },
+    /* @__PURE__ */ React__default.createElement("span", { className: "truncate text-2xl font-bold tabular-nums" }, total),
+    unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700 -mb-1 -mt-0.5 truncate text-xs" }, unit2) : null
+  );
 }
 const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }) => {
   const isTotalLegendSelected = selectedItem.length === data.length;
@@ -83399,6 +83431,7 @@ const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onCli
       onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
       onMouseLeave: () => setHoveredItem([]),
       outerRadius: radius - HOVER_DONUT_WIDTH,
+      paddingAngle: 2.5,
       stroke: "0",
       rootTabIndex: -1
     },
@@ -83421,6 +83454,7 @@ LegacyDonutChart.Segment = Segment$1;
 function LineChart(props) {
   const {
     children,
+    className: customClassName,
     data,
     dataKey,
     showDots = false,
@@ -83435,13 +83469,19 @@ function LineChart(props) {
     yAxisTickFormatter,
     ...attributes
   } = props;
-  const className = clsx("aspect-video", attributes.className);
+  const className = clsx("relative aspect-video", { "mb-6": showLegend }, customClassName);
   const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-area" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { ...attributes, className: "h-full w-full", "data-taco": "chart-line" }, /* @__PURE__ */ React__default.createElement(
     LineChart$1,
     {
       data,
-      margin: { bottom: 10, left: 10, right: 10, top: 10 }
+      margin: {
+        bottom: 0,
+        // ensures dots on the edges of the chart don't get cropped
+        left: 4,
+        right: 4,
+        top: 4
+      }
     },
     /* @__PURE__ */ React__default.createElement(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }),