feat(chart): refine viewport interaction and rendering

src/components/interaction/WaveformTooltip.vue

@@ -33,24 +33,68 @@ const props = defineProps<Props>()
 
 const tooltipGap = 12
 const containerPadding = 8
-const tooltipMaxWidth = 238
+const tooltipPlacementWidth = 238
+const tooltipMaxWidth = 320
+const tooltipHorizontalPadding = 20
+const tooltipLineHeight = 20
+
+function estimateLineCount(text: string, width: number): number {
+  const contentWidth = Math.max(1, width - tooltipHorizontalPadding - 14)
+  const charactersPerLine = Math.max(1, Math.floor(contentWidth / 7.2))
+  return Math.max(1, Math.ceil([...text].length / charactersPerLine))
+}
+
+function formatSeriesText(seriesPoint: SeriesPoint): string {
+  const error = formatError(seriesPoint.point)
+  return `${seriesPoint.name ? `${seriesPoint.name}: ` : ''}${formatTooltipNumber(seriesPoint.point.y)}${
+    seriesPoint.unit ? ` ${seriesPoint.unit}` : ''
+  }${error ? ` ${error}` : ''}`
+}
+
+function estimateTooltipHeight(width: number, timeText: string): number {
+  const seriesLines = props.seriesPoints.reduce(
+    (total, seriesPoint) => total + estimateLineCount(formatSeriesText(seriesPoint), width),
+    0,
+  )
+  return 16 + tooltipLineHeight * (estimateLineCount(timeText, width) + seriesLines) + 5
+}
 
 const tooltipStyle = computed(() => {
   if (!props.visible || !props.hoveredPoint) return { display: 'none' }
 
-  const estimatedHeight = 44 + props.seriesPoints.length * 22
   const rightPlacement = props.position.x + tooltipGap
-  const leftPlacement = props.position.x - tooltipGap - tooltipMaxWidth
+  const leftPlacement = props.position.x - tooltipGap - tooltipPlacementWidth
+  const rightAvailableWidth = props.containerWidth - containerPadding - rightPlacement
+  const leftAvailableWidth = props.position.x - tooltipGap - containerPadding
+  const availableWidth = Math.max(
+    1,
+    Math.min(tooltipMaxWidth, props.containerWidth - containerPadding * 2),
+  )
   const horizontalStyle =
-    rightPlacement + tooltipMaxWidth <= props.containerWidth - containerPadding
-      ? { left: `${rightPlacement}px` }
+    rightPlacement + tooltipPlacementWidth <= props.containerWidth - containerPadding
+      ? {
+          left: `${rightPlacement}px`,
+          maxWidth: `${Math.min(tooltipMaxWidth, rightAvailableWidth)}px`,
+        }
       : leftPlacement >= containerPadding
-        ? { right: `${props.containerWidth - props.position.x + tooltipGap}px` }
-        : { left: `${containerPadding}px` }
+        ? {
+            right: `${props.containerWidth - props.position.x + tooltipGap}px`,
+            maxWidth: `${Math.min(tooltipMaxWidth, leftAvailableWidth)}px`,
+          }
+        : { left: `${containerPadding}px`, maxWidth: `${availableWidth}px` }
+
+  const maxWidth = Number.parseFloat(horizontalStyle.maxWidth)
+  const timeText = `${props.timeUnit}: ${formatTooltipTime(props.hoveredPoint.x, props.timeUnit)}`
 
   return {
     ...horizontalStyle,
-    top: `${Math.max(8, Math.min(props.position.y - 18, props.containerHeight - estimatedHeight - 8))}px`,
+    top: `${Math.max(
+      8,
+      Math.min(
+        props.position.y - 18,
+        props.containerHeight - estimateTooltipHeight(maxWidth, timeText) - 8,
+      ),
+    )}px`,
   }
 })
 
@@ -76,11 +120,13 @@ function formatError(point: WaveformPoint): string | null {
       class="waveform-tooltip__series waveform-chart__tooltip-series"
     >
       <i :style="{ backgroundColor: seriesPoint.color }" />
-      <strong v-if="seriesPoint.name">{{ seriesPoint.name }}:</strong>
-      <span class="waveform-tooltip__value">
-        {{ formatTooltipNumber(seriesPoint.point.y)
-        }}{{ seriesPoint.unit ? ` ${seriesPoint.unit}` : '' }}
-        <small v-if="formatError(seriesPoint.point)">{{ formatError(seriesPoint.point) }}</small>
+      <span class="waveform-tooltip__series-content">
+        <strong v-if="seriesPoint.name">{{ seriesPoint.name }}:</strong>
+        <span class="waveform-tooltip__value">
+          {{ formatTooltipNumber(seriesPoint.point.y)
+          }}{{ seriesPoint.unit ? ` ${seriesPoint.unit}` : '' }}
+          <small v-if="formatError(seriesPoint.point)">{{ formatError(seriesPoint.point) }}</small>
+        </span>
       </span>
     </span>
   </div>
@@ -93,8 +139,8 @@ function formatError(point: WaveformPoint): string | null {
   z-index: 2;
   display: grid;
   gap: 3px;
-  min-width: 180px;
-  max-width: 238px;
+  width: max-content;
+  max-width: min(320px, calc(100% - 16px));
   padding: 8px 10px;
   color: #333;
   font:
@@ -116,30 +162,34 @@ function formatError(point: WaveformPoint): string | null {
 
 .waveform-tooltip__series {
   display: grid;
-  grid-template-columns: 8px minmax(0, 1fr) auto;
+  grid-template-columns: 8px minmax(0, 1fr);
   gap: 6px;
-  align-items: center;
+  align-items: start;
 }
 
 .waveform-tooltip__series i {
+  flex: 0 0 auto;
   width: 8px;
   height: 8px;
+  margin-top: 4px;
   border-radius: 50%;
 }
 
+.waveform-tooltip__series-content {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
 .waveform-tooltip__series strong {
-  overflow: hidden;
   font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .waveform-tooltip__value {
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 .waveform-tooltip__series small {
   color: #667085;
-  white-space: nowrap;
 }
 </style>