prod-test-chat-sdk 0.0.1

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;

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

@@ -0,0 +1,127 @@
+import { CLS_PREFIX } from '../../../common/constants';
+import { DrillDownDimensionType, FieldType, MsgDataType } from '../../../common/type';
+import { isMobile } from '../../../utils/utils';
+import MetricTrendChart from './MetricTrendChart';
+import { Spin, Select } from 'antd';
+import Table from '../Table';
+import MetricInfo from './MetricInfo';
+import DateOptions from '../DateOptions';
+import MultiMetricsTrendChart from './MultiMetricsTrendChart';
+import { useState } from 'react';
+
+const metricChartSelectOptions = [
+  {
+    value: 'line',
+    label: '折线图',
+  },
+  {
+    value: 'bar',
+    label: '柱状图',
+  },
+];
+
+type Props = {
+  data: MsgDataType;
+  question: string;
+  chartIndex: number;
+  triggerResize?: boolean;
+  loading: boolean;
+  activeMetricField?: FieldType;
+  drillDownDimension?: DrillDownDimensionType;
+  currentDateOption?: number;
+  onApplyAuth?: (model: string) => void;
+  onSelectDateOption: (value: number) => void;
+};
+
+const MetricTrend: React.FC<Props> = ({
+  data,
+  question,
+  chartIndex,
+  triggerResize,
+  loading,
+  activeMetricField,
+  drillDownDimension,
+  currentDateOption,
+  onApplyAuth,
+  onSelectDateOption,
+}) => {
+  const { queryColumns, queryResults, aggregateInfo, entityInfo, chatContext } = data;
+  const [chartType, setChartType] = useState('line');
+
+  const dateField: any = queryColumns?.find(
+    (column: any) => column.showType === 'DATE' || column.type === 'DATE'
+  );
+  const dateColumnName = dateField?.bizName || '';
+  const categoryColumnName =
+    queryColumns?.find((column: any) => column.showType === 'CATEGORY')?.bizName || '';
+  const metricFields = queryColumns?.filter((column: any) => column.showType === 'NUMBER');
+
+  const currentMetricField = queryColumns?.find((column: any) => column.showType === 'NUMBER');
+
+  if (!currentMetricField) {
+    return null;
+  }
+
+  const prefixCls = `${CLS_PREFIX}-metric-trend`;
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-charts`}>
+        <div className={`${prefixCls}-top-bar`}>
+          <div className={`${prefixCls}-metric-fields ${prefixCls}-metric-field-single`}>
+            {question}
+          </div>
+        </div>
+        <Spin spinning={loading}>
+          <div className={`${prefixCls}-content`}>
+            {!isMobile &&
+              aggregateInfo?.metricInfos?.length > 0 &&
+              drillDownDimension === undefined && (
+                <MetricInfo aggregateInfo={aggregateInfo} currentMetricField={currentMetricField} />
+              )}
+            <div className={`${prefixCls}-select-options`}>
+              <DateOptions
+                chatContext={chatContext}
+                currentDateOption={currentDateOption}
+                onSelectDateOption={onSelectDateOption}
+              />
+              <div>
+                <Select
+                  defaultValue="line"
+                  bordered={false}
+                  options={metricChartSelectOptions}
+                  onChange={(value: string) => setChartType(value)}
+                />
+              </div>
+            </div>
+            {queryResults?.length === 1 || chartIndex % 2 === 1 ? (
+              <Table data={{ ...data, queryResults }} onApplyAuth={onApplyAuth} />
+            ) : metricFields.length > 1 ? (
+              <MultiMetricsTrendChart
+                dateColumnName={dateColumnName}
+                metricFields={metricFields}
+                question={question}
+                resultList={queryResults}
+                triggerResize={triggerResize}
+                chartType={chartType}
+              />
+            ) : (
+              <MetricTrendChart
+                model={entityInfo?.dataSetInfo.name}
+                dateColumnName={dateColumnName}
+                categoryColumnName={categoryColumnName}
+                metricField={currentMetricField}
+                resultList={queryResults}
+                triggerResize={triggerResize}
+                onApplyAuth={onApplyAuth}
+                chartType={chartType}
+              />
+            )}
+          </div>
+        </Spin>
+      </div>
+    </div>
+  );
+};
+
+export default MetricTrend;

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

@@ -0,0 +1,195 @@
+@import '../../../styles/index.less';
+
+@metric-trend-prefix-cls: ~'@{supersonic-chat-prefix}-metric-trend';
+
+@metric-info-prefix-cls: ~'@{supersonic-chat-prefix}-metric-info';
+
+.@{metric-trend-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 4px;
+  width: 100%;
+  row-gap: 4px;
+
+  &-top-bar {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    row-gap: 12px;
+  }
+
+  &-filter-section-wrapper {
+    display: flex;
+    align-items: center;
+    color: var(--text-color-third);
+    margin-left: 4px;
+  }
+
+  &-filter-section {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    column-gap: 12px;
+    color: var(--text-color-third);
+  }
+
+  &-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;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 12px;
+  }
+
+  &-select-options {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &-indicator {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    justify-content: center;
+  }
+
+  &-date-range {
+    color: var(--text-color-fourth);
+    font-size: 14px;
+  }
+
+  &-indicator-value {
+    color: var(--text-color);
+    font-weight: 600;
+    font-size: 30px;
+  }
+
+  &-indicator-name {
+    color: var(--text-color-fourth);
+    font-size: 14px;
+  }
+
+  &-flow-trend-chart {
+    margin-top: 4px;
+    height: 230px;
+  }
+
+  &-flow-trend-chart-single {
+    height: 180px;
+  }
+
+  &-charts {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 8px;
+  }
+
+  &-metric-fields {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    row-gap: 12px;
+    color: var(--text-color);
+    font-size: 15px;
+  }
+
+  &-metric-field {
+    display: inline-block;
+    box-sizing: border-box;
+    height: auto;
+    margin: 0;
+    margin-right: 8px;
+    padding: 1px 8px;
+    color: var(--text-color-third);
+    font-variant: tabular-nums;
+    line-height: 20px;
+    white-space: nowrap;
+    list-style: none;
+    border-color: transparent;
+    border-radius: 2px;
+    cursor: pointer;
+    opacity: 1;
+    transition: all 0.3s;
+    font-feature-settings: 'tnum', 'tnum';
+
+    &:hover {
+      color: var(--chat-blue);
+    }
+  }
+
+  &-metric-field-single {
+    padding-left: 0;
+    font-weight: 500;
+    cursor: default;
+    font-size: 15px;
+    color: var(--text-color);
+
+    &:hover {
+      color: var(--text-color);
+    }
+  }
+}
+
+.@{metric-info-prefix-cls} {
+  &-indicator {
+    display: flex;
+    align-items: baseline;
+    column-gap: 12px;
+  }
+
+  &-indicator-value {
+    color: var(--text-color);
+    font-weight: 500;
+    font-size: 28px;
+    line-height: 40px;
+    margin-top: 2px;
+    color: var(--text-color-secondary);
+  }
+
+  &-bottom-section {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+    margin-top: 4px;
+  }
+
+  &-date {
+    color: var(--text-color-fourth);
+    font-size: 13px;
+  }
+
+  &-date-value {
+    color: var(--chat-blue);
+  }
+
+  &-indicator-switch {
+    color: var(--text-color-fourth);
+    font-size: 18px;
+    margin-left: 6px;
+    margin-bottom: 3px;
+  }
+
+  &-period-compare {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+    font-size: 13px;
+    overflow-x: auto;
+  }
+}

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

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import { CLS_PREFIX } from '../../../common/constants';
+import ApplyAuth from '../ApplyAuth';
+
+type Props = {
+  model: string;
+  chartType?: string;
+  onApplyAuth?: (model: string) => void;
+};
+
+const NoPermissionChart: React.FC<Props> = ({ model, chartType, onApplyAuth }) => {
+  const prefixCls = `${CLS_PREFIX}-no-permission-chart`;
+
+  const chartHolderClass = classNames(`${prefixCls}-holder`, {
+    [`${prefixCls}-bar-chart-holder`]: chartType === 'barChart',
+  });
+
+  return (
+    <div className={prefixCls}>
+      <div className={chartHolderClass} />
+      <div className={`${prefixCls}-no-permission`}>
+        <ApplyAuth model={model} onApplyAuth={onApplyAuth} />
+      </div>
+    </div>
+  );
+};
+
+export default NoPermissionChart;

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

@@ -0,0 +1,26 @@
+@import '../../../styles/index.less';
+
+@no-permission-chart-prefix-cls: ~'@{supersonic-chat-prefix}-no-permission-chart';
+
+.@{no-permission-chart-prefix-cls} {
+  position: relative;
+  width: 100%;
+  height: 300px;
+
+  &-holder {
+    width: 100%;
+    height: 280px;
+  }
+
+  &-bar-chart-holder {
+    margin-top: 20px;
+  }
+
+  &-no-permission {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    padding: 4px 12px;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/components/ChatMsg/Pie/PieChart.tsx

@@ -0,0 +1,134 @@
+import { PREFIX_CLS, THEME_COLOR_LIST } from '../../../common/constants';
+import { MsgDataType } from '../../../common/type';
+import { formatByDataFormatType, getFormattedValue } from '../../../utils/utils';
+import type { ECharts } from 'echarts';
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import { ColumnType } from '../../../common/type';
+import moment from 'moment';
+
+type Props = {
+  data: MsgDataType;
+  metricField: ColumnType;
+  categoryField: ColumnType;
+  triggerResize?: boolean;
+};
+
+const PieChart: React.FC<Props> = ({
+  data,
+  metricField,
+  categoryField,
+  triggerResize,
+}) => {
+  const chartRef = useRef<any>();
+  const instanceRef = useRef<ECharts>();
+
+  const { queryResults } = data;
+  const categoryColumnName = categoryField?.bizName || '';
+  const metricColumnName = metricField?.bizName || '';
+
+  const renderChart = () => {
+    let instanceObj: any;
+    if (!instanceRef.current) {
+      instanceObj = echarts.init(chartRef.current);
+      instanceRef.current = instanceObj;
+    } else {
+      instanceObj = instanceRef.current;
+    }
+
+    const data = queryResults || [];
+    
+    // 检查是否有日期字段，如果有则按时间排序
+    const dateColumn = queryResults[0] ? Object.keys(queryResults[0]).find(key => 
+      key.toLowerCase().includes('date') || key.toLowerCase().includes('time')
+    ) : null;
+    
+    let sortedData = data;
+    if (dateColumn) {
+      sortedData = [...data].sort((a, b) => {
+        return moment(a[dateColumn]).diff(moment(b[dateColumn]));
+      });
+    }
+    
+    const seriesData = sortedData.map((item, index) => {
+      const value = item[metricColumnName];
+      const name = item[categoryColumnName] !== undefined ? item[categoryColumnName] : '未知';
+      return {
+        name,
+        value,
+        itemStyle: {
+          color: THEME_COLOR_LIST[index % THEME_COLOR_LIST.length],
+        },
+      };
+    });
+
+    instanceObj.setOption({
+      tooltip: {
+        trigger: 'item',
+        formatter: function (params: any) {
+          const value = params.value;
+          return `${params.name}: ${
+            metricField.dataFormatType === 'percent'
+              ? formatByDataFormatType(value, metricField.dataFormatType, metricField.dataFormat)
+              : getFormattedValue(value)
+          }`;
+        },
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+        type: 'scroll',
+        data: seriesData.map(item => item.name),
+        selectedMode: true,
+        textStyle: {
+          color: '#666',
+        },
+      },
+      series: [
+        {
+          name: '占比',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: false,
+            position: 'center',
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '14',
+              fontWeight: 'bold',
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: seriesData,
+        },
+      ],
+    });
+    instanceObj.resize();
+  };
+
+  useEffect(() => {
+    if (queryResults && queryResults.length > 0) {
+      renderChart();
+    }
+  }, [queryResults, metricField, categoryField]);
+
+  useEffect(() => {
+    if (triggerResize && instanceRef.current) {
+      instanceRef.current.resize();
+    }
+  }, [triggerResize]);
+
+  return <div className={`${PREFIX_CLS}-pie-chart`} ref={chartRef} />;
+};
+
+export default PieChart;