From e81ab0a5ea37b248e2a65215e2b6025c00a15f25 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 7 Aug 2026 14:38:31 +0200
Subject: [PATCH] refactor: prepare vue components for vapor mode (#38798)

Removes what would block a later switch to Vue's vapor mode:
`vue-chartjs` and the `SvgIcon` render function are virtual DOM
components, and `v-memo` has no vapor equivalent. This does not adopt
vapor mode, which will be stable in upcoming Vue 3.6.

`vue-chartjs` was a thin wrapper over chart.js, so a local
`ChartCanvas.vue` replaces it. Chart data and options move into computed
values to keep their object identity, which is what `v-memo` was
compensating for.

`chartjs-adapter-dayjs-4` is moved first-party, just ~40 lines that are
easy to maintain.
---
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 29 --------
 web_src/js/components/ActionRunJobView.vue    |  2 +-
 web_src/js/components/ActionStatusIcon.vue    |  2 +-
 web_src/js/components/ChartCanvas.vue         | 71 +++++++++++++++++++
 web_src/js/components/ContextPopup.vue        |  2 +-
 web_src/js/components/DashboardRepoList.vue   |  2 +-
 web_src/js/components/DiffCommitSelector.vue  |  2 +-
 web_src/js/components/DiffFileTreeItem.vue    |  3 +-
 .../js/components/PullRequestMergeForm.vue    |  2 +-
 web_src/js/components/RepoActionView.vue      |  2 +-
 .../js/components/RepoBranchTagSelector.vue   |  2 +-
 web_src/js/components/RepoCodeFrequency.vue   | 24 +++----
 web_src/js/components/RepoContributors.vue    | 49 +++++++------
 web_src/js/components/RepoFileSearch.vue      |  2 +-
 web_src/js/components/RepoRecentCommits.vue   | 24 +++----
 web_src/js/components/SvgIcon.test.ts         | 10 +++
 web_src/js/components/SvgIcon.vue             | 37 ++++++++++
 web_src/js/components/ViewFileTreeItem.vue    |  2 +-
 web_src/js/components/WorkflowGraph.vue       |  2 +-
 web_src/js/svg.test.ts                        | 14 +---
 web_src/js/svg.ts                             | 36 +---------
 22 files changed, 178 insertions(+), 145 deletions(-)
 create mode 100644 web_src/js/components/ChartCanvas.vue
 create mode 100644 web_src/js/components/SvgIcon.test.ts
 create mode 100644 web_src/js/components/SvgIcon.vue

diff --git a/package.json b/package.json
index 231ea7adfe7..69342bdb0f2 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "@vitejs/plugin-vue": "6.0.8",
     "asciinema-player": "3.17.0",
     "chart.js": "4.5.1",
-    "chartjs-adapter-dayjs-4": "1.0.4",
     "chartjs-plugin-zoom": "2.2.0",
     "clippie": "4.2.1",
     "codemirror-lang-elixir": "4.0.1",
@@ -66,8 +65,7 @@
     "vanilla-colorful": "0.7.2",
     "vite": "8.1.5",
     "vite-string-plugin": "2.0.5",
-    "vue": "3.5.40",
-    "vue-chartjs": "5.3.4"
+    "vue": "3.5.40"
   },
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "4.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cbe15f31cfc..cf171d3e0db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -101,9 +101,6 @@ importers:
       chart.js:
         specifier: 4.5.1
         version: 4.5.1
-      chartjs-adapter-dayjs-4:
-        specifier: 1.0.4
-        version: 1.0.4(chart.js@4.5.1)(dayjs@1.11.21)
       chartjs-plugin-zoom:
         specifier: 2.2.0
         version: 2.2.0(chart.js@4.5.1)
@@ -191,9 +188,6 @@ importers:
       vue:
         specifier: 3.5.40
         version: 3.5.40(typescript@6.0.3)
