@multiplatform.one/components 6.0.4 → 6.3.0

package/dist/esm/charts/ChartSurface.mjs

@@ -0,0 +1,48 @@
+import { useCallback, useState } from "react";
+import { YStack } from "tamagui";
+import { Svg, chartRootA11yProps } from "./svg.mjs";
+import { useChartTheme } from "./useChartTheme.mjs";
+import { jsx } from "react/jsx-runtime";
+function ChartSurface({
+  label,
+  height = 200,
+  width: widthProp,
+  children,
+  ...stackProps
+}) {
+  const {
+    transition,
+    animationEnabled
+  } = useChartTheme();
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const width = widthProp ?? measuredWidth;
+  const handleLayout = useCallback(event => {
+    const next = event.nativeEvent.layout.width;
+    setMeasuredWidth(prev => Math.abs(prev - next) >= 0.5 ? next : prev);
+  }, []);
+  return /* @__PURE__ */jsx(YStack, {
+    width: "100%",
+    height,
+    overflow: "hidden",
+    onLayout: widthProp === void 0 ? handleLayout : void 0,
+    ...(animationEnabled ? {
+      transition,
+      enterStyle: {
+        opacity: 0,
+        y: 6
+      }
+    } : {}),
+    ...stackProps,
+    children: width > 0 ? /* @__PURE__ */jsx(Svg, {
+      width,
+      height,
+      ...chartRootA11yProps(label),
+      children: children({
+        width,
+        height
+      })
+    }) : null
+  });
+}
+export { ChartSurface };
+//# sourceMappingURL=ChartSurface.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useState","YStack","Svg","chartRootA11yProps","useChartTheme","jsx","ChartSurface","label","height","width","widthProp","children","stackProps","transition","animationEnabled","measuredWidth","setMeasuredWidth","handleLayout","event","next","nativeEvent","layout","prev","Math","abs","overflow","onLayout","enterStyle","opacity","y"],"sources":["../../../src/charts/ChartSurface.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,QAAA,QAAgC;AAEtD,SAASC,MAAA,QAAgC;AACzC,SAASC,GAAA,EAAKC,kBAAA,QAA0B;AAExC,SAASC,aAAA,QAAqB;AA0DtB,SAAAC,GAAA;AA1BD,SAASC,aAAa;EAC3BC,KAAA;EACAC,MAAA,GAAS;EACTC,KAAA,EAAOC,SAAA;EACPC,QAAA;EACA,GAAGC;AACL,GAAsB;EACpB,MAAM;IAAEC,UAAA;IAAYC;EAAiB,IAAIV,aAAA,CAAc;EACvD,MAAM,CAACW,aAAA,EAAeC,gBAAgB,IAAIhB,QAAA,CAAS,CAAC;EACpD,MAAMS,KAAA,GAAQC,SAAA,IAAaK,aAAA;EAE3B,MAAME,YAAA,GAAelB,WAAA,CAAamB,KAAA,IAA6B;IAC7D,MAAMC,IAAA,GAAOD,KAAA,CAAME,WAAA,CAAYC,MAAA,CAAOZ,KAAA;IACtCO,gBAAA,CAAkBM,IAAA,IAAUC,IAAA,CAAKC,GAAA,CAAIF,IAAA,GAAOH,IAAI,KAAK,MAAMA,IAAA,GAAOG,IAAK;EACzE,GAAG,EAAE;EAEL,OACE,eAAAjB,GAAA,CAACJ,MAAA;IACCQ,KAAA,EAAM;IACND,MAAA;IACAiB,QAAA,EAAS;IACTC,QAAA,EAAUhB,SAAA,KAAc,SAAYO,YAAA,GAAe;IAClD,IAAIH,gBAAA,GAAmB;MAAED,UAAA;MAAYc,UAAA,EAAY;QAAEC,OAAA,EAAS;QAAGC,CAAA,EAAG;MAAE;IAAE,IAAI,CAAC;IAC3E,GAAGjB,UAAA;IAEHD,QAAA,EAAAF,KAAA,GAAQ,IACP,eAAAJ,GAAA,CAACH,GAAA;MAAIO,KAAA;MAAcD,MAAA;MAAiB,GAAGL,kBAAA,CAAmBI,KAAK;MAC5DI,QAAA,EAAAA,QAAA,CAAS;QAAEF,KAAA;QAAOD;MAAO,CAAC;IAAA,CAC7B,IACE;EAAA,CACN;AAEJ","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { YStack } from "tamagui";
+import { Svg, chartRootA11yProps } from "./svg.native.js";
+import { useChartTheme } from "./useChartTheme.native.js";
+function ChartSurface(param) {
+  var {
+    label,
+    height = 200,
+    width: widthProp,
+    children,
+    ...stackProps
+  } = param;
+  var {
+    transition,
+    animationEnabled
+  } = useChartTheme();
+  var [measuredWidth, setMeasuredWidth] = useState(0);
+  var width = widthProp !== null && widthProp !== void 0 ? widthProp : measuredWidth;
+  var handleLayout = useCallback(function (event) {
+    var next = event.nativeEvent.layout.width;
+    setMeasuredWidth(function (prev) {
+      return Math.abs(prev - next) >= 0.5 ? next : prev;
+    });
+  }, []);
+  return /* @__PURE__ */_jsx(YStack, {
+    width: "100%",
+    height,
+    overflow: "hidden",
+    onLayout: widthProp === void 0 ? handleLayout : void 0,
+    ...(animationEnabled ? {
+      transition,
+      enterStyle: {
+        opacity: 0,
+        y: 6
+      }
+    } : {}),
+    ...stackProps,
+    children: width > 0 ? /* @__PURE__ */_jsx(Svg, {
+      width,
+      height,
+      ...chartRootA11yProps(label),
+      children: children({
+        width,
+        height
+      })
+    }) : null
+  });
+}
+export { ChartSurface };
+//# sourceMappingURL=ChartSurface.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","useCallback","useState","YStack","Svg","chartRootA11yProps","useChartTheme","ChartSurface","param","label","height","width","widthProp","children","stackProps","transition","animationEnabled","measuredWidth","setMeasuredWidth","handleLayout","event","next","nativeEvent","layout","prev","Math","abs","overflow","onLayout","enterStyle","opacity","y"],"sources":["../../../src/charts/ChartSurface.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,QAAa,mBAAgC;AAEtD,SAASC,WAAA,EAAAC,QAAgC;AACzC,SAASC,MAAK;AAEd,SAASC,GAAA,EAAAC,kBAAqB;AA0DtB,SAAAC,aAAA;AA1BD,SAASC,aAAaC,KAAA;EAC3B;IAAAC,KAAA;IAAAC,MAAA;IAAAC,KAAA,EAAAC,SAAA;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAN,KAAA;EACA;IAAAO,UAAS;IAAAC;EAAA,IAAAV,aAAA;EACT,KAAAW,aAAO,EAAAC,gBAAA,IAAAhB,QAAA;EACP,IAAAS,KAAA,GAAAC,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAAK,aAAA;EACA,IAAGE,YAAA,GAAAlB,WAAA,WAAAmB,KAAA;IACiB,IAAAC,IAAA,GAAAD,KAAA,CAAAE,WAAA,CAAAC,MAAA,CAAAZ,KAAA;IACpBO,gBAAQ,WAAYM,IAAA;MACpB,OAAOC,IAAA,CAAAC,GAAA,CAAAF,IAAe,GAAAH,IAAA,QAAgB,GAAIA,IAAA,GAAAG,IAAU;IACpD;EAEA,MAAM;EACJ,sBAAmBxB,IAAA,CAAAG,MAAY;IAC/BQ,KAAA;IACFD,MAAK;IAELiB,QACE;IAACC,QAAA,EAAAhB,SAAA,cAAAO,YAAA;IAAA,IAAAH,gBAAA;MACCD,UAAM;MACNc,UAAA;QACAC,OAAA,EAAS;QACTC,CAAA;MACC;IAA2E,IAC3E,CAAG;IAAA,GAEHjB,UAAA;IAIGD,QAAA,EAAAF,KAAA,sBAAAX,IAAA,CAAAI,GAAA;MACNO,KAAA;MAEJD,MAAA","ignoreList":[]}

