mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-14 22:25:19 +00:00
first commit
This commit is contained in:
jerryjzhang
@@ -0,0 +1,30 @@
|
||||
import { PREFIX_CLS } from '../../../common/constants';
|
||||
|
||||
type Props = {
|
||||
domain: string;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
};
|
||||
|
||||
const ApplyAuth: React.FC<Props> = ({ domain, onApplyAuth }) => {
|
||||
const prefixCls = `${PREFIX_CLS}-apply-auth`;
|
||||
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
暂无权限，
|
||||
{onApplyAuth ? (
|
||||
<span
|
||||
className={`${prefixCls}-apply`}
|
||||
onClick={() => {
|
||||
onApplyAuth(domain);
|
||||
}}
|
||||
>
|
||||
点击申请
|
||||
</span>
|
||||
) : (
|
||||
'请联系管理员申请权限'
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplyAuth;
|
||||
@@ -0,0 +1,13 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@apply-auth-cls: ~'@{supersonic-chat-prefix}-apply-auth';
|
||||
|
||||
.@{apply-auth-cls} {
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
|
||||
&-apply {
|
||||
color: var(--chat-blue);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
149
webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
Normal file
149
webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { CHART_BLUE_COLOR, CHART_SECONDARY_COLOR, PREFIX_CLS } from '../../../common/constants';
|
||||
import { MsgDataType } from '../../../common/type';
|
||||
import { getChartLightenColor, getFormattedValue } from '../../../utils/utils';
|
||||
import type { ECharts } from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import NoPermissionChart from '../NoPermissionChart';
|
||||
|
||||
type Props = {
|
||||
data: MsgDataType;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
};
|
||||
|
||||
const BarChart: React.FC<Props> = ({ data, onApplyAuth }) => {
|
||||
const chartRef = useRef<any>();
|
||||
const [instance, setInstance] = useState<ECharts>();
|
||||
|
||||
const { queryColumns, queryResults, entityInfo } = data;
|
||||
const categoryColumnName =
|
||||
queryColumns?.find(column => column.showType === 'CATEGORY')?.nameEn || '';
|
||||
const metricColumn = queryColumns?.find(column => column.showType === 'NUMBER');
|
||||
const metricColumnName = metricColumn?.nameEn || '';
|
||||
|
||||
const renderChart = () => {
|
||||
let instanceObj: any;
|
||||
if (!instance) {
|
||||
instanceObj = echarts.init(chartRef.current);
|
||||
setInstance(instanceObj);
|
||||
} else {
|
||||
instanceObj = instance;
|
||||
}
|
||||
const data = (queryResults || []).sort(
|
||||
(a: any, b: any) => b[metricColumnName] - a[metricColumnName]
|
||||
);
|
||||
const xData = data.map(item => item[categoryColumnName]);
|
||||
instanceObj.setOption({
|
||||
legend: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
icon: 'rect',
|
||||
itemWidth: 15,
|
||||
itemHeight: 5,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: CHART_SECONDARY_COLOR,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
width: 200,
|
||||
overflow: 'truncate',
|
||||
showMaxLabel: true,
|
||||
hideOverlap: false,
|
||||
interval: 0,
|
||||
color: '#333',
|
||||
rotate: 30,
|
||||
},
|
||||
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
|
||||
.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;">${getFormattedValue(
|
||||
item.value
|
||||
)}</span></div>`
|
||||
)
|
||||
.join('');
|
||||
return `${param.name}<br />${valueLabels}`;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '1%',
|
||||
bottom: '3%',
|
||||
top: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
series: {
|
||||
type: 'bar',
|
||||
name: metricColumn?.name,
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: CHART_BLUE_COLOR },
|
||||
{ offset: 1, color: getChartLightenColor(CHART_BLUE_COLOR) },
|
||||
]),
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: function ({ value }: any) {
|
||||
return getFormattedValue(value);
|
||||
},
|
||||
},
|
||||
data: data.map(item => {
|
||||
return item[metricColumn?.nameEn || ''];
|
||||
}),
|
||||
},
|
||||
});
|
||||
instanceObj.resize();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (queryResults && queryResults.length > 0 && metricColumn?.authorized) {
|
||||
renderChart();
|
||||
}
|
||||
}, [queryResults]);
|
||||
|
||||
if (!metricColumn?.authorized) {
|
||||
return (
|
||||
<NoPermissionChart
|
||||
domain={entityInfo?.domainInfo.name || ''}
|
||||
chartType="barChart"
|
||||
onApplyAuth={onApplyAuth}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className={`${PREFIX_CLS}-bar`} ref={chartRef} />;
|
||||
};
|
||||
|
||||
export default BarChart;
|
||||
@@ -0,0 +1,8 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@bar-cls: ~'@{supersonic-chat-prefix}-bar';
|
||||
|
||||
.@{bar-cls} {
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { EntityInfoType, ChatContextType } from '../../../common/type';
|
||||
import moment from 'moment';
|
||||
import { PREFIX_CLS } from '../../../common/constants';
|
||||
|
||||
type Props = {
|
||||
position: 'left' | 'right';
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
bubbleClassName?: string;
|
||||
noWaterMark?: boolean;
|
||||
chatContext?: ChatContextType;
|
||||
entityInfo?: EntityInfoType;
|
||||
tip?: string;
|
||||
aggregator?: string;
|
||||
noTime?: boolean;
|
||||
children?: React.ReactNode;
|
||||
};
|
||||
|
||||
const Message: React.FC<Props> = ({
|
||||
position,
|
||||
width,
|
||||
height,
|
||||
children,
|
||||
bubbleClassName,
|
||||
chatContext,
|
||||
entityInfo,
|
||||
aggregator,
|
||||
noTime,
|
||||
}) => {
|
||||
const { aggType, dateInfo, filters, metrics, domainName } = chatContext || {};
|
||||
|
||||
const prefixCls = `${PREFIX_CLS}-message`;
|
||||
|
||||
const timeSection =
|
||||
!noTime && dateInfo?.text ? (
|
||||
dateInfo.text
|
||||
) : (
|
||||
<div>{`近${moment(dateInfo?.endDate).diff(dateInfo?.startDate, 'days') + 1}天`}</div>
|
||||
);
|
||||
|
||||
const metricSection =
|
||||
metrics &&
|
||||
metrics.map((metric, index) => {
|
||||
let metricNode = <span className={`${PREFIX_CLS}-metric`}>{metric.name}</span>;
|
||||
return (
|
||||
<>
|
||||
{metricNode}
|
||||
{index < metrics.length - 1 && <span>、</span>}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
const aggregatorSection = aggregator !== 'tag' && aggType !== 'NONE' && aggType;
|
||||
|
||||
const hasFilterSection = filters && filters.length > 0;
|
||||
|
||||
const filterSection = hasFilterSection && (
|
||||
<div className={`${prefixCls}-filter-section`}>
|
||||
<div className={`${prefixCls}-field-name`}>筛选条件：</div>
|
||||
<div className={`${prefixCls}-filter-values`}>
|
||||
{filters.map(filterItem => {
|
||||
return (
|
||||
<div className={`${prefixCls}-filter-item`} key={filterItem.name}>
|
||||
{filterItem.name}：{filterItem.value}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const entityInfoList =
|
||||
entityInfo?.dimensions?.filter(dimension => !dimension.bizName.includes('photo')) || [];
|
||||
|
||||
const hasEntityInfoSection =
|
||||
entityInfoList.length > 0 && chatContext && chatContext.dimensions?.length > 0;
|
||||
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<div className={`${prefixCls}-content`}>
|
||||
<div className={`${prefixCls}-body`}>
|
||||
<div
|
||||
className={`${prefixCls}-bubble${bubbleClassName ? ` ${bubbleClassName}` : ''}`}
|
||||
style={{ width, height }}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{position === 'left' && chatContext && (
|
||||
<div className={`${prefixCls}-top-bar`}>
|
||||
{domainName}
|
||||
{/* {dimensionSection} */}
|
||||
{timeSection}
|
||||
{metricSection}
|
||||
{aggregatorSection}
|
||||
{/* {tipSection} */}
|
||||
</div>
|
||||
)}
|
||||
{(hasEntityInfoSection || hasFilterSection) && (
|
||||
<div className={`${prefixCls}-info-bar`}>
|
||||
{hasEntityInfoSection && (
|
||||
<div className={`${prefixCls}-main-entity-info`}>
|
||||
{entityInfoList.slice(0, 3).map(dimension => {
|
||||
return (
|
||||
<div className={`${prefixCls}-info-item`} key={dimension.bizName}>
|
||||
<div className={`${prefixCls}-info-name`}>{dimension.name}：</div>
|
||||
<div className={`${prefixCls}-info-value`}>{dimension.value}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{filterSection}
|
||||
</div>
|
||||
)}
|
||||
<div className={`${prefixCls}-children`}>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Message;
|
||||
@@ -0,0 +1,89 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@msg-prefix-cls: ~'@{supersonic-chat-prefix}-message';
|
||||
|
||||
.@{msg-prefix-cls} {
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-bubble {
|
||||
box-sizing: border-box;
|
||||
min-width: 1px;
|
||||
max-width: 100%;
|
||||
padding: 8px 16px 10px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&-top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
padding: 4px 0 8px;
|
||||
overflow-x: auto;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
&-filter-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text-color-secondary);
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-filter-item {
|
||||
padding: 2px 12px;
|
||||
color: var(--text-color-secondary);
|
||||
background-color: #edf2f2;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
margin-left: 6px;
|
||||
color: var(--text-color-third);
|
||||
}
|
||||
|
||||
&-info-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
&-main-entity-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
&-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-info-Name {
|
||||
color: var(--text-color-fourth);
|
||||
}
|
||||
|
||||
&-info-value {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import { PREFIX_CLS } from '../../../common/constants';
|
||||
import { getFormattedValue } from '../../../utils/utils';
|
||||
import ApplyAuth from '../ApplyAuth';
|
||||
import { MsgDataType } from '../../../common/type';
|
||||
|
||||
type Props = {
|
||||
data: MsgDataType;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
};
|
||||
|
||||
const MetricCard: React.FC<Props> = ({ data, onApplyAuth }) => {
|
||||
const { queryColumns, queryResults, entityInfo } = data;
|
||||
|
||||
const indicatorColumn = queryColumns?.find(column => column.showType === 'NUMBER');
|
||||
const indicatorColumnName = indicatorColumn?.nameEn || '';
|
||||
|
||||
const prefixCls = `${PREFIX_CLS}-metric-card`;
|
||||
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<div className={`${prefixCls}-indicator`}>
|
||||
{/* <div className={`${prefixCls}-date-range`}>
|
||||
{startTime === endTime ? startTime : `${startTime} ~ ${endTime}`}
|
||||
</div> */}
|
||||
{!indicatorColumn?.authorized ? (
|
||||
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
|
||||
) : (
|
||||
<div className={`${prefixCls}-indicator-value`}>
|
||||
{getFormattedValue(queryResults?.[0]?.[indicatorColumnName])}
|
||||
</div>
|
||||
)}
|
||||
{/* <div className={`${prefixCls}-indicator-name`}>{query}</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricCard;
|
||||
@@ -0,0 +1,36 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@metric-card-prefix-cls: ~'@{supersonic-chat-prefix}-metric-card';
|
||||
|
||||
.@{metric-card-prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
row-gap: 4px;
|
||||
|
||||
&-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { CHART_SECONDARY_COLOR, CLS_PREFIX, THEME_COLOR_LIST } from '../../../common/constants';
|
||||
import {
|
||||
formatByDecimalPlaces,
|
||||
getFormattedValue,
|
||||
getMinMaxDate,
|
||||
groupByColumn,
|
||||
normalizeTrendData,
|
||||
} from '../../../utils/utils';
|
||||
import type { ECharts } from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import { ColumnType } from '../../../common/type';
|
||||
import NoPermissionChart from '../NoPermissionChart';
|
||||
|
||||
type Props = {
|
||||
domain?: string;
|
||||
dateColumnName: string;
|
||||
categoryColumnName: string;
|
||||
metricField: ColumnType;
|
||||
resultList: any[];
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
};
|
||||
|
||||
const MetricTrendChart: React.FC<Props> = ({
|
||||
domain,
|
||||
dateColumnName,
|
||||
categoryColumnName,
|
||||
metricField,
|
||||
resultList,
|
||||
onApplyAuth,
|
||||
}) => {
|
||||
const chartRef = useRef<any>();
|
||||
const [instance, setInstance] = useState<ECharts>();
|
||||
|
||||
const renderChart = () => {
|
||||
let instanceObj: any;
|
||||
if (!instance) {
|
||||
instanceObj = echarts.init(chartRef.current);
|
||||
setInstance(instanceObj);
|
||||
} else {
|
||||
instanceObj = instance;
|
||||
}
|
||||
|
||||
const valueColumnName = metricField.nameEn;
|
||||
const groupDataValue = groupByColumn(resultList, categoryColumnName);
|
||||
const [startDate, endDate] = getMinMaxDate(resultList, 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].reverse();
|
||||
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 = `${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'
|
||||
? `${formatByDecimalPlaces(value, metricField.dataFormat?.decimalPlaces || 2)}%`
|
||||
: 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'
|
||||
? `${formatByDecimalPlaces(
|
||||
item.value,
|
||||
metricField.dataFormat?.decimalPlaces || 2
|
||||
)}%`
|
||||
: 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: 'line',
|
||||
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.dataFormat?.needmultiply100
|
||||
? value * 100
|
||||
: value;
|
||||
}),
|
||||
color: THEME_COLOR_LIST[index],
|
||||
};
|
||||
}),
|
||||
});
|
||||
instanceObj.resize();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (metricField.authorized) {
|
||||
renderChart();
|
||||
}
|
||||
}, [resultList, metricField]);
|
||||
|
||||
const prefixCls = `${CLS_PREFIX}-metric-trend`;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!metricField.authorized ? (
|
||||
<NoPermissionChart domain={domain || ''} onApplyAuth={onApplyAuth} />
|
||||
) : (
|
||||
<div className={`${prefixCls}-flow-trend-chart`} ref={chartRef} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricTrendChart;
|
||||
@@ -0,0 +1,205 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CLS_PREFIX, DATE_TYPES } from '../../../common/constants';
|
||||
import { ColumnType, MsgDataType } from '../../../common/type';
|
||||
import { groupByColumn, isMobile } from '../../../utils/utils';
|
||||
import { queryData } from '../../../service';
|
||||
import MetricTrendChart from './MetricTrendChart';
|
||||
import classNames from 'classnames';
|
||||
import { Spin } from 'antd';
|
||||
import Table from '../Table';
|
||||
import SemanticInfoPopover from '../SemanticInfoPopover';
|
||||
|
||||
type Props = {
|
||||
data: MsgDataType;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
onCheckMetricInfo?: (data: any) => void;
|
||||
};
|
||||
|
||||
const MetricTrend: React.FC<Props> = ({ data, onApplyAuth, onCheckMetricInfo }) => {
|
||||
const { queryColumns, queryResults, entityInfo, chatContext } = data;
|
||||
const [columns, setColumns] = useState<ColumnType[]>(queryColumns);
|
||||
const metricFields = columns.filter((column: any) => column.showType === 'NUMBER') || [];
|
||||
|
||||
const [currentMetricField, setCurrentMetricField] = useState<ColumnType>(metricFields[0]);
|
||||
const [onlyOneDate, setOnlyOneDate] = useState(false);
|
||||
const [trendData, setTrendData] = useState(data);
|
||||
const [dataSource, setDataSource] = useState<any[]>(queryResults);
|
||||
const [mergeMetric, setMergeMetric] = useState(false);
|
||||
const [currentDateOption, setCurrentDateOption] = useState<number>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const dateField: any = columns.find(
|
||||
(column: any) => column.showType === 'DATE' || column.type === 'DATE'
|
||||
);
|
||||
const dateColumnName = dateField?.nameEn || '';
|
||||
const categoryColumnName =
|
||||
columns.find((column: any) => column.showType === 'CATEGORY')?.nameEn || '';
|
||||
|
||||
const getColumns = () => {
|
||||
const categoryFieldData = groupByColumn(dataSource, categoryColumnName);
|
||||
const result = [dateField];
|
||||
const columnsValue = Object.keys(categoryFieldData).map(item => ({
|
||||
authorized: currentMetricField.authorized,
|
||||
name: item !== 'undefined' ? item : currentMetricField.name,
|
||||
nameEn: `${item}${currentMetricField.name}`,
|
||||
showType: 'NUMBER',
|
||||
type: 'NUMBER',
|
||||
}));
|
||||
return result.concat(columnsValue);
|
||||
};
|
||||
|
||||
const getResultList = () => {
|
||||
return [
|
||||
{
|
||||
[dateField.nameEn]: dataSource[0][dateField.nameEn],
|
||||
...dataSource.reduce((result, item) => {
|
||||
result[`${item[categoryColumnName]}${currentMetricField.name}`] =
|
||||
item[currentMetricField.nameEn];
|
||||
return result;
|
||||
}, {}),
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDataSource(queryResults);
|
||||
}, [queryResults]);
|
||||
|
||||
useEffect(() => {
|
||||
let onlyOneDateValue = false;
|
||||
let dataValue = trendData;
|
||||
if (dateColumnName && dataSource.length > 0) {
|
||||
const dateFieldData = groupByColumn(dataSource, dateColumnName);
|
||||
onlyOneDateValue =
|
||||
Object.keys(dateFieldData).length === 1 && Object.keys(dateFieldData)[0] !== undefined;
|
||||
if (onlyOneDateValue) {
|
||||
if (categoryColumnName !== '') {
|
||||
dataValue = {
|
||||
...trendData,
|
||||
queryColumns: getColumns(),
|
||||
queryResults: getResultList(),
|
||||
};
|
||||
} else {
|
||||
setMergeMetric(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
setOnlyOneDate(onlyOneDateValue);
|
||||
setTrendData(dataValue);
|
||||
}, [currentMetricField]);
|
||||
|
||||
const dateOptions = DATE_TYPES[chatContext.dateInfo?.period] || DATE_TYPES[0];
|
||||
|
||||
const onLoadData = async (value: number) => {
|
||||
setLoading(true);
|
||||
const { data } = await queryData({
|
||||
...chatContext,
|
||||
dateInfo: { ...chatContext.dateInfo, unit: value },
|
||||
});
|
||||
setLoading(false);
|
||||
if (data.code === 200) {
|
||||
setColumns(data.data?.queryColumns || []);
|
||||
setDataSource(data.data?.queryResults || []);
|
||||
}
|
||||
};
|
||||
|
||||
const selectDateOption = (dateOption: number) => {
|
||||
setCurrentDateOption(dateOption);
|
||||
// const { domainName, dimensions, metrics, aggType, filters } = chatContext || {};
|
||||
// const dimensionSection = dimensions?.join('、') || '';
|
||||
// const metricSection = metrics?.join('、') || '';
|
||||
// const aggregatorSection = aggType || '';
|
||||
// const filterSection = filters
|
||||
// .reduce((result, dimensionName) => {
|
||||
// result = result.concat(dimensionName);
|
||||
// return result;
|
||||
// }, [])
|
||||
// .join('、');
|
||||
onLoadData(dateOption);
|
||||
};
|
||||
|
||||
if (metricFields.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const prefixCls = `${CLS_PREFIX}-metric-trend`;
|
||||
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<div className={`${prefixCls}-charts`}>
|
||||
{!onlyOneDate && (
|
||||
<div className={`${prefixCls}-date-options`}>
|
||||
{dateOptions.map((dateOption: { label: string; value: number }, index: number) => {
|
||||
const dateOptionClass = classNames(`${prefixCls}-date-option`, {
|
||||
[`${prefixCls}-date-active`]: dateOption.value === currentDateOption,
|
||||
[`${prefixCls}-date-mobile`]: isMobile,
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={dateOption.value}
|
||||
className={dateOptionClass}
|
||||
onClick={() => {
|
||||
selectDateOption(dateOption.value);
|
||||
}}
|
||||
>
|
||||
{dateOption.label}
|
||||
{dateOption.value === currentDateOption && (
|
||||
<div className={`${prefixCls}-active-identifier`} />
|
||||
)}
|
||||
</div>
|
||||
{index !== dateOptions.length - 1 && (
|
||||
<div className={`${prefixCls}-date-option-divider`} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{metricFields.length > 1 && !mergeMetric && (
|
||||
<div className={`${prefixCls}-metric-fields`}>
|
||||
{metricFields.map((metricField: ColumnType) => {
|
||||
const metricFieldClass = classNames(`${prefixCls}-metric-field`, {
|
||||
[`${prefixCls}-metric-field-active`]:
|
||||
currentMetricField?.nameEn === metricField.nameEn,
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className={metricFieldClass}
|
||||
key={metricField.nameEn}
|
||||
onClick={() => {
|
||||
setCurrentMetricField(metricField);
|
||||
}}
|
||||
>
|
||||
<SemanticInfoPopover
|
||||
classId={chatContext.domainId}
|
||||
uniqueId={metricField.nameEn}
|
||||
onDetailBtnClick={onCheckMetricInfo}
|
||||
>
|
||||
{metricField.name}
|
||||
</SemanticInfoPopover>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{onlyOneDate ? (
|
||||
<Table data={trendData} onApplyAuth={onApplyAuth} />
|
||||
) : (
|
||||
<Spin spinning={loading}>
|
||||
<MetricTrendChart
|
||||
domain={entityInfo?.domainInfo.name}
|
||||
dateColumnName={dateColumnName}
|
||||
categoryColumnName={categoryColumnName}
|
||||
metricField={currentMetricField}
|
||||
resultList={dataSource}
|
||||
onApplyAuth={onApplyAuth}
|
||||
/>
|
||||
</Spin>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetricTrend;
|
||||
@@ -0,0 +1,124 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@metric-trend-prefix-cls: ~'@{supersonic-chat-prefix}-metric-trend';
|
||||
|
||||
.@{metric-trend-prefix-cls} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
row-gap: 4px;
|
||||
|
||||
&-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
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 {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
&-charts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
row-gap: 20px;
|
||||
}
|
||||
|
||||
&-metric-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
row-gap: 12px;
|
||||
}
|
||||
|
||||
&-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-active {
|
||||
color: #fff !important;
|
||||
background-color: var(--chat-blue);
|
||||
}
|
||||
|
||||
&-date-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-date-option {
|
||||
position: relative;
|
||||
color: var(--text-color-secondary);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--chat-blue);
|
||||
}
|
||||
}
|
||||
|
||||
&-date-option-active {
|
||||
color: var(--chat-blue);
|
||||
}
|
||||
|
||||
&-date-option-mobile {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&-active-identifier {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--chat-blue);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
&-date-option-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background-color: var(--text-color-fifth);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import classNames from 'classnames';
|
||||
import { CLS_PREFIX } from '../../../common/constants';
|
||||
import ApplyAuth from '../ApplyAuth';
|
||||
|
||||
type Props = {
|
||||
domain: string;
|
||||
chartType?: string;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
};
|
||||
|
||||
const NoPermissionChart: React.FC<Props> = ({ domain, 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 domain={domain} onApplyAuth={onApplyAuth} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NoPermissionChart;
|
||||
@@ -0,0 +1,30 @@
|
||||
@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: 300px;
|
||||
// background-image: url(~./images/line_chart_holder.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 300px;
|
||||
}
|
||||
|
||||
&-bar-chart-holder {
|
||||
margin-top: 20px;
|
||||
// background-image: url(~./images/bar_chart_holder.png);
|
||||
}
|
||||
|
||||
&-no-permission {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 4px 12px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Tag } from 'antd';
|
||||
import React from 'react';
|
||||
import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../../../common/type';
|
||||
|
||||
type Props = {
|
||||
infoType?: SemanticTypeEnum;
|
||||
};
|
||||
|
||||
const SemanticTypeTag: React.FC<Props> = ({ infoType = SemanticTypeEnum.METRIC }) => {
|
||||
return (
|
||||
<Tag
|
||||
color={
|
||||
infoType === SemanticTypeEnum.DIMENSION || infoType === SemanticTypeEnum.DOMAIN
|
||||
? 'blue'
|
||||
: infoType === SemanticTypeEnum.VALUE
|
||||
? 'geekblue'
|
||||
: 'orange'
|
||||
}
|
||||
>
|
||||
{SEMANTIC_TYPE_MAP[infoType]}
|
||||
</Tag>
|
||||
);
|
||||
};
|
||||
|
||||
export default SemanticTypeTag;
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Popover, message, Row, Col, Button, Spin } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { SemanticTypeEnum } from '../../../common/type';
|
||||
import { queryMetricInfo } from '../../../service';
|
||||
import SemanticTypeTag from './SemanticTypeTag';
|
||||
import { isMobile } from '../../../utils/utils';
|
||||
import { CLS_PREFIX } from '../../../common/constants';
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
classId?: number;
|
||||
infoType?: SemanticTypeEnum;
|
||||
uniqueId: string | number;
|
||||
onDetailBtnClick?: (data: any) => void;
|
||||
};
|
||||
|
||||
const SemanticInfoPopover: React.FC<Props> = ({
|
||||
classId,
|
||||
infoType,
|
||||
uniqueId,
|
||||
children,
|
||||
onDetailBtnClick,
|
||||
}) => {
|
||||
const [semanticInfo, setSemanticInfo] = useState<any>(undefined);
|
||||
const [popoverVisible, setPopoverVisible] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const prefixCls = `${CLS_PREFIX}-semantic-info-popover`;
|
||||
|
||||
const text = (
|
||||
<Row>
|
||||
<Col flex="1">
|
||||
<SemanticTypeTag infoType={infoType} />
|
||||
</Col>
|
||||
{onDetailBtnClick && (
|
||||
<Col flex="0 1 40px">
|
||||
{semanticInfo && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
onDetailBtnClick(semanticInfo);
|
||||
}}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
)}
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
);
|
||||
|
||||
const content = loading ? (
|
||||
<div className={`${prefixCls}-spin-box`}>
|
||||
<Spin />
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<span>{semanticInfo?.description || '暂无数据'}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const getMetricInfo = async () => {
|
||||
setLoading(true);
|
||||
const { data: resData } = await queryMetricInfo({
|
||||
classId,
|
||||
uniqueId,
|
||||
});
|
||||
const { code, data, msg } = resData;
|
||||
setLoading(false);
|
||||
if (code === '0') {
|
||||
setSemanticInfo({
|
||||
...data,
|
||||
semanticInfoType: SemanticTypeEnum.METRIC,
|
||||
});
|
||||
} else {
|
||||
message.error(msg);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (popoverVisible && !semanticInfo) {
|
||||
getMetricInfo();
|
||||
}
|
||||
}, [popoverVisible]);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
placement="top"
|
||||
title={text}
|
||||
content={content}
|
||||
trigger="hover"
|
||||
open={classId && !isMobile ? undefined : false}
|
||||
onOpenChange={visible => {
|
||||
setPopoverVisible(visible);
|
||||
}}
|
||||
overlayClassName={prefixCls}
|
||||
>
|
||||
{children}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default SemanticInfoPopover;
|
||||
@@ -0,0 +1,18 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@semantic-info-popover-cls: ~'@{supersonic-chat-prefix}-semantic-info-popover';
|
||||
|
||||
.semantic-info-popover-cls {
|
||||
max-width: 300px;
|
||||
&-spin-box {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.ant-popover-title{
|
||||
padding: 5px 8px 4px;
|
||||
}
|
||||
.ant-popover-inner-content {
|
||||
min-height: 60px;
|
||||
min-width: 185px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { formatByDecimalPlaces, getFormattedValue } from '../../../utils/utils';
|
||||
import { Table as AntTable } from 'antd';
|
||||
import { MsgDataType } from '../../../common/type';
|
||||
import { CLS_PREFIX } from '../../../common/constants';
|
||||
import ApplyAuth from '../ApplyAuth';
|
||||
|
||||
type Props = {
|
||||
data: MsgDataType;
|
||||
onApplyAuth?: (domain: string) => void;
|
||||
};
|
||||
|
||||
const Table: React.FC<Props> = ({ data, onApplyAuth }) => {
|
||||
const { entityInfo, queryColumns, queryResults } = data;
|
||||
|
||||
const prefixCls = `${CLS_PREFIX}-table`;
|
||||
|
||||
const tableColumns: any[] = queryColumns.map(
|
||||
({ name, nameEn, showType, dataFormatType, dataFormat, authorized }) => {
|
||||
return {
|
||||
dataIndex: nameEn,
|
||||
key: nameEn,
|
||||
title: name,
|
||||
render: (value: string | number) => {
|
||||
if (!authorized) {
|
||||
return (
|
||||
<ApplyAuth domain={entityInfo?.domainInfo.name || ''} onApplyAuth={onApplyAuth} />
|
||||
);
|
||||
}
|
||||
if (dataFormatType === 'percent') {
|
||||
return (
|
||||
<div className={`${prefixCls}-formatted-value`}>
|
||||
{`${formatByDecimalPlaces(
|
||||
dataFormat?.needmultiply100 ? +value * 100 : value,
|
||||
dataFormat?.decimalPlaces || 2
|
||||
)}%`}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (showType === 'NUMBER') {
|
||||
return (
|
||||
<div className={`${prefixCls}-formatted-value`}>
|
||||
{getFormattedValue(value as number)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (nameEn.includes('photo')) {
|
||||
return (
|
||||
<div className={`${prefixCls}-photo`}>
|
||||
<img width={40} height={40} src={value as string} alt="" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return value;
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={prefixCls}>
|
||||
<AntTable
|
||||
pagination={queryResults.length <= 10 ? false : undefined}
|
||||
size={queryResults.length === 1 ? 'middle' : 'small'}
|
||||
columns={tableColumns}
|
||||
dataSource={queryResults}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Table;
|
||||
@@ -0,0 +1,72 @@
|
||||
@import '../../../styles/index.less';
|
||||
|
||||
@table-prefix-cls: ~'@{supersonic-chat-prefix}-table';
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&-photo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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: 15px 0;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
Normal file
62
webapp/packages/chat-sdk/src/components/ChatMsg/index.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { isMobile } from '../../utils/utils';
|
||||
import Bar from './Bar';
|
||||
import Message from './Message';
|
||||
import MetricCard from './MetricCard';
|
||||
import MetricTrend from './MetricTrend';
|
||||
import Table from './Table';
|
||||
import { MsgDataType } from '../../common/type';
|
||||
|
||||
type Props = {
|
||||
data: MsgDataType;
|
||||
onCheckMetricInfo?: (data: any) => void;
|
||||
};
|
||||
|
||||
const ChatMsg: React.FC<Props> = ({ data, onCheckMetricInfo }) => {
|
||||
const { aggregateType, queryColumns, queryResults, chatContext, entityInfo } = data;
|
||||
|
||||
if (!queryColumns || !queryResults) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const singleData = queryResults.length === 1;
|
||||
const dateField = queryColumns.find(item => item.showType === 'DATE' || item.type === 'DATE');
|
||||
const categoryField = queryColumns.filter(item => item.showType === 'CATEGORY');
|
||||
const metricFields = queryColumns.filter(item => item.showType === 'NUMBER');
|
||||
|
||||
const getMsgContent = () => {
|
||||
if (categoryField.length > 1 || aggregateType === 'tag') {
|
||||
return <Table data={data} />;
|
||||
}
|
||||
if (dateField && metricFields.length > 0) {
|
||||
return <MetricTrend data={data} onCheckMetricInfo={onCheckMetricInfo} />;
|
||||
}
|
||||
if (singleData) {
|
||||
return <MetricCard data={data} />;
|
||||
}
|
||||
return <Bar data={data} />;
|
||||
};
|
||||
|
||||
let width = '100%';
|
||||
if ((categoryField.length > 1 || aggregateType === 'tag') && !isMobile) {
|
||||
if (queryColumns.length === 1) {
|
||||
width = '600px';
|
||||
} else if (queryColumns.length === 2) {
|
||||
width = '1000px';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Message
|
||||
position="left"
|
||||
chatContext={chatContext}
|
||||
entityInfo={entityInfo}
|
||||
aggregator={aggregateType}
|
||||
tip={''}
|
||||
width={width}
|
||||
>
|
||||
{getMsgContent()}
|
||||
</Message>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatMsg;
|
||||
Reference in New Issue
Block a user