test-chat-sdk 0.0.0

package/src/components/ChatMsg/MetricCard/PeriodCompareItem.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { PREFIX_CLS } from '../../../common/constants';
+import IconFont from '../../IconFont';
+
+type Props = {
+  title: string;
+  value: string;
+};
+
+const PeriodCompareItem: React.FC<Props> = ({ title, value }) => {
+  const prefixCls = `${PREFIX_CLS}-metric-card`;
+
+  const itemValueClass = classNames(`${prefixCls}-period-compare-item-value`, {
+    [`${prefixCls}-period-compare-item-value-up`]: !value.includes('-'),
+    [`${prefixCls}-period-compare-item-value-down`]: value.includes('-'),
+  });
+
+  return (
+    <div className={`${prefixCls}-period-compare-item`}>
+      <div className={`${prefixCls}-period-compare-item-title`}>{title}</div>
+      <div className={itemValueClass}>
+        <IconFont type={!value.includes('-') ? 'icon-shangsheng' : 'icon-xiajiang'} />
+        <div>{value}</div>
+      </div>
+    </div>
+  );
+};
+
+export default PeriodCompareItem;

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

@@ -0,0 +1,80 @@
+import { PREFIX_CLS } from '../../../common/constants';
+import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils';
+import ApplyAuth from '../ApplyAuth';
+import { MsgDataType } from '../../../common/type';
+import PeriodCompareItem from './PeriodCompareItem';
+import { Spin } from 'antd';
+import classNames from 'classnames';
+import { SwapOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+
+type Props = {
+  data: MsgDataType;
+  question: string;
+  loading: boolean;
+  onApplyAuth?: (model: string) => void;
+};
+
+const MetricCard: React.FC<Props> = ({ data, question, loading, onApplyAuth }) => {
+  const { queryMode, queryColumns, queryResults, entityInfo, aggregateInfo } = data;
+
+  const { metricInfos } = aggregateInfo || {};
+
+  const indicatorColumn = queryColumns?.find(column => column.showType === 'NUMBER');
+  const indicatorColumnName = indicatorColumn?.bizName || '';
+
+  const { dataFormatType, dataFormat } = indicatorColumn || {};
+  const value = queryResults?.[0]?.[indicatorColumnName] || 0;
+
+  const prefixCls = `${PREFIX_CLS}-metric-card`;
+
+  const matricCardClass = classNames(prefixCls, {
+    [`${PREFIX_CLS}-metric-card-dsl`]: queryMode === 'LLM_S2SQL',
+  });
+
+  const [isNumber, setIsNumber] = useState(false);
+  const handleNumberClick = () => {
+    setIsNumber(!isNumber);
+  };
+
+  return (
+    <div className={matricCardClass}>
+      <div className={`${prefixCls}-top-bar`}>
+        <div className={`${prefixCls}-indicator-name`}>{question}</div>
+      </div>
+      <Spin spinning={loading}>
+        <div className={`${prefixCls}-indicator`}>
+          {indicatorColumn && !indicatorColumn?.authorized ? (
+            <ApplyAuth model={entityInfo?.dataSetInfo.name || ''} onApplyAuth={onApplyAuth} />
+          ) : (
+            <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+              <div className={`${prefixCls}-indicator-value`}>
+                {typeof value === 'string' && isNaN(+value)
+                  ? value
+                  : dataFormatType === 'percent' || dataFormatType === 'decimal'
+                  ? formatByDataFormatType(value, dataFormatType, dataFormat)
+                  : isNumber
+                  ? formatMetric(value) || '-'
+                  : formatNumberWithCN(+value)}
+              </div>
+              {!isNaN(+value) && +value >= 10000 && (
+                <div className={`${prefixCls}-indicator-switch`}>
+                  <SwapOutlined onClick={handleNumberClick} />
+                </div>
+              )}
+            </div>
+          )}
+          {metricInfos?.length > 0 && (
+            <div className={`${prefixCls}-period-compare`}>
+              {Object.keys(metricInfos[0].statistics).map((key: any) => (
+                <PeriodCompareItem title={key} value={metricInfos[0].statistics[key]} />
+              ))}
+            </div>
+          )}
+        </div>
+      </Spin>
+    </div>
+  );
+};
+
+export default MetricCard;

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

@@ -0,0 +1,126 @@
+@import '../../../styles/index.less';
+
+@metric-card-prefix-cls: ~'@{supersonic-chat-prefix}-metric-card';
+
+.@{metric-card-prefix-cls} {
+  width: 100%;
+  row-gap: 4px;
+
+  &-dsl {
+    height: 90px;
+  }
+
+  &-top-bar {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: 8px;
+  }
+
+  &-filter-section-wrapper {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-third);
+  }
+
+  &-filter-section {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    column-gap: 12px;
+    color: var(--text-color-third);
+  }
+
+  &-filter-item {
+    margin-right: 4px;
+    display: flex;
+    align-items: center;
+  }
+
+  &-filter-item-label {
+    color: var(--text-color-third);
+  }
+
+  &-filter-item-value {
+    color: var(--text-color);
+    font-weight: 500;
+  }
+
+  &-indicator-name {
+    font-size: 14px;
+    color: var(--text-color);
+    font-weight: 500;
+    margin-top: 2px;
+  }
+
+  &-query-tootip {
+    margin-left: 5px;
+  }
+  
+  &-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    margin: 12px 0;
+  }
+
+  &-date-range {
+    color: var(--text-color-fourth);
+    font-size: 12px;
+    margin-top: 8px;
+  }
+
+  &-indicator-value {
+    color: var(--text-color);
+    font-weight: 700;
+    font-size: 40px;
+    color: var(--chat-blue);
+  }
+
+  &-indicator-switch {
+    color: var(--text-color-fourth);
+    font-size: 18px;
+    margin-left: 6px;
+    margin-bottom: 3px;
+  }
+
+  &-period-compare {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    column-gap: 40px;
+    font-size: 13px;
+    overflow-x: auto;
+    margin-bottom: 12px;
+  }
+
+  &-period-compare-item {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+  }
+
+  &-period-compare-item-title {
+    color: var(--text-color-fourth);
+  }
+
+  &-period-compare-item-value {
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
+    font-weight: 500;
+  }
+
+  &-period-compare-item-value-up {
+    color: rgb(252, 103, 114);
+  }
+
+  &-period-compare-item-value-down {
+    color: rgb(45, 202, 147);
+  }
+
+  &-drill-down-dimensions {
+    margin-top: 2px;
+  }
+}

