Asciidoctor reveal.js

include::../common/commons.adoc[]
:stem:
:revealjs_plugin_search: enabled
:experimental:
:author:  Gerson Sunyé
:authorinitials: GS
:email: gerson.sunye@ls2n.fr

= Asciidoctor reveal.js

[.subtitle]
Examples

image::{imagesdir}/naomod-bluewhite.png[link="https://naomod.github.io"]

Nantes Software Modeling Group

LS2N -- Nantes University, November 2023

== Useful links

* https://asciidoctor.org/docs/asciidoctor-revealjs/[Asciidoctor reveal.js Documentation]
* https://asciidoctor.org/docs/[Asciidoctor Documentation]
* https://asciidoctor.org/docs/asciidoctor-diagram/[Asciidoctor Diagram Documentation]
* https://revealjs.com[reveal.js]

== Simple Blocks

.AsciiDoc history
****
AsciiDoc was first released in Nov 2002 by Stuart Rackham.
It was designed from the start to be a shorthand syntax
for producing professional documents like DocBook and LaTeX.
****

[.impact]
== Text Formatting and Punctuation

== Emphasis, Strong, Code

.Emphasis
* An italic _word_, and an italic _phrase of text_.

.Strong
* A bold *word*, and a bold *phrase of text*.

== Code

.Code
* "`Wait!`" Indigo plucked a small vial from her desk's top drawer and held it toward us.
* The vial's label read: `E=mc^2^`; the `E` represents _energy_, but also pure _genius!_

== Superscript and Subscript

Well the H~2~O formula written on their whiteboard could be part
of a shopping list, but I don't think the local bodega sells
E=mc^2^.

== Quotation Marks and Apostrophes

.Curved Quotes
* '`single smart quotes`'
* "`double smart quotes`"

== Default

This is the default (boring) alignment!

== Center

[.text-center]
This text is centered.

== Left

[.text-left]
This text is left-aligned.

== Right

[.text-right]
This text is right-aligned.

== Justified

[.text-justify]
This text is justified.

[.text-right]
== Title is Right-Aligned

Content too!

== Back to Normal!

Content too!

[.text-left]
== Title is Left-Aligned

Content too!

[.text-center]
== Title is Centered

Content too!

== Alignment Combination
[.text-left]
Text left


[.text-right]
Text right

[.text-center]
Centralized


[.text-justify]
Justified

== Simple Lists

* Level One
** Level Two
*** Level Three
** Level Two Again
* Level One Again

== Numbered Lists

. Level One
.. Level Two
... Level Three
.. Level Two Again
. Level One Again

== Checklist

WARNING: Not working in Asciidoctor reveal.js

* [*] checked
* [x] also checked
* [ ] not checked
* normal list item

== Complex Lists

* The header in AsciiDoc must start with a document title.
+
----
= Document Title
----
+
Keep in mind that the header is optional.

* Optional author and revision information lines immediately follow the document title.
+
----
= Document Title
Doc Writer <doc.writer@asciidoc.org>
v1.0, 2022-01-01
----

== Admonition

WARNING: This is a *warning*.

TIP: This is a *tip*

CAUTION: Act with *caution*

NOTE: This is a *note*

IMPORTANT: This is *important*

== Admonition Blocks

[NOTE]
====
An admonition block may contain complex content.

.A list
- one
- two
- three

Another paragraph.
====

== Sidebars

WARNING: Not working in Asciidoctor reveal.js

.Optional Title
****
Sidebars are used to visually separate auxiliary bits of content
that supplement the main text.

TIP: They can contain any type of content.

.Source code block in a sidebar
[source,js]
----
const { expect, expectCalledWith, heredoc } = require('../test/test-utils')
----
****

== Collapsible Simple

WARNING: Not working in Asciidoctor reveal.js

.Collapsible Block
[%collapsible]
====
Collapsible text
====

== Collapsible Block

