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.

Sign up for GitHub

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

Fix/sankey with string value #1339

Merged
merged 4 commits into from
Oct 27, 2023
Merged

Fix/sankey with string value #1339

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81844b5
fix: sankey supports string value
pairone Oct 26, 2023
755deb5
feat: add rush change log
pairone Oct 26, 2023
e54df32
feat: optimize format transform
pairone Oct 27, 2023
11c165d
feat: add protection for value undefined
pairone Oct 27, 2023
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
10 changes: 10 additions & 0 deletions common/changes/@visactor/vchart/fix-sankey-with-string-value_2023-10-26-14-07.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "fix: sankey supports string value",
"type": "none"
}
],
"packageName": "@visactor/vchart"
}
210 changes: 207 additions & 3 deletions packages/vchart/__tests__/runtime/browser/test-page/sankey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,210 @@ import { default as VChart } from '../../../../src/index';
import { DataSet, DataView, csvParser } from '@visactor/vdataset';

const run = () => {
const spec_string_value = {
nodeKey: datum => datum.key,
type: 'sankey',
nodeGap: 5,
nodeWidth: 12,
nodeAlign: 'justify',
iterations: 10,
categoryField: 'key',
valueField: 'value',
// color: {
// field: 'color',
// type: 'ordinal',
// range: ['#5685f6', '#73cbe6', '#489e8e', '#82c882', '#e08c3d', '#f0d060', '#d4644f'],
// specified: {
// '231021145757116-当日': '#5685f6',
// '231021145757116-二级': '#73cbe6',
// '231021145757116-一级': '#489e8e',
// '231021145757116-标准级': '#82c882',
// '231021145757119-消费者': '#e08c3d',
// '231021145757119-别名2': '#f0d060',
// '231021145757119-别名1': '#d4644f'
// },
// domain: [
// '231021145757116-当日',
// '231021145757119-消费者',
// '231021145757116-二级',
// '231021145757119-别名2',
// '231021145757119-别名1',
// '231021145757116-一级',
// '231021145757116-标准级'
// ]
// },
data: [
{
name: 'data',
values: [
{
nodes: [
{
'231021145757116': '当日',
color: '当日',
group: '231021145757116',
key: '231021145757116-当日',
name: '当日',
type: 'node',
value: '6',
outDegree: 3,
inDegree: 0,
children: [
{
'231021145757119': '消费者',
color: '消费者',
group: '231021145757119',
key: '231021145757119-消费者',
name: '消费者',
type: 'node',
value: '3',
outDegree: 0,
inDegree: 4,
children: []
},
{
'231021145757119': '别名1',
color: '别名1',
group: '231021145757119',
key: '231021145757119-别名1',
name: '别名1',
type: 'node',
value: '1.5',
outDegree: 0,
inDegree: 4,
children: []
},
{
'231021145757119': '别名2',
color: '别名2',
group: '231021145757119',
key: '231021145757119-别名2',
name: '别名2',
type: 'node',
value: '1.5',
outDegree: 0,
inDegree: 4,
children: []
}
]
}
]
}
]
}
],
legends: [
{
type: 'discrete',
item: {
label: {
style: {
fontSize: 12,
fill: '#6F6F6F'
}
},
focus: true,
focusIconStyle: {
size: 14
},
maxWidth: 400,
spaceRow: 0,
spaceCol: 0,
padding: {
top: 1,
bottom: 1,
left: 1,
right: 1
},
background: {
visible: false,
style: {
fillOpacity: 0.001
}
},
shape: {
style: {
lineWidth: 0,
symbolType: 'square'
}
}
},
id: 'legend-discrete',
orient: 'bottom',
position: 'middle',
layoutType: 'normal',
visible: true,
maxRow: 2,
title: {
textStyle: {
fontSize: 12,
fill: '#6F6F6F'
}
},
layoutLevel: 50,
pager: {
layout: 'horizontal',
padding: 0,
textStyle: {},
space: 0,
handler: {
preShape: 'triangleLeft',
nextShape: 'triangleRight',
style: {},
state: {
disable: {}
}
}
},
padding: {
top: 16,
bottom: 0,
left: 0,
right: 0
}
}
],
label: {
visible: true,
offset: 0,
overlap: {
hideOnHit: true,
avoidBaseMark: false,
strategy: [
{
type: 'position',
position: ['top', 'bottom']
},
{
type: 'moveY',
offset: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5]
},
{
type: 'moveX',
offset: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5]
}
]
},
style: {
fontSize: 12,
zIndex: 400,
fill: '#363839',
stroke: 'rgba(255, 255, 255, 0.8)',
strokeOpacity: 1,
lineWidth: 1
},
limit: 200,
interactive: false
},
background: 'rgba(255, 255, 255, 0)',
emphasis: {
enable: true,
effect: 'related'
},
animation: false,
hash: 'eb54f530b6e19145b528589f45681b05'
};

