fix: don't refresh if options is unchanged

frontend/src/components/Charts/BaseChart.vue

@@ -1,6 +1,7 @@
 <script setup>
 import * as echarts from 'echarts'
 import { onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue'
+import { areDeeplyEqual } from '@/utils'
 
 const props = defineProps({
  title: { type: String, required: false },
@@ -21,8 +22,10 @@ onMounted(() => {
 
 watch(
  () => props.options,
- () => {
+ (newOptions, oldOptions) => {
  if (!eChart) return
+ if (JSON.stringify(newOptions) === JSON.stringify(oldOptions)) return
+ if (areDeeplyEqual(newOptions, oldOptions)) return
  eChart.clear()
  eChart.setOption(props.options)
  },

frontend/src/dashboard/SimpleFilter.vue

@@ -50,10 +50,12 @@ watch(
  { immediate: true }
 )
 
+const isOpen = ref(false)
 const applyDisabled = computed(() => {
  return isEmptyObj(filter.column) || isEmptyObj(filter.operator) || isEmptyObj(filter.value)
 })
 function applyFilter() {
+ if (!isOpen.value) return
  if (applyDisabled.value) return
  emit('apply', filter)
 }
@@ -183,7 +185,7 @@ function isValueSelected(value) {
 
 <template>
  <div class="w-full [&:first-child]:w-full">
- <Popover class="w-full" @close="applyFilter">
+ <Popover class="w-full" @close="applyFilter" @update:show="isOpen = $event">
  <template #target="{ togglePopover, isOpen }">
  <div class="flex w-full">
  <button

frontend/src/utils/index.js

@@ -277,6 +277,39 @@ export function getImageSrc(element) {
  .then((blob) => URL.createObjectURL(blob))
 }
 
+export function areDeeplyEqual(obj1, obj2) {
+ if (obj1 === obj2) return true
+
+ if (Array.isArray(obj1) && Array.isArray(obj2)) {
+ if (obj1.length !== obj2.length) return false
+
+ return obj1.every((elem, index) => {
+ return areDeeplyEqual(elem, obj2[index])
+ })
+ }
+
+ if (typeof obj1 === 'object' && typeof obj2 === 'object' && obj1 !== null && obj2 !== null) {
+ if (Array.isArray(obj1) || Array.isArray(obj2)) return false
+
+ const keys1 = Object.keys(obj1)
+ const keys2 = Object.keys(obj2)
+
+ if (keys1.length !== keys2.length || !keys1.every((key) => keys2.includes(key)))
+ return false
+
+ for (let key in obj1) {
+ let isEqual = areDeeplyEqual(obj1[key], obj2[key])
+ if (!isEqual) {
+ return false
+ }
+ }
+
+ return true
+ }
+
+ return false
+}
+
 export default {
  isEmptyObj,
  safeJSONParse,
@@ -288,4 +321,5 @@ export default {
  getShortNumber,
  copyToClipboard,
  ellipsis,
+ areDeeplyEqual,
 }