@multiplatform.one/frappe-ui 7.23.1 → 7.24.0

package/dist/cjs/FrappeInsights.cjs

@@ -0,0 +1,380 @@
+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 FrappeInsights_exports = {};
+__export(FrappeInsights_exports, {
+  FrappeInsights: () => FrappeInsights
+});
+module.exports = __toCommonJS(FrappeInsights_exports);
+var import_components = require("@multiplatform.one/components");
+var import_frappe = require("@multiplatform.one/frappe");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_frappeConnections = require("./frappeConnections.cjs");
+var import_frappeNavigation = require("./frappeNavigation.cjs");
+var import_FrappeNotConfigured = require("./FrappeNotConfigured.cjs");
+var import_FrappeProvider = require("./FrappeProvider.cjs");
+var import_FrappeReconnectIndicator = require("./FrappeReconnectIndicator.cjs");
+var import_useDocRights = require("./formEngine/useDocRights.cjs");
+var import_insightsData = require("./insights/insightsData.cjs");
+var import_InsightsFacetTags = require("./insights/InsightsFacetTags.cjs");
+var import_InsightsKpiBand = require("./insights/InsightsKpiBand.cjs");
+var import_InsightsLeaders = require("./insights/InsightsLeaders.cjs");
+var import_insightsRecord = require("./insights/insightsRecord.cjs");
+var import_InsightsRecords = require("./insights/InsightsRecords.cjs");
+var import_InsightsTable = require("./insights/InsightsTable.cjs");
+var import_facetReading = require("./list/facetReading.cjs");
+var import_favorites = require("./list/favorites.cjs");
+var import_recordLook = require("./list/recordLook.cjs");
+var import_useFrappeRows = require("./useFrappeRows.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const pieSlices = 7;
+const noMetrics = [];
+function FrappeInsights({
+  doctype,
+  route,
+  listTitle,
+  title,
+  subtitle,
+  fields,
+  limit,
+  orderBy,
+  connections,
+  facet: facetProp,
+  facetPlural,
+  metrics: metricsProp = noMetrics,
+  favorites,
+  look,
+  titleField,
+  pageSize = 5,
+  testID
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const theme = (0, import_components.useTheme)();
+  const config = (0, import_FrappeProvider.useFrappeConfig)();
+  const connection = (0, import_useFrappeRows.useFrappeConnection)();
+  const navigate = (0, import_frappeNavigation.useFrappeRouter)()?.navigate;
+  const {
+    meta
+  } = (0, import_frappe.useDocTypeMeta)(connection, doctype);
+  const {
+    rights
+  } = (0, import_useDocRights.useDocRights)(connection, meta);
+  const listName = listTitle ?? doctype;
+  const pageTitle = title ?? t("Insights");
+  const latest = (0, import_react2.useRef)({
+    facet: facetProp,
+    metrics: metricsProp,
+    look,
+    navigate
+  });
+  latest.current = {
+    facet: facetProp,
+    metrics: metricsProp,
+    look,
+    navigate
+  };
+  const facetKey = JSON.stringify(facetProp ?? null);
+  const metricsKey = JSON.stringify(metricsProp);
+  const facet = (0, import_react2.useMemo)(() => latest.current.facet, [facetKey]);
+  const metrics = (0, import_react2.useMemo)(() => latest.current.metrics, [metricsKey]);
+  const {
+    rows: readRows,
+    isLoading,
+    error
+  } = (0, import_useFrappeRows.useFrappeRows)(connection, doctype, {
+    fields,
+    limit,
+    orderBy
+  });
+  const orderKey = JSON.stringify(orderBy ?? null);
+  const rows = (0, import_react2.useMemo)(() => (0, import_insightsData.orderRows)(readRows, JSON.parse(orderKey)), [readRows, orderKey]);
+  const read = facet ? (0, import_facetReading.facetRead)(facet, doctype, connections ?? (0, import_frappeConnections.connectionsFromMeta)(meta), limit) : void 0;
+  const readKey = JSON.stringify(read ?? null);
+  const facetQuery = (0, import_react2.useMemo)(() => JSON.parse(readKey), [readKey]);
+  const facetOptions = (0, import_react2.useMemo)(() => ({
+    ...facetQuery?.options,
+    enabled: Boolean(facetQuery?.ready)
+  }), [facetQuery]);
+  const {
+    rows: facetRows
+  } = (0, import_useFrappeRows.useFrappeRows)(connection, facetQuery?.doctype ?? "", facetOptions);
+  const values = (0, import_react2.useMemo)(() => facet && facetQuery ? (0, import_facetReading.readFacet)(facet, facetQuery.linkField, facetRows).values : /* @__PURE__ */new Map(), [facet, facetQuery, facetRows]);
+  const {
+    count: favoritesCount
+  } = (0, import_favorites.useFavorites)(favorites ? typeof favorites === "string" ? favorites : (0, import_favorites.favoritesKey)(doctype) : void 0);
+  const nameField = titleField ?? meta?.title_field;
+  const baseURL = config?.baseURL;
+  const record = (0, import_react2.useMemo)(() => ({
+    title: doc => (0, import_recordLook.recordTitle)(doc, latest.current.look, nameField),
+    code: doc => latest.current.look?.code?.(doc) || void 0,
+    images: doc => latest.current.look?.images?.(doc, baseURL) ?? [],
+    values: doc => values.get(doc.name) ?? [],
+    tints: doc => (values.get(doc.name) ?? []).map(value => facet?.tint?.(value)),
+    valueLabel: value => facet?.optionLabel?.(value) ?? value,
+    valueTint: value => facet?.tint?.(value),
+    open: doc => latest.current.navigate?.((0, import_frappeNavigation.frappeRouteHref)(route, {
+      mode: "view",
+      name: doc.name
+    }))
+  }), [nameField, baseURL, values, facet, route]);
+  const distribution = (0, import_react2.useMemo)(() => (0, import_insightsData.facetDistribution)(values, rows), [values, rows]);
+  const lead = metrics[0];
+  const plural = facetPlural ?? facet?.label ?? "";
+  const tiles = [];
+  if (favorites) {
+    tiles.push({
+      id: "favorites",
+      title: t("Favorites"),
+      value: favoritesCount,
+      hint: t("{{count}} of {{total}}", {
+        count: favoritesCount,
+        total: rows.length
+      })
+    });
+  }
+  if (facet) {
+    const several = (0, import_insightsData.multiValued)(values, rows);
+    tiles.push({
+      id: "facet",
+      title: t("Distinct {{facets}}", {
+        facets: plural
+      }),
+      value: distribution.length,
+      hint: several > 0 ? t("{{count}} with 2+", {
+        count: several
+      }) : distribution[0] ? record.valueLabel(distribution[0].value) : void 0
+    });
+  }
+  const buckets = lead ? (0, import_insightsData.histogram)(rows, lead.field, lead.bucket) : [];
+  if (lead) {
+    tiles.push({
+      id: "average",
+      title: t("Average {{metric}}", {
+        metric: lead.label
+      }),
+      value: (0, import_insightsRecord.formatMetric)(lead, Math.round((0, import_insightsData.average)(rows, lead.field))),
+      spark: buckets.map(bucket => bucket.value)
+    });
+  }
+  const charts = [];
+  if (facet) {
+    charts.push({
+      id: "facet-distribution",
+      title: t("{{facet}} distribution", {
+        facet: facet.label
+      }),
+      type: "pie",
+      data: (0, import_insightsData.foldDistribution)(distribution, pieSlices).map(entry => ({
+        label: entry.other ? t("Other") : record.valueLabel(entry.value),
+        value: entry.count,
+        color: theme[`${!entry.other && facet.tint?.(entry.value) || "gray"}9`]?.val
+      }))
+    });
+  }
+  if (lead) {
+    charts.push({
+      id: "metric-histogram",
+      title: t("{{metric}} distribution", {
+        metric: lead.label
+      }),
+      type: "bar",
+      data: buckets
+    });
+  }
+  const holders = metrics.filter(metric => metric.record).flatMap(metric => {
+    const doc = (0, import_insightsData.topBy)(rows, metric.field, 1)[0];
+    return doc ? [{
+      id: metric.field,
+      label: metric.record,
+      doc,
+      value: (0, import_insightsRecord.formatMetric)(metric, Number(doc[metric.field]) || 0)
+    }] : [];
+  });
+  const onAdd = rights.create && navigate ? () => navigate((0, import_frappeNavigation.frappeRouteHref)(route, {
+    mode: "create"
+  })) : void 0;
+  const sectionId = name => testID ? `${testID}-${name}` : void 0;
+  if (!config?.baseURL && !config?.fixtures) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeNotConfigured.FrappeNotConfigured, {
+      doctype,
+      page: true
+    });
+  }
+  const header = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Breadcrumbs, {
+      items: [{
+        label: listName,
+        href: route
+      }, {
+        label: pageTitle
+      }],
+      onNavigate: href => navigate?.(href)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageHeader, {
+      title: pageTitle,
+      subtitle: subtitle && !isLoading && !error && rows.length > 0 ? subtitle(rows.length) : void 0,
+      actions: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+        variant: "outlined",
+        minHeight: knobProps.sizeToken,
+        onPress: () => navigate?.(route),
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowLeftIcon, {
+          size: 16
+        }),
+        testID: sectionId("back"),
+        children: t("Back to {{title}}", {
+          title: listName
+        })
+      })
+    })]
+  });
+  if (error) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Screen, {
+      scroll: false,
+      children: [header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+        intent: "error",
+        title: t("Couldn't load {{title}}", {
+          title: listName
+        }),
+        description: t("Check the connection and try again.")
+      })]
+    });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Screen, {
+      children: [header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        testID: sectionId("skeleton"),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.AsyncSkeleton, {
+          layout: "dashboard"
+        })
+      })]
+    });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Screen, {
+      scroll: false,
+      children: [header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.SparkleIcon, {
+          size: 28
+        }),
+        title: t("No {{title}} to analyze", {
+          title: listName
+        }),
+        description: t("Add a record and the analytics will light up."),
+        action: onAdd ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+          theme: "accent",
+          onPress: onAdd,
+          children: t("Add your first {{doctype}}", {
+            doctype
+          })
+        }) : void 0
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Screen, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FrappeReconnectIndicator.FrappeReconnectIndicator, {
+      config: connection
+    }), header, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InsightsKpiBand.InsightsKpiBand, {
+      hero: {
+        id: "total",
+        title: t("Total {{title}}", {
+          title: listName
+        }),
+        value: rows.length
+      },
+      tiles,
+      charts,
+      testID: sectionId("dashboard")
+    }), holders.length > 0 || metrics.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      flexWrap: "wrap",
+      alignItems: "flex-start",
+      ...knobProps.gapLg,
+      children: [holders.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
+        title: t("Record holders"),
+        divider: false,
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 280,
+        minWidth: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InsightsRecords.InsightsRecords, {
+          tiles: holders,
+          record,
+          testID: sectionId("records")
+        })
+      }) : null, metrics.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
+        title: t("Leaders"),
+        description: t("The top five by the field you pick; open any row."),
+        divider: false,
+        flexGrow: 2,
+        flexShrink: 1,
+        flexBasis: 420,
+        minWidth: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InsightsLeaders.InsightsLeaders, {
+          rows,
+          metrics,
+          record,
+          testID: sectionId("leaderboard")
+        })
+      }) : null]
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
+      title: t("All {{title}}", {
+        title: listName
+      }),
+      description: t("Every record, {{count}} per page; sort any column.", {
+        count: pageSize
+      }),
+      divider: false,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InsightsTable.InsightsTable, {
+        rows,
+        metrics,
+        record,
+        facetLabel: facet ? plural : void 0,
+        pageSize,
+        label: t("All {{title}}", {
+          title: listName
+        }),
+        testID: sectionId("roster")
+      })
+    }), facet ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.PageSection, {
+      title: t("Browse by {{facet}}", {
+        facet: facet.label
+      }),
+      description: t("Open the list narrowed to one value."),
+      divider: false,
+      paddingBottom: "$6",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InsightsFacetTags.InsightsFacetTags, {
+        distribution,
+        label: record.valueLabel,
+        tint: facet.tint,
+        onSelect: value => navigate?.(`${route}?${facet.param}=${encodeURIComponent(value)}`),
+        testID: sectionId("tag")
+      })
+    }) : null]
+  });
+}