@economic/taco 2.57.0-charts.10 → 2.57.0-charts.12

package/dist/taco.css

@@ -1567,9 +1567,20 @@ table[data-taco^='table'] tr[data-row-create] {
     @apply h-full;
 }
 
+[data-taco='card-content'] > [data-taco='chart-wrapper'] {
+    container: wrapper / inline-size;
+}
+
 [data-taco='card-content'] > [data-taco='chart-wrapper'] [data-taco='chart-donut']:not([class*='w-']),
 [data-taco='card-content'] > [data-taco='chart-wrapper'] [data-taco='chart-pie']:not([class*='w-']) {
-    @apply aspect-square w-2/3;
+    @apply aspect-square w-3/5;
+}
+
+@container wrapper (width > 400px) {
+    [data-taco='card-content'] > [data-taco='chart-wrapper'] [data-taco='chart-donut']:not([class*='w-']),
+    [data-taco='card-content'] > [data-taco='chart-wrapper'] [data-taco='chart-pie']:not([class*='w-']) {
+        @apply w-2/3;
+    }
 }
 
 .recharts-cartesian-axis line,
@@ -1598,13 +1609,9 @@ table[data-taco^='table'] tr[data-row-create] {
     container: wrapper / inline-size;
 }
 
-[data-taco='chart-donut-total'] span:first-child {
-    @apply text-xl;
-}
-
-@container wrapper (width < 130px) {
+@container wrapper (width > 130px) {
     [data-taco='chart-donut-total'] span:first-child {
-        @apply text-lg;
+        @apply text-xl;
     }
 }
 
@@ -1613,3 +1620,7 @@ table[data-taco^='table'] tr[data-row-create] {
         @apply text-base;
     }
 }
+
+[data-taco='chart-donut']:has([data-taco='chart-tooltip']) {
+    @apply relative z-10;
+}

package/dist/taco.d.ts

@@ -163,8 +163,17 @@ export declare interface AreaChartAreaProps<TData extends object> extends ChartC
 }
 
 export declare interface AreaChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+    /** Show dots for each data point
+     * @default false
+     */
     showDots?: boolean;
+    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space
+     * @default false
+     */
     stacked?: boolean | 'expand';
+    /** Interpolation type of the line
+     * @default natural
+     */
     type?: CurveType;
 }
 
@@ -240,8 +249,17 @@ export declare interface BarChartBarProps<TData extends object> extends ChartChi
 }
 
 export declare interface BarChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
-    layout?: 'horizontal' | 'vertical';
+    /** Orientation of the bars
+     * @default false
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Show bar values as labels next to/inside the bar
+     * @default vertical
+     */
     showLabels?: boolean;
+    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space
+     * @default false
+     */
     stacked?: boolean | 'expand';
 }
 
@@ -451,16 +469,39 @@ declare interface ChartChildProps<TData extends object> {
 }
 
 declare interface ChartProps<TData extends object> {
+    /** Data to show in chart, should be an array of objects */
     data: TData[];
+    /** Key in data to use for X Axis  */
     dataKey: keyof TData;
+    /** Show a legend below the chart, hidden by default
+     * @default false
+     */
     showLegend?: boolean;
+    /** Show the X Axis, shown by default
+     * @default true
+     */
     showXAxis?: boolean;
+    /** Show the Y Axis, shown by default
+     * @default false
+     */
     showYAxis?: boolean;
+    /** Add a title to the Tooltip show when hovering data */
     tooltipTitle?: TooltipTitle;
+    /**
+     * @default auto
+     */
     xAxisScale?: ScaleType | Function;
+    /** Format the value shown for each tick on the X Axis */
     xAxisTickFormatter?: TickFormatter;
+    /**
+     * @default auto
+     */
     yAxisScale?: ScaleType | Function;
+    /** Format the value shown for each tick on the Y Axis */
     yAxisTickFormatter?: TickFormatter;
+    /** Adjust the width of the Y Axis to reduce whitespace
+     * @default 55
+     */
     yAxisWidth?: number;
 }
 
@@ -1097,6 +1138,9 @@ export declare namespace DonutChart {
 }
 
 export declare interface DonutChartProps<TData extends object> extends Omit<PieChartProps<TData>, 'showLabels'> {
+    /** Show total value in center of Donut
+     * @default false
+     */
     showTotal?: boolean;
 }
 
@@ -1884,7 +1928,13 @@ export declare interface LineChartAreaProps<TData extends object> extends ChartC
 }
 
 export declare interface LineChartProps<TData extends object> extends ChartProps<TData>, default_2.ComponentProps<'div'> {
+    /** Show dots for each data point
+     * @default false
+     */
     showDots?: boolean;
+    /** Interpolation type of the line
+     * @default natural
+     */
     type?: CurveType;
 }
 
