# Build a Dashboard

::embed-section{src="../../../kanoa-ops-analysis/dashboards.md" collapsed="true" summary="Reference Materials: All About Dashboards."}

:::action[Create a Dashboard]

1. Navigate to **Dashboards → Dashboard Editor** and create a new dashboard.
2. Configure it:

   | Field | Value |
   |---|---|
   | **Name** | `OEE and Top Downtimes` |
   | **Description** | Understand what's driving your OEE |
   | **Folder** | `Downtime Dashboards` (create the folder with the folder icon if it doesn't exist yet) |
   | **Icon** | Optional |
   | **Color** | Optional |
   | **Enabled** | Enabled |
   | **Private** | Optional — use private if only your user should see it; leave public/shared if the dashboard should be available to others |

3. Save the dashboard. The dashboard is now registered in Kanoa, and the design canvas becomes available for adding widgets.
:::

:::action[Add Widgets]

Selector widgets define the context the analytics widgets use. This dashboard needs an asset selector and a date range selector.

1. Select the full top row of the dashboard canvas. In the add widget popup, go to the **Selectors** section, choose **Asset Selector**, and add it to the top row. This lets the user choose which asset the dashboard analyzes.
2. Select the row underneath the asset selector. In the **Selectors** section, choose **Date Range Selector** and add it. This date range drives the analytics widgets below it.
:::

:::action[Add Analytics Widgets]

1. Select a section of the canvas for the first chart. In the add widget popup, find the **Asset OEE Bar Chart** and add it. It shows OEE performance for the selected asset and time range.
2. Select another section of the canvas. Find the **Top Downtimes** widget and add it. It shows the top downtime reasons for the selected asset and date range.
:::

:::action[Adjust widget parameters]

Each widget can receive view parameters that adjust how it behaves, which lets you reuse the same widget in different contexts. You type parameter values in, or pick them from a dropdown when the widget defines options for that parameter.

1. Click the OEE widget and look at its **View Params**.
2. Change the OEE metric parameter to focus the widget on a specific metric: enter `availability` for the `oeeMetric` parameter.

The widget then responds according to how it was designed.
:::

For this dashboard, the analytics widgets should use the asset chosen in the Asset Selector, so leave the asset path as `null`. Conceptually:

```json
{ "assetPath": null }
```

This means "use the current dashboard-selected asset." Alternatively, you can hardcode an asset path so a widget always shows one specific asset:

```json
{ "assetPath": "CoreForge\\Philadelphia\\Machining\\Machine 1" }
```

Keep the asset path dynamic so the selector drives the dashboard.

:::action[Test in View Mode]

1. Switch from edit mode to view mode and confirm that:
   - The dashboard layout looks correct
   - The asset selector and date range selector work
   - The OEE widget and the Top Downtimes widget respond to the selected filters

This validates that the dashboard works as an analytics tool, not just a static layout.
:::

The dashboard editor supports different layouts for different screen sizes. The top of the editor shows the current layout mode, such as **Desktop**, **Tablet**, or **Mobile**, and each breakpoint can have its own widget arrangement. If only one breakpoint is configured, that layout is shown regardless of screen size.

On desktop, place the two analytics widgets side by side. On mobile, side by side is usually too cramped, so stack them vertically: switch to the mobile layout and place the widgets again in the mobile arrangement. This takes some rework, but it gives you much better control over the user experience.

:::check

Copy this script into the Ignition Designer Script Console (**Tools → Script Console**) and run it. It checks the `Downtime Dashboards` folder and the `OEE and Top Downtimes` dashboard (enabled, with a description), that the Desktop layout has the two selectors and the two analytics widgets side by side, that the OEE widget's `oeeMetric` is `availability` and both analytics widgets leave `assetPath` as `null`, and that the Mobile layout stacks the two analytics widgets. Each check prints PASS or FAIL with what to fix. It doesn't change anything.

<details>
<summary>Show the check script</summary>

::check-script{src="ops/06-analytics/1-dashboard-build.py" title="checkLesson-dashboardBuild.py"}

</details>

:::