Skip to content

Commit 7dca52b

Browse files
phibr0phibr0
authored
Merge pull request #99 from phibr0/revert-98-revert-90-sankey-chart
Revert "Revert "add sankey chart type""
2 parents d05a2b6 + a504f61 commit 7dca52b

File tree

6 files changed

+110
-20
lines changed

6 files changed

+110
-20
lines changed

‎docusaurus/docs/Chart Types/Sankey.mdx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Sankey Chart
2+
3+
## Example
4+
5+
````yaml
6+
```chart
7+
type: sankey
8+
labels: [Oil, "Natural Gas", Coal, "Fossil Fuel", Electricity, Energy]
9+
series:
10+
- data:
11+
- [Oil, 15, "Fossil Fuels"]
12+
- ["Natural Gas", 20, "Fossil Fuels"]
13+
- ["Coal", 25, "Fossil Fuels"]
14+
- ["Coal", 25, "Electricity"]
15+
- ["Fossil Fuels", 60, "Energy"]
16+
- ["Electricity", 25, "Energy"]
17+
priority:
18+
Oil: 1
19+
Natural Gas: 2
20+
Coal: 3
21+
Fossil Fuels: 1
22+
Electricity: 2
23+
Energy: 1
24+
colorFrom:
25+
Oil: "black"
26+
Coal: "gray"
27+
"Fossil Fuels": "slategray"
28+
Electricity: "blue"
29+
Energy: "orange"
30+
colorTo:
31+
Oil: "black"
32+
Coal: "gray"
33+
"Fossil Fuels": "slategray"
34+
Electricity: "blue"
35+
Energy: "orange"
36+
```
37+
````
38+
39+
The above example Code will render a _Sankey Chart_.
40+
41+
![Radar Chart Example Image](../../../images/sankey.png)
42+
43+
## Advanced
44+
45+
*See [Modifiers](/Modifiers) for advanced configuration.*

‎images/sankey.png

107 KB
Loading

‎manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"id": "obsidian-charts",
33
"name": "Obsidian Charts",
4-
"version": "3.8.1",
4+
"version": "3.8.0",
55
"minAppVersion": "0.12.7",
66
"description": "This Plugin lets you create Charts within Obsidian",
77
"author": "phibr0",

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
},
3030
"dependencies": {
3131
"chart.js": "^3.9.1",
32+
"chartjs-chart-sankey": "^0.12.0",
3233
"chroma-js": "^2.1.2",
3334
"markdown-tables-to-json": "^0.1.7",
3435
"svelte": "^3.35.0",

‎src/chartRenderer.ts

+47-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { Chart, ChartConfiguration, RadarControllerChartOptions, registerables } from 'chart.js';
1+
import { Chart, ChartConfiguration, SankeyControllerDatasetOptions, registerables } from 'chart.js';
2+
import { SankeyController, Flow } from 'chartjs-chart-sankey';
23
import './date-adapter/chartjs-adapter-moment.esm.js';
34
import { MarkdownPostProcessorContext, MarkdownRenderChild, parseYaml, TFile } from 'obsidian';
45
import { generateInnerColors, renderError } from 'src/util';
5-
import type { ChartPluginSettings, ImageOptions } from './constants/settingsConstants';
6+
import type { ImageOptions } from './constants/settingsConstants';
67
import type ChartPlugin from 'src/main';
78
import { generateTableData } from 'src/chartFromTable';
89
import annotationPlugin from 'chartjs-plugin-annotation'
910

10-
Chart.register(...registerables, annotationPlugin);
11+
Chart.register(...registerables, annotationPlugin, SankeyController, Flow);
1112

1213
// I need to refactor this
1314
// Or just rewrite it completely
@@ -37,15 +38,26 @@ export default class Renderer {
3738
}
3839
}
3940
for (let i = 0; yaml.series.length > i; i++) {
40-
datasets.push({
41-
label: yaml.series[i].title ?? "",
42-
data: yaml.series[i].data,
41+
const {title, ...rest} = yaml.series[i];
42+
const dataset = {
43+
label: title ?? "",
4344
backgroundColor: yaml.labelColors ? colors.length ? generateInnerColors(colors, yaml.transparency) : generateInnerColors(this.plugin.settings.colors, yaml.transparency) : colors.length ? generateInnerColors(colors, yaml.transparency)[i] : generateInnerColors(this.plugin.settings.colors, yaml.transparency)[i],
4445
borderColor: yaml.labelColors ? colors.length ? colors : this.plugin.settings.colors : colors.length ? colors[i] : this.plugin.settings.colors[i],
4546
borderWidth: 1,
4647
fill: yaml.fill ? yaml.stacked ? i == 0 ? 'origin' : '-1' : true : false, //See https://github.com/phibr0/obsidian-charts/issues/53#issuecomment-1084869550
4748
tension: yaml.tension ?? 0,
48-
});
49+
...rest,
50+
};
51+
if (yaml.type === 'sankey') {
52+
// colorFrom, colorTo is accepted as object in yaml, but should be function for sankey.
53+
if (dataset.colorFrom)
54+
(dataset as SankeyControllerDatasetOptions).colorFrom = (c) => yaml.series[i].colorFrom[c.dataset.data[c.dataIndex].from] ?? colors[i] ?? 'green'
55+
56+
if (dataset.colorTo)
57+
(dataset as SankeyControllerDatasetOptions).colorTo = (c) => yaml.series[i].colorTo[c.dataset.data[c.dataIndex].to] ?? colors[i] ?? 'green'
58+
59+
}
60+
datasets.push(dataset);
4961
}
5062
}
5163

