dev_add_show-pie (#2241)

Great, thanks!

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

@@ -0,0 +1,88 @@
+import { PREFIX_CLS } from '../../../common/constants';
+import { MsgDataType } from '../../../common/type';
+import { useRef, useState } from 'react';
+import NoPermissionChart from '../NoPermissionChart';
+import { ColumnType } from '../../../common/type';
+import { Spin, Select } from 'antd';
+import PieChart from './PieChart';
+import Bar from '../Bar';
+
+type Props = {
+  data: MsgDataType;
+  question: string;
+  triggerResize?: boolean;
+  loading: boolean;
+  metricField: ColumnType;
+  categoryField: ColumnType;
+  onApplyAuth?: (model: string) => void;
+};
+
+const metricChartSelectOptions = [
+  {
+    value: 'pie',
+    label: '饼图',
+  },
+  {
+    value: 'bar',
+    label: '柱状图',
+  },
+];
+
+const Pie: React.FC<Props> = ({
+  data,
+  question,
+  triggerResize,
+  loading,
+  metricField,
+  categoryField,
+  onApplyAuth,
+}) => {
+  const [chartType, setChartType] = useState('pie');
+  const { entityInfo } = data;
+
+  if (metricField && !metricField?.authorized) {
+    return (
+      <NoPermissionChart
+        model={entityInfo?.dataSetInfo?.name || ''}
+        chartType="pieChart"
+        onApplyAuth={onApplyAuth}
+      />
+    );
+  }
+
+  const prefixCls = `${PREFIX_CLS}-pie`;
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}>
+        {question}
+      </div>
+      <div className={`${prefixCls}-select-options`}>
+        <Select
+          defaultValue="pie"
+          bordered={false}
+          options={metricChartSelectOptions}
+          onChange={(value: string) => setChartType(value)}
+        />
+      </div>
+      {chartType === 'pie' ? (
+        <PieChart
+          data={data}
+          metricField={metricField}
+          categoryField={categoryField}
+          triggerResize={triggerResize}
+        />
+      ) : (
+        <Bar
+          data={data}
+          triggerResize={triggerResize}
+          loading={loading}
+          metricField={metricField}
+          onApplyAuth={onApplyAuth}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Pie;