iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Enable cross fitlers in WorldMap and Graph charts (#22886)

This commit is contained in:
Kamil Gabryjelski 2023-02-22 11:42:56 +01:00 committed by GitHub
parent a0ca0c04ff
commit 871cab8cbe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 247 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
View File

@ -46,6 +46,9 @@ const propTypes = {
showBubbles: PropTypes.bool,
linearColorScheme: PropTypes.string,
color: PropTypes.string,
setDataMask: PropTypes.func,
onContextMenu: PropTypes.func,
emitCrossFilters: PropTypes.bool,
};
const formatter = getNumberFormatter();
@ -66,7 +69,10 @@ function WorldMap(element, props) {
sliceId,
theme,
onContextMenu,
setDataMask,
inContextMenu,
filterState,
emitCrossFilters,
} = props;
const div = d3.select(element);
div.classed('superset-legacy-chart-world-map', true);
@ -108,11 +114,47 @@ function WorldMap(element, props) {
mapData[d.country] = d;
});
const handleClick = source => {
if (!emitCrossFilters) {
return;
}
const pointerEvent = d3.event;
pointerEvent.preventDefault();
const key = source.id || source.country;
let val =
countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
if (!val) {
return;
}
if (val === filterState.value) {
val = null;
}
setDataMask({
extraFormData: {
filters: val
? [
{
col: entity,
op: 'IN',
val: [val],
},
]
: [],
},
filterState: {
value: val ?? null,
selectedValues: val ? [key] : [],
},
});
};
const handleContextMenu = source => {
const pointerEvent = d3.event;
pointerEvent.preventDefault();
const key = source.id || source.country;
const val = countryFieldtype === 'name' ? mapData[key]?.name : key;
const val =
countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country;
if (val) {
const filters = [
{
@ -178,7 +220,8 @@ function WorldMap(element, props) {
done: datamap => {
datamap.svg
.selectAll('.datamaps-subunit')
.on('contextmenu', handleContextMenu);
.on('contextmenu', handleContextMenu)
.on('click', handleClick);
},
});
@ -190,7 +233,26 @@ function WorldMap(element, props) {
.selectAll('circle.datamaps-bubble')
.style('fill', color)
.style('stroke', color)
.on('contextmenu', handleContextMenu);
.on('contextmenu', handleContextMenu)
.on('click', handleClick);
}
if (filterState.selectedValues?.length > 0) {
d3.selectAll('path.datamaps-subunit')
.filter(
countryFeature =>
!filterState.selectedValues.includes(countryFeature.id),
)
.style('fill-opacity', theme.opacity.mediumLight);
// hack to ensure that the clicked country's color is preserved
// sometimes the fill color would get default grey value after applying cross filter
filterState.selectedValues.forEach(value => {
d3.select(`path.datamaps-subunit.${value}`).style(
'fill',
mapData[value]?.fillColor,
);
});
}
}

2
superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js
View File

@ -45,7 +45,7 @@ const metadata = new ChartMetadata({
],
thumbnail,
useLegacyApi: true,
behaviors: [Behavior.DRILL_TO_DETAIL],
behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
});
export default class WorldMapChartPlugin extends ChartPlugin {

17
superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js
View File

@ -19,9 +19,17 @@
import { rgb } from 'd3-color';
export default function transformProps(chartProps) {
const { width, height, formData, queriesData, hooks, inContextMenu } =
chartProps;
const { onContextMenu } = hooks;
const {
width,
height,
formData,
queriesData,
hooks,
inContextMenu,
filterState,
emitCrossFilters,
} = chartProps;
const { onContextMenu, setDataMask } = hooks;
const {
countryFieldtype,
entity,
@ -49,6 +57,9 @@ export default function transformProps(chartProps) {
colorScheme,
sliceId,
onContextMenu,
setDataMask,
inContextMenu,
filterState,
emitCrossFilters,
};
}

187
superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx
View File

@ -16,64 +16,147 @@
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { BinaryQueryObjectFilterClause } from '@superset-ui/core';
import React, { useMemo } from 'react';
import { EventHandlers } from '../types';
import Echart from '../components/Echart';
import { GraphChartTransformedProps } from './types';
type DataRow = {
source?: string;
target?: string;
id?: string;
col: string;
name: string;
};
type Data = DataRow[];
type Event = {
name: string;
event: { stop: () => void; event: PointerEvent };
data: { source: string; target: string };
data: DataRow;
dataType: 'node' | 'edge';
};
export default function EchartsGraph({
height,
width,
echartOptions,
formData,
onContextMenu,
refs,
}: GraphChartTransformedProps) {
const eventHandlers: EventHandlers = {
contextmenu: (e: Event) => {
if (onContextMenu) {
e.event.stop();
const pointerEvent = e.event.event;
const data = (echartOptions as any).series[0].data as {
id: string;
name: string;
}[];
const sourceValue = data.find(item => item.id === e.data.source)?.name;
const targetValue = data.find(item => item.id === e.data.target)?.name;
if (sourceValue && targetValue) {
const filters: BinaryQueryObjectFilterClause[] = [
{
col: formData.source,
op: '==',
val: sourceValue,
formattedVal: sourceValue,
},
{
col: formData.target,
op: '==',
val: targetValue,
formattedVal: targetValue,
},
];
onContextMenu(pointerEvent.clientX, pointerEvent.clientY, filters);
}
}
},
};
return (
<Echart
refs={refs}
height={height}
width={width}
echartOptions={echartOptions}
eventHandlers={eventHandlers}
/>
);
}
const EchartsGraph = React.memo(
({
height,
width,
echartOptions,
formData,
onContextMenu,
setDataMask,
filterState,
refs,
emitCrossFilters,
}: GraphChartTransformedProps) => {
const eventHandlers: EventHandlers = useMemo(
() => ({
click: (e: Event) => {
if (!emitCrossFilters || !setDataMask) {
return;
}
e.event.stop();
const data = (echartOptions as any).series[0].data as Data;
const node = data.find(item => item.id === e.data.id);
const val = filterState?.value === node?.name ? null : node?.name;
if (node?.col) {
setDataMask({
extraFormData: {
filters: val
? [
{
col: node.col,
op: '==',
val,
},
]
: [],
},
filterState: {
value: val,
selectedValues: [val],
},
});
}
},
contextmenu: (e: Event) => {
const handleNodeClick = (data: Data) => {
const node = data.find(item => item.id === e.data.id);
if (node?.name) {
return [
{
col: node.col,
op: '==' as const,
val: node.name,
formattedVal: node.name,
},
];
}
return undefined;
};
const handleEdgeClick = (data: Data) => {
const sourceValue = data.find(
item => item.id === e.data.source,
)?.name;
const targetValue = data.find(
item => item.id === e.data.target,
)?.name;
if (sourceValue && targetValue) {
return [
{
col: formData.source,
op: '==' as const,
val: sourceValue,
formattedVal: sourceValue,
},
{
col: formData.target,
op: '==' as const,
val: targetValue,
formattedVal: targetValue,
},
];
}
return undefined;
};
if (onContextMenu) {
e.event.stop();
const pointerEvent = e.event.event;
const data = (echartOptions as any).series[0].data as Data;
const filters =
e.dataType === 'node'
? handleNodeClick(data)
: handleEdgeClick(data);
if (filters) {
onContextMenu(
pointerEvent.clientX,
pointerEvent.clientY,
filters,
);
}
}
},
}),
[
echartOptions,
emitCrossFilters,
filterState?.value,
formData.source,
formData.target,
onContextMenu,
setDataMask,
],
);
return (
<Echart
refs={refs}
height={height}
width={width}
echartOptions={echartOptions}
eventHandlers={eventHandlers}
/>
);
},
);
export default EchartsGraph;

4
superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
View File

@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
import { Behavior, ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
import controlPanel from './controlPanel';
import transformProps from './transformProps';
import thumbnail from './images/thumbnail.png';
@ -48,7 +48,7 @@ export default class EchartsGraphChartPlugin extends ChartPlugin {
t('Transformable'),
],
thumbnail,
behaviors: [Behavior.DRILL_TO_DETAIL],
behaviors: [Behavior.INTERACTIVE_CHART, Behavior.DRILL_TO_DETAIL],
}),
transformProps,
});