.Show stacktrace
[%collapsible]
====
....
Error: Content repository not found (url: https://git.example.org/repo.git)
    at transformGitCloneError
    at git.clone.then.then.catch
Caused by: HttpError: HTTP Error: 401 HTTP Basic: Access Denied
    at GitCredentialManagerStore.rejected
    at fill.then
....
====

== Footnotes

* Footnotes are available since version 4.1.0 footnote:[This is an example of a footnote.]

== Icons

.Icons:
* icon:address-book[]
* icon:thumbs-up[]
* icon:thumbs-down[]
* icon:desktop[]

Most https://fontawesome.com/icons?d=gallery[Font Awesome icons] are available.

== Math Equation

Using standard latexmath:[\LaTeX] syntax:

[stem]
++++
\sqrt{37} = \sqrt{\frac{73^2-1}{12^2}} \approx \frac{73}{12} (1 - \frac{1}{2\cdot73^2})
++++

Another one:

stem:[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}]

/*
 * Copyright (c) 2021 Atlanmod.
 *
 * All rights reserved. This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License v2.0 which accompanies
 * this distribution, and is available at https://www.eclipse.org/legal/epl-2.0/
 */

package org.atlanmod.commons.mutable;

import javax.annotation.Nonnull;

/**
 * A mutable int wrapper.
 */
public class MutableInteger extends Number implements Comparable<MutableInteger>, Mutable<Integer> {

    private int value;

    /**
     * Constructs a new MutableInteger
     */
    public MutableInteger() {
        super();
    }

    /**
     * Constructs a new MutableInteger and stores the specified value.
     *
     * @param newValue the initial value
     */
    public MutableInteger(int newValue) {
        this();
        this.value = newValue;
    }

    /**
     * Sets the value of the stored int
     *
     * @param newValue the new value to store
     */
    public void set(int newValue) {
        this.value = newValue;
    }

    /**
     * Gets the value of the stored int
     *
     * @return the stored int
     */
    public int get() {
        return this.value;
    }

    /**
     * Increments by 1 the stored value
     */
    public void increment() {
        this.value++;
    }

    /**
     * Increments by 1 the stored value and gets the new value
     *
     * @return the stored value, after it is incremented
     */
    public int incrementAndGet() {
       this.value++;
       return this.value;
    }

    /**
     * Increments by 1 the stored value and gets the previous stored value
     *
     * @return the store valued prior to the increment
     */
    public int getAndIncrement() {
        int oldValue = this.value;
        this.value++;
        return oldValue;
    }

    /**
     * Decrements by 1 the stored value
     */
    public void decrement() {
        this.value--;
    }

    /**
     * Decrements by 1 the stored value and gets the new value
     *
     * @return the stored value, after it is decremented
     */
    public int decrementAndGet() {
        this.value--;
        return this.value;
    }

    /**
     * Decrements by 1 the stored value and gets the previous stored value
     *
     * @return the store valued prior to the increment
     */
    public int getAndDecrement() {
        int oldValue = this.value;
        this.value--;
        return oldValue;
    }

    @Override
    public boolean equals(Object other) {
        if (this == other) return true;
        if (!(other instanceof MutableInteger)) return false;

        MutableInteger that = (MutableInteger) other;

        return value == that.value;
    }

    @Override
    public int hashCode() {
        return value;
    }

    @Override
    public Integer getValue() {
        return Integer.valueOf(this.value);
    }

    @Override
    public void setValue(Integer newValue) {
        this.value = newValue.intValue();
    }

    @Override
    public int compareTo(@Nonnull MutableInteger other) {
        return Integer.compare(value, other.value);
    }

    @Override
    public int intValue() {
        return value;
    }

    @Override
    public long longValue() {
        return value;
    }

    @Override
    public float floatValue() {
        return value;
    }

    @Override
    public double doubleValue() {
        return value;
    }

}

== Source Code Highlighting with Rouge

:sourcedir: ../../../main/java

[source, java]
----
include::{sourcedir}/MutableInteger.java[]
----

[.columns]
== Kotlin Source Code

[.column]
[source,kotlin]
----
fun main() {
    println("Hello, World!")
}
----

[.column]
--
* Nice and compact
* Works well on Android
--

[.columns]
== Clojure Source Code

[.column]
[source,clojure]
----
(defn -main [& args]
  (println "Hello, World!"))
----

[.column]
--
* Lisp-like
* Few simple concepts
--

== Source Highlighting With Small Fonts

:sourcedir: ../../main/java

[.font-size-64]
[source, java]
----
include::{sourcedir}/MutableInteger.java[]
----

== Source Highlighting with Tiny Fonts

:sourcedir: ../../main/java

