@multiplatform.one/components 7.7.4 → 7.8.0

package/dist/cjs/views/Dashboard.cjs

@@ -35,6 +35,7 @@ __export(Dashboard_exports, {
 });
 module.exports = __toCommonJS(Dashboard_exports);
 var import_Meter = require("../Meter/index.cjs");
+var import_ChartDataView = require("../charts/ChartDataView.cjs");
 var import_BarChart = require("../charts/BarChart.cjs");
 var import_LineChart = require("../charts/LineChart.cjs");
 var import_PieChart = require("../charts/PieChart.cjs");
@@ -71,6 +72,11 @@ function trendFill(color) {
   if (color === import_componentColors.componentColors.semantic.error) return "$red4";
   return "$color4";
 }
+function trendInk(color) {
+  if (color === import_componentColors.componentColors.semantic.success) return "$green12";
+  if (color === import_componentColors.componentColors.semantic.error) return "$red12";
+  return color;
+}
 function useWidgetChrome(onPress) {
   const resolved = (0, import_theme.useResolvedKnobs)();
   const {
@@ -131,11 +137,11 @@ function TrendPill({
     "data-nested-px": px,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...label,
-      color,
+      color: trendInk(color),
       children: symbol
     }), value != null && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...label,
-      color,
+      color: trendInk(color),
       children: value
     })]
   });
@@ -152,15 +158,26 @@ function KPICard({
   const {
     t
   } = (0, import_i18n.useTranslation)();
+  const {
+    onPress: consumerOnPress,
+    ...cardProps
+  } = stackProps;
+  const onPress = Object.hasOwn(stackProps, "onPress") ? consumerOnPress : config.onClick;
   const {
     knobProps,
     nested,
     interactive
-  } = useWidgetChrome(config.onClick);
+  } = useWidgetChrome(onPress);
   const {
     px,
     box
   } = nested;
+  const [dataActionSize, setDataActionSize] = (0, import_react.useState)({
+    width: 0,
+    height: 44
+  });
+  const [dataHeaderHeight, setDataHeaderHeight] = (0, import_react.useState)(44);
+  const hasDataView = Boolean(config.sparkline?.length);
   const formatMetric = (0, import_react.useCallback)(num => {
     if (config.format === "currency") {
       return (0, import_theme.formatCurrency)(num, {
@@ -178,15 +195,12 @@ function KPICard({
     if (config.trend === "down") return "\u2193";
     return "\u2014";
   }, [config.trend]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.Card, {
-    width: "100%",
-    elevation: knobProps.elevation,
-    ...knobProps.surface,
-    ...interactive,
-    ...stackProps,
+  const content = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       justifyContent: "space-between",
-      alignItems: "flex-start",
+      alignItems: "center",
+      ...knobProps.gap,
+      onLayout: hasDataView ? event => setDataHeaderHeight(event.nativeEvent.layout.height) : void 0,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         ...knobProps.label,
         color: knobProps.textAccentColor,
@@ -198,6 +212,10 @@ function KPICard({
         px,
         radius: knobProps.borderRadius,
         children: config.icon
+      }) : null, hasDataView ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        width: dataActionSize.width,
+        height: dataActionSize.height,
+        pointerEvents: "none"
       }) : null]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: "$8",
@@ -207,7 +225,8 @@ function KPICard({
     }), config.sparkline && config.sparkline.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Sparkline.Sparkline, {
       data: config.sparkline,
       height: px,
-      title: config.title
+      title: config.title,
+      valueFormatter: formatMetric
     }) : null, (config.trend || config.trendValue) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       gap: "$2",
       alignItems: "center",
@@ -228,6 +247,64 @@ function KPICard({
       })]
     })]
   });