@@ -147,7 +159,34 @@ export default class Renderer {
147159
},
148160
}
149161
};
150-
} else {
162+
} else if (yaml.type === 'sankey') {
163+
datasets = datasets.map(dataset => {
164+
return {
165+
...dataset,
166+
data: dataset.data.map((item: object | any[]) =>
167+
Array.isArray(item) && item.length === 3 ?
168+
{
169+
from: item[0],
170+
flow: item[1],
171+
to: item[2],
172+
} : item
173+
)
174+
}
175+
}) as ChartConfiguration<'sankey'>['data']['datasets'];
176+
177+
(chartOptions as ChartConfiguration<'sankey'>) = {
178+
type: yaml.type,
179+
data: {
180+
labels,
181+
datasets,
182+
},
183+
options: {
184+
animation: {
185+
duration: 0
186+
},
187+
}
188+
}
189+
}else {
151190
(chartOptions as ChartConfiguration<"pie" | "doughnut" | "bubble" | "scatter">) = {
152191
type: yaml.type,
153192
data: {

‎yarn.lock

+16-11
Original file line numberDiff line numberDiff line change
@@ -177,15 +177,20 @@ chart.js@^3.9.1:
177177
resolved "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz"
178178
integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
179179

180-
chartjs-plugin-annotation@^2.2.1:
181-
version "2.2.1"
182-
resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.2.1.tgz#b7c359e46814b27632d9648584435d64c183427c"
183-
integrity sha512-RL9UtrFr2SXd7C47zD0MZqn6ZLgrcRt3ySC6cYal2amBdANcYB1QcwFXcpKWAYnO4SGJYRok7P5rKDDNgJMA/w==
180+
chartjs-chart-sankey@^0.12.0:
181+
version "0.12.0"
182+
resolved "https://registry.yarnpkg.com/chartjs-chart-sankey/-/chartjs-chart-sankey-0.12.0.tgz#eef091d84dd57a1953606b46e021d60099fe46ce"
183+
integrity sha512-2f0YfDWNTTDqztVALlD2YMdSbpmjxdxHpcpKgBi9cUq3IPWBvHb58h4gIa7GjsYVjMLwX6gusDXgxlh9PMKkkA==
184184

185-
chokidar@^3.4.1:
186-
version "3.5.3"
187-
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
188-
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
185+
"chartjs-plugin-annotation@^2.2.1":
186+
"integrity" "sha512-RL9UtrFr2SXd7C47zD0MZqn6ZLgrcRt3ySC6cYal2amBdANcYB1QcwFXcpKWAYnO4SGJYRok7P5rKDDNgJMA/w=="
187+
"resolved" "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.2.1.tgz#b7c359e46814b27632d9648584435d64c183427c"
188+
"version" "2.2.1"
189+
190+
"chokidar@^3.4.1":
191+
"integrity" "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw=="
192+
"resolved" "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
193+
"version" "3.5.3"
189194
dependencies:
190195
anymatch "~3.1.2"
191196
braces "~3.0.2"
@@ -279,9 +284,9 @@ fs.realpath@^1.0.0:
279284
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
280285

281286
fsevents@~2.3.2:
282-
version "2.3.3"
283-
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
284-
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
287+
version "2.3.2"
288+
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
289+
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
285290

286291
function-bind@^1.1.1:
287292
version "1.1.1"

0 commit comments

Comments
 (0)