@ammarkhalidfarooq/dashboard-package 0.6.56 → 0.6.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs.js +194 -117
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +194 -117
  4. package/dist/index.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -1428,9 +1428,9 @@ var buildReportData = function buildReportData() {
1428
1428
  detail: "Median $".concat(formatNumber((_apiData$medianGift = apiData === null || apiData === void 0 ? void 0 : apiData.medianGift) !== null && _apiData$medianGift !== void 0 ? _apiData$medianGift : 75), " \xB7 top decile $").concat(formatNumber((_apiData$topDecileGif = apiData === null || apiData === void 0 ? void 0 : apiData.topDecileGift) !== null && _apiData$topDecileGif !== void 0 ? _apiData$topDecileGif : 850))
1429
1429
  }, {
1430
1430
  title: "ROAS",
1431
- value: "".concat(formatNumber((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3.0), "x"),
1432
- trend: formatTrend((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "x"),
1433
- detail: "$".concat(formatNumber((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 $").concat(formatNumber((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib.")
1431
+ value: "".concat(formatNumber((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 0), "x"),
1432
+ trend: formatTrend((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0, "x"),
1433
+ detail: "$".concat(formatNumber((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 0), " spend \xB7 $").concat(formatNumber((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 0), " attrib.")
1434
1434
  }, {
1435
1435
  title: "Conversion",
1436
1436
  value: "".concat(formatNumber(convRate), "%"),
@@ -1616,17 +1616,67 @@ var signed = function signed(v) {
1616
1616
  var n = Number(v !== null && v !== void 0 ? v : 0);
1617
1617
  return "".concat(n >= 0 ? "+" : "").concat(n.toFixed(2)).concat(suffix);
1618
1618
  };
1619
+ var TREND_UP = "#0B8F61";
1620
+ var TREND_DOWN = "#ef4444";
1621
+ var resolveTrendColor = function resolveTrendColor(trendText) {
1622
+ var trendPositiveWhenNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
1623
+ return getTrendColor(trendText, trendPositiveWhenNegative ? {
1624
+ up: TREND_DOWN,
1625
+ down: TREND_UP,
1626
+ neutral: TREND_UP
1627
+ } : {
1628
+ up: TREND_UP,
1629
+ down: TREND_DOWN,
1630
+ neutral: TREND_UP
1631
+ });
1632
+ };
1633
+ var withTrendArrow = function withTrendArrow(text) {
1634
+ var str = String(text !== null && text !== void 0 ? text : "").trim();
1635
+ if (!str || str.includes("▼") || str.includes("▲")) return str;
1636
+ var arrow = getTrendArrow(str);
1637
+ return arrow ? "".concat(arrow, " ").concat(str) : str;
1638
+ };
1639
+ var formatArrowTrend = function formatArrowTrend(value) {
1640
+ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
1641
+ _ref$suffix = _ref.suffix,
1642
+ suffix = _ref$suffix === void 0 ? "%" : _ref$suffix,
1643
+ _ref$decimals = _ref.decimals,
1644
+ decimals = _ref$decimals === void 0 ? 1 : _ref$decimals,
1645
+ _ref$label = _ref.label,
1646
+ label = _ref$label === void 0 ? "" : _ref$label;
1647
+ var n = Number(value !== null && value !== void 0 ? value : 0);
1648
+ var arrow = n >= 0 ? "▲" : "▼";
1649
+ var labelSuffix = label ? " ".concat(label) : "";
1650
+ if (suffix === "pp") return "".concat(arrow, " ").concat(Math.abs(n).toFixed(2), "pp").concat(labelSuffix);
1651
+ if (suffix === "x") return "".concat(arrow, " ").concat(Math.abs(n).toFixed(1), "x").concat(labelSuffix);
1652
+ return "".concat(arrow, " ").concat(Math.abs(n).toFixed(decimals), "%").concat(labelSuffix);
1653
+ };
1654
+ var TrendText = function TrendText(_ref2) {
1655
+ var children = _ref2.children,
1656
+ _ref2$invert = _ref2.invert,
1657
+ invert = _ref2$invert === void 0 ? false : _ref2$invert,
1658
+ _ref2$style = _ref2.style,
1659
+ style = _ref2$style === void 0 ? {} : _ref2$style;
1660
+ var text = withTrendArrow(children);
1661
+ return /*#__PURE__*/jsxRuntime.jsx("span", {
1662
+ style: _objectSpread2({
1663
+ fontWeight: 600,
1664
+ color: resolveTrendColor(text, invert)
1665
+ }, style),
1666
+ children: text
1667
+ });
1668
+ };
1619
1669
 
1620
1670
  // ─── SVG line sparkline ───────────────────────────────────────────────────────
1621
- var Sparkline = function Sparkline(_ref) {
1622
- var _ref$data = _ref.data,
1623
- data = _ref$data === void 0 ? [] : _ref$data,
1624
- _ref$color = _ref.color,
1625
- color = _ref$color === void 0 ? "#6366F1" : _ref$color,
1626
- _ref$width = _ref.width,
1627
- width = _ref$width === void 0 ? 120 : _ref$width,
1628
- _ref$height = _ref.height,
1629
- height = _ref$height === void 0 ? 40 : _ref$height;
1671
+ var Sparkline = function Sparkline(_ref3) {
1672
+ var _ref3$data = _ref3.data,
1673
+ data = _ref3$data === void 0 ? [] : _ref3$data,
1674
+ _ref3$color = _ref3.color,
1675
+ color = _ref3$color === void 0 ? "#6366F1" : _ref3$color,
1676
+ _ref3$width = _ref3.width,
1677
+ width = _ref3$width === void 0 ? 120 : _ref3$width,
1678
+ _ref3$height = _ref3.height,
1679
+ height = _ref3$height === void 0 ? 40 : _ref3$height;
1630
1680
  var vals = data.length >= 2 ? data : [0, 0];
1631
1681
  var max = Math.max.apply(Math, _toConsumableArray(vals).concat([0]));
1632
1682
  var min = Math.min.apply(Math, _toConsumableArray(vals).concat([0]));
@@ -1679,15 +1729,15 @@ var Sparkline = function Sparkline(_ref) {
1679
1729
  };
1680
1730
 
1681
1731
  // ─── SVG multi-series line chart ──────────────────────────────────────────────
1682
- var LineChart = function LineChart(_ref2) {
1683
- var _ref2$series = _ref2.series,
1684
- series = _ref2$series === void 0 ? [] : _ref2$series,
1685
- _ref2$categories = _ref2.categories,
1686
- categories = _ref2$categories === void 0 ? [] : _ref2$categories,
1687
- _ref2$width = _ref2.width,
1688
- width = _ref2$width === void 0 ? CW : _ref2$width,
1689
- _ref2$height = _ref2.height,
1690
- height = _ref2$height === void 0 ? 180 : _ref2$height;
1732
+ var LineChart = function LineChart(_ref4) {
1733
+ var _ref4$series = _ref4.series,
1734
+ series = _ref4$series === void 0 ? [] : _ref4$series,
1735
+ _ref4$categories = _ref4.categories,
1736
+ categories = _ref4$categories === void 0 ? [] : _ref4$categories,
1737
+ _ref4$width = _ref4.width,
1738
+ width = _ref4$width === void 0 ? CW : _ref4$width,
1739
+ _ref4$height = _ref4.height,
1740
+ height = _ref4$height === void 0 ? 180 : _ref4$height;
1691
1741
  var allVals = series.flatMap(function (s) {
1692
1742
  return s.data || [];
1693
1743
  });
@@ -1784,13 +1834,13 @@ var LineChart = function LineChart(_ref2) {
1784
1834
  };
1785
1835
 
1786
1836
  // ─── SVG donut ────────────────────────────────────────────────────────────────
1787
- var Donut = function Donut(_ref3) {
1788
- var _ref3$segments = _ref3.segments,
1789
- segments = _ref3$segments === void 0 ? [] : _ref3$segments,
1790
- _ref3$size = _ref3.size,
1791
- size = _ref3$size === void 0 ? 88 : _ref3$size,
1792
- centerVal = _ref3.centerVal,
1793
- centerLabel = _ref3.centerLabel;
1837
+ var Donut = function Donut(_ref5) {
1838
+ var _ref5$segments = _ref5.segments,
1839
+ segments = _ref5$segments === void 0 ? [] : _ref5$segments,
1840
+ _ref5$size = _ref5.size,
1841
+ size = _ref5$size === void 0 ? 88 : _ref5$size,
1842
+ centerVal = _ref5.centerVal,
1843
+ centerLabel = _ref5.centerLabel;
1794
1844
  var total = segments.reduce(function (s, g) {
1795
1845
  return s + (g.value || 0);
1796
1846
  }, 0) || 1;
@@ -1848,11 +1898,11 @@ var Donut = function Donut(_ref3) {
1848
1898
  };
1849
1899
 
1850
1900
  // ─── Shared primitives ────────────────────────────────────────────────────────
1851
- var Divider = function Divider(_ref4) {
1852
- var _ref4$mt = _ref4.mt,
1853
- mt = _ref4$mt === void 0 ? 0 : _ref4$mt,
1854
- _ref4$mb = _ref4.mb,
1855
- mb = _ref4$mb === void 0 ? 0 : _ref4$mb;
1901
+ var Divider = function Divider(_ref6) {
1902
+ var _ref6$mt = _ref6.mt,
1903
+ mt = _ref6$mt === void 0 ? 0 : _ref6$mt,
1904
+ _ref6$mb = _ref6.mb,
1905
+ mb = _ref6$mb === void 0 ? 0 : _ref6$mb;
1856
1906
  return /*#__PURE__*/jsxRuntime.jsx("div", {
1857
1907
  style: {
1858
1908
  borderTop: "1px solid #E5EAF1",
@@ -1861,13 +1911,13 @@ var Divider = function Divider(_ref4) {
1861
1911
  }
1862
1912
  });
1863
1913
  };
1864
- var Panel = function Panel(_ref5) {
1865
- var children = _ref5.children,
1866
- title = _ref5.title,
1867
- subtitle = _ref5.subtitle,
1868
- action = _ref5.action,
1869
- _ref5$style = _ref5.style,
1870
- style = _ref5$style === void 0 ? {} : _ref5$style;
1914
+ var Panel = function Panel(_ref7) {
1915
+ var children = _ref7.children,
1916
+ title = _ref7.title,
1917
+ subtitle = _ref7.subtitle,
1918
+ action = _ref7.action,
1919
+ _ref7$style = _ref7.style,
1920
+ style = _ref7$style === void 0 ? {} : _ref7$style;
1871
1921
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
1872
1922
  style: _objectSpread2({
1873
1923
  border: "1px solid ".concat(THEME.panelBorder),
@@ -1916,11 +1966,11 @@ var Panel = function Panel(_ref5) {
1916
1966
  }), children]
1917
1967
  });
1918
1968
  };
1919
- var MiniTable = function MiniTable(_ref6) {
1920
- var _ref6$head = _ref6.head,
1921
- head = _ref6$head === void 0 ? [] : _ref6$head,
1922
- _ref6$rows = _ref6.rows,
1923
- rows = _ref6$rows === void 0 ? [] : _ref6$rows;
1969
+ var MiniTable = function MiniTable(_ref8) {
1970
+ var _ref8$head = _ref8.head,
1971
+ head = _ref8$head === void 0 ? [] : _ref8$head,
1972
+ _ref8$rows = _ref8.rows,
1973
+ rows = _ref8$rows === void 0 ? [] : _ref8$rows;
1924
1974
  return /*#__PURE__*/jsxRuntime.jsxs("table", {
1925
1975
  style: {
1926
1976
  width: "100%",
@@ -1971,14 +2021,16 @@ var MiniTable = function MiniTable(_ref6) {
1971
2021
  })]
1972
2022
  });
1973
2023
  };
1974
- var KpiCard = function KpiCard(_ref7) {
1975
- var title = _ref7.title,
1976
- value = _ref7.value,
1977
- trend = _ref7.trend,
1978
- detail = _ref7.detail,
1979
- _ref7$variant = _ref7.variant,
1980
- variant = _ref7$variant === void 0 ? "secondary" : _ref7$variant;
1981
- var neg = "".concat(trend).trim().startsWith("-");
2024
+ var KpiCard = function KpiCard(_ref9) {
2025
+ var title = _ref9.title,
2026
+ value = _ref9.value,
2027
+ trend = _ref9.trend,
2028
+ detail = _ref9.detail,
2029
+ _ref9$variant = _ref9.variant,
2030
+ variant = _ref9$variant === void 0 ? "secondary" : _ref9$variant,
2031
+ _ref9$trendPositiveWh = _ref9.trendPositiveWhenNegative,
2032
+ trendPositiveWhenNegative = _ref9$trendPositiveWh === void 0 ? false : _ref9$trendPositiveWh;
2033
+ var displayTrend = withTrendArrow(trend);
1982
2034
  var isPrimary = variant === "primary";
1983
2035
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
1984
2036
  style: {
@@ -2015,9 +2067,9 @@ var KpiCard = function KpiCard(_ref7) {
2015
2067
  style: {
2016
2068
  fontSize: 10.5,
2017
2069
  fontWeight: 600,
2018
- color: neg ? "#DC2626" : "#16A34A"
2070
+ color: resolveTrendColor(displayTrend, trendPositiveWhenNegative)
2019
2071
  },
2020
- children: trend
2072
+ children: displayTrend
2021
2073
  }), /*#__PURE__*/jsxRuntime.jsx("div", {
2022
2074
  style: {
2023
2075
  fontSize: 8.5,
@@ -2028,11 +2080,11 @@ var KpiCard = function KpiCard(_ref7) {
2028
2080
  })]
2029
2081
  });
2030
2082
  };
2031
- var StatPair = function StatPair(_ref8) {
2032
- var label = _ref8.label,
2033
- val = _ref8.val,
2034
- trend = _ref8.trend;
2035
- var neg = "".concat(trend).trim().startsWith("-");
2083
+ var StatPair = function StatPair(_ref0) {
2084
+ var label = _ref0.label,
2085
+ val = _ref0.val,
2086
+ trend = _ref0.trend;
2087
+ var displayTrend = withTrendArrow(trend);
2036
2088
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2037
2089
  style: {
2038
2090
  marginBottom: 6
@@ -2061,19 +2113,19 @@ var StatPair = function StatPair(_ref8) {
2061
2113
  style: {
2062
2114
  fontSize: 9.5,
2063
2115
  fontWeight: 600,
2064
- color: neg ? "#DC2626" : "#16A34A"
2116
+ color: resolveTrendColor(displayTrend)
2065
2117
  },
2066
- children: trend
2118
+ children: displayTrend
2067
2119
  })]
2068
2120
  })]
2069
2121
  });
2070
2122
  };
2071
- var PageHeader = function PageHeader(_ref9) {
2072
- var dateLabel = _ref9.dateLabel,
2073
- generatedLabel = _ref9.generatedLabel,
2074
- activeFilters = _ref9.activeFilters,
2075
- page = _ref9.page,
2076
- windowLabel = _ref9.windowLabel;
2123
+ var PageHeader = function PageHeader(_ref1) {
2124
+ var dateLabel = _ref1.dateLabel,
2125
+ generatedLabel = _ref1.generatedLabel,
2126
+ activeFilters = _ref1.activeFilters,
2127
+ page = _ref1.page,
2128
+ windowLabel = _ref1.windowLabel;
2077
2129
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2078
2130
  style: {
2079
2131
  padding: "22px ".concat(MX, "px 12px"),
@@ -2179,9 +2231,9 @@ var PageHeader = function PageHeader(_ref9) {
2179
2231
  })]
2180
2232
  });
2181
2233
  };
2182
- var PageFooter = function PageFooter(_ref0) {
2183
- var generatedLabel = _ref0.generatedLabel,
2184
- page = _ref0.page;
2234
+ var PageFooter = function PageFooter(_ref10) {
2235
+ var generatedLabel = _ref10.generatedLabel,
2236
+ page = _ref10.page;
2185
2237
  return /*#__PURE__*/jsxRuntime.jsx("div", {
2186
2238
  style: {
2187
2239
  padding: "7px ".concat(MX, "px"),
@@ -2201,16 +2253,16 @@ var PageFooter = function PageFooter(_ref0) {
2201
2253
  };
2202
2254
 
2203
2255
  // ─── Main component ───────────────────────────────────────────────────────────
2204
- var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2205
- var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _ob$peakDay;
2206
- var _ref1$apiData = _ref1.apiData,
2207
- apiData = _ref1$apiData === void 0 ? {} : _ref1$apiData,
2208
- _ref1$dateName = _ref1.dateName,
2209
- dateName = _ref1$dateName === void 0 ? "Last Period" : _ref1$dateName,
2210
- _ref1$numberOfDays = _ref1.numberOfDays,
2211
- numberOfDays = _ref1$numberOfDays === void 0 ? 30 : _ref1$numberOfDays,
2212
- _ref1$activeFilters = _ref1.activeFilters,
2213
- activeFilters = _ref1$activeFilters === void 0 ? [] : _ref1$activeFilters;
2256
+ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref11, ref) {
2257
+ var _apiData$overviewStat, _overview$totalRevenu, _overview$netRevenue, _overview$overallAVGD, _overview$conversionR, _apiData$totalVisits, _refundsRaw$refundRat, _refundsRaw$chargebac, _apiData$trafficSourc2, _metricByTitle$NetRa, _metricByTitle$Total, _metricByTitle$Total2, _metricByTitle$Total3, _metricByTitle$AvgDo, _metricByTitle$AvgDo2, _apiData$medianGift, _apiData$topDecileGif, _apiData$roasCard, _metricByTitle$ROAS, _apiData$roasCardPrev, _metricByTitle$ROAS2, _apiData$adSpend, _apiData$attributedRe, _metricByTitle$Conver, _metricByTitle$Conver2, _metricByTitle$Refund, _metricByTitle$Refund2, _refundsRaw$refundCou, _metricByTitle$Refund3, _ref14, _refundsRaw$refundRat2, _ob$growthPercentage, _ob$peakDay, _refCard$growthPercen;
2258
+ var _ref11$apiData = _ref11.apiData,
2259
+ apiData = _ref11$apiData === void 0 ? {} : _ref11$apiData,
2260
+ _ref11$dateName = _ref11.dateName,
2261
+ dateName = _ref11$dateName === void 0 ? "Last Period" : _ref11$dateName,
2262
+ _ref11$numberOfDays = _ref11.numberOfDays,
2263
+ numberOfDays = _ref11$numberOfDays === void 0 ? 30 : _ref11$numberOfDays,
2264
+ _ref11$activeFilters = _ref11.activeFilters,
2265
+ activeFilters = _ref11$activeFilters === void 0 ? [] : _ref11$activeFilters;
2214
2266
  var now = new Date();
2215
2267
  var daysLabel = "".concat(numberOfDays, " day").concat(numberOfDays === 1 ? "" : "s");
2216
2268
  var windowLabel = "".concat(numberOfDays, "-day window");
@@ -2281,7 +2333,8 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2281
2333
  totalMix = donorMix.totalMix,
2282
2334
  newPct = donorMix.newPct,
2283
2335
  retPct = donorMix.retPct,
2284
- mixAvgGift = donorMix.avgGift;
2336
+ mixAvgGift = donorMix.avgGift,
2337
+ donorMixPrev = donorMix.donorMixPrev;
2285
2338
  var recData = Array.isArray(apiData === null || apiData === void 0 ? void 0 : apiData.recurringBarChartData) ? apiData.recurringBarChartData : [];
2286
2339
  var recurringTotal = recData.length ? recData.reduce(function (s, i) {
2287
2340
  return s + Number(i.recurring || i.recurringAmount || 0);
@@ -2477,9 +2530,9 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2477
2530
  },
2478
2531
  children: [/*#__PURE__*/jsxRuntime.jsx(KpiCard, {
2479
2532
  title: "ROAS",
2480
- value: kpiRoas((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 3.0),
2481
- trend: ((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.trend) || signed((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0.4, "×"),
2482
- detail: ((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 72000), " spend \xB7 ").concat(d$((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 215000), " attrib.")
2533
+ value: kpiRoas((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 0),
2534
+ trend: ((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.trend) || signed((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0, "×"),
2535
+ detail: ((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 0), " spend \xB7 ").concat(d$((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 0), " attrib.")
2483
2536
  }), /*#__PURE__*/jsxRuntime.jsx(KpiCard, {
2484
2537
  title: "Conversion",
2485
2538
  value: kpiPct(convRate),
@@ -2489,7 +2542,8 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2489
2542
  title: "Refund Rate",
2490
2543
  value: pct(refundRate, 2),
2491
2544
  trend: ((_metricByTitle$Refund = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund === void 0 ? void 0 : _metricByTitle$Refund.trend) || signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp"),
2492
- detail: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period")
2545
+ detail: ((_metricByTitle$Refund2 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund2 === void 0 ? void 0 : _metricByTitle$Refund2.detail) || "".concat(formatNumber((_refundsRaw$refundCou = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundCount) !== null && _refundsRaw$refundCou !== void 0 ? _refundsRaw$refundCou : 2), " refunds this period"),
2546
+ trendPositiveWhenNegative: (_metricByTitle$Refund3 = metricByTitle["Refund Rate"]) === null || _metricByTitle$Refund3 === void 0 ? void 0 : _metricByTitle$Refund3.trendPositiveWhenNegative
2493
2547
  })]
2494
2548
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2495
2549
  style: {
@@ -2536,11 +2590,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2536
2590
  }), /*#__PURE__*/jsxRuntime.jsx("span", {
2537
2591
  style: {
2538
2592
  marginLeft: 8,
2539
- fontSize: 10.5,
2540
- fontWeight: 600,
2541
- color: "#16A34A"
2593
+ fontSize: 10.5
2542
2594
  },
2543
- children: mainChart.trend
2595
+ children: /*#__PURE__*/jsxRuntime.jsx(TrendText, {
2596
+ children: mainChart.trend
2597
+ })
2544
2598
  })]
2545
2599
  })]
2546
2600
  }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2549,10 +2603,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2549
2603
  gap: 14,
2550
2604
  marginBottom: 6
2551
2605
  },
2552
- children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref10) {
2553
- var _ref11 = _slicedToArray(_ref10, 2),
2554
- name = _ref11[0],
2555
- color = _ref11[1];
2606
+ children: [["Email", C.cyan], ["Organic", C.emerald], ["Paid Ads", C.indigo]].map(function (_ref12) {
2607
+ var _ref13 = _slicedToArray(_ref12, 2),
2608
+ name = _ref13[0],
2609
+ color = _ref13[1];
2556
2610
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2557
2611
  style: {
2558
2612
  display: "flex",
@@ -2706,13 +2760,17 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2706
2760
  color: "#9CA3AF"
2707
2761
  },
2708
2762
  children: "Avg gift"
2709
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2763
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
2710
2764
  style: {
2711
2765
  fontSize: 9,
2712
- color: "#16A34A",
2713
2766
  marginTop: 1
2714
2767
  },
2715
- children: [signed((growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) || 8.4), " vs last month"]
2768
+ children: /*#__PURE__*/jsxRuntime.jsx(TrendText, {
2769
+ style: {
2770
+ fontSize: 9
2771
+ },
2772
+ children: "".concat(Number((_ref14 = donorMixPrev !== null && donorMixPrev !== void 0 ? donorMixPrev : growth === null || growth === void 0 ? void 0 : growth.overallAVGDonations) !== null && _ref14 !== void 0 ? _ref14 : 0).toFixed(2), "% vs pp")
2773
+ })
2716
2774
  })]
2717
2775
  })]
2718
2776
  })
@@ -2867,10 +2925,17 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2867
2925
  }), /*#__PURE__*/jsxRuntime.jsx("div", {
2868
2926
  style: {
2869
2927
  fontSize: 9,
2870
- color: "#DC2626",
2871
2928
  fontWeight: 600
2872
2929
  },
2873
- children: signed((refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) || -0.3, "pp")
2930
+ children: /*#__PURE__*/jsxRuntime.jsx(TrendText, {
2931
+ invert: true,
2932
+ style: {
2933
+ fontSize: 9
2934
+ },
2935
+ children: formatArrowTrend((_refundsRaw$refundRat2 = refundsRaw === null || refundsRaw === void 0 ? void 0 : refundsRaw.refundRateChange) !== null && _refundsRaw$refundRat2 !== void 0 ? _refundsRaw$refundRat2 : 0, {
2936
+ suffix: "pp"
2937
+ })
2938
+ })
2874
2939
  })]
2875
2940
  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2876
2941
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2933,14 +2998,20 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2933
2998
  color: "#111827"
2934
2999
  },
2935
3000
  children: d$((ob === null || ob === void 0 ? void 0 : ob.totalRevenue) || 0)
2936
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
3001
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
2937
3002
  style: {
2938
3003
  fontSize: 10,
2939
- color: "#16A34A",
2940
3004
  fontWeight: 600,
2941
3005
  marginBottom: 5
2942
3006
  },
2943
- children: [signed((ob === null || ob === void 0 ? void 0 : ob.growthPercentage) || 8.7), " vs last month"]
3007
+ children: /*#__PURE__*/jsxRuntime.jsx(TrendText, {
3008
+ style: {
3009
+ fontSize: 10
3010
+ },
3011
+ children: formatArrowTrend((_ob$growthPercentage = ob === null || ob === void 0 ? void 0 : ob.growthPercentage) !== null && _ob$growthPercentage !== void 0 ? _ob$growthPercentage : 0, {
3012
+ label: "vs pp"
3013
+ })
3014
+ })
2944
3015
  }), /*#__PURE__*/jsxRuntime.jsx(Sparkline, {
2945
3016
  data: obData.length ? obData : [0, 1],
2946
3017
  color: C.indigo,
@@ -2954,10 +3025,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
2954
3025
  display: "flex",
2955
3026
  gap: 12
2956
3027
  },
2957
- children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref12) {
2958
- var _ref13 = _slicedToArray(_ref12, 2),
2959
- l = _ref13[0],
2960
- v = _ref13[1];
3028
+ children: [["Avg/day", d$((ob === null || ob === void 0 ? void 0 : ob.averagePerDay) || 0)], ["Peak day", d$((ob === null || ob === void 0 || (_ob$peakDay = ob.peakDay) === null || _ob$peakDay === void 0 ? void 0 : _ob$peakDay.amount) || 0)], ["Orders", formatNumber((ob === null || ob === void 0 ? void 0 : ob.totalOrders) || 0)]].map(function (_ref15) {
3029
+ var _ref16 = _slicedToArray(_ref15, 2),
3030
+ l = _ref16[0],
3031
+ v = _ref16[1];
2961
3032
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
2962
3033
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
2963
3034
  style: {
@@ -3004,11 +3075,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
3004
3075
  children: [/*#__PURE__*/jsxRuntime.jsx(StatPair, {
3005
3076
  label: "Acceptance",
3006
3077
  val: pct((up === null || up === void 0 ? void 0 : up.acceptanceRate) || 0, 1),
3007
- trend: signed(up === null || up === void 0 ? void 0 : up.acceptanceGrowth)
3078
+ trend: formatArrowTrend(up === null || up === void 0 ? void 0 : up.acceptanceGrowth)
3008
3079
  }), /*#__PURE__*/jsxRuntime.jsx(StatPair, {
3009
3080
  label: "Raised",
3010
3081
  val: d$((up === null || up === void 0 ? void 0 : up.raised) || 0),
3011
- trend: signed(up === null || up === void 0 ? void 0 : up.raisedGrowth)
3082
+ trend: formatArrowTrend(up === null || up === void 0 ? void 0 : up.raisedGrowth)
3012
3083
  })]
3013
3084
  })]
3014
3085
  })
@@ -3039,11 +3110,11 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
3039
3110
  children: [/*#__PURE__*/jsxRuntime.jsx(StatPair, {
3040
3111
  label: "Acceptance",
3041
3112
  val: pct((dn === null || dn === void 0 ? void 0 : dn.acceptanceRate) || 0, 1),
3042
- trend: signed(dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth)
3113
+ trend: formatArrowTrend(dn === null || dn === void 0 ? void 0 : dn.acceptanceGrowth)
3043
3114
  }), /*#__PURE__*/jsxRuntime.jsx(StatPair, {
3044
3115
  label: "Raised",
3045
3116
  val: d$((dn === null || dn === void 0 ? void 0 : dn.raised) || 0),
3046
- trend: signed(dn === null || dn === void 0 ? void 0 : dn.raisedGrowth)
3117
+ trend: formatArrowTrend(dn === null || dn === void 0 ? void 0 : dn.raisedGrowth)
3047
3118
  })]
3048
3119
  })]
3049
3120
  })