@@ -2478,8 +2528,15 @@ export declare namespace PieChart {
 }
 
 export declare interface PieChartProps<TData extends object> extends Pick<ChartProps<TData>, 'showLegend' | 'tooltipTitle'>, default_2.ComponentProps<'div'> {
+    /** Format the displayed value
+     * @default Intl.NumberFormat
+     */
     formatter?: ChartValueFormatter;
+    /** Show labels inside each segment
+     * @default false
+     */
     showLabels?: boolean;
+    /** Text representation of data, used in tooltips and totals */
     unit?: string;
 }
 

package/dist/taco.js

@@ -82772,11 +82772,11 @@ function ChartWrapper(props) {
 function Tooltip(props) {
   const { active, payload = [], style, title } = props;
   if (active && payload.length) {
-    return /* @__PURE__ */ React__default.createElement("div", { className: "border-grey-300 z-20 flex flex-col gap-y-1 rounded-md border bg-white px-2 py-1.5 text-xs shadow-sm" }, title ? /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React__default.createElement("dl", { className: "m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5", style }, payload.map((entry, index2) => {
+    return /* @__PURE__ */ React__default.createElement("div", { className: "border-grey-300 z-20 z-[999] flex flex-col gap-y-1 rounded-md border bg-white px-2 py-1.5 text-xs shadow-sm" }, title ? /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React__default.createElement("dl", { className: "m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5", style }, payload.map((entry, index2) => {
       const color2 = entry.color ?? entry.payload.color;
       const formatter = entry.formatter ?? entry.payload.formatter;
       const unit2 = entry.unit ?? entry.payload.unit;
-      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React__default.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal" }, /* @__PURE__ */ React__default.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React__default.createElement("dd", { className: "mb-0 text-right font-bold tabular-nums text-black" }, (formatter == null ? void 0 : formatter(entry.value ?? "", entry.name ?? "", entry, index2, entry.payload)) ?? entry.value, " ", unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700" }, unit2) : null));
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React__default.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal", "data-taco": "chart-tooltip" }, /* @__PURE__ */ React__default.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React__default.createElement("dd", { className: "mb-0 text-right font-bold tabular-nums text-black" }, (formatter == null ? void 0 : formatter(entry.value ?? "", entry.name ?? "", entry, index2, entry.payload)) ?? entry.value, " ", unit2 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-grey-700" }, unit2) : null));
     })));
   }
   return null;
@@ -83100,7 +83100,7 @@ function Area(_) {
 AreaChart.Area = Area;
 const BAR_WIDTH = 18;
 function BarChart(props) {
-  const isHorizontal = props.layout === "horizontal";
+  const isHorizontal = props.orientation === "horizontal";
   const {
     children,
     className: customClassName,
@@ -83111,6 +83111,7 @@ function BarChart(props) {
     showXAxis = !isHorizontal,
     showYAxis = isHorizontal,
     stacked = false,
+    tooltipTitle,
     xAxisScale,
     xAxisTickFormatter,
     yAxisScale,
@@ -83137,7 +83138,7 @@ function BarChart(props) {
       stackOffset: stacked === "expand" ? "expand" : void 0
     },
     /* @__PURE__ */ React__default.createElement(CartesianGrid, { horizontal: !isHorizontal, vertical: false }),
-    /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, null) }),
+    /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }),
     /* @__PURE__ */ React__default.createElement(
       XAxis,
       {
@@ -83248,8 +83249,7 @@ function DonutChart(props) {
     unit: unit2
   });
   const className = clsx("aspect-square", attributes.className);
-  console.log("radius", radius);
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React__default.createElement(PieChart$1, null, /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip$3, { title: tooltipTitle }) }), /* @__PURE__ */ React__default.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showTotal ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React__default.createElement(PieChart$1, null, /* @__PURE__ */ React__default.createElement(Tooltip$1, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }), /* @__PURE__ */ React__default.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showTotal ? /* @__PURE__ */ React__default.createElement(
     Total,
     {
       formatter,
@@ -83277,7 +83277,7 @@ function Total(props) {
       className: "absolute-center flex aspect-video flex-col items-center justify-center overflow-hidden rounded-full",
       "data-taco": "chart-donut-total"
     },
-    /* @__PURE__ */ React__default.createElement(Tooltip$3, { title: total }, /* @__PURE__ */ React__default.createElement("span", { className: "w-full truncate text-center font-bold tabular-nums" }, total)),
+    /* @__PURE__ */ React__default.createElement(Tooltip$3, { title: total }, /* @__PURE__ */ React__default.createElement("span", { className: "w-full truncate text-center text-lg 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
   );
 }