From 38cfa1c72f8ed752f6a92fccc6a6fd65724eb902 Mon Sep 17 00:00:00 2001 From: Marie Fremstad Date: Tue, 16 May 2023 12:15:56 +0200 Subject: [PATCH] Revert "Merge branch 'testing_organisasjonskartet' into #434-organisasjonsstruktur" This reverts commit d75f0666a2d73f4e0cc74db74a1b29e21ef23fd1. --- apps/server/dataplattform/client.ts | 10 +- apps/web/package.json | 2 - .../Components/Custom.tsx | 13 - .../Components/OSTtest.tsx | 53 ---- .../OrganizationSteuctureTreeLeaders.tsx | 64 ----- .../Components/OrganizationStructureTree.tsx | 149 ++++++---- .../OrganizationStructureTreeAll.tsx | 39 --- .../OrganizationStructurePage.tsx | 52 +--- .../src/pages/organizationStructure/data.json | 257 ------------------ .../src/pages/organizationStructure/type.ts | 21 -- .../src/pages/organizationStructure/util.ts | 43 --- package.json | 2 - yarn.lock | 2 - 13 files changed, 104 insertions(+), 603 deletions(-) delete mode 100644 apps/web/src/pages/organizationStructure/Components/Custom.tsx delete mode 100644 apps/web/src/pages/organizationStructure/Components/OSTtest.tsx delete mode 100644 apps/web/src/pages/organizationStructure/Components/OrganizationSteuctureTreeLeaders.tsx delete mode 100644 apps/web/src/pages/organizationStructure/Components/OrganizationStructureTreeAll.tsx delete mode 100644 apps/web/src/pages/organizationStructure/data.json delete mode 100644 apps/web/src/pages/organizationStructure/type.ts delete mode 100644 apps/web/src/pages/organizationStructure/util.ts diff --git a/apps/server/dataplattform/client.ts b/apps/server/dataplattform/client.ts index 076f651d..0f675557 100644 --- a/apps/server/dataplattform/client.ts +++ b/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 ({ accessToken, reportName, @@ -25,12 +23,10 @@ export const getReport = async ({ 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( + const response = await instance.get( `/data/query/report/${reportName}${filterString}`, { - headers: { Authorization: `Bearer ${accessToken2}` }, + headers: { Authorization: `Bearer ${accessToken}` }, } ) diff --git a/apps/web/package.json b/apps/web/package.json index fe8083c7..de46a093 100644 --- a/apps/web/package.json +++ b/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", diff --git a/apps/web/src/pages/organizationStructure/Components/Custom.tsx b/apps/web/src/pages/organizationStructure/Components/Custom.tsx deleted file mode 100644 index b823166c..00000000 --- a/apps/web/src/pages/organizationStructure/Components/Custom.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -interface Props { - id: any -} -const Custom = (props) => { - console.log(props) - return ( - {props.node.id} - ) -} - -export default Custom diff --git a/apps/web/src/pages/organizationStructure/Components/OSTtest.tsx b/apps/web/src/pages/organizationStructure/Components/OSTtest.tsx deleted file mode 100644 index dfa1bfb5..00000000 --- a/apps/web/src/pages/organizationStructure/Components/OSTtest.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' -import { ResponsiveNetwork } from '@nivo/network' -import Custom from './Custom' - -interface Props { - data: { - nodes: any[] - links: any[] - } -} - -//'(props: NodeProps, context?: any): ReactElement -const OSTtest = ({ data }: Props) => { - console.log(data) - return ( - <> -
- -
- - ) -} - -export default OSTtest diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationSteuctureTreeLeaders.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationSteuctureTreeLeaders.tsx deleted file mode 100644 index 4fb8d86d..00000000 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationSteuctureTreeLeaders.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react' -import { EmployeeNode } from 'server/routers/employees/employeesTypes' -import { Node } from '../type' -import { fill, haloWidth, nodeSize, nodeStroke, rightSide } from '../util' -import { Theme } from '@mui/material' - -interface Props { - data?: EmployeeNode - node: Node - clickedParent: Node - halo: string - theme: Theme - showChilden: any -} - -const OrganizationStructureTreeLeaders = ({ - data, - node, - clickedParent, - halo, - theme, - showChilden, -}: Props) => { - const checkParent = () => { - if ( - clickedParent && - node.data.employee.manager_email === clickedParent.data.employee.email && - !node.data.children - ) { - return true - } else return false - } - - return ( - <> - {node.data.children || checkParent() ? ( - showChilden(node)} - fill={fill(node)} - stroke={nodeStroke(node)} - strokeWidth={1} - r={nodeSize(node)} - /> - ) : ( - <> - )} - - {checkParent() && node.data.employee.name} - {node.depth === 0 && node.data.employee.name} - - - ) -} - -export default OrganizationStructureTreeLeaders diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx index 73493763..37ef6c25 100644 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx +++ b/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 & { + x: number + y: number +} + +type Link = HierarchyLink & { + 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(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 ? ( - - ) : ( - - )} + + + {node.children && node.depth !== 0 + ? '' + : node.data.employee.name} + ) })} diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTreeAll.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTreeAll.tsx deleted file mode 100644 index 61f4070a..00000000 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTreeAll.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react' -import { EmployeeNode } from 'server/routers/employees/employeesTypes' -import { Node } from '../type' -import { fill, haloWidth, nodeSize, nodeStroke, rightSide } from '../util' -import { Theme } from '@mui/material' - -interface Props { - data?: EmployeeNode - node: Node - halo: string - theme: Theme -} - -const OrganizationStructureTreeAll = ({ data, node, halo, theme }: Props) => { - return ( - <> - - - {node.children && node.depth !== 0 ? '' : node.data.employee.name} - - - ) -} - -export default OrganizationStructureTreeAll diff --git a/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx b/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx index 08331fac..33f362ee 100644 --- a/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx +++ b/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx @@ -3,26 +3,9 @@ import OrganizationStructureTree from './Components/OrganizationStructureTree' import { BaseSkeleton } from '../../components/skeletons/BaseSkeleton' import { FallbackMessage } from '../employee/components/FallbackMessage' import { pageTitle } from '../../utils/pagetitle' -import { useState } from 'react' -import { Checkbox, CheckboxProps, FormControlLabel } from '@mui/material' -import { withStyles } from '@mui/styles' -import OSTtest from './Components/OSTtest' -import data2 from './data.json' - -const BlackCheckBox = withStyles({ - root: { - color: '#333333', - '&:hover': { - backgroundColor: 'transparent', - }, - }, -})((props: CheckboxProps) => ( - -)) export default function OrganizationStructurePage() { const { data, isLoading, error } = useEmployeeStructure() - const [collapsChildren, setCollapsChildren] = useState(false) pageTitle('Organisasjonsstruktur') @@ -36,35 +19,12 @@ export default function OrganizationStructurePage() { return } - function toggleDisplay() { - setCollapsChildren(!collapsChildren) - } - - const checkBox = { - label: 'Skjul barn', - changeHandler: toggleDisplay, - checked: collapsChildren, - } - return ( - <> -
- } - label={checkBox.label} - checked={checkBox.checked} - />{' '} -
- - {/** - */} - - + ) } diff --git a/apps/web/src/pages/organizationStructure/data.json b/apps/web/src/pages/organizationStructure/data.json deleted file mode 100644 index 134cff6a..00000000 --- a/apps/web/src/pages/organizationStructure/data.json +++ /dev/null @@ -1,257 +0,0 @@ -{ - "nodes": [ - { - "id": "Christer", - "height": 1, - "size": 28, - "color": "rgb(97, 205, 187)" - }, - { - "id": "Kristin", - "height": 0, - "size": 18, - "color": "rgb(97, 205, 187)" - }, - { - "id": "Bård", - "height": 1, - "size": 18, - "color": "rgb(97, 205, 187)" - }, - { - "id": "Lars Ivar", - "height": 1, - "size": 18, - "color": "rgb(97, 205, 187)" - }, - { - "id": "Zi", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Tormod", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Sigmund", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Marcus", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Henning", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Malte", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Karoline", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Joakim", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Henrik", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - - { - "id": "Hedda", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - - { - "id": "Geir", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Erik", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Christian", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Anita", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Anders", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Klaus", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Anders Breivik", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Asbjørn", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - }, - { - "id": "Frode", - "height": 2, - "size": 12, - "color": "rgb(244, 117, 96)" - } - ], - "links": [ - { - "source": "Christer", - "target": "Kristin", - "distance": 80 - }, - - { - "source": "Christer", - "target": "Bård", - "distance": 80 - }, - { - "source": "Christer", - "target": "Lars Ivar", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Zi", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Tormod", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Sigmund", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Marcus", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Malte", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Karoline", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Joakim", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Henrik", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Henning", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Hedda", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Geir", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Erik", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Christian", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Anita", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Anders", - "distance": 80 - }, - { - "source": "Kristin", - "target": "Klaus", - "distance": 80 - }, - { - "source": "Bård", - "target": "Anders Breivik", - "distance": 80 - }, - { - "source": "Bård", - "target": "Asbjørn", - "distance": 80 - }, - { - "source": "Bård", - "target": "Frode", - "distance": 80 - } - ] -} diff --git a/apps/web/src/pages/organizationStructure/type.ts b/apps/web/src/pages/organizationStructure/type.ts deleted file mode 100644 index 1e7d0ee1..00000000 --- a/apps/web/src/pages/organizationStructure/type.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { EmployeeNode } from 'server/routers/employees/employeesTypes' -import { HierarchyNode, HierarchyLink } from 'd3-hierarchy' - -export type Node = HierarchyNode & { - x: number - y: number -} - -export type Link = HierarchyLink & { - inverted: boolean - path: string - innerLink: boolean - source: Node & { - cartX: number - cartY: number - } - target: Node & { - cartX: number - cartY: number - } -} diff --git a/apps/web/src/pages/organizationStructure/util.ts b/apps/web/src/pages/organizationStructure/util.ts deleted file mode 100644 index db627ac7..00000000 --- a/apps/web/src/pages/organizationStructure/util.ts +++ /dev/null @@ -1,43 +0,0 @@ -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)', -] - -export 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 -} - -export const size = [15, 10, 6, 5] -export const haloWidth = 0.2 - -export function toCartesian(x: number, y: number) { - return [y * Math.cos(x), y * Math.sin(x)] -} - -export const rightSide = (radians: number) => - radians < Math.PI / 2 || radians > (3 * Math.PI) / 2 - -export const linkColor = (d) => linkColors[hierchyLevel(d)] -export const nodeSize = (d) => size[hierchyLevel(d)] -export const fill = (d) => nodeFillColors[hierchyLevel(d)] -export const nodeStroke = (d) => nodeStrokeColors[hierchyLevel(d)] diff --git a/package.json b/package.json index bbb2ec28..d39551ad 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,6 @@ "postinstall": "husky install" }, "devDependencies": { - "@nivo/core": "^0.80.0", - "@nivo/network": "^0.80.0", "eslint": "^8.30.0", "husky": "^8.0.2", "prettier": "^2.8.1", diff --git a/yarn.lock b/yarn.lock index 755b6754..d8c4899c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9393,8 +9393,6 @@ __metadata: version: 0.0.0-use.local resolution: "folk-webapp@workspace:." dependencies: - "@nivo/core": ^0.80.0 - "@nivo/network": ^0.80.0 eslint: ^8.30.0 husky: ^8.0.2 prettier: ^2.8.1