{
  $schema: https: //vega.github.io/schema/vega-lite/v2.json
  title: "Capacity in Mpps - 0,001% loss ratio"
  data: {
    url: {
      %context%: true
      %timefield%: "@timestamp"
      index: resu*
      body: {
        _source: ["@timestamp", "_source", "theoretical_tx_rate_pps", "rate_pps", "flow_count", "frame_size", "user_label", "type"]
      },
      size: 10000
    },
    format: { property: "hits.hits" }
  },

  transform: [
        { calculate: "datum._source['rate_pps'] / 1000000" as: "offered_load_pps"},
        { calculate: "datum._source['theoretical_tx_rate_pps'] / 1000000" as: "theoretical_tx_rate_pps"},
        { 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"}
        { aggregate: [{op: "max", field: "offered_load_pps", as: "max_offered_load_pps"}, {op: "max", field: "theoretical_tx_rate_pps", as: "theoretical_tx_rate_pps"}], groupby: ["frame_size", "label","flow_count"]}
    
    ],
  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,
      point: true
    },
    encoding: {
      x: { field: "frame_size", type: "quantitative", title: "Frame size (bytes)", axis: {offset: 10} }
      y: { field: "theoretical_tx_rate_pps", type: "quantitative", title: "Offered load (Mpps)" , axis: {offset: 10}  }
      strokeDash: {"field": "theoretical_tx_rate_pps", "type": "nominal"}
      tooltip: [{"field": "theoretical_tx_rate_pps", "type": "quantitative", title: "theoretical max capacity"}],
      color: { "value": "red"}
    }
    },{
      width:500,
      height:280,
        transform: [
          {filter: { selection: "legendSel"}}
      
      ],mark: {
      type: "line",
      tooltip: true,
      point: 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", type: "quantitative", title: "Frame size (bytes)", axis: {offset: 10} }
      y: { field: "max_offered_load_pps", type: "quantitative", title: "Offered load (Mpps)" , axis: {offset: 10}  }
      color: {field: "label", "type": "nominal",
             "legend": null}
      tooltip: {"field": "max_offered_load_pps", "type": "quantitative"},
     shape: {field: "flow_count", type: "nominal"}
      }
    }
    ]
  }
    
  ]
}