@multiplatform.one/components 6.1.0 → 6.3.0

package/dist/cjs/views/Dashboard.cjs

@@ -27,15 +27,32 @@ __export(Dashboard_exports, {
   KPICard: () => KPICard,
   aggregateData: () => aggregateData,
   calculatePercentageChange: () => calculatePercentageChange,
-  calculateTrend: () => calculateTrend
+  calculateTrend: () => calculateTrend,
+  resolveTrendColor: () => resolveTrendColor
 });
 module.exports = __toCommonJS(Dashboard_exports);
+var import_BarChart = require("../charts/BarChart.cjs");
+var import_LineChart = require("../charts/LineChart.cjs");
+var import_PieChart = require("../charts/PieChart.cjs");
 var import_componentColors = require("../componentColors.cjs");
+var import_AsyncBoundary = require("../layouts/AsyncBoundary.cjs");
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
+var import_react_i18next = require("react-i18next");
 var import_tamagui = require("tamagui");
 var import_jsx_runtime = require("react/jsx-runtime");
-const defaultChartColors = ["var(--accentBackground)", "var(--color7)", "var(--color8)", "var(--color9)", "var(--color10)", "var(--color11)", "var(--color6)", "var(--color5)"];
+const SECTION_HEADING_TAGS = {
+  2: import_tamagui.H2,
+  3: import_tamagui.H3,
+  4: import_tamagui.H4,
+  5: import_tamagui.H5,
+  6: import_tamagui.H6
+};
+function resolveTrendColor(trend, goodDirection) {
+  if (!trend || trend === "neutral") return import_componentColors.componentColors.text.muted;
+  if (!goodDirection || goodDirection === "none") return import_componentColors.componentColors.text.muted;
+  return trend === goodDirection ? import_componentColors.componentColors.semantic.success : import_componentColors.componentColors.semantic.error;
+}
 function KPICard({
   config,
   ...stackProps
@@ -54,11 +71,7 @@ function KPICard({
     }
     return num.toLocaleString();
   }, [config.value, config.format, config.currencySymbol]);
-  const trendColor = (0, import_react.useMemo)(() => {
-    if (config.trend === "up") return import_componentColors.componentColors.semantic.success;
-    if (config.trend === "down") return import_componentColors.componentColors.semantic.error;
-    return import_componentColors.componentColors.text.muted;
-  }, [config.trend]);
+  const trendColor = (0, import_react.useMemo)(() => resolveTrendColor(config.trend, config.goodDirection), [config.trend, config.goodDirection]);
   const trendSymbol = (0, import_react.useMemo)(() => {
     if (config.trend === "up") return "\u2191";
     if (config.trend === "down") return "\u2193";
@@ -66,6 +79,7 @@ function KPICard({
   }, [config.trend]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
     size: knobProps.sizeToken,
+    ...knobProps.borderRadius,
     elevation: knobProps.elevation,
     borderWidth: 1,
     borderColor: "$borderColor",
@@ -126,280 +140,54 @@ function KPICard({
     })]
   });
 }
