Chart.js
2 months ago
ChartAreaChart.js
2 months ago
ChartContext.js
2 months ago
ChartDateFilter.js
2 months ago
ChartKPI.js
2 months ago
ChartSummary.js
2 months ago
ChartTabs.js
2 months ago
index.js
2 months ago
ChartKPI.js
38 lines
| 1 | import { Text } from "@bsf/force-ui"; |
| 2 | import { __ } from "@wordpress/i18n"; |
| 3 | import { humanSeconds } from "../../utils"; |
| 4 | import { useChartContext } from "./ChartContext"; |
| 5 | |
| 6 | const ChartKPI = () => { |
| 7 | const { total, isWatchTime, chartData } = useChartContext(); |
| 8 | |
| 9 | if (!chartData.length) return null; |
| 10 | |
| 11 | const formattedValue = isWatchTime |
| 12 | ? humanSeconds(total) |
| 13 | : total.toLocaleString(); |
| 14 | |
| 15 | const label = isWatchTime |
| 16 | ? __("Watch Time", "presto-player") |
| 17 | : __("Unique Views", "presto-player"); |
| 18 | |
| 19 | return ( |
| 20 | <div className="flex items-baseline gap-x-2 px-2 pt-1"> |
| 21 | <Text |
| 22 | as="span" |
| 23 | className="text-3xl font-semibold leading-none text-text-primary tabular-nums tracking-tight" |
| 24 | > |
| 25 | {formattedValue} |
| 26 | </Text> |
| 27 | <Text |
| 28 | as="span" |
| 29 | className="text-base font-medium text-text-secondary" |
| 30 | > |
| 31 | {label} |
| 32 | </Text> |
| 33 | </div> |
| 34 | ); |
| 35 | }; |
| 36 | |
| 37 | export default ChartKPI; |
| 38 |