<script setup>
import ImmediateDemandChart from "./components/ImmediateDemandChart.vue";
import ElecConsumption from "./components/ElecConsumption.vue";
import UsageInformation from "./components/UsageInformation.vue";
import MonthlyElecBillChart from "./components/MonthlyElecBillChart.vue";
import CarbonEmissionChart from "./components/CarbonEmissionChart.vue";
import BillingDegreeChart from "./components/BillingDegreeChart.vue";
import IntervalBillChart from "./components/IntervalBillChart.vue";
</script>

<template>
  <div class="flex flex-wrap items-center mb-4">
    <div class="w-full xl:w-5/12 lg:w-1/2">
      <ElecConsumption />
    </div>
    <div class="w-full xl:w-7/12 lg:w-1/2">
      <ImmediateDemandChart />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <UsageInformation />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <MonthlyElecBillChart />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <CarbonEmissionChart />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <BillingDegreeChart />
    </div>
    <div class="w-full xl:w-2/3 px-3">
      <IntervalBillChart />
    </div>
  </div>
  <div class="grid gap-4 grid-cols-3"></div>
</template>

<style lang="scss" scoped></style>
