Change settings

src/views/RequestView.vue

@@ -6,7 +6,9 @@
         <h2 class="section-title">
           <span class="ama-gradient">Assets in the Arena</span>
         </h2>
-        <p class="section-sub">Live from dataService • B&amp;H sparkline (ECharts LineChart) • 1M change • coverage</p>
+        <p class="section-sub">
+          Live from dataService • B&amp;H sparkline (ECharts LineChart) • 1M change • coverage
+        </p>
       </header>
 
       <div class="grid grid-assets-4">
@@ -168,24 +170,52 @@ import * as echarts from 'echarts/core'
 import { LineChart } from 'echarts/charts'
 import { GridComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
+import { nextTick } from 'vue'
 echarts.use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
 
 /**
- * Minimal ECharts line spark (B&H equity)
+ * Robust ECharts mini line spark that waits for layout
  */
 const MiniEchart = {
   name: 'MiniEchart',
   props: {
-    data: { type: Array, required: true },
+    data: { type: Array, default: () => [] },
     color: { type: String, default: '#22c55e' }
   },
+  data() {
+    return { _chart: null, _ro: null, _raf: 0 }
+  },
   mounted() {
-    const el = this.$refs.c
-    this._chart = echarts.init(el)
-    this.render(this.data)
+    nextTick(() => this.initChartSafely())
+  },
+  beforeUnmount() {
+    if (this._ro) { this._ro.disconnect(); this._ro = null }
+    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = 0 }
+    if (this._chart) { this._chart.dispose(); this._chart = null }
   },
   methods: {
+    initChartSafely() {
+      const el = this.$refs.c || this.$el
+      if (!el) {
+        this._raf = requestAnimationFrame(() => this.initChartSafely())
+        return
+      }
+      const { clientWidth: w, clientHeight: h } = el
+      if (!w || !h) {
+        this._raf = requestAnimationFrame(() => this.initChartSafely())
+        return
+      }
+      this._chart = echarts.init(el, null, { renderer: 'canvas' })
+      this.render(this.data)
+
+      // Listen for container resize
+      this._ro = new ResizeObserver(() => {
+        if (this._chart) this._chart.resize()
+      })
+      this._ro.observe(el)
+    },
     render(arr) {
+      if (!this._chart) return
       const d = Array.isArray(arr) ? arr : []
       this._chart.setOption({
         animation: true,
@@ -215,7 +245,6 @@ const MiniEchart = {
       })
     }
   },
-  beforeUnmount() { if (this._chart) { this._chart.dispose(); this._chart = null } },
   template: `<div ref="c" class="echart-mini"></div>`
 }
 
@@ -227,10 +256,10 @@ export default {
       assetFormUrl: 'https://forms.gle/your-asset-request-form',
       agentFormUrl: 'https://forms.gle/your-agent-submit-form',
 
-      // dynamic, filled from dataService
+      // dynamic from dataService
       assets: [],
 
-      // agents section (no performance)
+      // agents (no performance fields shown)
       agents: [
         {
           name: 'InvestorAgent',
@@ -418,7 +447,7 @@ export default {
 .truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .w-full{ width:100%; }
-.echart-mini{ width:100%; height:90px; }
+.echart-mini{ width:100%; height:100%; }
 
 /* ===== Sections ===== */
 .section{ margin-top:18px; }