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]>

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

@@ -57,6 +57,7 @@ Figma
 [fF]ocusable
 FreeMarker
 [gG]etters
+Gantt
 GitHub
 GlassFish
 GraalVM

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

@@ -55,3 +55,14 @@ include::{root}/frontend/demo/component/charts/charts-pie.ts[render,tags=snippet
 include::{root}/frontend/demo/component/charts/charts-polar.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 --
+
+
+== Gantt Chart
+
+[.example]
+--
+[source,html]
+----
+include::{root}/frontend/demo/component/charts/charts-gantt.ts[render,tags=snippet,indent=0,group=Lit]
+----
+--

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

@@ -52,3 +52,13 @@ include::{root}/frontend/demo/component/charts/react/charts-pie.tsx[render,tags=
 include::{root}/frontend/demo/component/charts/react/charts-polar.tsx[render,tags=snippet,indent=0,group=React]
 ----
 --
+
+== Gantt Chart
+
+[.example]
+--
+[source,tsx]
+----
+include::{root}/frontend/demo/component/charts/react/charts-gantt.tsx[render,tags=snippet,indent=0,group=React]
+----
+--

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

@@ -0,0 +1,79 @@
+import 'Frontend/demo/init'; // hidden-source-line
+import '@vaadin/charts';
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { applyTheme } from 'Frontend/generated/theme';
+
+@customElement('charts-gantt')
+export class Example extends LitElement {
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    // Apply custom theme (only supported if your app uses one)
+    applyTheme(root);
+    return root;
+  }
+
+  protected override render() {
+    return html`
+      <!-- tag::snippet[] -->
+      <vaadin-chart
+        type="gantt"
+        title="Gantt Chart"
+        additional-options='{
+                  "xAxis": {
+                      "min": 1416182400000,
+                      "max": 1417305600000
+                  },
+                  "yAxis":{
+                     "categories":[
+                        "Start prototype",
+                        "Test prototype",
+                        "Develop",
+                        "Run acceptance tests"
+                     ]
+                  }
+               }'
+      >
+        <vaadin-chart-series
+          values='[{
+            "y":0,
+            "start": 1416268800000,
+            "end": 1416873600000,
+            "assignee":"John",
+            "completed": 0.25
+        }, {
+            "y":1,
+            "start": 1417046400000,
+            "end": 1417219200000,
+            "assignee":"William"
+        }, {
+            "y":2,
+            "start": 1416441600000,
+            "end": 1416873600000,
+            "assignee":"Jane",
+            "completed": 0.4
+        }, {
+            "y":2,
+            "start": 1417046400000,
+            "end": 1417219200000,
+             "assignee":"Jane"
+        }, {
+            "y":3,
+            "start": 1416700800000,
+            "end": 1416960000000,
+            "assignee":"John",
+            "completed": 0.25
+        }]'
+          additional-options='{
+      "dataLabels": [{
+            "enabled":true,
+            "format":"<div>{point.assignee}</vaadin-avatar>",
+            "useHTML":true,
+            "align":"right"
+         }]}'
+        ></vaadin-chart-series>
+      </vaadin-chart>
+      <!-- end::snippet[] -->
+    `;
+  }
+}

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

@@ -0,0 +1,81 @@
+import {reactExample} from 'Frontend/demo/react-example'; // hidden-source-line
+import React from 'react';
+import {Chart} from '@vaadin/react-components-pro/Chart.js';
+import {ChartSeries} from '@vaadin/react-components-pro/ChartSeries.js';
+
+function Example() {
+  return (
+    // tag::snippet[]
+    <Chart
+      type="gantt"
+      title="Gantt Chart"
+      additionalOptions={{
+        xAxis: {
+          min: 1416182400000,
+          max: 1417305600000,
+        },
+        yAxis: {
+          categories: ['Start prototype', 'Test prototype', 'Develop', 'Run acceptance tests'],
+        },
+      }}>
+      <ChartSeries values={[
+        {
+          y: 0,
+          start: 1416268800000,
+          end: 1416873600000,
+          custom: {
+            assignee: 'John',
+          },
+          completed: 0.33,
+        },
+        {
+          y: 1,
+          start: 1417046400000,
+          end: 1417219200000,
+          custom: {
+            assignee: 'William',
+          },
+        },
+        {
+          y: 2,
+          start: 1416441600000,
+          end: 1416873600000,
+          custom: {
+            assignee: 'Jane',
+          },
+          completed: 0.4,
+        },
+        {
+          y: 2,
+          start: 1417046400000,
+          end: 1417219200000,
+          custom: {
+            assignee: 'Jane',
+          },
+        },
+        {
+          y: 3,
+          start: 1416700800000,
+          end: 1416960000000,
+          custom: {
+            assignee: 'John',
+          },
+          completed: 0.25,
+        },
+      ]}
+
+      additionalOptions={{
+        type: 'gantt',
+        dataLabels: [{
+          enabled: true,
+          format: '<div>{point.custom.assignee}</vaadin-avatar>',
+          useHTML: true,
+          align: 'right',
+        }],
+      }}/>
+    </Chart>
+    // end::snippet[]
+  );
+}
+
+export default reactExample(Example); // hidden-source-line

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

@@ -0,0 +1,66 @@
+package com.vaadin.demo.component.charts.charttypes;
+
+import com.vaadin.demo.DemoExporter;
+import com.vaadin.flow.component.charts.Chart;
+import com.vaadin.flow.component.charts.model.*;
+import com.vaadin.flow.component.charts.model.style.SolidColor;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.Route;
+
+import javax.xml.parsers.SAXParser;
+import java.time.Instant;
+import java.time.LocalDate;
+import java.time.ZoneOffset;
+
+@Route("chart-type-gantt")
+public class ChartTypeGantt extends Div {
+    public ChartTypeGantt() {
+        // tag::snippet[]
+
+        // Create a Gantt chart
+        Chart chart = new Chart(ChartType.GANTT);
+
+        // Modify the default configuration
+        final Configuration configuration = chart.getConfiguration();
+        configuration.setTitle("Gantt Chart with Progress Indicators");
+
+        // Configure the axes - set timeline boundaries
+        XAxis xAxis = configuration.getxAxis();
+        xAxis.setMin(Instant.parse("2014-10-17T00:00:00Z"));
+        xAxis.setMax(Instant.parse("2014-10-30T00:00:00Z"));
+        PlotOptionsGantt plotOptionsGantt = new PlotOptionsGantt();
+        configuration.setPlotOptions(plotOptionsGantt);
+
+        // Add data
+        GanttSeries series = new GanttSeries();
+        series.setName("Project 1");
+        final GanttSeriesItem startPrototype = new GanttSeriesItem(
+                "Start prototype", Instant.parse("2014-10-18T00:00:00Z"),
+                Instant.parse("2014-10-25T00:00:00Z"));
+        startPrototype.setCompleted(0.25);
+        series.add(startPrototype);
+
+        series.add(new GanttSeriesItem("Test prototype",
+                Instant.parse("2014-10-27T00:00:00Z"),
+                Instant.parse("2014-10-29T00:00:00Z")));
+
+        final GanttSeriesItem develop = new GanttSeriesItem("Develop",
+                Instant.parse("2014-10-20T00:00:00Z"),
+                Instant.parse("2014-10-25T00:00:00Z"));
+        develop.setCompleted(new Completed(0.12, SolidColor.ORANGE));
+        series.add(develop);
+
+        series.add(new GanttSeriesItem("Run acceptance tests",
+                Instant.parse("2014-10-23T00:00:00Z"),
+                Instant.parse("2014-10-26T00:00:00Z")));
+        configuration.addSeries(series);
+        // end::snippet[]
+
+        add(new VerticalLayout(chart));
+    }
+
+    public static class Exporter extends DemoExporter<ChartTypeGantt> { // hidden-source-line
+    } // hidden-source-line
+}

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

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2000-2024 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.demo.component.charts.charttypes.gantt;
+
+import com.vaadin.demo.DemoExporter;
+import com.vaadin.flow.component.charts.Chart;
+import com.vaadin.flow.component.charts.model.*;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.router.Route;
+
+import java.time.Instant;
+
+@Route("chart-gantt-basic")
+public class GanttBasicDemo extends Div {
+
+    public GanttBasicDemo() {
+        // tag::snippet[]
+        Chart chart = new Chart(ChartType.GANTT);
+
+        final Configuration configuration = chart.getConfiguration();
+
+        configuration.setTitle("Gantt Chart");
+
+        XAxis xAxis = configuration.getxAxis();
+        xAxis.setMin(Instant.parse("2014-10-17T00:00:00Z"));
+        xAxis.setMax(Instant.parse("2014-10-30T00:00:00Z"));
+
+        PlotOptionsGantt plotOptionsGantt = new PlotOptionsGantt();
+        configuration.setPlotOptions(plotOptionsGantt);
+
+        GanttSeries series = new GanttSeries();
+        series.add(new GanttSeriesItem("Start prototype",
+                Instant.parse("2014-10-18T00:00:00Z"),
+                Instant.parse("2014-10-25T00:00:00Z")));
+
+        series.add(new GanttSeriesItem("Test prototype",
+                Instant.parse("2014-10-27T00:00:00Z"),
+                Instant.parse("2014-10-29T00:00:00Z")));
+
+        series.add(new GanttSeriesItem("Develop",
+                Instant.parse("2014-10-20T00:00:00Z"),
+                Instant.parse("2014-10-25T00:00:00Z")));
+
+        series.add(new GanttSeriesItem("Run acceptance tests",
+                Instant.parse("2014-10-23T00:00:00Z"),
+                Instant.parse("2014-10-26T00:00:00Z")));
+
+        configuration.addSeries(series);
+        // end::snippet[]
+
+        add(chart);
+    }
+
+    public static class Exporter extends DemoExporter<GanttBasicDemo> { // hidden-source-line
+    } // hidden-source-line
+}