|
16 | 16 | <li class="breadcrumb-item active" aria-current="page">Roles</li> |
17 | 17 | </ol> |
18 | 18 | </nav> |
19 | | - <div class="row"> |
20 | | - <div class="col-lg-9 col-xl-8 pe-lg-4 pe-xl-0"> |
21 | | - <h1 class="pb-2 pb-lg-3">Roles and job profiles</h1> |
22 | | - <p class="fs-lg pt-2 pt-sm-3"> |
23 | | - Dolor laoreet fermentum lectus praesent aenean molestie mollis integer. Sem ullamcorper montes, lorem ullamcorper orci, pellentesque ipsum malesuada gravida. Donec imperdiet nulla suscipit in. Dignissim ornare ac lorem consectetur massa a. Pellentesque urna pharetra, quis maecenas. Sit dolor amet nulla aenean eu, ac. Nisl mi tempus, iaculis viverra vestibulum scelerisque imperdiet montes. Mauris massa elit pretium elementum eget tortor quis. Semper interdum lectus odio diam. |
24 | | - </p> |
25 | | - <p class="fs-lg mb-3"> |
26 | | - Ut pellentesque bibendum dignissim a molestie. Ultrices diam ut vel neque tincidunt eget. Sed ut quis sit semper nunc at etiam lacinia. Quam laoreet eget id sapien a pharetra, ornare diam dignissim. Lorem amet nisl, enim mi aenean mauris. Porta nisl a ultrices ut libero id. Gravida a mi neque, tristique justo, et pharetra. Laoreet nulla est nulla cras ac arcu sed mattis tristique. Morbi convallis suspendisse enim blandit massa. Cursus augue dui mattis morbi velit. |
27 | | - </p> |
28 | | - </div> |
29 | | - <aside class="col-lg-3 offset-xl-1"> |
30 | | - <div class="offcanvas-lg offcanvas-end" id="sidebar"> |
31 | | - <div class="offcanvas-header"> |
32 | | - <h4 class="offcanvas-title">Sidebar</h4> |
33 | | - <button class="btn-close ms-auto" |
34 | | - type="button" |
35 | | - data-bs-dismiss="offcanvas" |
36 | | - data-bs-target="#sidebar" |
37 | | - aria-label="Close"></button> |
| 19 | + {% if sample_data %} |
| 20 | + {% for profile in sample_data %} |
| 21 | + <section id="role-{{ profile.user_id }}" class="overflow-hidden pb-5"> |
| 22 | + <div class="pb-sm-3 mb-md-2 mb-lg-3"> |
| 23 | + <div class="row g-4"> |
| 24 | + <div class="col-md-7 {% if forloop.counter|divisibleby:"2" %}order-md-2{% endif %}" |
| 25 | + data-aos="{% if forloop.counter|divisibleby:"2" %}fade-left{% else %}fade-right{% endif %}" |
| 26 | + data-aos-duration="600" |
| 27 | + data-aos-offset="280" |
| 28 | + data-disable-parallax-down="md"> |
| 29 | + <div class="h-100 bg-skill-wheel rounded-3"> |
| 30 | + <div id="dataviz_{{ profile.user_id }}"></div> |
| 31 | + </div> |
| 32 | + </div> |
| 33 | + <div class="col-md-5 {% if forloop.counter|divisibleby:"2" %}order-md-1{% endif %}" |
| 34 | + data-aos="{% if forloop.counter|divisibleby:"2" %}fade-right{% else %}fade-left{% endif %}" |
| 35 | + data-aos-duration="600" |
| 36 | + data-aos-offset="280" |
| 37 | + data-disable-parallax-down="md"> |
| 38 | + <div class="d-flex flex-column h-100 bg-secondary rounded-3 py-5 px-4 px-lg-5"> |
| 39 | + <h2 class="mb-xl-4">{{ profile.role }}</h2> |
| 40 | + <p class="mb-4 mb-xl-5">{{ profile.description }}</p> |
| 41 | + <div class="mt-auto"> |
| 42 | + <a class="btn btn-outline-primary" href="#role-{{ profile.user_id }}">Learn more</a> |
| 43 | + </div> |
| 44 | + </div> |
| 45 | + </div> |
| 46 | + </div> |
38 | 47 | </div> |
39 | | - <div class="offcanvas-body"> |
40 | | - <h4 class="pt-1 pt-lg-0 mt-lg-n2"></h4> |
41 | | - </div> |
42 | | - </div> |
43 | | - </aside> |
44 | | - </div> |
| 48 | + </section> |
| 49 | + {% endfor %} |
| 50 | + {% else %} |
| 51 | + No profiles |
| 52 | + {% endif %} |
45 | 53 | </section> |
| 54 | + <script> |
| 55 | +document.addEventListener('DOMContentLoaded', function () { |
| 56 | + const sampleData = {{ sample_data|safe }}; |
| 57 | + const skillLevelsLoadedFromContext = {{ skill_levels|safe }}; |
| 58 | + |
| 59 | + // Function to render the radial bar chart |
| 60 | + function renderSkillWheel(userData, userId) { |
| 61 | + const radialBarChartConfig = { |
| 62 | + innerRadius: 0, |
| 63 | + width: 900, |
| 64 | + innerRadius: 200, |
| 65 | + outerPadding: 80, |
| 66 | + categoryPadding: 0.1, |
| 67 | + skillPadding: 0.05, |
| 68 | + arcPercent: 0.8, |
| 69 | + arcStartOffset: 0.1, |
| 70 | + annotationPadding: 10, |
| 71 | + lineThickness: 2, |
| 72 | + labelTextColor: "white", |
| 73 | + lvlTextColor: "var(--ar-primary)", |
| 74 | + lvlArcColor: "rgba(var(--ar-primary-rgb), 0.2)", |
| 75 | + colourList: [ |
| 76 | + "#4E79A7", // blue |
| 77 | + "#F28E2B", // orange |
| 78 | + "#E15759", // red |
| 79 | + "#76B7B2", // teal |
| 80 | + "#59A14F", // green |
| 81 | + "#EDC948", // yellow |
| 82 | + "#B07AA1", // purple |
| 83 | + "#FF9DA7", // pink |
| 84 | + "#9C755F", // brown |
| 85 | + "#BAB0AC", // grey |
| 86 | + ], |
| 87 | + }; |
| 88 | + |
| 89 | + const datavizRoot = document.getElementById('dataviz_'+userId); |
| 90 | + |
| 91 | + // Clear existing chart |
| 92 | + datavizRoot.innerHTML = ''; |
| 93 | + |
| 94 | + main().RadialBarChart({ |
| 95 | + target: datavizRoot, |
| 96 | + data: userData, |
| 97 | + levels: skillLevelsLoadedFromContext, |
| 98 | + config: radialBarChartConfig, |
| 99 | + }); |
| 100 | + } |
| 101 | + |
| 102 | + window.loadSkillWheels = function() { |
| 103 | + for (let i = 0; i < sampleData.length; i++) { |
| 104 | + // Render the skill wheel |
| 105 | + renderSkillWheel(sampleData[i].user_data, sampleData[i].user_id); |
| 106 | + } |
| 107 | + }; |
| 108 | + |
| 109 | + loadSkillWheels(); |
| 110 | +}); |
| 111 | + </script> |
46 | 112 | {% endblock content %} |
0 commit comments