<template>
<x-column>
	<span slot="header">
		%fa:hashtag%<span>{{ tag }}</span>
	</span>

	<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">
		<div ref="chart" class="chart"></div>
		<x-hashtag-tl :tag-tl="tagTl" class="tl"/>
	</div>
</x-column>
</template>

<script lang="ts">
import Vue from 'vue';
import XColumn from './deck.column.vue';
import XHashtagTl from './deck.hashtag-tl.vue';
import * as ApexCharts from 'apexcharts';

export default Vue.extend({
	components: {
		XColumn,
		XHashtagTl
	},

	props: {
		tag: {
			type: String,
			required: true
		}
	},

	computed: {
		tagTl(): any {
			return {
				query: [[this.tag]]
			};
		}
	},

	mounted() {
		(this as any).api('charts/hashtag', {
			tag: this.tag,
			span: 'hour',
			limit: 24
		}).then(stats => {
			const local = [];
			const remote = [];

			const now = new Date();
			const y = now.getFullYear();
			const m = now.getMonth();
			const d = now.getDate();
			const h = now.getHours();

			for (let i = 0; i < 24; i++) {
				const x = new Date(y, m, d, h - i);
				local.push([x, stats.local.count[i]]);
				remote.push([x, stats.remote.count[i]]);
			}

			const chart = new ApexCharts(this.$refs.chart, {
				chart: {
					type: 'area',
					height: 70,
					sparkline: {
						enabled: true
					},
				},
				grid: {
					clipMarkers: false,
					padding: {
						top: 16,
						right: 16,
						bottom: 16,
						left: 16
					}
				},
				stroke: {
					curve: 'straight',
					width: 2
				},
				series: [{
					name: 'Local',
					data: local
				}, {
					name: 'Remote',
					data: remote
				}],
				xaxis: {
					type: 'datetime',
				}
			});

			chart.render();
		});
	}
});
</script>

<style lang="stylus" scoped>
.xroyrflcmhhtmlwmyiwpfqiirqokfueb
	background var(--deckColumnBg)

	> .chart
		margin-bottom 16px
		background var(--face)

	> .tl
		background var(--face)

</style>
