@helpwave/hightide/dist/components/TechRadar.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../src/components/TechRadar.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport Script from 'next/script'\n\ntype Config = {\n  colors: {\n    background: string, // hex\n    grid: string, // hex\n    inactive: string, // hex\n  },\n  title: string,\n  quadrants: {\n    name: string,\n  }[],\n  rings: {\n    name: string,\n    color: string, // hex\n  }[],\n  print_layout: boolean,\n  links_in_new_tabs: boolean,\n  zoomed_quadrant?: 0 | 1 | 2 | 3,\n}\n\ntype Entry = {\n  label: string,\n  link?: string,\n  active: boolean,\n  quadrant: 0 | 1 | 2 | 3, // Clockwise, starts from bottom right\n  ring: 0 | 1 | 2 | 3, // Starts from the inside\n  moved: -1 | 0 | 1, // -1: moved out, 0: not moved, 1: moved in\n}\n\nconst helpwaveTechRadar = {\n  date: new Date('1/28/2024'),\n  config: {\n    colors: {\n      background: '#fff',\n      grid: '#dddde0',\n      inactive: '#ddd'\n    },\n    title: 'helpwave Tech-Radar',\n    quadrants: [\n      { name: 'Languages' },\n      { name: 'Language dependencies' },\n      { name: 'Infrastructure' },\n      { name: 'Datastores' },\n    ],\n    rings: [\n      { name: 'ADOPT', color: '#5ba300' },\n      { name: 'TRIAL', color: '#009eb0' },\n      { name: 'ASSESS', color: '#c7ba00' },\n      { name: 'HOLD', color: '#e09b96' }\n    ],\n    print_layout: true,\n    links_in_new_tabs: true,\n  } satisfies Config,\n  entries: [\n    // Languages\n    {\n      label: 'Golang',\n      active: true,\n      quadrant: 0,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'Python',\n      active: true,\n      quadrant: 0,\n      ring: 2,\n      moved: 0,\n    },\n    {\n      label: 'TypeScript',\n      active: true,\n      quadrant: 0,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'Dart',\n      active: true,\n      quadrant: 0,\n      ring: 0,\n      moved: 0,\n    },\n    // Language dependencies\n    {\n      label: 'Dapr',\n      link: 'https://dapr.io/',\n      active: true,\n      quadrant: 1,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'GORM',\n      active: true,\n      quadrant: 1,\n      ring: 3,\n      moved: -1,\n    },\n    {\n      label: 'SQLc',\n      active: true,\n      quadrant: 1,\n      ring: 0,\n      moved: 1,\n    },\n\n    {\n      label: 'Flutter',\n      active: true,\n      quadrant: 1,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'Next.js',\n      active: true,\n      quadrant: 1,\n      ring: 0,\n      moved: 0,\n    },\n    // Infrastructure\n    {\n      label: 'Docker',\n      active: true,\n      quadrant: 2,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'Kubernetes',\n      active: true,\n      quadrant: 2,\n      ring: 2,\n      moved: 1,\n    },\n    {\n      label: 'gRPC',\n      active: true,\n      quadrant: 2,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'APISIX',\n      active: true,\n      quadrant: 2,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'GitHub Actions',\n      active: true,\n      quadrant: 2,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'devenv',\n      active: true,\n      quadrant: 2,\n      ring: 1,\n      moved: 0,\n    },\n    // Datastores\n    {\n      label: 'PostgreSQL',\n      active: true,\n      quadrant: 3,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'Redis',\n      active: true,\n      quadrant: 3,\n      ring: 0,\n      moved: 0,\n    },\n    {\n      label: 'EventStoreDB',\n      active: true,\n      quadrant: 3,\n      ring: 1,\n      moved: 0,\n    },\n  ] satisfies Entry[]\n}\n\ntype TechRadarProps = {\n  date?: Date,\n  config?: Config,\n  entries?: Entry[],\n}\n\n/**\n * This component wraps https://github.com/zalando/tech-radar\n */\nexport const TechRadar = ({\n  date = helpwaveTechRadar.date,\n  config = helpwaveTechRadar.config,\n  entries = helpwaveTechRadar.entries,\n}: TechRadarProps) => {\n  const [isD3Loaded, setIsD3Loaded] = useState(false)\n  const [isRadarLoaded, setIsRadarLoaded] = useState(false)\n\n  const dateString = date.toLocaleDateString('en-US', { year: 'numeric', month: 'numeric', day: 'numeric' })\n\n  useEffect(() => {\n    if (!isD3Loaded || !isRadarLoaded) return\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-expect-error\n    d3.select('svg#radar').select('*').remove()\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-expect-error\n    radar_visualization({\n      svg_id: 'radar',\n      width: 1500,\n      height: 1000,\n      date: dateString,\n      entries,\n      ...config,\n    })\n  }, [isD3Loaded, isRadarLoaded, config, entries]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <>\n      <Script\n        src=\"https://cdn.helpwave.de/js/d3.v4.min.js\"\n        onLoad={() => {\n          setIsD3Loaded(true)\n        }}\n      />\n      <Script\n        src=\"https://cdn.helpwave.de/js/radar-0.8.js\"\n        onLoad={() => {\n          setIsRadarLoaded(true)\n        }}\n      />\n      <svg id=\"radar\"></svg>\n    </>\n  )\n}\n"],"mappings":"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","names":[]}