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.

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>