-function BarChart({
-  config,
-  colors
-}) {
-  const {
-    data,
-    height = 200,
-    showLabels = true
-  } = config;
-  const maxValue = (0, import_react.useMemo)(() => Math.max(...data.map(d => d.value), 1), [data]);
-  const labelHeight = showLabels ? 28 : 0;
-  const chartHeight = height - labelHeight;
-  const barWidth = 100 / Math.max(data.length, 1);
-  const padding = barWidth * 0.15;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    height,
-    width: "100%",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      flex: 1,
-      width: "100%",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("svg", {
-        width: "100%",
-        height: "100%",
-        viewBox: `0 0 100 ${chartHeight}`,
-        preserveAspectRatio: "none",
-        children: data.map((point, index) => {
-          const barHeight = point.value / maxValue * chartHeight;
-          const x = index * barWidth + padding;
-          const y = chartHeight - barHeight;
-          const color = point.color || colors[index % colors.length];
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
-            x: `${x}%`,
-            y,
-            width: `${barWidth - padding * 2}%`,
-            height: barHeight,
-            fill: color,
-            rx: "2"
-          }, point.label);
-        })
-      })
-    }), showLabels && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      height: labelHeight,
-      width: "100%",
-      alignItems: "center",
-      children: data.map(point => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        flex: 1,
-        textAlign: "center",
-        fontSize: "$2",
-        color: import_componentColors.componentColors.text.muted,
-        numberOfLines: 1,
-        children: point.label
-      }, point.label))
-    })]
-  });
-}
-function LineChart({
-  config,
-  colors
-}) {
-  const {
-    data,
-    height = 200,
-    showLabels = true
-  } = config;
-  const maxValue = (0, import_react.useMemo)(() => Math.max(...data.map(d => d.value), 1), [data]);
-  const labelHeight = showLabels ? 28 : 0;
-  const chartHeight = height - labelHeight;
-  const points = (0, import_react.useMemo)(() => {
-    if (data.length < 2) return "";
-    const xStep = 100 / (data.length - 1);
-    return data.map((point, index) => {
-      const x = index * xStep;
-      const y = chartHeight - point.value / maxValue * chartHeight;
-      return `${x},${y}`;
-    }).join(" ");
-  }, [data, maxValue, chartHeight]);
-  const areaPath = (0, import_react.useMemo)(() => {
-    if (data.length < 2) return "";
-    const xStep = 100 / (data.length - 1);
-    let path = `M 0,${chartHeight}`;
-    data.forEach((point, index) => {
-      const x = index * xStep;
-      const y = chartHeight - point.value / maxValue * chartHeight;
-      path += ` L ${x},${y}`;
-    });
-    path += ` L 100,${chartHeight} Z`;
-    return path;
-  }, [data, maxValue, chartHeight]);
-  const color = colors[0];
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    height,
-    width: "100%",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      flex: 1,
-      width: "100%",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
-        width: "100%",
-        height: "100%",
-        viewBox: `0 0 100 ${chartHeight}`,
-        preserveAspectRatio: "none",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: areaPath,
-          fill: color,
-          opacity: "0.2"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("polyline", {
-          points,
-          fill: "none",
-          stroke: color,
-          strokeWidth: "2",
-          vectorEffect: "non-scaling-stroke"
-        }), data.map((point, index) => {
-          const xStep = 100 / (data.length - 1);
-          const x = index * xStep;
-          const y = chartHeight - point.value / maxValue * chartHeight;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
-            cx: x,
-            cy: y,
-            r: "3",
-            fill: color,
-            vectorEffect: "non-scaling-stroke"
-          }, point.label);
-        })]
-      })
-    }), showLabels && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-      height: labelHeight,
-      width: "100%",
-      alignItems: "center",
-      children: data.map(point => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-        flex: 1,
-        textAlign: "center",
-        fontSize: "$2",
-        color: import_componentColors.componentColors.text.muted,
-        numberOfLines: 1,
-        children: point.label
-      }, point.label))
-    })]
-  });
-}
-function PieChart({
-  config,
-  colors
-}) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const {
-    data,
-    height = 200,
-    showLegend = true
-  } = config;
-  const total = (0, import_react.useMemo)(() => data.reduce((sum, d) => sum + d.value, 0) || 1, [data]);
-  const segments = (0, import_react.useMemo)(() => {
-    const result = [];
-    let currentAngle = -90;
-    data.forEach((point, index) => {
-      const percentage = point.value / total;
-      const angle = percentage * 360;
-      result.push({
-        label: point.label,
-        value: point.value,
-        color: point.color || colors[index % colors.length],
-        startAngle: currentAngle,
-        endAngle: currentAngle + angle
-      });
-      currentAngle += angle;
-    });
-    return result;
-  }, [data, total, colors]);
-  const describeArc = (0, import_react.useCallback)((cx2, cy2, radius2, startAngle, endAngle) => {
-    const start = polarToCartesian(cx2, cy2, radius2, endAngle);
-    const end = polarToCartesian(cx2, cy2, radius2, startAngle);
-    const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
-    return ["M", cx2, cy2, "L", start.x, start.y, "A", radius2, radius2, 0, largeArcFlag, 0, end.x, end.y, "Z"].join(" ");
-  }, []);
-  const size = Math.min(height, 200);
-  const radius = size * 0.35;
-  const cx = size / 2;
-  const cy = size / 2;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-    height,
-    width: "100%",
-    ...knobProps.gap,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      width: size,
-      height: size,
-      alignItems: "center",
-      justifyContent: "center",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
-        width: size,
-        height: size,
-        viewBox: `0 0 ${size} ${size}`,
-        children: [segments.map(segment => /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
-          d: describeArc(cx, cy, radius, segment.startAngle, segment.endAngle),
-          fill: segment.color
-        }, segment.label)), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
-          cx,
-          cy,
-          r: radius * 0.5,
-          fill: "var(--background)"
-        })]
-      })
-    }), showLegend && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
-      flex: 1,
-      maxHeight: height,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        gap: "$2",
-        children: segments.map(segment => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-          gap: "$2",
-          alignItems: "center",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            width: 12,
-            height: 12,
-            borderRadius: "$2",
-            backgroundColor: segment.color
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: import_componentColors.componentColors.text.muted,
-            flex: 1,
-            numberOfLines: 1,
-            children: segment.label
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            fontWeight: "500",
-            children: segment.value.toLocaleString()
-          })]
-        }, segment.label))
-      })
-    })]
-  });
-}
-function polarToCartesian(cx, cy, radius, angleInDegrees) {
-  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
-  return {
-    x: cx + radius * Math.cos(angleInRadians),
-    y: cy + radius * Math.sin(angleInRadians)
-  };
-}
 function ChartCard({
   config,
-  colors = defaultChartColors,
+  colors,
+  headingLevel = 2,
   ...stackProps
 }) {
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
-  const chartColors = config.colors || colors;
-  const ChartComponent = (0, import_react.useMemo)(() => {
-    switch (config.type) {
-      case "bar":
-        return BarChart;
-      case "line":
-        return LineChart;
-      case "pie":
-        return PieChart;
-      default:
-        return BarChart;
-    }
-  }, [config.type]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Card, {
-    size: knobProps.sizeToken,
-    elevation: knobProps.elevation,
-    borderWidth: 1,
-    borderColor: "$borderColor",
+  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, {
+    ...knobProps.gap,
     ...stackProps,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Header, {
-      ...knobProps.panelPadding,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H4, {
-        children: config.title
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Footer, {
-      ...knobProps.panelPadding,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartComponent, {
-        config,
-        colors: chartColors
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(HeadingTag, {
+      margin: 0,
+      ...import_componentColors.sectionHeading,
+      children: config.title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card, {
+      size: knobProps.sizeToken,
+      ...knobProps.borderRadius,
+      elevation: knobProps.elevation,
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Card.Footer, {
+        ...knobProps.panelPadding,
+        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?.[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
+        })
       })
     })]
   });
@@ -412,49 +200,66 @@ function Dashboard({
   columns = 4,
   gap: gapProp,
   padding: paddingProp,
+  isLoading = false,
+  error = null,
+  onRetry,
+  emptyMessage: emptyMessageProp,
   ...stackProps
 }) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const emptyMessage = emptyMessageProp ?? t("No widgets to display");
   const {
     knobProps
   } = (0, import_theme.useResolvedKnobs)();
   const sz = knobProps.sizeToken;
   const gap = gapProp ?? (sz === "$3" ? 12 : sz === "$5" ? 20 : 16);
   const padding = paddingProp ?? (sz === "$3" ? 12 : sz === "$5" ? 20 : 16);
+  const header = title || description ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    marginBottom: "$2",
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
+      children: title
+    }), description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: sz,
+      color: import_componentColors.componentColors.text.muted,
+      children: description
+    })]
+  }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
     children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       padding,
       gap,
       ...stackProps,
