Page MenuHomePhabricator

global property "padding" is rendered incorrectly
Open, Needs TriagePublicBUG REPORT

Description

If global property padding is set to some value Graph extension applies it as offset to marks area instead of whole graph area.

Steps to Reproduce:

for actual results see sandbox on wiki or use Graph JSON on GraphSandbox
for expected results copy Vega JSON below to Vega editor

Actual Results:

wiki2.png (206×506 px, 11 KB)

Expected Results:

vega2.png (283×533 px, 20 KB)

since Graph is not 100% compatible with vega syntax below is modified graph JSON working with Vega editor
For this case required change is to replace "properties" with "encoding" in marks.

Graph JSON
{
  "version":2,
  "width": 500,
  "height": 200,
  "padding":3,
  "background":"lightgrey",
  
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "c":0}, 
        {"x": 1, "y": 43, "c":0}, 
        {"x": 2, "y": 480, "c":0}, 
        {"x": 3, "y": 19, "c":0}, 
        {"x": 4, "y": 52, "c":0}, 
        {"x": 5, "y": 24, "c":0}, 
        {"x": 6, "y": 1, "c":0},
        {"x": 7, "y": 17, "c":0}, 
        {"x": 8, "y": 68, "c":0}, 
        {"x": 9, "y": 49, "c":0} 
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "y",
      "type": "log",
      "range": "height",
      "nice": false,
      "clamp": false,
      "zero": true,
      "domain": {"data": "table", "field": "y"},
      "domainMin": 5
    }
  ],
  "axes": [
    {"type":"x","format":"g", "scale": "x","orient":"bottom"},
    {"type":"y","format":"g","scale": "y","orient":"left"}
	
  ],
  
 "marks": 
  [
    {
         "type": "line",
         "clip":true,
          "from": {"data": "table"},
          "properties": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "y", "field": "y"},
              "strokeWidth": {"value": 2.5},
              "stroke": {"value": "#1f77b4"}
              }
            }
    }
  ]
}
Vega JSON
{
	"version":2,
  "width": 500,
  "height": 200,
  "padding":3,
  "background":"lightgrey",
  
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28, "c":0}, 
        {"x": 1, "y": 43, "c":0}, 
        {"x": 2, "y": 480, "c":0}, 
        {"x": 3, "y": 19, "c":0}, 
        {"x": 4, "y": 52, "c":0}, 
        {"x": 5, "y": 24, "c":0}, 
        {"x": 6, "y": 1, "c":0},
        {"x": 7, "y": 17, "c":0}, 
        {"x": 8, "y": 68, "c":0}, 
        {"x": 9, "y": 49, "c":0} 
      ]
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "linear",
      "range": "width",
      "domain": {"data": "table", "field": "x"}
    },
    {
      "name": "y",
      "type": "log",
      "range": "height",
      "nice": false,
      "clamp": false,
      "zero": true,
      "domain": {"data": "table", "field": "y"},
      "domainMin": 5
    }
  ],
  "axes": [
    {"type":"x","format":"g", "scale": "x","orient":"bottom"},
    {"type":"y","format":"g","scale": "y","orient":"left"}
	
  ],
  
 "marks": 
  [
    {
         "type": "line",
         "clip":false,
          "from": {"data": "table"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "y", "field": "y"},
              "strokeWidth": {"value": 2.5},
              "stroke": {"value": "#1f77b4"}
              }
            }
    }
  ]
}

Related Objects