package/dist/esm/charts/LineChart.mjs

@@ -0,0 +1,126 @@
+import { useTranslation } from "react-i18next";
+import { XAxis, YAxis } from "./Axis.mjs";
+import { ChartSurface } from "./ChartSurface.mjs";
+import { describeChart, describeDatum } from "./accessibility.mjs";
+import { computeCartesianPlot, thinCategories } from "./composeChart.mjs";
+import { createLinearScale, createPointScale, getLinearTicks, valueDomain } from "./math.mjs";
+import { AreaSeries, LineSeries } from "./series.mjs";
+import { useChartTheme } from "./useChartTheme.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LineChart({
+  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
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    palette,
+    labelFontSize
+  } = useChartTheme();
+  const stroke = color ?? palette.single;
+  const format = valueFormatter ?? (value => value.toLocaleString());
+  const ariaLabel = label ?? describeChart({
+    typeLabel: typeLabel ?? (showArea ? t("Area chart") : t("Line chart")),
+    title,
+    data,
+    formatValue: valueFormatter
+  });
+  const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
+  return /* @__PURE__ */jsx(ChartSurface, {
+    label: ariaLabel,
+    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) {
+  return /* @__PURE__ */jsx(LineChart, {
+    showArea: true,
+    ...props
+  });
+}
+export { AreaChart, LineChart };
+//# sourceMappingURL=LineChart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useTranslation","XAxis","YAxis","ChartSurface","describeChart","describeDatum","computeCartesianPlot","thinCategories","createLinearScale","createPointScale","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","value","toLocaleString","ariaLabel","formatValue","interactive","Boolean","children","size","domain","map","datum","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":[]}

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

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { XAxis, YAxis } from "./Axis.native.js";
+import { ChartSurface } from "./ChartSurface.native.js";
+import { describeChart, describeDatum } from "./accessibility.native.js";
+import { computeCartesianPlot, thinCategories } from "./composeChart.native.js";
+import { createLinearScale, createPointScale, getLinearTicks, valueDomain } from "./math.native.js";
+import { AreaSeries, LineSeries } from "./series.native.js";
+import { useChartTheme } from "./useChartTheme.native.js";
+function LineChart(param) {
+  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;
+  var {
+    t
+  } = useTranslation();
+  var {
+    palette,
+    labelFontSize
+  } = useChartTheme();
+  var stroke = color !== null && color !== void 0 ? color : palette.single;
+  var format = valueFormatter !== null && valueFormatter !== void 0 ? valueFormatter : function (value) {
+    return value.toLocaleString();
+  };
+  var ariaLabel = label !== null && label !== void 0 ? label : describeChart({
+    typeLabel: typeLabel !== null && typeLabel !== void 0 ? typeLabel : showArea ? t("Area chart") : t("Line chart"),
+    title,
+    data,
+    formatValue: valueFormatter
+  });
+  var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
+  return /* @__PURE__ */_jsx(ChartSurface, {
+    label: ariaLabel,
+    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);
+        }),
+        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) {
+            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) {
+  return /* @__PURE__ */_jsx(LineChart, {
+    showArea: true,
+    ...props
+  });
+}
+export { AreaChart, LineChart };
+//# sourceMappingURL=LineChart.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useTranslation","XAxis","YAxis","ChartSurface","describeChart","describeDatum","computeCartesianPlot","thinCategories","createLinearScale","createPointScale","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","value","toLocaleString","ariaLabel","formatValue","interactive","Boolean","children","size","domain","map","datum","marginScale","range","tickValues","plot","yTickLabels","fontSize","length","xScale","x","padding","yScale","y","points","_xScale","scale","ticks","tickFormat","showLabels","baseline","opacity","bounds","datumLabel"],"sources":["../../../src/charts/LineChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/charts/PieChart.mjs

