diff --git a/bklog/web/src/language/lang/en/content.ts b/bklog/web/src/language/lang/en/content.ts index 5ec6c8fd6..e5887146a 100644 --- a/bklog/web/src/language/lang/en/content.ts +++ b/bklog/web/src/language/lang/en/content.ts @@ -985,4 +985,9 @@ export default { 同名视图替换: 'Replace the same name view', '此操作会覆盖当前SQL,请谨慎操作':'This operation will overwrite the current SQL, please operate with caution:', SQL查询: 'SQL Query', + '至少需要一个指标,一个维度': 'At least one metric, one dimension', + '至少需要一个指标,一个维度/时间维度': 'At least one metric, one dimension/time dimension', + 图表查询配置已变更: 'Chart query configuration has changed', + 请重新发起查询: 'Please initiate a query again', + 我知道了: 'I know', }; diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/chart-config-def.tsx b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/chart-config-def.tsx index df84176c7..a4650fa69 100644 --- a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/chart-config-def.tsx +++ b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/chart-config-def.tsx @@ -125,7 +125,7 @@ export const lineOrBarOptions = { }, tooltip: { show: true, - trigger: 'axis', + trigger: 'item', axisPointer: { type: 'line', label: { @@ -179,8 +179,8 @@ export const lineOrBarOptions = { axisLabel: { fontSize: 12, color: '#979BA5', - showMinLabel: false, - showMaxLabel: false, + showMinLabel: true, + showMaxLabel: true, align: 'left', }, splitLine: { diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/index.tsx b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/index.tsx index b1c90f0ba..295561d8b 100644 --- a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/index.tsx +++ b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/chart/index.tsx @@ -98,8 +98,28 @@ export default defineComponent({ } }, ); + watch(() => formatListData.value?.total_records, (newTotal) => { + pagination.value.count = newTotal; + }); + const tableData = computed(() => { + const list = formatListData.value?.list ?? []; + const start = (pagination.value.current - 1) * pagination.value.limit; + const end = start + pagination.value.limit; + return list.slice(start, end); + }); + const pagination = ref({ + current: 1, + count: formatListData.value?.total_records, + limit: 20 + }) - const tableData = computed(() => formatListData.value?.list ?? []); + const handlePageChange = (newPage) => { + pagination.value.current = newPage; + } + const handlePageLimitChange = (limit) => { + pagination.value.current = 1; + pagination.value.limit = limit; + } const columns = computed(() => { if (props.chartOptions.category === 'table') { return (props.chartOptions.data?.select_fields_order ?? []).filter( @@ -116,7 +136,12 @@ export default defineComponent({ const rendChildNode = () => { if (showTable.value && tableData.value.length) { return ( - + {columns.value.map(col => ( ; type: string }) => { const getTooltipFormatter = () => { return { formatter: params => { + console.log(params); + const args = Array.isArray(params) ? params : [params]; - const label = new Set(args.map(p => p.axisValueLabel)); + const label = new Set(args.map(p => p.name)); const content = `
${label ? `${[...label].join(',')}
` : ''}${args - .map(({ value, name }) => `${value[2] ?? name}: ${abbreviateNumber(value[1])}`) + .map(({ value, seriesName }) => `${value[2] ?? seriesName}: ${abbreviateNumber(value[1])}`) .join('
')}
`; return content; }, diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.scss b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.scss index 117a00a50..8a71cd516 100644 --- a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.scss +++ b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.scss @@ -90,7 +90,7 @@ .body-left { width: calc(100% - 360px); - overflow: auto; + overflow: hidden; background: #f5f7fa; border-right: solid 1px #dcdee5; @@ -171,6 +171,7 @@ padding: 12px 16px; margin: 16px 0; margin-bottom: 0; + overflow-y: auto; background: #ffffff; border-radius: 2px; box-shadow: @@ -231,10 +232,17 @@ z-index: 10; width: var(--exception-width); height: var(--exception-height); - padding-top: 120px; + padding-top: 60px; background-color: #ffffff80; backdrop-filter: blur(6px); + .bk-exception-img { + height: 60%; + img{ + height: 100%; + max-height: 200px; + } + } .bk-exception-title { max-height: 72px; padding: 0 40px; @@ -254,7 +262,7 @@ } .bk-exception-footer { - margin-top: 8px; + margin: 8px 0; } } } @@ -350,6 +358,10 @@ .basic-info-row { margin-bottom: 20px; + .title{ + font-size: 12px; + color: #63656e; + } } .field-setting-row { diff --git a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.tsx b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.tsx index 06e354bef..6759a666e 100644 --- a/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.tsx +++ b/bklog/web/src/views/retrieve-v2/search-result-panel/graph-analysis/index.tsx @@ -91,7 +91,6 @@ export default class GraphAnalysisIndex extends tsc { graphCategoryList = [GraphCategory.TABLE, GraphCategory.LINE, GraphCategory.BAR, GraphCategory.PIE]; basicInfoTitle = { - show: false, title: '', }; @@ -296,20 +295,12 @@ export default class GraphAnalysisIndex extends tsc { renderBasicInfo() { return [
- - {this.$t('标题')} - - {this.basicInfoTitle.show && ( +
{this.$t('标题')}
- )}
, ]; } @@ -416,7 +407,7 @@ export default class GraphAnalysisIndex extends tsc { getChartConfigValidate() { let showException = false; - const message = '请完成指标、维度配置'; + const message = this.activeGraphCategory === GraphCategory.PIE? this.$t('至少需要一个指标,一个维度') : this.$t('至少需要一个指标,一个维度/时间维度'); const showQuery = false; if (this.activeGraphCategory === GraphCategory.PIE) { showException = !(this.xFields.length && this.yFields.length); @@ -436,7 +427,7 @@ export default class GraphAnalysisIndex extends tsc { } if (this.isSqlValueChanged) { - return { showException: true, message: '图表查询配置已变更', showQuery: true }; + return { showException: true, message: this.$t('图表查询配置已变更'), showQuery: true }; } return this.getChartConfigValidate(); @@ -454,7 +445,7 @@ export default class GraphAnalysisIndex extends tsc {
{message}
{showQuery ? [ -
请重新发起查询
, +
{this.$t('请重新发起查询')}
, , ] @@ -584,7 +575,7 @@ export default class GraphAnalysisIndex extends tsc { class='graph-canvas-options' >
- {this.basicInfoTitle.show ? {this.basicInfoTitle.title} : ''} + {this.basicInfoTitle.title ? {this.basicInfoTitle.title} : ''}