24
superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts
View File

@ -162,8 +162,16 @@ function getCategoryName(columnName: string, name?: DataRecordValue) {
export default function transformProps(
chartProps: EchartsGraphChartProps,
): GraphChartTransformedProps {
const { width, height, formData, queriesData, hooks, inContextMenu } =
chartProps;
const {
width,
height,
formData,
queriesData,
hooks,
inContextMenu,
filterState,
emitCrossFilters,
} = chartProps;
const data: DataRecord[] = queriesData[0].data || [];
const {
@ -204,12 +212,13 @@ export default function transformProps(
* Get the node id of an existing node,
* or create a new node if it doesn't exist.
*/
function getOrCreateNode(name: string, category?: string) {
function getOrCreateNode(name: string, col: string, category?: string) {
if (!(name in nodes)) {
nodes[name] = echartNodes.length;
echartNodes.push({
id: String(nodes[name]),
name,
col,
value: 0,
category,
select: DEFAULT_GRAPH_SERIES_OPTION.select,
@ -244,8 +253,8 @@ export default function transformProps(
const targetCategoryName = targetCategory
? getCategoryName(targetCategory, link[targetCategory])
: undefined;
const sourceNode = getOrCreateNode(sourceName, sourceCategoryName);
const targetNode = getOrCreateNode(targetName, targetCategoryName);
const sourceNode = getOrCreateNode(sourceName, source, sourceCategoryName);
const targetNode = getOrCreateNode(targetName, target, targetCategoryName);
sourceNode.value += value;
targetNode.value += value;
@ -321,7 +330,7 @@ export default function transformProps(
series,
};
const { onContextMenu } = hooks;
const { onContextMenu, setDataMask } = hooks;
return {
width,
@ -329,6 +338,9 @@ export default function transformProps(
formData,
echartOptions,
onContextMenu,
setDataMask,
filterState,
refs,
emitCrossFilters,
};
}

1
superset-frontend/plugins/plugin-chart-echarts/src/Graph/types.ts
View File

@ -55,6 +55,7 @@ export type EchartsGraphFormData = QueryFormData &
export type EChartGraphNode = Omit<GraphNodeItemOption, 'value'> & {
value: number;
col: string;
tooltip?: Pick<SeriesTooltipOption, 'formatter'>;
};

5
superset-frontend/plugins/plugin-chart-echarts/src/types.ts
View File

@ -21,6 +21,7 @@ import {
BinaryQueryObjectFilterClause,
ChartDataResponseResult,
ChartProps,
FilterState,
HandlerFunction,
PlainObject,
QueryFormColumn,
@ -125,8 +126,11 @@ export interface BaseTransformedProps<F> {
clientY: number,
filters?: BinaryQueryObjectFilterClause[],
) => void;
setDataMask?: SetDataMaskHook;
filterState?: FilterState;
refs: Refs;
width: number;
emitCrossFilters?: boolean;
}
export type CrossFilterTransformedProps = {
@ -144,6 +148,7 @@ export type ContextMenuTransformedProps = {
clientY: number,
filters?: BinaryQueryObjectFilterClause[],
) => void;
setDataMask?: SetDataMaskHook;
};
export interface TitleFormData {

6
superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
View File

@ -71,6 +71,7 @@ describe('EchartsGraph transformProps', () => {
expect.objectContaining({
data: [
{
col: 'source_column',
category: undefined,
id: '0',
label: { show: true },
@ -88,6 +89,7 @@ describe('EchartsGraph transformProps', () => {
value: 6,
},
{
col: 'target_column',
category: undefined,
id: '1',
label: { show: true },
@ -105,6 +107,7 @@ describe('EchartsGraph transformProps', () => {
value: 6,
},
{
col: 'source_column',
category: undefined,
id: '2',
label: { show: true },
@ -122,6 +125,7 @@ describe('EchartsGraph transformProps', () => {
value: 5,
},
{
col: 'target_column',
category: undefined,
id: '3',
label: { show: true },
@ -229,6 +233,7 @@ describe('EchartsGraph transformProps', () => {
data: [
{
id: '0',
col: 'source_column',
name: 'source_value',
value: 11,
symbolSize: 10,
@ -243,6 +248,7 @@ describe('EchartsGraph transformProps', () => {
},
{
id: '1',
col: 'target_column',
name: 'target_value',
value: 11,
symbolSize: 10,