+  if (!hasDataView) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+    width: "100%",
+    elevation: knobProps.elevation,
+    ...knobProps.surface,
+    ...interactive,
+    ...stackProps,
+    children: content
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataView, {
+    data: config.sparkline,
+    title: config.title,
+    valueFormatter: formatMetric,
+    children: ({
+      action
+    }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+      width: "100%",
+      elevation: knobProps.elevation,
+      ...knobProps.surface,
+      ...cardProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        position: "relative",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          ...knobProps.gap,
+          ...knobProps.containerRadius,
+          ...interactive,
+          focusable: Boolean(onPress),
+          ...(import_tamagui.isWeb ? {
+            "data-mpo-kpi-navigation": config.id,
+            tabIndex: onPress ? 0 : void 0,
+            onKeyDown: onPress ? event => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                if (!event.repeat) event.currentTarget.click();
+              }
+            } : void 0
+          } : {}),
+          children: content
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          position: "absolute",
+          top: Math.max(0, (dataHeaderHeight - dataActionSize.height) / 2),
+          right: 0,
+          minHeight: 44,
+          justifyContent: "center",
+          onLayout: event => {
+            const {
+              width,
+              height
+            } = event.nativeEvent.layout;
+            setDataActionSize(previous => previous.width === width && previous.height === height ? previous : {
+              width,
+              height
+            });
+          },
+          children: action
+        })]
+      })
+    })
+  });
 }
 function ChartCard({
   config,
@@ -241,15 +318,22 @@ function ChartCard({
   const HeadingTag = SECTION_HEADING_TAGS[headingLevel];
   const dataColors = config.colors ?? colors;
   const showXAxis = config.showLabels !== false;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+  const renderCard = action => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
     width: "100%",
     ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
-      margin: 0,
-      ...knobProps.heading,
-      ...import_componentColors.sectionHeading,
-      children: config.title
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      ...knobProps.gap,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
+        flex: 1,
+        minWidth: 0,
+        margin: 0,
+        ...knobProps.heading,
+        ...import_componentColors.sectionHeading,
+        children: config.title
+      }), action]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
       elevation: knobProps.elevation,
       ...knobProps.surface,
@@ -262,6 +346,7 @@ function ChartCard({
         title: config.title
       }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
         data: config.data,
+        title: config.title,
         height: config.height,
         color: dataColors?.[0],
         showPoints: true,
@@ -269,6 +354,7 @@ function ChartCard({
         showYAxis: false
       }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
         data: config.data,
+        title: config.title,
         height: config.height,
         colors: dataColors,
         showXAxis,
@@ -276,6 +362,13 @@ function ChartCard({
       })
     })]
   });
+  return config.type === "pie" && config.showLegend !== false ? renderCard() : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataView, {
+    data: config.data,
+    title: config.title,
+    children: ({
+      action
+    }) => renderCard(action)
+  });
 }
 function ProgressCard({
   config,

package/dist/cjs/views/Dashboard.native.js

@@ -48,7 +48,8 @@ __export(Dashboard_exports, {
 });
 module.exports = __toCommonJS(Dashboard_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_Meter = require("../Meter");
+var import_Meter = require("../Meter/index.native.js");
+var import_ChartDataView = require("../charts/ChartDataView.native.js");
 var import_BarChart = require("../charts/BarChart.native.js");
 var import_LineChart = require("../charts/LineChart.native.js");
 var import_PieChart = require("../charts/PieChart.native.js");
@@ -84,6 +85,11 @@ function trendFill(color) {
   if (color === import_componentColors.componentColors.semantic.error) return "$red4";
   return "$color4";
 }
+function trendInk(color) {
+  if (color === import_componentColors.componentColors.semantic.success) return "$green12";
+  if (color === import_componentColors.componentColors.semantic.error) return "$red12";
+  return color;
+}
 function useWidgetChrome(onPress) {
   var resolved = (0, import_theme.useResolvedKnobs)();
   var {
@@ -146,11 +152,11 @@ function TrendPill(param) {
     "data-nested-px": px,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...label,
-      color,
+      color: trendInk(color),
       children: symbol
     }), value != null && value !== "" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       ...label,
-      color,
+      color: trendInk(color),
       children: value
     })]
   });
@@ -165,18 +171,30 @@ function KPICard(param) {
     config,
     ...stackProps
   } = param;
+  var _config_sparkline;
   var {
     t
   } = (0, import_i18n.useTranslation)();
+  var {
+    onPress: consumerOnPress,
+    ...cardProps
+  } = stackProps;
+  var onPress = Object.hasOwn(stackProps, "onPress") ? consumerOnPress : config.onClick;
   var {
     knobProps,
     nested,
     interactive
-  } = useWidgetChrome(config.onClick);
+  } = useWidgetChrome(onPress);
   var {
     px,
     box
   } = nested;
+  var [dataActionSize, setDataActionSize] = (0, import_react.useState)({
+    width: 0,
+    height: 44
+  });
+  var [dataHeaderHeight, setDataHeaderHeight] = (0, import_react.useState)(44);
+  var hasDataView = Boolean((_config_sparkline = config.sparkline) === null || _config_sparkline === void 0 ? void 0 : _config_sparkline.length);
   var formatMetric = (0, import_react.useCallback)(function (num) {
     if (config.format === "currency") {
       return (0, import_theme.formatCurrency)(num, {
@@ -198,15 +216,14 @@ function KPICard(param) {
     if (config.trend === "down") return "\u2193";
     return "\u2014";
   }, [config.trend]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.Card, {
-    width: "100%",
-    elevation: knobProps.elevation,
-    ...knobProps.surface,
-    ...interactive,
-    ...stackProps,
+  var content = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       justifyContent: "space-between",
-      alignItems: "flex-start",
+      alignItems: "center",
+      ...knobProps.gap,
+      onLayout: hasDataView ? function (event) {
+        return setDataHeaderHeight(event.nativeEvent.layout.height);
+      } : void 0,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         ...knobProps.label,
         color: knobProps.textAccentColor,
@@ -218,6 +235,10 @@ function KPICard(param) {
         px,
         radius: knobProps.borderRadius,
         children: config.icon
+      }) : null, hasDataView ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        width: dataActionSize.width,
+        height: dataActionSize.height,
+        pointerEvents: "none"
       }) : null]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: "$8",
@@ -227,7 +248,8 @@ function KPICard(param) {
     }), config.sparkline && config.sparkline.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Sparkline.Sparkline, {
       data: config.sparkline,
       height: px,
-      title: config.title
+      title: config.title,
+      valueFormatter: formatMetric
     }) : null, (config.trend || config.trendValue) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       gap: "$2",
       alignItems: "center",
