(feat)(chat-sdk) Optimize ChatMsg chart conditions (#2286)

webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx

@@ -52,14 +52,14 @@ const ChatMsg: React.FC<Props> = ({
 
   const prefixCls = `${PREFIX_CLS}-chat-msg`;
 
-  const updateColummns = (queryColumnsValue: ColumnType[]) => {
+  const updateColumns = (queryColumnsValue: ColumnType[]) => {
     const referenceColumn = queryColumnsValue.find(item => item.showType === 'more');
     setReferenceColumn(referenceColumn);
     setColumns(queryColumnsValue.filter(item => item.showType !== 'more'));
   };
 
   useEffect(() => {
-    updateColummns(queryColumns);
+    updateColumns(queryColumns);
     setDataSource(queryResults);
     setDefaultMetricField(chatContext?.metrics?.[0]);
     setActiveMetricField(chatContext?.metrics?.[0]);
@@ -115,26 +115,45 @@ const ChatMsg: React.FC<Props> = ({
       metricFields.length > 0 &&
       categoryField.length <= 1 &&
       !(metricFields.length > 1 && categoryField.length > 0) &&
-      !dataSource.every(item => item[dateField.bizName] === dataSource[0][dateField.bizName]);
+      dataSource.some(item => item[dateField.bizName] !== dataSource[0][dateField.bizName]);
 
     if (isMetricTrend) {
       return MsgContentTypeEnum.METRIC_TREND;
     }
 
+    /**
+     * For Pie Chart:
+     * 1. There should be at least one category field.
+     * 2. There should be exactly one metric field.
+     * 3. All metric values should be non-negative.
+     * 4. limit the number of data points based on device type:
+     *   - For mobile devices, limit to 5 data points.
+     *   - For desktop devices, limit to 10 data points.
+     */
     const isMetricPie =
       categoryField.length > 0 &&
       metricFields?.length === 1 &&
       (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 10) &&
-      dataSource.every(item => item[metricFields[0].bizName] > 0);
+      dataSource.every(item => item[metricFields[0].bizName] >= 0);
 
     if (isMetricPie) {
       return MsgContentTypeEnum.METRIC_PIE;
     }
 
+    /**
+     * For Bar Chart:
+     * 1. There should be at least one category field.
+     * 2. There should be exactly one metric field.
+     * 3. The number of data points should be limited based on device type:
+     *  - For mobile devices, limit to 5 data points.
+     *  - For desktop devices, limit to 50 data points.
+     * 4. All metric values should be finite numbers.
+     */
     const isMetricBar =
       categoryField?.length > 0 &&
       metricFields?.length === 1 &&
-      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50);
+      (isMobile ? dataSource?.length <= 5 : dataSource?.length <= 50) &&
+      dataSource.every(item => isFinite(Number(item[metricFields[0].bizName])));
 
     if (isMetricBar) {
       return MsgContentTypeEnum.METRIC_BAR;
@@ -226,9 +245,6 @@ const ChatMsg: React.FC<Props> = ({
         );
       case MsgContentTypeEnum.METRIC_PIE:
         const categoryField = columns.find(item => item.showType === 'CATEGORY');
-        if (!categoryField) {
-          return null;
-        }
         return (
           <Pie
             data={{ ...data, queryColumns: columns, queryResults: dataSource }}
@@ -236,7 +252,7 @@ const ChatMsg: React.FC<Props> = ({
             triggerResize={triggerResize}
             loading={loading}
             metricField={metricFields[0]}
-            categoryField={categoryField}
+            categoryField={categoryField!}
           />
         );
       case MsgContentTypeEnum.MARKDOWN:
@@ -266,7 +282,7 @@ const ChatMsg: React.FC<Props> = ({
     });
     setLoading(false);
     if (res.code === 200) {
-      updateColummns(res.data?.queryColumns || []);
+      updateColumns(res.data?.queryColumns || []);
       setDataSource(res.data?.queryResults || []);
     }
   };