@multiplatform.one/components 7.7.6 → 7.8.0

package/dist/esm/charts/LineChart.mjs

@@ -1,7 +1,8 @@
 import { useTranslation } from "../shared/i18n.mjs";
 import { XAxis, YAxis } from "./Axis.mjs";
+import { ChartDataFrame } from "./ChartDataView.mjs";
 import { ChartSurface } from "./ChartSurface.mjs";
-import { describeChart, describeDatum } from "./accessibility.mjs";
+import { chartDatumText, describeChart, describeDatum } from "./accessibility.mjs";
 import { computeCartesianPlot, thinCategories } from "./composeChart.mjs";
 import { createLinearScale, createPointScale, formatChartValue, getLinearTicks, valueDomain } from "./math.mjs";
 import { AreaSeries, LineSeries } from "./series.mjs";
@@ -46,74 +47,87 @@ function LineChart({
     formatValue: valueFormatter
   });
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */jsx(ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */jsx(ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: size => {
-      const domain = valueDomain(data.map(datum => datum.value));
-      const marginScale = createLinearScale({
-        domain,
-        range: [0, 1]
-      });
-      const tickValues = getLinearTicks(marginScale, yTicks);
-      const plot = 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 = createPointScale({
-        domain: data.map(datum => datum.label),
-        range: [plot.x, plot.x + plot.width],
-        padding: 0.5
-      });
-      const yScale = 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__ */jsxs(Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */jsx(YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: value => format(value),
-          showLabels: showYAxis,
-          showGrid
-        }) : null, showArea ? /* @__PURE__ */jsx(AreaSeries, {
-          points,
-          baseline: plot.y + plot.height,
-          color: stroke,
-          opacity: areaOpacity,
-          curve
-        }) : null, /* @__PURE__ */jsx(LineSeries, {
-          data,
-          points,
-          color: stroke,
-          strokeWidth,
-          curve,
-          showPoints,
-          bounds: size,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? datum => describeDatum({
-            datum,
-            formatValue: valueFormatter
-          }) : void 0
-        }), showXAxis ? /* @__PURE__ */jsx(XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: thinCategories(data.map(datum => datum.label), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+    children: /* @__PURE__ */jsx(ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: chartDatumText(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: size => {
+        const domain = valueDomain(data.map(datum => datum.value));
+        const marginScale = createLinearScale({
+          domain,
+          range: [0, 1]
+        });
+        const tickValues = getLinearTicks(marginScale, yTicks);
+        const plot = 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 = createPointScale({
+          domain: data.map(datum => datum.label),
+          range: [plot.x, plot.x + plot.width],
+          padding: 0.5
+        });
+        const yScale = 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__ */jsxs(Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */jsx(YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: value => format(value),
+            showLabels: showYAxis,
+            showGrid
+          }) : null, showArea ? /* @__PURE__ */jsx(AreaSeries, {
+            points,
+            baseline: plot.y + plot.height,
+            color: stroke,
+            opacity: areaOpacity,
+            curve
+          }) : null, /* @__PURE__ */jsx(LineSeries, {
+            data,
+            points,
+            color: stroke,
+            strokeWidth,
+            curve,
+            showPoints,
+            bounds: size,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? datum => describeDatum({
+              datum,
+              formatValue: valueFormatter
+            }) : void 0
+          }), showXAxis ? /* @__PURE__ */jsx(XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: thinCategories(data.map(datum => datum.label), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 function AreaChart(props) {

package/dist/esm/charts/LineChart.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useTranslation","XAxis","YAxis","ChartSurface","describeChart","describeDatum","computeCartesianPlot","thinCategories","createLinearScale","createPointScale","formatChartValue","getLinearTicks","valueDomain","AreaSeries","LineSeries","useChartTheme","Fragment","jsx","jsxs","LineChart","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","palette","labelFontSize","stroke","single","format","ariaLabel","formatValue","interactive","Boolean","children","size","domain","map","datum","value","marginScale","range","tickValues","plot","yTickLabels","fontSize","length","xScale","x","padding","yScale","y","points","scale","ticks","tickFormat","showLabels","baseline","opacity","bounds","datumLabel","AreaChart","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useTranslation","XAxis","YAxis","ChartDataFrame","ChartSurface","chartDatumText","describeChart","describeDatum","computeCartesianPlot","thinCategories","createLinearScale","createPointScale","formatChartValue","getLinearTicks","valueDomain","AreaSeries","LineSeries","useChartTheme","Fragment","jsx","jsxs","LineChart","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","palette","labelFontSize","stroke","single","format","ariaLabel","formatValue","interactive","Boolean","children","proof","kind","separated","datumText","datumValues","datumCount","length","size","domain","map","datum","value","marginScale","range","tickValues","plot","yTickLabels","fontSize","xScale","x","padding","yScale","y","points","scale","ticks","tickFormat","showLabels","baseline","opacity","bounds","datumLabel","AreaChart","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslation } from "../shared/i18n.native.js";
 import { XAxis, YAxis } from "./Axis.native.js";
+import { ChartDataFrame } from "./ChartDataView.native.js";
 import { ChartSurface } from "./ChartSurface.native.js";
-import { describeChart, describeDatum } from "./accessibility.native.js";
+import { chartDatumText, describeChart, describeDatum } from "./accessibility.native.js";
 import { computeCartesianPlot, thinCategories } from "./composeChart.native.js";
 import { createLinearScale, createPointScale, formatChartValue, getLinearTicks, valueDomain } from "./math.native.js";
 import { AreaSeries, LineSeries } from "./series.native.js";
@@ -47,89 +48,102 @@ function LineChart(param) {
     formatValue: valueFormatter
   });
   var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */_jsx(ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */_jsx(ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: function children(size) {
-      var domain = valueDomain(data.map(function (datum) {
-        return datum.value;
-      }));
-      var marginScale = createLinearScale({
-        domain,
-        range: [0, 1]
-      });
-      var tickValues = getLinearTicks(marginScale, yTicks);
-      var plot = 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 = createPointScale({
-        domain: data.map(function (datum) {
-          return datum.label;
-        }),
-        range: [plot.x, plot.x + plot.width],
-        padding: 0.5
-      });
-      var yScale = 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__ */_jsxs(_Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */_jsx(YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: function tickFormat(value) {
+    children: /* @__PURE__ */_jsx(ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: showArea ? "area" : "line",
+        separated: false,
+        datumText: false,
+        datumValues: chartDatumText(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: function children(size) {
+        var domain = valueDomain(data.map(function (datum) {
+          return datum.value;
+        }));
+        var marginScale = createLinearScale({
+          domain,
+          range: [0, 1]
+        });
+        var tickValues = getLinearTicks(marginScale, yTicks);
+        var plot = computeCartesianPlot(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(function (value) {
             return format(value);
-          },
-          showLabels: showYAxis,
-          showGrid
-        }) : null, showArea ? /* @__PURE__ */_jsx(AreaSeries, {
-          points,
-          baseline: plot.y + plot.height,
-          color: stroke,
-          opacity: areaOpacity,
-          curve
-        }) : null, /* @__PURE__ */_jsx(LineSeries, {
-          data,
-          points,
-          color: stroke,
-          strokeWidth,
-          curve,
-          showPoints,
-          bounds: size,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? function (datum) {
-            return describeDatum({
-              datum,
-              formatValue: valueFormatter
-            });
-          } : void 0
-        }), showXAxis ? /* @__PURE__ */_jsx(XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: thinCategories(data.map(function (datum) {
+          }),
+          fontSize: labelFontSize
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        var xScale = 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 = 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__ */_jsxs(_Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */_jsx(YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: function tickFormat(value) {
+              return format(value);
+            },
+            showLabels: showYAxis,
+            showGrid
+          }) : null, showArea ? /* @__PURE__ */_jsx(AreaSeries, {
+            points,
+            baseline: plot.y + plot.height,
+            color: stroke,
+            opacity: areaOpacity,
+            curve
+          }) : null, /* @__PURE__ */_jsx(LineSeries, {
+            data,
+            points,
+            color: stroke,
+            strokeWidth,
+            curve,
+            showPoints,
+            bounds: size,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? function (datum) {
+              return describeDatum({
+                datum,
+                formatValue: valueFormatter
+              });
+            } : void 0
+          }), showXAxis ? /* @__PURE__ */_jsx(XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: thinCategories(data.map(function (datum) {
+              return datum.label;
+            }), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 function AreaChart(props) {

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useTranslation","XAxis","YAxis","ChartSurface","describeChart","describeDatum","computeCartesianPlot","thinCategories","createLinearScale","createPointScale","formatChartValue","getLinearTicks","valueDomain","AreaSeries","LineSeries","useChartTheme","LineChart","param","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","palette","labelFontSize","stroke","single","format","ariaLabel","formatValue","interactive","Boolean","children","size","domain","map","datum","value","marginScale","range","tickValues","plot","yTickLabels","fontSize","length","xScale","x","padding","yScale","y","points","_xScale","scale","ticks","tickFormat","showLabels","baseline","opacity","bounds","datumLabel","AreaChart","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAsB,EAAAC,QAAA,IAAAC,SAAA;AAE/B,SAASC,cAAO,QAAa;AAC7B,SAASC,KAAA,EAAAC,KAAA,QAAoB;AAC7B,SAASC,YAAA,QAAe,0BAAqB;AAC7C,SAASC,aAAA,EAAAC,aAAsB,mCAAsB;AACrD,SAAAC,oBAAA,EAAAC,cAAA;AAAA,SACEC,iBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,cAAA,EAAAC,WAAA;AAAA,SACAC,UAAA,EAAAC,UAAA;AAAA,SACAC,aAAA;AAAA,SACAC,UAAAC,KAAA;EACA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,WAAA;IAAAC,KAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC,QAAA;IAAAC,MAAA;IAAAC,cAAA;IAAAC,KAAA;IAAAC,KAAA;IAAAC,SAAA;IAAAC,YAAA;IAAAC,cAAA;IAAAC,eAAA;IAAA,GAAAC;EAAA,IAAArB,KAAA;EAAA;IACKsB;EAAA,IAAAvC,cAAA;EACP;IAAAwC,OAAS;IAAAC;EAAY,IAAA1B,aAAkB;EAEvC,IAAA2B,MAAS,GAAArB,KAAA,aAAqBA,KAAA,cAAAA,KAAA,GAAAmB,OAAA,CAAAG,MAAA;EAsGpB,IAAAC,MAAA,GAAAb,cAAA,aAAAA,cAAA,cAAAA,cAAA,GAAArB,gBAAA;EAlEH,IAAAmC,SAAS,GAAAZ,KAAU,aAAAA,KAAA,cAAAA,KAAA,GAAA7B,aAAA;IACxB8B,SAAA,EAAAA,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAAZ,QAAA,GAAAiB,CAAA,iBAAAA,CAAA;IACAP,KAAA;IACAd,IAAA;IACA4B,WAAA,EAAAf;EACA;EACA,IAAAgB,WAAA,GAAAC,OAAA,CAAAb,YAAA,IAAAC,cAAA,IAAAC,eAAA;EACA,sBAAQ1C,IAAA,CAAAQ,YAAA;IACR8B,KAAA,EAAAY,SAAa;IACb1B,MAAA;IACAC,KAAA;IACA,GAAAkB,UAAY;IACZW,QAAA,EAAW,SAAAA,SAAAC,IAAA;MACX,IAAAC,MAAS,GAAAvC,WAAA,CAAAM,IAAA,CAAAkC,GAAA,WAAAC,KAAA;QACT,OAAAA,KAAA,CAAAC,KAAA;MACA;MACA,IAAAC,WAAA,GAAA/C,iBAAA;QACA2C,MAAA;QACAK,KAAA,GACA,GACA;MAEiB;MACjB,IAAQC,UAAM,GAAA9C,cAAe,CAAA4C,WAAA,EAAAzB,MAAA;MAC7B,IAAQ4B,IAAA,GAAApD,oBAA2B,CAAA4C,IAAA;QAG7BvB,SAAS;QACTC,SAAS;QACT+B,WAAA,EACJF,UACA,CAAAL,GAAA,WAAcE,KAAA;UACZ,OAAWV,MAAA,CAAAU,KAAc;QACzB;QACAM,QAAA,EAAAnB;MACA;MACD,IAAAiB,IAAA,CAAAtC,KAAA,SAAAsC,IAAA,CAAAvC,MAAA,SAAAD,IAAA,CAAA2C,MAAA;MACH,IAAMC,MAAA,GAAArD,gBAAsB;QAE5B0C,MACE,EAAAjC,IAAA,CAAAkC,GAAA,WAACC,KAAA;UAES,OAAAA,KAAS,CAAApB,KAAA;QACf,EAAM;QACNuB,KAAM,GACAE,IAAA,CAAAK,CAAA,EACJL,IAAA,CAAAK,CAAA,GAAAL,IAAA,CAAAtC,KAAA,CACA;QACA4C,OAAA;MACA;MACD,IAAAC,MAAA,GAAAzD,iBAAA;QACG2C,MAAK;QACTK,KAAM,GACJE,IAAQ,CAAAQ,CAAA,GAAKR,IAAI,CAACvC,MAAA,EAClBuC,IAAQ,CAAAQ,CAAA;MAET;MACD,IAAMC,MAAA,GAASjD,IAAA,CAAAkC,GAAA,WAAkBC,KAAA;QAC/B,IAAAe,OAAA;QACA,OAAQ;UACTL,CAAA,GAAAK,OAAA,GAAAN,MAAA,CAAAT,KAAA,CAAApB,KAAA,eAAAmC,OAAA,cAAAA,OAAA,GAAAV,IAAA,CAAAK,CAAA;UACKG,CAAA,EAAAD,MAAS,CAAAZ,KAAK,CAAAC,KAAK;QACvB,CAAG;MACH;MACA,sBAAAzD,KAAA,CAAAE,SAAA;QACFkD,QACE,GACGrB,SAAa,IAAAC,QACZ,kBAAAlC,IAAA,CAAAO,KAAA;UAACwD,IAAA;UAAAW,KAAA,EAAAJ,MAAA;UACCK,KAAA,EAAAxC,MAAA;UACAyC,UAAO,WAAAA,WAAAjB,KAAA;YACP,OAAOV,MAAA,CAAAU,KAAA;UACP;UACAkB,UAAY,EAAA5C,SAAA;UACZC;QAAA,WAEAP,QAAA,kBAAA3B,IAAA,CAAAkB,UAAA;UACHsD,MACC;UAACM,QAAA,EAAAf,IAAA,CAAAQ,CAAA,GAAAR,IAAA,CAAAvC,MAAA;UAAAE,KAAA,EAAAqB,MAAA;UACCgC,OAAA,EAAAnD,WAAA;UACAC;QACA,SAAO,EACP,eAAS7B,IAAA,CAAAmB,UAAA;UACTI,IAAA;UAAAiD,MAAA;UAEA9C,KAAA,EAAAqB,MAAA;UACJhB,WAAA;UAACF,KAAA;UAAAC,UAAA;UACCkD,MAAA,EAAAzB,IAAA;UACAf,YAAA;UACAC,cAAO;UACPC,eAAA;UACAuC,UAAA,EAAA7B,WAAA,aAAAM,KAAA;YACA,OAAAhD,aAAA;cACAgD,KAAQ;cACRP,WAAA,EAAAf;YACA;UACA;QACA,IAGMJ,SAAA,kBAAAhC,IAAA,CAAAM,KAAA;UAERyD,IAAA;UACCW,KAAA,EACCP,MAAA;UAACL,UAAA,EAAAlD,cAAA,CAAAW,IAAA,CAAAkC,GAAA,WAAAC,KAAA;YAAA,OAAAA,KAAA,CAAApB,KAAA;UACC,IAAAyB,IAAA,CAAAtC,KAAA,EAAAqB,aAAA;QACA,SAAO;MACK;IACqB;EAC1B;AACL;AACF,SAAAoC,UAAAC,KAAA;EAAA,OACF,eACEnF,IAAA,CAAAqB,SAAA;IAAAM,QACN;IAEJ,GACFwD;EAEJ;AAKO;AACL,SACFD,SAAA,E","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useTranslation","XAxis","YAxis","ChartDataFrame","ChartSurface","chartDatumText","describeChart","describeDatum","computeCartesianPlot","thinCategories","createLinearScale","createPointScale","formatChartValue","getLinearTicks","valueDomain","AreaSeries","LineSeries","useChartTheme","LineChart","param","data","height","width","color","showArea","areaOpacity","curve","showPoints","strokeWidth","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","typeLabel","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","palette","labelFontSize","stroke","single","format","ariaLabel","formatValue","interactive","Boolean","children","proof","kind","separated","datumText","datumValues","datumCount","length","size","domain","map","datum","value","marginScale","range","tickValues","plot","yTickLabels","fontSize","xScale","x","padding","yScale","y","points","_xScale","scale","ticks","tickFormat","showLabels","baseline","opacity","bounds","datumLabel","AreaChart","props"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/charts/PieChart.mjs

@@ -2,11 +2,13 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "../shared/i18n.mjs";
 import { Text, XStack, YStack } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
+import { ChartDataFrame } from "./ChartDataView.mjs";
 import { ChartSurface } from "./ChartSurface.mjs";
-import { describeChart, describeDatum } from "./accessibility.mjs";
+import { chartDatumText, describeChart, describeDatum } from "./accessibility.mjs";
 import { resolveSeriesFills } from "./composeChart.mjs";
-import { formatChartValue } from "./math.mjs";
+import { formatChartValue, pieSlices, canMaskPieSlices } from "./math.mjs";
 import { PieSeries } from "./series.mjs";
+import { chartDatumTextProps, chartWebProps } from "./svg.mjs";
 import { useChartTheme } from "./useChartTheme.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 const DEFAULT_DONUT_RATIO = 0.55;
@@ -14,7 +16,7 @@ function PieChart({
   data,
   height = 200,
   donut = false,
-  padAngle = 0,
+  padAngle,
   colors,
   showLegend = true,
   valueFormatter,
@@ -49,80 +51,103 @@ 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__ */
-    jsxs(XStack, {
-      flexWrap: "wrap",
-      alignItems: "center",
-      flexShrink: 1,
-      minWidth: 0,
-      ...knobProps.gap,
-      ...stackProps,
-      children: [/* @__PURE__ */jsx(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__ */
+  jsxs(XStack, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    flexShrink: 1,
+    minWidth: 0,
+    ...knobProps.gap,
+    ...chartWebProps({
+      "data-mpo-chart-owner": "true"
+    }),
+    ...stackProps,
+    children: [/* @__PURE__ */jsx(YStack, {
+      width: height,
+      height,
+      children: /* @__PURE__ */jsx(ChartSurface, {
+        label: ariaLabel,
+        proof: {
+          kind: innerRatio > 0 ? "donut" : "pie",
+          separated: padAngle === void 0 ? canMaskPieSlices(pieSlices(data), height / 2 * innerRatio, height / 2) : padAngle > 0,
+          datumText: showLegend,
+          datumValues: chartDatumText(data, valueFormatter),
+          datumCount: data.length
+        },
         height,
-        children: /* @__PURE__ */jsx(ChartSurface, {
-          label: ariaLabel,
-          height,
-          width: height,
-          children: size => {
-            const outerRadius = Math.min(size.width, size.height) / 2;
-            return /* @__PURE__ */jsx(PieSeries, {
-              data,
-              cx: size.width / 2,
-              cy: size.height / 2,
-              outerRadius,
-              innerRadius: outerRadius * innerRatio,
-              padAngle,
-              fills,
-              onDatumPress,
-              onDatumHoverIn,
-              onDatumHoverOut,
-              datumLabel: interactive ? datum => describeDatum({
-                datum,
-                total,
-                formatValue: valueFormatter
-              }) : void 0
-            });
-          }
-        })
-      }), showLegend ? /* @__PURE__ */jsx(YStack, {
-        flex: 1,
-        minWidth: 140,
-        justifyContent: "center",
+        width: height,
+        children: size => {
+          const outerRadius = Math.min(size.width, size.height) / 2;
+          return /* @__PURE__ */jsx(PieSeries, {
+            data,
+            cx: size.width / 2,
+            cy: size.height / 2,
+            outerRadius,
+            innerRadius: outerRadius * innerRatio,
+            padAngle,
+            fills,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? datum => describeDatum({
+              datum,
+              total,
+              formatValue: valueFormatter
+            }) : void 0
+          });
+        }
+      })
+    }), showLegend ? /* @__PURE__ */jsx(YStack, {
+      flex: 1,
+      minWidth: 140,
+      justifyContent: "center",
+      gap: "$2",
+      ...{
+        "data-pie-legend": "true"
+      },
+      children: data.map((datum, index) => /* @__PURE__ */jsxs(XStack, {
+        ...chartDatumTextProps(index),
         gap: "$2",
-        ...{
-          "data-pie-legend": "true"
-        },
-        children: data.map((datum, index) => /* @__PURE__ */jsxs(XStack, {
-          gap: "$2",
-          alignItems: "center",
-          minWidth: 0,
-          children: [/* @__PURE__ */jsx(YStack, {
-            width: 12,
-            height: 12,
-            borderRadius: knobProps.borderRadius.borderRadius,
-            flexShrink: 0,
-            backgroundColor: fills[index]
-          }), /* @__PURE__ */jsx(Text, {
-            fontSize: "$2",
-            color: componentColors.text.muted,
-            flex: 1,
-            numberOfLines: 1,
-            children: datum.label
-          }), /* @__PURE__ */jsx(Text, {
-            fontSize: "$2",
-            fontWeight: "500",
-            flexShrink: 0,
-            children: format(datum.value)
-          })]
-        }, `${datum.label}-${index}`))
-      }) : null]
-    })
-  );
+        alignItems: "center",
+        minWidth: 0,
+        children: [/* @__PURE__ */jsx(YStack, {
+          width: 12,
+          height: 12,
+          borderRadius: knobProps.borderRadius.borderRadius,
+          flexShrink: 0,
+          backgroundColor: fills[index]
+        }), /* @__PURE__ */jsx(Text, {
+          ...chartWebProps({
+            "data-mpo-chart-datum-label": "true"
+          }),
+          ...knobProps.body,
+          fontSize: "$2",
+          color: componentColors.text.muted,
+          flex: 1,
+          numberOfLines: 1,
+          children: datum.label
+        }), /* @__PURE__ */jsx(Text, {
+          ...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__ */jsx(ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
+    children: chart
+  });
 }
 export { PieChart };
 //# sourceMappingURL=PieChart.mjs.map