@@ -3057,14 +3128,20 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
3057
3128
  color: "#111827"
3058
3129
  },
3059
3130
  children: d$((refCard === null || refCard === void 0 ? void 0 : refCard.totalRevenue) || 0)
3060
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
3131
+ }), /*#__PURE__*/jsxRuntime.jsx("div", {
3061
3132
  style: {
3062
3133
  fontSize: 10,
3063
- color: "#16A34A",
3064
3134
  fontWeight: 600,
3065
3135
  marginBottom: 5
3066
3136
  },
3067
- children: [signed((refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) || 9.1), " vs last month"]
3137
+ children: /*#__PURE__*/jsxRuntime.jsx(TrendText, {
3138
+ style: {
3139
+ fontSize: 10
3140
+ },
3141
+ children: formatArrowTrend((_refCard$growthPercen = refCard === null || refCard === void 0 ? void 0 : refCard.growthPercentage) !== null && _refCard$growthPercen !== void 0 ? _refCard$growthPercen : 0, {
3142
+ label: "vs pp"
3143
+ })
3144
+ })
3068
3145
  }), /*#__PURE__*/jsxRuntime.jsx(Sparkline, {
3069
3146
  data: refData.length ? refData : [0, 1],
3070
3147
  color: C.emerald,
@@ -3078,10 +3155,10 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref1, ref) {
3078
3155
  display: "flex",
3079
3156
  gap: 12
3080
3157
  },
3081
- children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref14) {
3082
- var _ref15 = _slicedToArray(_ref14, 2),
3083
- l = _ref15[0],
3084
- v = _ref15[1];
3158
+ children: [["Referrers", formatNumber((refCard === null || refCard === void 0 ? void 0 : refCard.totalReferrers) || 0)], ["Avg gift", d$((refCard === null || refCard === void 0 ? void 0 : refCard.averageGift) || 0)], ["Conv. rate", pct((refCard === null || refCard === void 0 ? void 0 : refCard.conversionRate) || 0, 1)]].map(function (_ref17) {
3159
+ var _ref18 = _slicedToArray(_ref17, 2),
3160
+ l = _ref18[0],
3161
+ v = _ref18[1];
3085
3162
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
3086
3163
  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
3087
3164
  style: {