| 1 |
/** |
| 2 |
* Monthly subscription revenue. |
| 3 |
* |
| 4 |
* Drawn as inline SVG rather than with a charting library. Six bars need no |
| 5 |
* Chart.js, and pulling one in would be roughly thirty times the weight of |
| 6 |
* this entire screen. |
| 7 |
* |
| 8 |
* Amounts arrive already formatted by WooCommerce — the store's currency, |
| 9 |
* separator and symbol position live in its settings, and reimplementing |
| 10 |
* wc_price() here would get them wrong for every locale but the developer's. |
| 11 |
*/ |
| 12 |
|
| 13 |
import { __, sprintf } from "@wordpress/i18n"; |
| 14 |
|
| 15 |
const HEIGHT = 132; |
| 16 |
const MIN_BAR = 2; |
| 17 |
|
| 18 |
export default function SalesChart({ chart }) { |
| 19 |
const months = chart.months || []; |
| 20 |
const peak = Math.max(...months.map((m) => m.total), 0); |
| 21 |
|
| 22 |
return ( |
| 23 |
<div className="subscrpt-chart"> |
| 24 |
<div className="subscrpt-chart__total"> |
| 25 |
<span className="subscrpt-chart__amount">{chart.display}</span> |
| 26 |
<span className="subscrpt-chart__caption"> |
| 27 |
{sprintf( |
| 28 |
/* translators: %d: number of months. */ |
| 29 |
__("across the last %d months", "subscription"), |
| 30 |
months.length, |
| 31 |
)} |
| 32 |
</span> |
| 33 |
</div> |
| 34 |
|
| 35 |
{chart.empty ? ( |
| 36 |
<p className="subscrpt-chart__empty"> |
| 37 |
{__("No subscription revenue yet. Bars appear once orders come in.", "subscription")} |
| 38 |
</p> |
| 39 |
) : ( |
| 40 |
<div |
| 41 |
className="subscrpt-chart__plot" |
| 42 |
role="img" |
| 43 |
aria-label={months.map((m) => `${m.label}: ${m.display}`).join(", ")} |
| 44 |
> |
| 45 |
{months.map((month) => { |
| 46 |
// A month with sales always gets a visible sliver, so a small |
| 47 |
// month reads as small rather than as no month at all. |
| 48 |
const ratio = peak > 0 ? month.total / peak : 0; |
| 49 |
const height = month.total > 0 ? Math.max(MIN_BAR, ratio * HEIGHT) : 0; |
| 50 |
|
| 51 |
return ( |
| 52 |
<div className="subscrpt-chart__col" key={month.month}> |
| 53 |
<span className="subscrpt-chart__bar-wrap"> |
| 54 |
<span |
| 55 |
className={`subscrpt-chart__bar${month.total > 0 ? "" : " is-empty"}`} |
| 56 |
style={{ height: `${height}px` }} |
| 57 |
/> |
| 58 |
</span> |
| 59 |
{/* A row of repeated zeroes is noise; the month label alone |
| 60 |
already says the month had nothing. */} |
| 61 |
<span className="subscrpt-chart__value">{month.total > 0 ? month.display : "\u2014"}</span> |
| 62 |
<span className="subscrpt-chart__month">{month.label}</span> |
| 63 |
</div> |
| 64 |
); |
| 65 |
})} |
| 66 |
</div> |
| 67 |
)} |
| 68 |
</div> |
| 69 |
); |
| 70 |
} |
| 71 |
|
