Customization tool for dashboards

1. A computer implemented method comprising:

detecting an initial drop zone location being located on a cell of a neighboring visualization of at least one neighboring visualization;

partitioning the cell into a plurality of quadrants;

detecting a first quadrant of the plurality of quadrants having the initial drop zone location;

generating a first preview of a selected visualization on the cell at the first quadrant, wherein generating the first preview comprises:

positioning a first placeholder over a first half of the cell, the first half defined by the first quadrant,

resizing the neighboring visualization to be over a second half of the cell to obtain a first resized neighboring visualization, and

displaying the first placeholder and the first resized neighboring visualization on the cell in a dashboard;

detecting a second drop zone location of the selected visualization within the dashboard;

identifying the at least one neighboring visualization to the second drop zone location, wherein the at least one neighboring visualization shares an edge with the second drop zone location;

detecting a second quadrant of the plurality of quadrants having the second drop zone location;

generating a second preview of the selected visualization on the cell at the first quadrant, wherein generating the second preview comprises:

positioning a second placeholder over a third half of the cell, the third half defined by the second quadrant, wherein the third half intersects the first half and the second half,

resizing the neighboring visualization to be over a fourth half of the cell to obtain a second resized neighboring visualization, wherein the fourth half intersects the first half and the second half, and

displaying the second placeholder and the second resized neighboring visualization on the cell in the dashboard;

receiving a selection to place the selected visualization on the third half;

sizing the selected visualization for the second drop zone location;

resizing the at least one neighboring visualization based on the selected visualization being added to the second drop zone location;

adding the selected visualization to the second drop zone location to generate an updated dashboard by at least replacing the second placeholder with the selected visualization in the dashboard; and

presenting the updated dashboard.

2. The computer implemented method of claim 1 , further comprising:

detecting a third drop zone location of a second selected visualization within the dashboard;

identifying at least two neighboring visualizations to the third drop zone location;

detecting that the third drop zone location is on a second edge between the at least two neighboring visualizations;

resizing each of the at least two neighboring visualizations based on the third drop zone location to create a new cell for the second selected visualization; and

adding the second selected visualization to the new cell.

3. The computer implemented method of claim 1 , further comprising:

detecting an edge dragging event of a selected edge, the edge dragging event comprising dragging the selected edge along an axis perpendicular to the edge;

identifying a parallel edge to the selected edge, the parallel edge within a threshold distance to the selected edge along the axis; and

setting the edge dragging event to make the selected edge be collinear with the parallel edge based on the parallel edge being within the threshold distance to the selected edge.

4. The computer implemented method of claim 1 , further comprising:

receiving a resizing event for a target visualization;

determining a minimum size threshold of the target visualization; and

stopping the resizing event when a size of the target visualization complies with the minimum size threshold.

5. The computer implemented method of claim 1 , wherein the at least one neighboring visualization spans a plurality of rows.

6. The computer implemented method of claim 1 , further comprising:

determining each adjacent visualization to the selected visualization, each adjacent visualization being adjacent to the selected visualization prior to a move to the second drop zone location; and

increasing a size of one or more of the adjacent visualizations to fill a space created by the selected visualization with the move.

7. The computer implemented method of claim 1 , further comprising:

saving, with the dashboard, a plurality of locations of a plurality of visualizations to create a saved dashboard, wherein the saved dashboard omits a plurality of borders;

loading the saved dashboard at a runtime; and

generating the plurality of borders between the plurality of visualizations at the runtime.

8. The computer implemented method of claim 1 , further comprising:

generating a plurality of borders between a plurality of visualizations by:

starting at a first position of the dashboard, extending a border between a first subset of the plurality of visualizations until the border intersects a visualization.

9. The computer implemented method of claim 1 , further comprising:

generating a plurality of borders between a plurality of visualizations by:

starting at a first position of the dashboard, extending a border between a first subset of the plurality of visualizations until the border intersects a corner between four visualizations, and

breaking the border at the corner.

10. The computer implemented method of claim 1 , further comprising:

obtaining a definition of the selected visualization;

extracting, from the definition, a dataset, a color encoding, and a visualization type;

obtaining a preset data matching the visualization type;

extracting, from the preset data, a visualization type code defining a rendering process to render the visualization type; and

rendering data from the dataset into the selected visualization according to the visualization type code, and the color encoding.

11. The computer implemented method of claim 1 , further comprising:

obtaining a definition of the selected visualization;

extracting, from the definition, a dataset, a color encoding, a label set, a location identifier, and a visualization type;

obtaining a preset data matching the visualization type;

extracting, from the preset data, a visualization type code defining a rendering process to render the visualization type; and

rendering data from the dataset into the selected visualization according to the visualization type code and the color encoding, wherein the rendering comprises adding the visualization type and the label set to a new cell at a location within the new cell defined by the location identifier.

12. A computer system comprising:

a computer processor; and

instructions, stored in memory, for causing the computer processor to perform operations, the operations comprising:

detecting an initial drop zone location being located on a cell of a neighboring visualization of at least one neighboring visualization,

partitioning the cell into a plurality of quadrants,

detecting a first quadrant of the plurality of quadrants having the initial drop zone location,

generating a first preview of a selected visualization on the cell at the first quadrant, wherein generating the first preview comprises:

