diff --git a/web-console/src/console-application.scss b/web-console/src/console-application.scss index 3c527b3e129..1fa3f1dd688 100644 --- a/web-console/src/console-application.scss +++ b/web-console/src/console-application.scss @@ -37,7 +37,7 @@ } &.thinner { - padding: 5px; + padding: 8px; } .app-view { diff --git a/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts b/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts index b4846648fdc..d0f7ade6ba4 100644 --- a/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts +++ b/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts @@ -22,6 +22,9 @@ import * as echarts from 'echarts'; import { getInitQuery } from '../utils'; +const TIME_NAME = '__t__'; +const METRIC_NAME = '__met__'; +const STACK_NAME = '__stack__'; const OTHERS_VALUE = 'Others'; function transformData(data: any[], vs: string[]): Record[] { @@ -31,12 +34,13 @@ function transformData(data: any[], vs: string[]): Record[] { let lastDatum: Record | undefined; const ret = []; for (const d of data) { - if (d.time.valueOf() !== lastTime) { + const t = d[TIME_NAME]; + if (t.valueOf() !== lastTime) { if (lastDatum) ret.push(lastDatum); - lastTime = d.time.valueOf(); - lastDatum = { ...zeroDatum, time: d.time }; + lastTime = t.valueOf(); + lastDatum = { ...zeroDatum, [TIME_NAME]: t }; } - lastDatum![d.stack] = d.met; + lastDatum![d[STACK_NAME]] = d[METRIC_NAME]; } if (lastDatum) ret.push(lastDatum); return ret; @@ -78,7 +82,7 @@ export default typedVisualModule({ }, showOthers: { type: 'boolean', - default: false, + default: true, control: { visible: ({ params }) => Boolean(params.splitColumn), }, @@ -172,7 +176,7 @@ export default typedVisualModule({ table, splitColumn && vs && !showOthers ? where.and(splitColumn.expression.in(vs)) : where, ) - .addSelect(F.timeFloor(C('__time'), L(timeGranularity)).as('time'), { + .addSelect(F.timeFloor(C('__time'), L(timeGranularity)).as(TIME_NAME), { addToGroupBy: 'end', addToOrderBy: 'end', direction: 'ASC', @@ -183,11 +187,11 @@ export default typedVisualModule({ (showOthers ? SqlCase.ifThenElse(splitEx.in(vs!), splitEx, L(OTHERS_VALUE)) : splitEx - ).as('stack'), + ).as(STACK_NAME), { addToGroupBy: 'end' }, ); }) - .addSelect(metric.expression.as('met')), + .addSelect(metric.expression.as(METRIC_NAME)), ) ).toObjectArray(); @@ -220,7 +224,7 @@ export default typedVisualModule({ myChart.setOption( { dataset: { - dimensions: ['time'].concat(vs || ['met']), + dimensions: [TIME_NAME].concat(effectiveVs || [METRIC_NAME]), source: sourceData, }, animation: false, @@ -229,19 +233,20 @@ export default typedVisualModule({ data: effectiveVs, } : undefined, - series: (effectiveVs || ['met']).map(v => { + series: (effectiveVs || [METRIC_NAME]).map(v => { return { id: v, name: effectiveVs ? v : metric.name, type: 'line', stack: 'Total', showSymbol, - areaStyle: {}, + lineStyle: v === OTHERS_VALUE ? { color: '#ccc' } : {}, + areaStyle: v === OTHERS_VALUE ? { color: '#ccc' } : {}, emphasis: { focus: 'series', }, encode: { - x: 'time', + x: TIME_NAME, y: v, itemId: v, },