Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(sankey): Add sankey chart dataset support. #19519

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 150 additions & 0 deletions src/chart/helper/createGraphDataFromDataset.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/


import * as zrUtil from 'zrender/src/core/util';
import SeriesData from '../../data/SeriesData';
import Graph from '../../data/Graph';
import linkSeriesData from '../../data/helper/linkSeriesData';
import prepareSeriesDataSchema from '../../data/helper/createDimensions';
import CoordinateSystem from '../../core/CoordinateSystem';
import createSeriesData from './createSeriesData';
import SeriesModel from '../../model/Series';
import { convertOptionIdName } from '../../util/model';
import { SankeyEdgeItemOption, SankeyNodeItemOption } from '../sankey/SankeySeries';
import { throwError } from '../../util/log';
import { SOURCE_FORMAT_ARRAY_ROWS, SOURCE_FORMAT_OBJECT_ROWS } from '../../util/types';
import { Source } from '../../data/Source';


export default function createGraphDataFromDataset(
seriesModel: SeriesModel,
directed: boolean,
beforeLink: (nodeData: SeriesData, edgeData: SeriesData) => void
): Graph {
// dataset support
const sourceManager = seriesModel.getSourceManager();
const source = sourceManager.getSource();
const edges: SankeyEdgeItemOption[] = normalizeGraphDataset(source);
const nodes: SankeyNodeItemOption[] = [];
const nodeNames: { [key: string]: boolean } = {};
// Collect nodes
edges.forEach(edge => {
['source', 'target'].forEach((prop: keyof SankeyEdgeItemOption) => {
const nodeName = edge[prop] as string;
if (!nodeNames[nodeName]) {
nodeNames[nodeName] = true;
nodes.push({ 'name': nodeName } as SankeyNodeItemOption);
}
});
});
const graph = new Graph(directed);
for (let i = 0; i < nodes.length; i++) {
graph.addNode(zrUtil.retrieve(
// Id, name, dataIndex
nodes[i].id, nodes[i].name, i
), i);
}

const linkNameList = [];
const validEdges = [];
let linkCount = 0;
for (let i = 0; i < edges.length; i++) {
const link = edges[i];
const source = link.source;
const target = link.target;
// addEdge may fail when source or target not exists
if (graph.addEdge(source, target, linkCount)) {
validEdges.push(link);
linkNameList.push(zrUtil.retrieve(
convertOptionIdName(link.id, null),
source + ' > ' + target
));
linkCount++;
}
}

const coordSys = seriesModel.get('coordinateSystem');
let nodeData;
if (coordSys === 'cartesian2d' || coordSys === 'polar') {
nodeData = createSeriesData(nodes, seriesModel);
}
else {
const coordSysCtor = CoordinateSystem.get(coordSys);
const coordDimensions = coordSysCtor
? (coordSysCtor.dimensions || []) : [];
// FIXME: Some geo do not need `value` dimenson, whereas `calendar` needs
// `value` dimension, but graph need `value` dimension. It's better to
// uniform this behavior.
if (zrUtil.indexOf(coordDimensions, 'value') < 0) {
coordDimensions.concat(['value']);
}

const { dimensions } = prepareSeriesDataSchema(nodes, {
coordDimensions: coordDimensions,
encodeDefine: seriesModel.getEncode()
});
nodeData = new SeriesData(dimensions, seriesModel);
nodeData.initData(nodes);
}

const edgeData = new SeriesData(['value'], seriesModel);
edgeData.initData(validEdges, linkNameList);

beforeLink && beforeLink(nodeData, edgeData);

linkSeriesData({
mainData: nodeData,
struct: graph,
structAttr: 'graph',
datas: {node: nodeData, edge: edgeData},
datasAttr: {node: 'data', edge: 'edgeData'}
});

// Update dataIndex of nodes and edges because invalid edge may be removed
graph.update();

return graph;
}

function normalizeGraphDataset(source: Source): SankeyEdgeItemOption[] {
if (!isSupportedFormat(source.sourceFormat)) {
let errMsg = '';
if (__DEV__) {
errMsg = source.sourceFormat + 'dataset format is not supported';
}
throwError(errMsg);
}
if (source.sourceFormat === SOURCE_FORMAT_ARRAY_ROWS) {
const data = source.data as Array<[string, string, number]>; // [source, target, value]
return data.slice(source.startIndex).map(([source, target, value]) => ({
source,
target,
value
}));
}
else if (source.sourceFormat === SOURCE_FORMAT_OBJECT_ROWS) {
const data = source.data as Array<{source: string, target: string, value: number}>;
return data.slice(source.startIndex);
}
}

function isSupportedFormat(format: string): boolean {
return format === 'objectRows' || format === 'arrayRows';
}
38 changes: 22 additions & 16 deletions src/chart/sankey/SankeySeries.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,25 +21,27 @@ import SeriesModel from '../../model/Series';
import createGraphFromNodeEdge from '../helper/createGraphFromNodeEdge';
import Model from '../../model/Model';
import {
SeriesOption,
BoxLayoutOptionMixin,
OptionDataValue,
SeriesLabelOption,
CallbackDataParams,
ColorString,
DefaultEmphasisFocus,
GraphEdgeItemObject,
ItemStyleOption,
LineStyleOption,
LayoutOrient,
ColorString,
StatesOptionMixin,
LineStyleOption,
OptionDataItemObject,
GraphEdgeItemObject,
OptionDataValue,
OptionDataValueNumeric,
DefaultEmphasisFocus,
CallbackDataParams
SeriesEncodeOptionMixin,
SeriesLabelOption,
SeriesOption,
StatesOptionMixin
} from '../../util/types';
import GlobalModel from '../../model/Global';
import SeriesData from '../../data/SeriesData';
import { LayoutRect } from '../../util/layout';
import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
import {LayoutRect} from '../../util/layout';
import {createTooltipMarkup} from '../../component/tooltip/tooltipMarkup';
import createGraphDataFromDataset from '../helper/createGraphDataFromDataset';


type FocusNodeAdjacency = boolean | 'inEdges' | 'outEdges' | 'allEdges';
Expand Down Expand Up @@ -92,10 +94,11 @@ export interface SankeyLevelOption extends SankeyNodeStateOption, SankeyEdgeStat
depth: number
}

export interface SankeySeriesOption
extends SeriesOption<SankeyBothStateOption<CallbackDataParams>, ExtraStateOption>,
export interface SankeySeriesOption extends
SeriesOption<SankeyBothStateOption<CallbackDataParams>, ExtraStateOption>,
SankeyBothStateOption<CallbackDataParams>,
BoxLayoutOptionMixin {
BoxLayoutOptionMixin,
SeriesEncodeOptionMixin {
type?: 'sankey'

/**
Expand Down Expand Up @@ -176,6 +179,10 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
const graph = createGraphFromNodeEdge(nodes, links, this, true, beforeLink);
return graph.data;
}
else {
const graph = createGraphDataFromDataset(this, true, beforeLink);
return graph.data;
}
function beforeLink(nodeData: SeriesData, edgeData: SeriesData) {
nodeData.wrapMethod('getItemModel', function (model: Model, idx: number) {
const seriesModel = model.parentModel as SankeySeriesModel;
Expand Down Expand Up @@ -271,8 +278,7 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
const params = super.getDataParams(dataIndex, dataType);
if (params.value == null && dataType === 'node') {
const node = this.getGraph().getNodeByIndex(dataIndex);
const nodeValue = node.getLayout().value;
params.value = nodeValue;
params.value = node.getLayout().value;
}
return params;
}
Expand Down
Loading