[.font-size-16]
[source, java]
----
include::{sourcedir}/MutableInteger.java[]
----

/**
 * A mutable int wrapper. (1)
 */
public class MutableInteger (2)
	extends Number (3)
	implements Comparable<MutableInteger>, Mutable<Integer> {

}

== Source Highlighting with References

[source, java]
----
/**
 * A mutable int wrapper. <.>
 */
public class MutableInteger // <.>
	extends Number // <.>
	implements Comparable<MutableInteger>, Mutable<Integer> {

}
----

<.> Javadoc comment
<.> Class declaration
<.> Superclass

== Default table with header

[cols=2*,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Frame None

WARNING: Not working in Asciidoctor reveal.js

[cols=2*,frame=none,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Frame Sides

WARNING: Not working in Asciidoctor reveal.js

[cols=2*,frame=sides,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Frame Topbot

WARNING: Not working in Asciidoctor reveal.js

[cols=2*,frame=topbot,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Grid None

[cols=2*,grid=none,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Grid Cols

[cols=2*,grid=cols,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Grid Rows

[cols=2*,grid=rows,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Combining Grids and Frames

.Grid none, frame none
[cols=2*,grid=none,frame=none,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===

== Table Alignments

[cols="^,<,>", options="header"]
|===

| Name
| Description
| Version

| Asciidoctor
| Awesome way to write documentation
| 2.0.4
|===

== Table Columns Width

[cols="^1, <4, >1", options="header"]
|===

| Name
| Description
| Version

| Asciidoctor
| Awesome way to write documentation
| 2.0.4

|===

@import 'https://fonts.googleapis.com/css?family=Baloo+Bhai';

section[data-state="topic"] h2 {
    font-family: 'Baloo Bhai', cursive;
    font-size: 4em;
}

[state=topic]
== Slide State

That state can be queried from JavaScript or used in CSS to apply further customization to your slide deck.

For example, by combining this feature with the CSS override one, you can alter fonts for specific pages with this CSS:

[source,css]
....
@import 'https://fonts.googleapis.com/css?family=Baloo+Bhai';

section[data-state="topic"] h2 {
    font-family: 'Baloo Bhai', cursive;
    font-size: 4em;
}
....

[transition=zoom]
== Transition Zoom

* This slide will override the presentation transition and zoom!

[transition-speed=slow]
== Transition Speed

* Choose from three transition speeds: default, fast or *slow*!

== PlantUML — Sequence Diagram

[plantuml, format=svg, align=center]
....
Register -> Sale : makeLineItem(quantity)

create SalesLineItem
Sale ->> SalesLineItem : create(quantity)
Sale ->> SalesLineItem : asynchronous message
....

== PlantUML - Class Diagram

[plantuml, target=cd-todo, svg, align=center]
....
title: My Class Diagram

interface MyInterface << interface >>

class "Sales Line Item" as SalesLineItem{
    + title : String
    version : Integer [1]
    {static} max : Integer
    {abstract} abstractMethod()
}
note right: This is a small note in the right

class Conceptual << Conceptual Class >> {

}

class AsynchronousClass {
    -- receptions --
    AsynchronousEvent
}
....

== PlantUML - Component Diagram

[plantuml, example-component, png, align=center]
....
Interface - [Component]
....

== PlantUML - Activity Diagram

[plantuml,format=svg, align=center]
....
title Servlet Container

(*) --> "ClickServlet.handleRequest()"
--> "new Page"

if "Page.onSecurityCheck" then
  ->[true] "Page.onInit()"

  if "isForward?" then
   ->[no] "Process controls"

   if "continue processing?" then
     -->[yes] ===RENDERING===
   else
     -->[no] ===REDIRECT_CHECK===
   endif

  else
   -->[yes] ===RENDERING===
  endif

  if "is Post?" then
    -->[yes] "Page.onPost()"
    --> "Page.onRender()" as render
    --> ===REDIRECT_CHECK===
  else
    -->[no] "Page.onGet()"
    --> render
  endif

else
  -->[false] ===REDIRECT_CHECK===
endif

if "Do redirect?" then
 ->[yes] "redirect request"
 --> ==BEFORE_DESTROY===
else
 if "Do Forward?" then
  -left->[yes] "Forward request"
  --> ==BEFORE_DESTROY===
 else
  -right->[no] "Render page template"
  --> ==BEFORE_DESTROY===
 endif
endif

--> "Page.onDestroy()"
-->(*)
....

== GraphViz Digraph

[graphviz,,svg,height=800]
....
digraph "unix" {
	graph [	fontname = "Helvetica-Oblique",
		fontsize = 36,
		label = "\n\n\n\nObject Oriented Graphs\nStephen North, 3/19/93",
		size = "6,6" ];
	node [	shape = polygon,
		sides = 4,
		distortion = "0.0",
		orientation = "0.0",
		skew = "0.0",
		color = white,
		style = filled,
		fontname = "Helvetica-Outline" ];
	"5th Edition" [sides=9, distortion="0.936354", orientation=28, skew="-0.126818", color=salmon2];
	"6th Edition" [sides=5, distortion="0.238792", orientation=11, skew="0.995935", color=deepskyblue];
	"PWB 1.0" [sides=8, distortion="0.019636", orientation=79, skew="-0.440424", color=goldenrod2];
	LSX [sides=9, distortion="-0.698271", orientation=22, skew="-0.195492", color=burlywood2];
	"1 BSD" [sides=7, distortion="0.265084", orientation=26, skew="0.403659", color=gold1];
	"Mini Unix" [distortion="0.039386", orientation=2, skew="-0.461120", color=greenyellow];
	Wollongong [sides=5, distortion="0.228564", orientation=63, skew="-0.062846", color=darkseagreen];
	Interdata [distortion="0.624013", orientation=56, skew="0.101396", color=dodgerblue1];
	"Unix/TS 3.0" [sides=8, distortion="0.731383", orientation=43, skew="-0.824612", color=thistle2];
	"PWB 2.0" [sides=6, distortion="0.592100", orientation=34, skew="-0.719269", color=darkolivegreen3];
	"7th Edition" [sides=10, distortion="0.298417", orientation=65, skew="0.310367", color=chocolate];
	"8th Edition" [distortion="-0.997093", orientation=50, skew="-0.061117", color=turquoise3];
	"32V" [sides=7, distortion="0.878516", orientation=19, skew="0.592905", color=steelblue3];
	V7M [sides=10, distortion="-0.960249", orientation=32, skew="0.460424", color=navy];
	"Ultrix-11" [sides=10, distortion="-0.633186", orientation=10, skew="0.333125", color=darkseagreen4];
	Xenix [sides=8, distortion="-0.337997", orientation=52, skew="-0.760726", color=coral];
	"UniPlus+" [sides=7, distortion="0.788483", orientation=39, skew="-0.526284", color=darkolivegreen3];
	"9th Edition" [sides=7, distortion="0.138690", orientation=55, skew="0.554049", color=coral3];
	"2 BSD" [sides=7, distortion="-0.010661", orientation=84, skew="0.179249", color=blanchedalmond];
	"2.8 BSD" [distortion="-0.239422", orientation=44, skew="0.053841", color=lightskyblue1];
	"2.9 BSD" [distortion="-0.843381", orientation=70, skew="-0.601395", color=aquamarine2];
	"3 BSD" [sides=10, distortion="0.251820", orientation=18, skew="-0.530618", color=lemonchiffon];
	"4 BSD" [sides=5, distortion="-0.772300", orientation=24, skew="-0.028475", color=darkorange1];
	"4.1 BSD" [distortion="-0.226170", orientation=38, skew="0.504053", color=lightyellow1];
	"4.2 BSD" [sides=10, distortion="-0.807349", orientation=50, skew="-0.908842", color=darkorchid4];
	"4.3 BSD" [sides=10, distortion="-0.030619", orientation=76, skew="0.985021", color=lemonchiffon2];
	"Ultrix-32" [distortion="-0.644209", orientation=21, skew="0.307836", color=goldenrod3];
	"PWB 1.2" [sides=7, distortion="0.640971", orientation=84, skew="-0.768455", color=cyan];
	"USG 1.0" [distortion="0.758942", orientation=42, skew="0.039886", color=blue];
	"CB Unix 1" [sides=9, distortion="-0.348692", orientation=42, skew="0.767058", color=firebrick];
	"USG 2.0" [distortion="0.748625", orientation=74, skew="-0.647656", color=chartreuse4];
	"CB Unix 2" [sides=10, distortion="0.851818", orientation=32, skew="-0.020120", color=greenyellow];
	"CB Unix 3" [sides=10, distortion="0.992237", orientation=29, skew="0.256102", color=bisque4];
	"Unix/TS++" [sides=6, distortion="0.545461", orientation=16, skew="0.313589", color=mistyrose2];
	"PDP-11 Sys V" [sides=9, distortion="-0.267769", orientation=40, skew="0.271226", color=cadetblue1];
	"USG 3.0" [distortion="-0.848455", orientation=44, skew="0.267152", color=bisque2];
	"Unix/TS 1.0" [distortion="0.305594", orientation=75, skew="0.070516", color=orangered];
	"TS 4.0" [sides=10, distortion="-0.641701", orientation=50, skew="-0.952502", color=crimson];
	"System V.0" [sides=9, distortion="0.021556", orientation=26, skew="-0.729938", color=darkorange1];
	"System V.2" [sides=6, distortion="0.985153", orientation=33, skew="-0.399752", color=darkolivegreen4];
	"System V.3" [sides=7, distortion="-0.687574", orientation=58, skew="-0.180116", color=lightsteelblue1];
	"5th Edition" -> "6th Edition";
	"5th Edition" -> "PWB 1.0";
	"6th Edition" -> LSX;
	"6th Edition" -> "1 BSD";
	"6th Edition" -> "Mini Unix";
	"6th Edition" -> Wollongong;
	"6th Edition" -> Interdata;
	Interdata -> "Unix/TS 3.0";
	Interdata -> "PWB 2.0";
	Interdata -> "7th Edition";
	"7th Edition" -> "8th Edition";
	"7th Edition" -> "32V";
	"7th Edition" -> V7M;
	"7th Edition" -> "Ultrix-11";
	"7th Edition" -> Xenix;
	"7th Edition" -> "UniPlus+";
	V7M -> "Ultrix-11";
	"8th Edition" -> "9th Edition";
	"1 BSD" -> "2 BSD";
	"2 BSD" -> "2.8 BSD";
	"2.8 BSD" -> "Ultrix-11";
	"2.8 BSD" -> "2.9 BSD";
	"32V" -> "3 BSD";
	"3 BSD" -> "4 BSD";
	"4 BSD" -> "4.1 BSD";
	"4.1 BSD" -> "4.2 BSD";
	"4.1 BSD" -> "2.8 BSD";
	"4.1 BSD" -> "8th Edition";
	"4.2 BSD" -> "4.3 BSD";
	"4.2 BSD" -> "Ultrix-32";
	"PWB 1.0" -> "PWB 1.2";
	"PWB 1.0" -> "USG 1.0";
	"PWB 1.2" -> "PWB 2.0";
	"USG 1.0" -> "CB Unix 1";
	"USG 1.0" -> "USG 2.0";
	"CB Unix 1" -> "CB Unix 2";
	"CB Unix 2" -> "CB Unix 3";
	"CB Unix 3" -> "Unix/TS++";
	"CB Unix 3" -> "PDP-11 Sys V";
	"USG 2.0" -> "USG 3.0";
	"USG 3.0" -> "Unix/TS 3.0";
	"PWB 2.0" -> "Unix/TS 3.0";
	"Unix/TS 1.0" -> "Unix/TS 3.0";
	"Unix/TS 3.0" -> "TS 4.0";
	"Unix/TS++" -> "TS 4.0";
	"CB Unix 3" -> "TS 4.0";
	"TS 4.0" -> "System V.0";
	"System V.0" -> "System V.2";
	"System V.2" -> "System V.3";
}
....

== GraphViz - Concurrent

[graphviz,,svg,height=800]
....
digraph "Sequential" {
  "A1" [style = filled, color=aquamarine];
  "A2" [style = filled, color=aquamarine];
  "A3" [style = filled, color=aquamarine];
  "B1" [style = filled, color=yellow];
  "B2" [style = filled, color=yellow];
  "B3" [style = filled, color=yellow];
  Operation [shape = box]

  "A1" -> "B1"
  "B1" -> "A2"
  "A2" -> "B2"
  "B2" -> "A3"
  "A3" -> "B3"
  "B3" -> Operation
}
....

== Hardcoded

image::asciidoctor-icon.png[width="1200"]

== Image Floating

image::asciidoctor-icon.png[width=400px,float=right]

* Some
* Points
* You
* Won't
* Look At

== Image Role Right

image::asciidoctor-icon.png[role=right,width=400px]

* Some
* Points
* You
* Won't
* Look At

== Image Role Right [alt syntax]

[.right]
image::asciidoctor-icon.png[alt text,width=400px]

* Yup
* That
* Too

== Image Role Bottom [alt syntax]

[.bottom]
image::asciidoctor-icon.png[alt text,width=400px]

* Yup
* That
* Too

[.columns]
== Two Columns

[.column]
--
* **Edgar Allen Poe**
* Sheri S. Tepper
* Bill Bryson
--

[.column]
--
Edgar Allan Poe (/poʊ/; born Edgar Poe; January 19, 1809 – October 7, 1849) was an American writer, editor, and literary critic.
--

[.columns]
== Columns with Different Sizes

[.column.is-one-third]
--
* **Kotlin**
* Java
* Scala
--

[.column]
--
Programming language for Android, mobile cross-platform
and web development, server-side, native,
and data science. Open source forever Github.
--

[.columns]
== Three Columns

[.column]
* Java
* **Kotlin**

[.column]
* Node
* **Deno**

[.column]
* Ruby
* **Crystal**

[.columns.is-vcentered]
== Vertically Centered Columns

[.column]
* Java
* **Kotlin**

[.column]
* Node
* **Deno**

[.columns]
== Column Text Alignment

[.column.has-text-left]
--
Something Short

Something So Long That We Need It Aligned
--

[.column.has-text-justified]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[.column.has-text-right]
--
Something Short

Something So Long That We Need It Aligned
--

[.columns.wrap]
== Multi-columns with wrap

[.column]
--
.Kotlin
[source,kotlin]
----
fun main() {
    println("Hello, World!")
}
----
--

[.column]
--
.Clojure
[source,clojure]
----
(defn -main [& args]
  (println "Hello, World!"))
----
--

[.column]
--
.Scala
[source,scala]
----
object HelloWorld {
  def main(args: Array[String]): Unit = {
    println("Hello, world!")
  }
}
----
--

== Keyboard Macros

|===
|Shortcut |Purpose

|kbd:[F11]
|Toggle fullscreen

|kbd:[Ctrl+T]
|Open a new tab

|kbd:[Ctrl+Shift+N]
|New incognito window

|kbd:[\ ]
|Used to escape characters

|kbd:[Ctrl+\]]
|Jump to keyword

|kbd:[Ctrl + +]
|Increase zoom
|===

== Button Macros

* Press the btn:[OK] button when you are finished.
* Select a file in the file navigator and click btn:[Open].

== Menu Macro

* To save the file, select menu:File[Save].
* Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.
* Select "⋮ > More Tools > Extensions" to find and enable extensions.

== Pie chart

[.title]
What do you believe is the number one thing a company can do to improve code quality ?

[chart,pie,order=null,legend=right, align=center]
....
Code Review,27
Unit Testing,19
Functional Testing,13
Continuous Integration,12
Integration Testing,9
Detailed Requirements,7
Static Analysis,3
Training/On-boarding,3
User Stories,2
Other,5
....

== Bar chart

[chart,bar]
....
data1, 30, 200, 100, 400, 150, 250
data2, 130, 100, 140, 200, 150, 50
data3, 130, -150, 200, 300, -200, 100
....

== Horizontal Bar Chart

[.title]
What are the main benefits of code review in 2018 ?

[chart,bar,horizontal=true,x-type=category,data-labels=true,y-label="% answered"]
....
x, Improved software quality, Sharing knowledge across the team, Adherence to coding standards/conventions, Ability to mentor less experienced developers, Increased collaboration, Reduced project time/costs, Ability to comply with regulatory standards, Internal audits, Ability to set expectations, Enhanced customer satisfaction/retention, Enhanced mobility of code, Strengthen competitive advantage, ISO/Industry certifications
Interviewed developers using it,90,73,59,57,52,37,31,28,28,26,26,20,16
....

== Line Chart

[chart,line]
....
January,February,March,April,May,June,July
28,48,40,19,86,27,90
65,59,80,81,56,55,40
....