Last active
September 6, 2023 11:22
-
-
Save culmat/29711a74f49b15dbe785e7b3f7060ec5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>DevOps</title> | |
| <style> | |
| .do_icon:hover { | |
| filter: drop-shadow(8px 8px 3px grey); | |
| cursor: pointer; | |
| } | |
| .do_label { | |
| fill: white; | |
| stroke: gray; | |
| font-weight: bold; | |
| } | |
| .do_label:hover { | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body bgcolor="#fff"> | |
| <div id="DevOpsProcess"></div> | |
| <script> | |
| chart = (datas) => { | |
| const w = datas[0].radii[0] * 2.2; | |
| var svg = `<svg width="${w}" height="${w}" viewbox="0 0 ${w} ${w}" text-anchor="middle" dominant-baseline="central" style="font: 24px sans-serif">` | |
| datas.forEach(data =>{ | |
| const offsets = []; | |
| let total = 0; | |
| for (const {value} of data.segments) { | |
| offsets.push(total); | |
| total += value; | |
| } | |
| svg += data.segments.map(({value, color, label, flip, shortLink}, i) => segment(offsets[i] / total, (offsets[i] + value) / total, data.radii[0], data.radii[1], color, label, flip, shortLink,data.epsilon,data.fontsize, w/2)) | |
| }) | |
| const blank = 16 | |
| const filled = 105 | |
| const DevOpsShortLink = 'XTNNqQ' | |
| return svg+` | |
| <circle cx="${w/2}" cy="${w/2}" r="45" fill="#e0e0e0" class="do_icon" onclick="document.location.href='/x/${DevOpsShortLink}'"/> | |
| <text transform="translate(${w/2}, ${w/2})" font-size="0.8em" class="do_label" name="label_${DevOpsShortLink}" onclick="document.location.href='/x/${DevOpsShortLink}'">DevOps</text> | |
| <!-- | |
| <path d=" | |
| M ${blank} ${blank} | |
| L ${blank} ${filled} | |
| A 150 150 0 0 1 ${filled} ${blank} | |
| L ${blank} ${blank} | |
| " fill="#00B28F" class="do_icon" onclick="alert('You have clicked the circle.')"/> | |
| <text transform="translate(46, 26)" font-size="0.8em" class="do_label">Create</text> | |
| --> | |
| </svg> | |
| ` | |
| } | |
| var rotate = 0.35 | |
| var margin = 0.004 | |
| var i = 0 | |
| segment = (start, end, r, r0, color, label, flip , shortLink, epsilon,fontsize, c) => { | |
| if(color== 'rgba(0,0,0,0)') return '' | |
| console.log("segmant", start, end, r, r0, color) | |
| start += margin | |
| end -= margin | |
| const a0 = 2 * Math.PI * (start - rotate); | |
| const a1 = 2 * Math.PI * (end - rotate); | |
| const x0 = Math.cos(a0), y0 = Math.sin(a0); | |
| const x1 = Math.cos(a1), y1 = Math.sin(a1); | |
| const largeArc = end - start > 0.5 ? 1 : 0; | |
| const side = flip ? 'right' : 'left' | |
| const startOffset = flip ? '35' : '35' | |
| const id = "seg" + i++ | |
| console.log(flip) | |
| return ` | |
| <path id="${label}" d=" | |
| M ${c + r0 * x0} ${c + r0 * y0} | |
| A 10 10 0 0 0 ${c + r * x0} ${c + r * y0} | |
| A ${r} ${r} 0 ${largeArc} 1 ${c + r * x1} ${c + r * y1} | |
| A 10 10 0 0 1 ${c + r0 * x1} ${c + r0 * y1} | |
| A ${r0} ${r0} 0 ${largeArc} 0 ${c + r0 * x0} ${c + r0 * y0} | |
| " fill="${color}" class="do_icon" onclick="document.location.href='/x/${shortLink}'"/> | |
| <path id="${id}" d=" | |
| M ${c + r0 * x1 * epsilon} ${c + r0 * y1 * epsilon} | |
| A ${r0} ${r0} 0 ${largeArc} 0 ${c + r0 * x0 * epsilon} ${c + r0 * y0 * epsilon} | |
| " fill="none"/> | |
| <text font-size="${fontsize}" class="do_label" onclick="document.location.href='/x/${shortLink}'" name="label_${shortLink}"> | |
| <textPath side="${side}" href="#${id}" startOffset="${startOffset}%">${label}</textPath> | |
| </text> | |
| `; | |
| } | |
| document.getElementById("DevOpsProcess").innerHTML = chart([ | |
| { | |
| segments : [ | |
| {value: 60, color: '#00B28F', label: 'Operate', flip :true, shortLink: '2UlNqQ'}, | |
| {value: 40, color: '#00B28F', label: 'Plan', flip :false, shortLink: 'brDZqQ'}, | |
| {value: 40, color: '#00B28F', label: 'Code', flip :false, shortLink: 'cLDZqQ'}, | |
| {value: 50, color: '#00B28F', label: 'Build', flip :false, shortLink: 'crDZqQ'}, | |
| {value: 60, color: '#00B28F', label: 'Release', flip :false, shortLink: 'dLDZqQ'}, | |
| {value: 50, color: '#00B28F', label: 'Deploy' , flip :true, shortLink: 'drDZqQ'} | |
| ], | |
| radii: [140, 100], | |
| epsilon : 1.155, | |
| fontsize : "1em" | |
| }, | |
| { | |
| segments : [ | |
| {value: 60, color: '#9F52CC', label: 'Observe', flip :false, shortLink: '1ElNqQ'}, | |
| ], | |
| radii: [95, 75], | |
| epsilon : 0.8, | |
| fontsize : "0.9em" | |
| }, | |
| { | |
| segments : [ | |
| {value: 60, color: 'rgba(0,0,0,0)', label: '', flip :true,shortLink: '#'}, | |
| {value: 40, color: 'rgba(0,0,0,0)', label: '', flip :false,shortLink: '#'}, | |
| {value: 90, color: '#99172D', label: 'Test', flip :false,shortLink: 'bLDZqQ'}, | |
| {value: 60, color: 'rgba(0,0,0,0)', label: '', flip :false,shortLink: '#'}, | |
| {value: 50, color: '#99172D', label: 'Test' , flip :false,shortLink: 'bLDZqQ'} | |
| ], | |
| radii: [70, 55], | |
| epsilon : 1.1, | |
| fontsize : "0.7em" | |
| } | |
| ]) | |
| try { | |
| var myShortLink = document.querySelector('link[rel="shortlink"]').getAttribute("href").split("/x/")[1] | |
| document.getElementsByName("label_"+myShortLink).forEach( (t)=> t.style.fill='black') | |
| } catch(error) { | |
| console.debug(error) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment