diff --git a/webapp/app/containers/Dashboard/types.ts b/webapp/app/containers/Dashboard/types.ts index 489a183cd..94550e419 100644 --- a/webapp/app/containers/Dashboard/types.ts +++ b/webapp/app/containers/Dashboard/types.ts @@ -81,10 +81,18 @@ export interface IQueryVariableMap { [key: string]: string | number } +export interface IGlobalFiltersItem { + name: string, + value: string, + operator: string, + sqlType: string, + type: string +} + export interface IQueryConditions { tempFilters: string[] // @TODO combine widget static filters with local filters linkageFilters: string[] - globalFilters: string[] + globalFilters: IGlobalFiltersItem[] variables: QueryVariable linkageVariables: QueryVariable globalVariables: QueryVariable @@ -104,7 +112,7 @@ export interface IDataRequestParams { filters: string[] tempFilters: string[] linkageFilters: string[] - globalFilters: string[] + globalFilters: IGlobalFiltersItem[] variables: QueryVariable linkageVariables: QueryVariable globalVariables: QueryVariable diff --git a/webapp/app/containers/Widget/components/Chart/Chart.tsx b/webapp/app/containers/Widget/components/Chart/Chart.tsx index 04a14b69f..e1a176c84 100644 --- a/webapp/app/containers/Widget/components/Chart/Chart.tsx +++ b/webapp/app/containers/Widget/components/Chart/Chart.tsx @@ -33,7 +33,8 @@ export class Chart extends React.PureComponent { renderType, getDataDrillDetail, isDrilling, - onError + onError, + queryVariables } = props if (renderType === 'loading') { @@ -65,6 +66,7 @@ export class Chart extends React.PureComponent { instance: this.instance, isDrilling, getDataDrillDetail, + queryVariables, selectedItems: this.props.selectedItems, callback: (seriesData) => { this.instance.off('click') @@ -144,6 +146,10 @@ export class Chart extends React.PureComponent { const seriesIndex = series[index] ? series[index].split('&')[0] : null return seriesData[seriesIndex] ? seriesData[seriesIndex][item] : [] } + // 当是地图的时候,获取正确的数据用来关联其他widget + if (selectedChart === 7 && params?.data.originIndex != undefined) { + return data[params.data.originIndex] + } return data[item] }) const brushed = [{ 0: Object.values(resultData) }] diff --git a/webapp/app/containers/Widget/components/Pivot/ColumnTitle.tsx b/webapp/app/containers/Widget/components/Pivot/ColumnTitle.tsx index c1432879c..1594a0f7d 100644 --- a/webapp/app/containers/Widget/components/Pivot/ColumnTitle.tsx +++ b/webapp/app/containers/Widget/components/Pivot/ColumnTitle.tsx @@ -5,8 +5,13 @@ import { getPivotCellWidth, getPivot, getStyleConfig } from '../util' const styles = require('./Pivot.less') +interface IColProps { + name: string, + alias: string +} + interface IColumnTitleProps { - cols: string[] + cols: IColProps[] colKeys: string[][] colTree: object chartStyles: IChartStyles @@ -19,6 +24,14 @@ export function ColumnTitle (props: IColumnTitleProps) { const { elementSize, unitMetricWidth } = drawingData const { color: fontColor } = getStyleConfig(chartStyles).pivot + const content = cols.map(col => { + if (col.alias) { + return col.alias + } else { + return col.name + } + }) + let tableWidth = 0 if (dimetionAxis) { @@ -37,7 +50,7 @@ export function ColumnTitle (props: IColumnTitleProps) { color: fontColor }} > - {cols.join(` / `)} + {content.join(` / `)} ) } diff --git a/webapp/app/containers/Widget/components/Pivot/Pivot.tsx b/webapp/app/containers/Widget/components/Pivot/Pivot.tsx index 25989e6ca..f7e6d6273 100644 --- a/webapp/app/containers/Widget/components/Pivot/Pivot.tsx +++ b/webapp/app/containers/Widget/components/Pivot/Pivot.tsx @@ -589,6 +589,8 @@ export class Pivot extends React.PureComponent { const { legendSelected, renderType } = this.state const rowNames = rows.map((r) => r.name) const colNames = cols.map((c) => c.name) + const colNamesWithAlias = cols.map((c) => ({ name: c.name, alias: c.field.alias })) + const rowNamesWithAlias = rows.map(r => ({ name: r.name, alias: r.field.alias })) const hasMetricNameDimension = [rows, cols].some((items) => items.findIndex((item) => item.name === '指标名称') >= 0) return ( @@ -603,7 +605,7 @@ export class Pivot extends React.PureComponent { />
{
{ + if (row.alias) { + return row.alias + } else { + return row.name + } + }) + .join(` / `) const contentLength = getPivotContentTextWidth(content) return ( diff --git a/webapp/app/containers/Widget/components/util.ts b/webapp/app/containers/Widget/components/util.ts index 7a29e8f57..7eac22c69 100644 --- a/webapp/app/containers/Widget/components/util.ts +++ b/webapp/app/containers/Widget/components/util.ts @@ -715,7 +715,7 @@ export function getPivotTooltipLabel( } export function getChartTooltipLabel(type, seriesData, options) { - const { cols, metrics, color, size, scatterXAxis, tip } = options + const { cols, metrics, color, size, scatterXAxis, tip, queryVariables = {} } = options let dimentionColumns: any[] = cols let metricColumns = [...metrics] if (color) { @@ -777,7 +777,7 @@ export function getChartTooltipLabel(type, seriesData, options) { : record[dc.name] : '' value = getFormattedValue(value, dc.format) - return `${getFieldAlias(dc.field, {}) || dc.name}: ${value}` // @FIXME dynamic field alias by queryVariable in dashboard + return `${getFieldAlias(dc.field, queryVariables) || dc.name}: ${value}` // @FIXME dynamic field alias by queryVariable in dashboard }) ) @@ -793,7 +793,7 @@ export function getChartTooltipLabel(type, seriesData, options) { : record[`${mc.agg}(${decodedName})`] : 0 value = getFormattedValue(value, mc.format) - return `${getFieldAlias(mc.field, {}) || decodedName}: ${value}` + return `${getFieldAlias(mc.field, queryVariables) || decodedName}: ${value}` }) ) diff --git a/webapp/app/containers/Widget/render/chart/line.ts b/webapp/app/containers/Widget/render/chart/line.ts index 6d48640ae..1a3a646af 100644 --- a/webapp/app/containers/Widget/render/chart/line.ts +++ b/webapp/app/containers/Widget/render/chart/line.ts @@ -41,7 +41,7 @@ const defaultTheme = require('assets/json/echartsThemes/default.project.json') const defaultThemeColors = defaultTheme.theme.color export default function (chartProps: IChartProps, drillOptions?: any) { - const { data, cols, chartStyles, color, tip, references } = chartProps + const { data, cols, chartStyles, color, tip, references, queryVariables } = chartProps const metrics = getCartesianChartMetrics(chartProps.metrics) const { spec, xAxis, yAxis, splitLine, label, legend } = chartStyles @@ -255,7 +255,8 @@ export default function (chartProps: IChartProps, drillOptions?: any) { cols, metrics, color, - tip + tip, + queryVariables }) }, legend: getLegendOption(legend, seriesNames), diff --git a/webapp/app/containers/Widget/render/chart/map.ts b/webapp/app/containers/Widget/render/chart/map.ts index 918f5388c..17da995cd 100644 --- a/webapp/app/containers/Widget/render/chart/map.ts +++ b/webapp/app/containers/Widget/render/chart/map.ts @@ -116,7 +116,7 @@ export default function (chartProps: IChartProps) { const agg = metrics[0].agg const metricName = decodeMetricName(metrics[0].name) - data.forEach((record) => { + data.forEach((record, index) => { let areaVal const group = [] @@ -135,6 +135,7 @@ export default function (chartProps: IChartProps) { dataTree[provinceName] = { lon: area.lon, lat: area.lat, + originIndex: index, value, children: {} } @@ -151,6 +152,7 @@ export default function (chartProps: IChartProps) { dataTree[parentName] = { lon: area.lon, lat: area.lat, + originIndex: index, value: 0, children: {} } @@ -161,6 +163,7 @@ export default function (chartProps: IChartProps) { dataTree[areaVal] = { lon: area.lon, lat: area.lat, + originIndex: index, value, children: {} } @@ -200,9 +203,10 @@ export default function (chartProps: IChartProps) { mapType: 'china', roam, data: Object.keys(dataTree).map((key, index) => { - const { lon, lat, value } = dataTree[key] + const { lon, lat, value, originIndex } = dataTree[key] return { name: key, + originIndex, value: [lon, lat, value] } }), @@ -215,9 +219,10 @@ export default function (chartProps: IChartProps) { type: 'scatter', coordinateSystem: 'geo', data: Object.keys(dataTree).map((key, index) => { - const { lon, lat, value } = dataTree[key] + const { lon, lat, value, originIndex } = dataTree[key] return { name: key, + originIndex, value: [lon, lat, value], symbolSize: getSymbolSize(sizeRate, value) / 2 } @@ -232,9 +237,10 @@ export default function (chartProps: IChartProps) { type: 'heatmap', coordinateSystem: 'geo', data: Object.keys(dataTree).map((key, index) => { - const { lon, lat, value } = dataTree[key] + const { lon, lat, value, originIndex } = dataTree[key] return { name: key, + originIndex, value: [lon, lat, value], symbolSize: getSymbolSize(sizeRate, value) / 2 }