Pivot 透视表

<script setup lang="ts">
import { CfPivot } from '@chufix-design/vue';

interface Order {
  region: string;
  channel: string;
  amount: number;
}

const data: Order[] = [
  { region: '华北', channel: '官网', amount: 12400 },
  { region: '华北', channel: '门店', amount: 8200 },
  { region: '华北', channel: 'App', amount: 4900 },
  { region: '华东', channel: '官网', amount: 22800 },
  { region: '华东', channel: '门店', amount: 14200 },
  { region: '华东', channel: 'App', amount: 9800 },
  { region: '华南', channel: '官网', amount: 18200 },
  { region: '华南', channel: '门店', amount: 6800 },
  { region: '华南', channel: 'App', amount: 5400 },
  { region: '西部', channel: '官网', amount: 7400 },
  { region: '西部', channel: '门店', amount: 3200 },
  { region: '西部', channel: 'App', amount: 2100 },
];
</script>

<template>
  <CfPivot
    :data="data"
    row-field="region"
    col-field="channel"
    value-field="amount"
    aggregator="sum"
    :format="(v: number) => '¥' + v.toLocaleString()"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CfPivot, CfSelect } from '@chufix-design/vue';
import type { PivotAggregator } from '@chufix-design/vue';

interface Trip {
  weekday: string;
  hour: string;
  count: number;
}

const WEEKDAYS = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const HOURS = ['00', '04', '08', '12', '16', '20'];

const data: Trip[] = [];
for (const w of WEEKDAYS) {
  for (const h of HOURS) {
    let base = 50;
    if (h === '08' || h === '12' || h === '16') base += 220;
    if (w === '周六' || w === '周日') base = h === '12' || h === '20' ? 280 : 120;
    data.push({ weekday: w, hour: h, count: Math.round(base + Math.random() * 60) });
  }
}

const agg = ref<PivotAggregator>('sum');
const aggOptions = [
  { value: 'sum', label: 'sum' },
  { value: 'avg', label: 'avg' },
  { value: 'count', label: 'count' },
  { value: 'max', label: 'max' },
];
</script>

<template>
  <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
    <span style="font-size: 12px; color: var(--fg-3);">aggregator</span>
    <CfSelect v-model="agg" :options="aggOptions" size="sm" style="max-width: 120px;" />
  </div>
  <CfPivot
    :data="data"
    row-field="weekday"
    col-field="hour"
    value-field="count"
    :aggregator="agg"
    heatmap
    :show-totals="false"
    caption="周 × 小时 出行热力（模拟数据）"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CfPivot } from '@chufix-design/vue';

interface Sale {
  product: string;
  store: string;
  amount: number;
  qty: number;
}

const data: Sale[] = [
  { product: 'A', store: '上海', amount: 3200, qty: 12 },
  { product: 'A', store: '上海', amount: 2800, qty: 9 },
  { product: 'A', store: '北京', amount: 1900, qty: 7 },
  { product: 'B', store: '上海', amount: 5400, qty: 22 },
  { product: 'B', store: '北京', amount: 6100, qty: 26 },
  { product: 'B', store: '深圳', amount: 4200, qty: 18 },
  { product: 'C', store: '上海', amount: 1200, qty: 4 },
  { product: 'C', store: '北京', amount: 2400, qty: 8 },
  { product: 'C', store: '深圳', amount: 3300, qty: 11 },
];

const drilled = ref<{ row: string; col: string; rows: Sale[] } | null>(null);
</script>

<template>
  <CfPivot
    :data="data"
    row-field="product"
    col-field="store"
    value-field="amount"
    aggregator="sum"
    :on-cell-click="(p: { row: string; col: string; rows: unknown[] }) => drilled = { row: p.row, col: p.col, rows: p.rows as Sale[] }"
  />
  <div v-if="drilled" style="margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: 6px; background: var(--bg-2); font-size: 12px;">
    <div style="margin-bottom: 6px;">
      <strong>{{ drilled.row }} × {{ drilled.col }}</strong> 命中 {{ drilled.rows.length }} 条原始记录
    </div>
    <ul style="margin: 0; padding-left: 18px; color: var(--fg-2);">
      <li v-for="(r, i) in drilled.rows" :key="i">
        ¥{{ r.amount.toLocaleString() }} · {{ r.qty }} 件
      </li>
    </ul>
  </div>
</template>