test-chat-sdk 0.0.0

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,120 @@
+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';
+
+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 seriesData = data.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;

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;
+  }
+}