Skip to content

Commit

Permalink
Add support for custom data structure (#75)
Browse files Browse the repository at this point in the history
* Add support for custom data structure

* Use proper array for length
  • Loading branch information
kurkle committed Sep 23, 2022
1 parent fcfd781 commit 8d8f4e9
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 4 deletions.
31 changes: 31 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,37 @@ const chart = new Chart(ctx, {
});
```

### Custom data structure

Custom data structure can be used by specifying the custom data keys in `options.parsing`.
For example:

```js
const chart = new Chart(ctx, {
type: 'sankey',
data: {
datasets: [
{
data: [
{source: 'a', destination: 'b', value: 20},
{source: 'c', destination: 'd', value: 10},
{source: 'c', destination: 'e', value: 5},
],
colorFrom: 'red',
colorTo: 'green'
}
]
},
options: {
parsing: {
from: 'source',
to: 'destination',
flow: 'value'
}
}
});
```

## Example

![Sankey Example Image](sankey.png)
Expand Down
10 changes: 6 additions & 4 deletions src/controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,11 @@ export default class SankeyController extends DatasetController {
* @return {Array<SankeyParsedData>}
*/
parseObjectData(meta, data, start, count) {
const {from: fromKey = 'from', to: toKey = 'to', flow: flowKey = 'flow'} = this.options.parsing;
const sankeyData = data.map(({[fromKey]: from, [toKey]: to, [flowKey]: flow}) => ({from, to, flow}));
const {xScale, yScale} = meta;
const parsed = []; /* Array<SankeyParsedData> */
const nodes = this._nodes = buildNodesFromRawData(data);
const nodes = this._nodes = buildNodesFromRawData(sankeyData);
/* getDataset() => SankeyControllerDatasetOptions */
const {column, priority, size} = this.getDataset();
if (priority) {
Expand All @@ -102,13 +104,13 @@ export default class SankeyController extends DatasetController {
}
}

const {maxX, maxY} = layout(nodes, data, !!priority, validateSizeValue(size));
const {maxX, maxY} = layout(nodes, sankeyData, !!priority, validateSizeValue(size));

this._maxX = maxX;
this._maxY = maxY;

for (let i = 0, ilen = data.length; i < ilen; ++i) {
const dataPoint = data[i];
for (let i = 0, ilen = sankeyData.length; i < ilen; ++i) {
const dataPoint = sankeyData[i];
const from = nodes.get(dataPoint.from);
const to = nodes.get(dataPoint.to);
const fromY = from.y + getAddY(from.to, dataPoint.to, i);
Expand Down
31 changes: 31 additions & 0 deletions test/fixtures/parsing.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
module.exports = {
config: {
type: 'sankey',
data: {
datasets: [
{
data: [
{source: 'a', destination: 'b', value: 20},
{source: 'c', destination: 'd', value: 10},
{source: 'c', destination: 'e', value: 5},
],
colorFrom: 'red',
colorTo: 'green'
}
]
},
options: {
parsing: {
from: 'source',
to: 'destination',
flow: 'value'
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};
Binary file added test/fixtures/parsing.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8d8f4e9

Please sign in to comment.