From: Jukka Kurkela Date: Thu, 21 May 2020 20:43:36 +0000 (+0300) Subject: Small update to animation documentation (#7384) X-Git-Tag: v3.0.0-beta.2~136 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c2b66ba842439cd43d08b3ee5f145ee3a0811510;p=thirdparty%2FChart.js.git 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 index 3aad07314..000000000 --- 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` | number|Color | `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 index 000000000..da7881ee4 --- /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'; + + + + +```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
; +} +``` + + + + + +```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
; +} +``` + + + + +## Animation Configuration + +The following animation options are available. The global options are defined in `Chart.defaults.animation`. +The default configuration is defined here: core.animations.js + +| 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` | `number`|`Color`|`boolean` | `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 bd9c277da..952da9b22 100644 --- 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 4831d4e17..76620e2c1 100644 --- 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 840f41e49..ab4e79506 100644 --- 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 6e95bdc6f..5ef035f8b 100644 --- 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"