25:["$","title",null,{"children":"Dashboard Badges | Cristian Vidal Sastre | Observable"}] 49:T42a,md`## How to use this ~~~js import {dashboard} from "@cobus/dashboard-badges" ~~~ and then call ~~~js dashboard({columns: 4, badges: []}); // columns - the number of columns you want to use in your layout // badges - an array of badges you want to place on your Dashboard badges = [ { stat: 1, // the large item you want to display description: "some text", backColor: "darkblue", // default is gray (optional) start: 1, // starting column (optional) end: 3 }, // ending columns (optional) { ... }, { ... } ]; ~~~ The layout uses the html grid layout, so you can specify the start and end of each badge to allow for wider badges. The start and end numbers are the lines, not the columns, where the badges start and end. These are optional and only needed if you want a specific badge to span muleiple columns. So in this example, there are 4 columns, but 5 lines, so the start and end numbers are 1 through 5. `4a:[] 29:{"id":"299603882c29f077","slug":null,"title":"Dashboard Badges","thumbnail":"ca217f55afa373e6d293b592d86b9685da4b58eca7bcd5517f277050774ccebe","access_level":"public","create_time":"$D2023-02-14T19:22:48.664Z","update_time":"$D2023-02-14T19:22:48.664Z","view_time":null,"first_public_time":"$D2023-02-14T19:22:48.664Z","has_unpublished_edits":null,"fork":{"id":"898aca6b694d5f47","slug":"dashboard-badges","title":"Dashboard Badges","owner":{"id":"5097ed23e9872f77","login":"cobus","name":"Cobus Theunissen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"60a3ddad5b156ed6","login":"cvidalsastre","name":"Cristian Vidal Sastre","avatar_url":"https://avatars-next.observableusercontent.com/d033fb17f7e7ec02a523449c493b80d002180ff070682c458c0158437adb245b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":79,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"42c81c50829c3a62","login":"cvidalsastre","name":"Cristian Vidal Sastre","avatar_url":"https://avatars-next.observableusercontent.com/d033fb17f7e7ec02a523449c493b80d002180ff070682c458c0158437adb245b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"42c81c50829c3a62","login":"cvidalsastre","name":"Cristian Vidal Sastre","avatar_url":"https://avatars-next.observableusercontent.com/d033fb17f7e7ec02a523449c493b80d002180ff070682c458c0158437adb245b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dashboard Badges","cells":[{"id":0,"value":"md`# Dashboard Badges`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"example = { \n let badges = [];\n badges.push({stat: 1, description: \"partridge in a pear tree\", backColor: \"darkblue\", start: 1, end: 3});\n badges.push({stat: 2, description: \"turtle doves\", backColor: \"blue\", start: 3, end: 5});\n badges.push({stat: 3, description: \"french hens\", backColor: \"green\"});\n badges.push({stat: 4, description: \"calling birds\", backColor: \"darkorange\"});\n badges.push({stat: 5, description: \"golden rings!\", backColor: \"brown\"});\n badges.push({stat: 6, description: \"geese a layin\\`\"});\n\n return dashboard({columns: 4, badges});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"dashboard = function(content) {\n let returnHTML = `${style}\n

`;\n content.badges.forEach((badge) => {\n let columnsString = \"\";\n (badge.start && badge.end) ? columnsString = \"grid-column-start: \" + badge.start + \"; grid-column-end: \" + badge.end : \"\";\n returnHTML += `\n

${badge.stat}

${badge.description}

`; \n });\n returnHTML += `

`;\n return html`${returnHTML}` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"style = `\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null