feat: update all fonts across site to match those used in jenkins.io (#…

…66) * lp refresh * landing page edit * landing page edit * changin fonts to monospace * lp * lp * use monospace across site * update buttons * update buttons no gradient * update font to match jenkins.io * change fonts across site to match jenkins.io * merge main --------- Co-authored-by: Kris Stern <[email protected]>
jenkins-infra · Jul 1, 2024 · cd072b8 · cd072b8
1 parent 52ca340
commit cd072b8
Show file tree

Hide file tree

Showing 20 changed files with 124 additions and 31 deletions.
diff --git a/src/components/PluginTrends/Charts/PluginInstallationsChart.tsx b/src/components/PluginTrends/Charts/PluginInstallationsChart.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo } from 'react'
 import * as echarts from 'echarts'
 import dayjs from 'dayjs'
 import { PluginChartProps } from '../../../data/plugins'
+import customTheme from '../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 const PluginInstallationsChart: React.FC<PluginChartProps> = ({ data }) => {
     const chartRef = useRef<HTMLDivElement | null>(null)
@@ -126,7 +129,7 @@ const PluginInstallationsChart: React.FC<PluginChartProps> = ({ data }) => {
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/PluginTrends/Charts/PluginInstallationsPerVersionChart.tsx b/src/components/PluginTrends/Charts/PluginInstallationsPerVersionChart.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo } from 'react'
 import * as echarts from 'echarts'
 import { PluginChartProps } from '../../../data/plugins'
 import dayjs from 'dayjs'
+import customTheme from '../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 const PluginInstallationsPerVersion: React.FC<PluginChartProps> = ({ data }) => {
     const chartRef = useRef(null)
