topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-19 08:50:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add chat plugin and split query to parse and execute (#25)

Browse Source 
* [feature](webapp) add drill down dimensions and metric period compare and modify layout

* [feature](webapp) add drill down dimensions and metric period compare and modify layout

* [feature](webapp) gitignore add supersonic-webapp

* [feature](webapp) gitignore add supersonic-webapp

* [feature](webapp) add chat plugin and split query to parse and execute

* [feature](webapp) add chat plugin and split query to parse and execute

* [feature](webapp) add chat plugin and split query to parse and execute

---------

Co-authored-by: williamhliu <williamhliu@tencent.com>
This commit is contained in:
williamhliu
2023-08-05 22:17:42 +08:00
committed by GitHub
parent c9baed6c4e
commit 6951eada9d
86 changed files with 3193 additions and 1595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
webapp/packages/chat-sdk/src/components/ChatMsg/Bar/index.tsx
View File

@@ -31,7 +31,7 @@ const BarChart: React.FC<Props> = ({
const { queryColumns, queryResults, entityInfo, chatContext, queryMode } = data;
const { dateInfo } = chatContext || {};
const { dateInfo, dimensionFilters } = chatContext || {};
const categoryColumnName =
queryColumns?.find(column => column.showType === 'CATEGORY')?.nameEn || '';
@@ -51,13 +51,6 @@ const BarChart: React.FC<Props> = ({
);
const xData = data.map(item => item[categoryColumnName]);
instanceObj.setOption({
// legend: {
// left: 0,
// top: 0,
// icon: 'rect',
// itemWidth: 15,
// itemHeight: 5,
// },
xAxis: {
type: 'category',
axisTick: {
@@ -166,21 +159,43 @@ const BarChart: React.FC<Props> = ({
);
}
const hasFilterSection = dimensionFilters?.length > 0;
const prefixCls = `${PREFIX_CLS}-bar`;
return (
<div>
<div className={`${PREFIX_CLS}-bar-metric-name`}>{metricColumn?.name}</div>
<FilterSection chatContext={chatContext} />
<div className={`${prefixCls}-top-bar`}>
<div className={`${prefixCls}-indicator-name`}>{metricColumn?.name}</div>
{(hasFilterSection || drillDownDimension) && (
<div className={`${prefixCls}-filter-section-wrapper`}>
(
<div className={`${prefixCls}-filter-section`}>
<FilterSection chatContext={chatContext} entityInfo={entityInfo} />
{drillDownDimension && (
<div className={`${prefixCls}-filter-item`}>
<div className={`${prefixCls}-filter-item-label`}>下钻维度：</div>
<div className={`${prefixCls}-filter-item-value`}>{drillDownDimension.name}</div>
</div>
)}
</div>
)
</div>
)}
</div>
{dateInfo && (
<div className={`${PREFIX_CLS}-bar-date-range`}>
<div className={`${prefixCls}-date-range`}>
{dateInfo.startDate === dateInfo.endDate
? dateInfo.startDate
: `${dateInfo.startDate} ~ ${dateInfo.endDate}`}
</div>
)}
<Spin spinning={loading}>
<div className={`${PREFIX_CLS}-bar-chart`} ref={chartRef} />
<div className={`${prefixCls}-chart`} ref={chartRef} />
</Spin>
{(queryMode === 'METRIC_DOMAIN' || queryMode === 'METRIC_FILTER') && (
{(queryMode === 'METRIC_DOMAIN' ||
queryMode === 'METRIC_FILTER' ||
queryMode === 'METRIC_GROUPBY') && (
<DrillDownDimensions
domainId={chatContext.domainId}
drillDownDimension={drillDownDimension}

42
webapp/packages/chat-sdk/src/components/ChatMsg/Bar/style.less
View File

@@ -9,11 +9,49 @@
margin-top: 16px;
}
&-metric-name {
font-size: 15px;
&-top-bar {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 12px;
}
&-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 {
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;
}
&-date-range {
margin-top: 12px;
font-size: 13px;