<script setup lang="ts">
import {onMounted, onUnmounted } from 'vue';
// @ts-ignore
import CalHeatMap from 'cal-heatmap';
// @ts-ignore
import Tooltip from 'cal-heatmap/plugins/Tooltip';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '../../../../../packages/@core/ui-kit/shadcn-ui';
interface Props {
  title: string;
  dataList: dataType[];
}
const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  title: '热力图',
});
const dataList = props.dataList;
let cal: any = null;
export interface dataType{
  date: string;
  value: number;
}



onMounted(() => {
  cal = new CalHeatMap();
  cal.paint({
    itemSelector: '#cal-heatmap',
    data: {
      source: dataList,
      x: "date",
      y: "value",
    },
    theme: 'light',
    date: { start: new Date(new Date().getFullYear(), 1, 1), end: new Date(new Date().getFullYear()+1, 0, 0) },
    range: 1,
    scale: {
      color: {
        type: 'linear',
        scheme: 'Greens',
        domain: [0, 1440]
      }
    },
    domain: {
      type: 'year',
      gutter: 3,
      padding:[5,5,5,5],
      label: {
        text: '2025',
        position: 'top',
        align: 'center',
      }
    },
    subDomain: {
      type: 'day',
      gutter: 2,
      width: 10,
      height: 10,
      radius: 2
    },
  }, 
  [
    [
      Tooltip,
      {
      },
    ],
  ]
);
});

onUnmounted(() => {
  if (cal) {
    cal.destroy();
  }
});
</script>


<template>
  <Card>
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{title}}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-0">
      <div id="cal-heatmap" class="border-border w-full border-b border-r border-t p-5 transition-all hover:shadow-xl"></div>
    </CardContent>
  </Card>
</template>

<style lang="scss" scoped>
@import '../../../node_modules/cal-heatmap/src/cal-heatmap.scss';
</style>
