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/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>