Last active
May 7, 2021 10:22
-
-
Save pkcpkc/f2e25df97636882e5fc8168da3ba4912 to your computer and use it in GitHub Desktop.
JavaScript: Tech Radar based on Zalandos code https://opensource.zalando.com/tech-radar/
This file contains hidden or 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
| <html> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
| <title>Tech Radar</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://opensource.zalando.com/tech-radar/release/radar-0.5.js"></script> | |
| </head> | |
| <body> | |
| <svg id="radar"></svg> | |
| <script> | |
| const Ring = { | |
| ADOPT: 0, | |
| TRIAL: 1, | |
| ASSESS: 2, | |
| HOLD: 3 | |
| }; | |
| Object.freeze(Ring); | |
| const RING_LABELS = Object.keys(Ring); | |
| Object.freeze(RING_LABELS); | |
| const Quadrant = { | |
| FRAMEWORK: 0, | |
| INFRASTRUCTURE: 1, | |
| LANGUAGE: 2, | |
| DATA_MANAGEMENT: 3 | |
| }; | |
| Object.freeze(Quadrant); | |
| const QUADRANT_LABELS = Object.keys(Quadrant); | |
| Object.freeze(QUADRANT_LABELS); | |
| const Move = { | |
| DOWN: -1, | |
| STABLE: 0, | |
| UP: 1 | |
| }; | |
| Object.freeze(Quadrant); | |
| radar_visualization({ | |
| svg_id: "radar", | |
| width: 1450, | |
| height: 1000, | |
| colors: { | |
| background: "#fff", | |
| grid: "#bbb", | |
| inactive: "#ddd" | |
| }, | |
| title: "My Tech Radar", | |
| quadrants: [ | |
| { name: QUADRANT_LABELS[0] }, | |
| { name: QUADRANT_LABELS[1] }, | |
| { name: QUADRANT_LABELS[2] }, | |
| { name: QUADRANT_LABELS[3] } | |
| ], | |
| rings: [ | |
| { name: RING_LABELS[0], color: "#93c47d" }, | |
| { name: RING_LABELS[1], color: "#b7e1cd" }, | |
| { name: RING_LABELS[2], color: "#fce8b2" }, | |
| { name: RING_LABELS[3], color: "#f4c7c3" } | |
| ], | |
| print_layout: true, | |
| entries: [ | |
| { | |
| label: "Framework #1", | |
| quadrant: Quadrant.FRAMEWORK, | |
| ring: Ring.ADOPT, | |
| moved: Move.STABLE | |
| }, | |
| { | |
| label: "Framework #2", | |
| quadrant: Quadrant.FRAMEWORK, | |
| ring: Ring.TRIAL, | |
| moved: Move.UP | |
| }, | |
| { | |
| label: "Framework #3", | |
| quadrant: Quadrant.FRAMEWORK, | |
| ring: Ring.ASSESS, | |
| moved: Move.STABLE | |
| }, | |
| { | |
| label: "Framework #4", | |
| quadrant: Quadrant.FRAMEWORK, | |
| ring: Ring.HOLD, | |
| moved: Move.DOWN | |
| }, | |
| { | |
| label: "Language", | |
| quadrant: Quadrant.LANGUAGE, | |
| ring: Ring.ASSESS, | |
| moved: Move.UP | |
| }, | |
| ] | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment