<template>
	<div class="simplestats-dashboard-data" :class="{ 'is-refetching': store.report.isLoading && store.report.loaded }">
		<KpiBar />
		<AnalyticsChart />
		<div class="simplestats-dashboard-row">
			<RealtimeFeed />
			<TopPages />
		</div>
		<div class="simplestats-dashboard-row">
			<DevicesDonut />
			<Referrers />
		</div>
		<div class="simplestats-dashboard-row">
			<Countries />
			<UpgradeTeaser v-if="isFree" />
		</div>
	</div>
</template>

<script setup>
	import { computed }  from 'vue';
	import { useStore } from '@/dashboard/store.js';

	import KpiBar         from './KpiBar.vue';
	import AnalyticsChart from './AnalyticsChart.vue';
	import RealtimeFeed   from './RealtimeFeed.vue';
	import TopPages       from './TopPages.vue';
	import DevicesDonut   from './DevicesDonut.vue';
	import Referrers      from './Referrers.vue';
	import Countries      from './Countries.vue';
	import UpgradeTeaser  from './UpgradeTeaser.vue';

	const store  = useStore();
	const isFree = computed( () => ( store.connection.plan || 'free' ) === 'free' );
</script>
