Skip to content

Commit e236213

Browse files
bwajtrrusselljtdyer
bwajtr
and
russelljtdyer
authored
docs: documentation of the new Vaadin Charts Gantt Chart feature (#4078)
--------- Co-authored-by: Russell J.T. Dyer <[email protected]> Co-authored-by: Russell JT Dyer <[email protected]>
1 parent 1b5d512 commit e236213

21 files changed

+2509
-320
lines changed

‎.github/styles/config/vocabularies/Docs/accept.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ Figma
5757
[fF]ocusable
5858
FreeMarker
5959
[gG]etters
60+
Gantt
6061
GitHub
6162
GlassFish
6263
GraalVM

‎articles/components/charts/charttypes.adoc

Lines changed: 264 additions & 320 deletions
Large diffs are not rendered by default.

‎articles/components/charts/gantt.adoc

Lines changed: 595 additions & 0 deletions
Large diffs are not rendered by default.

‎articles/components/charts/img/charts-gantt.png

52.5 KB
Loading

‎articles/components/charts/usage-with-lit.adoc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,14 @@ include::{root}/frontend/demo/component/charts/charts-pie.ts[render,tags=snippet
5555
include::{root}/frontend/demo/component/charts/charts-polar.ts[render,tags=snippet,indent=0,group=Lit]
5656
----
5757
--
58+
59+
60+
== Gantt Chart
61+
62+
[.example]
63+
--
64+
[source,html]
65+
----
66+
include::{root}/frontend/demo/component/charts/charts-gantt.ts[render,tags=snippet,indent=0,group=Lit]
67+
----
68+
--

‎articles/components/charts/usage-with-react.adoc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,13 @@ include::{root}/frontend/demo/component/charts/react/charts-pie.tsx[render,tags=
5252
include::{root}/frontend/demo/component/charts/react/charts-polar.tsx[render,tags=snippet,indent=0,group=React]
5353
----
5454
--
55+
56+
== Gantt Chart
57+
58+
[.example]
59+
--
60+
[source,tsx]
61+
----
62+
include::{root}/frontend/demo/component/charts/react/charts-gantt.tsx[render,tags=snippet,indent=0,group=React]
63+
----
64+
--

‎frontend/demo/component/charts/charts-gantt.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import 'Frontend/demo/init'; // hidden-source-line
2+
import '@vaadin/charts';
3+
import { html, LitElement } from 'lit';
4+
import { customElement } from 'lit/decorators.js';
5+
import { applyTheme } from 'Frontend/generated/theme';
6+
7+
@customElement('charts-gantt')
8+
export class Example extends LitElement {
9+
protected override createRenderRoot() {
10+
const root = super.createRenderRoot();
11+
// Apply custom theme (only supported if your app uses one)
12+
applyTheme(root);
13+
return root;
14+
}
15+
16+
protected override render() {
17+
return html`
18+
<!-- tag::snippet[] -->
19+
<vaadin-chart
20+
type="gantt"
21+
title="Gantt Chart"
22+
additional-options='{
23+
"xAxis": {
24+
"min": 1416182400000,
25+
"max": 1417305600000
26+
},
27+
"yAxis":{
28+
"categories":[
29+
"Start prototype",
30+
"Test prototype",
31+
"Develop",
32+
"Run acceptance tests"
33+
]
34+
}
35+
}'
36+
>
37+
<vaadin-chart-series
38+
values='[{
39+
"y":0,
40+
"start": 1416268800000,
41+
"end": 1416873600000,
42+
"assignee":"John",
43+
"completed": 0.25
44+
}, {
45+
"y":1,
46+
"start": 1417046400000,
47+
"end": 1417219200000,
48+
"assignee":"William"
49+
}, {
50+
"y":2,
51+
"start": 1416441600000,
52+
"end": 1416873600000,
53+
"assignee":"Jane",
54+
"completed": 0.4
55+
}, {
56+
"y":2,
57+
"start": 1417046400000,
58+
"end": 1417219200000,
59+
"assignee":"Jane"
60+
}, {
61+
"y":3,
62+
"start": 1416700800000,
63+
"end": 1416960000000,
64+
"assignee":"John",
65+
"completed": 0.25
66+
}]'
67+
additional-options='{
68+
"dataLabels": [{
69+
"enabled":true,
70+
"format":"<div>{point.assignee}</vaadin-avatar>",
71+
"useHTML":true,
72+
"align":"right"
73+
}]}'
74+
></vaadin-chart-series>
75+
</vaadin-chart>
76+
<!-- end::snippet[] -->
77+
`;
78+
}
79+
}

‎frontend/demo/component/charts/react/charts-gantt.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {reactExample} from 'Frontend/demo/react-example'; // hidden-source-line
2+
import React from 'react';
3+
import {Chart} from '@vaadin/react-components-pro/Chart.js';
4+
import {ChartSeries} from '@vaadin/react-components-pro/ChartSeries.js';
5+
6+
function Example() {
7+
return (
8+
// tag::snippet[]
9+
<Chart
10+
type="gantt"
11+
title="Gantt Chart"
12+
additionalOptions={{
13+
xAxis: {
14+
min: 1416182400000,
15+
max: 1417305600000,
16+
},
17+
yAxis: {
18+
categories: ['Start prototype', 'Test prototype', 'Develop', 'Run acceptance tests'],
19+
},
20+
}}>
21+
<ChartSeries values={[
22+
{
23+
y: 0,
24+
start: 1416268800000,
25+
end: 1416873600000,
26+
custom: {
27+
assignee: 'John',
28+
},
29+
completed: 0.33,
30+
},
31+
{
32+
y: 1,
33+
start: 1417046400000,
34+
end: 1417219200000,
35+
custom: {
36+
assignee: 'William',
37+
},
38+
},
39+
{
40+
y: 2,
41+
start: 1416441600000,
42+
end: 1416873600000,
43+
custom: {
44+
assignee: 'Jane',
45+
},
46+
completed: 0.4,
47+
},
48+
{
49+
y: 2,
50+
start: 1417046400000,
51+
end: 1417219200000,
52+
custom: {
53+
assignee: 'Jane',
54+
},
55+
},
56+
{
57+
y: 3,
58+
start: 1416700800000,
59+
end: 1416960000000,
60+
custom: {
61+
assignee: 'John',
62+
},
63+
completed: 0.25,
64+
},
65+
]}
66+
67+
additionalOptions={{
68+
type: 'gantt',
69+
dataLabels: [{
70+
enabled: true,
71+
format: '<div>{point.custom.assignee}</vaadin-avatar>',
72+
useHTML: true,
73+
align: 'right',
74+
}],
75+
}}/>
76+
</Chart>
77+
// end::snippet[]
78+
);
79+
}
80+
81+
export default reactExample(Example); // hidden-source-line

‎src/main/java/com/vaadin/demo/component/charts/charttypes/ChartTypeGantt.java

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
package com.vaadin.demo.component.charts.charttypes;
2+
3+
import com.vaadin.demo.DemoExporter;
4+
import com.vaadin.flow.component.charts.Chart;
5+
import com.vaadin.flow.component.charts.model.*;
6+
import com.vaadin.flow.component.charts.model.style.SolidColor;
7+
import com.vaadin.flow.component.html.Div;
8+
import com.vaadin.flow.component.html.Span;
9+
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
10+
import com.vaadin.flow.router.Route;
11+
12+
import javax.xml.parsers.SAXParser;
13+
import java.time.Instant;
14+
import java.time.LocalDate;
15+
import java.time.ZoneOffset;
16+
17+
@Route("chart-type-gantt")
18+
public class ChartTypeGantt extends Div {
19+
public ChartTypeGantt() {
20+
// tag::snippet[]
21+
22+
// Create a Gantt chart
23+
Chart chart = new Chart(ChartType.GANTT);
24+
25+
// Modify the default configuration
26+
final Configuration configuration = chart.getConfiguration();
27+
configuration.setTitle("Gantt Chart with Progress Indicators");
28+
29+
// Configure the axes - set timeline boundaries
30+
XAxis xAxis = configuration.getxAxis();
31+
xAxis.setMin(Instant.parse("2014-10-17T00:00:00Z"));
32+
xAxis.setMax(Instant.parse("2014-10-30T00:00:00Z"));
33+
PlotOptionsGantt plotOptionsGantt = new PlotOptionsGantt();
34+
configuration.setPlotOptions(plotOptionsGantt);
35+
36+
// Add data
37+
GanttSeries series = new GanttSeries();
38+
series.setName("Project 1");
39+
final GanttSeriesItem startPrototype = new GanttSeriesItem(
40+
"Start prototype", Instant.parse("2014-10-18T00:00:00Z"),
41+
Instant.parse("2014-10-25T00:00:00Z"));
42+
startPrototype.setCompleted(0.25);
43+
series.add(startPrototype);
44+
45+
series.add(new GanttSeriesItem("Test prototype",
46+
Instant.parse("2014-10-27T00:00:00Z"),
47+
Instant.parse("2014-10-29T00:00:00Z")));
48+
49+
final GanttSeriesItem develop = new GanttSeriesItem("Develop",
50+
Instant.parse("2014-10-20T00:00:00Z"),
51+
Instant.parse("2014-10-25T00:00:00Z"));
52+
develop.setCompleted(new Completed(0.12, SolidColor.ORANGE));
53+
series.add(develop);
54+
55+
series.add(new GanttSeriesItem("Run acceptance tests",
56+
Instant.parse("2014-10-23T00:00:00Z"),
57+
Instant.parse("2014-10-26T00:00:00Z")));
58+
configuration.addSeries(series);
59+
// end::snippet[]
60+
61+
add(new VerticalLayout(chart));
62+
}
63+
64+
public static class Exporter extends DemoExporter<ChartTypeGantt> { // hidden-source-line
65+
} // hidden-source-line
66+
}

‎src/main/java/com/vaadin/demo/component/charts/charttypes/gantt/GanttBasicDemo.java

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
* Copyright 2000-2024 Vaadin Ltd.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
5+
* use this file except in compliance with the License. You may obtain a copy of
6+
* the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
12+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13+
* License for the specific language governing permissions and limitations under
14+
* the License.
15+
*/
16+
package com.vaadin.demo.component.charts.charttypes.gantt;
17+
18+
import com.vaadin.demo.DemoExporter;
19+
import com.vaadin.flow.component.charts.Chart;
20+
import com.vaadin.flow.component.charts.model.*;
21+
import com.vaadin.flow.component.html.Div;
22+
import com.vaadin.flow.router.Route;
23+
24+
import java.time.Instant;
25+
26+
@Route("chart-gantt-basic")
27+
public class GanttBasicDemo extends Div {
28+
29+
public GanttBasicDemo() {
30+
// tag::snippet[]
31+
Chart chart = new Chart(ChartType.GANTT);
32+
33+
final Configuration configuration = chart.getConfiguration();
34+
35+
configuration.setTitle("Gantt Chart");
36+
37+
XAxis xAxis = configuration.getxAxis();
38+
xAxis.setMin(Instant.parse("2014-10-17T00:00:00Z"));
39+
xAxis.setMax(Instant.parse("2014-10-30T00:00:00Z"));
40+
41+
PlotOptionsGantt plotOptionsGantt = new PlotOptionsGantt();
42+
configuration.setPlotOptions(plotOptionsGantt);
43+
44+
GanttSeries series = new GanttSeries();
45+
series.add(new GanttSeriesItem("Start prototype",
46+
Instant.parse("2014-10-18T00:00:00Z"),
47+
Instant.parse("2014-10-25T00:00:00Z")));
48+
49+
series.add(new GanttSeriesItem("Test prototype",
50+
Instant.parse("2014-10-27T00:00:00Z"),
51+
Instant.parse("2014-10-29T00:00:00Z")));
52+
53+
series.add(new GanttSeriesItem("Develop",
54+
Instant.parse("2014-10-20T00:00:00Z"),
55+
Instant.parse("2014-10-25T00:00:00Z")));
56+
57+
series.add(new GanttSeriesItem("Run acceptance tests",
58+
Instant.parse("2014-10-23T00:00:00Z"),
59+
Instant.parse("2014-10-26T00:00:00Z")));
60+
61+
configuration.addSeries(series);
62+
// end::snippet[]
63+
64+
add(chart);
65+
}
66+
67+
public static class Exporter extends DemoExporter<GanttBasicDemo> { // hidden-source-line
68+
} // hidden-source-line
69+
}

0 commit comments

Comments
 (0)