From 6acc022064364eead2c23f78c57b92a001f3b56e Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 1 May 2024 11:50:06 +0200 Subject: [PATCH] updated chart titles and data --- pwa/src/data/filters/softwareType.ts | 1 - pwa/src/services/getStatusColor.ts | 29 +++- pwa/src/styling/global.css | 10 +- .../CommongroundChartsTemplate.module.css | 6 + .../charts/CommongroundChartsTemplate.tsx | 153 +++++++----------- 5 files changed, 94 insertions(+), 105 deletions(-) diff --git a/pwa/src/data/filters/softwareType.ts b/pwa/src/data/filters/softwareType.ts index 4acab240c..57a2ec0c9 100644 --- a/pwa/src/data/filters/softwareType.ts +++ b/pwa/src/data/filters/softwareType.ts @@ -1,5 +1,4 @@ export const softwareTypes = [ - { label: "Standalone", value: "standalone" }, { label: "Standalone Mobile", value: "standalone/mobile" }, { label: "Standalone IoT", value: "standalone/iot" }, { label: "Standalone Desktop", value: "standalone/desktop" }, diff --git a/pwa/src/services/getStatusColor.ts b/pwa/src/services/getStatusColor.ts index 8af70e60c..67318c5e0 100644 --- a/pwa/src/services/getStatusColor.ts +++ b/pwa/src/services/getStatusColor.ts @@ -1,17 +1,42 @@ export const getStatusColor = (status: string): string => { switch (status) { case "Concept": - return "warning"; + return "active"; case "Development": return "warning"; case "Beta": - return "warning"; + return "neutral"; case "Bruikbaar": return "safe"; case "Stable": return "safe"; case "Obsolete": return "danger"; + case "Onbekend": + case "": + return "invalid"; + default: + return ""; + } +}; + +export const getStatusDiagramColor = (status: string): string => { + switch (status) { + case "Concept": + return "#12239e"; + case "Development": + return "#db9600"; + case "Beta": + return "#0077b8"; + case "Bruikbaar": + return "#11a23f"; + case "Stable": + return "#11a23f"; + case "Obsolete": + return "#ce4c3b"; + case "Onbekend": + case "": + return "#000000"; default: return ""; } diff --git a/pwa/src/styling/global.css b/pwa/src/styling/global.css index 080b90b7d..8c64fcb29 100644 --- a/pwa/src/styling/global.css +++ b/pwa/src/styling/global.css @@ -100,8 +100,10 @@ body { --open-catalogi-rating-rating-bar-background-color: #bfbfbf; --web-app-overlay-background: rgba(0, 0, 0, 0.3); --web-app-download-popup-width: 500px; - --utrecht-feedback-safe-fill-background-color: hsla(139, 81%, 35%, 1); - --utrecht-feedback-warning-fill-background-color: hsla(41, 100%, 43%, 1); - --utrecht-feedback-danger-fill-background-color: hsla(7, 60%, 52%, 1); - --utrecht-feedback-neutral-fill-background-color: hsla(201, 100%, 36%, 1); + --utrecht-feedback-safe-fill-background-color: #11a23f; + --utrecht-feedback-warning-fill-background-color: #db9600; + --utrecht-feedback-error-fill-background-color: #ce4c3b; + --utrecht-feedback-neutral-fill-background-color: #0077b8; + --utrecht-feedback-active-fill-background-color: #12239e; + --utrecht-feedback-invalid-fill-background-color: #000000; } diff --git a/pwa/src/templates/charts/CommongroundChartsTemplate.module.css b/pwa/src/templates/charts/CommongroundChartsTemplate.module.css index fa9733027..1291cd08a 100644 --- a/pwa/src/templates/charts/CommongroundChartsTemplate.module.css +++ b/pwa/src/templates/charts/CommongroundChartsTemplate.module.css @@ -28,6 +28,12 @@ user-select: none; } +.legendContainer { + overflow-y: auto; + max-height: 180px; + min-width: 125px; +} + .legend { display: flex; gap: 5px; diff --git a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx index b3406733a..8c608dbb3 100644 --- a/pwa/src/templates/charts/CommongroundChartsTemplate.tsx +++ b/pwa/src/templates/charts/CommongroundChartsTemplate.tsx @@ -13,6 +13,7 @@ import { TOOLTIP_ID } from "../../layout/Layout"; import { navigate } from "gatsby"; import { defaultFiltersContext, useFiltersContext } from "../../context/filters"; import { usePaginationContext } from "../../context/pagination"; +import { getStatusDiagramColor } from "../../services/getStatusColor"; interface dataProps { title: string; @@ -21,9 +22,9 @@ interface dataProps { } interface hoverProps { - ontwikkelingsfases?: number | undefined; - initiatieven?: number | undefined; - domein?: number | undefined; + developementStatus?: number | undefined; + softwareTypes?: number | undefined; + category?: number | undefined; layer?: number | undefined; rating?: number | undefined; organization?: number | undefined; @@ -37,42 +38,22 @@ export const CommongroundChartsTemplate: React.FC = () => { const [hovered, setHovered] = React.useState(); const [showPrecentages, setShowPrecentages] = React.useState(false); - const [dataOntwikkelingsfases, setDataOntwikkelingsfases] = React.useState([]); - const [dataInitiatieven, setDataInitiatieven] = React.useState([]); + const [dataDevelopmentStatus, setDataDevelopmentStatus] = React.useState([]); + const [dataSoftwareTypes, setDataSoftwareTypes] = React.useState([]); const [dataRating, setDataRating] = React.useState([]); - const [dataDomein, setDataDomein] = React.useState([]); + const [dataCategory, setDataCategory] = React.useState([]); const [dataOrganization, setDataOrganization] = React.useState([]); const [dataLayer, setDataLayer] = React.useState([]); const _useFilters = useAvailableFilters(); const getStatistics = _useFilters.getStatistics(); - const getDataSoftwareTypeStandalone = () => { - if (!getStatistics.isSuccess) return; - let sum = 0; - - const filter = getStatistics.data.softwareType.filter((option: any) => { - return option._id.includes("standalone"); - }); - - filter.forEach((element: any) => { - sum += element.count; - }); - - return { _id: "standalone", count: sum }; - }; - - const ontwikkelingsfasesLegend = [ - { title: "Doorontwikkeling en beheer", color: "#118dff" }, - { title: "Opschaling", color: "#12239e" }, - { title: "Realisatie", color: "#e66c37" }, - { title: "Initiatie", color: "#6b007b" }, - ]; - - const initiatievenLegend = [ - { title: "Toepassing", color: "#118dff" }, - { title: "Component", color: "#12239e" }, - { title: "Standaard", color: "#e66c37" }, + const developmentStatusLegend = [ + { title: t("Stable"), color: "#11a23f" }, + { title: t("Beta"), color: "#0077b8" }, + { title: t("Development"), color: "#db9600" }, + { title: t("Concept"), color: "#12239e" }, + { title: t("Obsolete"), color: "#ce4c3b" }, ]; const RatingLegend = [ @@ -92,51 +73,27 @@ export const CommongroundChartsTemplate: React.FC = () => { React.useEffect(() => { if (!getStatistics.isSuccess) return; - 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); - }); + const sortDevelopmentStatusList = ["stable", "bruikbaar", "beta", "development", "concept", "obsolete"]; + const sortedDevelopmentStatus = getStatistics.data.developmentStatus.sort((a: any, b: any) => { + return sortDevelopmentStatusList.indexOf(a._id) - sortDevelopmentStatusList.indexOf(b._id); + }); + const dataDevelopmentStatus: any[] = sortedDevelopmentStatus.map((option: any) => { return { - title: getTitle(option._id), + title: t(_.upperFirst(option._id)), value: option.count ?? 0, - color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, + color: + getStatusDiagramColor(_.upperFirst(option._id)) ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, filter: option._id, }; }); - const dataSoftwareTypeStandalone = getDataSoftwareTypeStandalone(); - 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); + const dataSoftwareTypes: any[] = getStatistics.data.softwareType.map((option: any, idx: number) => { + const color = statisticsColors.find((color) => { + return color.id === idx; }); + return { - title: getTitle(option._id), + title: option._id, value: option.count ?? 0, color: color?.color ?? `#${Math.floor(Math.random() * 16777215).toString(16)}`, filter: option._id, @@ -169,7 +126,7 @@ export const CommongroundChartsTemplate: React.FC = () => { }; }); - const dataDomein: any[] = + const dataCategory: any[] = getStatistics.isSuccess && getStatistics.data.categories.map((option: any, idx: number) => { const color = statisticsColors.find((color) => { @@ -211,10 +168,10 @@ export const CommongroundChartsTemplate: React.FC = () => { }; }); - setDataOntwikkelingsfases(dataOntwikkelingsfases); - setDataInitiatieven(dataInitiatieven); + setDataDevelopmentStatus(dataDevelopmentStatus); + setDataSoftwareTypes(dataSoftwareTypes); setDataRating(dataRating); - setDataDomein(dataDomein); + setDataCategory(dataCategory); setDataLayer(dataLayer); setDataOrganization(dataOrganization); }, [getStatistics.isSuccess]); @@ -239,11 +196,11 @@ export const CommongroundChartsTemplate: React.FC = () => {
- Verdeling over ontwikkelingsfases + Ontwikkelings Status {getStatistics.isSuccess && (
{ onClick={(_, index) => { setFilters({ ...defaultFiltersContext, - developmentStatus: dataOntwikkelingsfases[index].filter, + developmentStatus: dataDevelopmentStatus[index].filter, }); setPagination({ ...pagination, @@ -272,23 +229,23 @@ export const CommongroundChartsTemplate: React.FC = () => { navigate("/components"); }} onMouseOver={(_, index) => { - setHovered({ ontwikkelingsfases: index }); + setHovered({ developementStatus: index }); }} onMouseOut={() => { - setHovered({ ontwikkelingsfases: undefined }); + setHovered({ developementStatus: undefined }); }} startAngle={270} />
- {ontwikkelingsfasesLegend.map((option: any, idx: number) => ( + {developmentStatusLegend.map((option: any, idx: number) => (
{" "} - {option.title} + {_.upperFirst(option.title)}
))} @@ -299,11 +256,11 @@ export const CommongroundChartsTemplate: React.FC = () => {
- Verdeling type initiatieven + Software Types {getStatistics.isSuccess && (
{ onClick={(_, index) => { setFilters({ ...defaultFiltersContext, - softwareType: dataInitiatieven[index].filter, + softwareType: dataSoftwareTypes[index].filter, }); setPagination({ ...pagination, @@ -332,15 +289,15 @@ export const CommongroundChartsTemplate: React.FC = () => { navigate("/components"); }} onMouseOver={(_, index) => { - setHovered({ initiatieven: index }); + setHovered({ softwareTypes: index }); }} onMouseOut={() => { - setHovered({ initiatieven: undefined }); + setHovered({ softwareTypes: undefined }); }} startAngle={270} />
- {initiatievenLegend.map((option: any, idx: number) => ( + {dataSoftwareTypes.map((option: any, idx: number) => (
{" "} {
- Verdeling CG portfoliofases + Common Ground Beoordeling {getStatistics.isSuccess && (
{
- Verdeling per domein + {t("Category")} {getStatistics.isSuccess && (
{ onClick={(_, index) => { setFilters({ ...defaultFiltersContext, - category: dataDomein[index].title, + category: dataCategory[index].title, }); setPagination({ ...pagination, @@ -452,15 +409,15 @@ export const CommongroundChartsTemplate: React.FC = () => { navigate("/components"); }} onMouseOver={(_, index) => { - setHovered({ domein: index }); + setHovered({ category: index }); }} onMouseOut={() => { - setHovered({ domein: undefined }); + setHovered({ category: undefined }); }} startAngle={270} /> -
- {dataDomein.map((option: any, idx: number) => ( +
+ {dataCategory.map((option: any, idx: number) => (
{" "} { {getStatistics.isLoading && }
- Verdeling per laag + Architectuurlaag {getStatistics.isSuccess && (
{ {getStatistics.isLoading && }
- Verdeling per organisatie + Organisatie {getStatistics.isSuccess && (
{ }} startAngle={270} /> -
+
{dataOrganization.map((option: any, idx: number) => (
{" "}