package/src/components/ChatMsg/MetricTrend/MetricInfo.tsx

@@ -0,0 +1,60 @@
+import { PREFIX_CLS } from '../../../common/constants';
+import { formatByDataFormatType, formatMetric, formatNumberWithCN } from '../../../utils/utils';
+import { AggregateInfoType, ColumnType } from '../../../common/type';
+import PeriodCompareItem from '../MetricCard/PeriodCompareItem';
+import { SwapOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+
+type Props = {
+  aggregateInfo: AggregateInfoType;
+  currentMetricField: ColumnType;
+};
+
+const MetricInfo: React.FC<Props> = ({ aggregateInfo, currentMetricField }) => {
+  const { metricInfos } = aggregateInfo || {};
+  const metricInfo = metricInfos?.[0] || {};
+  const { date, value, statistics } = metricInfo || {};
+  const { dataFormatType, dataFormat } = currentMetricField;
+
+  const prefixCls = `${PREFIX_CLS}-metric-info`;
+
+  const [isNumber, setIsNumber] = useState(false);
+  const handleNumberClick = () => {
+    setIsNumber(!isNumber);
+  };
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-indicator`}>
+        <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+          <div className={`${prefixCls}-indicator-value`}>
+            {dataFormatType === 'percent' || dataFormatType === 'decimal'
+              ? formatByDataFormatType(value, dataFormatType, dataFormat)
+              : isNumber
+              ? formatMetric(value)
+              : formatNumberWithCN(+value)}
+          </div>
+          {!isNaN(+value) && +value >= 10000 && (
+            <div className={`${prefixCls}-indicator-switch`}>
+              <SwapOutlined onClick={handleNumberClick} />
+            </div>
+          )}
+        </div>
+        <div className={`${prefixCls}-bottom-section`}>
+          <div className={`${prefixCls}-date`}>
+            最新数据日期：<span className={`${prefixCls}-date-value`}>{date}</span>
+          </div>
+          {metricInfos?.length > 0 && (
+            <div className={`${prefixCls}-period-compare`}>
+              {Object.keys(statistics).map((key: any) => (
+                <PeriodCompareItem title={key} value={metricInfos[0].statistics[key]} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MetricInfo;

package/src/components/ChatMsg/MetricTrend/MetricTrendChart.tsx

@@ -0,0 +1,235 @@
+import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants';
+import {
+  formatByDataFormatType,
+  getFormattedValue,
+  getMinMaxDate,
+  groupByColumn,
+  normalizeTrendData,
+} from '../../../utils/utils';
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import moment from 'moment';
+import { ColumnType } from '../../../common/type';
+import NoPermissionChart from '../NoPermissionChart';
+import classNames from 'classnames';
+import { isArray } from 'lodash';
+import { useExportByEcharts } from '../../../hooks';
+import { ChartItemContext } from '../../ChatItem';
+
+type Props = {
+  model?: string;
+  dateColumnName: string;
+  categoryColumnName: string;
+  metricField: ColumnType;
+  resultList: any[];
+  triggerResize?: boolean;
+  onApplyAuth?: (model: string) => void;
+  chartType?: string;
+};
+
+const MetricTrendChart: React.FC<Props> = ({
+  model,
+  dateColumnName,
+  categoryColumnName,
+  metricField,
+  resultList,
+  triggerResize,
+  onApplyAuth,
+  chartType,
+}) => {
+  const chartRef = useRef<any>();
+  const instanceRef = useRef<ECharts>();
+
+  const renderChart = () => {
+    let instanceObj: any;
+    if (!instanceRef.current) {
+      instanceObj = echarts.init(chartRef.current);
+      instanceRef.current = instanceObj;
+    } else {
+      instanceObj = instanceRef.current;
+      instanceObj.clear();
+    }
+
+    const valueColumnName = metricField.bizName;
+    const dataSource = resultList.map((item: any) => {
+      return {
+        ...item,
+        [dateColumnName]: Array.isArray(item[dateColumnName])
+          ? moment(item[dateColumnName].join('')).format('MM-DD')
+          : item[dateColumnName],
+      };
+    });
+
+    const groupDataValue = groupByColumn(dataSource, categoryColumnName);
+    const [startDate, endDate] = getMinMaxDate(dataSource, dateColumnName);
+    const groupData = Object.keys(groupDataValue).reduce((result: any, key) => {
+      result[key] =
+        startDate &&
+        endDate &&
+        (dateColumnName.includes('date') || dateColumnName.includes('month'))
+          ? normalizeTrendData(
+              groupDataValue[key],
+              dateColumnName,
+              valueColumnName,
+              startDate,
+              endDate,
+              dateColumnName.includes('month') ? 'months' : 'days'
+            )
+          : groupDataValue[key];
+      return result;
+    }, {});
+
+    const sortedGroupKeys = Object.keys(groupData).sort((a, b) => {
+      return (
+        groupData[b][groupData[b].length - 1][valueColumnName] -
+        groupData[a][groupData[a].length - 1][valueColumnName]
+      );
+    });
+
+    const xData = groupData[sortedGroupKeys[0]]?.map((item: any) => {
+      const date = isArray(item[dateColumnName])
+        ? item[dateColumnName].join('-')
+        : `${item[dateColumnName]}`;
+      return date.length === 10 ? moment(date).format('MM-DD') : date;
+    });
+
+    instanceObj.setOption({
+      legend: categoryColumnName && {
+        left: 0,
+        top: 0,
+        icon: 'rect',
+        itemWidth: 15,
+        itemHeight: 5,
+        type: 'scroll',
+      },
+      xAxis: {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLabel: {
+          showMaxLabel: true,
+          color: '#999',
+        },
+        data: xData,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            opacity: 0.3,
+          },
+        },
+        axisLabel: {
+          formatter: function (value: any) {
+            return value === 0
+              ? 0
+              : metricField.dataFormatType === 'percent'
+              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              : getFormattedValue(value);
+          },
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: function (params: any[]) {
+          const param = params[0];
+          const valueLabels = params
+            .sort((a, b) => b.value - a.value)
+            .map(
+              (item: any) =>
+                `<div style="margin-top: 3px;">${
+                  item.marker
+                } <span style="display: inline-block; width: 70px; margin-right: 12px;">${
+                  item.seriesName
+                }</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
+                  item.value === ''
+                    ? '-'
+                    : metricField.dataFormatType === 'percent' ||
+                      metricField.dataFormatType === 'decimal'
+                    ? formatByDataFormatType(item.value, metricField.dataFormatType, metricField.dataFormat)
+                    : getFormattedValue(item.value)
+                }</span></div>`
+            )
+            .join('');
+          return `${param.name}<br />${valueLabels}`;
+        },
+      },
+      grid: {
+        left: '1%',
+        right: '4%',
+        bottom: '3%',
+        top: categoryColumnName ? 45 : 20,
+        containLabel: true,
+      },
+      series: sortedGroupKeys.slice(0, 20).map((category, index) => {
+        const data = groupData[category];
+        return {
+          type: chartType,
+          name: categoryColumnName ? category : metricField.name,
+          symbol: 'circle',
+          showSymbol: data.length === 1,
+          smooth: true,
+          data: data.map((item: any) => {
+            const value = item[valueColumnName];
+            return (metricField.dataFormatType === 'percent' ||
+              metricField.dataFormatType === 'decimal') &&
+              metricField.dataFormat?.needMultiply100
+              ? value * 100
+              : value;
+          }),
+          color: THEME_COLOR_LIST[index],
+        };
+      }),
+    });
+    instanceObj.resize();
+  };
+
+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question: metricField.name,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
+  useEffect(() => {
+    if (metricField.authorized) {
+      renderChart();
+    }
+  }, [resultList, metricField, chartType]);
+
+  useEffect(() => {
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
+    }
+  }, [triggerResize]);
+
+  const prefixCls = `${CLS_PREFIX}-metric-trend`;
+
+  const flowTrendChartClass = classNames(`${prefixCls}-flow-trend-chart`, {
+    [`${prefixCls}-flow-trend-chart-single`]: !categoryColumnName,
+  });
+
+  return (
+    <div>
+      {!metricField.authorized ? (
+        <NoPermissionChart model={model || ''} onApplyAuth={onApplyAuth} />
+      ) : (
+        <div className={flowTrendChartClass} ref={chartRef} />
+      )}
+    </div>
+  );
+};
+
+export default MetricTrendChart;

package/src/components/ChatMsg/MetricTrend/MultiMetricsTrendChart.tsx

@@ -0,0 +1,162 @@
+import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants';
+import { getFormattedValue } from '../../../utils/utils';
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import moment from 'moment';
+import { ColumnType } from '../../../common/type';
+import { isArray } from 'lodash';
+import { ChartItemContext } from '../../ChatItem';
+import { useExportByEcharts } from '../../../hooks';
+
+type Props = {
+  dateColumnName: string;
+  metricFields: ColumnType[];
+  resultList: any[];
+  triggerResize?: boolean;
+  chartType?: string;
+  question: string;
+};
+
+const MultiMetricsTrendChart: React.FC<Props> = ({
+  dateColumnName,
+  metricFields,
+  resultList,
+  triggerResize,
+  chartType,
+  question,
+}) => {
+  const chartRef = useRef<any>();
+  const instanceRef = useRef<ECharts>();
+  const renderChart = () => {
+    let instanceObj: any;
+    if (!instanceRef.current) {
+      instanceObj = echarts.init(chartRef.current);
+      instanceRef.current = instanceObj;
+    } else {
+      instanceObj = instanceRef.current;
+      instanceObj.clear();
+    }
+
+    const xData = resultList?.map((item: any) => {
+      const date = isArray(item[dateColumnName])
+        ? item[dateColumnName].join('-')
+        : `${item[dateColumnName]}`;
+      return date.length === 10 ? moment(date).format('MM-DD') : date;
+    });
+
+    instanceObj.setOption({
+      legend: {
+        left: 0,
+        top: 0,
+        icon: 'rect',
+        itemWidth: 15,
+        itemHeight: 5,
+        type: 'scroll',
+      },
+      xAxis: {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: CHART_SECONDARY_COLOR,
+          },
+        },
+        axisLabel: {
+          showMaxLabel: true,
+          color: '#999',
+        },
+        data: xData,
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            opacity: 0.3,
+          },
+        },
+        axisLabel: {
+          formatter: function (value: any) {
+            return value === 0 ? 0 : getFormattedValue(value);
+          },
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter: function (params: any[]) {
+          const param = params[0];
+          const valueLabels = params
+            .sort((a, b) => b.value - a.value)
+            .map(
+              (item: any) =>
+                `<div style="margin-top: 3px;">${
+                  item.marker
+                } <span style="display: inline-block; width: 70px; margin-right: 12px;">${
+                  item.seriesName
+                }</span><span style="display: inline-block; width: 90px; text-align: right; font-weight: 500;">${
+                  item.value === '' ? '-' : getFormattedValue(item.value)
+                }</span></div>`
+            )
+            .join('');
+          return `${param.name}<br />${valueLabels}`;
+        },
+      },
+      grid: {
+        left: '1%',
+        right: '4%',
+        bottom: '3%',
+        top: 45,
+        containLabel: true,
+      },
+      series: metricFields.map((metricField, index) => {
+        return {
+          type: chartType,
+          name: metricField.name,
+          symbol: 'circle',
+          showSymbol: resultList.length === 1,
+          smooth: true,
+          data: resultList.map((item: any) => {
+            const value = item[metricField.bizName];
+            return (metricField.dataFormatType === 'percent' ||
+              metricField.dataFormatType === 'decimal') &&
+              metricField.dataFormat?.needMultiply100
+              ? value * 100
+              : value;
+          }),
+          color: THEME_COLOR_LIST[index],
+        };
+      }),
+    });
+    instanceObj.resize();
+  };
+
+  const { downloadChartAsImage } = useExportByEcharts({
+    instanceRef,
+    question,
+  });
+
+  const { register } = useContext(ChartItemContext);
+
+  register('downloadChartAsImage', downloadChartAsImage);
+
+  useEffect(() => {
+    renderChart();
+  }, [resultList, chartType]);
+
+  useEffect(() => {
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
+    }
+  }, [triggerResize]);
+
+  const prefixCls = `${CLS_PREFIX}-metric-trend`;
+
+  return <div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />;
+};
+
+export default MultiMetricsTrendChart;