prod-test-chat-sdk 0.0.1

package/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;

package/src/components/ChatMsg/Pie/style.less

@@ -0,0 +1,43 @@
+@import '../../../styles/index.less';
+
+@pie-prefix-cls: ~'@{prefix-cls}-pie';
+
+.@{pie-prefix-cls} {
+  &-select-options {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-chart {
+    width: 100%;
+    height: 400px;
+    min-height: 400px;
+  }
+
+  &-metric-fields {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 12px;
+  }
+
+  &-metric-field-single {
+    padding-left: 0;
+    font-weight: 500;
+    cursor: default;
+    font-size: 15px;
+    color: var(--text-color);
+
+    &:hover {
+      color: var(--text-color);
+    }
+  }
+
+  &-indicator-name {
+    font-size: 14px;
+    color: var(--text-color);
+    font-weight: 500;
+    margin-top: 2px;
+  }
+}

package/src/components/ChatMsg/Table/index.tsx

@@ -0,0 +1,105 @@
+import { formatByDataFormatType, formatByThousandSeperator } from '../../../utils/utils';
+import { Table as AntTable } from 'antd';
+import { MsgDataType } from '../../../common/type';
+import { CLS_PREFIX } from '../../../common/constants';
+import ApplyAuth from '../ApplyAuth';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+import moment from 'moment';
+
+type Props = {
+  data: MsgDataType;
+  size?: SizeType;
+  question?: string;
+  loading?: boolean;
+  onApplyAuth?: (model: string) => void;
+};
+
+const Table: React.FC<Props> = ({ data, size, loading, question, onApplyAuth }) => {
+  const { entityInfo, queryColumns, queryResults } = data;
+
+  const prefixCls = `${CLS_PREFIX}-table`;
+  const tableColumns: any[] = queryColumns.map(
+    ({ name, bizName, showType, dataFormatType, dataFormat, authorized }) => {
+      return {
+        dataIndex: bizName,
+        key: bizName,
+        title: name || bizName,
+        sorter:
+          showType === 'NUMBER'
+            ? (a, b) => {
+                return a[bizName] - b[bizName];
+              }
+            : undefined,
+        render: (value: string | number) => {
+          if (!authorized) {
+            return (
+              <ApplyAuth model={entityInfo?.dataSetInfo.name || ''} onApplyAuth={onApplyAuth} />
+            );
+          }
+          if (dataFormatType === 'percent') {
+            return (
+              <div className={`${prefixCls}-formatted-value`}>
+                {`${
+                  value
+                    ? formatByDataFormatType(value, dataFormatType, dataFormat)
+                    : '0%'
+                }`}
+              </div>
+            );
+          }
+          if (showType === 'NUMBER') {
+            return (
+              <div className={`${prefixCls}-formatted-value`}>
+                {/* {getFormattedValue(value as number)} */}
+                {formatByThousandSeperator(value)}
+              </div>
+            );
+          }
+          if (bizName.includes('photo')) {
+            return (
+              <div className={`${prefixCls}-photo`}>
+                <img width={40} height={40} src={value as string} alt="" />
+              </div>
+            );
+          }
+          return value;
+        },
+      };
+    }
+  );
+
+  const getRowClassName = (_: any, index: number) => {
+    return index % 2 !== 0 ? `${prefixCls}-even-row` : '';
+  };
+
+  const dateColumn = queryColumns.find(column => column.type === 'DATE' || column.showType === 'DATE');
+  const dataSource = dateColumn
+    ? queryResults.sort((a, b) => moment(a[dateColumn.bizName]).diff(moment(b[dateColumn.bizName])))
+    : queryResults;
+
+  return (
+    <div className={prefixCls}>
+      {question && (
+        <div className={`${prefixCls}-top-bar`}>
+          <div className={`${prefixCls}-indicator-name`}>{question}</div>
+        </div>
+      )}
+
+      <AntTable
+        pagination={
+          queryResults.length <= 10 ? false : { defaultPageSize: 10, position: ['bottomCenter'] }
+        }
+        columns={tableColumns}
+        dataSource={dataSource}
+        style={{ width: '100%', overflowX: 'auto', overflowY: 'hidden' }}
+        rowClassName={getRowClassName}
+        size={size}
+        loading={loading}
+      />
+    </div>
+  );
+};
+
+export default Table;
+
+

package/src/components/ChatMsg/Table/style.less

@@ -0,0 +1,131 @@
+@import '../../../styles/index.less';
+
+@table-prefix-cls: ~'@{supersonic-chat-prefix}-table';
+
+.@{table-prefix-cls} {
+  margin-top: 6px;
+
+  &-photo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-filter-section-wrapper {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-third);
+    margin-bottom: 12px;
+  }
+
+  &-filter-section {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    column-gap: 12px;
+    color: var(--text-color-third);
+  }
+
+  &-top-bar {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: 8px;
+    row-gap: 12px;
+    font-style: italic;
+    margin-bottom: 15px;
+  }
+  &-indicator-name {
+    font-size: 14px;
+    color: var(--text-color);
+    font-weight: 500;
+    margin-top: 2px;
+  }
+
+  &-filter-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-filter-item-label {
+    color: var(--text-color-third);
+  }
+
+  &-filter-item-value {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+
+  &-drill-down-dimensions {
+    margin-top: 12px;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  &-even-row {
+    background-color: #fbfbfb;
+  }
+
+  .ant-table-container table > thead > tr:first-child th:first-child {
+    border-top-left-radius: 12px !important;
+    border-bottom-left-radius: 12px !important;
+  }
+
+  .ant-table-container table > thead > tr:first-child th:last-child {
+    border-top-right-radius: 12px !important;
+    border-bottom-right-radius: 12px !important;
+  }
+
+  .ant-table-tbody > tr.ant-table-row:hover > td {
+    background-color: #fafafa !important;
+  }
+
+  .ant-table-cell { // 更新修改，解决表格内容太长导致显示的问题
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 250px;
+    text-align: center !important;
+  }
+
+  .ant-table-thead {
+    .ant-table-cell {
+      padding-top: 10px;
+      padding-bottom: 10px;
+      color: #666;
+      font-size: 13px;
+      background: #f0f2f5;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .@{table-prefix-cls}-formatted-value {
+    font-weight: 500;
+  }
+
+  .ant-table-thead .ant-table-cell {
+    padding-top: 8.5px;
+    padding-bottom: 8.5px;
+    color: #737b7b;
+    font-weight: 500;
+    font-size: 14px;
+    background-color: #edf2f2;
+  }
+
+  .ant-table-tbody {
+    .ant-table-cell {
+      padding: 12px 2px;
+      color: var(--text-color);
+      font-size: 14px;
+    }
+  }
+
+  .ant-table-pagination.ant-pagination {
+    margin-bottom: 0;
+  }
+}

package/src/components/ChatMsg/Text/index.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { UpOutlined, DownOutlined } from '@ant-design/icons';
+import { CLS_PREFIX } from '../../../common/constants';
+import { ColumnType } from '../../../common/type';
+
+type Props = {
+  columns: ColumnType[];
+  referenceColumn?: ColumnType;
+  dataSource: any[];
+};
+
+const Text: React.FC<Props> = ({ columns, referenceColumn, dataSource }) => {
+  const [text, setText] = useState<string>();
+  const [referenceExpanded, setRederenceExpanded] = useState(false);
+  const [referenceData, setReferenceData] = useState<any[]>([]);
+
+  const prefixCls = `${CLS_PREFIX}-text`;
+
+  const initData = () => {
+    let textValue = dataSource[0][columns[0].bizName];
+    setText(textValue === undefined ? '暂无数据' : textValue);
+    if (referenceColumn) {
+      const referenceDataValue = dataSource[0][referenceColumn.bizName];
+      setReferenceData(referenceDataValue || []);
+    }
+  };
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  const onToggleMore = () => {
+    setRederenceExpanded(!referenceExpanded);
+  };
+
+  return (
+    <div
+      style={{
+        lineHeight: '24px',
+        width: 'fit-content',
+        maxWidth: '100%',
+        overflowX: 'hidden',
+      }}
+    >
+      {text}
+      {referenceData.length > 0 && (
+        <span className={`${prefixCls}-check-more`} onClick={onToggleMore}>
+          {referenceExpanded ? '收起' : '查看'}更多
+          {referenceExpanded ? (
+            <UpOutlined className={`${prefixCls}-arrow-icon`} />
+          ) : (
+            <DownOutlined className={`${prefixCls}-arrow-icon`} />
+          )}
+        </span>
+      )}
+      {referenceData.length > 0 && referenceExpanded && (
+        <div className={`${prefixCls}-reference-data`}>
+          {referenceData.map(item => (
+            <div className={`${prefixCls}-reference-item`} key={item.doc_title}>
+              <div className={`${prefixCls}-reference-item-title`}>{item.doc_title}</div>
+              <div className={`${prefixCls}-reference-item-value`}>{item.doc_chunk}</div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Text;

package/src/components/ChatMsg/Text/style.less

@@ -0,0 +1,38 @@
+@import '../../../styles/index.less';
+
+@text-prefix-cls: ~'@{supersonic-chat-prefix}-text';
+
+.@{text-prefix-cls} {
+  &-check-more {
+    margin-left: 12px;
+    font-size: 13px;
+    color: var(--chat-blue);
+    cursor: pointer;
+  }
+
+  &-arrow-icon {
+    margin-left: 2px;
+    font-size: 12px;
+  }
+
+  &-reference-data {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    margin-top: 10px;
+  }
+
+  &-reference-item {
+    font-size: 13px;
+  }
+
+  &-reference-item-title {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+
+  &-reference-item-value {
+    color: var(--text-color-secondary);
+    margin-top: 4px;
+  }
+}

package/src/components/ChatMsg/WebPage/index.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MsgDataType } from '../../../common/type';
+import { getToken, isMobile, isProd } from '../../../utils/utils';
+import { webPageHost } from '../../../common/env';
+
+type Props = {
+  id: string | number;
+  data: MsgDataType;
+};
+
+const DEFAULT_HEIGHT = 800;
+
+const WebPage: React.FC<Props> = ({ id, data }) => {
+  const [pluginUrl, setPluginUrl] = useState('');
+  const [height, setHeight] = useState(DEFAULT_HEIGHT);
+
+  const {
+    name,
+    webPage: { url, params },
+  } = data.response || {};
+
+  const handleMessage = useCallback((event: MessageEvent) => {
+    const messageData = event.data;
+    const { type, payload } = messageData;
+    if (type === 'changeMiniProgramContainerSize') {
+      const { msgId, height } = payload;
+      if (`${msgId}` === `${id}`) {
+        setHeight(height);
+      }
+      return;
+    }
+    if (messageData === 'storyResize') {
+      const ifr: any = document.getElementById(`reportIframe_${id}`);
+      const iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow;
+      setTimeout(() => {
+        setHeight(isProd() ? calcPageHeight(iDoc) : DEFAULT_HEIGHT);
+      }, 200);
+      return;
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [handleMessage]);
+
+  function calcPageHeight(doc: any) {
+    const titleAreaEl = doc.getElementById('titleArea');
+    const titleAreaHeight = Math.max(
+      titleAreaEl?.clientHeight || 0,
+      titleAreaEl?.scrollHeight || 0
+    );
+    const dashboardGridEl = doc.getElementsByClassName('dashboardGrid')?.[0];
+    const dashboardGridHeight = Math.max(
+      dashboardGridEl?.clientHeight || 0,
+      dashboardGridEl?.scrollHeight || 0
+    );
+    return Math.max(titleAreaHeight + dashboardGridHeight + 10, DEFAULT_HEIGHT);
+  }
+
+  const initData = () => {
+    const heightValue =
+      params?.find((option: any) => option.paramType === 'FORWARD' && option.key === 'height')
+        ?.value || DEFAULT_HEIGHT;
+    setHeight(heightValue);
+    let urlValue = url;
+    const valueParams = (params || [])
+      .filter((option: any) => option.paramType !== 'FORWARD')
+      .reduce((result: any, item: any) => {
+        result[item.key] = item.value;
+        return result;
+      }, {});
+    if (urlValue.includes('?type=dashboard') || urlValue.includes('?type=widget')) {
+      const filterData = encodeURIComponent(
+        JSON.stringify(
+          urlValue.includes('dashboard')
+            ? {
+                global: valueParams,
+              }
+            : {
+                local: valueParams,
+              }
+        )
+      );
+      urlValue = urlValue.replace(
+        '?',
+        `?token=${getToken()}&miniProgram=true&reportName=${name}&filterData=${filterData}&`
+      );
+      urlValue = `${webPageHost}${urlValue}`;
+    } else {
+      const params = Object.keys(valueParams || {}).map(key => `${key}=${valueParams[key]}`);
+      if (params.length > 0) {
+        if (url.includes('?')) {
+          urlValue = urlValue.replace('?', `?${params.join('&')}&`);
+        } else {
+          urlValue = `${urlValue}?${params.join('&')}`;
+        }
+      }
+    }
+    setPluginUrl(urlValue);
+  };
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  return (
+    <iframe
+      id={`reportIframe_${id}`}
+      name={`reportIframe_${id}`}
+      src={pluginUrl}
+      style={{
+        width: isMobile ? 'calc(100vw - 20px)' : 'calc(100vw - 410px)',
+        height,
+        border: 'none',
+      }}
+      title="reportIframe"
+      allowFullScreen
+    />
+  );
+};
+
+export default WebPage;