diegocardoso/dc-dashboard

Web Component providing a dashboard and widgets based on CSS Grid.

Hi there 👋

dc-dashboard's Issues

Add initial CSS Grid implementation

Make dc-dashboard be aware dc-dashboard-cell as child

Make dc-dashboard use dc-dashboard-cell properties to set the position of the cell within the grid area.

• To make things easier, dc-dashboard-cell can return a structure with the values

Add property to set row height

Cleanup cells map when a cell is removed

After a dc-dashboard-cell is removed, the entry should be removed from the cells map.

Add property to set gap value between cells

Create named slots for each child

To avoid messing up with the styles for each cell, internal elements of dashboard can be created on the fly for each cell being attached and those element, then would be styled with the CSS Grid properties.

The DOM structure should be like:

<dc-dashboard>
	<!shadow-root>
	<div style="/*css-grid-styles*/">
		<slot name="cell-{n}">
			<dc-dashboard-cell col="1" row="2"></dc-dashboard-cell>
		</slot>
	</div>
</dc-dashboard>

Add property to set number of columns to the dashboard

Add dashboard-cell to be used as child of dashboard

dc-dashboard-cell is a blank component with:

• row: which row the cell will be placed
• column: which column the cell will be placed
• rowSpan: how many rows the cell will take
• colSpan: how many cols the cell will take

The idea is that, all the widgets will them extend this component and this will be a generic one, in case the user wants to have more control of what and how the content will be presented.

Make dashboard responsive

Initial support for responsiveness on dashboard:

• The initial configuration of number of columns will only work for the desktop view
• For narrow viewports, dashboard will rely on the auto-fill option for columns, which will dynamically change the number of columns
• User can define a min width for each cell that will be used for the auto generated columns with auto-fill
• For the cells:
  • The col/row attributes won't be used for narrow viewports
  • colspan will be changed dynamically to respect the amount of columns left
  • rowspan can still be used as is*