How are dim.x and dim.y interpreted for FixedGrid?

Apps (Frontend)
1

Dear Apps users,

I have a very weird behavior. Consider the following fixedGrid layout:

{
  "id": "layout1",
  "type": "fixedGrid",
  "config": {
    "dim": {
      "x": 24,
      "y": 104
    },
    "containers": [
      {
        "id": "chart1",
        "pos": {
          "x": 1,
          "y": 1
        },
        "size": {
          "w": 24,
          "h": 32
        }
      },
      {
        "id": "chart2",
        "pos": {
          "x": 1,
          "y": 36
        },
        "size": {
          "w": 24,
          "h": 32
        }
      },
      {
        "id": "chart3",
        "pos": {
          "x": 1,
          "y": 72
        },
        "size": {
          "w": 24,
          "h": 32
        }
      }
    ]
  },
  "cellPadding": "2px",
  "placements": [
    {
      "containerId": "chart1",
      "elementId": "efforts_by_priority_chart"
    },
    {
      "containerId": "chart2",
      "elementId": "efforts_by_project_chart"
    },
    {
      "containerId": "chart3",
      "elementId": "efforts_by_defects_found_by_chart"
    }
  ]
}

This leads to the barcharts heavily overlapping on the first two - the legend is completely cut off.

image
image797Ɨ1176 88.9 KB

If I now reduce the total height of the grid to a value that is smaller than the total of the heights of the containers, they no longer get cut off. Also, note the additional scrollbar.

{
  "id": "layout1",
  "type": "fixedGrid",
  "config": {
    "dim": {
      "x": 24,
      "y": 70
    },
    "containers": [
      {
        "id": "chart1",
        "pos": {
          "x": 1,
          "y": 1
        },
        "size": {
          "w": 24,
          "h": 32
        }
      },
      {
        "id": "chart2",
        "pos": {
          "x": 1,
          "y": 36
        },
        "size": {
          "w": 24,
          "h": 32
        }
      },
      {
        "id": "chart3",
        "pos": {
          "x": 1,
          "y": 72
        },
        "size": {
          "w": 24,
          "h": 32
        }
      }
    ]
  },
  "cellPadding": "2px",
  "placements": [
    {
      "containerId": "chart1",
      "elementId": "efforts_by_priority_chart"
    },
    {
      "containerId": "chart2",
      "elementId": "efforts_by_project_chart"
    },
    {
      "containerId": "chart3",
      "elementId": "efforts_by_defects_found_by_chart"
    }
  ]
}

image
image736Ɨ1184 77.8 KB

I think Iā€™m not understanding the setting correctly.

Thanks in advance,
Adrian

2

Hi Adrian, I would favor to use flexGrid instead of trying to work with fixed grid and such high x and y values. This might bring you to your goal sooner and more reliable.

1 Like
3

Hi Johannes,

do you have a demo app available?

Best regards