Skip to content

Commit ae3fae2

Browse files
sgratzlsgratzl
committed
feat: port more samples
1 parent 04936ed commit ae3fae2

File tree

19 files changed

+206
-237
lines changed

19 files changed

+206
-237
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ npm install --save chart.js chartjs-chart-graph
3838

3939
## Usage
4040

41-
see [Samples](https://github.com/sgratzl/chartjs-chart-graph/tree/main/samples) on Github
41+
see [Examples](https://www.sgratzl.com/chartjs-chart-graph/examples/)
4242

4343
CodePens
4444

‎docs/.vitepress/config.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,15 @@ export default defineConfig({
2323
sidebar: [
2424
{
2525
text: 'Examples',
26-
items: [{ text: 'Basic', link: '/examples/' }],
26+
items: [
27+
{ text: 'Basic', link: '/examples/' },
28+
{ text: 'Dendrogram', link: '/examples/dendrogram' },
29+
{ text: 'Tree', link: '/examples/tree' },
30+
{ text: 'Force Directed Graph', link: '/examples/force' },
31+
{ text: 'Tree with Labels', link: '/examples/label' },
32+
{ text: 'Directed Tree', link: '/examples/directed' },
33+
{ text: 'Tree Orientations', link: '/examples/orientation' },
34+
],
2735
},
2836
{
2937
text: 'API',

‎docs/.vitepress/theme/index.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import Theme from 'vitepress/theme';
22
import { createTypedChart } from 'vue-chartjs';
3-
import { Tooltip, LineElement, PointElement } from 'chart.js';
3+
import { Tooltip, LineElement, PointElement, LinearScale } from 'chart.js';
44
import { DendrogramController, ForceDirectedGraphController, EdgeLine, TreeController } from '../../../src';
5+
import ChartPluginDataLabel from 'chartjs-plugin-datalabels';
56

67
export default {
78
...Theme,
@@ -14,9 +15,11 @@ export default {
1415
ForceDirectedGraphController,
1516
EdgeLine,
1617
TreeController,
18+
LinearScale,
19+
ChartPluginDataLabel,
1720
];
1821
app.component('DendrogramChart', createTypedChart('dendrogram', deps));
1922
app.component('TreeChart', createTypedChart('tree', deps));
20-
app.component('ForceDirectedGraphChart', createTypedChart('forceDirected', deps));
23+
app.component('ForceDirectedGraphChart', createTypedChart('forceDirectedGraph', deps));
2124
},
2225
};

‎docs/examples/dendrogram.md‎

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,20 @@ title: Dendrogram
55
# Dendrogram
66

77
<script setup>
8-
import {config as tree} from './tree';
8+
import {config} from './dendrogram';
99
</script>
1010

11-
## Force Directed Graph
12-
13-
<ForceDirectedGraphChart
14-
:options="force.options"
15-
:data="force.data"
16-
/>
17-
18-
### Code
19-
20-
:::code-group
21-
22-
<<< ./force.ts#config [config]
23-
24-
<<< ./force.ts#data [data]
25-
26-
:::
27-
28-
29-
## Tree
30-
31-
<TreeChart
32-
:options="tree.options"
33-
:data="tree.data"
11+
<DendrogramChart
12+
:options="config.options"
13+
:data="config.data"
3414
/>
3515

3616
### Code
3717

3818
:::code-group
3919

40-
<<< ./tree.ts#tree [config]
20+
<<< ./dendrogram.ts#config [config]
4121

42-
<<< ./tree.ts#data [data]
22+
<<< ./dendrogram.ts#data [data]
4323

4424
:::

docs/examples/dendeogram.ts renamed to docs/examples/dendrogram.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ChartConfiguration } from 'chart.js';
22
import type {} from '../../src';
3+
import 'chartjs-plugin-datalabels';
34

45
// #region data
56
import nodes from './tree.json';
@@ -19,5 +20,12 @@ export const data: ChartConfiguration<'dendrogram'>['data'] = {
1920
export const config: ChartConfiguration<'dendrogram'> = {
2021
type: 'dendrogram',
2122
data,
23+
options: {
24+
plugins: {
25+
datalabels: {
26+
display: false,
27+
},
28+
},
29+
},
2230
};
2331
// #endregion config

‎docs/examples/directed.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ChartConfiguration } from 'chart.js';
22
import type {} from '../../src';
3+
import 'chartjs-plugin-datalabels';
34

45
// #region data
56
import nodes from './tree.json';
@@ -20,5 +21,12 @@ export const data: ChartConfiguration<'tree'>['data'] = {
2021
export const config: ChartConfiguration<'tree'> = {
2122
type: 'tree',
2223
data,
24+
options: {
25+
plugins: {
26+
datalabels: {
27+
display: false,
28+
},
29+
},
30+
},
2331
};
2432
// #endregion config

‎docs/examples/force.ts‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ChartConfiguration } from 'chart.js';
22
import type {} from '../../src';
3+
import 'chartjs-plugin-datalabels';
34

45
// #region data
56
import miserables from './miserables.json';
@@ -21,22 +22,8 @@ export const config: ChartConfiguration<'forceDirectedGraph'> = {
2122
data,
2223
options: {
2324
plugins: {
24-
zoom: {
25-
pan: {
26-
enabled: true,
27-
},
28-
zoom: {
29-
wheel: {
30-
enabled: true,
31-
},
32-
pinch: {
33-
enabled: true,
34-
},
35-
// drag: {
36-
// enabled: true
37-
// },
38-
mode: 'xy',
39-
},
25+
datalabels: {
26+
display: false,
4027
},
4128
},
4229
},

‎docs/examples/index.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: Examples
77
<script setup>
88
import {config as force} from './force';
99
import {config as dendrogram} from './dendrogram';
10-
import {tree} from './tree';
10+
import {config as tree} from './tree';
1111
</script>
1212

1313
## Force Directed Graph
@@ -27,21 +27,20 @@ import {tree} from './tree';
2727

2828
:::
2929

30-
3130
## Dendrogram
3231

33-
<TreeChart
34-
:options="dendogram.options"
35-
:data="dendogram.data"
32+
<DendrogramChart
33+
:options="dendrogram.options"
34+
:data="dendrogram.data"
3635
/>
3736

3837
### Code
3938

4039
:::code-group
4140

42-
<<< ./dendogram.ts#config [config]
41+
<<< ./dendrogram.ts#config [config]
4342

44-
<<< ./dendogram.ts#data [data]
43+
<<< ./dendrogram.ts#data [data]
4544

4645
:::
4746

‎docs/examples/label.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Tree with Labels
3+
---
4+
5+
# Tree with Labels
6+
7+
<script setup>
8+
import {config, radial} from './label';
9+
</script>
10+
11+
<TreeChart
12+
:options="config.options"
13+
:data="config.data"
14+
/>
15+
16+
### Code
17+
18+
:::code-group
19+
20+
<<< ./label.ts#config [config]
21+
22+
<<< ./label.ts#data [data]
23+
24+
:::
25+
26+
## Radial Tree with Labels
27+
28+
<TreeChart
29+
:options="radial.options"
30+
:data="radial.data"
31+
/>
32+
33+
### Code
34+
35+
:::code-group
36+
37+
<<< ./label.ts#radial [config]
38+
39+
<<< ./label.ts#data [data]
40+
41+
:::

‎docs/examples/label.ts‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { ChartConfiguration } from 'chart.js';
22
import type {} from '../../src';
3-
3+
import ChartDataLabels from 'chartjs-plugin-datalabels';
44
// #region data
55
import nodes from './tree.json';
66

7-
export const data: ChartConfiguration<'forceDirectedGraph'>['data'] = {
7+
export const data: ChartConfiguration<'tree'>['data'] = {
88
labels: nodes.map((d) => d.name),
99
datasets: [
1010
{
@@ -16,8 +16,8 @@ export const data: ChartConfiguration<'forceDirectedGraph'>['data'] = {
1616
};
1717
// #endregion data
1818
// #region config
19-
export const config: ChartConfiguration<'forceDirectedGraph'> = {
20-
type: 'forceDirectedGraph',
19+
export const config: ChartConfiguration<'tree'> = {
20+
type: 'tree',
2121
data,
2222
options: {
2323
tree: {
@@ -50,3 +50,42 @@ export const config: ChartConfiguration<'forceDirectedGraph'> = {
5050
plugins: [ChartDataLabels],
5151
};
5252
// #endregion config
53+
54+
// #region radial
55+
export const radial: ChartConfiguration<'tree'> = {
56+
type: 'tree',
57+
data,
58+
options: {
59+
tree: {
60+
orientation: 'radial',
61+
},
62+
layout: {
63+
padding: 40,
64+
},
65+
plugins: {
66+
datalabels: {
67+
display: (context) => {
68+
// const index = context.dataIndex;
69+
// const value = context.dataset.data[index];
70+
return true; //value.children.length === 0;
71+
},
72+
align: (context) => {
73+
const index = context.dataIndex;
74+
const value = context.dataset.data[index] as { angle: number };
75+
return (-value.angle / Math.PI) * 180;
76+
},
77+
rotation: (context) => {
78+
const index = context.dataIndex;
79+
const value = context.dataset.data[index] as { angle: number };
80+
return (-value.angle / Math.PI) * 180;
81+
},
82+
backgroundColor: 'white',
83+
formatter: (v) => {
84+
return v.name;
85+
},
86+
},
87+
},
88+
},
89+
plugins: [ChartDataLabels],
90+
};
91+
// #endregion radial

0 commit comments

Comments
 (0)