如何在WebDataRocks透视表中按本地时间拆分日期并适配UTC+10时区？

要实现将UTC日期按UTC+10时区拆分成年/月/日，同时保留原始日期字段不变，可通过创建计算字段的方式实现，具体步骤如下：

1. 创建UTC+10时区的计算日期字段 #

通过WebDataRocks的addCalculatedField方法，基于原始date字段生成转换到UTC+10时区的日期字段。这个字段仅用于维度分组和显示，不会修改原始数据。

示例代码：

var pivot = new WebDataRocks({
  container: "#wdr-component",
  toolbar: true,
  report: {
    dataSource: {
      data: [
        {
          "name": "Fred",
          "duration": 33.2,
          "date": "2022-06-30T23:55:50.298Z"
        }
        // 其他数据条目
      ]
    },
    // 配置维度和度量
    slices: {
      rows: [
        {
          uniqueName: "localDate",
          hierarchy: "localDate",
          // 设置日期格式，用于拆分年/月/日
          datePattern: "yyyy-MM-dd",
          levels: [
            { uniqueName: "year" },
            { uniqueName: "month" },
            { uniqueName: "day" }
          ]
        }
      ],
      measures: [
        { uniqueName: "duration", aggregation: "sum" }
      ]
    }
  },
  // 在工具栏创建前添加计算字段
  beforetoolbarcreated: function() {
    pivot.addCalculatedField(
      "localDate", // 计算字段的唯一标识
      // 转换逻辑：将UTC日期加10小时，提取日期部分
      'new Date(new Date(date).getTime() + 10 * 60 * 60 * 1000).toISOString().split("T")[0]',
      "Local Date (UTC+10)", // 字段显示名称
      "string" // 字段类型
    );
  }
});

2. 基于计算字段拆分年/月/日 #

在slices的rows配置中，将localDate作为日期维度，通过levels指定拆分year、month、day，WebDataRocks会自动基于转换后的UTC+10日期进行分组。

关键说明 #

• 原始date字段保持不变，仅新增计算字段用于时区转换后的日期分组
• 若需处理夏令时等动态时区场景，可将固定加10小时的逻辑替换为基于Intl.DateTimeFormat的时区转换，示例：

  'new Intl.DateTimeFormat("en-US", {
    timeZone: "Australia/Sydney", // UTC+10的时区标识
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  }).format(new Date(date)).replace(/(\d+)\/(\d+)\/(\d+)/, "$3-$1-$2")'
  

  这种方式更准确，能自动适配夏令时变化。

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