Merge pull request #231 from mobeigi/improve-git-contribition-graph

Improve git contribution graph
mobeigi · Feb 3, 2025 · 91e796d · 91e796d
2 parents 834526f + 0be512e
commit 91e796d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 11 deletions.
diff --git a/app/src/app/(frontend)/styled.ts b/app/src/app/(frontend)/styled.ts
@@ -25,7 +25,6 @@ export const Main = styled.main`
 `;
 
 export const MainContents = styled.div`
-  // display: flex;
   width: 100%;
   max-width: var(--max-layout-width);
 

diff --git a/app/src/components/BaseTooltip/styled.ts b/app/src/components/BaseTooltip/styled.ts
@@ -5,12 +5,15 @@ import { Tooltip } from 'react-tooltip';
 import zIndex from '@/styles/zindex';
 
 export const BaseTooltipWrapper = styled.div`
-  // Set desired z-index
+  /* Set desired z-index */
   z-index: ${zIndex.tooltip};
 
-  // Make tooltips position fixed
-  // Has to be applied to wrapper div around tooltip
-  // This also fixes some flickering issues when focusing from one tooltip directly to another one that is wide on mobile
+  /* 
+   * Make tooltips position fixed
+   * Has to be applied to wrapper div around tooltip
+   * This also fixes some flickering issues when focusing 
+   * from one tooltip directly to another one that is wide on mobile
+   */
   position: fixed;
 
   & .rt-theme-dark {
@@ -25,7 +28,7 @@ export const BaseTooltipWrapper = styled.div`
 `;
 
 export const StyledTooltip = styled(Tooltip)`
-  // This ensures the tooltip contents are never bigger than the viewport itself
+  /* This ensures the tooltip contents are never bigger than the viewport itself */
   max-width: 90vw;
   max-height: 90vh;
 `;
diff --git a/app/src/components/GitContributionGraph/GitContributionGraph.tsx b/app/src/components/GitContributionGraph/GitContributionGraph.tsx
@@ -12,6 +12,7 @@ import { GitContributionGraphContainer, SpinnerWrapper } from './styled';
 
 import * as echarts from 'echarts/core';
 import type { CallbackDataParams } from 'echarts/types/src/util/types.js';
+import type { CalendarOption } from 'echarts/types/dist/shared.js';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { HeatmapChart } from 'echarts/charts';
 import { TooltipComponent, VisualMapComponent, CalendarComponent } from 'echarts/components';
@@ -20,6 +21,7 @@ import { SVGRenderer } from 'echarts/renderers';
 echarts.use([HeatmapChart, TooltipComponent, VisualMapComponent, CalendarComponent, SVGRenderer]);
 
 const tooltipId = 'git-contribution-graph-tooltip';
+type CalendarMonthLabelFormatter = Exclude<NonNullable<CalendarOption['monthLabel']>['formatter'], string | undefined>;
 
 export const GitContributionGraph = ({ data }: GitContributionGraphProps) => {
   const [isLoaded, setIsLoaded] = useState(false);
@@ -39,6 +41,9 @@ export const GitContributionGraph = ({ data }: GitContributionGraphProps) => {
   const startDate = data[0][0];
   const endDate = data[data.length - 1][0];
 
+  // Memoize formatter to prevent re-renders which can slow down chart
+  const monthLabelFormatter = useCallback<CalendarMonthLabelFormatter>((value) => `{padded|${value.nameMap}}`, []);
+
   const option: echarts.EChartsCoreOption = {
     backgroundColor: 'transparent', // avoid darkMode theme background colour
     tooltip: { show: false },
@@ -50,7 +55,7 @@ export const GitContributionGraph = ({ data }: GitContributionGraphProps) => {
         color:
           resolvedThemeMode === ThemeMode.Dark
             ? ['#3a2e2f', '#5e2f33', '#84373a', '#af3a3d', '#fb4d56']
-            : ['#ffe5e7', '#ffb7bb', '#ff8a91', '#ff5c66', '#fb4d56'],
+            : ['#e8d6d8', '#ffb7bb', '#ff8a91', '#ff5c66', '#fb4d56'],
       },
       type: 'piecewise',
       splitNumber: 5,
@@ -67,8 +72,19 @@ export const GitContributionGraph = ({ data }: GitContributionGraphProps) => {
         color: 'transparent',
       },
       dayLabel: {
+        silent: true,
         nameMap: ['', 'Mon', '', 'Wed', '', 'Fri', ''],
       },
+      monthLabel: {
+        silent: true,
+        align: 'left',
+        rich: {
+          padded: {
+            padding: [0, 0, 0, 2], // Simulate margin
+          },
+        },
+        formatter: monthLabelFormatter,
+      },
       yearLabel: { show: false },
       splitLine: { show: false },
     },

diff --git a/app/src/components/GitContributionGraph/styled.ts b/app/src/components/GitContributionGraph/styled.ts
@@ -6,6 +6,9 @@ export const GitContributionGraphContainer = styled.div`
   display: flex;
   width: 100%;
   height: 165px;
+
+  /* Hide tap highlight in webkit browsers on mobile */
+  -webkit-tap-highlight-color: transparent;
 `;
 
 export const SpinnerWrapper = styled.div`

diff --git a/app/src/components/HeaderContent/DarkModeSwitchContainer/styled.ts b/app/src/components/HeaderContent/DarkModeSwitchContainer/styled.ts
@@ -6,7 +6,7 @@ export const DarkModeSwitchWrapper = styled.div`
   display: flex;
   justify-content: center;
 
-  // Prevent button from triggering clicks as we will programatially call it
+  /* Prevent button from triggering clicks as we will programatially call it */
   pointer-events: none;
 
   button:focus,

diff --git a/app/src/containers/BlogPost/styled.ts b/app/src/containers/BlogPost/styled.ts
@@ -16,7 +16,7 @@ export const BlogPostArticle = styled.article`
   width: 100%;
   gap: 1em;
 
-  // Media
+  /* Media */
   & img {
     display: block;
     margin: 0 auto;
@@ -36,7 +36,7 @@ export const BlogPostArticle = styled.article`
     border-radius: 0.2em;
   }
 
-  // Tables
+  /* Tables */
   & table {
     margin: 0 auto;
     width: 100%;
@@ -48,7 +48,7 @@ export const BlogPostArticle = styled.article`
     }
   }
 
-  // Embeds
+  /* Embeds */
   & iframe {
     display: block;
     margin: 0 auto;