Small update to animation documentation (#7384)

Update animation documentation to include samples

diff --git a/docs/docs/configuration/animations.md b/docs/docs/configuration/animations.md
deleted file mode 100644 (file)
index 3aad073..0000000
--- a/docs/docs/configuration/animations.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: Animations
----
-
-Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
-
-## Animation Configuration
-
-The following animation options are available. The global options for are defined in `Chart.defaults.animation`.
-
-| Name | Type | Default | Description
-| ---- | ---- | ------- | -----------
-| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
-| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
-| `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
-| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
-| `onComplete` | `function` | `null` | Callback called when all animations are completed. [more...](#animation-callbacks)
-| `delay` | `number` | `undefined` | Delay before starting the animations.
-| `loop` | `boolean` | `undefined` | If set to `true`, loop the animations loop endlessly.
-| `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, '`color`'.
-| `from`  | <code>number&#124;Color</code> | `undefined` | Start value for the animation. Current value is used when `undefined`
-| `active` | `object` | `{ duration: 400 }` | Option overrides for `active` animations (hover)
-| `resize` | `object` | `{ duration: 0 }` | Option overrides for `resize` animations.
-| [property] | `object` | `undefined` | Option overrides for [property].
-| [collection] | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array.
-| [mode] | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode)
-
-### Default collections
-
-| Name | Option | Value
-| ---- | ------ | -----
-| `numbers` | `type` | `'number'`
-| | `properties` | `['x', 'y', 'borderWidth', 'radius', 'tension']`
-| `colors` | `type` | `'color'`
-| | `properties` | `['borderColor', 'backgroundColor']`
-
-Direct property configuration overrides configuration of same property in a collection.
-
-These defaults can be overridden in `options.animation` and `dataset.animation`.
-
-### Default modes
-
-| Mode | Option | Value
-| -----| ------ | -----
-| active | duration | 400
-| resize | duration | 0
-| show | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }`
-| | visible | `{ type: 'boolean', duration: 0 }`
-| hide | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }`
-| | visible | `{ type: 'boolean', easing: 'easeInExpo' }`
-
-## Easing
-
-Available options are:
-
-* `'linear'`
-* `'easeInQuad'`
-* `'easeOutQuad'`
-* `'easeInOutQuad'`
-* `'easeInCubic'`
-* `'easeOutCubic'`
-* `'easeInOutCubic'`
-* `'easeInQuart'`
-* `'easeOutQuart'`
-* `'easeInOutQuart'`
-* `'easeInQuint'`
-* `'easeOutQuint'`
-* `'easeInOutQuint'`
-* `'easeInSine'`
-* `'easeOutSine'`
-* `'easeInOutSine'`
-* `'easeInExpo'`
-* `'easeOutExpo'`
-* `'easeInOutExpo'`
-* `'easeInCirc'`
-* `'easeOutCirc'`
-* `'easeInOutCirc'`
-* `'easeInElastic'`
-* `'easeOutElastic'`
-* `'easeInOutElastic'`
-* `'easeInBack'`
-* `'easeOutBack'`
-* `'easeInOutBack'`
-* `'easeInBounce'`
-* `'easeOutBounce'`
-* `'easeInOutBounce'`
-
-See [Robert Penner's easing equations](http://robertpenner.com/easing/).
-
-## Animation Callbacks
-
-The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed following object:
-
-```javascript
-{
-    // Chart object
-    chart: Chart,
-
-    // Number of animations still in progress
-    currentStep: number,
-
-    // Total number of animations at the start of current animation
-    numSteps: number,
-}
-```
-
-The following example fills a progress bar during the chart animation.
-
-```javascript
-var chart = new Chart(ctx, {
-    type: 'line',
-    data: data,
-    options: {
-        animation: {
-            onProgress: function(animation) {
-                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
-            }
-        }
-    }
-});
-```
-
-Another example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/advanced/progress-bar.html): this sample displays a progress bar showing how far along the animation is.