-      children: [(title || description) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        ...knobProps.gap,
-        marginBottom: "$2",
-        children: [title && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H3, {
-          children: title
-        }), description && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: sz,
-          color: import_componentColors.componentColors.text.muted,
-          children: description
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        flexWrap: "wrap",
-        gap,
-        marginHorizontal: -gap / 2,
-        children: widgets.map(widget => {
-          const span = widget.colSpan || 1;
-          const widthPercent = span / columns * 100;
-          const adjustedWidth = `calc(${widthPercent}% - ${gap}px)`;
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-            width: adjustedWidth,
-            minWidth: 200,
-            marginHorizontal: gap / 2,
-            children: renderWidget ? renderWidget(widget) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-              children: [widget.type === "kpi" && widget.kpiConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(KPICard, {
-                config: widget.kpiConfig
-              }), widget.type === "chart" && widget.chartConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartCard, {
-                config: widget.chartConfig
-              })]
-            })
-          }, widget.id);
+      children: [header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
+        loading: !error && isLoading && widgets.length === 0,
+        empty: !error && widgets.length === 0,
+        error,
+        onRetry,
+        layout: "dashboard",
+        emptyTitle: emptyMessage,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          flexWrap: "wrap",
+          gap,
+          marginHorizontal: -gap / 2,
+          children: widgets.map(widget => {
+            const span = widget.colSpan || 1;
+            const widthPercent = span / columns * 100;
+            const adjustedWidth = `calc(${widthPercent}% - ${gap}px)`;
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              width: adjustedWidth,
+              minWidth: 200,
+              marginHorizontal: gap / 2,
+              children: renderWidget ? renderWidget(widget) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+                children: [widget.type === "kpi" && widget.kpiConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(KPICard, {
+                  config: widget.kpiConfig
+                }), widget.type === "chart" && widget.chartConfig && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChartCard, {
+                  config: widget.chartConfig
+                })]
+              })
+            }, widget.id);
+          })
         })
       })]
     })