@multiplatform.one/components 7.7.6 → 7.10.0

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

@@ -0,0 +1,224 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ChartDataView_exports = {};
+__export(ChartDataView_exports, {
+  ChartDataFrame: () => ChartDataFrame,
+  ChartDataView: () => ChartDataView,
+  useChartDataViewProps: () => useChartDataViewProps
+});
+module.exports = __toCommonJS(ChartDataView_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_forms = require("@multiplatform.one/forms");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.native.js");
+var import_i18n = require("../shared/i18n.native.js");
+var import_surfaces = require("../surfaces.native.js");
+var import_accessibility = require("./accessibility.native.js");
+var import_math = require("./math.native.js");
+var import_svg = require("./svg.native.js");
+var ChartDataContext = /* @__PURE__ */(0, import_react.createContext)(null);
+function ChartDataView(param) {
+  var {
+    data,
+    title,
+    valueFormatter,
+    children
+  } = param;
+  var {
+    t
+  } = (0, import_i18n.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var {
+    knobProps: datumKnobs
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  var [open, setOpen] = (0, import_react.useState)(false);
+  var id = `mpo-chart-data-${(0, import_react.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 : import_math.formatChartValue;
+  var actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  var action = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Trigger, {
+    asChild: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      compact: true,
+      id: triggerId,
+      ...(import_platform.isWeb ? {
+        "aria-label": actionLabel
+      } : {
+        accessibilityLabel: actionLabel
+      }),
+      ...(0, import_svg.chartWebProps)({
+        "data-mpo-chart-data-trigger": id
+      }),
+      children: t("View data")
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataContext.Provider, {
+    value: {
+      id,
+      triggerId
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog, {
+      modal: true,
+      open,
+      onOpenChange: setOpen,
+      children: [children({
+        action,
+        data: normalized,
+        valueFormatter: format
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.DialogOverlay, {}, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.DialogContent, {
+          width: "90%",
+          maxWidth: 480,
+          maxHeight: "80%",
+          ...(0, import_svg.chartWebProps)({
+            "data-mpo-chart-data-panel": id
+          }),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+            ...knobProps.heading,
+            ...import_componentColors.sectionHeading,
+            children: title ? `${title}: ${t("data")}` : t("Chart data")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, {
+            ...knobProps.body,
+            children: `${normalized.length} ${t("data points")}`
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            flexShrink: 1,
+            minHeight: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              ...knobProps.gap,
+              children: normalized.map(function (datum, index) {
+                return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  alignItems: "flex-start",
+                  flexWrap: "wrap",
+                  ...datumKnobs.gap,
+                  ...(0, import_svg.chartWebProps)({
+                    "data-mpo-chart-data-row": String(index)
+                  }),
+                  ...(!import_platform.isWeb ? {
+                    accessible: true,
+                    accessibilityLabel: (0, import_accessibility.describeDatum)({
+                      datum,
+                      formatValue: format
+                    })
+                  } : {}),
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                    flexBasis: "50%",
+                    flexGrow: 1,
+                    flexShrink: 1,
+                    minWidth: 0,
+                    ...knobProps.body,
+                    ...(0, import_svg.chartWebProps)({
+                      "data-mpo-chart-data-label": "true"
+                    }),
+                    children: datum.label
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+                    flexShrink: 1,
+                    maxWidth: "100%",
+                    ...knobProps.body,
+                    ...(0, import_svg.chartWebProps)({
+                      "data-mpo-chart-data-value": "true"
+                    }),
+                    children: format(datum.value)
+                  })]
+                }, index);
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            justifyContent: "flex-end",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+              asChild: true,
+              "aria-label": t("Close"),
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                "aria-label": t("Close"),
+                ...(!import_platform.isWeb ? {
+                  accessibilityLabel: t("Close")
+                } : {}),
+                ...(0, import_svg.chartWebProps)({
+                  "data-mpo-chart-data-close": id
+                }),
+                children: t("Close")
+              })
+            })
+          })]
+        }, "content")]
+      })]
+    })
+  });
+}
+function ChartDataFrame(param) {
+  var {
+    data,
+    title,
+    valueFormatter,
+    width,
+    children
+  } = param;
+  var inherited = (0, import_react.useContext)(ChartDataContext);
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  if (inherited) return children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataView, {
+    data,
+    title,
+    valueFormatter,
+    children: function children1(param2) {
+      var {
+        action
+      } = param2;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        minWidth: 0,
+        width: width !== null && width !== void 0 ? width : "100%",
+        maxWidth: "100%",
+        ...knobProps.gap,
+        children: [children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          justifyContent: "flex-end",
+          children: action
+        })]
+      });
+    }
+  });
+}
+function useChartDataViewProps() {
+  var context = (0, import_react.useContext)(ChartDataContext);
+  if (!context) return {};
+  return (0, import_svg.chartWebProps)({
+    "data-mpo-chart-data-view": context.id,
+    "aria-describedby": context.triggerId
+  });
+}
+//# sourceMappingURL=ChartDataView.native.js.map

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

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

package/dist/cjs/charts/ChartSurface.cjs

@@ -28,15 +28,18 @@ module.exports = __toCommonJS(ChartSurface_exports);
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_svg = require("./svg.cjs");
+var import_ChartDataView = require("./ChartDataView.cjs");
 var import_useChartTheme = require("./useChartTheme.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ChartSurface({
   label,
+  proof,
   height = 200,
   width: widthProp,
   children,
   ...stackProps
 }) {
+  const dataViewProps = (0, import_ChartDataView.useChartDataViewProps)();
   const {
     transition,
     animationEnabled
@@ -63,7 +66,8 @@ function ChartSurface({
     children: width > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_svg.Svg, {
       width,
       height,
-      ...(0, import_svg.chartRootA11yProps)(label),
+      ...(0, import_svg.chartRootA11yProps)(label, proof),
+      ...dataViewProps,
       children: children({
         width,
         height

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

@@ -31,15 +31,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
 var import_svg = require("./svg.native.js");
+var import_ChartDataView = require("./ChartDataView.native.js");
 var import_useChartTheme = require("./useChartTheme.native.js");
 function ChartSurface(param) {
   var {
     label,
+    proof,
     height = 200,
     width: widthProp,
     children,
     ...stackProps
   } = param;
+  var dataViewProps = (0, import_ChartDataView.useChartDataViewProps)();
   var {
     transition,
     animationEnabled
@@ -68,7 +71,8 @@ function ChartSurface(param) {
     children: width > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_svg.Svg, {
       width,
       height,
-      ...(0, import_svg.chartRootA11yProps)(label),
+      ...(0, import_svg.chartRootA11yProps)(label, proof),
+      ...dataViewProps,
       children: children({
         width,
         height

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ChartSurface_exports","__export","ChartSurface","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_svg","import_useChartTheme","param","label","height","width","widthProp","children","stackProps","transition","animationEnabled","useChartTheme","measuredWidth","setMeasuredWidth","useState","handleLayout","useCallback","event","next","nativeEvent","layout","prev","Math","abs","jsx","YStack","overflow","onLayout","enterStyle","opacity","y","Svg"],"sources":["../../../src/charts/ChartSurface.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAsD,CAAAK,oBAAA;AAEtD,IAAAK,kBAAyC,GAAAC,OAAA;AACzC,IAAAC,YAAA,GAAwCD,OAAA;AAExC,IAAAE,cAAA,GAAAF,OAA8B;AA0DtB,IAAAG,UAAA,GAAAH,OAAA;AA1BD,IAAAI,oBAAsB,GAAAJ,OAAA;AAAA,SAC3BJ,aAAAS,KAAA;EACA;IAAAC,KAAS;IAAAC,MAAA;IAAAC,KAAA,EAAAC,SAAA;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAN,KAAA;EACT;IAAAO,UAAO;IAAAC;EAAA,QAAAT,oBAAA,CAAAU,aAAA;EACP,KAAAC,aAAA,EAAAC,gBAAA,QAAAf,YAAA,CAAAgB,QAAA;EACA,IAAGT,KAAA,GAAAC,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAAM,aAAA;EACL,IAAsBG,YAAA,OAAAjB,YAAA,CAAAkB,WAAA,YAAAC,KAAA;IACpB,IAAMC,IAAE,GAAAD,KAAA,CAAAE,WAAY,CAAAC,MAAiB,CAAAf,KAAA;IACrCQ,gBAAO,WAAeQ,IAAA;MACtB,OAAMC,IAAQ,CAAAC,GAAA,CAAAF,IAAA,GAAaH,IAAA,WAAAA,IAAA,GAAAG,IAAA;IAE3B;EACE;EACA,sBAAkB,IAAAzB,kBAA0B,CAAA4B,GAAI,EAAAzB,cAAW,CAAA0B,MAAY;IACzEpB,KAAK;IAELD,MACE;IAACsB,QAAA;IAAAC,QAAA,EAAArB,SAAA,cAAAS,YAAA;IAAA,IACCL,gBAAM;MACND,UAAA;MACAmB,UAAS;QACTC,OAAA,EAAU;QACTC,CAAI;MACJ;IAAG,IAEH;IAIG,GAAAtB,UAAA;IACND,QAAA,EAAAF,KAAA,0BAAAT,kBAAA,CAAA4B,GAAA,EAAAxB,UAAA,CAAA+B,GAAA;MAEJ1B,KAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ChartSurface_exports","__export","ChartSurface","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_svg","import_ChartDataView","import_useChartTheme","param","label","proof","height","width","widthProp","children","stackProps","dataViewProps","useChartDataViewProps","transition","animationEnabled","useChartTheme","measuredWidth","setMeasuredWidth","useState","handleLayout","useCallback","event","next","nativeEvent","layout","prev","Math","abs","jsx","YStack","overflow","onLayout","enterStyle","opacity","y","Svg"],"sources":["../../../src/charts/ChartSurface.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,oBAAA;AAAAC,QAAA,CAAAD,oBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAsD,CAAAK,oBAAA;AAEtD,IAAAK,kBAAyC,GAAAC,OAAA;AACzC,IAAAC,YAAA,GAAoED,OAAA;AACpE,IAAAE,cAAA,GAAAF,OAAsC;AAEtC,IAAAG,UAAA,GAAAH,OAAA,kBAA8B;AA8DtB,IAAAI,oBAAA,GAAAJ,OAAA;AA5BD,IAAAK,oBAAsB,GAAAL,OAAA;AAAA,SAC3BJ,aAAAU,KAAA;EACA;IAAAC,KAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,KAAA,EAAAC,SAAA;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAP,KAAA;EACA,IAAAQ,aAAS,OAAAV,oBAAA,CAAAW,qBAAA;EACT;IAAAC,UAAO;IAAAC;EAAA,QAAAZ,oBAAA,CAAAa,aAAA;EACP,KAAAC,aAAA,EAAAC,gBAAA,QAAAnB,YAAA,CAAAoB,QAAA;EACA,IAAGX,KAAA,GAAAC,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAAQ,aAAA;EACL,IAAsBG,YAAA,OAAArB,YAAA,CAAAsB,WAAA,YAAAC,KAAA;IACpB,IAAMC,IAAA,GAAAD,KAAA,CAAAE,WAAgB,CAAAC,MAAA,CAAAjB,KAAA;IACtBU,gBAAQ,WAAYQ,IAAA;MACpB,OAAOC,IAAA,CAAAC,GAAA,CAAAF,IAAe,GAAAH,IAAA,QAAgB,GAAAA,IAAI,GAAAG,IAAA;IAC1C;EAEA,MAAM;EACJ,sBAAmB,IAAA7B,kBAAmB,CAAAgC,GAAA,EAAA7B,cAAA,CAAA8B,MAAA;IACtCtB,KAAA;IACFD,MAAK;IAELwB,QACE;IAACC,QAAA,EAAAvB,SAAA,cAAAW,YAAA;IAAA,IAAAL,gBAAA;MACCD,UAAM;MACNmB,UAAA;QACAC,OAAA,EAAS;QACTC,CAAA;MACC;IAA2E,IAC3E,CAAG;IAAA,GAEHxB,UAAA;IAIGD,QAAA,EAAAF,KAAA,0BAAAX,kBAAA,CAAAgC,GAAA,EAAA5B,UAAA,CAAAmC,GAAA;MACN5B,KAAA;MAEJD,MAAA","ignoreList":[]}

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) {