La til sykefraværsstatistikkpanel for aktiviteter.

src/Aktiviteter/Aktiviteter.tsx

@@ -34,9 +34,12 @@ import {
 import { useOrgnr } from "../hooks/useOrgnr";
 import { useHentAktiviteter } from "../hooks/useHentAktiviteter";
 import { RestStatus } from "../integrasjoner/rest-status";
+import { AggregertStatistikkDto } from "../integrasjoner/aggregert-statistikk-api";
+import { Sykefraværsstatistikk } from "./Sykefraværsstatistikk";
 
 export default function AktivitetSeksjon(props: {
   samtalestøtteUrlMedOrgnr: string;
+  sykefraværsstatistikk: AggregertStatistikkDto;
 }) {
   const orgnr = useOrgnr();
   const hentedeAktiviteter = useHentAktiviteter(orgnr);
@@ -48,6 +51,7 @@ export default function AktivitetSeksjon(props: {
           ? hentedeAktiviteter?.data
           : []
       }
+      sykefraværsstatistikk={props.sykefraværsstatistikk}
     >
       <Bleed marginInline="full" className={styles["aktiviteter-seksjon"]}>
         <div className={styles["aktiviteter-seksjon-innhold"]}>
@@ -165,7 +169,7 @@ export function AktivitetInnhold({
     case "numrertliste":
       return <Numrertliste {...innhold} />;
     case "statistikkbokser":
-      return <Statistikkbokser />;
+      return <Sykefraværsstatistikk />;
     default:
       console.error("Ukjent innholdstype", innhold);
       return null;
@@ -243,10 +247,6 @@ function Infoboks({ tittel, innhold }: AktivitetInfoboksType) {
   );
 }
 
-function Statistikkbokser() {
-  return <div>statistikkbokser</div>;
-}
-
 function getAktivitetHeaderFarge(aktivitetStatistikk: AktivitetStatistikkType) {
   if (aktivitetStatistikk.totalt === 0) {
     return styles.aktivitetIkkeValgt;

src/Aktiviteter/StatistikkPanel.module.scss

@@ -0,0 +1,34 @@
+.statistikk {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  border-radius: var(--a-border-radius-medium);
+}
+
+.gråBakgrunn {
+  --ac-panel-bg: var(--a-bg-subtle);
+}
+
+.tittel {
+  font-weight: 600;
+}
+
+.tallContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  border: none;
+}
+
+.rotateOpp {
+  transform: rotate(45deg);
+}
+
+.rotateNed {
+  transform: rotate(135deg);
+}
+
+.rotateUendret {
+  transform: rotate(90deg);
+}

src/Aktiviteter/StatistikkPanel.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import { StatistikkPanel } from "./StatistikkPanel";
+import { axe } from "jest-axe";
+
+describe("StatistikkPanel", () => {
+  it("Har ingen axe feil når bakgrunn er hvit", async () => {
+    const { container } = render(
+      <StatistikkPanel
+        sykefravær="10"
+        tittel="Sykefravær i virksomhet"
+        tooltip="Din virksomhet"
+      />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("Har ingen axe feil når bakgrunn er grå", async () => {
+    const { container } = render(
+      <StatistikkPanel
+        sykefravær="10"
+        tittel="Sykefravær i virksomhet"
+        tooltip="Din virksomhet"
+      />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("Viser 'uendret trend' når trend ikke er gitt til komponenten", async () => {
+    render(
+      <StatistikkPanel
+        sykefravær="10"
+        tittel="Sykefravær i virksomhet"
+        tooltip="Din virksomhet"
+      />
+    );
+    expect(
+      screen.getByRole("img", {
+        name: /uendret trend/i,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("Viser stigende trend", async () => {
+    render(
+      <StatistikkPanel
+        sykefravær="10"
+        tittel="Sykefravær i virksomhet"
+        tooltip="Din virksomhet"
+        trend="2"
+      />
+    );
+    expect(
+      screen.getByRole("img", {
+        name: /stigende trend/i,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it("Viser synkende trend", async () => {
+    render(
+      <StatistikkPanel
+        sykefravær="10"
+        tittel="Sykefravær i virksomhet"
+        tooltip="Din virksomhet"
+        trend="-2"
+      />
+    );
+    expect(
+      screen.getByRole("img", {
+        name: /synkende trend/i,
+      })
+    ).toBeInTheDocument();
+  });
+});

src/Aktiviteter/StatistikkPanel.tsx

@@ -0,0 +1,53 @@
+import styles from "./StatistikkPanel.module.scss";
+import { BodyShort, Panel, Tooltip } from "@navikt/ds-react";
+import { ArrowUpIcon } from "@navikt/aksel-icons";
+
+interface StatistikkPanelProps {
+  trend?: string;
+  sykefravær: string;
+  tittel: string;
+  tooltip: string;
+}
+
+export const StatistikkPanel = ({
+  sykefravær,
+  tittel,
+  trend,
+  tooltip,
+}: StatistikkPanelProps) => {
+  return (
+    <Panel className={`${styles.statistikk} ${styles.gråBakgrunn}`}>
+      <Tooltip content={tooltip}>
+        <BodyShort size={"small"} className={styles.tittel}>
+          {tittel}
+        </BodyShort>
+      </Tooltip>
+      <BodyShort className={styles.tallContainer}>
+        <ArrowUpIcon
+          className={roterEtterTrend(trend)}
+          title={trendBeskrivelse(trend)}
+          fontSize="1rem"
+        />
+        {`${sykefravær} %`}
+      </BodyShort>
+    </Panel>
+  );
+};
+
+const roterEtterTrend = (trend: string | undefined): string => {
+  const trendNummer = Number(trend);
+  if (Number.isNaN(trendNummer) || trendNummer === 0) {
+    return styles.rotateUendret;
+  } else if (trendNummer < 0) {
+    return styles.rotateNed;
+  } else return styles.rotateOpp;
+};
+
+const trendBeskrivelse = (trend: string | undefined): string => {
+  const trendNummer = Number(trend);
+  if (Number.isNaN(trendNummer) || trendNummer === 0) {
+    return "uendret trend";
+  } else if (trendNummer < 0) {
+    return "synkende trend";
+  } else return "stigende trend";
+};

src/Aktiviteter/Sykefraværsstatistikk.module.scss

@@ -0,0 +1,5 @@
+.statistikkContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}

src/Aktiviteter/Sykefraværsstatistikk.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { Sykefraværsstatistikk } from "./Sykefraværsstatistikk";
+import { AktivitetProvider } from "./context/aktivitetStatus";
+import { mockAggregertStatistikkMedBransjetall } from "../Forside/Sykefraværsstatistikk/mockAggregertStatistikkMedBransjetall";
+
+jest.mock("next/router", () => ({
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: {
+        bedrift: "123456789",
+      },
+      asPath: "",
+    };
+  },
+}));
+
+describe("Sykefraværsstatistikk", () => {
+  it("Har ingen uu-feil fra axe", async () => {
+    const { container } = render(
+      <AktivitetProvider
+        aktivitetStatuser={[]}
+        sykefraværsstatistikk={mockAggregertStatistikkMedBransjetall}
+      >
+        <Sykefraværsstatistikk />
+      </AktivitetProvider>
+    );
+
+    expect(await screen.findByText("Sykefravær i bransje")).toBeInTheDocument(); // Vent på kall til backend (msw)
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("Skal vise sykefravær med riktige verdier", async () => {
+    render(
+      <AktivitetProvider
+        aktivitetStatuser={[]}
+        sykefraværsstatistikk={mockAggregertStatistikkMedBransjetall}
+      >
+        <Sykefraværsstatistikk />
+      </AktivitetProvider>
+    );
+
+    expect(screen.getByText("Sykefravær i bransje")).toBeInTheDocument();
+    expect(screen.getByText("5.1 %")).toBeInTheDocument();
+    expect(await screen.findByText("Sykefravær hos deg")).toBeInTheDocument(); // Vent på kall til backend (msw)
+    expect(screen.getByText("8.8 %")).toBeInTheDocument();
+  });
+});

src/Aktiviteter/Sykefraværsstatistikk.tsx

@@ -0,0 +1,63 @@
+import { Loader } from "@navikt/ds-react";
+import styles from "./Sykefraværsstatistikk.module.scss";
+import { useSykefraværsstatistikkForAktivitet } from "./context/aktivitetStatus";
+import { StatistikkPanel } from "./StatistikkPanel";
+import {
+  StatistikkDto,
+  Statistikkategori,
+} from "../integrasjoner/aggregert-statistikk-api";
+
+export const Sykefraværsstatistikk = () => {
+  const sykefraværsstatistikk = useSykefraværsstatistikkForAktivitet();
+
+  const sykefraværIVirksomhet = finnStatistikkVerdi(
+    Statistikkategori.VIRKSOMHET,
+    sykefraværsstatistikk?.prosentSiste4KvartalerTotalt
+  );
+  const sykefraværIBransje = finnStatistikkVerdi(
+    Statistikkategori.BRANSJE,
+    sykefraværsstatistikk?.prosentSiste4KvartalerTotalt
+  );
+  const trendIVirksomhet = finnStatistikkVerdi(
+    Statistikkategori.VIRKSOMHET,
+    sykefraværsstatistikk?.trendTotalt
+  );
+  const trendIBransje = finnStatistikkVerdi(
+    Statistikkategori.BRANSJE,
+    sykefraværsstatistikk?.trendTotalt
+  );
+
+  return sykefraværsstatistikk ? (
+    <div className={styles.statistikkContainer}>
+      {sykefraværIVirksomhet && (
+        <StatistikkPanel
+          tittel={"Sykefravær hos deg"}
+          trend={trendIVirksomhet}
+          sykefravær={sykefraværIVirksomhet}
+          tooltip={"Din bedrift"}
+        />
+      )}
+      {sykefraværIBransje && (
+        <StatistikkPanel
+          tittel={"Sykefravær i bransje"}
+          trend={trendIBransje}
+          sykefravær={sykefraværIBransje}
+          tooltip={
+            sykefraværsstatistikk.prosentSiste4KvartalerTotalt?.find(
+              (s) => s.statistikkategori === "BRANSJE"
+            )?.label ?? "Din bransje"
+          }
+        />
+      )}
+    </div>
+  ) : (
+    <Loader variant="interaction" />
+  );
+};
+
+const finnStatistikkVerdi = (
+  kategori: Statistikkategori,
+  liste?: StatistikkDto[]
+): string | undefined => {
+  return liste?.find((e) => e.statistikkategori === kategori)?.verdi;
+};

src/Aktiviteter/context/aktivitetStatus.tsx

@@ -3,20 +3,31 @@ import { StatusType } from "../AktivitetData";
 import { AktivitetBrukerStatus } from "../../hooks/useHentAktiviteter";
 import { oppdaterStatus } from "../status-klient";
 import { sendIaMetrikkInteraksjonstjeneste } from "../../integrasjoner/ia-tjenestemetrikker-api";
+import {
+  AggregertStatistikkDto,
+  tomtDataobjekt,
+} from "../../integrasjoner/aggregert-statistikk-api";
 
 const AktivitetContext = React.createContext<{
   aktivitetStatuser: AktivitetBrukerStatus[];
   setLokaleEndringer: React.Dispatch<
     React.SetStateAction<{ aktivitetId: string; status: StatusType }[]>
   >;
-}>({ aktivitetStatuser: [], setLokaleEndringer: () => {} });
+  sykefraværsstatistikk: AggregertStatistikkDto;
+}>({
+  aktivitetStatuser: [],
+  setLokaleEndringer: () => {},
+  sykefraværsstatistikk: tomtDataobjekt,
+});
 
 export const AktivitetProvider = ({
   children,
   aktivitetStatuser,
+  sykefraværsstatistikk,
 }: {
   children: React.ReactNode;
   aktivitetStatuser: AktivitetBrukerStatus[];
+  sykefraværsstatistikk: AggregertStatistikkDto;
 }) => {
   const [lokaleEndringer, setLokaleEndringer] = React.useState<
     { aktivitetId: string; status: StatusType }[]
@@ -53,6 +64,7 @@ export const AktivitetProvider = ({
       value={{
         aktivitetStatuser: kombinerteAktivitetStatuser,
         setLokaleEndringer,
+        sykefraværsstatistikk,
       }}
     >
       {children}
@@ -81,6 +93,12 @@ export const useStatusForAktiviteter = (ider: string[]) => {
   );
 };
 
+export const useSykefraværsstatistikkForAktivitet = () => {
+  const { sykefraværsstatistikk } = React.useContext(AktivitetContext);
+
+  return sykefraværsstatistikk;
+};
+
 export const useOppdaterStatus = (
   orgnr: string | null | undefined,
   aktivitetId: string

src/Forside/Forside.tsx

@@ -62,7 +62,10 @@ export const Forside = (props: ForsideProps) => {
       <div className={styles.forside}>
         {props.children}
         {sykefraværsstatistikkEllerBannerHvisError}
-        <Aktiviteter samtalestøtteUrlMedOrgnr={samtalestøtteUrlMedOrgnr} />
+        <Aktiviteter
+          samtalestøtteUrlMedOrgnr={samtalestøtteUrlMedOrgnr}
+          sykefraværsstatistikk={aggregertStatistikkData}
+        />
         {fiaSamarbeidsstatus.status === RestStatus.Suksess &&
           fiaSamarbeidsstatus.data.samarbeid === "I_SAMARBEID" && (
             <FiaSamarbeidsstatus status={fiaSamarbeidsstatus.data.samarbeid} />