@helpwave/hightide
Version:
helpwave's component and theming library
208 lines • 4.05 kB
JavaScript
// src/components/TechRadar.tsx
import { useEffect, useState } from "react";
import Script from "next/script";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var helpwaveTechRadar = {
date: /* @__PURE__ */ new Date("1/28/2024"),
config: {
colors: {
background: "#fff",
grid: "#dddde0",
inactive: "#ddd"
},
title: "helpwave Tech-Radar",
quadrants: [
{ name: "Languages" },
{ name: "Language dependencies" },
{ name: "Infrastructure" },
{ name: "Datastores" }
],
rings: [
{ name: "ADOPT", color: "#5ba300" },
{ name: "TRIAL", color: "#009eb0" },
{ name: "ASSESS", color: "#c7ba00" },
{ name: "HOLD", color: "#e09b96" }
],
print_layout: true,
links_in_new_tabs: true
},
entries: [
// Languages
{
label: "Golang",
active: true,
quadrant: 0,
ring: 0,
moved: 0
},
{
label: "Python",
active: true,
quadrant: 0,
ring: 2,
moved: 0
},
{
label: "TypeScript",
active: true,
quadrant: 0,
ring: 0,
moved: 0
},
{
label: "Dart",
active: true,
quadrant: 0,
ring: 0,
moved: 0
},
// Language dependencies
{
label: "Dapr",
link: "https://dapr.io/",
active: true,
quadrant: 1,
ring: 0,
moved: 0
},
{
label: "GORM",
active: true,
quadrant: 1,
ring: 3,
moved: -1
},
{
label: "SQLc",
active: true,
quadrant: 1,
ring: 0,
moved: 1
},
{
label: "Flutter",
active: true,
quadrant: 1,
ring: 0,
moved: 0
},
{
label: "Next.js",
active: true,
quadrant: 1,
ring: 0,
moved: 0
},
// Infrastructure
{
label: "Docker",
active: true,
quadrant: 2,
ring: 0,
moved: 0
},
{
label: "Kubernetes",
active: true,
quadrant: 2,
ring: 2,
moved: 1
},
{
label: "gRPC",
active: true,
quadrant: 2,
ring: 0,
moved: 0
},
{
label: "APISIX",
active: true,
quadrant: 2,
ring: 0,
moved: 0
},
{
label: "GitHub Actions",
active: true,
quadrant: 2,
ring: 0,
moved: 0
},
{
label: "devenv",
active: true,
quadrant: 2,
ring: 1,
moved: 0
},
// Datastores
{
label: "PostgreSQL",
active: true,
quadrant: 3,
ring: 0,
moved: 0
},
{
label: "Redis",
active: true,
quadrant: 3,
ring: 0,
moved: 0
},
{
label: "EventStoreDB",
active: true,
quadrant: 3,
ring: 1,
moved: 0
}
]
};
var TechRadar = ({
date = helpwaveTechRadar.date,
config = helpwaveTechRadar.config,
entries = helpwaveTechRadar.entries
}) => {
const [isD3Loaded, setIsD3Loaded] = useState(false);
const [isRadarLoaded, setIsRadarLoaded] = useState(false);
const dateString = date.toLocaleDateString("en-US", { year: "numeric", month: "numeric", day: "numeric" });
useEffect(() => {
if (!isD3Loaded || !isRadarLoaded) return;
d3.select("svg#radar").select("*").remove();
radar_visualization({
svg_id: "radar",
width: 1500,
height: 1e3,
date: dateString,
entries,
...config
});
}, [isD3Loaded, isRadarLoaded, config, entries]);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Script,
{
src: "https://cdn.helpwave.de/js/d3.v4.min.js",
onLoad: () => {
setIsD3Loaded(true);
}
}
),
/* @__PURE__ */ jsx(
Script,
{
src: "https://cdn.helpwave.de/js/radar-0.8.js",
onLoad: () => {
setIsRadarLoaded(true);
}
}
),
/* @__PURE__ */ jsx("svg", { id: "radar" })
] });
};
export {
TechRadar
};
//# sourceMappingURL=TechRadar.mjs.map