finaps / technology-radar Goto Github PK

2.0 3.0 0.0 713 KB

License: MIT License

technology-enablement technology-management

technology-radar's Introduction

Motivation

At Zalando, we maintain a public Tech Radar to help our engineering teams align on technology choices. It is based on the pioneering work by ThoughtWorks.

This repository contains the code to generate the visualization: radar.js (based on d3.js v4). Feel free to use and adapt it for your own purposes.

Usage

include d3.js and radar.js:

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://zalando.github.io/tech-radar/release/radar-0.8.js"></script>

insert an empty svg tag:

<svg id="radar"></svg>

configure the radar visualization:

radar_visualization({
  svg_id: "radar",
  width: 1450,
  height: 1000,
  scale: 1.0,
  colors: {
    background: "#fff",
    grid: "#bbb",
    inactive: "#ddd"
  },
  title: "My Radar",
  quadrants: [
    { name: "Bottom Right" },
    { name: "Bottom Left" },
    { name: "Top Left" },
    { name: "Top Right" }
  ],
  rings: [
    { name: "INNER",  color: "#5ba300" },
    { name: "SECOND", color: "#009eb0" },
    { name: "THIRD",  color: "#c7ba00" },
    { name: "OUTER",  color: "#e09b96" }
  ],
  print_layout: true,
  links_in_new_tabs: true,
  entries: [
   {
      label: "Some Entry",
      quadrant: 3,          // 0,1,2,3 (counting clockwise, starting from bottom right)
      ring: 2,              // 0,1,2,3 (starting from inside)
      moved: -1             // -1 = moved out (triangle pointing down)
                            //  0 = not moved (circle)
                            //  1 = moved in  (triangle pointing up)
   },
    // ...
  ]
});

Entries are positioned automatically so that they don't overlap. The "scale" parameter can help in adjusting the size of the radar.

As a working example, you can check out docs/index.html — the source of our public Tech Radar.

Deployment

Tech Radar is a static page, so it can be deployed using any hosting provider of your choice offering static page hosting.

Local Development

install dependencies with yarn (or npm):

yarn

start local dev server:

yarn start

your default browser should automatically open and show the url

http://localhost:3000/

License

The MIT License (MIT)

Copyright (c) 2017-2024 Zalando SE

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

technology-radar's People

Contributors

Stargazers

Watchers

technology-radar's Issues

Create your own radar feature.

one can upload a json file (or different) to render a radar for e.g. a team and/or per project.

[FE] add theme (white, dark, system default)

Better breakdown of feature and components

At the moment it is hard to compose features with how the components are now distributed. All radar components now live in the radar feature. But we have multiple types of radar comopositions. The idea would be to abstract the radar components into a components folder and then to compose radar features from those components.

[FE] show details on click of an item

Blip hover should show technology name on the radar

When the mouse pointer hovers over a blip, it should show some more information about the blip. Now it highlights the legend.

[FE] responsive

Add a remark "TODO" in de code somewhere, and create a Github issue so we don't forget to do this cleanup.

          Add a remark "TODO" in de code somewhere, and create a Github issue so we don't forget to do this cleanup.

Originally posted by @vyckes in #41 (comment)

Better highlighting of blibs on hover, especially in dark mode

The popover is the only visible clue that you are hovering a certain blib. There is nothing else letting it stand out. A nice effect would be to have all the other blibs "fade away". Or at least something to make the hovered blib more noticeable.

Video voor uitleg.

The quadrants below the radar are not easily distinguishable

There is no separator (either a line, or more spacing) between the quadrants list. So "HOLD" from the left quadrant is as close to "ADOPT" from the other quadrant, as it is from the "ASSESS" from its own quadrant.

Add interactions to the Radar

when hovering over blips, the corresponding technology entry should be highlighted.

[FE] bind on click / on hover / ... of list items with the d3 items

[FE] add legend for icons in circle

Legend overflow in y-direction should be fixed

Build filtering based on Domain selection

Deployment strategy

Thereneeds to be a deployment pipieline to host this application.

refactor styling to use grids

Re-design entry detail view

Responsiveness

Mobile is not needed, but the minimum width it requires now is already around the same of my Macbook m2. Any other laptop, or older laptop will have trouble viewing the website normally.

Technology detail page

The design of this should be simplistic and have just some extra information. In later releases we can expand on this page

[FE] look & feel in Finaps recognizable branding

Favicons add no value

Unless the majority has favicon, they add no value. Using the Finaps favicon makes it actually kinda cluttered and unreadable/distracting.

[FE] add description as an overlay popup

Rebuild radar-store to Typescript

The Radar store should be rewritten to typescript and it needs a better design.

Spacing in the introduction modal can be approved

Selection width issue on safari and chrome

There is an issue with the flex box rendering of the selected entry. This is only observed on chrome and safari

More trimmed down and complete data

Position of "Jest"

Jest is in the "on hold" category, which is true for React projects (Vitest is the preferred framework there since this year). But for Angular, Jest is the preferred testing framework (over Karma and Jasmine).

Given we we support both React and Angular, we need to reposition Jest, but with the correct note that this is for Angular, and Vitest is the preferred tool for React testing.

Description text per quadrant needs wrapping

Entry history overview

Thee should be some way of registering events related to entry updates.

Movement
Date of movement
reason of movement

Allow for filters on the radar overview (tags, types, categories, state, projects, etc.)
Allow for search on the radar overview
Allow to make a selection on the radar to view
Allow to combine search, filter & selection
Export list of technologies (based on search/filter/selection), incl. meta-data

Buttons in darkmode are harder to distinguish

The dark blue is kinda close to the background color.