{
  "signals": [
    {},
    {},
    {
      "name": "detailDomain",
      "update": "[time(data('range')[0].dateMin), time(data('range')[0].dateMin) + (timeWindow * arrowCount)] "
    },
    {
      "name": "minMaxRange",
      "update": "time(data('range')[0].dateMax) - time(data('range')[0].dateMin)"
    },
    {
      "name": "selectionWidth",
      "update": "floor((arrowCount * timeWindow * width) / minMaxRange)"
    }

  ],
  "marks": [
    {
      "marks": [
        {
          "marks": [
            {
              "type": "symbol",
              "from": {
                "data": "table"
              },
              "encode": {
                "enter": {
                  "tooltip": {
                    "signal": "{title: timeFormat(datum.dateTime, '%A, %e. %B %Y, %X') }"
                  }
                },
                "hover": {
                  "fill": {
                    "value": "red"
                  }
                },
                "update": {
                  "shape": {
                    "value": "arrow"
                  },
                  "size": {
                    "value": 700
                  },
                  "x": {
                    "scale": "xDetail",
                    "field": "dateTime"
                  },
                  "y": {
                    "signal":  "detailHeight / 2"
                  },
                  "angle": {
                    "field": "value"
                  },
                  "color": {
                    "value": "both"
                  },
                  "strokeWidth": {
                    "value": 1
                  },
                  "fill": {
                    "value": "steelblue"
                  }
                }
              }
            }
          ]
        }
      ]
    },
    {
      "signals": [
        {
          "update": "[0,selectionWidth]"
        }
      ],
      "marks": [
        {},
        {},
        {},
        {
          "type": "symbol",
          "from": {
            "data": "table"
          },
          "encode": {
            "update": {
            "size": {
              "value": 10
            },
            "x": {
              "scale": "xOverview",
              "field": "dateTime"
            },
            "y": {
              "signal":  "overviewHeight / 2"
            },
            "color": {
              "value": "both"
            },
            "strokeWidth": {
              "value": 1
            },
            "fill": {
              "value": "steelblue"
            }
          }
          }
        }
      ]
    }
  ]
}
