Revert "Merge branch 'testing_organisasjonskartet' into #434-organisa…

…sjonsstruktur"

This reverts commit d75f066.

apps/server/dataplattform/client.ts

@@ -12,9 +12,7 @@ const BASE_URL =
   process.env.API_URL || 'https://api.new-dev.dataplattform.knowit.no'
 
 const instance = axios.create({ baseURL: BASE_URL })
-const instance2 = axios.create({
-  baseURL: 'https://ep6xucm4i3.execute-api.eu-central-1.amazonaws.com/prod',
-})
+
 export const getReport = async <T>({
   accessToken,
   reportName,
@@ -25,12 +23,10 @@ export const getReport = async <T>({
     const params = formatParamsAsEncodedURIComponent(queryParams)
     const filterString = params ? `?filter=${params}` : ''
 
-    const accessToken2 =
-      'eyJraWQiOiJHbDBkd2xYZHBDcDdvcE4yWnNiV21pbHA0dnh0WjV6aHYyT0Nkcm0yK1dFPSIsImFsZyI6IlJTMjU2In0.eyJzdWIiOiI4MjU5ZWNmNC1iMTA3LTQ5YzktOThlYS0xNDBlY2M1M2E2ZmUiLCJjb2duaXRvOmdyb3VwcyI6WyJsZXZlbDMiXSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLmV1LWNlbnRyYWwtMS5hbWF6b25hd3MuY29tXC9ldS1jZW50cmFsLTFfZkNza2VXM3N6IiwidmVyc2lvbiI6MiwiY2xpZW50X2lkIjoiMTZ1MXUwZGhnZmY0bW00a3ZnczlqZHI5Z3AiLCJvcmlnaW5fanRpIjoiZTI2NTk0NzgtMGU2Mi00NTA5LWEwOGUtNzNiMjBiMTU0MzFjIiwidG9rZW5fdXNlIjoiYWNjZXNzIiwic2NvcGUiOiJvcGVuaWQgcHJvZmlsZSBlbWFpbCIsImF1dGhfdGltZSI6MTY4MTgxNTI0OSwiZXhwIjoxNjgyNTkyNTI5LCJpYXQiOjE2ODI1ODg5MjksImp0aSI6IjFhYzZmMjk5LWE4NmItNDIwMS1iMjljLTZiNzU2NWM2YWNlMSIsInVzZXJuYW1lIjoiR29vZ2xlXzExNTg2MjM3ODA2Njk3MDY2MTI5MCJ9.lIoZ-BQhokxu36_PZrIaBn7xgLrbSzz7muU2-T_7DF1lvUIguM378ROfbkSSdOqv8iHItBfRkn38zgpwd0Zdptd8G927J0TQp3SPptiIzOxtY09Kr9l2vOWo42IMNC-Ej4vnJDGnMG3hK3Gb97cREpL04SamoUPegK8MptNtQG918VZo4BfOcCAlGR6BWGtvDpywrsrtM7_0sQN7IaCdQqOoQJcvK-_vWs_qjwT5adD9fcT3KP5Vd6NZd6oxuwM964nUaxE3Sj_TKvSyujFUWUZZVcJK6eUQ4oB4nyP_mVULhFsaktl0P3dWjPoQZBOsyfhOWmVssJUsYBVLBiwSZw'
-    const response = await instance2.get<T>(
+    const response = await instance.get<T>(
       `/data/query/report/${reportName}${filterString}`,
       {
-        headers: { Authorization: `Bearer ${accessToken2}` },
+        headers: { Authorization: `Bearer ${accessToken}` },
       }
     )
 

apps/web/package.json

@@ -67,8 +67,6 @@
   "devDependencies": {
     "@folk/common": "workspace:^",
     "@folk/prettier-config": "workspace:^",
-    "@nivo/core": "^0.80.0",
-    "@nivo/network": "^0.80.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/react-router-dom": "^5.3.3",

apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx

@@ -1,32 +1,82 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { EmployeeNode } from 'server/routers/employees/employeesTypes'
-import { hierarchy, cluster } from 'd3-hierarchy'
+import { hierarchy, cluster, HierarchyNode, HierarchyLink } from 'd3-hierarchy'
 import { descending } from 'd3-array'
 import { linkRadial } from 'd3-shape'
 import { zoom } from 'd3-zoom'
 import { select } from 'd3-selection'
 import { useTheme } from '@mui/material'
-import OrganizationStructureTreeAll from './OrganizationStructureTreeAll'
-import OrganizationStructureTreeLeaders from './OrganizationSteuctureTreeLeaders'
-import { linkColor, toCartesian, hierchyLevel, size } from '../util'
-import { Link, Node } from '../type'
 
 interface Props {
   data: EmployeeNode
   width: number
   height: number
   margin: number
-  collapsChildren: boolean
 }
 
-const OrganizationStructureTree = ({
-  data,
-  width,
-  height,
-  margin,
-  collapsChildren,
-}: Props) => {
-  console.log(data)
+function toCartesian(x: number, y: number) {
+  return [y * Math.cos(x), y * Math.sin(x)]
+}
+
+const rightSide = (radians: number) =>
+  radians < Math.PI / 2 || radians > (3 * Math.PI) / 2
+
+const nodeFillColors = [
+  'rgb(75, 100, 85)',
+  'rgb(165, 177, 170)',
+  'rgb(183, 222, 189)',
+  'rgb(219, 238, 222)',
+]
+
+const nodeStrokeColors = [
+  'rgb(52, 70, 60)',
+  'rgb(116, 124, 119)',
+  'rgb(128, 155, 132)',
+  'rgb(153, 167, 155)',
+]
+
+const linkColors = [
+  'rgb(75, 100, 85)',
+  ' rgb(132, 142, 136)',
+  ' rgb(146, 178, 151)',
+  ' rgb(175, 190, 178)',
+]
+
+const size = [15, 10, 6, 5]
+
+const hierchyLevel = (d) => {
+  if (d.depth === 0) return 0
+  if (!d.children) return 3
+  if (d.depth === 1 || d.height > 1) return 1
+  if (d.children) return 2
+  return 3
+}
+
+const linkColor = (d) => linkColors[hierchyLevel(d)]
+const nodeSize = (d) => size[hierchyLevel(d)]
+const fill = (d) => nodeFillColors[hierchyLevel(d)]
+const nodeStroke = (d) => nodeStrokeColors[hierchyLevel(d)]
+
+type Node = HierarchyNode<EmployeeNode> & {
+  x: number
+  y: number
+}
+
+type Link = HierarchyLink<EmployeeNode> & {
+  inverted: boolean
+  path: string
+  innerLink: boolean
+  source: Node & {
+    cartX: number
+    cartY: number
+  }
+  target: Node & {
+    cartX: number
+    cartY: number
+  }
+}
+
+const OrganizationStructureTree = ({ data, width, height, margin }: Props) => {
   const theme = useTheme()
   const halo = theme.palette.background.paper // Stroke around the labels in case they overlap with a link
   const haloWidth = 0.2
@@ -38,13 +88,6 @@ const OrganizationStructureTree = ({
   root.sort((a, b) => descending(a.height, b.height))
   const descendants = root.descendants() as Node[]
 
-  const [clickedParent, setClickedParent] = useState<Node>(null)
-  const showChilden = (node: Node) => {
-    setClickedParent(node)
-    console.log(node)
-    clickedParent && console.log(clickedParent)
-  }
-
   const marginTop = margin
   const marginRight = margin
   const marginBottom = margin
@@ -77,26 +120,23 @@ const OrganizationStructureTree = ({
   })
 
   const links = root.links() as Link[]
-
-  //depth === 1 henter ut barn direkte fra innerste node, deeepth===0 gjør ikke det
   links.forEach((d: Link) => {
     if (
       d.target.height !== 0 ||
-      d.target.depth === 1 /** ===0 */ ||
+      d.target.depth === 1 ||
       (d.target.height === 0 &&
-        d.source.children.filter(
-          (child) => child.height != 0 /**child.height === 2 */
-        ).length > 3)
+        d.source.children.filter((child) => child.height != 0).length > 3)
     ) {
       d.innerLink = true
-      const offsetTarget = size[hierchyLevel(d.target)]
-      const offsetSource = size[hierchyLevel(d.source)]
       const [x1, y1] = toCartesian(d.source.x, d.source.y)
       const [x2, y2] = toCartesian(d.target.x, d.target.y)
 
       const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
       const u = [(x2 - x1) / distance, (y2 - y1) / distance]
 
+      const offsetTarget = size[hierchyLevel(d.target)]
+      const offsetSource = size[hierchyLevel(d.source)]
+
       const x4 = x1 + (distance - offsetTarget) * u[0]
       const y4 = y1 + (distance - offsetTarget) * u[1]
 
@@ -116,15 +156,9 @@ const OrganizationStructureTree = ({
       }
     } else {
       d.innerLink = false
-      if (
-        !collapsChildren ||
-        (clickedParent &&
-          clickedParent.data.employee.name === d.source.data.employee.name)
-      ) {
-        d.path = linkRadial()
-          .angle((d: any) => d.x + Math.PI / 2)
-          .radius((d: any) => d.y)(d as any)
-      }
+      d.path = linkRadial()
+        .angle((d: any) => d.x + Math.PI / 2)
+        .radius((d: any) => d.y)(d as any)
     }
   })
 
@@ -191,21 +225,28 @@ const OrganizationStructureTree = ({
                   node.y
                 })`}
               >
-                {!collapsChildren ? (
-                  <OrganizationStructureTreeAll
-                    node={node}
-                    halo={halo}
-                    theme={theme}
-                  />
-                ) : (
-                  <OrganizationStructureTreeLeaders
-                    node={node}
-                    halo={halo}
-                    theme={theme}
-                    clickedParent={clickedParent}
-                    showChilden={showChilden}
-                  />
-                )}
+                <circle
+                  fill={fill(node)}
+                  stroke={nodeStroke(node)}
+                  strokeWidth={1}
+                  r={nodeSize(node)}
+                />
+                <text
+                  transform={`rotate(${rightSide(node.x) ? 0 : 180})`}
+                  dy={node.depth === 0 ? '10px' : '0.32em'}
+                  x={
+                    rightSide(node.x) ? nodeSize(node) + 3 : -nodeSize(node) - 3
+                  }
+                  textAnchor={rightSide(node.x) ? 'start' : 'end'}
+                  paintOrder="stroke"
+                  stroke={halo}
+                  fill={theme.palette.text.primary}
+                  strokeWidth={haloWidth}
+                >
+                  {node.children && node.depth !== 0
+                    ? ''
+                    : node.data.employee.name}
+                </text>
               </g>
             )
           })}