Update/line chart styles (#351)

* hover active * hover top * optimize hover top * Update LineChart.vue * update hover * allow hover while running * Limit height when zooming in * fix slidebar bug * thickenByTag * Logic to distinguish between multiple data charts and single data charts * allow config crosshair * update crosshairsColor * update doc * update thickerLineWidth --------- Co-authored-by: ZeYi Lin <944270057@qq.com>
SwanHubX · Feb 26, 2024 · b328478 · b328478
1 parent 9ac2754
commit b328478
Show file tree

Hide file tree

Showing 5 changed files with 426 additions and 81 deletions.
diff --git a/vue/src/charts/components/LinChartTooltip.vue b/vue/src/charts/components/LinChartTooltip.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="lc-tooltip" ref="toolTipRef" v-show="isShow" :style="{ width: getTooltipWidth() }" :key="key">
+    <div class="lc-tooltip-item-zoom" v-if="detail">
+      <p class="lc-tooltip-color font-semibold !text-sm"></p>
+      <p class="lc-tooltip-step font-semibold !text-sm">{{ $t('common.chart.charts.share.step') }}</p>
+      <p class="lc-tooltip-value font-semibold !text-sm">{{ $t('common.chart.charts.share.value') }}</p>
+      <p class="lc-tooltip-time font-semibold !text-sm">{{ $t('common.chart.charts.share.time') }}</p>
+      <p class="lc-tooltip-tag font-semibold !text-sm">{{ $t('common.chart.charts.share.tag') }}</p>
+    </div>
+    <template v-if="detail && items.length">
+      <div class="lc-tooltip-item-zoom" v-for="item in items" :key="item.color" :style="{ color: item.color }">
+        <!-- 颜色 -->
+        <span class="lc-tooltip-color lc-tooltip-color-rect"></span>
+        <!-- 步数 -->
+        <span class="lc-tooltip-step">{{ item.data.index }}</span>
+        <!-- 数据 -->
+        <span class="lc-tooltip-value">{{ formatNumber2SN(item.data.data) }}</span>
+        <!-- 时间 -->
+        <span class="lc-tooltip-time">{{ formatTime(item.data.create_time) }}</span>
+        <!-- 标签 -->
+        <span class="lc-tooltip-tag">{{ item.data.series }}</span>
+      </div>
+    </template>
+    <template v-else-if="items.length">
+      <div class="lc-tooltip-item-no-zoom" v-for="item in items" :key="item.data.color" :style="{ color: item.color }">
+        <!-- 颜色 -->
+        <span class="lc-tooltip-color lc-tooltip-color-rect"></span>
+        <!-- 步数 -->
+        <span class="lc-tooltip-step">{{ item.data.index }}</span>
+        <!-- 数据 -->
+        <span class="lc-tooltip-value">{{ formatNumber2SN(item.data.data) }}</span>
+        <!-- 标签 -->
+        <span class="lc-tooltip-tag">{{ item.data.series }}</span>
+      </div>
+    </template>
+    <p class="lc-tooltip-tip">{{ tip }}</p>
+  </div>
+</template>
+
+<script setup>
+/**
+ * @description: 自定义折线图提示框
+ * @file: LinChartTooltip.vue
+ * @since: 2024-02-24 15:36:59
+ **/
+import { ref, inject } from 'vue'
+import { isApple } from '@swanlab-vue/utils/browser'
+import { t } from '@swanlab-vue/i18n'
+const props = defineProps({
+  // 是否显示详细版
+  detail: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const tip = isApple ? t('common.chart.charts.line.copy.apple') : t('common.chart.charts.line.copy.windows')
+const tooltipWidth = props.detail ? 400 : 256
+
+const getTooltipWidth = () => {
+  return `${tooltipWidth}px`
+}
+// 提示框数据
+const items = ref([])
+// 显示模式，分为详细版和简单版
+const toolTipRef = ref(null)
+const isShow = ref(false)
+const tooltipXOffset = 50
+const key = ref(null)
+/**
+ * 显示提示框，传入父元素宽度和显示x轴位置，计算提示框位置
+ */
+const show = (data, width, x) => {
+  // console.log('show', data, width, x)
+  data.sort((a, b) => b.data.data - a.data.data)
+  // key.value = Math.random()
+  items.value = data
+  isShow.value = true
+  const left = parseFloat(x.split('px')[0])
+  // console.log(left + tooltipWidth, width)
+  if (left + tooltipWidth - 100 > width) {
+    toolTipRef.value.style.right = `${width - left + tooltipXOffset}px`
+    toolTipRef.value.style.left = 'auto'
+  } else {
+    toolTipRef.value.style.left = `${left + tooltipXOffset}px`
+    toolTipRef.value.style.right = 'auto'
+  }
+}
+
+/**
+ * 隐藏提示框，直接隐藏
+ */
+const hide = () => {
+  isShow.value = false
+}
+
+// ---------------------------------- 依赖获取 ----------------------------------
+const formatNumber2SN = inject('formatNumber2SN')
+const formatTime = inject('formatTime')
+
+// ---------------------------------- 暴露方法 ----------------------------------
+
+defineExpose({
+  show,
+  hide
+})
+</script>
+
+<style lang="scss" scoped>
+.lc-tooltip {
+  @apply py-2 px-3 absolute bg-default border rounded z-full;
+  box-shadow: rgba(21, 24, 31, 0.16) 0px 12px 24px 0px;
+  visibility: visible;
+  p {
+    @apply text-xs text-default font-semibold;
+  }
+  .lc-tooltip-item-no-zoom,
+  .lc-tooltip-item-zoom {
+    @apply flex items-center gap-3;
+    &:not(:last-child) {
+      @apply mb-1.5;
+    }
+    .lc-tooltip-color {
+      @apply w-5 flex items-center flex-shrink-0;
+    }
+    .lc-tooltip-color-rect {
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 20px;
+        height: 6px;
+        border-radius: 2px;
+        margin-right: 5px;
+        background-color: currentColor;
+      }
+    }
+  }
+  .lc-tooltip-tip {
+    @apply font-normal text-dimmest text-xs flex-shrink-0;
+  }
+}
+
+.lc-tooltip-item-no-zoom {
+  .lc-tooltip-step {
+    @apply font-semibold flex-shrink-0;
+    &::after {
+      content: ':';
+      @apply font-semibold;
+    }
+  }
+  .lc-tooltip-value {
+    @apply w-10 text-left font-semibold;
+  }
+  .lc-tooltip-tag {
+    @apply truncate;
+    max-width: 128px;
+  }
+}
+
+.lc-tooltip-item-zoom {
+  .lc-tooltip-step {
+    @apply w-7;
+  }
+  .lc-tooltip-value {
+    @apply col-span-1;
+    @apply w-10 text-left;
+  }
+  .lc-tooltip-time {
+    @apply w-32;
+  }
+
+  .lc-tooltip-tag {
+    @apply truncate;
+    max-width: 160px;
+  }
+}
+</style>
diff --git a/vue/src/charts/components/SlideBar.vue b/vue/src/charts/components/SlideBar.vue
@@ -53,7 +53,7 @@ const props = defineProps({
   }
 })
 
-const emits = defineEmits(['update:modelValue', 'change'])
+const emits = defineEmits(['update:modelValue', 'change', 'turn'])
 
 const _modelValue = computed({
   get() {
@@ -71,15 +71,22 @@ const _modelValue = computed({
 })
 
 // ---------------------------------- 上下键增加/减少数字 ----------------------------------
+
+/**
+ * 向后渐少
+ */
 const handleClickDown = () => {
   if (_modelValue.value > props.min) {
-    _modelValue.value = _modelValue.value - 1
+    emits('turn', 'backward', _modelValue.value)
   }
 }
 
+/**
+ * 向前增加
+ */
 const handleClickUp = () => {
   if (_modelValue.value < props.max) {
-    _modelValue.value = _modelValue.value + 1
+    emits('turn', 'forward', _modelValue.value)
   }
 }
 

diff --git a/vue/src/charts/package/AudioChart.vue b/vue/src/charts/package/AudioChart.vue
@@ -26,6 +26,7 @@
         :min="minIndex"
         :bar-color="barColor"
         :key="slideKey"
+        @turn="handelTurn"
         v-if="maxIndex !== minIndex"
       />
     </div>
@@ -46,6 +47,7 @@
           :min="minIndex"
           :bar-color="barColor"
           :key="slideKey"
+          @turn="handelTurn"
           v-if="maxIndex !== minIndex"
         />
       </div>
@@ -147,6 +149,20 @@ const currentIndex = computed({
   }
 })
 
+// 事件处理，触发slideBar的turn事件
+const handelTurn = (direction, value) => {
+  const keys = Array.from(stepMap.keys())
+  console.log('handelTurn', direction, value, keys)
+  const index = keys.findIndex((item) => item > value)
+  if (direction === 'forward') {
+    currentIndex.value = Number(index === -1 ? keys[keys.length - 1] : keys[index])
+  } else {
+    // 向下获取
+    if (index === -1) currentIndex.value = Number(keys[Math.max(0, keys.length - 2)])
+    else currentIndex.value = Number(keys[Math.max(0, index - 2)])
+  }
+}
+
 // ---------------------------------- 控制渲染第几个数据，防抖 ----------------------------------
 
 const debounceRender = debounce(() => {

diff --git a/vue/src/charts/package/ImageChart.vue b/vue/src/charts/package/ImageChart.vue
@@ -39,14 +39,15 @@
         :min="minIndex"
         :bar-color="barColor"
         :key="slideKey"
+        @turn="handelTurn"
         v-if="maxIndex !== minIndex"
       />
     </div>
     <!-- 放大效果弹窗 -->
     <SLModal class="p-10 pt-0 overflow-hidden" max-w="-1" v-model="isZoom">
       <p class="text-center mt-4 mb-10 text-2xl font-semibold">{{ title }}</p>
-      <div class="image-content flex flex-col justify-center">
-        <div class="flex flex-col justify-center items-center" v-if="loading">
+      <div class="image-content image-content-zoom">
+        <div class="flex flex-col justify-center items-center h-full" v-if="loading">
           <SLLoading />
         </div>
         <!-- 加载完成 -->
@@ -72,6 +73,7 @@
           :min="minIndex"
           :bar-color="barColor"
           :key="slideKey"
+          @turn="handelTurn"
           v-if="maxIndex !== minIndex"
         />
       </div>
@@ -170,6 +172,19 @@ const currentIndex = computed({
   }
 })
 
+// 事件处理，触发slideBar的turn事件
+const handelTurn = (direction, value) => {
+  const keys = Array.from(Object.keys(stepsData))
+  const index = keys.findIndex((item) => item > value)
+  if (direction === 'forward') {
+    currentIndex.value = Number(index === -1 ? keys[keys.length - 1] : keys[index])
+  } else {
+    // 向下获取
+    if (index === -1) currentIndex.value = Number(keys[Math.max(0, keys.length - 2)])
+    else currentIndex.value = Number(keys[Math.max(0, index - 2)])
+  }
+}
+
 // 布局处理,一共length列，最多显示8列
 const setGrid = (length) => {
   if (length <= 8) {
@@ -332,4 +347,8 @@ defineExpose({
 .image-content-no-zoom {
   @apply h-56 overflow-y-auto overflow-x-clip;
 }
+
+.image-content-zoom {
+  @apply h-[calc(100vh-18.5rem)] overflow-y-auto overflow-x-clip;
+}
 </style>