From bafc7d7c594c3b80a7279e8ef76470862ea99472 Mon Sep 17 00:00:00 2001 From: Bjarke Madsen <bjarke@nordu.net> Date: Wed, 24 May 2023 16:50:03 +0200 Subject: [PATCH] Use the ChartJS font config in generated legends --- webapp/src/components/DataPage.tsx | 6 +++--- webapp/src/plugins/HTMLLegendPlugin.ts | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx index 04619c32..166c6710 100644 --- a/webapp/src/components/DataPage.tsx +++ b/webapp/src/components/DataPage.tsx @@ -9,9 +9,9 @@ import SectionNavigation from "./SectionNavigation"; import { Sections } from "../helpers/constants"; import PolicySidebar from "./PolicySidebar"; -import { Chart as ChartJS} from 'chart.js'; +import { Chart as ChartJS } from 'chart.js'; -ChartJS.defaults.font.size = 18; +ChartJS.defaults.font.size = 16; ChartJS.defaults.font.family = 'Open Sans'; ChartJS.defaults.font.weight = '700'; @@ -23,7 +23,7 @@ interface inputProps { category: Sections } -function DataPage({ title,description, filter, children, category }: inputProps): ReactElement { +function DataPage({ title, description, filter, children, category }: inputProps): ReactElement { return ( <> {category === Sections.Organisation && <OrganizationSidebar />} diff --git a/webapp/src/plugins/HTMLLegendPlugin.ts b/webapp/src/plugins/HTMLLegendPlugin.ts index 909ca5d5..04ea7f75 100644 --- a/webapp/src/plugins/HTMLLegendPlugin.ts +++ b/webapp/src/plugins/HTMLLegendPlugin.ts @@ -1,3 +1,5 @@ +import { Chart as ChartJS} from 'chart.js'; + const getOrCreateLegendList = (chart, id) => { const legendContainer = document.getElementById(id); if (!legendContainer) { @@ -72,6 +74,9 @@ const htmlLegendPlugin = { textContainer.style.margin = '0'; textContainer.style.padding = '0'; textContainer.style.textDecoration = item.hidden ? 'line-through' : ''; + textContainer.style.fontSize = `${ChartJS.defaults.font.size}px`; + textContainer.style.fontFamily = `${ChartJS.defaults.font.family}`; + textContainer.style.fontWeight = `${ChartJS.defaults.font.weight}`; const text = document.createTextNode(item.text); textContainer.appendChild(text); -- GitLab