const spec_downstream = {
type: 'sankey',
nodeKey: datum => datum.key,
Expand Down Expand Up @@ -1815,13 +2019,13 @@ const run = () => {
{
source: 'Berlin',
target: 'Job Applications',
value: 102,
value: '102',
color: '#dddddd'
},
{
source: 'Barcelona',
target: 'Job Applications',
value: 39,
value: '39',
color: '#dddddd'
},
{
Expand Down Expand Up @@ -13880,7 +14084,7 @@ const run = () => {
hash: '6da81209cec89438789d6eb767c14e48'
};

const vChart = new VChart(spec_downstream, {
const vChart = new VChart(spec_string_value, {
dom: document.getElementById('chart') as HTMLElement,
mode: isMobile ? 'mobile-browser' : 'desktop-browser'
});
Expand Down
41 changes: 39 additions & 2 deletions packages/vchart/src/data/transforms/sankey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import type { SankeyOptions, SankeyData } from '@visactor/vgrammar-sankey';
import { SankeyLayout } from '@visactor/vgrammar-sankey';
import { isArray } from '@visactor/vutils';
import { isArray, isString } from '@visactor/vutils';

export interface ISankeyOpt extends SankeyOptions {
targetField: string;
sourceField: string;
valueField: string;
view: () => { x0: number; x1: number; y0: number; y1: number };
}

Expand Down Expand Up @@ -53,7 +54,7 @@ export const sankey = (data: SankeyData, op: ISankeyOpt) => {
}
}

if (op.sourceField !== 'source' || op.targetField !== 'target') {
if (op.sourceField !== 'source' || op.targetField !== 'target' || op.valueField !== 'value') {
for (const key in data) {
if (key === 'links') {
const updatedData: {}[] = [];
Expand All @@ -64,6 +65,8 @@ export const sankey = (data: SankeyData, op: ISankeyOpt) => {
updatedDatum.source = datum[op.sourceField];
} else if (key === op.targetField) {
updatedDatum.target = datum[op.targetField];
} else if (key === op.valueField) {
updatedDatum.value = datum[op.valueField];
} else {
updatedDatum[key] = datum[key];
}
Expand All @@ -75,6 +78,40 @@ export const sankey = (data: SankeyData, op: ISankeyOpt) => {
}
}

const convertValuesToNumbers = (data: any) => {
data.forEach((obj: any) => {
obj.value = isString(obj.value) ? Number(obj.value) : obj.value; // 将字符串转换为数值类型
pairone marked this conversation as resolved.
Show resolved Hide resolved
if (obj.children.length > 0) {
convertValuesToNumbers(obj.children); // 递归处理子节点
}
});
};

//Convert value from string to number
for (const key in data) {
//node-link型数据
if (key === 'links') {
const updatedData: {}[] = [];
data[key].forEach((datum: any) => {
const updatedDatum: any = {};
for (const key in datum) {
if (key === 'value') {
updatedDatum.value = isString(datum.value) ? Number(datum.value) : datum.value;
pairone marked this conversation as resolved.
Show resolved Hide resolved
} else {
updatedDatum[key] = datum[key];
}
}
updatedData.push(updatedDatum);
});
data[key] = updatedData;
//层级型数据
} else if (key === 'nodes') {
if ((data.nodes?.[0] as any)?.children) {
convertValuesToNumbers(data.nodes);
}
}
}

const layout = new SankeyLayout(op);

const result = [];
Expand Down
11 changes: 11 additions & 0 deletions packages/vchart/src/series/sankey/sankey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpec> exten
},
sourceField: this._spec.sourceField,
targetField: this._spec.targetField,
valueField: this._spec.valueField,
direction: this._spec.direction,
nodeAlign: this._spec.nodeAlign ?? 'justify',
nodeGap: this._spec.nodeGap ?? 8,
Expand Down Expand Up @@ -595,12 +596,22 @@ export class SankeySeries<T extends ISankeySeriesSpec = ISankeySeriesSpec> exten
}
const allLinkElements = linkVGrammarMark.elements;

const labelVGrammarMark = this._labelMark.getProduct();

if (!labelVGrammarMark || !labelVGrammarMark.elements || !labelVGrammarMark.elements.length) {
return;
}
const allLabelElements = labelVGrammarMark.elements;

allNodeElements.forEach(el => {
el.clearStates();
});
allLinkElements.forEach(el => {
el.clearStates();
});
allLabelElements.forEach(el => {
el.clearStates();
});
};

protected _handleNodeAdjacencyClick = (element: IElement) => {
Expand Down
Loading