Reputation: 11
I am making a sankey chart There are cases when I am setting a source which belongs to one dimension and another source with the same name which belongs to another dimension, the chart treats both as same as the source name is same, is there any way in AntV documentation to solve this case or should i come up with different approach.
function SankeyChartComponent() {
const Context = React.useContext(DataComponentContext);
const dimensions = [...Context.converse?.colType?.date, ...Context.converse.colType?.dim];
const metrics = [...Context.converse?.colType?.metrics];
const originalData = [...Context.converse?.val];
const sankeyData: any[] = [];
originalData.forEach((d) => {
dimensions.reduce((a, b) => {
if (a && b) {
sankeyData.push({
source:
d[a],
target:
d[b],
value: d[metrics[0]],
});
}
return b;
});
});
return (
<div className="SankeyChartComponent" style={{ height: Context.chatRenderHeight }}>
<SankeyChart
name={'sankey'}
theme={Context.ChartThemeColors}
sourceField={Context.RuleConfig?.params?.sourceField}
targetField={Context.RuleConfig?.params?.targetField}
weightField={Context.RuleConfig?.params?.weightField}
data={sankeyData}
chartProps={{
...Context.basicChartConfig,
...config,
}}
/>
</div>
);
This is what I did till now to get the chart working. Although I want to know if there is a key we need to add to say that sources with the same name should be treated differently.
Upvotes: 1
Views: 86