@@ -0,0 +1,127 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
+import { Text, XStack, YStack } from "tamagui";
+import { componentColors } from "../componentColors.mjs";
+import { ChartSurface } from "./ChartSurface.mjs";
+import { describeChart, describeDatum } from "./accessibility.mjs";
+import { resolveSeriesFills } from "./composeChart.mjs";
+import { PieSeries } from "./series.mjs";
+import { useChartTheme } from "./useChartTheme.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const DEFAULT_DONUT_RATIO = 0.55;
+function PieChart({
+  data,
+  height = 200,
+  donut = false,
+  padAngle = 0,
+  colors,
+  showLegend = true,
+  valueFormatter,
+  title,
+  label,
+  onDatumPress,
+  onDatumHoverIn,
+  onDatumHoverOut,
+  ...stackProps
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const {
+    palette
+  } = useChartTheme();
+  const fills = resolveSeriesFills(data, palette, {
+    colors,
+    categorical: true
+  });
+  const format = valueFormatter ?? (value => value.toLocaleString());
+  const total = data.reduce((sum, datum) => sum + datum.value, 0);
+  const ariaLabel = label ?? describeChart({
+    typeLabel: donut ? t("Donut chart") : t("Pie chart"),
+    title,
+    data,
+    formatValue: valueFormatter,
+    includeShare: true
+  });
+  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,
+        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",
+        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: "$2",
+            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]
+    })
+  );
+}
+export { PieChart };
+//# sourceMappingURL=PieChart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useResolvedKnobs","useTranslation","Text","XStack","YStack","componentColors","ChartSurface","describeChart","describeDatum","resolveSeriesFills","PieSeries","useChartTheme","jsx","jsxs","DEFAULT_DONUT_RATIO","PieChart","data","height","donut","padAngle","colors","showLegend","valueFormatter","title","label","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","knobProps","palette","fills","categorical","format","value","toLocaleString","total","reduce","sum","datum","ariaLabel","typeLabel","formatValue","includeShare","interactive","Boolean","innerRatio","Math","min","max","flexWrap","alignItems","flexShrink","minWidth","gap","children","width","size","outerRadius","cx","cy","innerRadius","datumLabel","flex","justifyContent","map","index","borderRadius","backgroundColor","fontSize","color","text","muted","numberOfLines","fontWeight"],"sources":["../../../src/charts/PieChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useTranslation } from "react-i18next";
+import { Text, XStack, YStack } from "tamagui";
+import { componentColors } from "../componentColors.native.js";
+import { ChartSurface } from "./ChartSurface.native.js";
+import { describeChart, describeDatum } from "./accessibility.native.js";
+import { resolveSeriesFills } from "./composeChart.native.js";
+import { PieSeries } from "./series.native.js";
+import { useChartTheme } from "./useChartTheme.native.js";
+var DEFAULT_DONUT_RATIO = 0.55;
+function PieChart(param) {
+  var {
+    data,
+    height = 200,
+    donut = false,
+    padAngle = 0,
+    colors,
+    showLegend = true,
+    valueFormatter,
+    title,
+    label,
+    onDatumPress,
+    onDatumHoverIn,
+    onDatumHoverOut,
+    ...stackProps
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var {
+    palette
+  } = useChartTheme();
+  var fills = resolveSeriesFills(data, palette, {
+    colors,
+    categorical: true
+  });
+  var format = valueFormatter !== null && valueFormatter !== void 0 ? valueFormatter : function (value) {
+    return value.toLocaleString();
+  };
+  var total = data.reduce(function (sum, datum) {
+    return sum + datum.value;
+  }, 0);
+  var ariaLabel = label !== null && label !== void 0 ? label : describeChart({
+    typeLabel: donut ? t("Donut chart") : t("Pie chart"),
+    title,
+    data,
+    formatValue: valueFormatter,
+    includeShare: true
+  });
+  var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
+  var 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,
+        height,
+        children: /* @__PURE__ */_jsx(ChartSurface, {
+          label: ariaLabel,
+          height,
+          width: height,
+          children: function children(size) {
+            var 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 ? function (datum) {
+                return 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(function (datum, index) {
+          return /* @__PURE__ */_jsxs(XStack, {
+            gap: "$2",
+            alignItems: "center",
+            minWidth: 0,
+            children: [/* @__PURE__ */_jsx(YStack, {
+              width: 12,
+              height: 12,
+              borderRadius: "$2",
+              flexShrink: 0,
+              backgroundColor: fills[index]
+            }),
+            /* The label yields (truncates) before the value — values are
+            data and never truncate (Axiom 11). */
+            /* @__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]
+    })
+  );
+}
+export { PieChart };
+//# sourceMappingURL=PieChart.native.js.map