29:null 2a:["$","title",null,{"children":"Datylon Render Server Demo | Peter Coppens | Observable"}] 2f:T187e,function buildPayload(personality,benchmarks,communication,skill,name) { const r = personality.filter(d => d.Person === name)[0]; const b = benchmarks.filter(r => r.Group === "Personality"); const c = communication.filter(d => d.Person === name)[0]; const s = skill.filter(d => d.Person === name)[0]; const b2 = benchmarks.filter(r => r.Group === "Skill"); const overallSkill = Object.values(s).filter(value => typeof value === 'number').reduce((acc, val, _, arr) => acc + val / arr.length, 0).toFixed(0) + '%'; const summary = JSON.stringify(c.Summary); return JSON.parse(`{ "main template datasheet container": { "p1-dot-plot": [ [ "Personality Trait", "color", "${name}" ], [ "Assertive", "score", "${r.Assertive}" ], [ "Resilient", "score", "${r.Resilient}" ], [ "Adaptable", "score", "${r.Adaptable}" ], [ "Empathetic", "score", "${r.Empathetic}" ], [ "Creative", "score", "${r.Creative}" ], [ "Proactive", "score", "${r.Proactive}" ], [ "Analytical", "score", "${r.Analytical}" ], [ "Meticulous", "score", "${r.Meticulous}" ], [ "Emotionally intelligent", "score", "${r['Emotionally intelligent']}" ], [ "Reliable", "score", "${r.Reliable}" ], [ "Organized", "score", "${r.Organized}" ], [ "Diplomatic", "score", "${r.Diplomatic}" ], [ "Inspirational", "score", "${r.Inspirational}" ], [ "Ethical", "score", "${r.Ethical}" ], [ "Inclusive", "score", "${r.Inclusive}" ], [ "Assertive", "BM", "${b.filter(r => r.Characteristic === 'Assertive')[0].Benchmark}" ], [ "Resilient", "BM", "${b.filter(r => r.Characteristic === 'Resilient')[0].Benchmark}" ], [ "Adaptable", "BM", "${b.filter(r => r.Characteristic === 'Adaptable')[0].Benchmark}" ], [ "Empathetic", "BM", "${b.filter(r => r.Characteristic === 'Empathetic')[0].Benchmark}" ], [ "Creative", "BM", "${b.filter(r => r.Characteristic === 'Creative')[0].Benchmark}" ], [ "Proactive", "BM", "${b.filter(r => r.Characteristic === 'Proactive')[0].Benchmark}" ], [ "Analytical", "BM", "${b.filter(r => r.Characteristic === 'Analytical')[0].Benchmark}" ], [ "Meticulous", "BM", "${b.filter(r => r.Characteristic === 'Meticulous')[0].Benchmark}" ], [ "Emotionally intelligent", "BM", "${b.filter(r => r.Characteristic === 'Emotionally intelligent')[0].Benchmark}" ], [ "Reliable", "BM", "${b.filter(r => r.Characteristic === 'Reliable')[0].Benchmark}" ], [ "Organized", "BM", "${b.filter(r => r.Characteristic === 'Organized')[0].Benchmark}" ], [ "Diplomatic", "BM", "${b.filter(r => r.Characteristic === 'Diplomatic')[0].Benchmark}" ], [ "Inspirational", "BM","${b.filter(r => r.Characteristic === 'Inspirational')[0].Benchmark}" ], [ "Ethical", "BM", "${b.filter(r => r.Characteristic === 'Ethical')[0].Benchmark}" ], [ "Inclusive", "BM", "${b.filter(r => r.Characteristic === 'Inclusive')[0].Benchmark}" ] ], "p2-pie-top": [ [ "category", "${name}" ], [ "Graphic", "${c.Graphic}" ], [ "Data-driven", "${c['Data driven']}" ], [ "Storytelling", "${c.Storytelling}" ] ], "p2-pie right": [ [ "category", "${name}" ], [ "Direct", "${c.Direct}" ], [ "Diplomatic", "${c.Diplomatic}" ], [ "Expressive", "${c.Expressive}" ] ], "p2-pie left": [ [ "category", "${name}" ], [ "Formal", "${c.Formal}" ], [ "Informal", "${c.Informal}" ] ], "p3-left": [ [ "Category", "Capacity to effectively persuade and influence", "Skill in handling sensitive or delicate situations tactfully", "Skill in building and maintaining professional relationships", "Capacity to work effectively in a team environment", "Ability to manage and resolve conflicts in a constructive manner", "Skill in presenting compelling arguments and supporting evidence" ], [ "benchmark", "${b2.filter(r =>r.Characteristic === 'Persuasion')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Tactfulness')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Relationship building')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Teamwork')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Conflict resolution')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Argumentation')[0].Benchmark}" ], [ "score", "${s.Persuasion}", "${s.Tactfulness}", "${s['Relationship building']}", "${s.Teamwork}", "${s['Conflict resolution']}", "${s.Argumentation}" ] ], "p3-right": [ [ "Category", "Skill in negotiating and finding mutually beneficial solutions", "Willingness to share knowledge and resources with colleagues", "Ability to see situations from different perspectives", "Ability to provide appropriate feedback and ask relevant questions", "Ability to leverage networks for personal and organizational growth", "Ability to build consensus and gain support for ideas or initiatives" ], [ "benchmark", "${b2.filter(r =>r.Characteristic === 'Persuasion')[0].Negotiation}", "${b2.filter(r =>r.Characteristic === 'Collaboration')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Empathy')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Inquiry')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Networking')[0].Benchmark}", "${b2.filter(r =>r.Characteristic === 'Consensus building')[0].Benchmark}" ], [ "score", "${s.Negotiation}", "${s.Collaboration}", "${s.Empathy}", "${s.Inquiry}", "${s.Networking}", "${s['Consensus building']}" ] ], "Text": [ [ "Employee", "Year", "Job Match", "Top pie label", "Left Pie label", "Right pie label", "Communication Styles", "Interpersonal skills" ], [ "${name}", "2023", "${overallSkill}", "Visual", "Verbal", "Written", ${summary} ], [ "", "", "", "", "", "", "", "" ], [ "", "", "", "", "", "", "", "" ] ] } }`); }30:[{"id":"1de81ec143d387c568d4ff43085eedb2b467bf314f39f4f3069210cff373812ace722b7835d334f6b4965975bf07a2cce0f0edb4017ac39f93e84fc7495ab14c","href":"https://static.observableusercontent.com/files/1de81ec143d387c568d4ff43085eedb2b467bf314f39f4f3069210cff373812ace722b7835d334f6b4965975bf07a2cce0f0edb4017ac39f93e84fc7495ab14c","name":"survey-01.svg","type":"image/svg+xml","lastModified":1705074300083.469,"size":2337422},{"id":"817a0c56e6fd54ffdf9d327ef861b3e0d793124b4cf479b8c0665c9e7a259f50ea6a08120c8f0dea9e3bcacbb63cf4981d326743c7fd9601ae093f031aee7eb2","href":"https://static.observableusercontent.com/files/817a0c56e6fd54ffdf9d327ef861b3e0d793124b4cf479b8c0665c9e7a259f50ea6a08120c8f0dea9e3bcacbb63cf4981d326743c7fd9601ae093f031aee7eb2","name":"survey-03.svg","type":"image/svg+xml","lastModified":1705074299769.282,"size":1439296},{"id":"0517c61ebcc255818c82446c8b58ad4cd8f36e44590c29fab2da6e12c8ee7c46c851ff99599c7c89516541af0c7934576fa08e4fe132921768570d41457907a8","href":"https://static.observableusercontent.com/files/0517c61ebcc255818c82446c8b58ad4cd8f36e44590c29fab2da6e12c8ee7c46c851ff99599c7c89516541af0c7934576fa08e4fe132921768570d41457907a8","name":"survey-02.svg","type":"image/svg+xml","lastModified":1705074299914.314,"size":1799508},{"id":"f93040aed5bcc330cfc0f1579aa7bdc0474b86b5f4f036644637ac2fe54cfd75ff82b73a072f9dccc4192838762a128fb459057c8f52e007ec2495f2cdb54a11","href":"https://static.observableusercontent.com/files/f93040aed5bcc330cfc0f1579aa7bdc0474b86b5f4f036644637ac2fe54cfd75ff82b73a072f9dccc4192838762a128fb459057c8f52e007ec2495f2cdb54a11","name":"survey.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1705088889189.728,"size":21911}] 2d:{"id":"be499dd55aab0698","slug":null,"title":"Datylon Render Server Demo","thumbnail":"033fe3711c1919aa0cb741d5fae6352bd4764e449205e539a0273dd8c05c13da","access_level":"public","create_time":"$D2024-01-12T15:37:03.174Z","update_time":"$D2024-01-29T07:26:23.129Z","view_time":null,"first_public_time":"$D2024-01-12T15:37:03.174Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c30eecbb4261570d","login":"pgp","name":"Peter Coppens","avatar_url":"https://avatars-next.observableusercontent.com/f9496fcc15d64dafdc557e756afb1ad7c657fba1b4250286e699514e05ebb23c","tier":"starter_2024"},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5279b98ff0d33b9a","login":"pgp","name":"Peter Coppens","avatar_url":"https://avatars-next.observableusercontent.com/f9496fcc15d64dafdc557e756afb1ad7c657fba1b4250286e699514e05ebb23c","tier":null}],"members":[{"type":"individual","id":"5279b98ff0d33b9a","login":"pgp","name":"Peter Coppens","avatar_url":"https://avatars-next.observableusercontent.com/f9496fcc15d64dafdc557e756afb1ad7c657fba1b4250286e699514e05ebb23c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Datylon Render Server Demo","cells":[{"id":0,"value":"# Datylon Render Server Demo \nPrepare by\n- Create a free Datylon Report Studio account on https://insights.datylon.com.\n- For this demo, do not sign up with Google authentication but use your email address and register with a Datylon Report Studio password. Note that the email can be a Google email address.\n- Download the three SVG files attached to this notebook (survey-01.svg, survey-02.svg and survey-03.svg)\n- Login to Datylon Report Studio at https://insights.datylon.com and upload the three svg files as three new templates\n- Copy your insights.datylon.com username (email), password and the three UUID's of the three templates uploaded to Datylon Report Studio in the input cells below.\n\nFor more details consult: https://www.datylon.com/blog/creating-captivating-paginated-reports-a-guide-to-using-datylon-in-observablehq\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":200,"value":"

Configuration

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":250,"value":"viewof datylonUser = Inputs.text({label: 'Username'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"viewof datylonPassword = Inputs.text({label: 'Password',type:'password'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":" viewof datylonUuid1 = await Inputs.text({label: 'uuid1'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"viewof datylonUuid2 = Inputs.text({label: 'uuid2'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"viewof datylonUuid3 = Inputs.text({label: 'uuid3'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"

Select person

Use the drop down to select person to render the Datylon design for

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":78,"value":"viewof person = Inputs.select(personality_data.map(r => r.Person), {label: \"Select person\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"

Rendering as png

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":86,"value":"val = { \n if(datylonUser===\"\") {\n return html`

Username missing

`\n } else if(datylonPassword===\"\") {\n return html`

Provide Password

`\n } else if(datylonUuid1===\"\") {\n return html`

Provide uuid1

`\n } else if(datylonUuid2===\"\") {\n return html`

Provide uuid2

`\n } else if(datylonUuid3===\"\") {\n return html`

Provide uuid3

`\n } else {\n return html`

\n `}\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"

To download pdf press the button

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":169,"value":"Inputs.button(\"Download pdf report\", {value: null, reduce: () => fetchAsPdf(datylonUser,datylonPassword,payload)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"

Helper cells

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":268,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"

Load the Excel data file

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":46,"value":"survey_data = FileAttachment(\"survey.xlsx\").xlsx();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"survey_data.sheet(\"Personality\",{headers:true}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"personality_data = survey_data.sheet(\"Personality\",{headers:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"communication_data = survey_data.sheet(\"Communication\",{headers:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"skill_data = survey_data.sheet(\"Skill\",{headers:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":" benchmarks_data = survey_data.sheet(\"Benchmarks\",{headers:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"

Build payload for Datylon Render Server request

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":83,"value":"payload = await JSON.stringify(buildPayload(personality_data, benchmarks_data,communication_data,skill_data,person));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"

Function to render a Datylon design using the Datylon Render server

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":81,"value":"async function renderWithDatylonServer(user, password, pageUuid, payload, accept = 'image/png') {\n const response = await fetch('https://insights.datylon.com/datyrender/api/render', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept' : accept,\n 'Authorization': \"Basic \" + btoa(user + \":\" + password),\n 'x-graph-template-id': pageUuid,\n 'x-api-key': '0C8EFCE1-9BE9-4CB9-A74C-14B8B3A28CD6'\n },\n body: payload\n });\n\n console.log(payload);\n if (!response.ok) {\n console.log(`Renderserver call failed:${response.status}`);\n throw new Error(`Failed to render Datylon design. Verify user, password and uuid parameters`);\n }\n\n const imageBlob = await response.blob();\n const imageUrl = URL.createObjectURL(imageBlob);\n return imageUrl;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"

Render as PDF and download

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":104,"value":"async function fetchAsPdf(datylonUser, datylonPassword, payload) {\n let p1 = await renderWithDatylonServer(datylonUser, datylonPassword, datylonUuid1, payload, 'application/pdf');\n let p2 = await renderWithDatylonServer(datylonUser, datylonPassword, datylonUuid2, payload, 'application/pdf');\n let p3 = await renderWithDatylonServer(datylonUser, datylonPassword, datylonUuid3, payload, 'application/pdf');\n let res = await concatenatePDFs([p1,p2,p3], PDFLib.PDFDocument);\n concatenatePDFs([p1,p2,p3], PDFLib.PDFDocument).then(url => {\n const a = document.createElement('a');\n a.href = url;\n a.download = person +'.pdf';\n document.body.appendChild(a);\n a.click();\n URL.revokeObjectURL(url);\n document.body.removeChild(a);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"PDFLib = require('pdf-lib@1.16.0/dist/pdf-lib.min.js');\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"async function concatenatePDFs(urls, PDFDocument) {\n const concatenatedPdfDoc = await PDFDocument.create();\n\n for (const url of urls) {\n const pdfBytes = await fetch(url).then(res => res.arrayBuffer());\n const pdfDoc = await PDFDocument.load(pdfBytes);\n \n const pages = await concatenatedPdfDoc.copyPages(pdfDoc, pdfDoc.getPageIndices());\n pages.forEach(page => concatenatedPdfDoc.addPage(page));\n }\n\n const mergedPdfBytes = await concatenatedPdfDoc.save();\n const pdfBlob = new Blob([mergedPdfBytes], { type: 'application/pdf' });\n const pdfUrl = URL.createObjectURL(pdfBlob);\n\n return pdfUrl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"