> ## Documentation Index > Fetch the complete documentation index at: https://documentation.kodelabs.com/llms.txt > Use this file to discover all available pages before exploring further. # Build your first dashboard > Build a Down Devices Building BI dashboard with Number (Target), bar, line, and pivot table widgets. export const TutorialStep = ({tutorialId, id, number, title, stepIds = "", subStepIds = "", mediaLabel, children}) => { const progressEvent = "kode-tutorial-progress"; const brandBlues = ["#015BFA", "#3A9AFF", "#7BB3FF", "#C5DBFF", "#E8F1FF"]; const [complete, setComplete] = useState(false); const parseIds = value => { if (Array.isArray(value)) return value; if (typeof value === "string" && value.length > 0) { return value.split(",").map(stepId => stepId.trim()).filter(Boolean); } return []; }; const hasSubsteps = parseIds(subStepIds).length > 0; const readProgress = () => { if (typeof window === "undefined") return {}; try { return JSON.parse(localStorage.getItem(`kode-tutorial:${tutorialId}`) || "{}"); } catch { return {}; } }; const writeProgress = next => { if (typeof window === "undefined") return; localStorage.setItem(`kode-tutorial:${tutorialId}`, JSON.stringify(next)); window.dispatchEvent(new CustomEvent(progressEvent, { detail: { tutorialId, progress: next } })); }; const computeComplete = current => { const subs = parseIds(subStepIds); if (subs.length > 0) { return subs.every(stepId => current[stepId] === true); } return current[id] === true; }; const playConfetti = () => { if (typeof window === "undefined" || typeof document === "undefined") return; const canvas = document.createElement("canvas"); canvas.className = "tutorial-confetti-canvas"; canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); const ctx = canvas.getContext("2d"); const pieces = Array.from({ length: 80 }, () => ({ x: Math.random() * canvas.width, y: -20 - Math.random() * canvas.height * 0.35, w: 4 + Math.random() * 5, h: 6 + Math.random() * 8, color: brandBlues[Math.floor(Math.random() * brandBlues.length)], vy: 2.2 + Math.random() * 3.2, vx: -1.5 + Math.random() * 3, rot: Math.random() * Math.PI, vr: -0.12 + Math.random() * 0.24, alpha: 0.55 + Math.random() * 0.35 })); let frame = 0; const maxFrames = 110; const draw = () => { frame += 1; ctx.clearRect(0, 0, canvas.width, canvas.height); pieces.forEach(piece => { piece.x += piece.vx; piece.y += piece.vy; piece.rot += piece.vr; piece.vy += 0.045; const fade = Math.max(0, 1 - frame / maxFrames); ctx.save(); ctx.translate(piece.x, piece.y); ctx.rotate(piece.rot); ctx.globalAlpha = piece.alpha * fade; ctx.fillStyle = piece.color; ctx.fillRect(-piece.w / 2, -piece.h / 2, piece.w, piece.h); ctx.restore(); }); if (frame < maxFrames) { requestAnimationFrame(draw); } else { canvas.remove(); } }; requestAnimationFrame(draw); }; useEffect(() => { const current = readProgress(); setComplete(computeComplete(current)); const onProgress = event => { if (event.detail?.tutorialId === tutorialId) { setComplete(computeComplete(event.detail.progress || ({}))); } }; window.addEventListener(progressEvent, onProgress); return () => window.removeEventListener(progressEvent, onProgress); }, [tutorialId, id, subStepIds]); const toggleComplete = () => { if (hasSubsteps) return; const current = readProgress(); const nextValue = !current[id]; const next = { ...current, [id]: nextValue }; writeProgress(next); setComplete(nextValue); const topLevel = parseIds(stepIds); if (nextValue && topLevel.length > 0 && topLevel.every(stepId => next[stepId] === true)) { playConfetti(); } }; return

Step {number}

{title}

