fix: fix resize bug in heatmap table

Signed-off-by: yuda <[email protected]>
cloudforet-io · Jan 3, 2025 · f86398c · f86398c
1 parent 00c23cd
commit f86398c
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/.../src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/.../src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
@@ -71,7 +71,7 @@ const state = reactive({
     boxHeight: 0,
     scrollHeight: 0,
     xAxisData: computed<string[]>(() => {
-        if (isDateField(state.xAxisField)) {
+        if (isDateField(widgetOptionsState.xAxisInfo?.data)) {
             const _isSeparatedDate = widgetOptionsState.xAxisInfo?.data !== DATE_FIELD.DATE;
             return getWidgetDateFields(widgetOptionsState.granularityInfo?.granularity, state.widgetDateRange.start, state.widgetDateRange.end, _isSeparatedDate);
         }
@@ -177,6 +177,31 @@ const getColor = (val: string|number): string => {
     });
     return _color;
 };
+const resizeWidget = () => {
+    const _containerWidth = colorCodedTableRef.value?.clientWidth;
+    const _containerHeight = colorCodedTableRef.value?.clientHeight;
+    if (!_containerWidth || !_containerHeight) return;
+
+    // width
+    const boxWidth = (_containerWidth - Y_AXIS_FIELD_WIDTH) / widgetOptionsState.xAxisCount;
+    if (boxWidth < BOX_MIN_WIDTH) state.boxWidth = BOX_MIN_WIDTH - 2;
+    else state.boxWidth = boxWidth - 2;
+
+    // height
+    const yAxisCount = state.yAxisData.length || 1;
+    const boxHeight = (_containerHeight - 16) / yAxisCount;
+    const padding = 20 / yAxisCount;
+    if (boxHeight < 32) state.boxHeight = 32 - padding;
+    else state.boxHeight = boxHeight - padding;
+
+    if (props.mode === 'overlay') {
+        state.scrollHeight = '100%';
+    } else {
+        const _scrollHeight = scrollViewRef.value?.scrollHeight || 0;
+        if (_containerHeight < _scrollHeight) state.scrollHeight = `${_scrollHeight}px`;
+        else state.scrollHeight = '100%';
+    }
+};
 
 /* Watcher */
 watch(() => widgetOptionsState.formatRulesInfo?.rules, async () => {
@@ -193,6 +218,9 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
     widgetLoading: widgetLoading.value,
     noData: computed(() => (state.data ? !state.data?.results?.length : false)),
 });
+watch(() => widgetOptionsState, () => {
+    resizeWidget();
+}, { deep: true });
 
 /* Lifecycle */
 useWidgetInitAndRefresh({ props, emit, loadWidget });
@@ -204,29 +232,7 @@ defineExpose<WidgetExpose>({
     loadWidget,
 });
 useResizeObserver(colorCodedTableRef, throttle(() => {
-    const _containerWidth = colorCodedTableRef.value?.clientWidth;
-    const _containerHeight = colorCodedTableRef.value?.clientHeight;
-    if (!_containerWidth || !_containerHeight) return;
-
-    // width
-    const boxWidth = (_containerWidth - Y_AXIS_FIELD_WIDTH) / widgetOptionsState.xAxisCount;
-    if (boxWidth < BOX_MIN_WIDTH) state.boxWidth = BOX_MIN_WIDTH - 2;
-    else state.boxWidth = boxWidth - 2;
-
-    // height
-    const yAxisCount = state.yAxisData.length || 1;
-    const boxHeight = (_containerHeight - 16) / yAxisCount;
-    const padding = 20 / yAxisCount;
-    if (boxHeight < 32) state.boxHeight = 32 - padding;
-    else state.boxHeight = boxHeight - padding;
-
-    if (props.mode === 'overlay') {
-        state.scrollHeight = '100%';
-    } else {
-        const _scrollHeight = scrollViewRef.value?.scrollHeight || 0;
-        if (_containerHeight < _scrollHeight) state.scrollHeight = `${_scrollHeight}px`;
-        else state.scrollHeight = '100%';
-    }
+    resizeWidget();
 }, 500));
 </script>
 
@@ -273,7 +279,7 @@ useResizeObserver(colorCodedTableRef, throttle(() => {
                                        position="bottom"
                                        class="tooltip-wrapper"
                             >
-                                {{ targetValue(xField, yField, 'table') }}
+                                <span>{{ targetValue(xField, yField, 'table') }}</span>
                             </p-tooltip>
                         </div>
                         <div class="x-field-text">