Dashboard

2x2 grid of panels like an analytics dashboard.

This is a dashboard built from nested horizontal and vertical groups rather than a separate grid primitive. Resize a row, then resize a panel inside that row to see how each group owns one dimension.

The example keeps stable metric panels beside a tabbed activity area, which is the common shape for analytics and operations tools.

const layout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'vertical',
  children: [
    {
      type: 'group',
      direction: 'horizontal',
      size: 50,
      children: [
        {
          type: 'panel',
          id: 'top-left',
          size: 50,
          tabs: [
            {
              id: 'chart',
              data: { title: 'Revenue Chart' },
              closable: false,
            },
          ],
        },
        {
          type: 'panel',
          id: 'top-right',
          size: 50,
          tabs: [
            {
              id: 'metrics',
              data: { title: 'Key Metrics' },
              closable: false,
            },
          ],
        },
      ],
    },
    {
      type: 'group',
      direction: 'horizontal',
      size: 50,
      children: [
        {
          type: 'panel',
          id: 'bottom-left',
          size: 50,
          tabs: [
            {
              id: 'table',
              data: { title: 'Data Table' },
              closable: false,
            },
          ],
        },
        {
          type: 'panel',
          id: 'bottom-right',
          size: 50,
          tabs: [
            { id: 'logs', data: { title: 'Activity Log' } },
            { id: 'alerts', data: { title: 'Alerts' } },
          ],
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <>
      <span>{tab.data.title}</span>
    </>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent>
      <div style={widgetStyle}>{tab.data.title} widget</div>
    </TabContent>
  )}
/>

Related