@multiplatform.one/components 7.7.4 → 7.8.0

package/dist/cjs/charts/LineChart.cjs

@@ -28,6 +28,7 @@ __export(LineChart_exports, {
 module.exports = __toCommonJS(LineChart_exports);
 var import_i18n = require("../shared/i18n.cjs");
 var import_Axis = require("./Axis.cjs");
+var import_ChartDataView = require("./ChartDataView.cjs");
 var import_ChartSurface = require("./ChartSurface.cjs");
 var import_accessibility = require("./accessibility.cjs");
 var import_composeChart = require("./composeChart.cjs");
@@ -74,74 +75,87 @@ function LineChart({
     formatValue: valueFormatter
   });
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: size => {
-      const domain = (0, import_math.valueDomain)(data.map(datum => datum.value));
-      const marginScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [0, 1]
-      });
-      const tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
-      const plot = (0, import_composeChart.computeCartesianPlot)(size, {
-        showXAxis,
-        showYAxis,
-        yTickLabels: tickValues.map(value => format(value)),
-        fontSize: labelFontSize
-      });
-      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-      const xScale = (0, import_math.createPointScale)({
-        domain: data.map(datum => datum.label),
-        range: [plot.x, plot.x + plot.width],
-        padding: 0.5
-      });
-      const yScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [plot.y + plot.height, plot.y]
-      });
-      const points = data.map(datum => ({
-        x: xScale(datum.label) ?? plot.x,
-        y: yScale(datum.value)
-      }));
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: value => format(value),
-          showLabels: showYAxis,
-          showGrid
-        }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
-          points,
-          baseline: plot.y + plot.height,
-          color: stroke,
-          opacity: areaOpacity,
-          curve
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
-          data,
-          points,
-          color: stroke,
-          strokeWidth,
-          curve,
-          showPoints,
-          bounds: size,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
-            datum,
-            formatValue: valueFormatter
-          }) : void 0
-        }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: (0, import_composeChart.thinCategories)(data.map(datum => datum.label), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: size => {
+        const domain = (0, import_math.valueDomain)(data.map(datum => datum.value));
+        const marginScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [0, 1]
+        });
+        const tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
+        const plot = (0, import_composeChart.computeCartesianPlot)(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(value => format(value)),
+          fontSize: labelFontSize
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        const xScale = (0, import_math.createPointScale)({
+          domain: data.map(datum => datum.label),
+          range: [plot.x, plot.x + plot.width],
+          padding: 0.5
+        });
+        const yScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [plot.y + plot.height, plot.y]
+        });
+        const points = data.map(datum => ({
+          x: xScale(datum.label) ?? plot.x,
+          y: yScale(datum.value)
+        }));
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: value => format(value),
+            showLabels: showYAxis,
+            showGrid
+          }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
+            points,
+            baseline: plot.y + plot.height,
+            color: stroke,
+            opacity: areaOpacity,
+            curve
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
+            data,
+            points,
+            color: stroke,
+            strokeWidth,
+            curve,
+            showPoints,
+            bounds: size,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
+              datum,
+              formatValue: valueFormatter
+            }) : void 0
+          }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: (0, import_composeChart.thinCategories)(data.map(datum => datum.label), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 function AreaChart(props) {

package/dist/cjs/charts/LineChart.native.js

@@ -31,6 +31,7 @@ module.exports = __toCommonJS(LineChart_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_i18n = require("../shared/i18n.native.js");
 var import_Axis = require("./Axis.native.js");
+var import_ChartDataView = require("./ChartDataView.native.js");
 var import_ChartSurface = require("./ChartSurface.native.js");
 var import_accessibility = require("./accessibility.native.js");
 var import_composeChart = require("./composeChart.native.js");
@@ -77,89 +78,102 @@ function LineChart(param) {
     formatValue: valueFormatter
   });
   var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: function children(size) {
-      var domain = (0, import_math.valueDomain)(data.map(function (datum) {
-        return datum.value;
-      }));
-      var marginScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [0, 1]
-      });
-      var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
-      var plot = (0, import_composeChart.computeCartesianPlot)(size, {
-        showXAxis,
-        showYAxis,
-        yTickLabels: tickValues.map(function (value) {
-          return format(value);
-        }),
-        fontSize: labelFontSize
-      });
-      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-      var xScale = (0, import_math.createPointScale)({
-        domain: data.map(function (datum) {
-          return datum.label;
-        }),
-        range: [plot.x, plot.x + plot.width],
-        padding: 0.5
-      });
-      var yScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [plot.y + plot.height, plot.y]
-      });
-      var points = data.map(function (datum) {
-        var _xScale;
-        return {
-          x: (_xScale = xScale(datum.label)) !== null && _xScale !== void 0 ? _xScale : plot.x,
-          y: yScale(datum.value)
-        };
-      });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: function tickFormat(value) {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: function children(size) {
+        var domain = (0, import_math.valueDomain)(data.map(function (datum) {
+          return datum.value;
+        }));
+        var marginScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [0, 1]
+        });
+        var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
+        var plot = (0, import_composeChart.computeCartesianPlot)(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(function (value) {
             return format(value);
-          },
-          showLabels: showYAxis,
-          showGrid
-        }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
-          points,
-          baseline: plot.y + plot.height,
-          color: stroke,
-          opacity: areaOpacity,
-          curve
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
-          data,
-          points,
-          color: stroke,
-          strokeWidth,
-          curve,
-          showPoints,
-          bounds: size,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? function (datum) {
-            return (0, import_accessibility.describeDatum)({
-              datum,
-              formatValue: valueFormatter
-            });
-          } : void 0
-        }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: (0, import_composeChart.thinCategories)(data.map(function (datum) {
+          }),
+          fontSize: labelFontSize
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        var xScale = (0, import_math.createPointScale)({
+          domain: data.map(function (datum) {
             return datum.label;
-          }), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+          }),
+          range: [plot.x, plot.x + plot.width],
+          padding: 0.5
+        });
+        var yScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [plot.y + plot.height, plot.y]
+        });
+        var points = data.map(function (datum) {
+          var _xScale;
+          return {
+            x: (_xScale = xScale(datum.label)) !== null && _xScale !== void 0 ? _xScale : plot.x,
+            y: yScale(datum.value)
+          };
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: function tickFormat(value) {
+              return format(value);
+            },
+            showLabels: showYAxis,
+            showGrid
+          }) : null, showArea ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.AreaSeries, {
+            points,
+            baseline: plot.y + plot.height,
+            color: stroke,
+            opacity: areaOpacity,
+            curve
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.LineSeries, {
+            data,
+            points,
+            color: stroke,
+            strokeWidth,
+            curve,
+            showPoints,
+            bounds: size,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? function (datum) {
+              return (0, import_accessibility.describeDatum)({
+                datum,
+                formatValue: valueFormatter
+              });
+            } : void 0
+          }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: (0, import_composeChart.thinCategories)(data.map(function (datum) {
+              return datum.label;
+            }), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 function AreaChart(props) {

package/dist/cjs/charts/LineChart.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","LineChart_exports","AreaChart","LineChart","module","exports","import_jsx_runtime","require","import_i18n","import_Axis","import_ChartSurface","import_accessibility","import_composeChart","import_math","import_series","import_useChartTheme","param","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","useTranslation","palette","labelFontSize","useChartTheme","stroke","single","format","formatChartValue","ariaLabel","describeChart","formatValue","interactive","Boolean","jsx","ChartSurface","children","size","domain","valueDomain","map","datum","marginScale","createLinearScale","range","tickValues","getLinearTicks","plot","computeCartesianPlot","yTickLabels","fontSize","length","xScale","createPointScale","x","padding","yScale","y","points","_xScale","jsxs","Fragment","YAxis","scale","ticks","tickFormat","showLabels","AreaSeries","baseline","opacity","LineSeries","bounds","datumLabel","describeDatum","XAxis","thinCategories","props"],"sources":["LineChart.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar LineChart_exports = {};\n__export(LineChart_exports, {\n  AreaChart: () => AreaChart,\n  LineChart: () => LineChart\n});\nmodule.exports = __toCommonJS(LineChart_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_i18n = require(\"../shared/i18n\");\nvar import_Axis = require(\"./Axis\");\nvar import_ChartSurface = require(\"./ChartSurface\");\nvar import_accessibility = require(\"./accessibility\");\nvar import_composeChart = require(\"./composeChart\");\nvar import_math = require(\"./math\");\nvar import_series = require(\"./series\");\nvar import_useChartTheme = require(\"./useChartTheme\");\nfunction LineChart(param) {\n  var { data, height = 200, width, color, showArea = false, areaOpacity, curve = \"linear\", showPoints = true, strokeWidth = 2, showXAxis = true, showYAxis = true, showGrid = true, yTicks = 4, valueFormatter, title, label, typeLabel, onDatumPress, onDatumHoverIn, onDatumHoverOut, ...stackProps } = param;\n  var { t } = (0, import_i18n.useTranslation)();\n  var { palette, labelFontSize } = (0, import_useChartTheme.useChartTheme)();\n  var stroke = color !== null && color !== void 0 ? color : palette.single;\n  var format = valueFormatter !== null && valueFormatter !== void 0 ? valueFormatter : import_math.formatChartValue;\n  var ariaLabel = label !== null && label !== void 0 ? label : (0, import_accessibility.describeChart)({\n    typeLabel: typeLabel !== null && typeLabel !== void 0 ? typeLabel : showArea ? t(\"Area chart\") : t(\"Line chart\"),\n    title,\n    data,\n    formatValue: valueFormatter\n  });\n  var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {\n    label: ariaLabel,\n    height,\n    width,\n    ...stackProps,\n    children: function children(size) {\n      var domain = (0, import_math.valueDomain)(data.map(function(datum) {\n        return datum.value;\n      }));\n      var marginScale = (0, import_math.createLinearScale)({\n        domain,\n        range: [\n          0,\n          1\n        ]\n      });\n      var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);\n      var plot = (0, import_composeChart.computeCartesianPlot)(size, {\n        showXAxis,\n        showYAxis,\n        yTickLabels: tickValues.map(function(value) {\n          return format(value);\n        }),\n        fontSize: labelFontSize\n      });\n      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;\n      var xScale = (0, import_math.createPointScale)({\n        domain: data.map(function(datum) {\n          return datum.label;\n        }),\n        range: [\n          plot.x,\n          plot.x + plot.width\n        ],\n        padding: 0.5\n      });\n      var yScale = (0, import_math.createLinearScale)({\n        domain,\n        range: [\n          plot.y + plot.height,\n          plot.y\n        ]\n      });\n      var points = data.map(function(datum) {\n        var _xScale;\n        return {\n          x: (_xScale = xScale(datum.label)) !== null && _xScale !== void 0 ? _xScale : plot.x,\n          y: yScale(datum.value)\n        };\n      });\n      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {\n        children: [\n          showYAxis || showGrid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Axis.YAxis, {\n            plot,\n            scale: yScale,\n            ticks: yTicks,\n            tickFormat: function tickFormat(value) {\n              return format(value);\n            },\n            showLabels: showYAxis,\n            showGrid\n          }) : null,\n          showArea ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.AreaSeries, {\n            points,\n            baseline: plot.y + plot.height,\n            color: stroke,\n            opacity: areaOpacity,\n            curve\n          }) : null,\n          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.LineSeries, {\n            data,\n            points,\n            color: stroke,\n            strokeWidth,\n            curve,\n            showPoints,\n            bounds: size,\n            onDatumPress,\n            onDatumHoverIn,\n            onDatumHoverOut,\n            datumLabel: interactive ? function(datum) {\n              return (0, import_accessibility.describeDatum)({\n                datum,\n                formatValue: valueFormatter\n              });\n            } : void 0\n          }),\n          showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Axis.XAxis, {\n            plot,\n            scale: xScale,\n            tickValues: (0, import_composeChart.thinCategories)(data.map(function(datum) {\n              return datum.label;\n            }), plot.width, labelFontSize)\n          }) : null\n        ]\n      });\n    }\n  });\n}\nfunction AreaChart(props) {\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, {\n    showArea: true,\n    ...props\n  });\n}\n//# sourceMappingURL=LineChart.js.map\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","LineChart_exports","__export","AreaChart","LineChart","module","exports","import_jsx_runtime","require","import_i18n","import_Axis","import_ChartDataView","import_ChartSurface","import_accessibility","import_composeChart","import_math","import_series","import_useChartTheme","param","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","useTranslation","palette","labelFontSize","useChartTheme","stroke","single","format","formatChartValue","ariaLabel","describeChart","formatValue","interactive","Boolean","jsx","ChartDataFrame","children","ChartSurface","proof","kind","separated","datumText","datumValues","chartDatumText","datumCount","length","size","domain","valueDomain","map","datum","marginScale","createLinearScale","range","tickValues","getLinearTicks","plot","computeCartesianPlot","yTickLabels","fontSize","xScale","createPointScale","x","padding","yScale","y","points","_xScale","jsxs","Fragment","YAxis","scale","ticks","tickFormat","showLabels","AreaSeries","baseline","opacity","LineSeries","bounds","datumLabel","describeDatum","XAxis","thinCategories","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/charts/PieChart.cjs

@@ -29,11 +29,13 @@ var import_theme = require("@multiplatform.one/theme");
 var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
+var import_ChartDataView = require("./ChartDataView.cjs");
 var import_ChartSurface = require("./ChartSurface.cjs");
 var import_accessibility = require("./accessibility.cjs");
 var import_composeChart = require("./composeChart.cjs");
 var import_math = require("./math.cjs");
 var import_series = require("./series.cjs");
+var import_svg = require("./svg.cjs");
 var import_useChartTheme = require("./useChartTheme.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const DEFAULT_DONUT_RATIO = 0.55;
@@ -41,7 +43,7 @@ function PieChart({
   data,
   height = 200,
   donut = false,
-  padAngle = 0,
+  padAngle,
   colors,
   showLegend = true,
   valueFormatter,
@@ -76,78 +78,101 @@ function PieChart({
   });
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
   const innerRatio = donut === false ? 0 : donut === true ? DEFAULT_DONUT_RATIO : Math.min(Math.max(donut, 0), 0.9);
-  return (
-    // LC-10: `flexShrink` + `minWidth 0` let a row parent (e.g. Card.Footer)
-    // constrain the chart below its intrinsic width — the wrap then stacks
-    // the legend under the pie instead of painting past the frame.
-    /* @__PURE__ */
-    (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      flexWrap: "wrap",
-      alignItems: "center",
-      flexShrink: 1,
-      minWidth: 0,
-      ...knobProps.gap,
-      ...stackProps,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        width: height,
+  const chart =
+  // LC-10: `flexShrink` + `minWidth 0` let a row parent (e.g. Card.Footer)
+  // constrain the chart below its intrinsic width — the wrap then stacks
+  // the legend under the pie instead of painting past the frame.
+  /* @__PURE__ */
+  (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    flexShrink: 1,
+    minWidth: 0,
+    ...knobProps.gap,
+    ...(0, import_svg.chartWebProps)({
+      "data-mpo-chart-owner": "true"
+    }),
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      width: height,
+      height,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+        label: ariaLabel,
+        proof: {
+          kind: innerRatio > 0 ? "donut" : "pie",
+          separated: padAngle === void 0 ? (0, import_math.canMaskPieSlices)((0, import_math.pieSlices)(data), height / 2 * innerRatio, height / 2) : padAngle > 0,
+          datumText: showLegend,
+          datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+          datumCount: data.length
+        },
         height,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-          label: ariaLabel,
-          height,
-          width: height,
-          children: size => {
-            const outerRadius = Math.min(size.width, size.height) / 2;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.PieSeries, {
-              data,
-              cx: size.width / 2,
-              cy: size.height / 2,
-              outerRadius,
-              innerRadius: outerRadius * innerRatio,
-              padAngle,
-              fills,
-              onDatumPress,
-              onDatumHoverIn,
-              onDatumHoverOut,
-              datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
-                datum,
-                total,
-                formatValue: valueFormatter
-              }) : void 0
-            });
-          }
-        })
-      }), showLegend ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        flex: 1,
-        minWidth: 140,
-        justifyContent: "center",
+        width: height,
+        children: size => {
+          const outerRadius = Math.min(size.width, size.height) / 2;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.PieSeries, {
+            data,
+            cx: size.width / 2,
+            cy: size.height / 2,
+            outerRadius,
+            innerRadius: outerRadius * innerRatio,
+            padAngle,
+            fills,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? datum => (0, import_accessibility.describeDatum)({
+              datum,
+              total,
+              formatValue: valueFormatter
+            }) : void 0
+          });
+        }
+      })
+    }), showLegend ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flex: 1,
+      minWidth: 140,
+      justifyContent: "center",
+      gap: "$2",
+      ...{
+        "data-pie-legend": "true"
+      },
+      children: data.map((datum, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...(0, import_svg.chartDatumTextProps)(index),
         gap: "$2",
-        ...{
-          "data-pie-legend": "true"
-        },
-        children: data.map((datum, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          alignItems: "center",
-          minWidth: 0,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            width: 12,
-            height: 12,
-            borderRadius: knobProps.borderRadius.borderRadius,
-            flexShrink: 0,
-            backgroundColor: fills[index]
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: import_componentColors.componentColors.text.muted,
-            flex: 1,
-            numberOfLines: 1,
-            children: datum.label
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            fontWeight: "500",
-            flexShrink: 0,
-            children: format(datum.value)
-          })]
-        }, `${datum.label}-${index}`))
-      }) : null]
-    })
-  );
+        alignItems: "center",
+        minWidth: 0,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          width: 12,
+          height: 12,
+          borderRadius: knobProps.borderRadius.borderRadius,
+          flexShrink: 0,
+          backgroundColor: fills[index]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-datum-label": "true"
+          }),
+          ...knobProps.body,
+          fontSize: "$2",
+          color: import_componentColors.componentColors.text.muted,
+          flex: 1,
+          numberOfLines: 1,
+          children: datum.label
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-datum-value": "true"
+          }),
+          ...knobProps.body,
+          fontSize: "$2",
+          flexShrink: 0,
+          children: format(datum.value)
+        })]
+      }, `${datum.label}-${index}`))
+    }) : null]
+  });
+  return showLegend ? chart : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
+    children: chart
+  });
 }