Merge pull request #81 from fusawa-yugo/fusawa-yugo/add-tutorial-doc

Add a tutorial demonstrating how to display plots in Optuna-Dashboard

docs/source/index.rst

@@ -3,7 +3,8 @@ Welcome to OptunaHub's documentation!
 
 `OptunaHub <https://hub.optuna.org/>`__ is a registry of third-party packages designed for `Optuna <https://optuna.org>`__.
 It allows users to share and discover Optuna packages that are not included in the official Optuna distribution.
-The `optunahub <https://github.com/optuna/optunahub/>`_ library provides Python APIs to load and use packages from the OptunaHub registry.
+The `optunahub <https://github.com/optuna/optunahub/>`__ library provides Python APIs to load and use packages from the OptunaHub registry.
+Please check out `the OptunaHub tutorial <./tutorials/index.html>`__  as well.
 
 **If you are interested in registering your own features in OptunaHub**, please visit `the optunahub-registry repository <https://github.com/optuna/optunahub-registry>`__ and submit a pull request there. More details are available in `the optunahub-registry tutorial <https://optuna.github.io/optunahub-registry/>`__.
 
@@ -49,4 +50,5 @@ Get ready to explore the most suitable packages for your problems in the `Optuna
    :caption: Contents:
 
    reference
+   tutorials/index
    faq

docs/source/tutorials/index.rst

@@ -0,0 +1,7 @@
+Tutorials
+=========
+
+.. toctree::
+    :maxdepth: 1
+
+    plot-in-optuna-dashboard

docs/source/tutorials/plot-in-optuna-dashboard.rst

@@ -0,0 +1,72 @@
+Tutorial: How to Plot in Optuna-Dashboard
+=========================================
+
+In this tutorial, we will explain how to display plots in `Optuna-Dashboard <https://optuna-dashboard.readthedocs.io/en/latest/index.html>`_.
+
+`optuna_dashboard.save_plotly_graph_object <https://optuna-dashboard.readthedocs.io/en/latest/_generated/optuna_dashboard.save_plotly_graph_object.html#optuna_dashboard.save_plotly_graph_object>`__ can be used 
+to integrate and display plots generated by Optunahub modules in Optuna-Dashboard.
+
+
+Preparation
+-----------
+
+First, ensure the necessary packages are installed by executing the following command:
+
+.. code-block:: console
+
+    $ pip install optuna optunahub optuna-dashboard
+
+Example
+-------
+
+To illustrate an example, we use `The WFG Problem Collection <https://hub.optuna.org/benchmarks/wfg/>`__ and `Plot Pareto Front for Multiple Studies <https://hub.optuna.org/visualization/plot_pareto_front_multi/>`__.
+
+
+.. code-block:: python
+
+    import optuna
+    import optunahub
+    from optuna_dashboard import save_plotly_graph_object
+
+    wfg = optunahub.load_module("benchmarks/wfg")
+    wfg4 = wfg.Problem(function_id=4, n_objectives=2, dimension=3, k=1)
+
+    samplers = [
+        optuna.samplers.RandomSampler(),
+        optuna.samplers.TPESampler(),
+        optuna.samplers.NSGAIISampler(),
+    ]
+    studies = []
+
+    for sampler in samplers:
+        study = optuna.create_study(
+            sampler=sampler,
+            study_name=sampler.__class__.__name__,
+            directions=wfg4.directions,
+            storage="sqlite:///db.sqlite3",
+        )
+        study.optimize(wfg4, n_trials=100)
+        studies.append(study)
+
+    m = optunahub.load_module(
+        "visualization/plot_pareto_front_multi"
+    )
+    fig = m.plot_pareto_front(studies)
+
+    for study in studies:
+        save_plotly_graph_object(study, fig)
+
+After running this code, launch the Optuna-Dashboard by the following command:
+
+.. code-block:: console
+
+    $ optuna-dashboard sqlite:///db.sqlite3
+
+Then, go to one of the study pages.
+You can see the plot in the dashboard like the image below.
+
+.. figure:: ./images/plot-in-optuna-dashboard.png
+   :alt: Plot in Optuna-Dashboard
+   :align: center
+   :width: 800px
+