search

vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.66k stars 607 forks source link

vlSelectionResolve should preserve date format #5239

Open gordonwoodhull opened 5 years ago

gordonwoodhull commented 5 years ago

This may be related to #3737 "Interval selection on temporal data returns empty selection", but it's a simpler situation.

I'm setting up a selection "filter1" in my chart, and watching the selections change via react-vega-lite's onSignalFilter1.

If I specify the fields for the selection:

  "encoding": {
    "x": {
      "field": "time",
      "type": "temporal"
    },
    ...
  },
  "selection": {
    "filter1": {
      "type": "interval",
      "clear": false,
      "encodings": [
        "x"
      ],
      "fields": ["time"],
      ...
    }
  }

then I receive back

{"time":[null,"2014-01-04T13:40:48.000Z"]}

The lower bound is null. This can be seen in the signal viewer of the Vega Editor, after dragging a selection.

If I don't specify fields then I get

{"time":[1387018080000,1389223008000]}

so my workaround is to convert the millisecond time to Dates myself. But I'd rather get back Dates since I put in Dates.

IIUC #3737 suggests a workaround of specifying the timeUnit for the encoding. This did give me both bounds as Dates but

I think I am better off letting Vega-Lite infer as much as possible from the data, so my workaround is better for now.

Complete example:

