@multiplatform.one/components 7.7.6 → 7.10.0

package/dist/esm/charts/BarChart.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, resolveSeriesFills, thinCategories } from "./composeChart.native.js";
 import { createBandScale, createLinearScale, formatChartValue, getLinearTicks, valueDomain } from "./math.native.js";
 import { BarSeries } from "./series.native.js";
@@ -48,76 +49,89 @@ function BarChart(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 = domainProp !== null && domainProp !== void 0 ? domainProp : valueDomain(data.map(function (datum) {
-        return datum.value;
-      }));
-      var nice = domainProp ? false : void 0;
-      var marginScale = createLinearScale({
-        domain,
-        range: [0, 1],
-        nice
-      });
-      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 = createBandScale({
-        domain: data.map(function (datum) {
-          return datum.label;
-        }),
-        range: [plot.x, plot.x + plot.width]
-      });
-      var yScale = createLinearScale({
-        domain,
-        range: [plot.y + plot.height, plot.y],
-        nice
-      });
-      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: "bar",
+        separated: true,
+        datumText: false,
+        datumValues: chartDatumText(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: function children(size) {
+        var domain = domainProp !== null && domainProp !== void 0 ? domainProp : valueDomain(data.map(function (datum) {
+          return datum.value;
+        }));
+        var nice = domainProp ? false : void 0;
+        var marginScale = createLinearScale({
+          domain,
+          range: [0, 1],
+          nice
+        });
+        var tickValues = getLinearTicks(marginScale, yTicks);
+        var plot = computeCartesianPlot(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(function (value) {
             return format(value);
-          },
-          showLabels: showYAxis,
-          showGrid
-        }) : null, /* @__PURE__ */_jsx(BarSeries, {
-          data,
-          xScale,
-          yScale,
-          plot,
-          fills,
-          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 = createBandScale({
+          domain: data.map(function (datum) {
             return datum.label;
-          }), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+          }),
+          range: [plot.x, plot.x + plot.width]
+        });
+        var yScale = createLinearScale({
+          domain,
+          range: [plot.y + plot.height, plot.y],
+          nice
+        });
+        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, /* @__PURE__ */_jsx(BarSeries, {
+            data,
+            xScale,
+            yScale,
+            plot,
+            fills,
+            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]
+        });
+      }
+    })
   });
 }
 export { BarChart };

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

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useTranslation","XAxis","YAxis","ChartSurface","describeChart","describeDatum","computeCartesianPlot","resolveSeriesFills","thinCategories","createBandScale","createLinearScale","formatChartValue","getLinearTicks","valueDomain","BarSeries","useChartTheme","BarChart","param","data","height","width","categorical","color","colors","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","domain","domainProp","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","palette","labelFontSize","fills","format","ariaLabel","typeLabel","formatValue","interactive","Boolean","children","size","map","datum","value","nice","marginScale","range","tickValues","plot","yTickLabels","fontSize","length","xScale","x","yScale","y","scale","ticks","tickFormat","showLabels","datumLabel"],"sources":["../../../src/charts/BarChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useTranslation","XAxis","YAxis","ChartDataFrame","ChartSurface","chartDatumText","describeChart","describeDatum","computeCartesianPlot","resolveSeriesFills","thinCategories","createBandScale","createLinearScale","formatChartValue","getLinearTicks","valueDomain","BarSeries","useChartTheme","BarChart","param","data","height","width","categorical","color","colors","showXAxis","showYAxis","showGrid","yTicks","valueFormatter","title","label","domain","domainProp","onDatumPress","onDatumHoverIn","onDatumHoverOut","stackProps","t","palette","labelFontSize","fills","format","ariaLabel","typeLabel","formatValue","interactive","Boolean","children","proof","kind","separated","datumText","datumValues","datumCount","length","size","map","datum","value","nice","marginScale","range","tickValues","plot","yTickLabels","fontSize","xScale","x","yScale","y","scale","ticks","tickFormat","showLabels","datumLabel"],"sources":["../../../src/charts/BarChart.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/charts/ChartDataView.mjs

