From e424f647a91e4befcb3946355d6480d7a688401b Mon Sep 17 00:00:00 2001 From: Thomas Dufourd Date: Tue, 3 Dec 2024 15:20:01 +0100 Subject: [PATCH] Mer om statistikk (#201) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Legg til 'Mer om sykefraværsstatistikk' panel * Bedre layout på små flater * Endre tekst noen steder * Deploy til dev * Fiks build * Fjerne komponenter som ikke trenger å vises ved loading (viser 'skeleton' i stedet) * Forbedringer ved innhold og tekst på Innloggingsside * Ny design på Innloggingsside: flytte innlogging knapp over ekstern lenke til 'informasjon om tilgangsstyring' * Fjerne ubrukt styling --- .github/workflows/build-deploy.yaml | 2 +- .../Innloggingsside.module.scss | 2 +- src/Innlogginsside/Innloggingsside.tsx | 18 +- .../Banner/TestVersjonBanner.module.css | 2 +- .../Forside/Forside.module.css | 72 ++- src/sykefravarsstatistikk/Forside/Forside.tsx | 428 +++++++++--------- .../Forside/LastNedKnapp/CsvDownloadLink.tsx | 130 +++--- .../LastNedKnapp/LastNedKnapp.module.css | 23 +- .../Forside/LastNedKnapp/index.tsx | 70 +-- ...nPeriodeErStatistikkenBasertP\303\245.tsx" | 28 ++ .../HvilkenStatistikkVisesIkkeHer.tsx" | 33 ++ ...HvordanHarViKommetFramTilDittResultat.tsx" | 35 ++ .../HvordanSammenlignerViMedDinBransje.tsx" | 41 ++ ...OmSykefrav\303\246rsstatistikk.module.css" | 44 ++ .../MerOmSykefrav\303\246rsstatistikk.tsx" | 26 ++ ...HarViKommetFramTilDittResultat.module.css" | 0 .../Forside/PeriodeForStatistikk.tsx | 80 ++-- .../PubliseringsdatoOppdateringsinfo.tsx | 101 ++--- .../SlikHarViKommetFramTilDittResultat.tsx | 58 --- .../Historikk/Historikk.module.css | 8 +- 20 files changed, 697 insertions(+), 504 deletions(-) create mode 100644 "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenPeriodeErStatistikkenBasertP\303\245.tsx" create mode 100644 "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenStatistikkVisesIkkeHer.tsx" create mode 100644 "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanHarViKommetFramTilDittResultat.tsx" create mode 100644 "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanSammenlignerViMedDinBransje.tsx" create mode 100644 "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.module.css" create mode 100644 "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.tsx" rename src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.module.css => "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/SlikHarViKommetFramTilDittResultat.module.css" (100%) delete mode 100644 src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.tsx diff --git a/.github/workflows/build-deploy.yaml b/.github/workflows/build-deploy.yaml index 3b641015..2b04ad62 100644 --- a/.github/workflows/build-deploy.yaml +++ b/.github/workflows/build-deploy.yaml @@ -4,7 +4,7 @@ on: push: branches: - main - - oasis-upgrade + - mer-om-statistikk paths-ignore: - "**.md" - "**/**.md" diff --git a/src/Innlogginsside/Innloggingsside.module.scss b/src/Innlogginsside/Innloggingsside.module.scss index e6c8e3ac..9bd72fe3 100644 --- a/src/Innlogginsside/Innloggingsside.module.scss +++ b/src/Innlogginsside/Innloggingsside.module.scss @@ -20,7 +20,7 @@ } &__link { - margin-bottom: 2rem; + margin-top: 2rem; } .ikke-innlogget-side { diff --git a/src/Innlogginsside/Innloggingsside.tsx b/src/Innlogginsside/Innloggingsside.tsx index 473fb1c4..ab76108d 100644 --- a/src/Innlogginsside/Innloggingsside.tsx +++ b/src/Innlogginsside/Innloggingsside.tsx @@ -24,7 +24,15 @@ export const Innloggingsside: FunctionComponent = ({ Forebygge fravær - Inkluderende arbeidsliv + Her finner du legemeldt sykefraværsstatistikk, sammenligning med din bransje og verktøy for å + forebygge fravær + + = ({ } className={styles.innloggingsside__link} > - Les mer om roller og tilganger + Siden krever Altinn-tilganger, les mer om roller og tilganger her - ); diff --git a/src/komponenter/Banner/TestVersjonBanner.module.css b/src/komponenter/Banner/TestVersjonBanner.module.css index dc8d9526..2c37e076 100644 --- a/src/komponenter/Banner/TestVersjonBanner.module.css +++ b/src/komponenter/Banner/TestVersjonBanner.module.css @@ -1,5 +1,5 @@ .alert { - max-width: 60rem; + max-width: 80rem; width: 100%; margin: 0.5rem auto 1.5rem auto; } diff --git a/src/sykefravarsstatistikk/Forside/Forside.module.css b/src/sykefravarsstatistikk/Forside/Forside.module.css index 9f3c17c7..66528be4 100644 --- a/src/sykefravarsstatistikk/Forside/Forside.module.css +++ b/src/sykefravarsstatistikk/Forside/Forside.module.css @@ -1,5 +1,5 @@ .forside { - max-width: 60rem; + max-width: 90rem; margin: 0 auto 0; display: flex; @@ -11,8 +11,25 @@ padding: 1.5rem 1rem 5rem; } +.forside__header_kun_print { + display: none; +} + +.forside__wrapper_to_kolonner { + width: 100%; + display: flex; + flex-direction: row; + margin-bottom: 2rem; +} + +.forside__wrapper_venstre_kolonne { + display: flex; + flex-direction: column; + min-height: 20rem; + +} + .forside__innhold { - background: white; padding: 2rem 1.5rem; width: 100%; border-radius: 0.25rem; @@ -39,16 +56,45 @@ } .forside__innhold__header { - display: block; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background: white; + padding: 1.5rem 1rem 1rem; + border: 1px solid var(--a-border-default); + border-radius: var(--a-border-radius-small); +} + +.forside__innhold__header_tekst { + display: flex; + flex-direction: column; + width: 100%; +} + +.forside__innhold__header_last_ned_knapp { + display: flex; + padding: 1rem; } .forside__innhold__href { display: none; } +.forside__wrapper_venstre_kolonne { + display: flex; + flex-direction: column; + min-height: 20rem; +} + @media print, (min-width: 768px) { + .forside__innhold__header { + display: flex; + flex-direction: row; + } + .forside__innhold { - padding: 2rem; + padding: 2rem 5rem; } .forside__innhold__knapp { @@ -59,6 +105,9 @@ } @media print { + .forside__header_kun_print { + display: block; + } .forside__innhold__kun-print { display: block; page-break-before: always; @@ -75,17 +124,4 @@ display: block; padding-bottom: 1rem; } -} - -.lenkepanelWrapper { - display: grid; - gap: 1rem; - grid-template-columns: repeat(1, 1fr); - margin: 1rem 0 1rem 0; - -} -@media (min-width: 768px) { - .lenkepanelWrapper { - grid-template-columns: repeat(2, 1fr); - } -} +} \ No newline at end of file diff --git a/src/sykefravarsstatistikk/Forside/Forside.tsx b/src/sykefravarsstatistikk/Forside/Forside.tsx index d620483a..3fe06a87 100644 --- a/src/sykefravarsstatistikk/Forside/Forside.tsx +++ b/src/sykefravarsstatistikk/Forside/Forside.tsx @@ -1,242 +1,250 @@ -import React, { useRef } from "react"; +import React, {useRef} from "react"; import styles from "./Forside.module.css"; -import { getBransjeEllerNæringKategori } from "./Sammenligningspaneler/GetBransjeEllerNæringKategori"; -import { Alert, BodyShort, Heading, Skeleton } from "@navikt/ds-react"; -import { SlikHarViKommetFramTilDittResultat } from "./SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat"; -import { PeriodeForStatistikk } from "./PeriodeForStatistikk"; -import { PubliseringsdatoOppdateringsinfo } from "./PubliseringsdatoOppdateringsinfo"; +import {getBransjeEllerNæringKategori} from "./Sammenligningspaneler/GetBransjeEllerNæringKategori"; +import {Alert, BodyShort, Heading, Skeleton} from "@navikt/ds-react"; +import {PeriodeForStatistikk} from "./PeriodeForStatistikk"; +import {PubliseringsdatoOppdateringsinfo} from "./PubliseringsdatoOppdateringsinfo"; import LastNedKnapp from "./LastNedKnapp"; -import { Statistikkategori } from "../domene/statistikkategori"; -import { useOrgnr } from "../../hooks/useOrgnr"; -import { RestStatus } from "../../integrasjoner/rest-status"; +import {Statistikkategori} from "../domene/statistikkategori"; +import {useOrgnr} from "../../hooks/useOrgnr"; +import {RestStatus} from "../../integrasjoner/rest-status"; import TestVersjonBanner from "../../komponenter/Banner/TestVersjonBanner"; -import { SykefraværAppData } from "../hooks/useSykefraværAppData"; +import {SykefraværAppData} from "../hooks/useSykefraværAppData"; import Historikk from "../Historikk/Historikk"; -import { Sammenligningspaneler } from "./Sammenligningspaneler/Sammenligningspaneler"; -import Tabell, { - hentTabellProps, -} from "../Historikk/GrafEllerTabell/Tabell/Tabell"; +import {Sammenligningspaneler} from "./Sammenligningspaneler/Sammenligningspaneler"; +import Tabell, {hentTabellProps,} from "../Historikk/GrafEllerTabell/Tabell/Tabell"; import useBreadcrumbs from "../../utils/useBreadcrumbs"; -import { Layout } from "../../komponenter/Layout/Layout"; -import { ManglerRettigheterIAltinnSide } from "../FeilSider/ManglerRettigheterIAltinnSide/ManglerRettigheterIAltinnSide"; +import {Layout} from "../../komponenter/Layout/Layout"; +import {ManglerRettigheterIAltinnSide} from "../FeilSider/ManglerRettigheterIAltinnSide/ManglerRettigheterIAltinnSide"; import PrintOnlyHref from "./PrintOnlyHref"; import Head from "next/head"; +import {MerOmSykefraværsstatistikk} from "./MerOmSykefraværsstatistikken/MerOmSykefraværsstatistikk"; export const Forside = ({ - kjørerMockApp, - prodUrl, - ...appData -}: SykefraværAppData & { - kjørerMockApp: boolean; - prodUrl?: string; + kjørerMockApp, + prodUrl, + ...appData + }: SykefraværAppData & { + kjørerMockApp: boolean; + prodUrl?: string; }) => { - useBreadcrumbs([ - { - title: "Min side – arbeidsgiver", - url: "/min-side-arbeidsgiver", - }, - { - title: "Forebygge fravær", - url: "/forebygge-fravar", - }, - { - title: "Sykefraværsstatistikk", - url: "/forebygge-fravar/sykefravarsstatistikk", - }, - ]); - - const orgnr = useOrgnr() || ""; - const harFeil = appData.aggregertStatistikk.restStatus === RestStatus.Feil; + useBreadcrumbs([ + { + title: "Min side – arbeidsgiver", + url: "/min-side-arbeidsgiver", + }, + { + title: "Forebygge fravær", + url: "/forebygge-fravar", + }, + { + title: "Sykefraværsstatistikk", + url: "/forebygge-fravar/sykefravarsstatistikk", + }, + ]); - const brukerHarIaRettighetTilValgtBedrift = - appData.altinnOrganisasjonerMedStatistikktilgang.status === - RestStatus.Suksess && - appData.altinnOrganisasjonerMedStatistikktilgang.data - .map((org) => org.OrganizationNumber) - .includes(orgnr); + const orgnr = useOrgnr() || ""; + const harFeil = appData.aggregertStatistikk.restStatus === RestStatus.Feil; - const innholdRef = useRef(null); + const brukerHarIaRettighetTilValgtBedrift = + appData.altinnOrganisasjonerMedStatistikktilgang.status === + RestStatus.Suksess && + appData.altinnOrganisasjonerMedStatistikktilgang.data + .map((org) => org.OrganizationNumber) + .includes(orgnr); - const loading = React.useMemo(() => { - return [ - appData.aggregertStatistikk.restStatus, - appData.altinnOrganisasjoner.status, - appData.altinnOrganisasjonerMedStatistikktilgang.status, - appData.publiseringsdatoer.status, - appData.sykefraværshistorikk.status, - ].some((status) => - [RestStatus.LasterInn, RestStatus.IkkeLastet].includes(status), - ); - }, [ - appData.aggregertStatistikk.restStatus, - appData.altinnOrganisasjoner.status, - appData.altinnOrganisasjonerMedStatistikktilgang.status, - appData.publiseringsdatoer.status, - appData.sykefraværshistorikk.status, - ]); + const innholdRef = useRef(null); + const loading = React.useMemo(() => { + return [ + appData.aggregertStatistikk.restStatus, + appData.altinnOrganisasjoner.status, + appData.altinnOrganisasjonerMedStatistikktilgang.status, + appData.publiseringsdatoer.status, + appData.sykefraværshistorikk.status, + ].some((status) => + [RestStatus.LasterInn, RestStatus.IkkeLastet].includes(status), + ); + }, [ + appData.aggregertStatistikk.restStatus, + appData.altinnOrganisasjoner.status, + appData.altinnOrganisasjonerMedStatistikktilgang.status, + appData.publiseringsdatoer.status, + appData.sykefraværshistorikk.status, + ]); - if (loading) { - return ( -
-
- -
-
- - - - + if (loading) { + return ( +
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
- - - - - - - - - - - - - - - - - -
-
-
+ ); + } + + const statistikKategori = getBransjeEllerNæringKategori( + appData.aggregertStatistikk, ); - } + const harBransje = statistikKategori === Statistikkategori.BRANSJE; - if (!brukerHarIaRettighetTilValgtBedrift) { - return ( - + const bransjeEllerNæring = appData.aggregertStatistikk.aggregertData?.get( + harBransje ? Statistikkategori.BRANSJE : Statistikkategori.NÆRING, ); - } + const navnPåVirksomhet = + appData.altinnOrganisasjoner.status === RestStatus.Suksess && + appData.altinnOrganisasjoner.data.find( + (organisasjon) => organisasjon.OrganizationNumber === orgnr, + )?.Name; + const tabellProps = hentTabellProps(appData.sykefraværshistorikk); + + return ( +
+
+ +
+ {harFeil && ( + + Kan ikke vise sykefraværsstatistikken akkurat nå. Vennligst prøv + igjen senere. + + )} +
+ + + Sykefraværsstatistikk for {navnPåVirksomhet} + + + Organisasjonsnummer: {orgnr} + +
+
+
+
+
+ + + + + {harBransje ? "Bransje" : "Næring"}:{" "} + + {bransjeEllerNæring?.prosentSiste4KvartalerTotalt?.label} + - const statistikKategori = getBransjeEllerNæringKategori( - appData.aggregertStatistikk, - ); - const harBransje = statistikKategori === Statistikkategori.BRANSJE; +
+
+ +
+
+ + +
+ - const bransjeEllerNæring = appData.aggregertStatistikk.aggregertData?.get( - harBransje ? Statistikkategori.BRANSJE : Statistikkategori.NÆRING, - ); - const navnPåVirksomhet = - appData.altinnOrganisasjoner.status === RestStatus.Suksess && - appData.altinnOrganisasjoner.data.find( - (organisasjon) => organisasjon.OrganizationNumber === orgnr, - )?.Name; - const tabellProps = hentTabellProps(appData.sykefraværshistorikk); +
- return ( -
-
- -
- {harFeil && ( - - Kan ikke vise sykefraværsstatistikken akkurat nå. Vennligst prøv - igjen senere. - - )} -
- - - Sykefraværsstatistikk for {navnPåVirksomhet} - -
- - - Organisasjonsnummer: {orgnr} - - - - {harBransje ? "Bransje" : "Næring"}:{" "} - {bransjeEllerNæring?.prosentSiste4KvartalerTotalt?.label} - - - - - - - {!!tabellProps && ( -
- + {!!tabellProps && ( +
+ +
+ )} + +
- )} -
-
-
- ); + ); }; const WrappedForside = ( - props: SykefraværAppData & { - kjørerMockApp: boolean; - prodUrl?: string; - }, + props: SykefraværAppData & { + kjørerMockApp: boolean; + prodUrl?: string; + }, ) => { - return ( - <> - - Sykefraværsstatistikk - - - - - - - ); + return ( + <> + + Sykefraværsstatistikk + + + + + + + ); }; export default WrappedForside; diff --git a/src/sykefravarsstatistikk/Forside/LastNedKnapp/CsvDownloadLink.tsx b/src/sykefravarsstatistikk/Forside/LastNedKnapp/CsvDownloadLink.tsx index 55486cf3..90c2d57f 100644 --- a/src/sykefravarsstatistikk/Forside/LastNedKnapp/CsvDownloadLink.tsx +++ b/src/sykefravarsstatistikk/Forside/LastNedKnapp/CsvDownloadLink.tsx @@ -1,78 +1,80 @@ import { - HistorikkLabels, - KvartalsvisSammenligning, + HistorikkLabels, + KvartalsvisSammenligning, } from "../../utils/sykefraværshistorikk-utils"; -import React, { FunctionComponent } from "react"; -import { Button, Link } from "@navikt/ds-react"; -import { DownloadIcon } from "@navikt/aksel-icons"; -import { formaterProsent } from "../../Historikk/GrafEllerTabell/Tabell/tabell-utils"; +import React, {FunctionComponent} from "react"; +import {Button, Link} from "@navikt/ds-react"; +import {DownloadIcon} from "@navikt/aksel-icons"; +import {formaterProsent} from "../../Historikk/GrafEllerTabell/Tabell/tabell-utils"; import styles from "./LastNedKnapp.module.css"; const buildCsvDataUrl = ( - labels: HistorikkLabels, - data: KvartalsvisSammenligning[], - harOverordnetEnhet: boolean + labels: HistorikkLabels, + data: KvartalsvisSammenligning[], + harOverordnetEnhet: boolean ) => { - const csvHeaders = [ - "År", - "Kvartal", - `Din virksomhet ${labels.virksomhet}`, - harOverordnetEnhet ? labels.overordnetEnhet : undefined, - `Bransje ${labels.næringEllerBransje}`, - `Sektor ${labels.sektor}`, - labels.land, - ] - .filter((i) => i !== undefined && i !== null) - .join(";"); - - const csvRows = data.map((rad) => - [ - rad.årstall, - rad.kvartal, - formaterProsent(rad.virksomhet), - harOverordnetEnhet ? formaterProsent(rad.overordnetEnhet) : undefined, - formaterProsent(rad.næringEllerBransje), - formaterProsent(rad.sektor), - formaterProsent(rad.land), + const csvHeaders = [ + "År", + "Kvartal", + `Din virksomhet ${labels.virksomhet}`, + harOverordnetEnhet ? labels.overordnetEnhet : undefined, + `Bransje ${labels.næringEllerBransje}`, + `Sektor ${labels.sektor}`, + labels.land, ] - .filter((i) => i !== undefined && i !== null) - .join(";") - ); + .filter((i) => i !== undefined && i !== null) + .join(";"); + + const csvRows = data.map((rad) => + [ + rad.årstall, + rad.kvartal, + formaterProsent(rad.virksomhet), + harOverordnetEnhet ? formaterProsent(rad.overordnetEnhet) : undefined, + formaterProsent(rad.næringEllerBransje), + formaterProsent(rad.sektor), + formaterProsent(rad.land), + ] + .filter((i) => i !== undefined && i !== null) + .join(";") + ); - const dataUrlHeaders = "data:text/csv;charset=utf-8,"; - const dataUrlCsv = - "\uFEFF" + encodeURIComponent([csvHeaders, ...csvRows].join("\r\n")); + const dataUrlHeaders = "data:text/csv;charset=utf-8,"; + const dataUrlCsv = + "\uFEFF" + encodeURIComponent([csvHeaders, ...csvRows].join("\r\n")); - return dataUrlHeaders + dataUrlCsv; + return dataUrlHeaders + dataUrlCsv; }; type CsvDownloadLinkProps = { - kvartalsvisSammenligning: KvartalsvisSammenligning[]; - harOverordnetEnhet: boolean; - historikkLabels: HistorikkLabels; - onClick?: () => void; + kvartalsvisSammenligning: KvartalsvisSammenligning[]; + harOverordnetEnhet: boolean; + historikkLabels: HistorikkLabels; + onClick?: () => void; }; export const CsvDownloadLink: FunctionComponent = ({ - kvartalsvisSammenligning, - harOverordnetEnhet, - historikkLabels, - onClick, -}) => { - return ( - - ); + kvartalsvisSammenligning, + harOverordnetEnhet, + historikkLabels, + onClick, + }) => { + return ( +
+ +
+ ); }; diff --git a/src/sykefravarsstatistikk/Forside/LastNedKnapp/LastNedKnapp.module.css b/src/sykefravarsstatistikk/Forside/LastNedKnapp/LastNedKnapp.module.css index fec5c2cb..fbebce91 100644 --- a/src/sykefravarsstatistikk/Forside/LastNedKnapp/LastNedKnapp.module.css +++ b/src/sykefravarsstatistikk/Forside/LastNedKnapp/LastNedKnapp.module.css @@ -1,33 +1,30 @@ .last-ned-knapp > span { display: flex; + min-width: 8rem; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: center; } -.høyrestilt-last-ned-knapp { - float: right; - margin-top: 20px; - text-decoration: none; +.last-ned-knapp-wrapper { + display: flex; + justify-content: center; + margin-top: 2rem; } -@media print, (min-width: 768px) { - .responsiv-last-ned-knapp { - display: block; - position: absolute; - right: 2rem; +@media (min-width: 768px) { + .last-ned-knapp-wrapper { + justify-content: flex-end; } } @media print { - .responsiv-last-ned-knapp { + .last-ned-knapp > span { display: none; } -} -@media print { - .responsiv-last-ned-knapp { + .last-ned-knapp { display: none; } } diff --git a/src/sykefravarsstatistikk/Forside/LastNedKnapp/index.tsx b/src/sykefravarsstatistikk/Forside/LastNedKnapp/index.tsx index 2cab5533..44daa0ea 100644 --- a/src/sykefravarsstatistikk/Forside/LastNedKnapp/index.tsx +++ b/src/sykefravarsstatistikk/Forside/LastNedKnapp/index.tsx @@ -1,39 +1,41 @@ -import { Button } from "@navikt/ds-react"; -import { useReactToPrint } from "react-to-print"; -import React from "react"; -import { DownloadIcon } from "@navikt/aksel-icons"; +import {Button} from "@navikt/ds-react"; +import {useReactToPrint} from "react-to-print"; +import React, {useRef} from "react"; +import {DownloadIcon} from "@navikt/aksel-icons"; import styles from "./LastNedKnapp.module.css"; -import { sendKnappEvent } from "../../../amplitude/amplitude"; +import {sendKnappEvent} from "../../../amplitude/amplitude"; export default function LastNedKnapp({ - innholdRef, -}: { - innholdRef: React.RefObject; + innholdRef, + }: { + innholdRef: React.RefObject; }) { - const lastNedKnappRef = React.useRef(null); - const printFn = useReactToPrint({ - onBeforePrint: () => { - sendKnappEvent("skriv ut"); - return Promise.resolve(); - }, - onAfterPrint: () => { - if (lastNedKnappRef.current) { - lastNedKnappRef.current.focus(); - } - }, - contentRef: innholdRef, - }); - return ( - - ); + const lastNedKnappRef = useRef(null); + const printFn = useReactToPrint({ + onBeforePrint: () => { + sendKnappEvent("skriv ut"); + return Promise.resolve(); + }, + onAfterPrint: () => { + if (lastNedKnappRef.current) { + if ("focus" in lastNedKnappRef.current) { + lastNedKnappRef.current.focus(); + } + } + }, + contentRef: innholdRef, + }); + return ( + + ); } diff --git "a/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenPeriodeErStatistikkenBasertP\303\245.tsx" "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenPeriodeErStatistikkenBasertP\303\245.tsx" new file mode 100644 index 00000000..62ee80f3 --- /dev/null +++ "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenPeriodeErStatistikkenBasertP\303\245.tsx" @@ -0,0 +1,28 @@ +import React, {FunctionComponent} from "react"; +import styles from "./SlikHarViKommetFramTilDittResultat.module.css"; +import {BodyShort, ReadMore} from "@navikt/ds-react"; + +import {sendPanelEkspanderEvent} from "../../../amplitude/amplitude"; + +export const HvilkenPeriodeErStatistikkenBasertPå: FunctionComponent = () => { + const panelHeader = "Hvilken periode er statistikken basert på?"; + return ( + { + sendPanelEkspanderEvent(panelHeader); + }} + > +
+ + Vi regner ut prosenten som et gjennomsnitt av de fire siste kvartalene som er publisert. Hvis vi mangler ett + eller flere kvartaler, så bruker vi de som er tilgjengelig. Du får sammenlikning med bransjen når du har tall + for fire kvartaler. + +
+ + ); +}; diff --git "a/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenStatistikkVisesIkkeHer.tsx" "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenStatistikkVisesIkkeHer.tsx" new file mode 100644 index 00000000..6bc187c6 --- /dev/null +++ "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvilkenStatistikkVisesIkkeHer.tsx" @@ -0,0 +1,33 @@ +import React, { FunctionComponent } from "react"; +import styles from "./SlikHarViKommetFramTilDittResultat.module.css"; +import { BodyShort, ReadMore } from "@navikt/ds-react"; + +import {sendPanelEkspanderEvent} from "../../../amplitude/amplitude"; + +export const HvilkenStatistikkVisesIkkeHer: FunctionComponent = () => { + const panelHeader = "Hvilken statistikk vises ikke her?"; + const panelHeaderMedStyle = + <>Hvilken statistikk vises ikke her? + return ( + { + sendPanelEkspanderEvent(panelHeader); + }} + > +
+ + Vi viser ikke egenmeldt sykefravær. Grunnet personvern viser vi ikke statistikk for diagnoser, kjønn, alder + eller geografi. + + + Vi sender aldri ut statistikk på mail. Dersom flere i virksomheten skal se statistikken, må de + ha tilgangen “Sykefraværsstatistikk for virksomheter”. Dette administreres i Altinn. + +
+ + ); +}; diff --git "a/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanHarViKommetFramTilDittResultat.tsx" "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanHarViKommetFramTilDittResultat.tsx" new file mode 100644 index 00000000..bbbe4338 --- /dev/null +++ "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanHarViKommetFramTilDittResultat.tsx" @@ -0,0 +1,35 @@ +import React, { FunctionComponent } from "react"; +import styles from "./SlikHarViKommetFramTilDittResultat.module.css"; +import EksternLenke from "../../felleskomponenter/EksternLenke/EksternLenke"; +import { BodyShort, ReadMore } from "@navikt/ds-react"; + +import {sendPanelEkspanderEvent} from "../../../amplitude/amplitude"; + +export const HvordanHarViKommetFramTilDittResultat: FunctionComponent = () => { + const panelHeader = "Hvordan har vi kommet frem til ditt resultat?"; + return ( + { + sendPanelEkspanderEvent(panelHeader); + }} + > +
+ + Resultatene er basert på legemeldt sykefravær og sammenligningen er hentet fra + sykefraværsstatistikken som Nav og Statistisk sentralbyrå (SSB) + utarbeider. + + + Les mer om datakilder og utregning på{" "} + + «Om statistikken – sykefravær» på nav.no + + +
+ + ); +}; diff --git "a/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanSammenlignerViMedDinBransje.tsx" "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanSammenlignerViMedDinBransje.tsx" new file mode 100644 index 00000000..c8f86461 --- /dev/null +++ "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/HvordanSammenlignerViMedDinBransje.tsx" @@ -0,0 +1,41 @@ +import React, {FunctionComponent} from "react"; +import styles from "./SlikHarViKommetFramTilDittResultat.module.css"; +import EksternLenke from "../../felleskomponenter/EksternLenke/EksternLenke"; +import {BodyShort, ReadMore} from "@navikt/ds-react"; + +import {sendPanelEkspanderEvent} from "../../../amplitude/amplitude"; + +export const HvordanSammenlignerViMedDinBransje: FunctionComponent = () => { + const panelHeader = "Hvordan sammenligner vi med din bransje"; + return ( + { + sendPanelEkspanderEvent(panelHeader); + }} + > +
+ + Sammenligningen tar ikke hensyn til størrelsen på din virksomhet. + + + Din bransje er hentet fra Brønnøysundregisterne. + + + + Trykk her for å endre næringskode i Altinn + + + + + Les mer om næringskoder i Brønnøysundregistrene + + +
+ + ); +}; diff --git "a/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.module.css" "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.module.css" new file mode 100644 index 00000000..c1ddeba7 --- /dev/null +++ "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.module.css" @@ -0,0 +1,44 @@ +.mer_om_statistikk__store_flater { + display: none; +} + +.mer_om_statistikk { + display: flex; + flex-direction: column; + background: white; + padding: 1.5rem 1rem 1rem; + margin-top: 2rem; + border: 1px solid var(--a-border-default); + border-radius: var(--a-border-radius-small); +} + +@media print { + .mer_om_statistikk__store_flater { + display: none; + } + + .mer_om_statistikk { + display: none; + } +} + +@media (min-width: 768px) { + .mer_om_statistikk__store_flater { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 0; + min-height: 20rem; + height: fit-content; + width: 42rem; + background: white; + padding: 1.5rem 1rem 1rem; + margin-left: 2rem; + border: 1px solid var(--a-border-default); + border-radius: var(--a-border-radius-small); + } + + .mer_om_statistikk { + display: none; + } +} diff --git "a/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.tsx" "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.tsx" new file mode 100644 index 00000000..ec823158 --- /dev/null +++ "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/MerOmSykefrav\303\246rsstatistikk.tsx" @@ -0,0 +1,26 @@ +import styles from "./MerOmSykefraværsstatistikk.module.css"; +import {Heading} from "@navikt/ds-react"; +import {HvordanHarViKommetFramTilDittResultat} from "./HvordanHarViKommetFramTilDittResultat"; +import {HvilkenStatistikkVisesIkkeHer} from "./HvilkenStatistikkVisesIkkeHer"; +import {HvilkenPeriodeErStatistikkenBasertPå} from "./HvilkenPeriodeErStatistikkenBasertPå"; +import {HvordanSammenlignerViMedDinBransje} from "./HvordanSammenlignerViMedDinBransje"; +import React from "react"; + +interface MerOmSykefraværsstatistikkProps { + synnligPåStoreFlater: boolean +} + +export const MerOmSykefraværsstatistikk = ({synnligPåStoreFlater}: MerOmSykefraværsstatistikkProps) => { + const classNames = synnligPåStoreFlater ? "mer_om_statistikk__store_flater" : "mer_om_statistikk"; + return ( +
+ + Mer om sykefraværsstatistikken + + + + + +
+ ); +} \ No newline at end of file diff --git a/src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.module.css "b/src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/SlikHarViKommetFramTilDittResultat.module.css" similarity index 100% rename from src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.module.css rename to "src/sykefravarsstatistikk/Forside/MerOmSykefrav\303\246rsstatistikken/SlikHarViKommetFramTilDittResultat.module.css" diff --git a/src/sykefravarsstatistikk/Forside/PeriodeForStatistikk.tsx b/src/sykefravarsstatistikk/Forside/PeriodeForStatistikk.tsx index 7b221757..b6ed7f0e 100644 --- a/src/sykefravarsstatistikk/Forside/PeriodeForStatistikk.tsx +++ b/src/sykefravarsstatistikk/Forside/PeriodeForStatistikk.tsx @@ -1,45 +1,47 @@ -import React, { FunctionComponent } from "react"; -import { BodyShort, Loader } from "@navikt/ds-react"; -import { RestRessurs, RestStatus } from "../../integrasjoner/rest-status"; -import { ÅrstallOgKvartal } from "../hooks/useSykefraværAppData"; +import React, {FunctionComponent} from "react"; +import {BodyShort, Heading, Loader} from "@navikt/ds-react"; +import {RestRessurs, RestStatus} from "../../integrasjoner/rest-status"; +import {ÅrstallOgKvartal} from "../hooks/useSykefraværAppData"; export const PeriodeForStatistikk: FunctionComponent<{ - restPubliseringsdatoer: RestRessurs<{ gjeldendePeriode: ÅrstallOgKvartal }>; -}> = ({ restPubliseringsdatoer }) => { - const status = restPubliseringsdatoer.status; - if (status === RestStatus.Suksess) { - return ( - - {`Sykefraværsstatistikken er fra perioden ` + - getPeriodeMedDato(restPubliseringsdatoer.data.gjeldendePeriode)} - - ); - } else if ( - status === RestStatus.IkkeLastet || - status === RestStatus.LasterInn - ) { - return ; - } else { - return {""}; - } + restPubliseringsdatoer: RestRessurs<{ gjeldendePeriode: ÅrstallOgKvartal }>; +}> = ({restPubliseringsdatoer}) => { + const status = restPubliseringsdatoer.status; + + if (status === RestStatus.Suksess) { + const periode = getPeriodeMedDato(restPubliseringsdatoer.data.gjeldendePeriode); + return ( + + Sykefraværsstatistikken er fra perioden {periode} + + + ); + } else if ( + status === RestStatus.IkkeLastet || + status === RestStatus.LasterInn + ) { + return ; + } else { + return {""}; + } }; const getPeriodeMedDato = (årstallOgKvartal: ÅrstallOgKvartal): string => { - if (årstallOgKvartal.kvartal === 1) { - return `1. april ${årstallOgKvartal.årstall - 1} til 31. mars ${ - årstallOgKvartal.årstall - }`; - } else if (årstallOgKvartal.kvartal === 2) { - return `1. juli ${årstallOgKvartal.årstall - 1} til 30. juni ${ - årstallOgKvartal.årstall - }`; - } else if (årstallOgKvartal.kvartal === 3) { - return `1. oktober ${årstallOgKvartal.årstall - 1} til 30. september ${ - årstallOgKvartal.årstall - }`; - } else if (årstallOgKvartal.kvartal === 4) { - return `1. januar ${årstallOgKvartal.årstall} til 31. desember ${årstallOgKvartal.årstall}`; - } else { - return ``; - } + if (årstallOgKvartal.kvartal === 1) { + return `1. april ${årstallOgKvartal.årstall - 1} til 31. mars ${ + årstallOgKvartal.årstall + }`; + } else if (årstallOgKvartal.kvartal === 2) { + return `1. juli ${årstallOgKvartal.årstall - 1} til 30. juni ${ + årstallOgKvartal.årstall + }`; + } else if (årstallOgKvartal.kvartal === 3) { + return `1. oktober ${årstallOgKvartal.årstall - 1} til 30. september ${ + årstallOgKvartal.årstall + }`; + } else if (årstallOgKvartal.kvartal === 4) { + return `1. januar ${årstallOgKvartal.årstall} til 31. desember ${årstallOgKvartal.årstall}`; + } else { + return ``; + } }; diff --git a/src/sykefravarsstatistikk/Forside/PubliseringsdatoOppdateringsinfo.tsx b/src/sykefravarsstatistikk/Forside/PubliseringsdatoOppdateringsinfo.tsx index a03a4b98..76068774 100644 --- a/src/sykefravarsstatistikk/Forside/PubliseringsdatoOppdateringsinfo.tsx +++ b/src/sykefravarsstatistikk/Forside/PubliseringsdatoOppdateringsinfo.tsx @@ -1,61 +1,60 @@ -import React, { FunctionComponent } from "react"; -import { BodyShort, Loader } from "@navikt/ds-react"; -import { RestRessurs, RestStatus } from "../../integrasjoner/rest-status"; +import React, {FunctionComponent} from "react"; +import {BodyShort, Loader} from "@navikt/ds-react"; +import {RestRessurs, RestStatus} from "../../integrasjoner/rest-status"; -import { Publiseringsdatoer } from "../hooks/useSykefraværAppData"; +import {Publiseringsdatoer} from "../hooks/useSykefraværAppData"; export const PubliseringsdatoOppdateringsinfo: FunctionComponent<{ - restPubliseringsdatoer: RestRessurs; -}> = ({ restPubliseringsdatoer }) => { - if (restPubliseringsdatoer.status === RestStatus.Suksess) { - const publiseringsdatoer = restPubliseringsdatoer.data; - return ( -
- - {`Sist oppdatert: ` + - formatterDatoMedMånedNavn( - new Date(publiseringsdatoer.sistePubliseringsdato) - )} - - - {isFinite( - new Date(publiseringsdatoer.nestePubliseringsdato).getDate() - ) && - `Neste oppdatering: ` + - formatterDatoMedMånedNavn( - new Date(publiseringsdatoer.nestePubliseringsdato) - )} - -
- ); - } else if ( - restPubliseringsdatoer.status === RestStatus.LasterInn || - restPubliseringsdatoer.status === RestStatus.IkkeLastet - ) { - return ; - } else { - return {""}; - } + restPubliseringsdatoer: RestRessurs; +}> = ({restPubliseringsdatoer}) => { + if (restPubliseringsdatoer.status === RestStatus.Suksess) { + const publiseringsdatoer = restPubliseringsdatoer.data; + return ( +
+ + Sist oppdatert: {" "} + {formatterDatoMedMånedNavn(new Date(publiseringsdatoer.sistePubliseringsdato))} + + + {isFinite( + new Date(publiseringsdatoer.nestePubliseringsdato).getDate() + ) && + <> + Neste oppdatering: {" "} + {formatterDatoMedMånedNavn(new Date(publiseringsdatoer.nestePubliseringsdato))} + + } + +
+ ); + } else if ( + restPubliseringsdatoer.status === RestStatus.LasterInn || + restPubliseringsdatoer.status === RestStatus.IkkeLastet + ) { + return ; + } else { + return {""}; + } }; const månedsnavn = [ - "januar", - "februar", - "mars", - "april", - "mai", - "juni", - "juli", - "august", - "september", - "oktober", - "november", - "desember", + "januar", + "februar", + "mars", + "april", + "mai", + "juni", + "juli", + "august", + "september", + "oktober", + "november", + "desember", ]; export const formatterDatoMedMånedNavn = (dato: Date): string => { - const dag = dato.getDate(); - const måned = månedsnavn[dato.getMonth()]; - const year = dato.getFullYear(); - return `${dag}. ${måned} ${year}`; + const dag = dato.getDate(); + const måned = månedsnavn[dato.getMonth()]; + const year = dato.getFullYear(); + return `${dag}. ${måned} ${year}`; }; diff --git a/src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.tsx b/src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.tsx deleted file mode 100644 index 4b2568b4..00000000 --- a/src/sykefravarsstatistikk/Forside/SlikHarViKommetFramTilDittResultat/SlikHarViKommetFramTilDittResultat.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { FunctionComponent } from "react"; -import styles from "./SlikHarViKommetFramTilDittResultat.module.css"; -import EksternLenke from "../../felleskomponenter/EksternLenke/EksternLenke"; -import { BodyShort, ReadMore } from "@navikt/ds-react"; - -import {sendPanelEkspanderEvent} from "../../../amplitude/amplitude"; - -export const SlikHarViKommetFramTilDittResultat: FunctionComponent = () => { - const panelHeader = "Slik har vi kommet fram til ditt resultat"; - return ( - { - sendPanelEkspanderEvent(panelHeader); - }} - > -
- - Legemeldt sykefravær i sammenligningen er hentet fra - sykefraværsstatistikken som NAV og Statistisk sentralbyrå (SSB) - utarbeider. Vi viser ikke egenmeldt sykefravær. - - - Du kan lese mer om datakilder og utregning på{" "} - - «Om statistikken – sykefravær» på nav.no - - - - Vi regner ut prosenten som et gjennomsnitt av de fire siste kvartalene - som er publisert. Hvis vi mangler ett eller flere kvartaler, så bruker - vi de som er tilgjengelig. Du får sammenlikning med bransjen når du - har tall for fire kvartaler. - - - Sammenligningen tar ikke hensyn til størrelsen på din virksomhet. - - Din bransje er hentet fra Altinn. - - Trykk her for å endre næringskode i Altinn - - - Les mer om næringskoder i Brønnøysundregistrene - -
- - ); -}; diff --git a/src/sykefravarsstatistikk/Historikk/Historikk.module.css b/src/sykefravarsstatistikk/Historikk/Historikk.module.css index d03fb7e1..2c3be946 100644 --- a/src/sykefravarsstatistikk/Historikk/Historikk.module.css +++ b/src/sykefravarsstatistikk/Historikk/Historikk.module.css @@ -22,11 +22,11 @@ a.csv-download-link { width: 100%; background-color: white; min-height: 50rem; - padding: 2rem 0; + padding: 1rem 2rem; } .historikk__overdel-wrapper { - padding: 2rem 0 0; + padding: .5rem 0; } .historikk__ingress { @@ -61,10 +61,6 @@ a.csv-download-link { } @media (min-width: 768px) { - .historikk__wrapper { - padding: 2rem 0; - } - .historikk__overdel-wrapper { display: flex; flex-wrap: wrap;