@@ -126,7 +129,7 @@ const PluginInstallationsPerVersion: React.FC<PluginChartProps> = ({ data }) =>
     useEffect(() => {
         if (!chartRef.current) return
 
-        const chart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const chart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         chart.setOption(option)
 
         const handleResize = () => {

diff --git a/src/components/PluginTrends/Charts/PluginInstallationsPercentageChart.tsx b/src/components/PluginTrends/Charts/PluginInstallationsPercentageChart.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo } from 'react'
 import * as echarts from 'echarts'
 import dayjs from 'dayjs'
 import { PluginChartProps } from '../../../data/plugins'
+import customTheme from '../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 const PluginInstallationsPercentageChart: React.FC<PluginChartProps> = ({ data }) => {
     const chartRef = useRef<HTMLDivElement | null>(null)
@@ -202,7 +205,7 @@ const PluginInstallationsPercentageChart: React.FC<PluginChartProps> = ({ data }
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/PluginTrends/Charts/PluginInstallationsPercentagePerVersionPieChart.tsx b/src/components/PluginTrends/Charts/PluginInstallationsPercentagePerVersionPieChart.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo } from 'react'
 import * as echarts from 'echarts'
 import dayjs from 'dayjs'
 import { PluginChartProps } from '../../../data/plugins'
+import customTheme from '../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 const PluginInstallationsPercentagePerVersionChart: React.FC<PluginChartProps> = ({ data }) => {
     const chartRef = useRef(null)
@@ -92,7 +95,7 @@ const PluginInstallationsPercentagePerVersionChart: React.FC<PluginChartProps> =
     useEffect(() => {
         if (!chartRef.current) return
 
-        const chart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const chart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         chart.setOption(option)
 
         const handleResize = () => {

diff --git a/src/components/PluginTrends/Layout/PluginCard.tsx b/src/components/PluginTrends/Layout/PluginCard.tsx
@@ -45,7 +45,7 @@ const PluginCard: React.FC<PluginCardProps> = ({ plugin }) => {
                     <CardContent>
                         <Typography
                             sx={{
-                                fontSize: '1.2rem',
+                                fontSize: '1rem',
                                 textAlign: 'center',
                                 textOverflow: 'ellipsis',
                                 overflow: 'hidden',
@@ -59,15 +59,15 @@ const PluginCard: React.FC<PluginCardProps> = ({ plugin }) => {
                         </Typography>
                         <Box display="flex" alignItems="center" justifyContent="center" marginBottom="1rem">
                             <img src={downloadIcon} alt="Downloads" width={20} height={20} />
-                            <Typography variant="subtitle1" component="div" marginLeft={1}>
+                            <Typography component="div" marginLeft={1}>
                                 {totalInstallationsK}
                             </Typography>
                         </Box>
                         <CardMedia>
                             {plugin.chartData ? (
                                 <PluginCardChart data={plugin.chartData} />
                             ) : (
-                                <Typography variant="body2" color="textSecondary" align="center">
+                                <Typography color="textSecondary" align="center">
                                     No Data Available
                                 </Typography>
                             )}

diff --git a/src/components/PluginTrends/Layout/PluginDetailModal.tsx b/src/components/PluginTrends/Layout/PluginDetailModal.tsx
@@ -81,6 +81,7 @@ const PluginDetailModal: React.FC<PluginDetailModalProps> = ({ open, handleClose
                                     sx={{
                                         fontSize: '1.25rem',
                                         fontWeight: 'bold',
+                                        fontFamily: 'Monospace',
                                     }}
                                 >
                                     {plugin.chartData.name}

diff --git a/src/components/StatsInDetail/Charts/JVMChart.tsx b/src/components/StatsInDetail/Charts/JVMChart.tsx
@@ -2,7 +2,9 @@ import React, { useEffect, useMemo } from 'react'
 import { Typography } from '@mui/material'
 import * as echarts from 'echarts'
 import useJVMData from '../../../hooks/useJVMData'
+import customTheme from '../../../theme/customTheme'
 
+echarts.registerTheme('customTheme', customTheme)
 interface JVMChartProps {
     title: string
     width?: string
@@ -53,7 +55,7 @@ const JVMChart: React.FC<JVMChartProps> = ({ title, width = '100%', height = '10
                 axisLabel: { showMinLabel: false, fontSize: 12, align: 'middle' },
                 nameTextStyle: {
                     fontSize: 12,
-                    padding: [30, 30, 10, 0],
+                    padding: [0, 0, 10, 0],
                 },
             },
             grid: { left: '0', right: '10', bottom: '20', top: '90', containLabel: true },
@@ -93,7 +95,7 @@ const JVMChart: React.FC<JVMChartProps> = ({ title, width = '100%', height = '10
         if (!data) return
 
         const chartDom = document.getElementById('jvm-chart') as HTMLElement
-        const myChart = echarts.init(chartDom, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartDom, 'customTheme', { renderer: 'svg' })
         myChart.setOption(chartOptions)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Jenkins.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Jenkins.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 interface JenkinsGraphProps {
     year: string
@@ -106,7 +109,7 @@ const JenkinsGraph: React.FC<JenkinsGraphProps> = ({ year, month }) => {
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Jobs.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Jobs.tsx
@@ -2,12 +2,15 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme.ts'
 
 interface JobsGraphProps {
     year: string
     month: string
 }
 
+echarts.registerTheme('customTheme', customTheme)
+
 const JobsGraph: React.FC<JobsGraphProps> = ({ year, month }) => {
     const chartRef = useRef<HTMLDivElement | null>(null)
     const csvPath = `https://raw.githubusercontent.com/jenkins-infra/infra-statistics/gh-pages/jenkins-stats/svg/${year}${month}-jobs.csv`
@@ -63,7 +66,7 @@ const JobsGraph: React.FC<JobsGraphProps> = ({ year, month }) => {
                 axisTick: { show: true },
                 name: `Job Type (${xData.length.toLocaleString()} Jobs)`,
                 nameLocation: 'middle',
-                nameGap: 80,
+                nameGap: 95,
                 nameTextStyle: { fontWeight: 'bold' },
             },
             yAxis: {
@@ -110,14 +113,14 @@ const JobsGraph: React.FC<JobsGraphProps> = ({ year, month }) => {
                     },
                 },
             },
-            grid: { left: '20', right: '30', bottom: '75', top: '60', containLabel: true },
+            grid: { left: '20', right: '30', bottom: '85', top: '60', containLabel: true },
         }
     }, [title, totalSum, xData, yData, downloadCSV])
 
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Nodes.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Nodes.tsx
@@ -2,7 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
 
+echarts.registerTheme('customTheme', customTheme)
 interface NodesGraphProps {
     year: string
     month: string
@@ -62,7 +64,7 @@ const NodesGraph: React.FC<NodesGraphProps> = ({ year, month }) => {
                 axisTick: { show: true },
                 name: `Node Type (${xData.length.toLocaleString()} Nodes)`,
                 nameLocation: 'middle',
-                nameGap: 90,
+                nameGap: 95,
                 nameTextStyle: { fontWeight: 'bold' },
             },
             yAxis: {
@@ -116,7 +118,7 @@ const NodesGraph: React.FC<NodesGraphProps> = ({ year, month }) => {
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/NodesPie.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/NodesPie.tsx
@@ -2,7 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
 
+echarts.registerTheme('customTheme', customTheme)
 interface NodesPieProps {
     year: string
     month: string
@@ -101,7 +103,7 @@ const NodesPie: React.FC<NodesPieProps> = ({ year, month }) => {
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Plugins.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Plugins.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 interface PluginsGraphProps {
     year: string
@@ -63,7 +66,7 @@ const PluginsGraph: React.FC<PluginsGraphProps> = ({ year, month }) => {
                 //set name to Plugin Name and the total number of items in the x axis
                 name: `Plugin Name (${xData.length.toLocaleString()} Plugins)`,
                 nameLocation: 'middle',
-                nameGap: 85,
+                nameGap: 100,
                 nameTextStyle: { fontWeight: 'bold' },
             },
             yAxis: {
@@ -110,14 +113,14 @@ const PluginsGraph: React.FC<PluginsGraphProps> = ({ year, month }) => {
                     },
                 },
             },
-            grid: { left: '25', right: '30', bottom: '75', top: '60', containLabel: true },
+            grid: { left: '25', right: '30', bottom: '85', top: '60', containLabel: true },
         }
     }, [title, totalSum, xData, yData, downloadCSV])
 
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Plugins1000.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Plugins1000.tsx
@@ -2,7 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
 
+echarts.registerTheme('customTheme', customTheme)
 interface PluginsGraph1000Props {
     year: string
     month: string
@@ -67,7 +69,7 @@ const PluginsGraph1000: React.FC<PluginsGraph1000Props> = ({ year, month }) => {
                 axisTick: { show: true },
                 name: `Plugin Name (${xData.length.toLocaleString()} plugins)`,
                 nameLocation: 'middle',
-                nameGap: 85,
+                nameGap: 95,
                 nameTextStyle: { fontWeight: 'bold' },
             },
             yAxis: {
@@ -114,14 +116,14 @@ const PluginsGraph1000: React.FC<PluginsGraph1000Props> = ({ year, month }) => {
                     },
                 },
             },
-            grid: { left: '20', right: '30', bottom: '75', top: '60', containLabel: true },
+            grid: { left: '20', right: '30', bottom: '85', top: '60', containLabel: true },
         }
     }, [title, totalSum, xData, yData, downloadCSV])
 
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Plugins2500.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Plugins2500.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 interface PluginsGraph2500Props {
     year: string
@@ -67,7 +70,7 @@ const PluginsGraph2500: React.FC<PluginsGraph2500Props> = ({ year, month }) => {
                 axisTick: { show: true },
                 name: `Plugin Name (${xData.length.toLocaleString()} plugins)`,
                 nameLocation: 'middle',
-                nameGap: 85,
+                nameGap: 95,
                 nameTextStyle: { fontWeight: 'bold' },
             },
             yAxis: {
@@ -114,14 +117,14 @@ const PluginsGraph2500: React.FC<PluginsGraph2500Props> = ({ year, month }) => {
                     },
                 },
             },
-            grid: { left: '20', right: '30', bottom: '75', top: '60', containLabel: true },
+            grid: { left: '20', right: '30', bottom: '85', top: '60', containLabel: true },
         }
     }, [title, totalSum, xData, yData, downloadCSV])
 
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()

diff --git a/src/components/StatsInDetail/Charts/ModalGraphs/Plugins500.tsx b/src/components/StatsInDetail/Charts/ModalGraphs/Plugins500.tsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import * as echarts from 'echarts'
 import useCSVData from '../../../../hooks/useCSVData'
 import { handleCSVDownload } from '../../../../utils/csvUtils'
+import customTheme from '../../../../theme/customTheme'
+
+echarts.registerTheme('customTheme', customTheme)
 
 interface PluginsGraph500Props {
     year: string
@@ -67,7 +70,7 @@ const PluginsGraph500: React.FC<PluginsGraph500Props> = ({ year, month }) => {
                 axisTick: { show: true },
                 name: `Plugin Name (${xData.length.toLocaleString()} plugins)`,
                 nameLocation: 'middle',
-                nameGap: 85,
+                nameGap: 95,
                 nameTextStyle: { fontWeight: 'bold' },
             },
             yAxis: {
@@ -114,14 +117,14 @@ const PluginsGraph500: React.FC<PluginsGraph500Props> = ({ year, month }) => {
                     },
                 },
             },
-            grid: { left: '20', right: '30', bottom: '75', top: '60', containLabel: true },
+            grid: { left: '20', right: '30', bottom: '85', top: '60', containLabel: true },
         }
     }, [title, totalSum, xData, yData, downloadCSV])
 
     useEffect(() => {
         if (!chartRef.current) return
 
-        const myChart = echarts.init(chartRef.current, null, { renderer: 'svg' })
+        const myChart = echarts.init(chartRef.current, 'customTheme', { renderer: 'svg' })
         myChart.setOption(option)
 
         const handleResize = () => myChart.resize()