@@ -0,0 +1,185 @@
+import { Button } from "@multiplatform.one/forms";
+import { isWeb } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { createContext, useContext, useId, useState } from "react";
+import { Dialog, Paragraph, ScrollView, XStack, YStack } from "tamagui";
+import { sectionHeading } from "../componentColors.mjs";
+import { useTranslation } from "../shared/i18n.mjs";
+import { DialogContent, DialogOverlay } from "../surfaces.mjs";
+import { describeDatum } from "./accessibility.mjs";
+import { formatChartValue } from "./math.mjs";
+import { chartWebProps } from "./svg.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ChartDataContext = createContext(null);
+function ChartDataView({
+  data,
+  title,
+  valueFormatter,
+  children
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const {
+    knobProps: datumKnobs
+  } = useResolvedKnobs({
+    compact: true
+  });
+  const [open, setOpen] = useState(false);
+  const id = `mpo-chart-data-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  const triggerId = `${id}-trigger`;
+  const normalized = data.map((datum, index) => typeof datum === "number" ? {
+    label: String(index + 1),
+    value: datum
+  } : datum);
+  const format = valueFormatter ?? formatChartValue;
+  const actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  const action = /* @__PURE__ */jsx(Dialog.Trigger, {
+    asChild: true,
+    children: /* @__PURE__ */jsx(Button, {
+      compact: true,
+      id: triggerId,
+      ...(isWeb ? {
+        "aria-label": actionLabel
+      } : {
+        accessibilityLabel: actionLabel
+      }),
+      ...chartWebProps({
+        "data-mpo-chart-data-trigger": id
+      }),
+      children: t("View data")
+    })
+  });
+  return /* @__PURE__ */jsx(ChartDataContext.Provider, {
+    value: {
+      id,
+      triggerId
+    },
+    children: /* @__PURE__ */jsxs(Dialog, {
+      modal: true,
+      open,
+      onOpenChange: setOpen,
+      children: [children({
+        action,
+        data: normalized,
+        valueFormatter: format
+      }), /* @__PURE__ */jsxs(Dialog.Portal, {
+        children: [/* @__PURE__ */jsx(DialogOverlay, {}, "overlay"), /* @__PURE__ */jsxs(DialogContent, {
+          width: "90%",
+          maxWidth: 480,
+          maxHeight: "80%",
+          ...chartWebProps({
+            "data-mpo-chart-data-panel": id
+          }),
+          children: [/* @__PURE__ */jsx(Dialog.Title, {
+            ...knobProps.heading,
+            ...sectionHeading,
+            children: title ? `${title}: ${t("data")}` : t("Chart data")
+          }), /* @__PURE__ */jsx(Dialog.Description, {
+            ...knobProps.body,
+            children: `${normalized.length} ${t("data points")}`
+          }), /* @__PURE__ */jsx(ScrollView, {
+            flexShrink: 1,
+            minHeight: 0,
+            children: /* @__PURE__ */jsx(YStack, {
+              ...knobProps.gap,
+              children: normalized.map((datum, index) => /* @__PURE__ */jsxs(XStack, {
+                alignItems: "flex-start",
+                flexWrap: "wrap",
+                ...datumKnobs.gap,
+                ...chartWebProps({
+                  "data-mpo-chart-data-row": String(index)
+                }),
+                ...(!isWeb ? {
+                  accessible: true,
+                  accessibilityLabel: describeDatum({
+                    datum,
+                    formatValue: format
+                  })
+                } : {}),
+                children: [/* @__PURE__ */jsx(Paragraph, {
+                  flexBasis: "50%",
+                  flexGrow: 1,
+                  flexShrink: 1,
+                  minWidth: 0,
+                  ...knobProps.body,
+                  ...chartWebProps({
+                    "data-mpo-chart-data-label": "true"
+                  }),
+                  children: datum.label
+                }), /* @__PURE__ */jsx(Paragraph, {
+                  flexShrink: 1,
+                  maxWidth: "100%",
+                  ...knobProps.body,
+                  ...chartWebProps({
+                    "data-mpo-chart-data-value": "true"
+                  }),
+                  children: format(datum.value)
+                })]
+              }, index))
+            })
+          }), /* @__PURE__ */jsx(XStack, {
+            justifyContent: "flex-end",
+            children: /* @__PURE__ */jsx(Dialog.Close, {
+              asChild: true,
+              "aria-label": t("Close"),
+              children: /* @__PURE__ */jsx(Button, {
+                "aria-label": t("Close"),
+                ...(!isWeb ? {
+                  accessibilityLabel: t("Close")
+                } : {}),
+                ...chartWebProps({
+                  "data-mpo-chart-data-close": id
+                }),
+                children: t("Close")
+              })
+            })
+          })]
+        }, "content")]
+      })]
+    })
+  });
+}
+function ChartDataFrame({
+  data,
+  title,
+  valueFormatter,
+  width,
+  children
+}) {
+  const inherited = useContext(ChartDataContext);
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  if (inherited) return children;
+  return /* @__PURE__ */jsx(ChartDataView, {
+    data,
+    title,
+    valueFormatter,
+    children: ({
+      action
+    }) => /* @__PURE__ */jsxs(YStack, {
+      minWidth: 0,
+      width: width ?? "100%",
+      maxWidth: "100%",
+      ...knobProps.gap,
+      children: [children, /* @__PURE__ */jsx(XStack, {
+        justifyContent: "flex-end",
+        children: action
+      })]
+    })
+  });
+}
+function useChartDataViewProps() {
+  const context = useContext(ChartDataContext);
+  if (!context) return {};
+  return chartWebProps({
+    "data-mpo-chart-data-view": context.id,
+    "aria-describedby": context.triggerId
+  });
+}
+export { ChartDataFrame, ChartDataView, useChartDataViewProps };
+//# sourceMappingURL=ChartDataView.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Button","isWeb","useResolvedKnobs","createContext","useContext","useId","useState","Dialog","Paragraph","ScrollView","XStack","YStack","sectionHeading","useTranslation","DialogContent","DialogOverlay","describeDatum","formatChartValue","chartWebProps","jsx","jsxs","ChartDataContext","ChartDataView","data","title","valueFormatter","children","t","knobProps","datumKnobs","compact","open","setOpen","id","replace","triggerId","normalized","map","datum","index","label","String","value","format","actionLabel","action","Trigger","asChild","accessibilityLabel","Provider","modal","onOpenChange","Portal","width","maxWidth","maxHeight","Title","heading","Description","body","length","flexShrink","minHeight","gap","alignItems","flexWrap","accessible","formatValue","flexBasis","flexGrow","minWidth","justifyContent","Close","ChartDataFrame","inherited","useChartDataViewProps","context"],"sources":["../../../src/charts/ChartDataView.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@multiplatform.one/forms";
+import { isWeb } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { createContext, useContext, useId, useState } from "react";
+import { Dialog, Paragraph, ScrollView, XStack, YStack } from "tamagui";
+import { sectionHeading } from "../componentColors.native.js";
+import { useTranslation } from "../shared/i18n.native.js";
+import { DialogContent, DialogOverlay } from "../surfaces.native.js";
+import { describeDatum } from "./accessibility.native.js";
+import { formatChartValue } from "./math.native.js";
+import { chartWebProps } from "./svg.native.js";
+var ChartDataContext = /* @__PURE__ */createContext(null);
+function ChartDataView(param) {
+  var {
+    data,
+    title,
+    valueFormatter,
+    children
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var {
+    knobProps: datumKnobs
+  } = useResolvedKnobs({
+    compact: true
+  });
+  var [open, setOpen] = useState(false);
+  var id = `mpo-chart-data-${useId().replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+  var triggerId = `${id}-trigger`;
+  var normalized = data.map(function (datum, index) {
+    return typeof datum === "number" ? {
+      label: String(index + 1),
+      value: datum
+    } : datum;
+  });
+  var format = valueFormatter !== null && valueFormatter !== void 0 ? valueFormatter : formatChartValue;
+  var actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  var action = /* @__PURE__ */_jsx(Dialog.Trigger, {
+    asChild: true,
+    children: /* @__PURE__ */_jsx(Button, {
+      compact: true,
+      id: triggerId,
+      ...(isWeb ? {
+        "aria-label": actionLabel
+      } : {
+        accessibilityLabel: actionLabel
+      }),
+      ...chartWebProps({
+        "data-mpo-chart-data-trigger": id
+      }),
+      children: t("View data")
+    })
+  });
+  return /* @__PURE__ */_jsx(ChartDataContext.Provider, {
+    value: {
+      id,
+      triggerId
+    },
+    children: /* @__PURE__ */_jsxs(Dialog, {
+      modal: true,
+      open,
+      onOpenChange: setOpen,
+      children: [children({
+        action,
+        data: normalized,
+        valueFormatter: format
+      }), /* @__PURE__ */_jsxs(Dialog.Portal, {
+        children: [/* @__PURE__ */_jsx(DialogOverlay, {}, "overlay"), /* @__PURE__ */_jsxs(DialogContent, {
+          width: "90%",
+          maxWidth: 480,
+          maxHeight: "80%",
+          ...chartWebProps({
+            "data-mpo-chart-data-panel": id
+          }),
+          children: [/* @__PURE__ */_jsx(Dialog.Title, {
+            ...knobProps.heading,
+            ...sectionHeading,
+            children: title ? `${title}: ${t("data")}` : t("Chart data")
+          }), /* @__PURE__ */_jsx(Dialog.Description, {
+            ...knobProps.body,
+            children: `${normalized.length} ${t("data points")}`
+          }), /* @__PURE__ */_jsx(ScrollView, {
+            flexShrink: 1,
+            minHeight: 0,
+            children: /* @__PURE__ */_jsx(YStack, {
+              ...knobProps.gap,
+              children: normalized.map(function (datum, index) {
+                return /* @__PURE__ */_jsxs(XStack, {
+                  alignItems: "flex-start",
+                  flexWrap: "wrap",
+                  ...datumKnobs.gap,
+                  ...chartWebProps({
+                    "data-mpo-chart-data-row": String(index)
+                  }),
+                  ...(!isWeb ? {
+                    accessible: true,
+                    accessibilityLabel: describeDatum({
+                      datum,
+                      formatValue: format
+                    })
+                  } : {}),
+                  children: [/* @__PURE__ */_jsx(Paragraph, {
+                    flexBasis: "50%",
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    minWidth: 0,
+                    ...knobProps.body,
+                    ...chartWebProps({
+                      "data-mpo-chart-data-label": "true"
+                    }),
+                    children: datum.label
+                  }), /* @__PURE__ */_jsx(Paragraph, {
+                    flexShrink: 1,
+                    maxWidth: "100%",
+                    ...knobProps.body,
+                    ...chartWebProps({
+                      "data-mpo-chart-data-value": "true"
+                    }),
+                    children: format(datum.value)
+                  })]
+                }, index);
+              })
+            })
+          }), /* @__PURE__ */_jsx(XStack, {
+            justifyContent: "flex-end",
+            children: /* @__PURE__ */_jsx(Dialog.Close, {
+              asChild: true,
+              "aria-label": t("Close"),
+              children: /* @__PURE__ */_jsx(Button, {
+                "aria-label": t("Close"),
+                ...(!isWeb ? {
+                  accessibilityLabel: t("Close")
+                } : {}),
+                ...chartWebProps({
+                  "data-mpo-chart-data-close": id
+                }),
+                children: t("Close")
+              })
+            })
+          })]
+        }, "content")]
+      })]
+    })
+  });
+}
+function ChartDataFrame(param) {
+  var {
+    data,
+    title,
+    valueFormatter,
+    width,
+    children
+  } = param;
+  var inherited = useContext(ChartDataContext);
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  if (inherited) return children;
+  return /* @__PURE__ */_jsx(ChartDataView, {
+    data,
+    title,
+    valueFormatter,
+    children: function children1(param2) {
+      var {
+        action
+      } = param2;
+      return /* @__PURE__ */_jsxs(YStack, {
+        minWidth: 0,
+        width: width !== null && width !== void 0 ? width : "100%",
+        maxWidth: "100%",
+        ...knobProps.gap,
+        children: [children, /* @__PURE__ */_jsx(XStack, {
+          justifyContent: "flex-end",
+          children: action
+        })]
+      });
+    }
+  });
+}
+function useChartDataViewProps() {
+  var context = useContext(ChartDataContext);
+  if (!context) return {};
+  return chartWebProps({
+    "data-mpo-chart-data-view": context.id,
+    "aria-describedby": context.triggerId
+  });
+}
+export { ChartDataFrame, ChartDataView, useChartDataViewProps };
+//# sourceMappingURL=ChartDataView.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Button","isWeb","useResolvedKnobs","createContext","useContext","useId","useState","Dialog","Paragraph","ScrollView","XStack","YStack","sectionHeading","useTranslation","DialogContent","DialogOverlay","describeDatum","formatChartValue","chartWebProps","ChartDataContext","ChartDataView","param","data","title","valueFormatter","children","t","knobProps","datumKnobs","compact","open","setOpen","id","replace","triggerId","normalized","map","datum","index","label","String","value","format","actionLabel","action","Trigger","asChild","accessibilityLabel","Provider","modal","onOpenChange","Portal","width","maxWidth","maxHeight","Title","heading","Description","body","length","flexShrink","minHeight","gap","alignItems","flexWrap","accessible","formatValue","flexBasis","flexGrow","minWidth","justifyContent","Close"],"sources":["../../../src/charts/ChartDataView.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/charts/ChartSurface.mjs

@@ -1,15 +1,18 @@
 import { useCallback, useState } from "react";
 import { YStack } from "tamagui";
 import { Svg, chartRootA11yProps } from "./svg.mjs";
+import { useChartDataViewProps } from "./ChartDataView.mjs";
 import { useChartTheme } from "./useChartTheme.mjs";
 import { jsx } from "react/jsx-runtime";
 function ChartSurface({
   label,
+  proof,
   height = 200,
   width: widthProp,
   children,
   ...stackProps
 }) {
+  const dataViewProps = useChartDataViewProps();
   const {
     transition,
     animationEnabled
@@ -36,7 +39,8 @@ function ChartSurface({
     children: width > 0 ? /* @__PURE__ */jsx(Svg, {
       width,
       height,
-      ...chartRootA11yProps(label),
+      ...chartRootA11yProps(label, proof),
+      ...dataViewProps,
       children: children({
         width,
         height

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

@@ -1 +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":[]}
+{"version":3,"names":["useCallback","useState","YStack","Svg","chartRootA11yProps","useChartDataViewProps","useChartTheme","jsx","ChartSurface","label","proof","height","width","widthProp","children","stackProps","dataViewProps","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,QAAsD;AACpE,SAASC,qBAAA,QAA6B;AAEtC,SAASC,aAAA,QAAqB;AA8DtB,SAAAC,GAAA;AA5BD,SAASC,aAAa;EAC3BC,KAAA;EACAC,KAAA;EACAC,MAAA,GAAS;EACTC,KAAA,EAAOC,SAAA;EACPC,QAAA;EACA,GAAGC;AACL,GAAsB;EACpB,MAAMC,aAAA,GAAgBX,qBAAA,CAAsB;EAC5C,MAAM;IAAEY,UAAA;IAAYC;EAAiB,IAAIZ,aAAA,CAAc;EACvD,MAAM,CAACa,aAAA,EAAeC,gBAAgB,IAAInB,QAAA,CAAS,CAAC;EACpD,MAAMW,KAAA,GAAQC,SAAA,IAAaM,aAAA;EAE3B,MAAME,YAAA,GAAerB,WAAA,CAAasB,KAAA,IAA6B;IAC7D,MAAMC,IAAA,GAAOD,KAAA,CAAME,WAAA,CAAYC,MAAA,CAAOb,KAAA;IACtCQ,gBAAA,CAAkBM,IAAA,IAAUC,IAAA,CAAKC,GAAA,CAAIF,IAAA,GAAOH,IAAI,KAAK,MAAMA,IAAA,GAAOG,IAAK;EACzE,GAAG,EAAE;EAEL,OACE,eAAAnB,GAAA,CAACL,MAAA;IACCU,KAAA,EAAM;IACND,MAAA;IACAkB,QAAA,EAAS;IACTC,QAAA,EAAUjB,SAAA,KAAc,SAAYQ,YAAA,GAAe;IAClD,IAAIH,gBAAA,GAAmB;MAAED,UAAA;MAAYc,UAAA,EAAY;QAAEC,OAAA,EAAS;QAAGC,CAAA,EAAG;MAAE;IAAE,IAAI,CAAC;IAC3E,GAAGlB,UAAA;IAEHD,QAAA,EAAAF,KAAA,GAAQ,IACP,eAAAL,GAAA,CAACJ,GAAA;MAAIS,KAAA;MAAcD,MAAA;MAAiB,GAAGP,kBAAA,CAAmBK,KAAA,EAAOC,KAAK;MAAI,GAAGM,aAAA;MAC1EF,QAAA,EAAAA,QAAA,CAAS;QAAEF,KAAA;QAAOD;MAAO,CAAC;IAAA,CAC7B,IACE;EAAA,CACN;AAEJ","ignoreList":[]}