{mediaLabel ?
{mediaLabel} Replace this block with a Frame, image, or video when ready
: null}
{children}
{hasSubsteps ?

{complete ? "All substeps complete" : "Mark each substep complete to finish this step"}

: }
; }; export const TutorialProgress = ({tutorialId, steps = []}) => { const progressEvent = "kode-tutorial-progress"; const [progress, setProgress] = useState({}); const [activeId, setActiveId] = useState(steps[0]?.id || ""); const parseSubsteps = step => { if (!step?.substeps) return []; if (Array.isArray(step.substeps)) return step.substeps; if (typeof step.substeps !== "string") return []; return step.substeps.split(";").map(entry => entry.trim()).filter(Boolean).map(entry => { const sep = entry.indexOf(":"); if (sep === -1) return { id: entry, title: entry }; return { id: entry.slice(0, sep).trim(), title: entry.slice(sep + 1).trim() }; }); }; const isStepComplete = (step, current) => { const subs = parseSubsteps(step); if (subs.length > 0) { return subs.every(sub => current[sub.id] === true); } return current[step.id] === true; }; const readProgress = () => { if (typeof window === "undefined") return {}; try { return JSON.parse(localStorage.getItem(`kode-tutorial:${tutorialId}`) || "{}"); } catch { return {}; } }; const resetProgress = () => { if (typeof window === "undefined") return; localStorage.removeItem(`kode-tutorial:${tutorialId}`); window.dispatchEvent(new CustomEvent(progressEvent, { detail: { tutorialId, progress: {} } })); }; useEffect(() => { setProgress(readProgress()); const onProgress = event => { if (event.detail?.tutorialId === tutorialId) { setProgress(event.detail.progress || ({})); } }; window.addEventListener(progressEvent, onProgress); return () => window.removeEventListener(progressEvent, onProgress); }, [tutorialId]); useEffect(() => { const ids = []; steps.forEach(step => { ids.push(step.id); parseSubsteps(step).forEach(sub => ids.push(sub.id)); }); const nodes = ids.map(stepId => { return document.getElementById(`tutorial-step-${stepId}`) || document.getElementById(`tutorial-substep-${stepId}`); }).filter(Boolean); if (nodes.length === 0) return undefined; const observer = new IntersectionObserver(entries => { const visible = entries.filter(entry => entry.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio); if (visible[0]?.target?.id) { const raw = visible[0].target.id.replace("tutorial-substep-", "").replace("tutorial-step-", ""); setActiveId(raw); } }, { rootMargin: "-20% 0px -55% 0px", threshold: [0.15, 0.4, 0.7] }); nodes.forEach(node => observer.observe(node)); return () => observer.disconnect(); }, [tutorialId, steps.length]); const completedCount = steps.filter(step => isStepComplete(step, progress)).length; const done = steps.length > 0 && steps.every(step => isStepComplete(step, progress)); const pct = steps.length ? Math.round(completedCount / steps.length * 100) : 0; return ; }; export const TutorialHero = ({eyebrow = "Tutorial", title, summary, time, level, imageSrc, imageAlt = "Tutorial preview"}) => { useEffect(() => { if (typeof document === "undefined") return undefined; document.documentElement.setAttribute("data-tutorial-layout", "true"); const page = document.querySelector(".tutorial-page"); if (page) { let sibling = page.previousElementSibling; while (sibling) { sibling.setAttribute("data-tutorial-hidden-header", "true"); sibling = sibling.previousElementSibling; } } document.querySelectorAll("h1").forEach(heading => { if (heading.textContent.trim() !== title) return; heading.setAttribute("data-tutorial-hidden-header", "true"); const prev = heading.previousElementSibling; if (prev) prev.setAttribute("data-tutorial-hidden-header", "true"); const next = heading.nextElementSibling; if (next && next.tagName === "P") { next.setAttribute("data-tutorial-hidden-header", "true"); } }); return () => { document.documentElement.removeAttribute("data-tutorial-layout"); document.querySelectorAll("[data-tutorial-hidden-header]").forEach(node => node.removeAttribute("data-tutorial-hidden-header")); }; }, [title]); return
; };
Building BI appearing in the left navigation after the module is enabled Confirm that Building BI is available in the left navigation and that your role can open the module. Enable Building BI on the building `Modules` tab in Launchpad. KODE Support often does this for your organization. If you cannot see `Building BI`, contact [support@kodelabs.com](mailto:support@kodelabs.com) or ask your customer success manager (CSM). You can submit this as a support request or bug report. After the module is available, your role still needs the right permissions. See [Enable Building BI](/products/building-bi/overview#enable-building-bi) and [How Building BI permissions work](/products/building-bi/concepts/how-permissions-work). New Dashboard dialog showing Down Devices as the title, a description field, and a timezone selector Create an empty building-level dashboard. You fill it with widgets in the next steps. Open `Collections and Dashboards` and select `+ New Dashboard`. Create the dashboard at the **building** level, not the portfolio level. Building-level dashboards scope to one building. In the popup, set the name to `Down Devices`. Enter a short description such as `Track currently down devices by type, trend, and device detail.` Set the timezone to your building's timezone. See [Timezone configuration](/products/building-bi/reference/timezone-configuration). Select `Create`, then open the dashboard and enter edit mode. Widget data can come from many sources. For this walkthrough, use two standard sources that appear in most KODE deployments: * [`Point Time Series Last Value Aggregated`](/products/building-bi/data-sources#key-data-sources) — last value each point reported. Use this so devices with different report intervals still appear. * [`Point Time Series Real Time`](/products/building-bi/data-sources#key-data-sources) — raw updates as soon as KODE receives them. Start with a [Card](/products/building-bi/reference/chart-types#card) that shows one value: the count of currently down devices. From the chart list, drag a `Card` onto the canvas. Resize it as needed. Dragging a Card chart from the chart list onto the dashboard canvas Open the `Setup` tab. Select `Point Time Series Last Value Aggregated` so you read the last known device status. Set the value to the `device_id` column. Use **count distinct**. This counts unique devices. Count distinct is best practice even when each row should have one value. Filter with the `cur_status` column. Set the operator to `in` and the value to `down`. See [Filter options](/products/building-bi/reference/filter-options). Open the `Style` tab. In `Description`, type `Currently Down Devices`. See [Chart styling options](/products/building-bi/reference/chart-styling-options#general). Your Card should look like this: Card widget on the canvas showing a count of down devices with the Currently Down Devices description Number (Target) widget showing down devices over total devices with Currently Down Devices as the description Convert the Card into a [Number (Target)](/products/building-bi/reference/chart-types#number-target) widget. The primary value stays filtered to down devices. The target shows the total device count for context. In `Setup`, change the chart type from `Card` to `Number (Target)`. This adds a second metric next to the primary value. Set `device_id` as the target value with **count distinct** and no filters. This shows down devices relative to total devices. Open the `Style` tab. In `Target Metric`, change the color of the concatenation symbol and the metric so the comparison stands out. See [Chart styling options](/products/building-bi/reference/chart-styling-options). Bar chart titled Currently Down Devices by Device Type with counts by mechanical type Build a [bar chart](/products/building-bi/reference/chart-types#bar) that shows down devices by device type. Use the same Last Value data source as the Number (Target) widget. Drag a `Bar` chart onto the canvas. Select `Point Time Series Last Value Aggregated`. Set the filter on `cur_status` to `in` and `down`. Use **count distinct** of `device_id`. This total should match your Number (Target) primary value. Use the `Device Mechanical Type Name` column. This ontology field returns types such as HVAC, AHU, or Water Meter. In `Setup`, open the dropdown for each column and set a display name. This updates the axis title and tooltip. Open the `Style` tab and make these changes: * In [`General`](/products/building-bi/reference/chart-styling-options#general), set the title to `Currently Down Devices by Device Type`. * On the [`X-Axis`](/products/building-bi/reference/chart-styling-options#x-axis-and-y-axis) tab, adjust margin, interval, and value rotation so labels do not overlap. * In [`Data Labels`](/products/building-bi/reference/chart-styling-options#data-labels), enable labels with the eye icon. Set placement to `Outside`. Line chart titled Down Devices in Last 7 Days with hourly counts on the X-axis Create a [line chart](/products/building-bi/reference/chart-types#line) that shows down device counts over the last seven days. Drag a `Line` chart onto the canvas. Select `Point Time Series Real Time`. Real Time includes every update, so start with a time filter. Set **Last time range** to **Last 7 Days**. Put `date_time_local` on the X-axis. This is the localized time for the building. Change the granularity from `none` to **Date Hour** so each point is an hourly count. Use **count distinct** of `device_id`. In [`Style` > `General`](/products/building-bi/reference/chart-styling-options#general), set the title to `Down Devices in Last 7 Days`. Rename the axes to `Down Devices` and `Date Hour` from `Setup` or the axis title fields in `Style`. Pivot table expanding device types to show device names linked to KODE OS device pages Create a table that lists every down device by name and links to its device page. When the count is high, you can drill down without leaving the dashboard. Building BI offers three table types: Raw, Pivot, and Aggregated. For collapsible device counts, use a [Pivot table](/products/building-bi/reference/chart-types#table-pivot). See also [Table types](/products/building-bi/concepts/choosing-visualizations#table-types). Drag a `Table Pivot` onto the canvas. Select `Point Time Series Last Value Aggregated`. Filter on `cur_status` with `in` and `down`, as in the earlier widgets. Pivot charts have Hierarchies, Pivoted Columns, Values, and Adjunct Metrics. For this dashboard, use only **Hierarchy** and **Adjunct Metrics**. In **Hierarchy**, add `Device Mechanical Type Name`, then `device_name`. You could use `area_name` instead if you want to group by floor. Add an adjunct metric for `area_name` so each row shows the floor name. In `Style`, rename the hierarchy columns to `Device Type` and `Device Name`. Open the `Device Name` tab. In the **URLs** section, enable URLs and apply `Device URL`. Each device name becomes a link to its device page. See [Table widget sections](/products/building-bi/reference/chart-styling-options#table-widget-sections). Completed Down Devices dashboard with a title, Number (Target), bar chart, line chart, and pivot table Add a [Text](/products/building-bi/reference/chart-types#text) widget for the dashboard title, then arrange the canvas. Add a text widget. Type `Down Devices`, set the text to title size, and place it in the top center of the dashboard. You can edit text styling in two places: the `Style` tab in chart configuration, or by selecting the text inside the widget. Selecting the text opens an inline editor for font size, weight, and alignment. For more styling options across widgets, see [Widget customization](/products/building-bi/widget-customization). Text widget on the canvas with selected Down Devices text and the inline formatting toolbar Drag and resize widgets until the layout matches the completed dashboard above.
## What you built You created a building-level Down Devices dashboard with a Number (Target) widget, a bar chart by device type, a seven-day line chart, and a pivot table with links to each device. ## Related reading Match chart types to the question you need to answer. Learn how filters interact across widgets and pages. Look up Setup requirements for every widget type. Review operators, scopes, and filter configuration fields. ## Next steps Learn dashboard editing, filters, and collaboration workflows. Style widgets, apply defaults, manage palettes, and go deeper on layout. Connect dashboards to live building data from Cloud BMS.