3e:null 3f:["$","title",null,{"children":"KPI Grid-Scaled | Bob Anson | Observable"}] 45:Td19,{ const ScoreNum = 5 // NumKPis per slider const ScoreColors = [ 'spacer', // arrays begin zer0 'darkgreen', 'MediumAquaMarine', 'gold', 'darkorange', 'firebrick' ] const ScoreName = [ 'Beyond', 'Good', 'Poor', 'Bad', 'Awful' ] const max = ScoreColors.length-1; const min = 1 // number of colors const val = ["1","2","3","4","5","5","4","3","2","1"]; //assign some kpi values (overwritten below) ReassignClick // trigger re-run for random fn for (let k=0; k`; //header - left labels container.appendChild(html`

Score `) //header - generate grid element for each KPI for (let hdr=0; hdr<(numKPIs); hdr++) { for (let hdr_cell=0; hdr_cell<(ScoreNum); hdr_cell++) { container.appendChild(html`

KPI# ${hdr+1}
`) } // loop hdr_cell } //hdr loop // i-loop columns (for each KPI-value rows) for (let i=0; i
${ScoreName[i]} `) //j-loop value of each KPI, color if (row = KPI value) for (let j=0; j
KPI# ${j+1}
${ (ScoreName[i]) }`); } else { // if cell test container.appendChild(html`

KPI# ${j+1}
${ (ScoreName[i]) }`); } } // cell if else { // don't color it / make invisible container.appendChild(html`

KPI# ${j+1}
Score ${ (val[j+1]) }
`); } } // cell-loop } // j-loop } // i-loop return container; } 46:[] 43:{"id":"f60fda3cfb625119","slug":null,"title":"KPI Grid-Scaled","thumbnail":"5dc0116bfe5791bf87461da08823910397ced38386a0e66744f604bd88166746","access_level":"public","create_time":"$D2023-07-26T23:08:15.286Z","update_time":"$D2023-07-27T00:35:48.858Z","view_time":null,"first_public_time":"$D2023-07-26T23:08:15.286Z","has_unpublished_edits":null,"fork":{"id":"849b44d7945ab7e2","slug":null,"title":"KPI Grid","owner":{"id":"a9510fb8bfbeb502","login":"54a60697c53675df","name":"Bob Anson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9510fb8bfbeb502","login":"54a60697c53675df","name":"Bob Anson","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":1128,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a60697c53675df","login":"54a60697c53675df","name":"Bob Anson","avatar_url":null,"tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"54a60697c53675df","login":"54a60697c53675df","name":"Bob Anson","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"KPI Grid-Scaled","cells":[{"id":179,"value":"md`# KPI Grid-Scaled`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"md`\nChoose number of KPIs (columns). KPI values are random - hit Reaasign to change them\nIn this ex., Bad is big\n.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"viewof numKPIs = Inputs.range([2, 5], {\n label: \"Number of KPIs\",\n step: 1,\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"viewof ReassignClick = Inputs.button(\"Reassign KPI values (random)\", {value: null, reduce: () => new Date})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"