[{"data":1,"prerenderedAt":2597},["ShallowReactive",2],{"blog-\u002Fblog\u002F2026\u002F07\u002Fdefect-and-quality-monitoring":3,"blog-all-for-related":2596},{"id":4,"title":5,"authors":6,"body":8,"cta":2572,"date":2576,"description":2577,"extension":2578,"image":2579,"lastUpdated":2580,"meta":2581,"navigation":867,"path":2586,"seo":2587,"sitemap":2588,"stem":2589,"subtitle":2590,"tags":2591,"tldr":2594,"video":2580,"__hash__":2595},"blog\u002Fblog\u002F2026\u002F07\u002Fdefect-and-quality-monitoring.md","Build a Defect Tracking and Quality Monitoring Dashboard",[7],"sumit-shinde",{"type":9,"value":10,"toc":2553},"minimark",[11,15,25,28,37,40,45,48,98,109,113,116,136,140,147,158,736,739,744,750,887,928,932,935,950,960,1436,1439,1493,1502,1510,1514,1521,1533,1917,1926,1936,1939,1993,2002,2013,2026,2031,2034,2038,2045,2048,2052,2055,2087,2093,2102,2106,2113,2133,2148,2150,2304,2313,2317,2339,2342,2351,2355,2385,2388,2397,2401,2422,2425,2434,2438,2472,2475,2484,2488,2507,2510,2519,2522,2526,2532,2543,2550],[12,13,14],"p",{},"Every production line produces defects. On their own they're easy to wave off, a bit of scrap here, an hour of rework there. But add them up and the cost is real, and that's the part most teams never see. The defects are sitting in a spreadsheet nobody sorts, or locked inside a quality system you can't get a live view out of. So the recurring problems stay invisible until someone runs a report, and by then the bad batch has already shipped.",[12,16,17,22],{},[18,19],"img",{"alt":20,"src":21},"The finished defect tracking dashboard showing stat cards, Pareto chart, and trend line","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fflowfuse-defect-monitoring-dashboard.png",[23,24,20],"em",{},[12,26,27],{},"In this tutorial, you'll build a defect tracking and quality monitoring dashboard using FlowFuse in about 30 minutes. It reads defects from a database, calculates the KPIs a quality engineer actually looks at, and renders them live, filtered by line, shift, and date range.",[12,29,30,31,36],{},"You can interact with the live demo here: ",[32,33,35],"a",{"href":34},"https:\u002F\u002Fdefect-monitoring-dashboard.flowfuse.cloud\u002Fdashboard\u002Fdefects","Try the Quality Monitoring Dashboard",".",[12,38,39],{},"By the end, you'll have a foundation you can extend into broader production monitoring or OEE tracking, or a plant-wide quality report.",[41,42,44],"h2",{"id":43},"what-youll-need","What You'll Need",[12,46,47],{},"Before you start building, make sure you have the following ready:",[49,50,51,59,65],"ul",{},[52,53,54,58],"li",{},[55,56,57],"strong",{},"A FlowFuse account."," [Sign up]({% include \"sign-up-url.njk\" %}) for FlowFuse Cloud, or use a self-hosted instance.",[52,60,61,64],{},[55,62,63],{},"A FlowFuse instance up and running."," If you don't have one yet, create a new instance from your FlowFuse Platform.",[52,66,67,70,71,75,76,79,80,79,83,86,87,90,91,97],{},[55,68,69],{},"FlowFuse Dashboard installed."," This tutorial uses ",[72,73,74],"code",{},"@flowfuse\u002Fnode-red-dashboard"," nodes (",[72,77,78],{},"ui-text",", ",[72,81,82],{},"ui-chart",[72,84,85],{},"ui-table",", and ",[72,88,89],{},"ui-template",") to build the interface. If it is not already installed, add it from the Node-RED Palette Manager. If you are new to FlowFuse Dashboard, follow the ",[32,92,96],{"href":93,"rel":94},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fgetting-started.html",[95],"nofollow","Getting Started guide"," to become familiar with the basics before continuing.",[99,100,101],"blockquote",{},[12,102,103,104,108],{},"Note: ",[32,105,107],{"href":106},"\u002Fdocs\u002Fuser\u002Fff-tables\u002F","FlowFuse Tables"," is currently in beta and available to Enterprise tier teams on FlowFuse Cloud, as well as Enterprise licensed self hosted teams running on Kubernetes. If you're on a different tier, you can follow along using any external database instead, Postgres, MySQL, or whatever you already have, with the standard database nodes from the palette. The SQL and flow logic in this tutorial will work the same either way.",[41,110,112],{"id":111},"how-the-application-works","How the Application Works",[12,114,115],{},"This dashboard is a read layer. It doesn't capture defects itself; it sits on top of a table of them and turns that table into something a supervisor can read at a glance:",[49,117,118,124,130],{},[52,119,120,123],{},[55,121,122],{},"Defects live in one table."," Each defect is a row: where it happened, what it was, how severe, its root cause, how it was handled, and what it cost. Something else fills this table: an operator logging defects from a form, or automatic events arriving over MQTT. For the tutorial, a simulator stands in for that source.",[52,125,126,129],{},[55,127,128],{},"One query calculates everything."," A single query filters the table once and computes every KPI on the dashboard in one pass, then splits the result across every card, chart, and table, so the whole dashboard updates from a single source of truth.",[52,131,132,135],{},[55,133,134],{},"The header drives it all."," Line, shift, and date-range dropdowns live in the dashboard header. Change any one and every widget recalculates together.",[41,137,139],{"id":138},"importing-the-simulator","Importing the Simulator",[12,141,142,143,146],{},"You need a table and data in it before the dashboard can show anything. Rather than build that by hand, import the simulator flow; it creates the ",[72,144,145],{},"defects"," table and fills it for you.",[12,148,149,150,153,154,157],{},"It gives you two generators. A ",[55,151,152],{},"historical seed"," fills about six months of defects, so the charts have something to show right away. A ",[55,155,156],{},"live feed"," then inserts a fresh defect every few seconds, so the dashboard keeps updating on its own while you build.",[12,159,160,161,735],{},"{% renderFlow 300 %}\n",[162,163,164,165,168,169,171,172,174,175,178,179,181,182,185,186,189,190,193,194,197,198,201,202,205,206,209,210,213,214,217,218,320,321,324,325,328,329,332,333,336,337,340,341,344,345,340,347,350,351,340,353,356,357,360,361,364,365,368,369,360,372,364,375,378,379,360,382,364,385,388,389,392,393,396,397,392,400,403,404,392,407,410,411,392,414,417,418,421,422,425,426,429,430,432,433,436,437,440,441,440,444,447,448,450,451,454,455,457,458,460,461,178,463,181,465,467,468,471,472,474,475,478,479,481,482,485,486,488,489,217,492,320,554,556,557,328,559,332,561,336,563,340,565,567,568,340,570,572,573,340,575,577,578,360,580,364,582,584,585,587,588,590,591,593,594,596,597,599,600,388,602,392,604,396,606,392,608,403,610,392,612,410,614,392,616,417,618,421,620,425,622,429,624,626,627,629,630,440,633,440,635,638,639,642,643,646,647,649,650,652,653,666,667,669,670,672,673,675,676,678,679,681,682,684,685,687,688,690,691,693,694,696,697,699,700,702,703,705,706,708,709,711,712,715,716,718,719,721,722,725,726,728,729,731,732,734],"span",{},"{\"id\":\"fc4cfab8a41f3bdb\",\"type\":\"group\",\"z\":\"7f9feb3283fbb929\",\"name\":\"Data Simulation\",\"style\":{\"label\":true},\"nodes\":",[162,166,167],{},"\"7ff2fe3d22e543d8\",\"77f9a234e079a6dd\",\"e9c9fbed2e767b9f\",\"23504c3b0f35db82\",\"475645219af52b5e\",\"d978f663921063a7\",\"d2facb93da0e58db\",\"1188c4b2256949a3\"",",\"x\":34,\"y\":219,\"w\":812,\"h\":142},{\"id\":\"7ff2fe3d22e543d8\",\"type\":\"debug\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"Result\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"payload\",\"targetType\":\"msg\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":750,\"y\":260,\"wires\":",[162,170],{},"},{\"id\":\"77f9a234e079a6dd\",\"type\":\"inject\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"\",\"props\":",[162,173],{},",\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":130,\"y\":260,\"wires\":[[\"e9c9fbed2e767b9f\"]]},{\"id\":\"e9c9fbed2e767b9f\",\"type\":\"function\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"Historical Seed\",\"func\":\"\u002F\u002F ============================================================\\n\u002F\u002F SHARED GENERATOR LOGIC (v4 — full station coverage + EV-specific defect)\\n\u002F\u002F ============================================================\\n\\n\u002F\u002F ---- Helper: weighted random pick ------------------------------\\nfunction weightedPick(items, weights) {\\n    const r = Math.random();\\n    let cumulative = 0;\\n    for (let i = 0; i \u003C items.length; i++) {\\n        cumulative += weights",[162,176,177],{},"i",";\\n        if (r \u003C= cumulative) return items",[162,180,177],{},";\\n    }\\n    return items",[162,183,184],{},"items.length - 1",";\\n}\\n\\n\u002F\u002F ---- Convert an ARRAY of records into column-wise arrays, for a\\n\u002F\u002F single bulk INSERT ... SELECT * FROM UNNEST(...) query -----------\\nfunction recordsToColumnParams(records) {\\n    const cols = ",[162,187,188],{},"\\n        \"defect_id\", \"date\", \"line\", \"station\", \"shift\", \"sku\",\\n        \"defect_type\", \"defect_category\", \"severity\", \"detected_stage\",\\n        \"root_cause\", \"disposition\", \"status\", \"cost_impact\", \"resolution_hours\"\\n",";\\n    return cols.map(col => records.map(r => r",[162,191,192],{},"col","));\\n}\\n\\n\\n\u002F\u002F ---- Unique defect_id (no context store needed) ----------------\\nfunction nextDefectId() {\\n    const rand = Math.floor(Math.random() * 46656).toString(36).padStart(3, \"0\");\\n    return \"DEF-\" + Date.now().toString(36).toUpperCase() + \"-\" + rand.toUpperCase();\\n}\\n\\n\u002F\u002F ---- Assembly lines: NOT equal — SUV Line has an aging robot cell\\nconst LINES = ",[162,195,196],{},"\"Sedan Line\", \"SUV Line\", \"EV Line\"",";\\nconst LINE_WEIGHTS = ",[162,199,200],{},"0.30, 0.45, 0.25",";   \u002F\u002F SUV Line skewed higher\\n\\n\u002F\u002F ---- Shifts: Night skewed higher (fatigue\u002Fless supervision) -----\\nconst SHIFTS = ",[162,203,204],{},"\"Morning\", \"Evening\", \"Night\"",";\\nconst SHIFT_WEIGHTS = ",[162,207,208],{},"0.30, 0.25, 0.45",";\\n\\n\u002F\u002F ---- Trims: EV is the newest variant, has early teething defects --\\nconst SKUS = ",[162,211,212],{},"\"Base Trim\", \"Sport Trim\", \"Premium Trim\", \"EV Trim\"",";\\nconst SKU_WEIGHTS = ",[162,215,216],{},"0.20, 0.20, 0.25, 0.35","; \u002F\u002F EV = newest, higher defect rate\\n\\n\u002F\u002F ---- Defect types: Pareto-shaped (80\u002F20 rule), each with a home\\n\u002F\u002F shop, plausible root causes, and where it typically gets caught.\\n\u002F\u002F Now covers ALL 5 stations (Chassis & Powertrain and Trim were\\n\u002F\u002F previously listed as stations but had zero defect types assigned).\\nconst DEFECT_TYPES = ",[162,219,220,221,224,225,228,229,232,233,224,236,228,239,242,243,224,246,228,248,251,252,224,255,228,258,261,262,224,265,228,268,271,272,224,275,228,278,281,282,224,285,228,288,291,292,224,295,228,298,301,302,224,305,228,307,310,311,224,314,228,316,319],{},"\\n    {\\n        name: \"Weld Crack\", category: \"Body\u002FWeld\", station: \"Body Shop\", weight: 0.24,\\n        causes: ",[162,222,223],{},"\"Robot\u002FTooling Wear\", \"Operator Error\", \"Calibration Drift\", \"Process Deviation\"",",\\n        causeWeights: ",[162,226,227],{},"0.40, 0.30, 0.20, 0.10",",\\n        stageWeights: ",[162,230,231],{},"0.05, 0.35, 0.50, 0.10","\\n    },\\n    {\\n        name: \"Paint Defect\", category: \"Paint\u002FSurface\", station: \"Paint Shop\", weight: 0.19,\\n        causes: ",[162,234,235],{},"\"Operator Error\", \"Process Deviation\", \"Environmental Factor\", \"Robot\u002FTooling Wear\"",[162,237,238],{},"0.35, 0.30, 0.20, 0.15",[162,240,241],{},"0.05, 0.25, 0.55, 0.15","\\n    },\\n    {\\n        name: \"Panel Gap Deviation\", category: \"Dimensional\", station: \"Body Shop\", weight: 0.13,\\n        causes: ",[162,244,245],{},"\"Calibration Drift\", \"Robot\u002FTooling Wear\", \"Process Deviation\", \"Supplier Material Defect\"",[162,247,227],{},[162,249,250],{},"0.25, 0.45, 0.28, 0.02","\\n    },\\n    {\\n        name: \"Door Misalignment\", category: \"Assembly\", station: \"Final Assembly\", weight: 0.10,\\n        causes: ",[162,253,254],{},"\"Operator Error\", \"Process Deviation\", \"Robot\u002FTooling Wear\"",[162,256,257],{},"0.35, 0.35, 0.30",[162,259,260],{},"0.05, 0.35, 0.55, 0.05","\\n    },\\n    {\\n        name: \"Paint Contamination\", category: \"Material\", station: \"Paint Shop\", weight: 0.09,\\n        causes: ",[162,263,264],{},"\"Supplier Material Defect\", \"Environmental Factor\", \"Process Deviation\"",[162,266,267],{},"0.50, 0.30, 0.20",[162,269,270],{},"0.40, 0.35, 0.20, 0.05","\\n    },\\n    {\\n        name: \"Fluid Leak\", category: \"Powertrain\", station: \"Chassis & Powertrain\", weight: 0.08,\\n        causes: ",[162,273,274],{},"\"Robot\u002FTooling Wear\", \"Process Deviation\", \"Supplier Material Defect\"",[162,276,277],{},"0.40, 0.35, 0.25",[162,279,280],{},"0.10, 0.40, 0.40, 0.10","\\n    },\\n    {\\n        name: \"Missing Fastener\", category: \"Assembly\", station: \"Final Assembly\", weight: 0.06,\\n        causes: ",[162,283,284],{},"\"Operator Error\", \"Process Deviation\"",[162,286,287],{},"0.60, 0.40",[162,289,290],{},"0.05, 0.30, 0.60, 0.05","\\n    },\\n    {\\n        name: \"Interior Trim Defect\", category: \"Trim\", station: \"Trim\", weight: 0.05,\\n        causes: ",[162,293,294],{},"\"Operator Error\", \"Supplier Material Defect\", \"Process Deviation\"",[162,296,297],{},"0.45, 0.30, 0.25",[162,299,300],{},"0.10, 0.30, 0.55, 0.05","\\n    },\\n    {\\n        name: \"Transport Damage\", category: \"Logistics\", station: \"Final Assembly\", weight: 0.04,\\n        causes: ",[162,303,304],{},"\"Process Deviation\", \"Operator Error\", \"Environmental Factor\"",[162,306,267],{},[162,308,309],{},"0.05, 0.15, 0.50, 0.30"," \u002F\u002F often only found at dealer\u002Fyard, not on-line\\n    },\\n    {\\n        \u002F\u002F EV-EXCLUSIVE: only EV Trim vehicles physically have a high-voltage\\n        \u002F\u002F battery\u002Fcharging system, so this defect type is deterministically\\n        \u002F\u002F forced to EV Trim in generateOneDefect() below — not just skewed\\n        \u002F\u002F toward it. Rare fleet-wide, but gives the \"EV teething defects\"\\n        \u002F\u002F story an actual distinct failure mode instead of just a higher\\n        \u002F\u002F rate of the same generic defects.\\n        name: \"HV Battery\u002FCharging Fault\", category: \"Electrical\", station: \"Chassis & Powertrain\", weight: 0.02,\\n        causes: ",[162,312,313],{},"\"Supplier Material Defect\", \"Process Deviation\", \"Calibration Drift\"",[162,315,297],{},[162,317,318],{},"0.20, 0.30, 0.35, 0.15","\\n    }\\n",";\\nconst DEFECT_TYPE_WEIGHTS = DEFECT_TYPES.map(d => d.weight);\\n\\nconst STATIONS = ",[162,322,323],{},"\"Body Shop\", \"Paint Shop\", \"Chassis & Powertrain\", \"Trim\", \"Final Assembly\"",";\\n\\n\u002F\u002F ---- Severity: most defects are Minor ----------------------------\\nconst SEVERITIES = ",[162,326,327],{},"\"Critical\", \"Major\", \"Minor\"",";\\nconst SEVERITY_WEIGHTS = ",[162,330,331],{},"0.15, 0.35, 0.50",";\\n\\n\u002F\u002F ---- Detected stage: driven per-defect-type (see stageWeights above)\\nconst STAGES = ",[162,334,335],{},"\"Incoming\", \"In-Process\", \"Final QC\", \"Field Return\"",";\\n\\n\u002F\u002F ---- Disposition: correlated with severity, not independent -----\\nconst DISPOSITION_BY_SEVERITY = {\\n    Critical: { items: ",[162,338,339],{},"\"Scrap\", \"Rework\", \"Use-as-is\"",", weights: ",[162,342,343],{},"0.60, 0.35, 0.05"," },\\n    Major: { items: ",[162,346,339],{},[162,348,349],{},"0.25, 0.55, 0.20"," },\\n    Minor: { items: ",[162,352,339],{},[162,354,355],{},"0.05, 0.35, 0.60"," }\\n};\\n\\n\u002F\u002F ---- Cost: driven primarily by DISPOSITION, not just severity —\\n\u002F\u002F Scrap means full material loss, Rework is labor-only, Use-as-is is\\n\u002F\u002F near-zero (paperwork\u002Finspection). Severity still scales the range\\n\u002F\u002F within each disposition.\\nconst COST_RANGES = {\\n    Scrap: { Critical: ",[162,358,359],{},"800, 2000",", Major: ",[162,362,363],{},"400, 1000",", Minor: ",[162,366,367],{},"150, 400"," },\\n    Rework: { Critical: ",[162,370,371],{},"300, 800",[162,373,374],{},"150, 500",[162,376,377],{},"50, 200"," },\\n    \"Use-as-is\": { Critical: ",[162,380,381],{},"50, 150",[162,383,384],{},"20, 80",[162,386,387],{},"5, 40"," }\\n};\\n\\n\u002F\u002F ---- Delay likelihood: tied to ROOT CAUSE, not a flat rate — a\\n\u002F\u002F supplier reorder (Supplier Material Defect) or an infrastructure\\n\u002F\u002F fix (Environmental Factor) realistically takes far longer to close\\n\u002F\u002F out than an operator simply redoing the work.\\nconst DELAY_PROB_BY_CAUSE = {\\n    \"Robot\u002FTooling Wear\": 0.12,\\n    \"Operator Error\": 0.05,\\n    \"Calibration Drift\": 0.08,\\n    \"Process Deviation\": 0.07,\\n    \"Supplier Material Defect\": 0.30,\\n    \"Environmental Factor\": 0.15\\n};\\n\\n\u002F\u002F ---- Status: correlated with how OLD the defect is --------------\\nfunction pickStatusForAge(ageDays) {\\n    if (ageDays > 90) {\\n        return weightedPick(\\n            ",[162,390,391],{},"\"Verified\", \"Resolved\", \"Corrective Action\"",",\\n            ",[162,394,395],{},"0.85, 0.10, 0.05","\\n        );\\n    } else if (ageDays > 30) {\\n        return weightedPick(\\n            ",[162,398,399],{},"\"Verified\", \"Resolved\", \"Corrective Action\", \"RCA\", \"Detected\"",[162,401,402],{},"0.50, 0.25, 0.15, 0.07, 0.03","\\n        );\\n    } else if (ageDays > 7) {\\n        return weightedPick(\\n            ",[162,405,406],{},"\"Corrective Action\", \"RCA\", \"Resolved\", \"Detected\", \"Verified\"",[162,408,409],{},"0.35, 0.30, 0.20, 0.10, 0.05","\\n        );\\n    } else {\\n        return weightedPick(\\n            ",[162,412,413],{},"\"Detected\", \"RCA\", \"Corrective Action\", \"Resolved\"",[162,415,416],{},"0.50, 0.30, 0.15, 0.05","\\n        );\\n    }\\n}\\n\\n\u002F\u002F ---- Day-of-week + \"bad batch\" seasonal bump ---------------------\\nfunction dayOfWeekMultiplier(date) {\\n    const day = date.getDay();\\n    if (day === 1) return 1.3;\\n    if (day === 0 || day === 6) return 1.15;\\n    return 1.0;\\n}\\nconst BAD_BATCH_AGE_MIN = 95;\\nconst BAD_BATCH_AGE_MAX = 110;\\n\\n\u002F\u002F ---- Core generator: builds ONE defect record --------------------\\nfunction generateOneDefect(forcedDate, ageDays) {\\n    if (ageDays === undefined || ageDays === null) ageDays = 0;\\n\\n    let defectTypeObj;\\n    if (ageDays >= BAD_BATCH_AGE_MIN && ageDays \u003C= BAD_BATCH_AGE_MAX && Math.random() \u003C 0.45) {\\n        \u002F\u002F Simulated bad batch of primer\u002Fpaint material from a supplier\\n        defectTypeObj = DEFECT_TYPES.find(d => d.name === \"Paint Contamination\");\\n    } else {\\n        defectTypeObj = weightedPick(DEFECT_TYPES, DEFECT_TYPE_WEIGHTS);\\n    }\\n\\n    const station = Math.random() \u003C 0.8\\n        ? defectTypeObj.station\\n        : STATIONS",[162,419,420],{},"Math.floor(Math.random() * STATIONS.length)",";\\n\\n    const rootCause = weightedPick(defectTypeObj.causes, defectTypeObj.causeWeights);\\n    const severity = weightedPick(SEVERITIES, SEVERITY_WEIGHTS);\\n\\n    const dispoTable = DISPOSITION_BY_SEVERITY",[162,423,424],{},"severity",";\\n    const disposition = weightedPick(dispoTable.items, dispoTable.weights);\\n\\n    const status = pickStatusForAge(ageDays);\\n\\n    \u002F\u002F Detected stage comes from THIS defect type's own distribution\\n    \u002F\u002F (e.g. Paint Contamination is caught early via incoming material\\n    \u002F\u002F inspection; Transport Damage is often only found at the dealer)\\n    const stage = weightedPick(STAGES, defectTypeObj.stageWeights);\\n    const stageCostMultiplier = stage === \"Field Return\" ? 2.2 : 1.0;\\n\\n    \u002F\u002F Cost driven by disposition + severity (see COST_RANGES above),\\n    \u002F\u002F not just severity alone — a Scrapped part costs far more than\\n    \u002F\u002F a Use-as-is one, even at the same severity.\\n    const ",[162,427,428],{},"costMin, costMax"," = COST_RANGES[disposition]",[162,431,424],{},";\\n    const cost = (costMin + Math.random() * (costMax - costMin)) * stageCostMultiplier;\\n\\n    const resolutionHoursBase = severity === \"Critical\" ? 2 + Math.random() * 10\\n        : severity === \"Major\" ? 6 + Math.random() * 24\\n            : 12 + Math.random() * 48;\\n\\n    \u002F\u002F Delay probability comes from the ROOT CAUSE (see\\n    \u002F\u002F DELAY_PROB_BY_CAUSE above) instead of a flat rate for everyone —\\n    \u002F\u002F e.g. waiting on a supplier reorder takes far longer than an\\n    \u002F\u002F operator simply redoing the work.\\n    const delayProb = DELAY_PROB_BY_CAUSE",[162,434,435],{},"rootCause"," ?? 0.10;\\n    const isDelayed = Math.random() \u003C delayProb;\\n    const resolutionHours = isDelayed\\n        ? resolutionHoursBase * (3 + Math.random() * 3)\\n        : resolutionHoursBase;\\n\\n    \u002F\u002F Trim\u002FSKU: HV Battery\u002FCharging Fault is EV-EXCLUSIVE — only EV Trim\\n    \u002F\u002F vehicles physically have a high-voltage battery\u002Fcharging system,\\n    \u002F\u002F so this is deterministic, not just weighted probability.\\n    const sku = defectTypeObj.name === \"HV Battery\u002FCharging Fault\"\\n        ? \"EV Trim\"\\n        : weightedPick(SKUS, SKU_WEIGHTS);\\n\\n    return {\\n        defect_id: nextDefectId(),\\n        date: forcedDate,\\n        line: weightedPick(LINES, LINE_WEIGHTS),\\n        station: station,\\n        shift: weightedPick(SHIFTS, SHIFT_WEIGHTS),\\n        sku: sku,\\n        defect_type: defectTypeObj.name,\\n        defect_category: defectTypeObj.category,\\n        severity: severity,\\n        detected_stage: stage,\\n        root_cause: rootCause,\\n        disposition: disposition,\\n        status: status,\\n        cost_impact: Math.round(cost * 100) \u002F 100,\\n        resolution_hours: Math.round(resolutionHours * 10) \u002F 10\\n    };\\n}\\n\\n\u002F\u002F ============================================================\\n\u002F\u002F FUNCTION NODE 1: HISTORICAL SEED (v2 — realistic correlations)\\n\u002F\u002F Wire: ",[162,438,439],{},"Inject: manual","\\n\u002F\u002F        -> ",[162,442,443],{},"THIS Function node",[162,445,446],{},"postgresql\u002FFlowFuse Tables node: bulk UNNEST INSERT","\\n\u002F\u002F ============================================================\\n\\nconst DAYS_BACK = 180;          \u002F\u002F ~6 months of history\\nconst RECORDS_PER_DAY_AVG = 7;  \u002F\u002F baseline volume (~1260 records before multipliers)\\n\\nconst records = ",[162,449],{},";\\nconst today = new Date();\\n\\nfor (let ageDays = DAYS_BACK; ageDays >= 0; ageDays--) {\\n    const day = new Date(today);\\n    day.setDate(day.getDate() - ageDays);\\n    const dateStr = day.toISOString().slice(0, 10);\\n\\n    const dowMultiplier = dayOfWeekMultiplier(day);\\n    const countToday = Math.max(0, Math.round(\\n        (RECORDS_PER_DAY_AVG + (Math.random() - 0.5) * 4) * dowMultiplier\\n    ));\\n\\n    for (let i = 0; i \u003C countToday; i++) {\\n        records.push(generateOneDefect(dateStr, ageDays));\\n    }\\n}\\n\\nnode.log(",[72,452,453],{},"Generated ${records.length} historical defect records (with realistic skew).",");\\n\\nmsg.params = recordsToColumnParams(records); \u002F\u002F FlowFuse Tables node reads params from msg.params\\nreturn msg;\",\"outputs\":1,\"timeout\":0,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":",[162,456],{},",\"x\":340,\"y\":260,\"wires\":[[\"d2facb93da0e58db\"]]},{\"id\":\"23504c3b0f35db82\",\"type\":\"inject\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"\",\"props\":",[162,459],{},",\"repeat\":\"5\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":130,\"y\":320,\"wires\":[[\"475645219af52b5e\"]]},{\"id\":\"475645219af52b5e\",\"type\":\"function\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"Live Feed\",\"func\":\"\u002F\u002F ============================================================\\n\u002F\u002F SHARED GENERATOR LOGIC (v4 — full station coverage + EV-specific defect)\\n\u002F\u002F ============================================================\\n\\n\u002F\u002F ---- Helper: weighted random pick ------------------------------\\nfunction weightedPick(items, weights) {\\n    const r = Math.random();\\n    let cumulative = 0;\\n    for (let i = 0; i \u003C items.length; i++) {\\n        cumulative += weights",[162,462,177],{},[162,464,177],{},[162,466,184],{},";\\n}\\n\\n\u002F\u002F ---- Convert a record object into the flat params array Postgres\\n\u002F\u002F node needs, in the exact column order of the INSERT query ------\\nfunction recordToParams(r) {\\n    return ",[162,469,470],{},"\\n        r.defect_id, r.date, r.line, r.station, r.shift, r.sku,\\n        r.defect_type, r.defect_category, r.severity, r.detected_stage,\\n        r.root_cause, r.disposition, r.status, r.cost_impact, r.resolution_hours\\n",";\\n}\\n\\n\\n\u002F\u002F ---- Unique defect_id (no context store needed) ----------------\\nfunction nextDefectId() {\\n    const rand = Math.floor(Math.random() * 46656).toString(36).padStart(3, \"0\");\\n    return \"DEF-\" + Date.now().toString(36).toUpperCase() + \"-\" + rand.toUpperCase();\\n}\\n\\n\u002F\u002F ---- Assembly lines: NOT equal — SUV Line has an aging robot cell\\nconst LINES         = ",[162,473,196],{},";\\nconst LINE_WEIGHTS   = ",[162,476,477],{},"0.30,          0.45,       0.25",";   \u002F\u002F SUV Line skewed higher\\n\\n\u002F\u002F ---- Shifts: Night skewed higher (fatigue\u002Fless supervision) -----\\nconst SHIFTS         = ",[162,480,204],{},";\\nconst SHIFT_WEIGHTS  = ",[162,483,484],{},"0.30,       0.25,      0.45",";\\n\\n\u002F\u002F ---- Trims: EV is the newest variant, has early teething defects --\\nconst SKUS           = ",[162,487,212],{},";\\nconst SKU_WEIGHTS    = ",[162,490,491],{},"0.20,          0.20,          0.25,           0.35",[162,493,220,494,224,496,228,498,232,500,224,502,228,504,242,506,224,508,228,510,251,512,224,514,228,516,261,518,224,520,228,522,271,524,224,526,228,528,281,530,224,532,228,534,291,536,224,538,228,540,301,542,224,544,228,546,310,548,224,550,228,552,319],{},[162,495,223],{},[162,497,227],{},[162,499,231],{},[162,501,235],{},[162,503,238],{},[162,505,241],{},[162,507,245],{},[162,509,227],{},[162,511,250],{},[162,513,254],{},[162,515,257],{},[162,517,260],{},[162,519,264],{},[162,521,267],{},[162,523,270],{},[162,525,274],{},[162,527,277],{},[162,529,280],{},[162,531,284],{},[162,533,287],{},[162,535,290],{},[162,537,294],{},[162,539,297],{},[162,541,300],{},[162,543,304],{},[162,545,267],{},[162,547,309],{},[162,549,313],{},[162,551,297],{},[162,553,318],{},[162,555,323],{},";\\n\\n\u002F\u002F ---- Severity: most defects are Minor ----------------------------\\nconst SEVERITIES      = ",[162,558,327],{},[162,560,331],{},[162,562,335],{},[162,564,339],{},[162,566,343],{}," },\\n    Major:    { items: ",[162,569,339],{},[162,571,349],{}," },\\n    Minor:    { items: ",[162,574,339],{},[162,576,355],{}," }\\n};\\n\\n\u002F\u002F ---- Cost: driven primarily by DISPOSITION, not just severity —\\n\u002F\u002F Scrap means full material loss, Rework is labor-only, Use-as-is is\\n\u002F\u002F near-zero (paperwork\u002Finspection). Severity still scales the range\\n\u002F\u002F within each disposition.\\nconst COST_RANGES = {\\n    Scrap:        { Critical: ",[162,579,359],{},[162,581,363],{},[162,583,367],{}," },\\n    Rework:       { Critical: ",[162,586,371],{},",  Major: ",[162,589,374],{},",  Minor: ",[162,592,377],{}," },\\n    \"Use-as-is\":  { Critical: ",[162,595,381],{},",   Major: ",[162,598,384],{},",    Minor: ",[162,601,387],{},[162,603,391],{},[162,605,395],{},[162,607,399],{},[162,609,402],{},[162,611,406],{},[162,613,409],{},[162,615,413],{},[162,617,416],{},[162,619,420],{},[162,621,424],{},[162,623,428],{},[162,625,424],{},";\\n    const cost = (costMin + Math.random() * (costMax - costMin)) * stageCostMultiplier;\\n\\n    const resolutionHoursBase = severity === \"Critical\" ? 2 + Math.random() * 10\\n                              : severity === \"Major\"    ? 6 + Math.random() * 24\\n                              :                            12 + Math.random() * 48;\\n\\n    \u002F\u002F Delay probability comes from the ROOT CAUSE (see\\n    \u002F\u002F DELAY_PROB_BY_CAUSE above) instead of a flat rate for everyone —\\n    \u002F\u002F e.g. waiting on a supplier reorder takes far longer than an\\n    \u002F\u002F operator simply redoing the work.\\n    const delayProb = DELAY_PROB_BY_CAUSE",[162,628,435],{}," ?? 0.10;\\n    const isDelayed = Math.random() \u003C delayProb;\\n    const resolutionHours = isDelayed\\n        ? resolutionHoursBase * (3 + Math.random() * 3)\\n        : resolutionHoursBase;\\n\\n    \u002F\u002F Trim\u002FSKU: HV Battery\u002FCharging Fault is EV-EXCLUSIVE — only EV Trim\\n    \u002F\u002F vehicles physically have a high-voltage battery\u002Fcharging system,\\n    \u002F\u002F so this is deterministic, not just weighted probability.\\n    const sku = defectTypeObj.name === \"HV Battery\u002FCharging Fault\"\\n        ? \"EV Trim\"\\n        : weightedPick(SKUS, SKU_WEIGHTS);\\n\\n    return {\\n        defect_id: nextDefectId(),\\n        date: forcedDate,\\n        line: weightedPick(LINES, LINE_WEIGHTS),\\n        station: station,\\n        shift: weightedPick(SHIFTS, SHIFT_WEIGHTS),\\n        sku: sku,\\n        defect_type: defectTypeObj.name,\\n        defect_category: defectTypeObj.category,\\n        severity: severity,\\n        detected_stage: stage,\\n        root_cause: rootCause,\\n        disposition: disposition,\\n        status: status,\\n        cost_impact: Math.round(cost * 100) \u002F 100,\\n        resolution_hours: Math.round(resolutionHours * 10) \u002F 10\\n    };\\n}\\n\\n\u002F\u002F ============================================================\\n\u002F\u002F FUNCTION NODE 2: LIVE FEED (v2 — realistic correlations)\\n\u002F\u002F Wire: ",[162,631,632],{},"Inject: repeat every 20s",[162,634,443],{},[162,636,637],{},"postgresql\u002FFlowFuse Tables node: single row INSERT","\\n\u002F\u002F        -> (optional) ",[162,640,641],{},"Switch: msg.critical === true"," -> ",[162,644,645],{},"ui_notification","\\n\u002F\u002F ============================================================\\n\\nconst todayStr = new Date().toISOString().slice(0, 10);\\nconst record = generateOneDefect(todayStr, 0); \u002F\u002F ageDays=0: fresh, mostly \"Detected\"\\n\\nmsg.critical = (record.severity === \"Critical\");\\nmsg.params = recordToParams(record); \u002F\u002F FlowFuse Tables node reads params from msg.params\\n\\nreturn msg;\",\"outputs\":1,\"timeout\":0,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":",[162,648],{},",\"x\":320,\"y\":320,\"wires\":[[\"1188c4b2256949a3\"]]},{\"id\":\"d978f663921063a7\",\"type\":\"debug\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"Result\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"payload\",\"targetType\":\"msg\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":750,\"y\":320,\"wires\":",[162,651],{},"},{\"id\":\"d2facb93da0e58db\",\"type\":\"tables-query\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"Insert Historical Records\",\"query\":\"-- BULK INSERT for historical seed (single query, no Split node needed)\\n-- Use this in the postgresql node wired directly after the\\n-- \"historical seed\" Function node.\\n--\\n-- msg.payload must be an array of 15 arrays (column-wise), which is\\n-- exactly what recordsToColumnParams() in function-shared-logic.js\\n-- produces: ",[162,654,655,656,79,659,79,662,665],{}," ",[162,657,658],{},"all defect_ids",[162,660,661],{},"all dates",[162,663,664],{},"all lines",", ...","\\n\\nINSERT INTO defects (\\n    defect_id, date, line, station, shift, sku,\\n    defect_type, defect_category, severity, detected_stage,\\n    root_cause, disposition, status, cost_impact, resolution_hours\\n)\\nSELECT * FROM UNNEST(\\n    $1::varchar",[162,668],{},",  $2::date",[162,671],{},",     $3::varchar",[162,674],{},",  $4::varchar",[162,677],{},",\\n    $5::varchar",[162,680],{},",  $6::varchar",[162,683],{},",  $7::varchar",[162,686],{},",  $8::varchar",[162,689],{},",\\n    $9::varchar",[162,692],{},",  $10::varchar",[162,695],{},", $11::varchar",[162,698],{},", $12::varchar",[162,701],{},",\\n    $13::varchar",[162,704],{},", $14::numeric",[162,707],{},", $15::numeric",[162,710],{},"\\n)\\nON CONFLICT (defect_id) DO NOTHING;\\n\\n-- ------------------------------------------------------------\\n-- LIVE FEED still uses the simple single-row query below,\\n-- unchanged, fed by function-live-feed.js (one param-array per msg):\\n--\\n-- INSERT INTO defects (\\n--     defect_id, date, line, station, shift, sku,\\n--     defect_type, defect_category, severity, detected_stage,\\n--     root_cause, disposition, status, cost_impact, resolution_hours\\n-- )\\n-- VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)\\n-- ON CONFLICT (defect_id) DO NOTHING;\",\"split\":false,\"rowsPerMsg\":1,\"x\":570,\"y\":260,\"wires\":[[\"7ff2fe3d22e543d8\"]]},{\"id\":\"1188c4b2256949a3\",\"type\":\"tables-query\",\"z\":\"7f9feb3283fbb929\",\"g\":\"fc4cfab8a41f3bdb\",\"name\":\"Insert Live Record\",\"query\":\"INSERT INTO defects (\\n    defect_id, date, line, station, shift, sku,\\n    defect_type, defect_category, severity, detected_stage,\\n    root_cause, disposition, status, cost_impact, resolution_hours\\n)\\nVALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15)\\nON CONFLICT (defect_id) DO NOTHING;\",\"split\":false,\"rowsPerMsg\":1,\"x\":550,\"y\":320,\"wires\":[[\"d978f663921063a7\"]]},{\"id\":\"d1c5372e4c488212\",\"type\":\"group\",\"z\":\"7f9feb3283fbb929\",\"name\":\"Create Defect Table\",\"style\":{\"label\":true},\"nodes\":",[162,713,714],{},"\"f4a14ba58c9e129d\",\"a08e0258f5c5242e\",\"83e51297506816b4\"",",\"x\":34,\"y\":19,\"w\":812,\"h\":82},{\"id\":\"f4a14ba58c9e129d\",\"type\":\"inject\",\"z\":\"7f9feb3283fbb929\",\"g\":\"d1c5372e4c488212\",\"name\":\"\",\"props\":",[162,717],{},",\"repeat\":\"\",\"crontab\":\"\",\"once\":true,\"onceDelay\":0.1,\"topic\":\"\",\"x\":130,\"y\":60,\"wires\":[[\"a08e0258f5c5242e\"]]},{\"id\":\"a08e0258f5c5242e\",\"type\":\"tables-query\",\"z\":\"7f9feb3283fbb929\",\"g\":\"d1c5372e4c488212\",\"name\":\"Create Defect Table\",\"query\":\"CREATE TABLE IF NOT EXISTS defects (\\n    defect_id         VARCHAR(20) PRIMARY KEY,\\n    date              DATE NOT NULL,\\n    line              VARCHAR(20),\\n    station           VARCHAR(30),\\n    shift             VARCHAR(20),\\n    sku               VARCHAR(20),\\n    defect_type       VARCHAR(50),\\n    defect_category   VARCHAR(30),\\n    severity          VARCHAR(10),\\n    detected_stage    VARCHAR(20),\\n    root_cause        VARCHAR(50),\\n    disposition       VARCHAR(20),\\n    status            VARCHAR(20),\\n    cost_impact       NUMERIC(10,2),\\n    resolution_hours  NUMERIC(6,1)\\n);\\n\\nCREATE INDEX IF NOT EXISTS idx_defects_date ON defects(date);\\nCREATE INDEX IF NOT EXISTS idx_defects_line ON defects(line);\\nCREATE INDEX IF NOT EXISTS idx_defects_shift ON defects(shift);\",\"split\":false,\"rowsPerMsg\":1,\"x\":350,\"y\":60,\"wires\":[[\"83e51297506816b4\"]]},{\"id\":\"83e51297506816b4\",\"type\":\"debug\",\"z\":\"7f9feb3283fbb929\",\"g\":\"d1c5372e4c488212\",\"name\":\"Result\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"payload\",\"targetType\":\"msg\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":750,\"y\":60,\"wires\":",[162,720],{},"},{\"id\":\"78a99932f3724e3e\",\"type\":\"group\",\"z\":\"7f9feb3283fbb929\",\"name\":\"Delete All Records\",\"style\":{\"label\":true},\"nodes\":",[162,723,724],{},"\"1c3ce2ba4a766cee\",\"e38d9a6684c6b3bb\",\"c0c78694aa023826\"",",\"x\":34,\"y\":119,\"w\":812,\"h\":82},{\"id\":\"1c3ce2ba4a766cee\",\"type\":\"inject\",\"z\":\"7f9feb3283fbb929\",\"d\":true,\"g\":\"78a99932f3724e3e\",\"name\":\"\",\"props\":",[162,727],{},",\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":130,\"y\":160,\"wires\":[[\"e38d9a6684c6b3bb\"]]},{\"id\":\"e38d9a6684c6b3bb\",\"type\":\"tables-query\",\"z\":\"7f9feb3283fbb929\",\"g\":\"78a99932f3724e3e\",\"name\":\"Delete All Records\",\"query\":\"DELETE FROM defects;\",\"split\":false,\"rowsPerMsg\":1,\"x\":350,\"y\":160,\"wires\":[[\"c0c78694aa023826\"]]},{\"id\":\"c0c78694aa023826\",\"type\":\"debug\",\"z\":\"7f9feb3283fbb929\",\"g\":\"78a99932f3724e3e\",\"name\":\"Result\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"payload\",\"targetType\":\"msg\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":750,\"y\":160,\"wires\":",[162,730],{},"},{\"id\":\"d7a304ca96634e82\",\"type\":\"global-config\",\"env\":",[162,733],{},",\"modules\":{\"@flowfuse\u002Fnr-tables-nodes\":\"0.2.2\"}}","\n{% endrenderFlow 300 %}",[12,737,738],{},"Both run automatically on deploy: no buttons to click. The table is created first, the historical seed lands a few seconds later, and the live feed takes over from there. Within moments your table holds over a thousand records and keeps growing.",[740,741,743],"h3",{"id":742},"the-schema-it-creates","The schema it creates",[12,745,746,747,749],{},"You don't run this yourself; the import handles it. But it's the contract the whole dashboard depends on, so it's worth knowing what the ",[72,748,145],{}," table looks like, especially if you later point the dashboard at your own database:",[751,752,757],"pre",{"className":753,"code":754,"language":755,"meta":756,"style":756},"language-sql shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","CREATE TABLE IF NOT EXISTS defects (\n    defect_id         VARCHAR(20) PRIMARY KEY,\n    date              DATE NOT NULL,\n    line              VARCHAR(20),\n    station           VARCHAR(30),\n    shift             VARCHAR(20),\n    sku               VARCHAR(20),\n    defect_type       VARCHAR(50),\n    defect_category   VARCHAR(30),\n    severity          VARCHAR(10),\n    detected_stage    VARCHAR(20),\n    root_cause        VARCHAR(50),\n    disposition       VARCHAR(20),\n    status            VARCHAR(20),\n    cost_impact       NUMERIC(10,2),\n    resolution_hours  NUMERIC(6,1)\n);\n\nCREATE INDEX IF NOT EXISTS idx_defects_date ON defects(date);\nCREATE INDEX IF NOT EXISTS idx_defects_line ON defects(line);\nCREATE INDEX IF NOT EXISTS idx_defects_shift ON defects(shift);\n","sql","",[72,758,759,766,772,778,784,790,796,802,808,814,820,826,832,838,844,850,856,862,869,875,881],{"__ignoreMap":756},[162,760,763],{"class":761,"line":762},"line",1,[162,764,765],{},"CREATE TABLE IF NOT EXISTS defects (\n",[162,767,769],{"class":761,"line":768},2,[162,770,771],{},"    defect_id         VARCHAR(20) PRIMARY KEY,\n",[162,773,775],{"class":761,"line":774},3,[162,776,777],{},"    date              DATE NOT NULL,\n",[162,779,781],{"class":761,"line":780},4,[162,782,783],{},"    line              VARCHAR(20),\n",[162,785,787],{"class":761,"line":786},5,[162,788,789],{},"    station           VARCHAR(30),\n",[162,791,793],{"class":761,"line":792},6,[162,794,795],{},"    shift             VARCHAR(20),\n",[162,797,799],{"class":761,"line":798},7,[162,800,801],{},"    sku               VARCHAR(20),\n",[162,803,805],{"class":761,"line":804},8,[162,806,807],{},"    defect_type       VARCHAR(50),\n",[162,809,811],{"class":761,"line":810},9,[162,812,813],{},"    defect_category   VARCHAR(30),\n",[162,815,817],{"class":761,"line":816},10,[162,818,819],{},"    severity          VARCHAR(10),\n",[162,821,823],{"class":761,"line":822},11,[162,824,825],{},"    detected_stage    VARCHAR(20),\n",[162,827,829],{"class":761,"line":828},12,[162,830,831],{},"    root_cause        VARCHAR(50),\n",[162,833,835],{"class":761,"line":834},13,[162,836,837],{},"    disposition       VARCHAR(20),\n",[162,839,841],{"class":761,"line":840},14,[162,842,843],{},"    status            VARCHAR(20),\n",[162,845,847],{"class":761,"line":846},15,[162,848,849],{},"    cost_impact       NUMERIC(10,2),\n",[162,851,853],{"class":761,"line":852},16,[162,854,855],{},"    resolution_hours  NUMERIC(6,1)\n",[162,857,859],{"class":761,"line":858},17,[162,860,861],{},");\n",[162,863,865],{"class":761,"line":864},18,[162,866,868],{"emptyLinePlaceholder":867},true,"\n",[162,870,872],{"class":761,"line":871},19,[162,873,874],{},"CREATE INDEX IF NOT EXISTS idx_defects_date ON defects(date);\n",[162,876,878],{"class":761,"line":877},20,[162,879,880],{},"CREATE INDEX IF NOT EXISTS idx_defects_line ON defects(line);\n",[162,882,884],{"class":761,"line":883},21,[162,885,886],{},"CREATE INDEX IF NOT EXISTS idx_defects_shift ON defects(shift);\n",[12,888,889,890,79,892,79,895,79,898,901,902,79,905,79,907,910,911,79,914,79,917,920,921,79,924,927],{},"Each row is one defect. The columns group into where it happened (",[72,891,761],{},[72,893,894],{},"station",[72,896,897],{},"shift",[72,899,900],{},"sku","), what it was (",[72,903,904],{},"defect_type",[72,906,424],{},[72,908,909],{},"detected_stage","), how it was handled (",[72,912,913],{},"root_cause",[72,915,916],{},"disposition",[72,918,919],{},"status","), and what it cost (",[72,922,923],{},"cost_impact",[72,925,926],{},"resolution_hours","). The three indexes cover the columns the dashboard filters by, so queries stay fast as the table grows.",[41,929,931],{"id":930},"building-the-query","Building the Query",[12,933,934],{},"Running one query per widget means a dozen database trips on every refresh. This dashboard runs a single query instead. It returns one row where each field holds one widget's data, and every widget reads just its own field.",[12,936,937,938,941,942,945,946,949],{},"Two CTEs at the top do the filtering. ",[72,939,940],{},"filtered_all"," applies all three filters: line, shift, and date range. ",[72,943,944],{},"filtered_line_and_shift"," skips the date filter, so the live ticker always shows the latest defects. After that, one ",[72,947,948],{},"json_agg"," block builds the data for each widget:",[99,951,952],{},[12,953,954,955,959],{},"Tip: You don't have to write SQL yourself. Use ",[32,956,958],{"href":957},"\u002Fblog\u002F2025\u002F09\u002Fai-assistant-flowfuse-tables\u002F","FlowFuse Expert"," and describe the interface in plain English. It will generate the ui-template code for you.",[751,961,963],{"className":753,"code":962,"language":755,"meta":756,"style":756},"WITH\n  filtered_all AS ( -- full 3-filter set, used by almost every widget\n    SELECT * FROM defects\n    WHERE ($line = 'All' OR line = $line)\n      AND ($shift = 'All' OR shift = $shift)\n      AND date >= CURRENT_DATE - ($daysback || ' days')::interval\n  ),\n  filtered_line_and_shift AS ( -- ticker: \"right now\" view, ignores the date filter\n    SELECT * FROM defects\n    WHERE ($line = 'All' OR line = $line) AND ($shift = 'All' OR shift = $shift)\n  )\nSELECT\n  -- stat cards + cost of poor quality (one pass over the filtered rows)\n  (SELECT json_agg(t) FROM (\n    SELECT\n      COUNT(*) FILTER (WHERE status IN ('Resolved','Verified'))     AS closed_count,\n      COUNT(*) FILTER (WHERE status NOT IN ('Resolved','Verified')) AS open_count,\n      COUNT(*)                    AS total_count,\n      ROUND(SUM(cost_impact), 2)  AS total_copq\n    FROM filtered_all\n  ) t) AS stat_cards_and_copq,\n\n  -- average resolution time + SLA breach per severity\n  -- (SLA targets: Critical 24h, Major 72h, Minor 168h)\n  (SELECT json_agg(t) FROM (\n    SELECT severity,\n      ROUND(AVG(resolution_hours), 1) AS avg_resolution_hours,\n      COUNT(*)                        AS resolved_count,\n      COUNT(*) FILTER (WHERE resolution_hours >\n        CASE severity WHEN 'Critical' THEN 24 WHEN 'Major' THEN 72 ELSE 168 END) AS sla_breached_count,\n      ROUND(100.0 * COUNT(*) FILTER (WHERE resolution_hours >\n        CASE severity WHEN 'Critical' THEN 24 WHEN 'Major' THEN 72 ELSE 168 END)\n        \u002F NULLIF(COUNT(*), 0), 1) AS sla_breach_pct\n    FROM filtered_all WHERE status IN ('Resolved', 'Verified')\n    GROUP BY severity\n    ORDER BY CASE severity WHEN 'Critical' THEN 1 WHEN 'Major' THEN 2 ELSE 3 END\n  ) t) AS avg_resolution_and_sla,\n\n  -- Pareto: defect-type counts with a cumulative % (window functions)\n  (SELECT json_agg(t) FROM (\n    SELECT defect_type, COUNT(*) AS defect_count,\n      ROUND(100.0 * COUNT(*) \u002F SUM(COUNT(*)) OVER (), 1) AS pct_of_total,\n      ROUND(SUM(COUNT(*)) OVER (ORDER BY COUNT(*) DESC) * 100.0\n            \u002F SUM(COUNT(*)) OVER (), 1) AS cumulative_pct\n    FROM filtered_all GROUP BY defect_type ORDER BY defect_count DESC\n  ) t) AS pareto,\n\n  -- daily trend\n  (SELECT json_agg(t) FROM (\n    SELECT date, COUNT(*) AS defect_count\n    FROM filtered_all GROUP BY date ORDER BY date\n  ) t) AS trend,\n\n  -- disposition breakdown\n  (SELECT json_agg(t) FROM (\n    SELECT disposition, COUNT(*) AS defect_count, ROUND(SUM(cost_impact), 2) AS total_cost\n    FROM filtered_all GROUP BY disposition ORDER BY defect_count DESC\n  ) t) AS disposition,\n\n  -- severity breakdown\n  (SELECT json_agg(t) FROM (\n    SELECT severity, COUNT(*) AS defect_count\n    FROM filtered_all GROUP BY severity\n    ORDER BY CASE severity WHEN 'Critical' THEN 1 WHEN 'Major' THEN 2 ELSE 3 END\n  ) t) AS severity,\n\n  -- root-cause breakdown\n  (SELECT json_agg(t) FROM (\n    SELECT root_cause, COUNT(*) AS defect_count\n    FROM filtered_all GROUP BY root_cause ORDER BY defect_count DESC\n  ) t) AS root_cause,\n\n  -- status funnel, ordered by workflow stage\n  (SELECT json_agg(t) FROM (\n    SELECT status, COUNT(*) AS defect_count\n    FROM filtered_all GROUP BY status\n    ORDER BY CASE status WHEN 'Detected' THEN 1 WHEN 'RCA' THEN 2 WHEN 'Corrective Action' THEN 3\n      WHEN 'Resolved' THEN 4 WHEN 'Verified' THEN 5 END\n  ) t) AS status_funnel,\n\n  -- most recent 20 defects, for the live ticker\n  (SELECT json_agg(t) FROM (\n    SELECT defect_id, date, line, station, defect_type, severity, status, cost_impact\n    FROM filtered_line_and_shift ORDER BY defect_id DESC LIMIT 20\n  ) t) AS ticker;\n",[72,964,965,970,975,980,985,990,995,1000,1005,1009,1014,1019,1024,1029,1034,1039,1044,1049,1054,1059,1064,1069,1074,1080,1086,1091,1097,1103,1109,1115,1121,1127,1133,1139,1145,1151,1157,1163,1168,1174,1179,1185,1191,1197,1203,1209,1215,1220,1226,1231,1237,1243,1249,1254,1260,1265,1271,1277,1283,1288,1294,1299,1305,1311,1316,1322,1327,1333,1338,1344,1350,1356,1361,1367,1372,1378,1384,1390,1396,1402,1407,1413,1418,1424,1430],{"__ignoreMap":756},[162,966,967],{"class":761,"line":762},[162,968,969],{},"WITH\n",[162,971,972],{"class":761,"line":768},[162,973,974],{},"  filtered_all AS ( -- full 3-filter set, used by almost every widget\n",[162,976,977],{"class":761,"line":774},[162,978,979],{},"    SELECT * FROM defects\n",[162,981,982],{"class":761,"line":780},[162,983,984],{},"    WHERE ($line = 'All' OR line = $line)\n",[162,986,987],{"class":761,"line":786},[162,988,989],{},"      AND ($shift = 'All' OR shift = $shift)\n",[162,991,992],{"class":761,"line":792},[162,993,994],{},"      AND date >= CURRENT_DATE - ($daysback || ' days')::interval\n",[162,996,997],{"class":761,"line":798},[162,998,999],{},"  ),\n",[162,1001,1002],{"class":761,"line":804},[162,1003,1004],{},"  filtered_line_and_shift AS ( -- ticker: \"right now\" view, ignores the date filter\n",[162,1006,1007],{"class":761,"line":810},[162,1008,979],{},[162,1010,1011],{"class":761,"line":816},[162,1012,1013],{},"    WHERE ($line = 'All' OR line = $line) AND ($shift = 'All' OR shift = $shift)\n",[162,1015,1016],{"class":761,"line":822},[162,1017,1018],{},"  )\n",[162,1020,1021],{"class":761,"line":828},[162,1022,1023],{},"SELECT\n",[162,1025,1026],{"class":761,"line":834},[162,1027,1028],{},"  -- stat cards + cost of poor quality (one pass over the filtered rows)\n",[162,1030,1031],{"class":761,"line":840},[162,1032,1033],{},"  (SELECT json_agg(t) FROM (\n",[162,1035,1036],{"class":761,"line":846},[162,1037,1038],{},"    SELECT\n",[162,1040,1041],{"class":761,"line":852},[162,1042,1043],{},"      COUNT(*) FILTER (WHERE status IN ('Resolved','Verified'))     AS closed_count,\n",[162,1045,1046],{"class":761,"line":858},[162,1047,1048],{},"      COUNT(*) FILTER (WHERE status NOT IN ('Resolved','Verified')) AS open_count,\n",[162,1050,1051],{"class":761,"line":864},[162,1052,1053],{},"      COUNT(*)                    AS total_count,\n",[162,1055,1056],{"class":761,"line":871},[162,1057,1058],{},"      ROUND(SUM(cost_impact), 2)  AS total_copq\n",[162,1060,1061],{"class":761,"line":877},[162,1062,1063],{},"    FROM filtered_all\n",[162,1065,1066],{"class":761,"line":883},[162,1067,1068],{},"  ) t) AS stat_cards_and_copq,\n",[162,1070,1072],{"class":761,"line":1071},22,[162,1073,868],{"emptyLinePlaceholder":867},[162,1075,1077],{"class":761,"line":1076},23,[162,1078,1079],{},"  -- average resolution time + SLA breach per severity\n",[162,1081,1083],{"class":761,"line":1082},24,[162,1084,1085],{},"  -- (SLA targets: Critical 24h, Major 72h, Minor 168h)\n",[162,1087,1089],{"class":761,"line":1088},25,[162,1090,1033],{},[162,1092,1094],{"class":761,"line":1093},26,[162,1095,1096],{},"    SELECT severity,\n",[162,1098,1100],{"class":761,"line":1099},27,[162,1101,1102],{},"      ROUND(AVG(resolution_hours), 1) AS avg_resolution_hours,\n",[162,1104,1106],{"class":761,"line":1105},28,[162,1107,1108],{},"      COUNT(*)                        AS resolved_count,\n",[162,1110,1112],{"class":761,"line":1111},29,[162,1113,1114],{},"      COUNT(*) FILTER (WHERE resolution_hours >\n",[162,1116,1118],{"class":761,"line":1117},30,[162,1119,1120],{},"        CASE severity WHEN 'Critical' THEN 24 WHEN 'Major' THEN 72 ELSE 168 END) AS sla_breached_count,\n",[162,1122,1124],{"class":761,"line":1123},31,[162,1125,1126],{},"      ROUND(100.0 * COUNT(*) FILTER (WHERE resolution_hours >\n",[162,1128,1130],{"class":761,"line":1129},32,[162,1131,1132],{},"        CASE severity WHEN 'Critical' THEN 24 WHEN 'Major' THEN 72 ELSE 168 END)\n",[162,1134,1136],{"class":761,"line":1135},33,[162,1137,1138],{},"        \u002F NULLIF(COUNT(*), 0), 1) AS sla_breach_pct\n",[162,1140,1142],{"class":761,"line":1141},34,[162,1143,1144],{},"    FROM filtered_all WHERE status IN ('Resolved', 'Verified')\n",[162,1146,1148],{"class":761,"line":1147},35,[162,1149,1150],{},"    GROUP BY severity\n",[162,1152,1154],{"class":761,"line":1153},36,[162,1155,1156],{},"    ORDER BY CASE severity WHEN 'Critical' THEN 1 WHEN 'Major' THEN 2 ELSE 3 END\n",[162,1158,1160],{"class":761,"line":1159},37,[162,1161,1162],{},"  ) t) AS avg_resolution_and_sla,\n",[162,1164,1166],{"class":761,"line":1165},38,[162,1167,868],{"emptyLinePlaceholder":867},[162,1169,1171],{"class":761,"line":1170},39,[162,1172,1173],{},"  -- Pareto: defect-type counts with a cumulative % (window functions)\n",[162,1175,1177],{"class":761,"line":1176},40,[162,1178,1033],{},[162,1180,1182],{"class":761,"line":1181},41,[162,1183,1184],{},"    SELECT defect_type, COUNT(*) AS defect_count,\n",[162,1186,1188],{"class":761,"line":1187},42,[162,1189,1190],{},"      ROUND(100.0 * COUNT(*) \u002F SUM(COUNT(*)) OVER (), 1) AS pct_of_total,\n",[162,1192,1194],{"class":761,"line":1193},43,[162,1195,1196],{},"      ROUND(SUM(COUNT(*)) OVER (ORDER BY COUNT(*) DESC) * 100.0\n",[162,1198,1200],{"class":761,"line":1199},44,[162,1201,1202],{},"            \u002F SUM(COUNT(*)) OVER (), 1) AS cumulative_pct\n",[162,1204,1206],{"class":761,"line":1205},45,[162,1207,1208],{},"    FROM filtered_all GROUP BY defect_type ORDER BY defect_count DESC\n",[162,1210,1212],{"class":761,"line":1211},46,[162,1213,1214],{},"  ) t) AS pareto,\n",[162,1216,1218],{"class":761,"line":1217},47,[162,1219,868],{"emptyLinePlaceholder":867},[162,1221,1223],{"class":761,"line":1222},48,[162,1224,1225],{},"  -- daily trend\n",[162,1227,1229],{"class":761,"line":1228},49,[162,1230,1033],{},[162,1232,1234],{"class":761,"line":1233},50,[162,1235,1236],{},"    SELECT date, COUNT(*) AS defect_count\n",[162,1238,1240],{"class":761,"line":1239},51,[162,1241,1242],{},"    FROM filtered_all GROUP BY date ORDER BY date\n",[162,1244,1246],{"class":761,"line":1245},52,[162,1247,1248],{},"  ) t) AS trend,\n",[162,1250,1252],{"class":761,"line":1251},53,[162,1253,868],{"emptyLinePlaceholder":867},[162,1255,1257],{"class":761,"line":1256},54,[162,1258,1259],{},"  -- disposition breakdown\n",[162,1261,1263],{"class":761,"line":1262},55,[162,1264,1033],{},[162,1266,1268],{"class":761,"line":1267},56,[162,1269,1270],{},"    SELECT disposition, COUNT(*) AS defect_count, ROUND(SUM(cost_impact), 2) AS total_cost\n",[162,1272,1274],{"class":761,"line":1273},57,[162,1275,1276],{},"    FROM filtered_all GROUP BY disposition ORDER BY defect_count DESC\n",[162,1278,1280],{"class":761,"line":1279},58,[162,1281,1282],{},"  ) t) AS disposition,\n",[162,1284,1286],{"class":761,"line":1285},59,[162,1287,868],{"emptyLinePlaceholder":867},[162,1289,1291],{"class":761,"line":1290},60,[162,1292,1293],{},"  -- severity breakdown\n",[162,1295,1297],{"class":761,"line":1296},61,[162,1298,1033],{},[162,1300,1302],{"class":761,"line":1301},62,[162,1303,1304],{},"    SELECT severity, COUNT(*) AS defect_count\n",[162,1306,1308],{"class":761,"line":1307},63,[162,1309,1310],{},"    FROM filtered_all GROUP BY severity\n",[162,1312,1314],{"class":761,"line":1313},64,[162,1315,1156],{},[162,1317,1319],{"class":761,"line":1318},65,[162,1320,1321],{},"  ) t) AS severity,\n",[162,1323,1325],{"class":761,"line":1324},66,[162,1326,868],{"emptyLinePlaceholder":867},[162,1328,1330],{"class":761,"line":1329},67,[162,1331,1332],{},"  -- root-cause breakdown\n",[162,1334,1336],{"class":761,"line":1335},68,[162,1337,1033],{},[162,1339,1341],{"class":761,"line":1340},69,[162,1342,1343],{},"    SELECT root_cause, COUNT(*) AS defect_count\n",[162,1345,1347],{"class":761,"line":1346},70,[162,1348,1349],{},"    FROM filtered_all GROUP BY root_cause ORDER BY defect_count DESC\n",[162,1351,1353],{"class":761,"line":1352},71,[162,1354,1355],{},"  ) t) AS root_cause,\n",[162,1357,1359],{"class":761,"line":1358},72,[162,1360,868],{"emptyLinePlaceholder":867},[162,1362,1364],{"class":761,"line":1363},73,[162,1365,1366],{},"  -- status funnel, ordered by workflow stage\n",[162,1368,1370],{"class":761,"line":1369},74,[162,1371,1033],{},[162,1373,1375],{"class":761,"line":1374},75,[162,1376,1377],{},"    SELECT status, COUNT(*) AS defect_count\n",[162,1379,1381],{"class":761,"line":1380},76,[162,1382,1383],{},"    FROM filtered_all GROUP BY status\n",[162,1385,1387],{"class":761,"line":1386},77,[162,1388,1389],{},"    ORDER BY CASE status WHEN 'Detected' THEN 1 WHEN 'RCA' THEN 2 WHEN 'Corrective Action' THEN 3\n",[162,1391,1393],{"class":761,"line":1392},78,[162,1394,1395],{},"      WHEN 'Resolved' THEN 4 WHEN 'Verified' THEN 5 END\n",[162,1397,1399],{"class":761,"line":1398},79,[162,1400,1401],{},"  ) t) AS status_funnel,\n",[162,1403,1405],{"class":761,"line":1404},80,[162,1406,868],{"emptyLinePlaceholder":867},[162,1408,1410],{"class":761,"line":1409},81,[162,1411,1412],{},"  -- most recent 20 defects, for the live ticker\n",[162,1414,1416],{"class":761,"line":1415},82,[162,1417,1033],{},[162,1419,1421],{"class":761,"line":1420},83,[162,1422,1423],{},"    SELECT defect_id, date, line, station, defect_type, severity, status, cost_impact\n",[162,1425,1427],{"class":761,"line":1426},84,[162,1428,1429],{},"    FROM filtered_line_and_shift ORDER BY defect_id DESC LIMIT 20\n",[162,1431,1433],{"class":761,"line":1432},85,[162,1434,1435],{},"  ) t) AS ticker;\n",[12,1437,1438],{},"With the query written, wire it up so it runs on a timer and its result reaches every widget.",[1440,1441,1442],"ol",{},[52,1443,1444,1445,79,1448,86,1451,1454,1455],{},"Add a change node before the Query node and name it \"Set Params\". This maps the saved filters onto the ",[72,1446,1447],{},"$line",[72,1449,1450],{},"$shift",[72,1452,1453],{},"$daysback"," parameters the SQL reads. Set four rules, in order:",[49,1456,1457,1468,1477,1485],{},[52,1458,1459,1460,1463,1464,1467],{},"Set ",[72,1461,1462],{},"queryParameters"," to ",[72,1465,1466],{},"{}"," (JSON): starts clean so stale values don't linger.",[52,1469,1459,1470,1463,1473,1476],{},[72,1471,1472],{},"queryParameters.line",[72,1474,1475],{},"filters.line"," (global persistent).",[52,1478,1459,1479,1463,1482,1476],{},[72,1480,1481],{},"queryParameters.shift",[72,1483,1484],{},"filters.shift",[52,1486,1459,1487,1463,1490,1476],{},[72,1488,1489],{},"queryParameters.daysback",[72,1491,1492],{},"filters.dateRange",[12,1494,1495,1499],{},[18,1496],{"alt":1497,"src":1498},"Screenshot: Set Params change node with its four rules","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fset-params-change-node.png",[23,1500,1501],{},"The \"Set Params\" change node open in the edit panel, all four rules visible.",[1440,1503,1504,1507],{},[52,1505,1506],{},"Add an inject node named \"Poll Data\" and set it to repeat every 10 to 30 seconds. Wire it into \"Set Params\"; this re-runs the query on a timer so the dashboard keeps up as new defects arrive. Also add a link in node here, named \"Refresh Trigger,\" and connect it to the \"Set Params\" change node; this will let the filter flow you build next trigger a refresh as well.",[52,1508,1509],{},"After the Query node, add a single link out node and name it \"KPI Result\". Each widget you build next will connect a link in node to it, so the one result broadcasts to every widget at once.",[41,1511,1513],{"id":1512},"adding-the-filters","Adding the Filters",[12,1515,1516,1517,1520],{},"The filters go in the dashboard header rather than a widget group, since they control the whole page, not one chart. Each selection saves to the global ",[72,1518,1519],{},"filters"," object that \"Set Params\" reads before every query run.",[1440,1522,1523,1526],{},[52,1524,1525],{},"Add a ui-event node. It fires on page load, so a fresh browser session starts with the dropdowns populated.",[52,1527,1528,1529,1532],{},"Add a change node named \"Set Filters\". Set ",[72,1530,1531],{},"payload"," to one JSON object containing your filter options. For this tutorial it looks like the following, but update it to match your table:",[751,1534,1538],{"className":1535,"code":1536,"language":1537,"meta":756,"style":756},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n    \"line\": \"SUV Line\",\n    \"shift\": \"Night\",\n    \"dateRange\": 30,\n    \"lineOptions\": [\n        \"All\",\n        \"Sedan Line\",\n        \"SUV Line\",\n        \"EV Line\"\n    ],\n    \"shiftOptions\": [\n        \"All\",\n        \"Morning\",\n        \"Evening\",\n        \"Night\"\n    ],\n    \"dateRangeOptions\": [\n        {\n            \"label\": \"Last 7 days\",\n            \"value\": 7\n        },\n        {\n            \"label\": \"Last 30 days\",\n            \"value\": 30\n        },\n        {\n            \"label\": \"Last 90 days\",\n            \"value\": 90\n        },\n        {\n            \"label\": \"All time\",\n            \"value\": 100000\n        }\n    ]\n}\n","json",[72,1539,1540,1546,1572,1591,1608,1622,1634,1645,1655,1665,1670,1683,1693,1704,1715,1723,1727,1740,1745,1767,1781,1786,1790,1809,1822,1826,1830,1849,1862,1866,1870,1889,1902,1907,1912],{"__ignoreMap":756},[162,1541,1542],{"class":761,"line":762},[162,1543,1545],{"class":1544},"sMK4o","{\n",[162,1547,1548,1551,1554,1557,1560,1563,1567,1569],{"class":761,"line":768},[162,1549,1550],{"class":1544},"    \"",[162,1552,761],{"class":1553},"spNyl",[162,1555,1556],{"class":1544},"\"",[162,1558,1559],{"class":1544},":",[162,1561,1562],{"class":1544}," \"",[162,1564,1566],{"class":1565},"sfazB","SUV Line",[162,1568,1556],{"class":1544},[162,1570,1571],{"class":1544},",\n",[162,1573,1574,1576,1578,1580,1582,1584,1587,1589],{"class":761,"line":774},[162,1575,1550],{"class":1544},[162,1577,897],{"class":1553},[162,1579,1556],{"class":1544},[162,1581,1559],{"class":1544},[162,1583,1562],{"class":1544},[162,1585,1586],{"class":1565},"Night",[162,1588,1556],{"class":1544},[162,1590,1571],{"class":1544},[162,1592,1593,1595,1598,1600,1602,1606],{"class":761,"line":780},[162,1594,1550],{"class":1544},[162,1596,1597],{"class":1553},"dateRange",[162,1599,1556],{"class":1544},[162,1601,1559],{"class":1544},[162,1603,1605],{"class":1604},"sbssI"," 30",[162,1607,1571],{"class":1544},[162,1609,1610,1612,1615,1617,1619],{"class":761,"line":786},[162,1611,1550],{"class":1544},[162,1613,1614],{"class":1553},"lineOptions",[162,1616,1556],{"class":1544},[162,1618,1559],{"class":1544},[162,1620,1621],{"class":1544}," [\n",[162,1623,1624,1627,1630,1632],{"class":761,"line":792},[162,1625,1626],{"class":1544},"        \"",[162,1628,1629],{"class":1565},"All",[162,1631,1556],{"class":1544},[162,1633,1571],{"class":1544},[162,1635,1636,1638,1641,1643],{"class":761,"line":798},[162,1637,1626],{"class":1544},[162,1639,1640],{"class":1565},"Sedan Line",[162,1642,1556],{"class":1544},[162,1644,1571],{"class":1544},[162,1646,1647,1649,1651,1653],{"class":761,"line":804},[162,1648,1626],{"class":1544},[162,1650,1566],{"class":1565},[162,1652,1556],{"class":1544},[162,1654,1571],{"class":1544},[162,1656,1657,1659,1662],{"class":761,"line":810},[162,1658,1626],{"class":1544},[162,1660,1661],{"class":1565},"EV Line",[162,1663,1664],{"class":1544},"\"\n",[162,1666,1667],{"class":761,"line":816},[162,1668,1669],{"class":1544},"    ],\n",[162,1671,1672,1674,1677,1679,1681],{"class":761,"line":822},[162,1673,1550],{"class":1544},[162,1675,1676],{"class":1553},"shiftOptions",[162,1678,1556],{"class":1544},[162,1680,1559],{"class":1544},[162,1682,1621],{"class":1544},[162,1684,1685,1687,1689,1691],{"class":761,"line":828},[162,1686,1626],{"class":1544},[162,1688,1629],{"class":1565},[162,1690,1556],{"class":1544},[162,1692,1571],{"class":1544},[162,1694,1695,1697,1700,1702],{"class":761,"line":834},[162,1696,1626],{"class":1544},[162,1698,1699],{"class":1565},"Morning",[162,1701,1556],{"class":1544},[162,1703,1571],{"class":1544},[162,1705,1706,1708,1711,1713],{"class":761,"line":840},[162,1707,1626],{"class":1544},[162,1709,1710],{"class":1565},"Evening",[162,1712,1556],{"class":1544},[162,1714,1571],{"class":1544},[162,1716,1717,1719,1721],{"class":761,"line":846},[162,1718,1626],{"class":1544},[162,1720,1586],{"class":1565},[162,1722,1664],{"class":1544},[162,1724,1725],{"class":761,"line":852},[162,1726,1669],{"class":1544},[162,1728,1729,1731,1734,1736,1738],{"class":761,"line":858},[162,1730,1550],{"class":1544},[162,1732,1733],{"class":1553},"dateRangeOptions",[162,1735,1556],{"class":1544},[162,1737,1559],{"class":1544},[162,1739,1621],{"class":1544},[162,1741,1742],{"class":761,"line":864},[162,1743,1744],{"class":1544},"        {\n",[162,1746,1747,1750,1754,1756,1758,1760,1763,1765],{"class":761,"line":871},[162,1748,1749],{"class":1544},"            \"",[162,1751,1753],{"class":1752},"sBMFI","label",[162,1755,1556],{"class":1544},[162,1757,1559],{"class":1544},[162,1759,1562],{"class":1544},[162,1761,1762],{"class":1565},"Last 7 days",[162,1764,1556],{"class":1544},[162,1766,1571],{"class":1544},[162,1768,1769,1771,1774,1776,1778],{"class":761,"line":877},[162,1770,1749],{"class":1544},[162,1772,1773],{"class":1752},"value",[162,1775,1556],{"class":1544},[162,1777,1559],{"class":1544},[162,1779,1780],{"class":1604}," 7\n",[162,1782,1783],{"class":761,"line":883},[162,1784,1785],{"class":1544},"        },\n",[162,1787,1788],{"class":761,"line":1071},[162,1789,1744],{"class":1544},[162,1791,1792,1794,1796,1798,1800,1802,1805,1807],{"class":761,"line":1076},[162,1793,1749],{"class":1544},[162,1795,1753],{"class":1752},[162,1797,1556],{"class":1544},[162,1799,1559],{"class":1544},[162,1801,1562],{"class":1544},[162,1803,1804],{"class":1565},"Last 30 days",[162,1806,1556],{"class":1544},[162,1808,1571],{"class":1544},[162,1810,1811,1813,1815,1817,1819],{"class":761,"line":1082},[162,1812,1749],{"class":1544},[162,1814,1773],{"class":1752},[162,1816,1556],{"class":1544},[162,1818,1559],{"class":1544},[162,1820,1821],{"class":1604}," 30\n",[162,1823,1824],{"class":761,"line":1088},[162,1825,1785],{"class":1544},[162,1827,1828],{"class":761,"line":1093},[162,1829,1744],{"class":1544},[162,1831,1832,1834,1836,1838,1840,1842,1845,1847],{"class":761,"line":1099},[162,1833,1749],{"class":1544},[162,1835,1753],{"class":1752},[162,1837,1556],{"class":1544},[162,1839,1559],{"class":1544},[162,1841,1562],{"class":1544},[162,1843,1844],{"class":1565},"Last 90 days",[162,1846,1556],{"class":1544},[162,1848,1571],{"class":1544},[162,1850,1851,1853,1855,1857,1859],{"class":761,"line":1105},[162,1852,1749],{"class":1544},[162,1854,1773],{"class":1752},[162,1856,1556],{"class":1544},[162,1858,1559],{"class":1544},[162,1860,1861],{"class":1604}," 90\n",[162,1863,1864],{"class":761,"line":1111},[162,1865,1785],{"class":1544},[162,1867,1868],{"class":761,"line":1117},[162,1869,1744],{"class":1544},[162,1871,1872,1874,1876,1878,1880,1882,1885,1887],{"class":761,"line":1123},[162,1873,1749],{"class":1544},[162,1875,1753],{"class":1752},[162,1877,1556],{"class":1544},[162,1879,1559],{"class":1544},[162,1881,1562],{"class":1544},[162,1883,1884],{"class":1565},"All time",[162,1886,1556],{"class":1544},[162,1888,1571],{"class":1544},[162,1890,1891,1893,1895,1897,1899],{"class":761,"line":1129},[162,1892,1749],{"class":1544},[162,1894,1773],{"class":1752},[162,1896,1556],{"class":1544},[162,1898,1559],{"class":1544},[162,1900,1901],{"class":1604}," 100000\n",[162,1903,1904],{"class":761,"line":1135},[162,1905,1906],{"class":1544},"        }\n",[162,1908,1909],{"class":761,"line":1141},[162,1910,1911],{"class":1544},"    ]\n",[162,1913,1914],{"class":761,"line":1147},[162,1915,1916],{"class":1544},"}\n",[1440,1918,1919],{"start":774},[52,1920,1921,1922,1925],{},"Add a ui-template node named \"Header Filters\". Set its type to \"Widget\" (UI scoped) and select your UI. Ask ",[32,1923,958],{"href":1924},"\u002Fdocs\u002Fuser\u002Fexpert\u002Fnode-red-embedded-ai\u002F#css-and-html-generation-for-flowfuse-dashboard"," to build it:",[99,1927,1928],{},[12,1929,1930,1931],{},"Create a ui-template with three header dropdowns, Line, Shift, and Date Range, wrapped in ",[1932,1933,1935],"teleport",{"defer":867,"to":1934},"#app-bar-actions"," so they render in the header bar and survive a reload. msg.payload has the selections (line, shift, dateRange) and options (lineOptions, shiftOptions, dateRangeOptions). Line\u002FShift options are strings; dateRangeOptions items are {label, value} objects, so bind label as text and value as the value, not the whole object. On any change, and on load, send {line, shift, dateRange} downstream.",[12,1937,1938],{},"Below is the template it produced for us, import it directly if you prefer:",[12,1940,160,1941,735],{},[162,1942,1943,1944,1969,1970,1974,1975,1977,1978,1980,1981,1985,1986,1989,1990,1992],{},"{\"id\":\"cb03d95bcad4cbd8\",\"type\":\"ui-template\",\"z\":\"b069d8356c10f58e\",\"g\":\"6a002542e7c91e0e\",\"group\":\"\",\"page\":\"\",\"ui\":\"6481b1c613ec9a93\",\"name\":\"App Header Filters\",\"order\":1,\"width\":0,\"height\":0,\"head\":\"\",\"format\":\"",[1945,1946,1947,1948,1949,1952,1953,1956,1957,1959,1960,1962,1963,1965,1966,1968],"template",{},"\\n    ","\\n    \u003CTeleport v-if=\"mounted\" to=\"#app-bar-actions\">\\n        \u003Cdiv class=\"filter-bar\">\\n            \u003Cv-select ",[1950,1951],"model-value",{},"=\"line\" @update:model-value=\"val => { line = val; onFilterChange(); }\"\\n                ",[1954,1955],"items",{},"=\"lineOptions\" label=\"Line\" density=\"compact\" variant=\"solo\" hide-details\\n                style=\"min-width: 120px\">\\n\\n            \u003Cv-select ",[1950,1958],{},"=\"shift\" @update:model-value=\"val => { shift = val; onFilterChange(); }\"\\n                ",[1954,1961],{},"=\"shiftOptions\" label=\"Shift\" density=\"compact\" variant=\"solo\" hide-details\\n                style=\"min-width: 120px\">\\n\\n            \u003Cv-select ",[1950,1964],{},"=\"dateRange\" @update:model-value=\"val => { dateRange = val; onFilterChange(); }\"\\n                ",[1954,1967],{},"=\"dateRangeOptions\" item-title=\"label\" item-value=\"value\" label=\"Date Range\" density=\"compact\"\\n                variant=\"solo\" hide-details style=\"min-width: 160px\">\\n        \\n    \\n","\\n\\n",[1971,1972,1973],"script",{},"\\n    export default {\\n    data() {\\n        return {\\n            mounted: false,\\n\\n            \u002F\u002F Selected values\\n            line: 'All',\\n            shift: 'All',\\n            dateRange: 30,\\n\\n            \u002F\u002F Available options\\n            lineOptions: ",",\\n            shiftOptions: ",[162,1976],{},",\\n            dateRangeOptions: ",[162,1979],{},"\\n        }\\n    },\\n\\n    mounted() {\\n        \u002F\u002F Wait until the dashboard header exists before teleporting.\\n        this.mounted = true;\\n    },\\n\\n    watch: {\\n        msg: {\\n            immediate: true,\\n            deep: true,\\n            handler(msg) {\\n                if (!msg?.payload) return;\\n\\n                \u002F\u002F Selected values\\n                this.line = msg.payload.line ?? this.line;\\n                this.shift = msg.payload.shift ?? this.shift;\\n                this.dateRange = msg.payload.dateRange ?? this.dateRange;\\n\\n                \u002F\u002F Dropdown options\\n                this.lineOptions = msg.payload.lineOptions ?? this.lineOptions;\\n                this.shiftOptions = msg.payload.shiftOptions ?? this.shiftOptions;\\n                this.dateRangeOptions = msg.payload.dateRangeOptions ?? this.dateRangeOptions;\\n\\n                \u002F\u002F Send initial state downstream\\n                this.onFilterChange();\\n            }\\n        }\\n    },\\n\\n    methods: {\\n        onFilterChange() {\\n            this.send({\\n                payload: {\\n                    line: this.line,\\n                    shift: this.shift,\\n                    dateRange: this.dateRange\\n                }\\n            });\\n        }\\n    }\\n}\\n\\n\\n",[1982,1983,1984],"style",{},"\\n    .filter-bar {\\n        display: flex;\\n        gap: 12px;\\n        align-items: center;\\n        padding-right: 12px;\\n    }\\n","\",\"storeOutMessages\":true,\"passthru\":true,\"resendOnRefresh\":true,\"templateScope\":\"widget:ui\",\"className\":\"\",\"x\":450,\"y\":140,\"wires\":[[\"e958c99e3f1ecb94\"]]},{\"id\":\"6481b1c613ec9a93\",\"type\":\"ui-base\",\"name\":\"My Dashboard\",\"path\":\"\u002Fdashboard\",\"appIcon\":\"\",\"includeClientData\":true,\"acceptsClientConfig\":",[162,1987,1988],{},"\"ui-notification\",\"ui-control\"",",\"showPathInSidebar\":false,\"headerContent\":\"page\",\"navigationStyle\":\"default\",\"titleBarStyle\":\"default\",\"showReconnectNotification\":true,\"notificationDisplayTime\":1,\"showDisconnectNotification\":true,\"allowInstall\":false},{\"id\":\"18db5e6eeee7d1d9\",\"type\":\"global-config\",\"env\":",[162,1991],{},",\"modules\":{\"@flowfuse\u002Fnode-red-dashboard\":\"1.30.2\"}}",[12,1994,1995,1999],{},[18,1996],{"alt":1997,"src":1998},"Screenshot: the three header dropdowns (Line, Shift, and Date Range) rendered in the dashboard header","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fdashboard-header-filter.png",[23,2000,2001],{},"The finished header filters. Capture the Line, Shift, and Date Range dropdowns in the live dashboard header.",[1440,2003,2004],{"start":780},[52,2005,2006,2007,1463,2009,2012],{},"Add a change node named \"Save Filters\" that sets the persistent global ",[72,2008,1519],{},[72,2010,2011],{},"msg.payload",", and connect its input to the \"Header Filters\" ui-template node.",[12,2014,2015,2019],{},[18,2016],{"alt":2017,"src":2018},"The Save Filters change node configured to set the global filters object to msg.payload","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fstore-filters.png",[23,2020,2021,2022,1463,2024,36],{},"The \"Save Filters\" change node, setting the persistent global ",[72,2023,1519],{},[72,2025,2011],{},[1440,2027,2028],{"start":786},[52,2029,2030],{},"Next, add a link out node, connect its input to the \"Save Filters\" change node, and connect its output to the \"Refresh Trigger\" link in node you added earlier.",[12,2032,2033],{},"Deploy, and the dropdowns appear in the header. Change one and the next query pass redraws every widget against it.",[41,2035,2037],{"id":2036},"building-the-widgets","Building the Widgets",[12,2039,2040,2041,2044],{},"Everything the dashboard shows comes from the \"KPI Result\" broadcast, so every widget follows the same wiring: a ",[55,2042,2043],{},"link in"," node connected to \"KPI Result\", a change node that extracts that widget's field, and the display node.",[12,2046,2047],{},"Before adding widgets, create a page for the dashboard (ours is \"Assembly Quality Monitor\") and a ui-group for each widget. The group is what positions and sizes a widget on the grid.",[740,2049,2051],{"id":2050},"stat-cards","Stat cards",[12,2053,2054],{},"Start with the four numbers a supervisor checks first: total defects, open, closed, and cost of poor quality.",[1440,2056,2057,2060,2069,2072],{},[52,2058,2059],{},"Add a link in node and connect it to \"KPI Result\".",[52,2061,2062,2063,1463,2065,2068],{},"Add a change node named \"Extract KPI Summary\" with one rule: set ",[72,2064,2011],{},[72,2066,2067],{},"msg.payload[0].stat_cards_and_copq"," (msg). Wire the link in to it.",[52,2070,2071],{},"Add four ui-text nodes, one in each of the four top groups (Total Defects, Open, Closed, Cost of Poor Quality). Wire the change node to all four.",[52,2073,2074,2075,79,2078,79,2081,79,2084,36],{},"In each ui-text node, set the value to the matching field: ",[72,2076,2077],{},"msg.payload[0].total_count",[72,2079,2080],{},"msg.payload[0].open_count",[72,2082,2083],{},"msg.payload[0].closed_count",[72,2085,2086],{},"msg.payload[0].total_copq",[12,2088,2089,2090,2092],{},"Open counts everything not yet Resolved or Verified; the cost figure sums ",[72,2091,923],{}," across the current filter, so it moves the moment you switch line or shift.",[12,2094,2095,2099],{},[18,2096],{"alt":2097,"src":2098},"Screenshot: the four stat cards: Total Defects, Open, Closed, and Cost of Poor Quality","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fstat-cards.png",[23,2100,2101],{},"The four stat cards populated with seeded data.",[740,2103,2105],{"id":2104},"pareto-chart","Pareto chart",[12,2107,2108,2109,2112],{},"The ",[32,2110,2105],{"href":2111},"\u002Fblog\u002F2025\u002F08\u002Fpareto-chart-manufacturing-guide\u002F"," ranks defect types by count and overlays a cumulative-percentage line with an 80% marker. It is the fastest way to see which few defect types cause most of the pain. The built-in ui-chart can't combine bars and a line, so this one is a ui-template that draws the SVG itself.",[1440,2114,2115,2118,2127],{},[52,2116,2117],{},"Add a link in node connected to \"KPI Result\".",[52,2119,2120,2121,1463,2123,2126],{},"Add a change node named \"Extract Pareto Data\": set ",[72,2122,2011],{},[72,2124,2125],{},"msg.payload[0].pareto"," (msg).",[52,2128,2129,2130,2132],{},"Add a ui-template node in the Pareto group. Ask ",[32,2131,958],{"href":1924}," to generate it:",[99,2134,2135],{},[12,2136,2137,2138,2140,2141,2144,2145,2147],{},"Create a Vue ui-template that renders a Pareto chart as responsive inline SVG. ",[72,2139,2011],{}," is an array of ",[72,2142,2143],{},"{defect_type, defect_count, cumulative_pct}",", sorted by count descending. Draw a bar per defect type with its count above and a word-wrapped label below, a cumulative-percentage line with dots over the bars, a dashed threshold line at 80%, and a small legend. Derive the rows from ",[72,2146,2011],{}," reactively so the chart redraws on every new message.",[12,2149,1938],{},[12,2151,160,2152,735],{},[162,2153,2154,2155,1969,2255,2258,2259,2262,2263,2266,2267,2269,2270,2272,2273,2276,2277,2279,2280,2283,2284,2286,2287,2290,2291,2294,2295,2298,2299,2301,2302,1992],{},"{\"id\":\"fef40951758bc433\",\"type\":\"ui-template\",\"z\":\"b069d8356c10f58e\",\"g\":\"54e9382e7013c157\",\"group\":\"867ef11afa029061\",\"page\":\"\",\"ui\":\"\",\"name\":\"Custom Pareto Chart\",\"order\":1,\"width\":0,\"height\":0,\"head\":\"\",\"format\":\"",[1945,2156,2157,2158,2161,2162,2165,2166,2167,2170,2171,2174,2175,2178,2179,2182,2183,2186,2187,2189,2190,2192,2193,2197,2198,2189,2200,2202,2203,2205,2206,2208,2209,2212,2213,2215,2216,2217,2220,2221,2224,2225,2228,2229,2232,2233,2235,2236,2238,2239,2240,2243,2244,2246,2247,2250,2251,2254],{},"\\n    \u003Cdiv class=\"pareto-container\">\\n        \u003Csvg ",[2159,2160],"view-box",{},"=\"",[72,2163,2164],{},"0 0 ${svgWidth} ${svgHeight}","\" preserveAspectRatio=\"xMidYMid meet\">\\n            ","\\n            \u003Cg v-for=\"(row, i) in rows\" ",[2168,2169],"key",{},"=\"'bar-' + row.defect_type\">\\n                \u003Crect\\n                    ",[2172,2173],"x",{},"=\"barX(i)\"\\n                    ",[2176,2177],"y",{},"=\"barY(row.defect_count)\"\\n                    ",[2180,2181],"width",{},"=\"barWidth\"\\n                    ",[2184,2185],"height",{},"=\"barHeight(row.defect_count)\"\\n                    fill=\"#CEBA8C\"\\n                    rx=\"3\"\\n                \u002F>\\n                \u003Ctext\\n                    ",[2172,2188],{},"=\"barX(i) + barWidth \u002F 2\"\\n                    ",[2176,2191],{},"=\"barY(row.defect_count) - 8\"\\n                    text-anchor=\"middle\"\\n                    class=\"bar-label-value\"\\n                >",[2194,2195],"binding",{"value":2196},"row.defect_count","\\n                \u003Ctext\\n                    ",[2172,2199],{},[2176,2201],{},"=\"chartAreaHeight + 16\"\\n                    text-anchor=\"middle\"\\n                    class=\"axis-label\"\\n                >\\n                    \u003Ctspan\\n                        v-for=\"(line, li) in wrapLabel(row.defect_type)\"\\n                        ",[2168,2204],{},"=\"li\"\\n                        ",[2172,2207],{},"=\"barX(i) + barWidth \u002F 2\"\\n                        ",[2210,2211],"dy",{},"=\"li === 0 ? 0 : 12\"\\n                    >",[2194,2214],{"value":761},"\\n                \\n            \\n\\n            ","\\n            \u003Cline\\n                ",[2218,2219],"x1",{},"=\"padding.left\" ",[2222,2223],"x2",{},"=\"svgWidth - padding.right\"\\n                ",[2226,2227],"y1",{},"=\"pctToY(80)\" ",[2230,2231],"y2",{},"=\"pctToY(80)\"\\n                stroke=\"#74A086\" stroke-width=\"1.5\" stroke-dasharray=\"5,4\"\\n            \u002F>\\n            \u003Ctext ",[2172,2234],{},"=\"svgWidth - padding.right\" ",[2176,2237],{},"=\"pctToY(80) - 6\" text-anchor=\"end\" class=\"threshold-label\">80%\\n\\n            ","\\n            \u003Cpolyline\\n                ",[2241,2242],"points",{},"=\"cumulativeLinePoints\"\\n                fill=\"none\"\\n                stroke=\"#C28181\"\\n                stroke-width=\"2.5\"\\n            \u002F>\\n            \u003Ccircle\\n                v-for=\"(row, i) in rows\"\\n                ",[2168,2245],{},"=\"'pt-' + row.defect_type\"\\n                ",[2248,2249],"cx",{},"=\"barX(i) + barWidth \u002F 2\"\\n                ",[2252,2253],"cy",{},"=\"pctToY(row.cumulative_pct)\"\\n                r=\"3.5\"\\n                fill=\"#C28181\"\\n            \u002F>\\n        \\n\\n        \u003Cdiv class=\"legend\">\\n            \u003Cspan class=\"legend-item\">\u003Cspan class=\"swatch\" style=\"background:#CEBA8C\">Defect Count\\n            \u003Cspan class=\"legend-item\">\u003Cspan class=\"swatch\" style=\"background:#C28181\">Cumulative %\\n            \u003Cspan class=\"legend-item\">\u003Cspan class=\"swatch dash\" style=\"border-color:#74A086\">80% Threshold\\n        \\n    \\n",[1971,2256,2257],{},"\\nexport default {\\n    data() {\\n        return {\\n            svgWidth: 600,\\n            svgHeight: 260,\\n            padding: { top: 20, right: 40, bottom: 62, left: 10 }\\n        }\\n    },\\n    computed: {\\n        \u002F\u002F Per the docs: msg"," is a built-in variable, automatically\\n        \u002F\u002F assigned whenever this ui-template node receives a message\\n        \u002F\u002F from Node-RED. Deriving ",[72,2260,2261],{},"rows"," from it directly (rather than\\n        \u002F\u002F manually managing a socket listener) means Vue's reactivity\\n        \u002F\u002F handles updates for us — any change to ",[72,2264,2265],{},"msg"," recomputes ",[72,2268,2261],{},"\\n        \u002F\u002F and re-renders the SVG automatically.\\n        rows() {\\n            const payload = this.msg?.payload;\\n            return Array.isArray(payload) ? payload : ",[162,2271],{},";\\n        },\\n        chartAreaHeight() {\\n            return this.svgHeight - this.padding.bottom;\\n        },\\n        maxCount() {\\n            return Math.max(1, ...this.rows.map(r => r.defect_count));\\n        },\\n        barWidth() {\\n            const usableWidth = this.svgWidth - this.padding.left - this.padding.right;\\n            const n = this.rows.length || 1;\\n            return Math.min(60, (usableWidth \u002F n) * 0.6);\\n        },\\n        cumulativeLinePoints() {\\n            return this.rows\\n                .map((row, i) => ",[72,2274,2275],{},"${this.barX(i) + this.barWidth \u002F 2},${this.pctToY(row.cumulative_pct)}",")\\n                .join(' ');\\n        }\\n    },\\n    watch: {\\n        \u002F\u002F Debug aid only — doesn't drive the chart (the ",[72,2278,2261],{}," computed\\n        \u002F\u002F property does that). Open the browser console (F12) to confirm\\n        \u002F\u002F messages are actually arriving and check the field names match\\n        \u002F\u002F (defect_type, defect_count, cumulative_pct).\\n        msg: function () {\\n            console.log('",[162,2281,2282],{},"Pareto widget"," msg updated:', this.msg);\\n        }\\n    },\\n    methods: {\\n        barX(i) {\\n            const usableWidth = this.svgWidth - this.padding.left - this.padding.right;\\n            const n = this.rows.length || 1;\\n            const slot = usableWidth \u002F n;\\n            return this.padding.left + i * slot + (slot - this.barWidth) \u002F 2;\\n        },\\n        barY(count) {\\n            const usableHeight = this.chartAreaHeight - this.padding.top;\\n            return this.chartAreaHeight - (count \u002F this.maxCount) * usableHeight;\\n        },\\n        barHeight(count) {\\n            const usableHeight = this.chartAreaHeight - this.padding.top;\\n            return (count \u002F this.maxCount) * usableHeight;\\n        },\\n        pctToY(pct) {\\n            const usableHeight = this.chartAreaHeight - this.padding.top;\\n            return this.chartAreaHeight - (pct \u002F 100) * usableHeight;\\n        },\\n        wrapLabel(label) {\\n            \u002F\u002F Greedy word-wrap: fits as many words as possible per line\\n            \u002F\u002F (targeting ~11 chars\u002Fline) instead of truncating with \"…\".\\n            const words = label.split(' ');\\n            const maxCharsPerLine = 11;\\n            const lines = ",[162,2285],{},";\\n            let currentLine = '';\\n\\n            words.forEach(word => {\\n                const candidate = currentLine ? ",[72,2288,2289],{},"${currentLine} ${word}"," : word;\\n                if (candidate.length > maxCharsPerLine && currentLine) {\\n                    lines.push(currentLine);\\n                    currentLine = word;\\n                } else {\\n                    currentLine = candidate;\\n                }\\n            });\\n            if (currentLine) lines.push(currentLine);\\n\\n            return lines;\\n        }\\n    }\\n}\\n\\n\\n",[1982,2292,2293],{},"\\n.pareto-container {\\n    width: 100%;\\n}\\n.pareto-container svg {\\n    width: 100%;\\n    height: 260px;\\n}\\n.bar-label-value {\\n    font-size: 11px;\\n    fill: #B6BBC1;\\n    font-family: sans-serif;\\n}\\n.axis-label {\\n    font-size: 10px;\\n    fill: #B6BBC1;\\n    font-family: sans-serif;\\n}\\n.threshold-label {\\n    font-size: 10px;\\n    fill: #74A086;\\n    font-family: sans-serif;\\n}\\n.legend {\\n    display: flex;\\n    gap: 16px;\\n    justify-content: center;\\n    margin-top: 6px;\\n    font-size: 12px;\\n    color: #B6BBC1;\\n}\\n.legend-item {\\n    display: flex;\\n    align-items: center;\\n    gap: 6px;\\n}\\n.swatch {\\n    width: 10px;\\n    height: 10px;\\n    border-radius: 2px;\\n    display: inline-block;\\n}\\n.swatch.dash {\\n    background: transparent;\\n    border-top: 2px dashed;\\n    height: 0;\\n}\\n","\",\"storeOutMessages\":true,\"passthru\":true,\"resendOnRefresh\":true,\"templateScope\":\"local\",\"className\":\"\",\"x\":620,\"y\":640,\"wires\":[[]]},{\"id\":\"867ef11afa029061\",\"type\":\"ui-group\",\"d\":true,\"name\":\"Pareto Chart\",\"page\":\"e7cfd3329956406b\",\"width\":\"4\",\"height\":\"2\",\"order\":5,\"showTitle\":false,\"className\":\"\",\"visible\":\"true\",\"disabled\":\"false\",\"groupType\":\"default\"},{\"id\":\"e7cfd3329956406b\",\"type\":\"ui-page\",\"name\":\"Assembly Quality Monitor\",\"ui\":\"6481b1c613ec9a93\",\"path\":\"\u002Fdefects\",\"icon\":\"home\",\"layout\":\"grid\",\"theme\":\"faac104f34962f3e\",\"breakpoints\":",[162,2296,2297],{},"{\"name\":\"Default\",\"px\":\"0\",\"cols\":\"3\"},{\"name\":\"Tablet\",\"px\":\"576\",\"cols\":\"6\"},{\"name\":\"Small Desktop\",\"px\":\"768\",\"cols\":\"9\"},{\"name\":\"Desktop\",\"px\":\"1024\",\"cols\":\"12\"}",",\"order\":1,\"className\":\"\",\"visible\":\"true\",\"disabled\":\"false\"},{\"id\":\"6481b1c613ec9a93\",\"type\":\"ui-base\",\"name\":\"My Dashboard\",\"path\":\"\u002Fdashboard\",\"appIcon\":\"\",\"includeClientData\":true,\"acceptsClientConfig\":",[162,2300,1988],{},",\"showPathInSidebar\":false,\"headerContent\":\"page\",\"navigationStyle\":\"default\",\"titleBarStyle\":\"default\",\"showReconnectNotification\":true,\"notificationDisplayTime\":1,\"showDisconnectNotification\":true,\"allowInstall\":false},{\"id\":\"faac104f34962f3e\",\"type\":\"ui-theme\",\"name\":\"Default Theme\",\"colors\":{\"surface\":\"#2e3134\",\"primary\":\"#5a96d6\",\"bgPage\":\"#383b3f\",\"groupBg\":\"#454950\",\"groupOutline\":\"#585d63\"},\"sizes\":{\"density\":\"default\",\"pagePadding\":\"12px\",\"groupGap\":\"12px\",\"groupBorderRadius\":\"4px\",\"widgetGap\":\"12px\"}},{\"id\":\"7c924e25db7a85a3\",\"type\":\"global-config\",\"env\":",[162,2303],{},[12,2305,2306,2310],{},[18,2307],{"alt":2308,"src":2309},"Screenshot: the Pareto chart with bars per defect type and the cumulative-percentage line crossing the 80% marker","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fpareto-chart-added.png",[23,2311,2312],{},"The rendered Pareto chart. Make sure the cumulative line and the dashed 80% threshold are both visible.",[740,2314,2316],{"id":2315},"root-cause","Root cause",[1440,2318,2319,2321,2329],{},[52,2320,2117],{},[52,2322,2323,2324,1463,2326,2126],{},"Add a change node named \"Extract Root Cause Data\": set ",[72,2325,2011],{},[72,2327,2328],{},"msg.payload[0].root_cause",[52,2330,2331,2332,2334,2335,2338],{},"Add a ui-chart node in the Root Cause group, chart type Bar, ",[72,2333,913],{}," on the x-axis, ",[72,2336,2337],{},"defect_count"," on the y.",[12,2340,2341],{},"The query sorts it most-common-first, so the chart reads left to right as a priority list.",[12,2343,2344,2348],{},[18,2345],{"alt":2346,"src":2347},"Screenshot: the Root Cause bar chart, sorted most-common-first","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Froot-cause-added.png",[23,2349,2350],{},"The root cause bar chart, bars descending left to right.",[740,2352,2354],{"id":2353},"severity-and-disposition","Severity and disposition",[1440,2356,2357,2360,2374],{},[52,2358,2359],{},"Add two link in nodes connected to \"KPI Result\", one per chart.",[52,2361,2362,2363,1463,2365,2368,2369,1463,2371,36],{},"Add two change nodes: \"Extract Severity Data\" sets ",[72,2364,2011],{},[72,2366,2367],{},"msg.payload[0].severity","; \"Extract Disposition Data\" sets ",[72,2370,1531],{},[72,2372,2373],{},"payload[0].disposition",[52,2375,2376,2377,2379,2380,2382,2383,36],{},"Add two ui-chart nodes in their groups, chart type Pie. For each, set the label to the category column (",[72,2378,424],{}," \u002F ",[72,2381,916],{},") and the value to ",[72,2384,2337],{},[12,2386,2387],{},"Severity shows how serious the mix is; disposition shows what it's costing you: Scrap, Rework, or Use-as-is.",[12,2389,2390,2394],{},[18,2391],{"alt":2392,"src":2393},"Screenshot: the Severity and Disposition pie charts side by side","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fseverity-and-disposition-added.png",[23,2395,2396],{},"The two pie charts. Capture Severity and Disposition together.",[740,2398,2400],{"id":2399},"defects-per-day","Defects per day",[1440,2402,2403,2405,2413],{},[52,2404,2117],{},[52,2406,2407,2408,1463,2410,2126],{},"Add a change node named \"Extract Trend Data\": set ",[72,2409,2011],{},[72,2411,2412],{},"msg.payload[0].trend",[52,2414,2415,2416,2419,2420,36],{},"Add a ui-chart node in the Defects Per Day group. Set the chart type to Line, the x-axis property to ",[72,2417,2418],{},"date"," (type: time), and the y-axis property to ",[72,2421,2337],{},[12,2423,2424],{},"This is where a bad week, or a bad batch, shows up as a bump you can point at.",[12,2426,2427,2431],{},[18,2428],{"alt":2429,"src":2430},"Screenshot: the Defects Per Day line chart showing daily counts over the selected date range","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fdefect-day-added.png",[23,2432,2433],{},"The daily trend line chart. A date range showing a visible bump makes the point best.",[740,2435,2437],{"id":2436},"resolution-time-and-sla","Resolution time and SLA",[1440,2439,2440,2442,2450],{},[52,2441,2117],{},[52,2443,2444,2445,1463,2447,2126],{},"Add a change node named \"Extract Resolution & SLA Data\": set ",[72,2446,2011],{},[72,2448,2449],{},"msg.payload[0].avg_resolution_and_sla",[52,2451,2452,2453,2455,2456,2459,2460,2463,2464,2467,2468,2471],{},"Add a ui-table node in the Average Resolution group. Turn off auto-columns and configure five: Severity (",[72,2454,424],{},"), Hours (",[72,2457,2458],{},"avg_resolution_hours","), Resolved (",[72,2461,2462],{},"resolved_count","), SLA Breached (",[72,2465,2466],{},"sla_breached_count","), SLA % (",[72,2469,2470],{},"sla_breach_pct",").",[12,2473,2474],{},"This is the widget that answers whether defects are being closed fast enough, not just how many exist.",[12,2476,2477,2481],{},[18,2478],{"alt":2479,"src":2480},"Screenshot: the Average Resolution & SLA table with its five columns per severity","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Favg-resolution-added.png",[23,2482,2483],{},"The resolution\u002FSLA table, all five columns per severity row.",[740,2485,2487],{"id":2486},"status-funnel","Status funnel",[1440,2489,2490,2492,2500],{},[52,2491,2117],{},[52,2493,2494,2495,1463,2497,2126],{},"Add a change node named \"Extract Status Funnel Data\": set ",[72,2496,1531],{},[72,2498,2499],{},"payload[0].status_funnel",[52,2501,2502,2503,2334,2505,2338],{},"Add a ui-chart node in the Status Funnel group, chart type Bar, ",[72,2504,919],{},[72,2506,2337],{},[12,2508,2509],{},"The query orders it by workflow stage (Detected, RCA, Corrective Action, Resolved, Verified), so a pile-up at any stage is visible at a glance.",[12,2511,2512,2516],{},[18,2513],{"alt":2514,"src":2515},"Screenshot: the Status Funnel bar chart, ordered by workflow stage","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fstatus-funnel.png",[23,2517,2518],{},"The status funnel bar chart, bars in workflow order.",[12,2520,2521],{},"Deploy and open the dashboard. Every widget populates from the seeded data at once. Change a filter in the header and the whole page recalculates together; leave the live feed running and the numbers keep ticking.",[41,2523,2525],{"id":2524},"what-next","What Next",[12,2527,2528,2529,2531],{},"You've built a working quality dashboard: a ",[72,2530,145],{}," table, a single query that computes every KPI in one pass, and a page of stat cards, a Pareto chart, trend and breakdown charts, an SLA table, and a status funnel, all filtering live by line, shift, and date.",[12,2533,2534,2535,2537,2538,2542],{},"Right now it runs on the simulator, but that was only ever a stand-in for your real data. To go live, remove the simulator flow and point the query at your own ",[72,2536,145],{}," table. Everything downstream keeps working, because the dashboard only ever reads from that one query. Your defects don't live in PostgreSQL? That's fine too. FlowFuse connects to MySQL, MongoDB, InfluxDB, and more, as our ",[32,2539,2541],{"href":2540},"\u002Fnode-red\u002Fdatabase\u002F","database integration guides"," show.",[12,2544,2545,2546,36],{},"That's the real point. FlowFuse lets you build the exact application your floor needs quickly, without deep engineering knowledge or writing code, wired to the systems you already run instead of forcing your process to fit a fixed tool. This tutorial happened to build defect tracking, but the same approach covers production monitoring, OEE, and the wider quality picture. See how manufacturers are already putting it to work on our ",[32,2547,2549],{"href":2548},"\u002Findustries\u002Fautomotive\u002F","automotive solutions page",[1982,2551,2552],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":756,"searchDepth":780,"depth":780,"links":2554},[2555,2556,2557,2560,2561,2562,2571],{"id":43,"depth":768,"text":44},{"id":111,"depth":768,"text":112},{"id":138,"depth":768,"text":139,"children":2558},[2559],{"id":742,"depth":774,"text":743},{"id":930,"depth":768,"text":931},{"id":1512,"depth":768,"text":1513},{"id":2036,"depth":768,"text":2037,"children":2563},[2564,2565,2566,2567,2568,2569,2570],{"id":2050,"depth":774,"text":2051},{"id":2104,"depth":774,"text":2105},{"id":2315,"depth":774,"text":2316},{"id":2353,"depth":774,"text":2354},{"id":2399,"depth":774,"text":2400},{"id":2436,"depth":774,"text":2437},{"id":2486,"depth":774,"text":2487},{"id":2524,"depth":768,"text":2525},{"type":2573,"title":2574,"description":2575},"contact","See What Your Team Can Build","See it live with our team, and the variety of applications you can build without coding expertise, then scale them across your plant in a single click.","2026-07-16","Build a FlowFuse dashboard that tracks production defects, ranks them with a Pareto chart, surfaces root causes, and totals your cost of poor quality, filtered live by line, shift, and date","md","\u002Fblog\u002F2026\u002F07\u002Fimages\u002Fdefect-monitoring-dashboard.png",null,{"excerpt":2582},{"type":9,"value":2583},[2584],[12,2585,14],{},"\u002Fblog\u002F2026\u002F07\u002Fdefect-and-quality-monitoring",{"title":5,"description":2577},{"loc":2586},"blog\u002F2026\u002F07\u002Fdefect-and-quality-monitoring","See which defects happen most, why, and what they cost you",[2592,2593],"flowfuse","quality","This tutorial builds a defect tracking and quality monitoring dashboard in FlowFuse. Defects live in one table, a single query computes every KPI in one pass, and the dashboard renders stat cards, a Pareto chart, trend and breakdown charts, an SLA table, and a status funnel, all filtering live by line, shift, and date range.","Oo1CQVrm_zfDxWXSpM-oXVbmZx6L7_OgeY-Bol8KIWQ",[],1785528703042]