Power bi deneb Vega 计时器问题

Question

我有一个 deneb Vega 问题。该脚本工作正常，但当前时间未更新。在信号中创建计时器。可以看一下吗？

信息：Power BI 提供的措施 DST_ClockDiffBtwLocationAndLocalOffset ：时区的偏移量（以秒为单位）（例如：3600） SiteSupportStartFrom ：绿色矩形的 HH:MM（例如：08:00） SiteSupportDayTo ：HH:MM 为绿色矩形的末尾。 （例如：17:00）

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 360,
  "height": 50,
  "data": [
    {
      "name": "dataset",
      "transform": [
        {
          "type": "formula",
          "expr": "utcOffset('seconds', now(), datum.DST_ClockDiffBtwLocationAndLocalOffset)",
          "as": "adjustedTime"
        },
        {
          "type": "formula",
          "expr": "hours(datum.adjustedTime) + minutes(datum.adjustedTime) / 60",
          "as": "currentTime"
        },
        {
          "type": "formula",
          "expr": "hours(datetime(datum.SiteSupportStartFrom)) + minutes(datetime(datum.SiteSupportStartFrom)) / 60",
          "as": "startSupportTime"
        },
        {
          "type": "formula",
          "expr": "hours(datetime(datum.SiteSupportDayTo)) + minutes(datetime(datum.SiteSupportDayTo)) / 60",
          "as": "endSupportTime"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "timer",
      "value": null,
      "on": [
        {
          "events": {"type": "timer", "throttle": 1000},  // Trigger every second
          "update": "now()"  // Timer updates to the current time
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": [0, 24],
      "range": [0, 350]
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "startSupportTime"},
          "x2": {"scale": "xscale", "field": "endSupportTime"},
          "y": {"value": 5},
          "y2": {"value": 20},
          "fill": {"value": "lightgreen"}
        }
      }
    },
    {
      "type": "rule",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "currentTime"},
          "y": {"value": 0},
          "y2": {"value": 27},
          "stroke": {"value": "red"},
          "strokeWidth": {"value": 2}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "currentTime"},
          "y": {"value": 8},
          "text": {
            "signal": "timeFormat(datum.adjustedTime, '%H:%M')"
          },
          "fill": {"value": "black"},
          "align": {"value": "center"},
          "dy": {"value": -10}
        }
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      //"title": "Hour of Day",
      "tickCount": 24
    }
  ]
}

Answer 1

在这段代码上花费了几个小时后，我终于获得了正确的视觉效果并实现了所有内容。

在power BI中，请提供给deneb :

• DST_ClockDiffBtwLocationAndLocalOffset：时区偏移量（以秒为单位）。因为 Vega 中只有 now() 可用，所以您必须计算您的时区和目的地时区之间的差异。
• SiteSupportStartFrom：格式为 1899-12-30T08:00:00.000Z
• SiteSupportDayTo：格式为 1899-12-30T17:00:00.000Z 最后两个用于动态移动绿色矩形。 在此输入图片描述

在 Vega 中找到代码。

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "background": "transparent",  // Transparent background
  "width": 360,
  "height": 71,
  "data": [
    {
      "name": "dataset",
      "transform": [
        {
          "type": "formula",
          "expr": "utcOffset('seconds', timer, datum.DST_ClockDiffBtwLocationAndLocalOffset)",
          "as": "adjustedTime"
        },
        {
          "type": "formula",
          "expr": "(hours(datum.adjustedTime) + minutes(datum.adjustedTime) / 60)",
          "as": "currentTime"
        },
        {
          "type": "formula",
          "expr": "hours(datetime(datum.SiteSupportStartFrom)) + minutes(datetime(datum.SiteSupportStartFrom)) / 60",
          "as": "startSupportTime"
        },
        {
          "type": "formula",
          "expr": "hours(datetime(datum.SiteSupportDayTo)) + minutes(datetime(datum.SiteSupportDayTo)) / 60",
          "as": "endSupportTime"
        },
        {
          "type": "formula",
          "expr": "(datum.startSupportTime + datum.endSupportTime) / 2",
          "as": "midSupportTime"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "timer",
      "update": "now()",
      "on": [
        {
          "events": {"type": "timer", "throttle": 1000},
          "update": "now()"
        }
      ]
    },
    {
      "name": "adjustedDate",
      "update": "timeFormat(utcOffset('seconds', timer, data('dataset')[0].DST_ClockDiffBtwLocationAndLocalOffset), '%Y-%m-%d')"  // Adjusted date using offset
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": [0, 24],
      "range": [0, 350]
    }
  ],
  "marks": [
    {
      "type": "rect",  // Grey background spanning 24 hours
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "value": 0},
          "x2": {"scale": "xscale", "value": 24},
          "y": {"value": 18},
          "y2": {"value": 32},
          "fill": {"value": "lightgrey"}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "startSupportTime"},
          "x2": {"scale": "xscale", "field": "endSupportTime"},
          "y": {"value": 15},
          "y2": {"value": 35},
          "fill": {"value": "lightgreen"}
        }
      }
    },
    {
      "type": "text",  // Text in the middle of the green rectangle
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "midSupportTime"},
          "y": {"value": 25},
          "text": {"value": "IT Site Support hours"},
          "fill": {"value": "black"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"value": 10},
          "fontWeight": {"value": "bold"}
        }
      }
    },
    {
      "type": "rule",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "currentTime"},
          "y": {"value": 10},
          "y2": {"value": 45},
          "stroke": {"value": "red"},
          "strokeWidth": {"value": 2}
        },
        "update": {
          "x": {"scale": "xscale", "field": "currentTime"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "currentTime"},
          "y": {"value": 8},  // Positioned near the red bar
          "align": {"value": "center"},
          "dy": {"value": 1},
          "fontSize": {"value": 10}
        },
        "update": {
          "text": {
            "signal": "timeFormat(utcOffset('seconds', timer, datum.DST_ClockDiffBtwLocationAndLocalOffset), '%H:%M')"
          },
          "fill": {
            "signal": "datum.currentTime >= datum.startSupportTime && datum.currentTime <= datum.endSupportTime ? 'darkgreen' : 'darkred'"
          }
        }
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "title": {"signal": "adjustedDate"},  // Dynamic title for the adjusted date
      "tickCount": 24
    }
  ]
}