-      vue-chartjs:
-        specifier: 5.3.4
-        version: 5.3.4(chart.js@4.5.1)(vue@3.5.40(typescript@6.0.3))
     devDependencies:
       '@eslint-community/eslint-plugin-eslint-comments':
         specifier: 4.7.2
@@ -1834,13 +1828,6 @@ packages:
     resolution: {integrity: sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==}
     engines: {pnpm: '>=8'}
 
-  chartjs-adapter-dayjs-4@1.0.4:
-    resolution: {integrity: sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      chart.js: '>=4.0.1'
-      dayjs: ^1.9.7
-
   chartjs-plugin-zoom@2.2.0:
     resolution: {integrity: sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==}
     peerDependencies:
@@ -4303,12 +4290,6 @@ packages:
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
-  vue-chartjs@5.3.4:
-    resolution: {integrity: sha512-x3Fqob8RQvrTdssfi9ecsCzEkFOd8JPmNwSkSQzdfKj/uBsRJs/Y88cZcZIEcPsTVfMGwMo4MOoihoDG2DoE/g==}
-    peerDependencies:
-      chart.js: ^4.1.1
-      vue: ^3.0.0-0 || ^2.7.0
-
   vue-eslint-parser@10.4.0:
     resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -6125,11 +6106,6 @@ snapshots:
     dependencies:
       '@kurkle/color': 0.3.4
 
-  chartjs-adapter-dayjs-4@1.0.4(chart.js@4.5.1)(dayjs@1.11.21):
-    dependencies:
-      chart.js: 4.5.1
-      dayjs: 1.11.21
-
   chartjs-plugin-zoom@2.2.0(chart.js@4.5.1):
     dependencies:
       '@types/hammerjs': 2.0.46
@@ -8999,11 +8975,6 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
-  vue-chartjs@5.3.4(chart.js@4.5.1)(vue@3.5.40(typescript@6.0.3)):
-    dependencies:
-      chart.js: 4.5.1
-      vue: 3.5.40(typescript@6.0.3)
-
   vue-eslint-parser@10.4.0(eslint@10.8.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2):
     dependencies:
       debug: 4.4.3(supports-color@10.2.2)
diff --git a/web_src/js/components/ActionRunJobView.vue b/web_src/js/components/ActionRunJobView.vue
index 168569c1829..ac06e6ab88a 100644
--- a/web_src/js/components/ActionRunJobView.vue
+++ b/web_src/js/components/ActionRunJobView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {computed, nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import ActionStatusIcon from './ActionStatusIcon.vue';
 import {addDelegatedEventListener, createElementFromAttrs} from '../utils/dom.ts';
 import {formatDatetime, formatDatetimeISO} from '../utils/time.ts';
diff --git a/web_src/js/components/ActionStatusIcon.vue b/web_src/js/components/ActionStatusIcon.vue
index e5f42a5ab57..898743198ff 100644
--- a/web_src/js/components/ActionStatusIcon.vue
+++ b/web_src/js/components/ActionStatusIcon.vue
@@ -3,7 +3,7 @@
 -->
 <script lang="ts" setup>
 import {computed} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {getActionStatusIcon, type ActionStatusIconVariant} from '../modules/action-status-icon.ts';
 
 const props = withDefaults(defineProps<{
diff --git a/web_src/js/components/ChartCanvas.vue b/web_src/js/components/ChartCanvas.vue
new file mode 100644
index 00000000000..0b151d587a9
--- /dev/null
+++ b/web_src/js/components/ChartCanvas.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import {onMounted, onUnmounted, toRaw, useTemplateRef, watch, type ShallowRef} from 'vue';
+import {_adapters, BarController, Chart, LinearScale, LineController, TimeScale, type ChartData, type ChartOptions, type TimeUnit} from 'chart.js';
+import {chartJsColors} from '../utils/color.ts';
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat.js';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear.js';
+import type {ConfigType, ManipulateType} from 'dayjs';
+
+dayjs.extend(advancedFormat); // the quarter format needs the `Q` token
+dayjs.extend(quarterOfYear);
+
+Chart.defaults.color = chartJsColors.text;
+Chart.defaults.borderColor = chartJsColors.border;
+Chart.register(BarController, LineController, LinearScale, TimeScale);
+
+// minimal port of chartjs-adapter-dayjs-4, MIT license, Copyright (c) 2022 bolstycjw
+_adapters._date.override({
+  formats: () => ({
+    datetime: 'MMM D, YYYY, h:mm:ss a',
+    millisecond: 'h:mm:ss.SSS a',
+    second: 'h:mm:ss a',
+    minute: 'h:mm a',
+    hour: 'hA',
+    day: 'MMM D',
+    week: 'MMM D, YYYY',
+    month: 'MMM YYYY',
+    quarter: '[Q]Q - YYYY',
+    year: 'YYYY',
+  }),
+  parse: (value: ConfigType) => {
+    const date = dayjs(value);
+    return date.isValid() ? date.valueOf() : null;
+  },
+  format: (time: number, format: string) => dayjs(time).format(format),
+  add: (time: number, amount: number, unit: TimeUnit) => dayjs(time).add(amount, unit as ManipulateType).valueOf(), // the quarter plugin widens this at runtime
+  diff: (max: number, min: number, unit: TimeUnit) => dayjs(max).diff(min, unit),
+  // chart.js only asks for `isoWeek` when `time.isoWeekday` is set, which we never do
+  startOf: (time: number, unit: TimeUnit) => dayjs(time).startOf(unit).valueOf(),
+  endOf: (time: number, unit: TimeUnit) => dayjs(time).endOf(unit).valueOf(),
+});
+
+const props = defineProps<{
+  type: 'bar' | 'line',
+  data: ChartData,
+  options: ChartOptions,
+}>();
+
+const elCanvas = useTemplateRef('elCanvas') as Readonly<ShallowRef<HTMLCanvasElement>>;
+let chart: Chart | undefined;
+
+// chart.js mutates what it gets, so it must never see a reactive proxy
+onMounted(() => {
+  chart = new Chart(elCanvas.value, {type: props.type, data: toRaw(props.data), options: toRaw(props.options)});
+});
+
+onUnmounted(() => {
+  chart?.destroy();
+});
+
+watch([() => props.data, () => props.options], ([data, options]) => {
+  if (!chart) return; // chart creation failed
+  chart.data = toRaw(data);
+  chart.options = toRaw(options);
+  chart.update();
+});
+</script>
+
+<template>
+  <canvas ref="elCanvas" role="img"/>
+</template>
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 38e83d2c1f7..f2ba9985b01 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
 import {computed} from 'vue';
 import type {Issue} from '../types.ts';
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 63f09a89645..7798628571f 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {computed, nextTick, onMounted, shallowRef, useTemplateRef, type ShallowRef} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {GET} from '../modules/fetch.ts';
 import {urlQueryEscape} from '../utils/url.ts';
 import type {SvgName} from '../svg.ts';
diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index 1d5279d7816..7ccd5f08cbc 100644
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, type ShallowRef} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {GET} from '../modules/fetch.ts';
 import {generateElemId} from '../utils/dom.ts';
 
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index e744dc4358f..1accdbceddc 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import {SvgIcon, type SvgName} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
+import type {SvgName} from '../svg.ts';
 import {shallowRef} from 'vue';
 import {type DiffStatus, type DiffTreeEntry, diffTreeStore} from '../modules/diff-file.ts';
 
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index e66eb033de6..fee1923a987 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {computed, onMounted, onUnmounted, shallowRef, watch} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {toggleElem} from '../utils/dom.ts';
 
 const props = defineProps<{
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 5f0f09018f2..482917ef574 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import ActionStatusIcon from './ActionStatusIcon.vue';
 import {computed, onBeforeUnmount, ref, toRefs, watch} from 'vue';
 import {resetActionFavicon, syncActionRunFavicon} from '../modules/favicon-status.ts';
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 7aeb07d8666..993b19779a8 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {computed, nextTick, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch, type ShallowRef} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {showErrorToast} from '../modules/toast.ts';
 import {GET} from '../modules/fetch.ts';
 import {pathEscapeSegments} from '../utils/url.ts';
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 146a65995a6..03cfa1b65e0 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {
   Chart,
   Legend,
-  LinearScale,
-  TimeScale,
   PointElement,
   LineElement,
   Filler,
@@ -12,7 +10,7 @@ import {
   type ChartData,
 } from 'chart.js';
 import {GET} from '../modules/fetch.ts';
-import {Line as ChartLine} from 'vue-chartjs';
+import ChartCanvas from './ChartCanvas.vue';
 import {
   startDaysBetween,
   firstStartDateAfterDate,
@@ -23,17 +21,11 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {errorMessage} from '../modules/errors.ts';
 import {sleep} from '../utils.ts';
-import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, shallowRef} from 'vue';
+import {computed, onMounted, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
-Chart.defaults.color = chartJsColors.text;
-Chart.defaults.borderColor = chartJsColors.border;
-
 Chart.register(
-  TimeScale,
-  LinearScale,
   Legend,
   PointElement,
   LineElement,
@@ -85,7 +77,9 @@ async function fetchGraphData() {
   }
 }
 
-function toGraphData(data: Array<Record<string, any>>): ChartData<'line'> {
+const graphData = computed(() => toGraphData(data.value));
+
+function toGraphData(data: DayData[]): ChartData<'line'> {
   return {
     datasets: [
       {
@@ -159,9 +153,9 @@ const options: ChartOptions<'line'> = {
           {{ errorText }}
         </div>
       </div>
-      <ChartLine
-        v-memo="data" v-if="data.length !== 0"
-        :data="toGraphData(data)" :options="options"
+      <ChartCanvas
+        v-if="data.length !== 0"
+        type="line" :data="graphData" :options="options"
       />
     </div>
   </div>
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index 52defea27a2..1a82670b40f 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -1,15 +1,12 @@
 <script lang="ts" setup>
 import {computed, onMounted, shallowRef} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import dayjs from 'dayjs';
 import {GET} from '../modules/fetch.ts';
-import {Line as ChartLine} from 'vue-chartjs';
+import ChartCanvas from './ChartCanvas.vue';
 import {
   Chart,
   Title,
-  BarElement,
-  LinearScale,
-  TimeScale,
   PointElement,
   LineElement,
   Filler,
@@ -19,7 +16,6 @@ import {
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import {chartJsColors} from '../utils/color.ts';
-import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 import {
   startDaysBetween,
   firstStartDateAfterDate,
@@ -56,13 +52,7 @@ type LineOptions = ChartOptions<'line'> & {
  };
 }
 
-Chart.defaults.color = chartJsColors.text;
-Chart.defaults.borderColor = chartJsColors.border;
-
 Chart.register(
-  TimeScale,
-  LinearScale,
-  BarElement,
   Title,
   PointElement,
   LineElement,
@@ -102,7 +92,8 @@ const errorText = shallowRef('');
 const totalStats = shallowRef<Record<string, any>>({});
 const sortedContributors = shallowRef<Array<Record<string, any>>>([]);
 const type = shallowRef<ContributionType>('commits');
-let contributorsStats: Record<string, any> = {}; // these three are not read during render
+let contributorsStats: Record<string, any> = {};
+// plain values, so the main chart options do not follow the zoomed range
 let xAxisStart: number | null = null;
 let xAxisEnd: number | null = null;
 const xAxisMin = shallowRef<number | null>(null);
@@ -301,8 +292,9 @@ function getOptions(chartType: ChartType): LineOptions {
     },
     scales: {
       x: {
-        min: xAxisMin.value ?? undefined,
-        max: xAxisMax.value ?? undefined,
+        // the main chart keeps its own zoom range
+        min: (chartType === 'main' ? xAxisStart : xAxisMin.value) ?? undefined,
+        max: (chartType === 'main' ? xAxisEnd : xAxisMax.value) ?? undefined,
         type: 'time',
         grid: {
           display: false,
@@ -325,6 +317,17 @@ function getOptions(chartType: ChartType): LineOptions {
     },
   };
 }
+
+const mainChart = computed(() => ({
+  graphData: toGraphData(totalStats.value.weeks),
+  chartOptions: getOptions('main'),
+}));
+
+const contributorCharts = computed(() => sortedContributors.value.map((contributor) => ({
+  contributor,
+  graphData: toGraphData(contributor.weeks),
+  chartOptions: getOptions('contributor'), // chart.js mutates it, so each chart needs its own
+})));
 </script>
 <template>
   <div>
@@ -386,16 +389,15 @@ function getOptions(chartType: ChartType): LineOptions {
           {{ errorText }}
         </div>
       </div>
-      <ChartLine
-        v-memo="[totalStats.weeks, type]" v-if="Object.keys(totalStats).length !== 0"
-        :data="toGraphData(totalStats.weeks)" :options="getOptions('main')"
+      <ChartCanvas
+        v-if="Object.keys(totalStats).length !== 0"
+        type="line" :data="mainChart.graphData" :options="mainChart.chartOptions"
       />
     </div>
     <div class="contributor-grid">
       <div
-        v-for="(contributor, index) in sortedContributors"
+        v-for="({contributor, graphData, chartOptions}, index) in contributorCharts"
         :key="index"
-        v-memo="[sortedContributors, type]"
       >
         <div class="ui top attached header tw-flex tw-flex-1">
           <b class="ui right">#{{ index + 1 }}</b>
@@ -421,9 +423,10 @@ function getOptions(chartType: ChartType): LineOptions {
         </div>
         <div class="ui attached segment">
           <div>
-            <ChartLine
-              :data="toGraphData(contributor.weeks)"
-              :options="getOptions('contributor')"
+            <ChartCanvas
+              type="line"
+              :data="graphData"
+              :options="chartOptions"
             />
           </div>
         </div>
diff --git a/web_src/js/components/RepoFileSearch.vue b/web_src/js/components/RepoFileSearch.vue
index ecc325b5af3..0991c6bfe08 100644
--- a/web_src/js/components/RepoFileSearch.vue
+++ b/web_src/js/components/RepoFileSearch.vue
@@ -4,7 +4,7 @@ import {generateElemId} from '../utils/dom.ts';
 import {GET} from '../modules/fetch.ts';
 import {filterRepoFilesWeighted} from '../features/repo-findfile.ts';
 import {pathEscapeSegments} from '../utils/url.ts';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {throttle} from '../utils/func.ts';
 
 const props = defineProps({
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index b58e84e55d6..ef858dfbc37 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {
   Chart,
   Tooltip,
   BarElement,
-  LinearScale,
-  TimeScale,
   type ChartOptions,
   type ChartData,
   type ChartDataset,
 } from 'chart.js';
 import {GET} from '../modules/fetch.ts';
-import {Bar} from 'vue-chartjs';
+import ChartCanvas from './ChartCanvas.vue';
 import {
   startDaysBetween,
   firstStartDateAfterDate,
@@ -22,17 +20,11 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {errorMessage} from '../modules/errors.ts';
 import {sleep} from '../utils.ts';
-import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import {onMounted, ref, shallowRef} from 'vue';
+import {computed, onMounted, shallowRef} from 'vue';
 
 const {pageData} = window.config;
 
-Chart.defaults.color = chartJsColors.text;
-Chart.defaults.borderColor = chartJsColors.border;
-
 Chart.register(
-  TimeScale,
-  LinearScale,
   BarElement,
   Tooltip,
 );
@@ -48,7 +40,7 @@ defineProps<{
 const isLoading = shallowRef(false);
 const errorText = shallowRef('');
 const repoLink = pageData.repoLink!;
-const data = ref<DayData[]>([]);
+const data = shallowRef<DayData[]>([]);
 
 onMounted(() => {
   fetchGraphData();
@@ -81,6 +73,8 @@ async function fetchGraphData() {
   }
 }
 
+const graphData = computed(() => toGraphData(data.value));
+
 function toGraphData(data: DayData[]): ChartData<'bar'> {
   return {
     datasets: [
@@ -137,9 +131,9 @@ const options: ChartOptions<'bar'> = {
           {{ errorText }}
         </div>
       </div>
-      <Bar
-        v-memo="data" v-if="data.length !== 0"
-        :data="toGraphData(data)" :options="options"
+      <ChartCanvas
+        v-if="data.length !== 0"
+        type="bar" :data="graphData" :options="options"
       />
     </div>
   </div>
diff --git a/web_src/js/components/SvgIcon.test.ts b/web_src/js/components/SvgIcon.test.ts
new file mode 100644
index 00000000000..981c5468e5e
--- /dev/null
+++ b/web_src/js/components/SvgIcon.test.ts
@@ -0,0 +1,10 @@
+import SvgIcon from './SvgIcon.vue';
+import {createApp, h} from 'vue';
+
+test('SvgIcon', () => {
+  const root = document.createElement('div');
+  createApp({render: () => h(SvgIcon, {name: 'octicon-dot-fill', size: 24, class: 'base', symbolId: 'svg-symbol-dot'})}).mount(root);
+  expect(root.innerHTML).toBe(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24" aria-hidden="true" class="svg octicon-dot-fill tw-hidden svg-symbol-container base"><symbol id="svg-symbol-dot" viewBox="0 0 16 16"><path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8"></path></symbol></svg>`,
+  );
+});
diff --git a/web_src/js/components/SvgIcon.vue b/web_src/js/components/SvgIcon.vue
new file mode 100644
index 00000000000..a8d1c70af20
--- /dev/null
+++ b/web_src/js/components/SvgIcon.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {svgParseOuterInner, type SvgName} from '../svg.ts';
+import {html, htmlRaw} from '../utils/html.ts';
+
+const props = withDefaults(defineProps<{
+  name: SvgName,
+  size?: number,
+  symbolId?: string,
+}>(), {
+  size: 16,
+  symbolId: undefined,
+});
+
+const icon = computed(() => {
+  let {svgOuter, svgInnerHtml} = svgParseOuterInner(props.name);
+  const attrs: Record<string, string | number> = {};
+  for (const attr of svgOuter.attributes) {
+    if (attr.name === 'class') continue;
+    attrs[attr.name] = attr.value;
+  }
+  attrs.width = props.size;
+  attrs.height = props.size;
+
+  const classes = Array.from(svgOuter.classList);
+  if (props.symbolId) {
+    classes.push('tw-hidden', 'svg-symbol-container');
+    svgInnerHtml = html`<symbol id="${props.symbolId}" viewBox="${attrs.viewBox}">${htmlRaw(svgInnerHtml)}</symbol>`;
+  }
+  attrs.innerHTML = svgInnerHtml; // the icons are bundled, they carry no user input
+  return {attrs, classes};
+});
+</script>
+
+<template>
+  <svg v-bind="icon.attrs" :class="icon.classes"/>
+</template>
diff --git a/web_src/js/components/ViewFileTreeItem.vue b/web_src/js/components/ViewFileTreeItem.vue
index 1e7a378a34d..235925253cb 100644
--- a/web_src/js/components/ViewFileTreeItem.vue
+++ b/web_src/js/components/ViewFileTreeItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import {isPlainClick} from '../utils/dom.ts';
 import {shouldTriggerAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {shallowRef} from 'vue';
diff --git a/web_src/js/components/WorkflowGraph.vue b/web_src/js/components/WorkflowGraph.vue
index 8bcb2e5b73c..b95db93473f 100644
--- a/web_src/js/components/WorkflowGraph.vue
+++ b/web_src/js/components/WorkflowGraph.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
-import {SvgIcon} from '../svg.ts';
+import SvgIcon from './SvgIcon.vue';
 import ActionStatusIcon from './ActionStatusIcon.vue';
 import {localUserSettings} from '../modules/user-settings.ts';
 import {isPlainClick} from '../utils/dom.ts';
diff --git a/web_src/js/svg.test.ts b/web_src/js/svg.test.ts
index 715b739a829..ad31f038951 100644
--- a/web_src/js/svg.test.ts
+++ b/web_src/js/svg.test.ts
@@ -1,5 +1,4 @@
-import {svg, SvgIcon, svgParseOuterInner} from './svg.ts';
-import {createApp, h} from 'vue';
+import {svg, svgParseOuterInner} from './svg.ts';
 
 test('svg', () => {
   expect(svg('octicon-repo')).toMatch(/^<svg/);
@@ -13,14 +12,3 @@ test('svgParseOuterInner', () => {
   expect(svgOuter.classList.contains('octicon-repo')).toBeTruthy();
   expect(svgInnerHtml).toContain('<path');
 });
-
-test('SvgIcon', () => {
-  const root = document.createElement('div');
-  createApp({render: () => h(SvgIcon, {name: 'octicon-link', size: 24, class: 'base'})}).mount(root);
-  const node = root.firstChild as Element;
-  expect(node.nodeName).toEqual('svg');
-  expect(node.getAttribute('width')).toEqual('24');
-  expect(node.getAttribute('height')).toEqual('24');
-  expect(node.classList.contains('octicon-link')).toBeTruthy();
-  expect(node.classList.contains('base')).toBeTruthy();
-});
diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index fe30092d102..a24b542e0d0 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -1,6 +1,5 @@
-import {defineComponent, h, type PropType} from 'vue';
 import {parseDom, serializeXml} from './utils.ts';
-import {html, htmlRaw} from './utils/html.ts';
+import {htmlRaw} from './utils/html.ts';
 import giteaDoubleChevronLeft from '../../public/assets/img/svg/gitea-double-chevron-left.svg';
 import giteaDoubleChevronRight from '../../public/assets/img/svg/gitea-double-chevron-right.svg';
 import giteaEmptyCheckbox from '../../public/assets/img/svg/gitea-empty-checkbox.svg';
@@ -222,36 +221,3 @@ export function svgParseOuterInner(name: SvgName) {
   const svgOuter = svgDoc.firstChild as SVGElement;
   return {svgOuter, svgInnerHtml};
 }
-
-export const SvgIcon = defineComponent({
-  name: 'SvgIcon',
-  props: {
-    name: {type: String as PropType<SvgName>, required: true},
-    size: {type: Number, default: 16},
-    symbolId: {type: String},
-  },
-  render() {
-    let {svgOuter, svgInnerHtml} = svgParseOuterInner(this.name);
-    // https://vuejs.org/guide/extras/render-function.html#creating-vnodes
-    // the `^` is used for attr, set SVG attributes like 'width', `aria-hidden`, `viewBox`, etc
-    const attrs: Record<string, any> = {};
-    for (const attr of svgOuter.attributes) {
-      if (attr.name === 'class') continue;
-      attrs[`^${attr.name}`] = attr.value;
-    }
-    attrs[`^width`] = this.size;
-    attrs[`^height`] = this.size;
-
-    const classes = Array.from(svgOuter.classList);
-    if (this.symbolId) {
-      classes.push('tw-hidden', 'svg-symbol-container');
-      svgInnerHtml = html`<symbol id="${this.symbolId}" viewBox="${attrs['^viewBox']}">${htmlRaw(svgInnerHtml)}</symbol>`;
-    }
-    // create VNode
-    return h('svg', {
-      ...attrs,
-      class: classes,
-      innerHTML: svgInnerHtml,
-    });
-  },
-});