{
  $schema: "https://vega.github.io/schema/vega-lite/v2.json"
  title: "Capacity in Gbps - 0,001% loss ratio"
  data: {
    url: {
      %context%: true
      %timefield%: "@timestamp"
      index: resu*
      body: {
        _source: ["@timestamp", "_source", "offered_tx_rate_bps", "theoretical_tx_rate_bps", "flow_count", "frame_size", "user_label"]
      },
      size: 10000
    },
    format: { property: "hits.hits" }
  },
  transform: [
    { calculate: "datum._source['offered_tx_rate_bps'] / 1000000000" as: "offered_tx_rate_bps"},
        { calculate: "datum._source['theoretical_tx_rate_bps'] / 1000000000" as: "theoretical_tx_rate_bps"},
    { calculate: "datum._source['flow_count']" as: "flow_count"},
    { calculate: "isNaN(toNumber(datum._source['frame_size'])) ? 362 : toNumber(datum._source['frame_size'])" as: "frame_size"}
    { calculate: "datum._source['user_label'] + '-' + datum._source['flow_count']" as: "label"}
  ],
  center: true,
  hconcat: [
  {
      width:10,
      selection: {
        legendSel: {
          type: "multi",
          encodings: [ "color", "shape" ],
          toggle: "event.shiftKey"
        }
      },
      encoding: {
        y: {
          field: "label",
          type: "nominal",
          axis: {
            title: "",
            domain: false,
            ticks: false,
            offset: 10
          },
        },
        color: {
          condition: {
            selection: "legendSel",
            field: "label",
            type: "nominal",
            legend: null
          },
          value: "lightgrey"
        }
      },
      mark: {
        type: "square",
        size: 120,
        opacity: 1
      }
    },
    {
      layer: [
        {
          mark: {
            type: "line",
            tooltip: true
          },
          encoding: {
            x: { field: "frame_size", type: "quantitative", title: "Frame size (bytes)", axis: {offset: 10} }
            y: { field: "theoretical_tx_rate_bps", type: "quantitative", title: "Offered load (Gbps)" , axis: {offset: 10}  }
            strokeDash: {"field": "theoretical_tx_rate_bps", "type": "nominal"}
            tooltip: [{"field": "theoretical_tx_rate_bps", "type": "quantitative", title: "theoretical max capacity"}],
            color: { "value": "red"}
          }
        },
        {
          width:500,
          height:280,
          transform: [
            {filter: { selection: "legendSel"}}
          ],
          mark: {
            "type": "point",
            "tooltip": true
          },
          selection: {
            grid: {
              type: "interval",
              resolve: "global",
              bind: "scales",
              translate: "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
              zoom: "wheel![!event.shiftKey]"
            },
            pts: {
              type: "single",
              fields: ["label"]
            }
          },
          encoding: {
            x: {
              field: "frame_size",
              title: "Frame size (bytes)",
              type: "quantitative"
            }
            y: {
              field: "offered_tx_rate_bps",
              title: "Offered load (Gbps)",
              type: "quantitative"
            }
            color: {
              field: "label", "type": "nominal",
                   "legend": null
            }
            shape: {
              field: "flow_count",
              type: "nominal"
            }
            tooltip: {
              "field": "offered_tx_rate_bps",
              "title": "Offered load (Gbps)",
              "type": "quantitative"
            }
          }
        }
      ]
    }
  ]
}