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
ChartAreaChart.js
39 lines
| 1 | import { Container, Text } from "@bsf/force-ui"; |
| 2 | import { AlertCircle } from "lucide-react"; |
| 3 | import { EngagementAreaChart } from "../charts"; |
| 4 | import ChartEmptyState from "../ChartEmptyState"; |
| 5 | import { useChartContext } from "./ChartContext"; |
| 6 | |
| 7 | const ChartAreaChart = () => { |
| 8 | const { chartData, isWatchTime, isLoading, error } = useChartContext(); |
| 9 | |
| 10 | if (isLoading) return null; |
| 11 | |
| 12 | const hasData = chartData.length > 0; |
| 13 | |
| 14 | return ( |
| 15 | <Container |
| 16 | className={`w-full flex flex-col flex-1 p-3 overflow-hidden bg-background-primary ${hasData ? "rounded-md shadow-sm" : ""}`} |
| 17 | containerType="flex" |
| 18 | direction="column" |
| 19 | > |
| 20 | {error && ( |
| 21 | <Container align="center" gap="xs" className="p-3 mb-3 rounded-md bg-background-error"> |
| 22 | <AlertCircle className="w-5 h-5 text-text-error" /> |
| 23 | <Text className="text-sm text-text-error">{error}</Text> |
| 24 | </Container> |
| 25 | )} |
| 26 | |
| 27 | {hasData && ( |
| 28 | <EngagementAreaChart data={chartData} isWatchTime={isWatchTime} /> |
| 29 | )} |
| 30 | |
| 31 | {!error && !hasData && ( |
| 32 | <ChartEmptyState className="h-full min-h-[256px] min-[1427px]:min-h-[236px]" proGated /> |
| 33 | )} |
| 34 | </Container> |
| 35 | ); |
| 36 | }; |
| 37 | |
| 38 | export default ChartAreaChart; |
| 39 |