diff --git a/docs/docs/configuration/animations.mdx b/docs/docs/configuration/animations.mdx
new file mode 100644 (file)
index 0000000..da7881e
--- /dev/null
+++ b/docs/docs/configuration/animations.mdx
@@ -0,0 +1,229 @@
+---
+title: Animations
+---
+
+Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
+
+import { useEffect } from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs
+    defaultValue='tension'
+    values={[
+        {label: 'Looping tension [property]', value: 'tension' },
+        {label: 'Hide and show [mode]', value: 'hideshow' },
+    ]}
+>
+<TabItem value="tension">
+
+```jsx live
+function example() {
+  useEffect(() => {
+    const ctx = document.getElementById('chartjs-a0').getContext('2d');
+    const cfg = {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label: 'Looping tension',
+          data: [65, 59, 80, 81, 26, 55, 40],
+          fill: false,
+          borderColor: 'rgb(75, 192, 192)',
+        }]
+      },
+      options: {
+          animation: {
+              tension: {
+                  duration: 1000,
+                  easing: 'linear',
+                  from: 1,
+                  to: 0,
+                  loop: true
+              }
+          },
+          scales: {
+            y: { // defining min and max so hiding the dataset does not change scale range
+              min: 0,
+              max: 100
+            }
+          }
+      }
+    };
+    new Chart(ctx, cfg);
+  });
+  return <div className="chartjs-wrapper"><canvas id="chartjs-a0" className="chartjs"></canvas></div>;
+}
+```
+
+</TabItem>
+
+<TabItem value="hideshow">
+
+```jsx live
+function example() {
+  useEffect(() => {
+    const ctx = document.getElementById('chartjs-a1').getContext('2d');
+    const cfg = {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label: 'Try hiding me',
+          data: [65, 59, 80, 81, 26, 55, 40],
+          fill: false,
+          borderColor: 'rgb(75, 192, 192)',
+        }]
+      },
+      options: {
+          animation: {
+            show: {
+                x: {
+                    from: 0
+                },
+                y: {
+                    from: 0
+                }
+            },
+            hide: {
+                x: {
+                    to: 0
+                },
+                y: {
+                    to: 0
+                }
+            }
+          }
+      }
+    };
+    new Chart(ctx, cfg);
+  });
+  return <div className="chartjs-wrapper"><canvas id="chartjs-a1" className="chartjs"></canvas></div>;
+}
+```
+
+</TabItem>
+</Tabs>
+
+## Animation Configuration
+
+The following animation options are available. The global options are defined in `Chart.defaults.animation`.
+The default configuration is defined here: <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.animations.js#L6-L55" target="_blank">core.animations.js</a>
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
+| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
+| `debug` | `boolean` | `undefined` | Running animation count + FPS display in upper left corner of the chart.
+| `onProgress` | `function` | `null` | Callback called on each step of an animation. [more...](#animation-callbacks)
+| `onComplete` | `function` | `null` | Callback called when all animations are completed. [more...](#animation-callbacks)
+| `delay` | `number` | `undefined` | Delay before starting the animations.
+| `loop` | `boolean` | `undefined` | If set to `true`, the animations loop endlessly.
+| `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, `'color'` and `'boolean'`. Only really needed for `'color'`, because `typeof` does not get that right.
+| `from`  | <code>`number`&#124;`Color`&#124;`boolean`</code> | `undefined` | Start value for the animation. Current value is used when `undefined`
+| `active` | `object` | `{ duration: 400 }` | Option overrides for `active` animations (hover)
+| `resize` | `object` | `{ duration: 0 }` | Option overrides for `resize` animations.
+| [property] | `object` | `undefined` | Option overrides for a single element `[property]`. These have precedence over `[collection]`. See **Looping tension [property]** example above.
+| [collection] | `object` | [defaults...](#default-collections) | Option overrides for multiple properties, identified by `properties` array. Collection can be named whatever you like, but should not collide with a `[property]` or `[mode]`.
+| [mode] | `object` | [defaults...](#default-modes) | Option overrides for update mode. Core modes: `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`. See **Hide and show [mode]** example above. A custom mode can be used by passing a custom `mode` to [update](../developers/api.md#updatemode)
+
+### Default collections
+
+| Name | Option | Value
+| ---- | ------ | -----
+| `numbers` | `type` | `'number'`
+| | `properties` | `['x', 'y', 'borderWidth', 'radius', 'tension']`
+| `colors` | `type` | `'color'`
+| | `properties` | `['borderColor', 'backgroundColor']`
+
+Direct property configuration overrides configuration of same property in a collection.
+
+These defaults can be overridden in `options.animation` or `dataset.animation` and `tooltip.animation`. These keys are also [Scriptable](../general/options.md#scriptable-options)
+
+:::note
+These default collections are overridden by most dataset controllers.
+:::
+
+### Default modes
+
+| Mode | Option | Value | Description
+| -----| ------ | ----- | -----
+| `'active'` | duration | 400 | Override default duration to 400ms for hover animations
+| `'resize'` | duration | 0 | Override default duration to 0ms (= no animation) for resize
+| `'show'` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }` | Colors are faded in from transparent when dataset is shown using legend / [api](../developers/api.md#showdatasetIndex).
+| | visible | `{ type: 'boolean', duration: 0 }` | Dataset visiblity is immediately changed to true so the color transition from transparent is visible.
+| `'hide'` | colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }` | Colors are faded to transparent when dataset id hidden using legend / [api](../developers/api.md#hidedatasetIndex).
+| | visible | `{ type: 'boolean', easing: 'easeInExpo' }` | Visibility is changed to false very at late phase of animation
+
+## Easing
+
+Available options are:
+
+* `'linear'`
+* `'easeInQuad'`
+* `'easeOutQuad'`
+* `'easeInOutQuad'`
+* `'easeInCubic'`
+* `'easeOutCubic'`
+* `'easeInOutCubic'`
+* `'easeInQuart'`
+* `'easeOutQuart'`
+* `'easeInOutQuart'`
+* `'easeInQuint'`
+* `'easeOutQuint'`
+* `'easeInOutQuint'`
+* `'easeInSine'`
+* `'easeOutSine'`
+* `'easeInOutSine'`
+* `'easeInExpo'`
+* `'easeOutExpo'`
+* `'easeInOutExpo'`
+* `'easeInCirc'`
+* `'easeOutCirc'`
+* `'easeInOutCirc'`
+* `'easeInElastic'`
+* `'easeOutElastic'`
+* `'easeInOutElastic'`
+* `'easeInBack'`
+* `'easeOutBack'`
+* `'easeInOutBack'`
+* `'easeInBounce'`
+* `'easeOutBounce'`
+* `'easeInOutBounce'`
+
+See [Robert Penner's easing equations](http://robertpenner.com/easing/).
+
+## Animation Callbacks
+
+The `onProgress` and `onComplete` callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed following object:
+
+```javascript
+{
+    // Chart object
+    chart: Chart,
+
+    // Number of animations still in progress
+    currentStep: number,
+
+    // Total number of animations at the start of current animation
+    numSteps: number,
+}
+```
+
+The following example fills a progress bar during the chart animation.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        animation: {
+            onProgress: function(animation) {
+                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
+            }
+        }
+    }
+});
+```
+
+Another example usage of these callbacks can be found on [Github](https://github.com/chartjs/Chart.js/blob/master/samples/advanced/progress-bar.html): this sample displays a progress bar showing how far along the animation is.

diff --git a/docs/docs/general/options.md b/docs/docs/general/options.md
index bd9c277daf6411c6cf527d7905eed863af2579f8..952da9b222df9fb7563e24d6cf25cc11d36b874a 100644 (file)
--- a/docs/docs/general/options.md
+++ b/docs/docs/general/options.md
@@ -18,7 +18,6 @@ color: function(context) {
 }
 ```
 
-
 ## Indexable Options
 
 Indexable options also accept an array in which each item corresponds to the element at the same index. Note that this method requires to provide as many items as data, so, in most cases, using a [function](#scriptable-options) is more appropriated if supported.
@@ -45,6 +44,6 @@ The context object contains the following properties:
 - `dataIndex`: index of the current data
 - `dataset`: dataset at index `datasetIndex`
 - `datasetIndex`: index of the current dataset
-- `hover`: true if hovered
+- `active`: true if element is active (hovered)
 
 **Important**: since the context can represent different types of entities (dataset, data, etc.), some properties may be `undefined` so be sure to test any context property before using it.

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 4831d4e17d93dec3565f69eec6b55aa18d171710..76620e2c1616f064b45b585b44691e2a6e2ce629 100644 (file)
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -9,6 +9,7 @@ module.exports = {
   projectName: 'chartjs.github.io', // Usually your repo name.
   plugins: ['@docusaurus/plugin-google-analytics'],
   scripts: ['https://www.chartjs.org/dist/VERSION/Chart.min.js'],
+  themes: ['@docusaurus/theme-live-codeblock'],
   themeConfig: {
     algolia: {
       apiKey: 'd7ee00a3cbaaf3c33e28ad1c274e7ba6',

diff --git a/docs/package-lock.json b/docs/package-lock.json
index 840f41e496d0f88bc7dc13274289c0278be13b29..ab4e79506682f5b6599dfbbe244a774754b05fe8 100644 (file)
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1306,6 +1306,19 @@
         "react-toggle": "^4.1.1"
       }
     },
+    "@docusaurus/theme-live-codeblock": {
+      "version": "2.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-live-codeblock/-/theme-live-codeblock-2.0.0-alpha.39.tgz",
+      "integrity": "sha512-Z0Eru2QhAuZOSuHuygzjCv2pryIIxI7XC568KG5rtFn11ichtDaLwJkmo14KDPdlcpeF3g4ObTkCaHxOVhaeUA==",
+      "requires": {
+        "@philpl/buble": "^0.19.7",
+        "classnames": "^2.2.6",
+        "clipboard": "^2.0.4",
+        "parse-numeric-range": "^0.0.2",
+        "prism-react-renderer": "^1.0.2",
+        "react-live": "^2.2.1"
+      }
+    },
     "@docusaurus/theme-search-algolia": {
       "version": "2.0.0-alpha.55",
       "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-2.0.0-alpha.55.tgz",
@@ -1491,6 +1504,34 @@
         "fastq": "^1.6.0"
       }
     },
+    "@philpl/buble": {
+      "version": "0.19.7",
+      "resolved": "https://registry.npmjs.org/@philpl/buble/-/buble-0.19.7.tgz",
+      "integrity": "sha512-wKTA2DxAGEW+QffRQvOhRQ0VBiYU2h2p8Yc1oBNlqSKws48/8faxqKNIuub0q4iuyTuLwtB8EkwiKwhlfV1PBA==",
+      "requires": {
+        "acorn": "^6.1.1",
+        "acorn-class-fields": "^0.2.1",
+        "acorn-dynamic-import": "^4.0.0",
+        "acorn-jsx": "^5.0.1",
+        "chalk": "^2.4.2",
+        "magic-string": "^0.25.2",
+        "minimist": "^1.2.0",
+        "os-homedir": "^1.0.1",
+        "regexpu-core": "^4.5.4"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        }
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
@@ -1903,6 +1944,21 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
       "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
     },
+    "acorn-class-fields": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/acorn-class-fields/-/acorn-class-fields-0.2.1.tgz",
+      "integrity": "sha512-US/kqTe0H8M4LN9izoL+eykVAitE68YMuYZ3sHn3i1fjniqR7oQ3SPvuMK/VT1kjOQHrx5Q88b90TtOKgAv2hQ=="
+    },
+    "acorn-dynamic-import": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
+      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw=="
+    },
+    "acorn-jsx": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ=="
+    },
     "acorn-walk": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.1.1.tgz",
@@ -2116,6 +2172,11 @@
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -3248,6 +3309,16 @@
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
     },
+    "component-props": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz",
+      "integrity": "sha1-+bffm5kntubZfJvScqqGdnDzSUQ="
+    },
+    "component-xor": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/component-xor/-/component-xor-0.0.4.tgz",
+      "integrity": "sha1-xV2DzMG5TNUImk6T+niRxyY+Wao="
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -3577,6 +3648,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
@@ -4167,6 +4247,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-iterator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz",
+      "integrity": "sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==",
+      "requires": {
+        "component-props": "1.1.1",
+        "component-xor": "0.0.4"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -4330,6 +4419,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -4797,6 +4894,27 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
     "feed": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/feed/-/feed-4.1.0.tgz",
@@ -5416,6 +5534,11 @@
         "strip-bom-string": "^1.0.0"
       }
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -6513,6 +6636,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -6875,6 +7007,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -7383,6 +7523,15 @@
         "lodash.toarray": "^4.4.0"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -7739,6 +7888,11 @@
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -9084,6 +9238,14 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -9664,6 +9826,46 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-live": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-live/-/react-live-2.2.2.tgz",
+      "integrity": "sha512-kJYAzKnPsR4oXleAX9lLsJA330BhTmSWHhr3ienZA2E/0eFDRodGl3I7sge8pp1vjc2K5Aaz73KpFUnV7Lq/DQ==",
+      "requires": {
+        "buble": "0.19.6",
+        "core-js": "^2.4.1",
+        "create-react-context": "0.2.2",
+        "dom-iterator": "^1.0.0",
+        "prism-react-renderer": "^1.0.1",
+        "prop-types": "^15.5.8",
+        "react-simple-code-editor": "^0.10.0",
+        "unescape": "^1.0.1"
+      },
+      "dependencies": {
+        "buble": {
+          "version": "0.19.6",
+          "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.6.tgz",
+          "integrity": "sha512-9kViM6nJA1Q548Jrd06x0geh+BG2ru2+RMDkIHHgJY/8AcyCs34lTHwra9BX7YdPrZXd5aarkpr/SY8bmPgPdg==",
+          "requires": {
+            "chalk": "^2.4.1",
+            "magic-string": "^0.25.1",
+            "minimist": "^1.2.0",
+            "os-homedir": "^1.0.1",
+            "regexpu-core": "^4.2.0",
+            "vlq": "^1.0.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        }
+      }
+    },
     "react-loadable": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-loadable/-/react-loadable-5.5.0.tgz",
@@ -9736,6 +9938,11 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
       "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
     },
+    "react-simple-code-editor": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz",
+      "integrity": "sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA=="
+    },
     "react-toggle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.1.tgz",
@@ -10739,6 +10946,11 @@
       "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+    },
     "space-separated-tokens": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
@@ -11594,6 +11806,19 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.21",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+    },
+    "unescape": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz",
+      "integrity": "sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==",
+      "requires": {
+        "extend-shallow": "^2.0.1"
+      }
+    },
     "unherit": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
@@ -11976,6 +12201,11 @@
         "unist-util-stringify-position": "^2.0.0"
       }
     },
+    "vlq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
+      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -12984,6 +13214,11 @@
       "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg=="
     },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    },
     "whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",

diff --git a/docs/package.json b/docs/package.json
index 6e95bdc6face629aca5725087595c467d869f360..5ef035f8b9aee9ad96cd2e1a1e83b0a49299d9be 100644 (file)
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,6 +12,7 @@
     "@docusaurus/core": "^2.0.0-alpha.55",
     "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.55",
     "@docusaurus/preset-classic": "^2.0.0-alpha.55",
+    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
     "classnames": "^2.2.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"