positioning a first placeholder over a first half of the cell, the first half defined by the first quadrant,

resizing the neighboring visualization to be over a second half of the cell to obtain a first resized neighboring visualization, and

displaying the first placeholder and the first resized neighboring visualization on the cell in a dashboard,

detecting a second drop zone location of the selected visualization within the dashboard,

identifying the at least one neighboring visualization to the second drop zone location, wherein the at least one neighboring visualization shares an edge with the second drop zone location,

detecting a second quadrant of the plurality of quadrants having the second drop zone location,

generating a second preview of the selected visualization on the cell at the first quadrant, wherein generating the second preview comprises:

positioning a second placeholder over a third half of the cell, the third half defined by the second quadrant, wherein the third half intersects the first half and the second half,

resizing the neighboring visualization to be over a fourth half of the cell to obtain a second resized neighboring visualization, wherein the fourth half intersects the first half and the second half, and

displaying the second placeholder and the second resized neighboring visualization on the cell in the dashboard,

receiving a selection to place the selected visualization on the third half,

sizing the selected visualization for the second drop zone location,

resizing the at least one neighboring visualization based on the selected visualization being added to the second drop zone location by at least replacing the second placeholder with the selected visualization in the dashboard,

adding the selected visualization to the second drop zone location to generate an updated dashboard, and

presenting the updated dashboard.

13. The computer system of claim 12 , the operations further comprising:

obtaining a definition of the selected visualization;

extracting, from the definition, a dataset, a color encoding, and a visualization type;

obtaining a preset data matching the visualization type;

extracting, from the preset data, a visualization type code defining a rendering process to render the visualization type; and

rendering data from the dataset into the selected visualization according to the visualization type code, and the color encoding.

14. The computer system of claim 12 , wherein the operations further comprise:

detecting a third drop zone location of a second selected visualization within the dashboard;

identifying at least two neighboring visualizations to the third drop zone location;

detecting that the third drop zone location is on a second edge between the at least two neighboring visualizations;

resizing each of the at least two neighboring visualizations based on the third drop zone location to create a new cell for the second selected visualization; and

adding the second selected visualization to the new cell.

15. The computer system of claim 12 , wherein the operations further comprise:

detecting an edge dragging event of a selected edge, the edge dragging event comprising dragging the selected edge along an axis perpendicular to the edge;

identifying a parallel edge to the selected edge, the parallel edge within a threshold distance to the selected edge along the axis; and

setting the edge dragging event to make the selected edge be collinear with the parallel edge based on the parallel edge being within the threshold distance to the selected edge.

16. The computer system of claim 12 , wherein the operations further comprise:

receiving a resizing event for a target visualization;

determining a minimum size threshold of the target visualization; and

stopping the resizing event when a size of the target visualization complies with the minimum size threshold.

17. The computer system of claim 12 , wherein the at least one neighboring visualization spans a plurality of rows.

18. The computer system of claim 12 , wherein the operations further comprise:

determining each adjacent visualization to the selected visualization, each adjacent visualization being adjacent to the selected visualization prior to a move to the second drop zone location; and

increasing a size of one or more of the adjacent visualizations to fill a space created by the selected visualization with the move.

19. A non-transitory computer readable medium comprising computer readable program code for causing a computer system to perform operations, the operations comprising:

detecting an initial drop zone location being located on a cell of a neighboring visualization of at least one neighboring visualization;

partitioning the cell into a plurality of quadrants;

detecting a first quadrant of the plurality of quadrants having the initial drop zone location;

generating a first preview of a selected visualization on the cell at the first quadrant, wherein generating the first preview comprises:

positioning a first placeholder over a first half of the cell, the first half defined by the first quadrant,

resizing the neighboring visualization to be over a second half of the cell to obtain a first resized neighboring visualization, and

displaying the first placeholder and the first resized neighboring visualization on the cell in a dashboard;

detecting a second drop zone location of the selected visualization within the dashboard;

identifying the at least one neighboring visualization to the second drop zone location, wherein the at least one neighboring visualization shares an edge with the second drop zone location;

detecting a second quadrant of the plurality of quadrants having the second drop zone location;

generating a second preview of the selected visualization on the cell at the first quadrant, wherein generating the second preview comprises:

positioning a second placeholder over a third half of the cell, the third half defined by the second quadrant, wherein the third half intersects the first half and the second half,

resizing the neighboring visualization to be over a fourth half of the cell to obtain a second resized neighboring visualization, wherein the fourth half intersects the first half and the second half, and

displaying the second placeholder and the second resized neighboring visualization on the cell in the dashboard;

receiving a selection to place the selected visualization on the third half;

sizing the selected visualization for the second drop zone location;

resizing the at least one neighboring visualization based on the selected visualization being added to the second drop zone location;

adding the selected visualization to the second drop zone location to generate an updated dashboard by at least replacing the second placeholder with the selected visualization in the dashboard; and

presenting the updated dashboard.

20. The non-transitory computer readable medium of claim 19 , the operations further comprising:

obtaining a definition of the selected visualization;

extracting, from the definition, a dataset, a color encoding, and a visualization type;

obtaining a preset data matching the visualization type;

extracting, from the preset data, a visualization type code defining a rendering process to render the visualization type; and

rendering data from the dataset into the selected visualization according to the visualization type code, and the color encoding.