在Workshop中如何创建支持按日周月年数据分段的功能按钮

前置说明 #

你有TypeScript基础可以直接看懂以下代码片段，不需要复杂开发经验即可快速落地。

步骤1：定义可选的时间维度 #

先把需要的四个维度统一声明，避免后续拼写错误：

// 定义时间维度枚举
enum TimeDimension {
  DAY = 'day',
  WEEK = 'week',
  MONTH = 'month',
  YEAR = 'year'
}
// 维度显示文案映射
const DimensionLabel = {
  [TimeDimension.DAY]: '按日',
  [TimeDimension.WEEK]: '按周',
  [TimeDimension.MONTH]: '按月',
  [TimeDimension.YEAR]: '按年'
}

步骤2：实现维度选择按钮组 #

如果你的Workshop平台自带组件库，直接调用自带的单选按钮组/标签选择器组件，把上面的4个维度设为选项即可。如果需要自定义写组件，可以参考以下极简TSX代码：

import { useState } from 'react'

function TimeDimensionPicker() {
  // 存储当前选中的维度，默认选中按日
  const [activeDim, setActiveDim] = useState<TimeDimension>(TimeDimension.DAY)

  return (
    <div className="dimension-picker">
      {Object.values(TimeDimension).map(dim => (
        <button
          key={dim}
          // 选中的按钮加高亮样式
          className={activeDim === dim ? 'btn-active' : 'btn-default'}
          onClick={() => setActiveDim(dim)}
        >
          {DimensionLabel[dim]}
        </button>
      ))}
    </div>
  )
}

步骤3：关联数据分段逻辑 #

拿到选中的维度值后，按照对应粒度对原始数据进行分组即可，参考以下工具函数：

import { startOfDay, startOfWeek, startOfMonth, startOfYear, format } from 'date-fns'

// 按选中的维度分组数据
function groupDataByDimension(rawData: { time: Date; value: number }[], dimension: TimeDimension) {
  const groups: Record<string, number[]> = {}
  rawData.forEach(item => {
    let groupKey: string
    switch (dimension) {
      case TimeDimension.DAY:
        groupKey = format(startOfDay(item.time), 'yyyy-MM-dd')
        break
      case TimeDimension.WEEK:
        // weekStartsOn:1 表示周一开始算一周的第一天，可按需调整
        groupKey = format(startOfWeek(item.time, { weekStartsOn: 1 }), 'yyyy年第WW周')
        break
      case TimeDimension.MONTH:
        groupKey = format(startOfMonth(item.time), 'yyyy-MM')
        break
      case TimeDimension.YEAR:
        groupKey = format(startOfYear(item.time), 'yyyy年')
        break
    }
    if (!groups[groupKey]) groups[groupKey] = []
    groups[groupKey].push(item.value)
  })
  // 可以在这里对每个分组的数据做求和、求平均等聚合计算
  return groups
}

实用提示 #

• 日期计算直接用date-fns这类成熟的工具库即可，不需要自己写日期判断逻辑，大幅减少出错概率
• 按钮的高亮样式只需要自定义btn-active类，比如改背景色、边框色即可，不需要复杂交互
• 如果不需要自定义开发，很多低代码Workshop平台自带时间粒度选择器组件，只需要绑定数据源即可直接使用

内容的提问来源于stack exchange，提问作者xin_si_ji