<template>
  <div class="container">
    <Breadcrumb :items="['menu.visualization', 'menu.visualization.multiDimensionDataAnalysis']" />
    <a-space direction="vertical" :size="16" fill>
      <a-grid :cols="24" :col-gap="16" :row-gap="16">
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 18, xl: 18, xxl: 18 }">
          <DataOverview />
        </a-grid-item>
        <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 6, xl: 6, xxl: 6 }">
          <UserActions style="margin-bottom: 16px" />
          <ContentTypeDistribution />
        </a-grid-item>
      </a-grid>
      <DataChainGrowth />
      <ContentPublishingSource />
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import DataOverview from './components/data-overview.vue'
import DataChainGrowth from './components/data-chain-growth.vue'
import UserActions from './components/user-actions.vue'
import ContentTypeDistribution from './components/content-type-distribution.vue'
import ContentPublishingSource from './components/content-publishing-source.vue'
</script>

<script lang="ts">
export default {
  name: 'MultiDimensionDataAnalysis',
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}

:deep(.section-title) {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
}

:deep(.chart-wrap) {
  height: 264px;
}
</style>
