From ec7231ccc482a2049ccc2f6cd5595c263f7b12c3 Mon Sep 17 00:00:00 2001 From: Remko Date: Mon, 29 Apr 2024 15:26:48 +0200 Subject: [PATCH 1/3] added missing charts --- .../apiService/resources/availableFilters.ts | 2 +- .../charts/CommongroundChartsTemplate.tsx | 241 ++++++++++++++++++ 2 files changed, 242 insertions(+), 1 deletion(-) diff --git a/pwa/src/apiService/resources/availableFilters.ts b/pwa/src/apiService/resources/availableFilters.ts index c526d27f..d841508b 100644 --- a/pwa/src/apiService/resources/availableFilters.ts +++ b/pwa/src/apiService/resources/availableFilters.ts @@ -10,7 +10,7 @@ export default class AvailableFilters { public getStatistics = async (): Promise => { const endpoint = - "/search?embedded.nl.embedded.commonground.rating[%3E%3D]=1&_queries[]=developmentStatus&_queries[]=softwareType&_queries[]=categories&_queries[]=embedded.nl.embedded.commonground.rating"; + "/search?embedded.nl.embedded.commonground.rating[%3E%3D]=1&_queries[]=developmentStatus&_queries[]=softwareType&_queries[]=categories&_queries[]=embedded.nl.embedded.commonground.rating&_queries[]=embedded.nl.embedded.commonground.layerType&_queries[]=embedded.url.embedded.organisation.name"; const { data } = await Send(this._instance, "GET", endpoint); diff --git a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx index 026f4cfe..82e19200 100644 --- a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx +++ b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx @@ -28,12 +28,16 @@ export const CommongroundCartsTemplate: React.FC = () => { const [hoveredOntwikkelingsfases, setHoveredOntwikkelingsfases] = React.useState(undefined); const [hoveredInitiatieven, setHoveredInitiatieven] = React.useState(undefined); const [hoveredDomein, setHoveredDomein] = React.useState(undefined); + const [hoveredLayer, setHoveredLayer] = React.useState(undefined); const [hoveredRating, setHoveredRating] = React.useState(undefined); + const [hoveredOrganization, setHoveredOrganization] = React.useState(undefined); const [showPrecentages, setShowPrecentages] = React.useState(false); const [dataOntwikkelingsfases, setDataOntwikkelingsfases] = React.useState([]); const [dataInitiatieven, setDataInitiatieven] = React.useState([]); const [dataRating, setDataRating] = React.useState([]); const [dataDomein, setDataDomein] = React.useState([]); + const [dataOrganization, setDataOrganization] = React.useState([]); + const [dataLayer, setDataLayer] = React.useState([]); const _useFilters = useAvailableFilters(); const getStatistics = _useFilters.getStatistics(); @@ -61,6 +65,32 @@ export const CommongroundCartsTemplate: React.FC = () => { return option._id === "development"; }); + const dataLayersInterface = + getStatistics.isSuccess && + getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { + return option._id === "interface"; + }); + const dataLayersProcess = + getStatistics.isSuccess && + getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { + return option._id === "process"; + }); + const dataLayersIntegration = + getStatistics.isSuccess && + getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { + return option._id === "integration"; + }); + const dataLayersService = + getStatistics.isSuccess && + getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { + return option._id === "service"; + }); + const dataLayersData = + getStatistics.isSuccess && + getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { + return option._id === "data"; + }); + const getDataSoftwareTypeStandalone = () => { if (!getStatistics.isSuccess) return; let sum = 0; @@ -125,6 +155,14 @@ export const CommongroundCartsTemplate: React.FC = () => { { title: t("Bronze"), color: "#a97142" }, ]; + const LayerLegend = [ + { title: t("Interface"), color: "#1a75ff" }, + { title: t("Process"), color: "#dd3c49" }, + { title: t("Intergration"), color: "#efc025" }, + { title: t("Service"), color: "#69b090" }, + { title: t("Data"), color: "#7a51c8" }, + ]; + React.useEffect(() => { if (!getStatistics.isSuccess) return; @@ -237,10 +275,71 @@ export const CommongroundCartsTemplate: React.FC = () => { }; }); + const dataLayer: any[] = []; + dataLayersInterface?.count && + dataLayersInterface?.count !== 0 && + dataLayer.push({ + title: t("Interface"), + value: dataLayersInterface?.count ?? 0, + color: "#1a75ff", + filter: "interface", + }); + + dataLayersProcess?.count && + dataLayersProcess?.count !== 0 && + dataLayer.push({ + title: t("Process"), + value: dataLayersProcess?.count ?? 0, + color: "#dd3c49", + filter: "process", + }); + + dataLayersIntegration?.count && + dataLayersIntegration?.count !== 0 && + dataLayer.push({ + title: t("Integration"), + value: dataLayersIntegration?.count ?? 0, + color: "#efc025", + filter: "integration", + }); + + dataLayersService?.count && + dataLayersService?.count !== 0 && + dataLayer.push({ + title: t("Service"), + value: dataLayersService?.count ?? 0, + color: "#69b090", + filter: "service", + }); + + dataLayersData?.count && + dataLayersData?.count !== 0 && + dataLayer.push({ + title: t("Data"), + value: dataLayersData?.count ?? 0, + color: "#7a51c8", + filter: "data", + }); + + const dataOrganization: any[] = + getStatistics.isSuccess && + getStatistics.data["embedded.url.embedded.organisation.name"].map((option: any, idx: number) => { + const color = statisticsColors.find((color) => { + return color.id === idx; + }); + return { + title: option._id, + value: option.count ?? 0, + color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, + }; + }); + setDataOntwikkelingsfases(dataOntwikkelingsfases); setDataInitiatieven(dataInitiatieven); setDataRating(dataRating); setDataDomein(dataDomein); + setDataLayer(dataLayer); + setDataOrganization(dataOrganization); }, [getStatistics.isSuccess]); const convertDataOntwikkelingsfases = (data: any): dataProps[] => { @@ -289,6 +388,30 @@ export const CommongroundCartsTemplate: React.FC = () => { }); }; + const convertDataLayer = (data: any): dataProps[] => { + return data.map((entry: dataProps, i: number) => { + if (hoveredLayer === i) { + return { + ...entry, + color: "grey", + }; + } + return entry; + }); + }; + + const convertDataOrganization = (data: any): dataProps[] => { + return data.map((entry: dataProps, i: number) => { + if (hoveredOrganization === i) { + return { + ...entry, + color: "grey", + }; + } + return entry; + }); + }; + return (
); From 388896dd636cdaec7667f720e8cd8a6dec9375e1 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 30 Apr 2024 09:38:57 +0200 Subject: [PATCH 2/3] refactored CommongroundChartsTemplate --- .../charts/CommongroundChartsTemplate.tsx | 439 +++++------------- 1 file changed, 129 insertions(+), 310 deletions(-) diff --git a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx index 82e19200..ef4b53d7 100644 --- a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx +++ b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx @@ -20,17 +20,22 @@ interface dataProps { color: string; } +interface hoverProps { + ontwikkelingsfases?: number | undefined; + initiatieven?: number | undefined; + domein?: number | undefined; + layer?: number | undefined; + rating?: number | undefined; + organization?: number | undefined; +} + export const CommongroundCartsTemplate: React.FC = () => { const { t } = useTranslation(); const { setFilters } = useFiltersContext(); const { pagination, setPagination } = usePaginationContext(); - const [hoveredOntwikkelingsfases, setHoveredOntwikkelingsfases] = React.useState(undefined); - const [hoveredInitiatieven, setHoveredInitiatieven] = React.useState(undefined); - const [hoveredDomein, setHoveredDomein] = React.useState(undefined); - const [hoveredLayer, setHoveredLayer] = React.useState(undefined); - const [hoveredRating, setHoveredRating] = React.useState(undefined); - const [hoveredOrganization, setHoveredOrganization] = React.useState(undefined); + const [hovered, setHovered] = React.useState(); + const [showPrecentages, setShowPrecentages] = React.useState(false); const [dataOntwikkelingsfases, setDataOntwikkelingsfases] = React.useState([]); const [dataInitiatieven, setDataInitiatieven] = React.useState([]); @@ -38,59 +43,10 @@ export const CommongroundCartsTemplate: React.FC = () => { const [dataDomein, setDataDomein] = React.useState([]); const [dataOrganization, setDataOrganization] = React.useState([]); const [dataLayer, setDataLayer] = React.useState([]); + const _useFilters = useAvailableFilters(); const getStatistics = _useFilters.getStatistics(); - const dataDevelopmentStatusStable = - getStatistics.isSuccess && - getStatistics.data.developmentStatus.find((option: any) => { - return option._id === "stable"; - }); - - const dataDevelopmentStatusBeta = - getStatistics.isSuccess && - getStatistics.data.developmentStatus.find((option: any) => { - return option._id === "beta"; - }); - - const dataDevelopmentStatusConcept = - getStatistics.isSuccess && - getStatistics.data.developmentStatus.find((option: any) => { - return option._id === "concept"; - }); - - const dataDevelopmentStatusDevelopment = - getStatistics.isSuccess && - getStatistics.data.developmentStatus.find((option: any) => { - return option._id === "development"; - }); - - const dataLayersInterface = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { - return option._id === "interface"; - }); - const dataLayersProcess = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { - return option._id === "process"; - }); - const dataLayersIntegration = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { - return option._id === "integration"; - }); - const dataLayersService = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { - return option._id === "service"; - }); - const dataLayersData = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.layerType"].find((option: any) => { - return option._id === "data"; - }); - const getDataSoftwareTypeStandalone = () => { if (!getStatistics.isSuccess) return; let sum = 0; @@ -106,36 +62,6 @@ export const CommongroundCartsTemplate: React.FC = () => { return { _id: "standalone", count: sum }; }; - const dataSoftwareTypeSoftwareAddon = - getStatistics.isSuccess && - getStatistics.data.softwareType.find((option: any) => { - return option._id === "softwareAddon"; - }); - - const dataSoftwareTypeAPI = - getStatistics.isSuccess && - getStatistics.data.softwareType.find((option: any) => { - return option._id === "api"; - }); - - const dataRatingBronze = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.rating"].find((option: any) => { - return option._id === 1; - }); - - const dataRatingSilver = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.rating"].find((option: any) => { - return option._id === 2; - }); - - const dataRatingGold = - getStatistics.isSuccess && - getStatistics.data["embedded.nl.embedded.commonground.rating"].find((option: any) => { - return option._id === 3; - }); - const ontwikkelingsfasesLegend = [ { title: "Doorontwikkeling en beheer", color: "#118dff" }, { title: "Opschaling", color: "#12239e" }, @@ -158,7 +84,7 @@ export const CommongroundCartsTemplate: React.FC = () => { const LayerLegend = [ { title: t("Interface"), color: "#1a75ff" }, { title: t("Process"), color: "#dd3c49" }, - { title: t("Intergration"), color: "#efc025" }, + { title: t("Integration"), color: "#efc025" }, { title: t("Service"), color: "#69b090" }, { title: t("Data"), color: "#7a51c8" }, ]; @@ -166,101 +92,82 @@ export const CommongroundCartsTemplate: React.FC = () => { React.useEffect(() => { if (!getStatistics.isSuccess) return; - const dataOntwikkelingsfases: any[] = []; - dataDevelopmentStatusStable?.count && - dataDevelopmentStatusStable?.count !== 0 && - dataOntwikkelingsfases.push({ - title: "Doorontwikkeling en beheer", - value: dataDevelopmentStatusStable?.count ?? 0, - color: "#118dff", - filter: "stable", - }); - - dataDevelopmentStatusBeta?.count && - dataDevelopmentStatusBeta?.count !== 0 && - dataOntwikkelingsfases.push({ - title: "Opschaling", - value: dataDevelopmentStatusBeta?.count ?? 0, - color: "#12239e", - filter: "beta", - }); - - dataDevelopmentStatusDevelopment?.count && - dataDevelopmentStatusDevelopment?.count !== 0 && - dataOntwikkelingsfases.push({ - title: "Realisatie", - value: dataDevelopmentStatusDevelopment?.count ?? 0, - color: "#e66c37", - filter: "development", - }); - - dataDevelopmentStatusConcept?.count && - dataDevelopmentStatusConcept?.count !== 0 && - dataOntwikkelingsfases.push({ - title: "Initiatie", - value: dataDevelopmentStatusConcept?.count ?? 0, - color: "#6b007b", - filter: "concept", + const dataOntwikkelingsfases: any[] = getStatistics.data.developmentStatus.map((option: any) => { + const getTitle = (id: string) => { + switch (id) { + case "stable": + return "Doorontwikkeling en beheer"; + case "beta": + return "Opschaling"; + case "development": + return "Realisatie"; + case "concept": + return "Initatie"; + } + }; + const color = ontwikkelingsfasesLegend.find((_option) => { + return _option.title === getTitle(option._id); }); + return { + title: getTitle(option._id), + value: option.count ?? 0, + color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, + filter: option._id, + }; + }); - const dataInitiatieven: any[] = []; const dataSoftwareTypeStandalone = getDataSoftwareTypeStandalone(); - - dataSoftwareTypeStandalone?.count && - dataSoftwareTypeStandalone?.count !== 0 && - dataInitiatieven.push({ - title: "Toepassing (Bruikbare oplossing)", - value: dataSoftwareTypeStandalone?.count ?? 0, - color: "#118dff", - filter: "standalone", - }); - - dataSoftwareTypeSoftwareAddon?.count && - dataSoftwareTypeSoftwareAddon?.count !== 0 && - dataInitiatieven.push({ - title: "Component (Deel van toepassing)", - value: dataSoftwareTypeSoftwareAddon?.count ?? 0, - color: "#12239e", - filter: "softwareAddon", - }); - - dataSoftwareTypeAPI?.count && - dataSoftwareTypeAPI?.count !== 0 && - dataInitiatieven.push({ - title: "Standaard", - value: dataSoftwareTypeAPI?.count ?? 0, - color: "#e66c37", - filter: "api", - }); - - const dataRating: any[] = []; - - dataRatingBronze?.count && - dataRatingBronze?.count !== 0 && - dataRating.push({ - title: t("Bronze"), - value: dataRatingBronze?.count ?? 0, - color: "#a97142", - filter: "exact1", - }); - - dataRatingSilver?.count && - dataRatingSilver?.count !== 0 && - dataRating.push({ - title: t("Silver"), - value: dataRatingSilver?.count ?? 0, - color: "#bcc6cc", - filter: "exact2", + const dataSoftwareTypeNoStandalone = getStatistics.data.softwareType.filter((option: any) => { + return !option._id.includes("standalone"); + }); + const dataSoftwareTypes = [dataSoftwareTypeStandalone, ...dataSoftwareTypeNoStandalone]; + const dataInitiatieven: any[] = dataSoftwareTypes.map((option: any) => { + const getTitle = (id: string) => { + switch (id) { + case "standalone": + return "Toepassing"; + case "softwareAddon": + return "Component"; + case "api": + return "Standaard"; + } + }; + const color = initiatievenLegend.find((_option) => { + return _option.title === getTitle(option._id); }); + return { + title: getTitle(option._id), + value: option.count ?? 0, + color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, + filter: option._id, + }; + }); - dataRatingGold?.count && - dataRatingGold?.count !== 0 && - dataRating.push({ - title: t("Gold"), - value: dataRatingGold?.count ?? 0, - color: "#d4af37", - filter: "exact3", + const sortRatingList = [1, 2, 3]; + const sortedRatings = getStatistics.data["embedded.nl.embedded.commonground.rating"].sort((a: any, b: any) => { + return sortRatingList.indexOf(a._id) - sortRatingList.indexOf(b._id); + }); + const dataRating: any[] = sortedRatings.map((option: any) => { + const getTitle = (id: number) => { + switch (id) { + case 1: + return t("Bronze"); + case 2: + return t("Silver"); + case 3: + return t("Gold"); + } + }; + const color = RatingLegend.find((_option) => { + return _option.title === getTitle(option._id); }); + return { + title: getTitle(option._id), + value: option.count ?? 0, + color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, + filter: `exact${option._id}`, + }; + }); const dataDomein: any[] = getStatistics.isSuccess && @@ -275,51 +182,21 @@ export const CommongroundCartsTemplate: React.FC = () => { }; }); - const dataLayer: any[] = []; - dataLayersInterface?.count && - dataLayersInterface?.count !== 0 && - dataLayer.push({ - title: t("Interface"), - value: dataLayersInterface?.count ?? 0, - color: "#1a75ff", - filter: "interface", - }); - - dataLayersProcess?.count && - dataLayersProcess?.count !== 0 && - dataLayer.push({ - title: t("Process"), - value: dataLayersProcess?.count ?? 0, - color: "#dd3c49", - filter: "process", - }); - - dataLayersIntegration?.count && - dataLayersIntegration?.count !== 0 && - dataLayer.push({ - title: t("Integration"), - value: dataLayersIntegration?.count ?? 0, - color: "#efc025", - filter: "integration", - }); - - dataLayersService?.count && - dataLayersService?.count !== 0 && - dataLayer.push({ - title: t("Service"), - value: dataLayersService?.count ?? 0, - color: "#69b090", - filter: "service", - }); - - dataLayersData?.count && - dataLayersData?.count !== 0 && - dataLayer.push({ - title: t("Data"), - value: dataLayersData?.count ?? 0, - color: "#7a51c8", - filter: "data", + const sortLayerList = ["interface", "process", "integration", "service", "data"]; + const sortedLayers = getStatistics.data["embedded.nl.embedded.commonground.layerType"].sort((a: any, b: any) => { + return sortLayerList.indexOf(a._id) - sortLayerList.indexOf(b._id); + }); + const dataLayer: any[] = sortedLayers.map((option: any) => { + const color = LayerLegend.find((_option) => { + return _option.title === t(_.upperFirst(option._id)); }); + return { + title: t(_.upperFirst(option._id)), + value: option.count ?? 0, + color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, + filter: option._id, + }; + }); const dataOrganization: any[] = getStatistics.isSuccess && @@ -342,67 +219,9 @@ export const CommongroundCartsTemplate: React.FC = () => { setDataOrganization(dataOrganization); }, [getStatistics.isSuccess]); - const convertDataOntwikkelingsfases = (data: any): dataProps[] => { - return data.map((entry: dataProps, i: number) => { - if (hoveredOntwikkelingsfases === i) { - return { - ...entry, - color: "grey", - }; - } - return entry; - }); - }; - const convertDataInitiatieven = (data: any): dataProps[] => { - return data.map((entry: dataProps, i: number) => { - if (hoveredInitiatieven === i) { - return { - ...entry, - color: "grey", - }; - } - return entry; - }); - }; - const convertDataRating = (data: any): dataProps[] => { - return data.map((entry: dataProps, i: number) => { - if (hoveredRating === i) { - return { - ...entry, - color: "grey", - }; - } - return entry; - }); - }; - - const convertDataDomein = (data: any): dataProps[] => { - return data.map((entry: dataProps, i: number) => { - if (hoveredDomein === i) { - return { - ...entry, - color: "grey", - }; - } - return entry; - }); - }; - - const convertDataLayer = (data: any): dataProps[] => { - return data.map((entry: dataProps, i: number) => { - if (hoveredLayer === i) { - return { - ...entry, - color: "grey", - }; - } - return entry; - }); - }; - - const convertDataOrganization = (data: any): dataProps[] => { + const convertHover = (data: any, index: number | undefined): dataProps[] => { return data.map((entry: dataProps, i: number) => { - if (hoveredOrganization === i) { + if (index === i) { return { ...entry, color: "grey", @@ -424,7 +243,7 @@ export const CommongroundCartsTemplate: React.FC = () => { {getStatistics.isSuccess && (
{ navigate("/components"); }} onMouseOver={(_, index) => { - setHoveredOntwikkelingsfases(index); + setHovered({ ontwikkelingsfases: index }); }} onMouseOut={() => { - setHoveredOntwikkelingsfases(undefined); + setHovered({ ontwikkelingsfases: undefined }); }} startAngle={270} />
- {ontwikkelingsfasesLegend.map((option: any) => ( -
+ {ontwikkelingsfasesLegend.map((option: any, idx: number) => ( +
{" "} { {getStatistics.isSuccess && (
{ navigate("/components"); }} onMouseOver={(_, index) => { - setHoveredInitiatieven(index); + setHovered({ initiatieven: index }); }} onMouseOut={() => { - setHoveredInitiatieven(undefined); + setHovered({ initiatieven: undefined }); }} startAngle={270} />
- {initiatievenLegend.map((option: any) => ( -
+ {initiatievenLegend.map((option: any, idx: number) => ( +
{" "} { {getStatistics.isSuccess && (
{ navigate("/components"); }} onMouseOver={(_, index) => { - setHoveredRating(index); + setHovered({ rating: index }); }} onMouseOut={() => { - setHoveredRating(undefined); + setHovered({ rating: undefined }); }} startAngle={270} />
- {RatingLegend.map((option: any) => ( -
+ {RatingLegend.map((option: any, idx: number) => ( +
{" "} { {getStatistics.isSuccess && (
{ navigate("/components"); }} onMouseOver={(_, index) => { - setHoveredDomein(index); + setHovered({ domein: index }); }} onMouseOut={() => { - setHoveredDomein(undefined); + setHovered({ domein: undefined }); }} startAngle={270} />
- {dataDomein.map((option: any) => ( -
+ {dataDomein.map((option: any, idx: number) => ( +
{" "} { {getStatistics.isSuccess && (
{ navigate("/components"); }} onMouseOver={(_, index) => { - setHoveredLayer(index); + setHovered({ layer: index }); }} onMouseOut={() => { - setHoveredLayer(undefined); + setHovered({ layer: undefined }); }} startAngle={270} />
- {LayerLegend.map((option: any) => ( -
+ {LayerLegend.map((option: any, idx: number) => ( +
{" "} { {getStatistics.isSuccess && (
{ navigate("/components"); }} onMouseOver={(_, index) => { - setHoveredOrganization(index); + setHovered({ organization: index }); }} onMouseOut={() => { - setHoveredOrganization(undefined); + setHovered({ organization: undefined }); }} startAngle={270} />
- {dataOrganization.map((option: any) => ( -
+ {dataOrganization.map((option: any, idx: number) => ( +
{" "} Date: Tue, 30 Apr 2024 15:59:42 +0200 Subject: [PATCH 3/3] added requested changes --- pwa/src/templates/charts/CommongroundChartsTemplate.tsx | 2 +- pwa/src/templates/landing/LandingTemplate.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx index ef4b53d7..b3406733 100644 --- a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx +++ b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx @@ -29,7 +29,7 @@ interface hoverProps { organization?: number | undefined; } -export const CommongroundCartsTemplate: React.FC = () => { +export const CommongroundChartsTemplate: React.FC = () => { const { t } = useTranslation(); const { setFilters } = useFiltersContext(); const { pagination, setPagination } = usePaginationContext(); diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx index 1528167f..e6fed099 100644 --- a/pwa/src/templates/landing/LandingTemplate.tsx +++ b/pwa/src/templates/landing/LandingTemplate.tsx @@ -11,7 +11,7 @@ import { IDisplaySwitchButton } from "@conduction/components/lib/components/disp import { Heading, Separator } from "@utrecht/component-library-react/dist/css-module"; import { MarkdownContentTemplate } from "../markdown/MarkdownContentTemplate"; import { useTranslation } from "react-i18next"; -import { CommongroundCartsTemplate } from "../charts/CommongroundChartsTemplate"; +import { CommongroundChartsTemplate } from "../charts/CommongroundChartsTemplate"; interface LandingTemplateProps { params: any; @@ -48,7 +48,7 @@ export const LandingTemplate: React.FC = ({ params }) => { return ( - {window.sessionStorage.getItem("COMMONGROUND_CHARTS") === "true" && } + {window.sessionStorage.getItem("COMMONGROUND_CHARTS") === "true" && } {window.sessionStorage.getItem("OPTIONAL_START_PAGE") && window.sessionStorage.getItem("OPTIONAL_START_PAGE") !== "false" && window.sessionStorage.getItem("OPTIONAL_START_PAGE") !== undefined && (