{
  "data": {
    "values": [
      {
        "time": "2013-12-06T18:00:00.000Z",
        "count": 225
      },
      {
        "time": "2013-12-07T06:00:00.000Z",
        "count": 232
      },
      {
        "time": "2013-12-07T18:00:00.000Z",
        "count": 393
      },
      {
        "time": "2013-12-08T06:00:00.000Z",
        "count": 268
      },
      {
        "time": "2013-12-08T18:00:00.000Z",
        "count": 318
      },
      {
        "time": "2013-12-09T06:00:00.000Z",
        "count": 233
      },
      {
        "time": "2013-12-09T18:00:00.000Z",
        "count": 381
      },
      {
        "time": "2013-12-10T06:00:00.000Z",
        "count": 225
      },
      {
        "time": "2013-12-10T18:00:00.000Z",
        "count": 393
      },
      {
        "time": "2013-12-11T06:00:00.000Z",
        "count": 235
      },
      {
        "time": "2013-12-11T18:00:00.000Z",
        "count": 410
      },
      {
        "time": "2013-12-12T06:00:00.000Z",
        "count": 227
      },
      {
        "time": "2013-12-12T18:00:00.000Z",
        "count": 415
      },
      {
        "time": "2013-12-13T06:00:00.000Z",
        "count": 254
      },
      {
        "time": "2013-12-13T18:00:00.000Z",
        "count": 508
      },
      {
        "time": "2013-12-14T06:00:00.000Z",
        "count": 223
      },
      {
        "time": "2013-12-14T18:00:00.000Z",
        "count": 401
      },
      {
        "time": "2013-12-15T06:00:00.000Z",
        "count": 250
      },
      {
        "time": "2013-12-15T18:00:00.000Z",
        "count": 339
      },
      {
        "time": "2013-12-16T06:00:00.000Z",
        "count": 252
      },
      {
        "time": "2013-12-16T18:00:00.000Z",
        "count": 442
      },
      {
        "time": "2013-12-17T06:00:00.000Z",
        "count": 264
      },
      {
        "time": "2013-12-17T18:00:00.000Z",
        "count": 472
      },
      {
        "time": "2013-12-18T06:00:00.000Z",
        "count": 263
      },
      {
        "time": "2013-12-18T18:00:00.000Z",
        "count": 477
      },
      {
        "time": "2013-12-19T06:00:00.000Z",
        "count": 281
      },
      {
        "time": "2013-12-19T18:00:00.000Z",
        "count": 499
      },
      {
        "time": "2013-12-20T06:00:00.000Z",
        "count": 285
      },
      {
        "time": "2013-12-20T18:00:00.000Z",
        "count": 541
      },
      {
        "time": "2013-12-21T06:00:00.000Z",
        "count": 305
      },
      {
        "time": "2013-12-21T18:00:00.000Z",
        "count": 457
      },
      {
        "time": "2013-12-22T06:00:00.000Z",
        "count": 277
      },
      {
        "time": "2013-12-22T18:00:00.000Z",
        "count": 447
      },
      {
        "time": "2013-12-23T06:00:00.000Z",
        "count": 271
      },
      {
        "time": "2013-12-23T18:00:00.000Z",
        "count": 389
      },
      {
        "time": "2013-12-24T06:00:00.000Z",
        "count": 189
      },
      {
        "time": "2013-12-24T18:00:00.000Z",
        "count": 326
      },
      {
        "time": "2013-12-25T06:00:00.000Z",
        "count": 155
      },
      {
        "time": "2013-12-25T18:00:00.000Z",
        "count": 255
      },
      {
        "time": "2013-12-26T06:00:00.000Z",
        "count": 179
      },
      {
        "time": "2013-12-26T18:00:00.000Z",
        "count": 405
      },
      {
        "time": "2013-12-27T06:00:00.000Z",
        "count": 202
      },
      {
        "time": "2013-12-27T18:00:00.000Z",
        "count": 511
      },
      {
        "time": "2013-12-28T06:00:00.000Z",
        "count": 255
      },
      {
        "time": "2013-12-28T18:00:00.000Z",
        "count": 457
      },
      {
        "time": "2013-12-29T06:00:00.000Z",
        "count": 283
      },
      {
        "time": "2013-12-29T18:00:00.000Z",
        "count": 421
      },
      {
        "time": "2013-12-30T06:00:00.000Z",
        "count": 237
      },
      {
        "time": "2013-12-30T18:00:00.000Z",
        "count": 380
      },
      {
        "time": "2013-12-31T06:00:00.000Z",
        "count": 197
      },
      {
        "time": "2013-12-31T18:00:00.000Z",
        "count": 341
      },
      {
        "time": "2014-01-01T06:00:00.000Z",
        "count": 215
      },
      {
        "time": "2014-01-01T18:00:00.000Z",
        "count": 152
      },
      {
        "time": "2014-01-02T06:00:00.000Z",
        "count": 76
      },
      {
        "time": "2014-01-02T18:00:00.000Z",
        "count": 121
      },
      {
        "time": "2014-01-03T06:00:00.000Z",
        "count": 121
      },
      {
        "time": "2014-01-03T18:00:00.000Z",
        "count": 244
      },
      {
        "time": "2014-01-04T06:00:00.000Z",
        "count": 137
      },
      {
        "time": "2014-01-04T18:00:00.000Z",
        "count": 268
      },
      {
        "time": "2014-01-05T06:00:00.000Z",
        "count": 135
      },
      {
        "time": "2014-01-05T18:00:00.000Z",
        "count": 206
      },
      {
        "time": "2014-01-06T06:00:00.000Z",
        "count": 137
      },
      {
        "time": "2014-01-06T18:00:00.000Z",
        "count": 212
      },
      {
        "time": "2014-01-07T06:00:00.000Z",
        "count": 125
      },
      {
        "time": "2014-01-07T18:00:00.000Z",
        "count": 321
      },
      {
        "time": "2014-01-08T06:00:00.000Z",
        "count": 200
      },
      {
        "time": "2014-01-08T18:00:00.000Z",
        "count": 379
      },
      {
        "time": "2014-01-09T06:00:00.000Z",
        "count": 200
      },
      {
        "time": "2014-01-09T18:00:00.000Z",
        "count": 396
      },
      {
        "time": "2014-01-10T06:00:00.000Z",
        "count": 222
      },
      {
        "time": "2014-01-10T18:00:00.000Z",
        "count": 383
      },
      {
        "time": "2014-01-11T06:00:00.000Z",
        "count": 224
      },
      {
        "time": "2014-01-11T18:00:00.000Z",
        "count": 397
      },
      {
        "time": "2014-01-12T06:00:00.000Z",
        "count": 279
      },
      {
        "time": "2014-01-12T18:00:00.000Z",
        "count": 384
      },
      {
        "time": "2014-01-13T06:00:00.000Z",
        "count": 251
      },
      {
        "time": "2014-01-13T18:00:00.000Z",
        "count": 489
      },
      {
        "time": "2014-01-14T06:00:00.000Z",
        "count": 208
      },
      {
        "time": "2014-01-14T18:00:00.000Z",
        "count": 436
      },
      {
        "time": "2014-01-15T06:00:00.000Z",
        "count": 223
      },
      {
        "time": "2014-01-15T18:00:00.000Z",
        "count": 477
      },
      {
        "time": "2014-01-16T06:00:00.000Z",
        "count": 213
      },
      {
        "time": "2014-01-16T18:00:00.000Z",
        "count": 440
      },
      {
        "time": "2014-01-17T06:00:00.000Z",
        "count": 262
      },
      {
        "time": "2014-01-17T18:00:00.000Z",
        "count": 456
      },
      {
        "time": "2014-01-18T06:00:00.000Z",
        "count": 257
      },
      {
        "time": "2014-01-18T18:00:00.000Z",
        "count": 375
      },
      {
        "time": "2014-01-19T06:00:00.000Z",
        "count": 237
      },
      {
        "time": "2014-01-19T18:00:00.000Z",
        "count": 372
      }
    ]
  },
  "description": "Time series chart",
  "mark": "line",
  "encoding": {
    "x": {
      "field": "time",
      "type": "temporal"
    },
    "y": {
      "field": "count",
      "type": "quantitative"
    },
    "color": {
      "legend": null
    }
  },
  "selection": {
    "filter1": {
      "type": "interval",
      "clear": false,
      "encodings": [
        "x"
      ],
      "fields": ["time"],
      "on": "[mousedown[!event.altKey && !event.metaKey], mouseup] > mousemove",
      "translate": "[mousedown[!event.altKey && !event.metaKey], mouseup] > mousemove",
      "mark": {
        "fill": "#1f77b4",
        "fillOpacity": 0.5,
        "stroke": "#1f77b4"
      }
    }
  }
}
arvind commented 3 years ago

Hi @gordonwoodhull, #7164 should fix the null issue. The values populated in the top-level selection signals reflect what the corresponding underlying scales return to us. In the case of time scales, this is typically a millisecond value. As a result, I'm leaving this issue open but have retitled and relabeled it as an enhancement request.