@@ -248,6 +270,69 @@ function KPICard(param) {
       })]
     })]
   });
+  if (!hasDataView) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+    width: "100%",
+    elevation: knobProps.elevation,
+    ...knobProps.surface,
+    ...interactive,
+    ...stackProps,
+    children: content
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataView, {
+    data: config.sparkline,
+    title: config.title,
+    valueFormatter: formatMetric,
+    children: function children(param2) {
+      var {
+        action
+      } = param2;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+        width: "100%",
+        elevation: knobProps.elevation,
+        ...knobProps.surface,
+        ...cardProps,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          position: "relative",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            ...knobProps.gap,
+            ...knobProps.containerRadius,
+            ...interactive,
+            focusable: Boolean(onPress),
+            ...(import_tamagui.isWeb ? {
+              "data-mpo-kpi-navigation": config.id,
+              tabIndex: onPress ? 0 : void 0,
+              onKeyDown: onPress ? function (event) {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  if (!event.repeat) event.currentTarget.click();
+                }
+              } : void 0
+            } : {}),
+            children: content
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            position: "absolute",
+            top: Math.max(0, (dataHeaderHeight - dataActionSize.height) / 2),
+            right: 0,
+            minHeight: 44,
+            justifyContent: "center",
+            onLayout: function onLayout(event) {
+              var {
+                width,
+                height
+              } = event.nativeEvent.layout;
+              setDataActionSize(function (previous) {
+                return previous.width === width && previous.height === height ? previous : {
+                  width,
+                  height
+                };
+              });
+            },
+            children: action
+          })]
+        })
+      });
+    }
+  });
 }
 function ChartCard(param) {
   var {
@@ -263,40 +348,61 @@ function ChartCard(param) {
   var HeadingTag = SECTION_HEADING_TAGS[headingLevel];
   var dataColors = (_config_colors = config.colors) !== null && _config_colors !== void 0 ? _config_colors : colors;
   var showXAxis = config.showLabels !== false;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.gap,
-    width: "100%",
-    ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
-      margin: 0,
-      ...knobProps.heading,
-      ...import_componentColors.sectionHeading,
-      children: config.title
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
-      elevation: knobProps.elevation,
-      ...knobProps.surface,
-      children: config.type === "pie" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PieChart.PieChart, {
-        data: config.data,
-        height: config.height,
-        donut: 0.5,
-        colors: dataColors,
-        showLegend: config.showLegend,
-        title: config.title
-      }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
-        data: config.data,
-        height: config.height,
-        color: dataColors === null || dataColors === void 0 ? void 0 : dataColors[0],
-        showPoints: true,
-        showXAxis,
-        showYAxis: false
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
-        data: config.data,
-        height: config.height,
-        colors: dataColors,
-        showXAxis,
-        showYAxis: false
-      })
-    })]
+  var renderCard = function renderCard2(action) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.gap,
+      width: "100%",
+      ...stackProps,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        ...knobProps.gap,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
+          flex: 1,
+          minWidth: 0,
+          margin: 0,
+          ...knobProps.heading,
+          ...import_componentColors.sectionHeading,
+          children: config.title
+        }), action]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.Card, {
+        elevation: knobProps.elevation,
+        ...knobProps.surface,
+        children: config.type === "pie" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_PieChart.PieChart, {
+          data: config.data,
+          height: config.height,
+          donut: 0.5,
+          colors: dataColors,
+          showLegend: config.showLegend,
+          title: config.title
+        }) : config.type === "line" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LineChart.LineChart, {
+          data: config.data,
+          title: config.title,
+          height: config.height,
+          color: dataColors === null || dataColors === void 0 ? void 0 : dataColors[0],
+          showPoints: true,
+          showXAxis,
+          showYAxis: false
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BarChart.BarChart, {
+          data: config.data,
+          title: config.title,
+          height: config.height,
+          colors: dataColors,
+          showXAxis,
+          showYAxis: false
+        })
+      })]
+    });
+  };
+  return config.type === "pie" && config.showLegend !== false ? renderCard() : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ChartDataView.ChartDataView, {
+    data: config.data,
+    title: config.title,
+    children: function children(param2) {
+      var {
+        action
+      } = param2;
+      return renderCard(action);
+    }
   });
 }
 function ProgressCard(param) {