@multiplatform.one/components 7.7.6 → 7.10.0

package/dist/cjs/charts/BarChart.cjs

@@ -27,6 +27,7 @@ __export(BarChart_exports, {
 module.exports = __toCommonJS(BarChart_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,63 +75,76 @@ function BarChart({
     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 = domainProp ?? (0, import_math.valueDomain)(data.map(datum => datum.value));
-      const nice = domainProp ? false : void 0;
-      const marginScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [0, 1],
-        nice
-      });
-      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.createBandScale)({
-        domain: data.map(datum => datum.label),
-        range: [plot.x, plot.x + plot.width]
-      });
-      const yScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [plot.y + plot.height, plot.y],
-        nice
-      });
-      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, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.BarSeries, {
-          data,
-          xScale,
-          yScale,
-          plot,
-          fills,
-          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: "bar",
+        separated: true,
+        datumText: false,
+        datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: size => {
+        const domain = domainProp ?? (0, import_math.valueDomain)(data.map(datum => datum.value));
+        const nice = domainProp ? false : void 0;
+        const marginScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [0, 1],
+          nice
+        });
+        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.createBandScale)({
+          domain: data.map(datum => datum.label),
+          range: [plot.x, plot.x + plot.width]
+        });
+        const yScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [plot.y + plot.height, plot.y],
+          nice
+        });
+        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, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.BarSeries, {
+            data,
+            xScale,
+            yScale,
+            plot,
+            fills,
+            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]
+        });
+      }
+    })
   });
 }

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

@@ -30,6 +30,7 @@ module.exports = __toCommonJS(BarChart_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_i18n = require("../shared/i18n.native.js");
 var import_Axis = require("./Axis.native.js");
+var import_ChartDataView = require("./ChartDataView.native.js");
 var import_ChartSurface = require("./ChartSurface.native.js");
 var import_accessibility = require("./accessibility.native.js");
 var import_composeChart = require("./composeChart.native.js");
@@ -77,76 +78,89 @@ function BarChart(param) {
     formatValue: valueFormatter
   });
   var interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
-    label: ariaLabel,
-    height,
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataFrame, {
+    data,
+    title,
+    valueFormatter,
     width,
-    ...stackProps,
-    children: function children(size) {
-      var domain = domainProp !== null && domainProp !== void 0 ? domainProp : (0, import_math.valueDomain)(data.map(function (datum) {
-        return datum.value;
-      }));
-      var nice = domainProp ? false : void 0;
-      var marginScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [0, 1],
-        nice
-      });
-      var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
-      var plot = (0, import_composeChart.computeCartesianPlot)(size, {
-        showXAxis,
-        showYAxis,
-        yTickLabels: tickValues.map(function (value) {
-          return format(value);
-        }),
-        fontSize: labelFontSize
-      });
-      if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-      var xScale = (0, import_math.createBandScale)({
-        domain: data.map(function (datum) {
-          return datum.label;
-        }),
-        range: [plot.x, plot.x + plot.width]
-      });
-      var yScale = (0, import_math.createLinearScale)({
-        domain,
-        range: [plot.y + plot.height, plot.y],
-        nice
-      });
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
-          plot,
-          scale: yScale,
-          ticks: yTicks,
-          tickFormat: function tickFormat(value) {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartSurface.ChartSurface, {
+      label: ariaLabel,
+      proof: {
+        kind: "bar",
+        separated: true,
+        datumText: false,
+        datumValues: (0, import_accessibility.chartDatumText)(data, valueFormatter),
+        datumCount: data.length
+      },
+      height,
+      width,
+      ...stackProps,
+      children: function children(size) {
+        var domain = domainProp !== null && domainProp !== void 0 ? domainProp : (0, import_math.valueDomain)(data.map(function (datum) {
+          return datum.value;
+        }));
+        var nice = domainProp ? false : void 0;
+        var marginScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [0, 1],
+          nice
+        });
+        var tickValues = (0, import_math.getLinearTicks)(marginScale, yTicks);
+        var plot = (0, import_composeChart.computeCartesianPlot)(size, {
+          showXAxis,
+          showYAxis,
+          yTickLabels: tickValues.map(function (value) {
             return format(value);
-          },
-          showLabels: showYAxis,
-          showGrid
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.BarSeries, {
-          data,
-          xScale,
-          yScale,
-          plot,
-          fills,
-          onDatumPress,
-          onDatumHoverIn,
-          onDatumHoverOut,
-          datumLabel: interactive ? function (datum) {
-            return (0, import_accessibility.describeDatum)({
-              datum,
-              formatValue: valueFormatter
-            });
-          } : void 0
-        }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
-          plot,
-          scale: xScale,
-          tickValues: (0, import_composeChart.thinCategories)(data.map(function (datum) {
+          }),
+          fontSize: labelFontSize
+        });
+        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+        var xScale = (0, import_math.createBandScale)({
+          domain: data.map(function (datum) {
             return datum.label;
-          }), plot.width, labelFontSize)
-        }) : null]
-      });
-    }
+          }),
+          range: [plot.x, plot.x + plot.width]
+        });
+        var yScale = (0, import_math.createLinearScale)({
+          domain,
+          range: [plot.y + plot.height, plot.y],
+          nice
+        });
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [showYAxis || showGrid ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.YAxis, {
+            plot,
+            scale: yScale,
+            ticks: yTicks,
+            tickFormat: function tickFormat(value) {
+              return format(value);
+            },
+            showLabels: showYAxis,
+            showGrid
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_series.BarSeries, {
+            data,
+            xScale,
+            yScale,
+            plot,
+            fills,
+            onDatumPress,
+            onDatumHoverIn,
+            onDatumHoverOut,
+            datumLabel: interactive ? function (datum) {
+              return (0, import_accessibility.describeDatum)({
+                datum,
+                formatValue: valueFormatter
+              });
+            } : void 0
+          }), showXAxis ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Axis.XAxis, {
+            plot,
+            scale: xScale,
+            tickValues: (0, import_composeChart.thinCategories)(data.map(function (datum) {
+              return datum.label;
+            }), plot.width, labelFontSize)
+          }) : null]
+        });
+      }
+    })
   });
 }
 //# sourceMappingURL=BarChart.native.js.map

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

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

package/dist/cjs/charts/ChartDataView.cjs

@@ -0,0 +1,212 @@
+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_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.cjs");
+var import_i18n = require("../shared/i18n.cjs");
+var import_surfaces = require("../surfaces.cjs");
+var import_accessibility = require("./accessibility.cjs");
+var import_math = require("./math.cjs");
+var import_svg = require("./svg.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ChartDataContext = (0, import_react.createContext)(null);
+function ChartDataView({
+  data,
+  title,
+  valueFormatter,
+  children
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    knobProps: datumKnobs
+  } = (0, import_theme.useResolvedKnobs)({
+    compact: true
+  });
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const id = `mpo-chart-data-${(0, import_react.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 ?? import_math.formatChartValue;
+  const actionLabel = title ? `${t("View data for")} ${title}` : t("View chart data");
+  const 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((datum, index) => /* @__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({
+  data,
+  title,
+  valueFormatter,
+  width,
+  children
+}) {
+  const inherited = (0, import_react.useContext)(ChartDataContext);
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  if (inherited) return children;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartDataView, {
+    data,
+    title,
+    valueFormatter,
+    children: ({
+      action
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      minWidth: 0,
+      width: width ?? "100%",
+      maxWidth: "100%",
+      ...knobProps.gap,
+      children: [children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        justifyContent: "flex-end",
+        children: action
+      })]
+    })
+  });
+}
+function useChartDataViewProps() {
+  const 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
+  });
+}