From 3ed54e7349bf76c154545de788c4d563cf2e1d1d Mon Sep 17 00:00:00 2001 From: David Vegh Date: Tue, 29 Oct 2024 17:38:55 +0100 Subject: [PATCH 01/49] Auto test the tutorial, refactor MdChart --- docs/assets/javascripts/mdchart.js | 49 +++++++++++- docs/tutorial/axes_title_tooltip.js | 81 ------------------- docs/tutorial/axes_title_tooltip.md | 95 ++++++++--------------- docs/tutorial/axes_title_tooltip/01_a.js | 12 +++ docs/tutorial/axes_title_tooltip/01_b.js | 20 +++++ docs/tutorial/axes_title_tooltip/02.js | 12 +++ docs/tutorial/axes_title_tooltip/03.js | 12 +++ docs/tutorial/axes_title_tooltip/04_a.js | 1 + docs/tutorial/axes_title_tooltip/04_b.js | 3 + docs/tutorial/axes_title_tooltip/05.js | 4 + docs/tutorial/axes_title_tooltip/06.js | 1 + docs/tutorial/axes_title_tooltip/index.js | 16 ++++ 12 files changed, 160 insertions(+), 146 deletions(-) delete mode 100644 docs/tutorial/axes_title_tooltip.js create mode 100644 docs/tutorial/axes_title_tooltip/01_a.js create mode 100644 docs/tutorial/axes_title_tooltip/01_b.js create mode 100644 docs/tutorial/axes_title_tooltip/02.js create mode 100644 docs/tutorial/axes_title_tooltip/03.js create mode 100644 docs/tutorial/axes_title_tooltip/04_a.js create mode 100644 docs/tutorial/axes_title_tooltip/04_b.js create mode 100644 docs/tutorial/axes_title_tooltip/05.js create mode 100644 docs/tutorial/axes_title_tooltip/06.js create mode 100644 docs/tutorial/axes_title_tooltip/index.js diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index 2be79532b..7dadb8e22 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -6,11 +6,12 @@ class MdChart { this.id = id } - create(snippets) { + async create(snippets) { + const animations = (await MdChart.loadAnimations(snippets)).map((anims) => ({ anims })) let chart = Promise.resolve() - for (let i = 0; i < snippets.length; i++) { + for (let i = 0; i < animations.length; i++) { const number = i + 1 - chart = this.animate(('0' + number).slice(-2), snippets[i], chart) + chart = this.animate(('0' + number).slice(-2), animations[i], chart) } } @@ -91,6 +92,48 @@ class MdChart { return chart } + + static async loadAnimation(url, returnOriginal = false) { + try { + const response = await fetch(url) + if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`) + const code = await response.text() + return new Function( // eslint-disable-line no-new-func + 'chart', + returnOriginal ? `${code}; return chart;` : `return ${code}` + ) + } catch (error) { + console.error('Error during animation load or execution:', error) + } + } + + static async loadAnimations(animations) { + const steps = [] + for (const animation of animations) { + if (typeof animation === 'string') { + const func = await MdChart.loadAnimation(`./${animation}.js`) + steps.push([(chart) => func(chart)]) + } else if (Array.isArray(animation)) { + const animSteps = [] + for (const subAnimation of animation) { + if (typeof subAnimation === 'string') { + const func = await MdChart.loadAnimation(`./${subAnimation}.js`) + animSteps.push((chart) => func(chart)) + } else if (typeof subAnimation === 'object' && subAnimation.name) { + const { name, returnOriginal } = subAnimation + const func = await MdChart.loadAnimation(`./${name}.js`, returnOriginal) + animSteps.push((chart) => func(chart)) + } + } + steps.push(animSteps) + } else if (typeof animation === 'object' && animation.name) { + const { name, returnOriginal } = animation + const func = await MdChart.loadAnimation(`./${name}.js`, returnOriginal) + steps.push([(chart) => func(chart)]) + } + } + return steps + } } export default MdChart diff --git a/docs/tutorial/axes_title_tooltip.js b/docs/tutorial/axes_title_tooltip.js deleted file mode 100644 index 6cc906870..000000000 --- a/docs/tutorial/axes_title_tooltip.js +++ /dev/null @@ -1,81 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - channels: { - x: { set: null }, - y: { set: ['Genres', 'Popularity'] } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - channels: { - y: { detach: 'Popularity' }, - x: { attach: 'Popularity' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - console.log(chart.config) // eslint-disable-line no-console - return chart - }, - (chart) => { - return chart.animate({ title: 'My first chart' }) - } - ] - }, - { - anims: [ - (chart) => - chart.animate({ - subtitle: 'with fancy animations', - caption: 'Source: Vizzu tutorial' - }) - ] - }, - { - anims: [ - (chart) => { - chart.feature('tooltip', true) - return chart - } - ] - } - ]) -}) diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 2ed0a209e..66babfd56 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -18,18 +18,10 @@ the measure (`Popularity`) to the y-axis using the set property. {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['Popularity'] - }, - x: { - set: ['Genres'] - } - } - } -}) +{ + % + include "tutorial/axes_title_tooltip/01_a.js" % +} ``` We will reference the data series by names for clarity throughout the tutorial. @@ -39,22 +31,10 @@ see the [Aggregating data](./aggregating_data.md) chapter. The previous example can be rewritten using data series descriptor objects as follows: ```javascript -chart.animate({ - config: { - channels: { - y: { - set: [{ - name: 'Popularity' - }] - }, - x: { - set: [{ - name: 'Genres' - }] - } - } - } -}) +{ + % + include "tutorial/axes_title_tooltip/01_b.js" % +} ``` In the next step, the chart is rearranged by putting both series on the y-axis @@ -64,18 +44,10 @@ automatically animates between the initial state and this one.
```javascript -chart.animate({ - config: { - channels: { - x: { - set: null - }, - y: { - set: ['Genres', 'Popularity'] - } - } - } -}) +{ + % + include "tutorial/axes_title_tooltip/02.js" % +} ``` Instead of set, you can use attach and detach to add or remove series to/from @@ -84,18 +56,10 @@ the channels.
```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Popularity'] - }, - x: { - attach: ['Popularity'] - } - } - } -}) +{ + % + include "tutorial/axes_title_tooltip/03.js" % +} ``` Using attach & detach makes it easier to build your animated charts @@ -104,7 +68,10 @@ channel in the previous step or add the following code to access the actual configuration of the chart. ```javascript -console.log(chart.config); +{ + % + include "tutorial/axes_title_tooltip/04_a.js" % +} ``` Setting the chart title with the title property. @@ -112,9 +79,10 @@ Setting the chart title with the title property.
```javascript -chart.animate({ - title: 'My first chart' -}) +{ + % + include "tutorial/axes_title_tooltip/04_b.js" % +} ``` Subtitle and caption textual element options are available for your charts. @@ -122,10 +90,10 @@ Subtitle and caption textual element options are available for your charts.
```javascript -chart.animate({ - subtitle: 'with fancy animations', - caption: 'Source: Vizzu tutorial' -}) +{ + % + include "tutorial/axes_title_tooltip/05.js" % +} ``` Switching on the tooltips that appear on the chart elements when the user hovers @@ -135,10 +103,13 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the
```javascript -chart.feature('tooltip', true) +{ + % + include "tutorial/axes_title_tooltip/06.js" % +} ``` !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/axes_title_tooltip/01_a.js b/docs/tutorial/axes_title_tooltip/01_a.js new file mode 100644 index 000000000..be214a603 --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/01_a.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + set: ['Popularity'] + }, + x: { + set: ['Genres'] + } + } + } +}) diff --git a/docs/tutorial/axes_title_tooltip/01_b.js b/docs/tutorial/axes_title_tooltip/01_b.js new file mode 100644 index 000000000..17671ca0b --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/01_b.js @@ -0,0 +1,20 @@ +chart.animate({ + config: { + channels: { + y: { + set: [ + { + name: 'Popularity' + } + ] + }, + x: { + set: [ + { + name: 'Genres' + } + ] + } + } + } +}) diff --git a/docs/tutorial/axes_title_tooltip/02.js b/docs/tutorial/axes_title_tooltip/02.js new file mode 100644 index 000000000..d8027c627 --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/02.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + x: { + set: null + }, + y: { + set: ['Genres', 'Popularity'] + } + } + } +}) diff --git a/docs/tutorial/axes_title_tooltip/03.js b/docs/tutorial/axes_title_tooltip/03.js new file mode 100644 index 000000000..36dbefcb5 --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/03.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + detach: ['Popularity'] + }, + x: { + attach: ['Popularity'] + } + } + } +}) diff --git a/docs/tutorial/axes_title_tooltip/04_a.js b/docs/tutorial/axes_title_tooltip/04_a.js new file mode 100644 index 000000000..3202014be --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/04_a.js @@ -0,0 +1 @@ +console.log(chart.config) diff --git a/docs/tutorial/axes_title_tooltip/04_b.js b/docs/tutorial/axes_title_tooltip/04_b.js new file mode 100644 index 000000000..ebf752761 --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/04_b.js @@ -0,0 +1,3 @@ +chart.animate({ + title: 'My first chart' +}) diff --git a/docs/tutorial/axes_title_tooltip/05.js b/docs/tutorial/axes_title_tooltip/05.js new file mode 100644 index 000000000..37b74e3ca --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/05.js @@ -0,0 +1,4 @@ +chart.animate({ + subtitle: 'with fancy animations', + caption: 'Source: Vizzu tutorial' +}) diff --git a/docs/tutorial/axes_title_tooltip/06.js b/docs/tutorial/axes_title_tooltip/06.js new file mode 100644 index 000000000..16483d848 --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/06.js @@ -0,0 +1 @@ +chart.feature('tooltip', true) diff --git a/docs/tutorial/axes_title_tooltip/index.js b/docs/tutorial/axes_title_tooltip/index.js new file mode 100644 index 000000000..1654490df --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/index.js @@ -0,0 +1,16 @@ +const dataLoaded = import('../../assets/data/music_data.js') +const mdChartLoaded = import('../../assets/javascripts/mdchart.js') + +Promise.all([dataLoaded, mdChartLoaded]).then((results) => { + const data = results[0].default + const MdChart = results[1].default + const mdchart = new MdChart(data, 'tutorial') + mdchart.create([ + ['01_a', '01_b'], + '02', + '03', + [{ name: '04_a', returnOriginal: true }, '04_b'], + '05', + { name: '06', returnOriginal: true } + ]) +}) From 73a23fa5a49af26f817b7fa0cf0feba2b077a6c6 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 08:58:09 +0100 Subject: [PATCH 02/49] replace include prefix, cause formatting issues --- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/align_range.md | 2 +- docs/tutorial/animation_control_keyframes.md | 2 +- docs/tutorial/animation_options.md | 2 +- docs/tutorial/assets/setup/setup_a.md | 4 +- docs/tutorial/assets/setup/setup_b.md | 4 +- docs/tutorial/assets/setup/setup_c.md | 4 +- docs/tutorial/axes_title_tooltip.md | 42 ++++--------------- docs/tutorial/changing_dimensions.md | 2 +- docs/tutorial/channels_legend.md | 2 +- docs/tutorial/chart_layout.md | 2 +- docs/tutorial/chart_presets.md | 2 +- docs/tutorial/color_palette_fonts.md | 2 +- docs/tutorial/events.md | 2 +- docs/tutorial/filter_add_new_records.md | 2 +- docs/tutorial/geometry.md | 2 +- docs/tutorial/group_stack.md | 2 +- docs/tutorial/orientation_split_polar.md | 2 +- docs/tutorial/shorthands_store.md | 2 +- docs/tutorial/sorting.md | 2 +- .../without_coordinates_noop_channel.md | 2 +- tools/docs/mkdocs.yml | 3 +- 22 files changed, 34 insertions(+), 57 deletions(-) diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index c19726325..2b09cb43e 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -13,7 +13,7 @@ within `Genres`.
-{% include-markdown "tutorial/assets/setup/setup_a.md" %} +// {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/align_range.md b/docs/tutorial/align_range.md index 129703a93..f195d7fb9 100644 --- a/docs/tutorial/align_range.md +++ b/docs/tutorial/align_range.md @@ -21,7 +21,7 @@ whereas on a bar chart, horizontally.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} Change align and configures the y axis labels to disappear during the animation. diff --git a/docs/tutorial/animation_control_keyframes.md b/docs/tutorial/animation_control_keyframes.md index 83f2aaa39..0627aa2db 100644 --- a/docs/tutorial/animation_control_keyframes.md +++ b/docs/tutorial/animation_control_keyframes.md @@ -11,7 +11,7 @@ In this step, we seek forward to `50%` of progress after the animation starts.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/animation_options.md b/docs/tutorial/animation_options.md index de8150317..8b82e8f27 100644 --- a/docs/tutorial/animation_options.md +++ b/docs/tutorial/animation_options.md @@ -14,7 +14,7 @@ the default animation options.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/assets/setup/setup_a.md b/docs/tutorial/assets/setup/setup_a.md index 908a429a8..da1280961 100644 --- a/docs/tutorial/assets/setup/setup_a.md +++ b/docs/tutorial/assets/setup/setup_a.md @@ -1,4 +1,4 @@ ??? info "Info - How to setup Vizzu" - {% include-markdown "tutorial/assets/setup/init.md" %} + // {% include-markdown "tutorial/assets/setup/init.md" %} - {% include-markdown "tutorial/assets/setup/config_a.md" %} + // {% include-markdown "tutorial/assets/setup/config_a.md" %} diff --git a/docs/tutorial/assets/setup/setup_b.md b/docs/tutorial/assets/setup/setup_b.md index 87e80d7b5..4eeab86c9 100644 --- a/docs/tutorial/assets/setup/setup_b.md +++ b/docs/tutorial/assets/setup/setup_b.md @@ -1,4 +1,4 @@ ??? info "Info - How to setup Vizzu" - {% include-markdown "tutorial/assets/setup/init.md" %} + // {% include-markdown "tutorial/assets/setup/init.md" %} - {% include-markdown "tutorial/assets/setup/config_b.md" %} + // {% include-markdown "tutorial/assets/setup/config_b.md" %} diff --git a/docs/tutorial/assets/setup/setup_c.md b/docs/tutorial/assets/setup/setup_c.md index 1fcf82a3c..d4ca138f6 100644 --- a/docs/tutorial/assets/setup/setup_c.md +++ b/docs/tutorial/assets/setup/setup_c.md @@ -1,4 +1,4 @@ ??? info "Info - How to setup Vizzu" - {% include-markdown "tutorial/assets/setup/init.md" %} + // {% include-markdown "tutorial/assets/setup/init.md" %} - {% include-markdown "tutorial/assets/setup/config_c.md" %} + // {% include-markdown "tutorial/assets/setup/config_c.md" %} diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 66babfd56..36549629c 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -15,13 +15,10 @@ the measure (`Popularity`) to the y-axis using the set property.
-{% include-markdown "tutorial/assets/setup/setup_a.md" %} +// {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript -{ - % - include "tutorial/axes_title_tooltip/01_a.js" % -} +// {% include "tutorial/axes_title_tooltip/01_a.js" %} ``` We will reference the data series by names for clarity throughout the tutorial. @@ -31,10 +28,7 @@ see the [Aggregating data](./aggregating_data.md) chapter. The previous example can be rewritten using data series descriptor objects as follows: ```javascript -{ - % - include "tutorial/axes_title_tooltip/01_b.js" % -} +// {% include "tutorial/axes_title_tooltip/01_b.js" %} ``` In the next step, the chart is rearranged by putting both series on the y-axis @@ -44,10 +38,7 @@ automatically animates between the initial state and this one.
```javascript -{ - % - include "tutorial/axes_title_tooltip/02.js" % -} +// {% include "tutorial/axes_title_tooltip/02.js" %} ``` Instead of set, you can use attach and detach to add or remove series to/from @@ -56,10 +47,7 @@ the channels.
```javascript -{ - % - include "tutorial/axes_title_tooltip/03.js" % -} +// {% include "tutorial/axes_title_tooltip/03.js" %} ``` Using attach & detach makes it easier to build your animated charts @@ -68,10 +56,7 @@ channel in the previous step or add the following code to access the actual configuration of the chart. ```javascript -{ - % - include "tutorial/axes_title_tooltip/04_a.js" % -} +// {% include "tutorial/axes_title_tooltip/04_a.js" %} ``` Setting the chart title with the title property. @@ -79,10 +64,7 @@ Setting the chart title with the title property.
```javascript -{ - % - include "tutorial/axes_title_tooltip/04_b.js" % -} +// {% include "tutorial/axes_title_tooltip/04_b.js" %} ``` Subtitle and caption textual element options are available for your charts. @@ -90,10 +72,7 @@ Subtitle and caption textual element options are available for your charts.
```javascript -{ - % - include "tutorial/axes_title_tooltip/05.js" % -} +// {% include "tutorial/axes_title_tooltip/05.js" %} ``` Switching on the tooltips that appear on the chart elements when the user hovers @@ -103,10 +82,7 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the
```javascript -{ - % - include "tutorial/axes_title_tooltip/06.js" % -} +// {% include "tutorial/axes_title_tooltip/06.js" %} ``` !!! note diff --git a/docs/tutorial/changing_dimensions.md b/docs/tutorial/changing_dimensions.md index cb37c7a5f..6753e7e04 100644 --- a/docs/tutorial/changing_dimensions.md +++ b/docs/tutorial/changing_dimensions.md @@ -15,7 +15,7 @@ elements.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index 46cf603ac..b60fca5c0 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -19,7 +19,7 @@ them differently with the `style` object introduced in the
-{% include-markdown "tutorial/assets/setup/setup_b.md" %} +// {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/chart_layout.md b/docs/tutorial/chart_layout.md index 529f5ad04..e018610fd 100644 --- a/docs/tutorial/chart_layout.md +++ b/docs/tutorial/chart_layout.md @@ -18,7 +18,7 @@ are aligned.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/chart_presets.md b/docs/tutorial/chart_presets.md index ce69ee364..b5a2cee0f 100644 --- a/docs/tutorial/chart_presets.md +++ b/docs/tutorial/chart_presets.md @@ -19,7 +19,7 @@ stacked bubble chart using its preset.
-{% include-markdown "tutorial/assets/setup/setup_a.md" %} +// {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript chart.animate(Vizzu.presets.stackedBubble({ diff --git a/docs/tutorial/color_palette_fonts.md b/docs/tutorial/color_palette_fonts.md index 3003581a6..9517b8f7e 100644 --- a/docs/tutorial/color_palette_fonts.md +++ b/docs/tutorial/color_palette_fonts.md @@ -21,7 +21,7 @@ you should add
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/events.md b/docs/tutorial/events.md index 30a257d45..273c6ca7e 100644 --- a/docs/tutorial/events.md +++ b/docs/tutorial/events.md @@ -14,7 +14,7 @@ block with information about the clicked chart element.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript function clickHandler(event) { diff --git a/docs/tutorial/filter_add_new_records.md b/docs/tutorial/filter_add_new_records.md index 2c292911f..52475c236 100644 --- a/docs/tutorial/filter_add_new_records.md +++ b/docs/tutorial/filter_add_new_records.md @@ -15,7 +15,7 @@ from the chart.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index abcecd493..e6121c52c 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -12,7 +12,7 @@ Switching the geometry to area.
-{% include-markdown "tutorial/assets/setup/setup_b.md" %} +// {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/group_stack.md b/docs/tutorial/group_stack.md index cc654a153..e0af181c8 100644 --- a/docs/tutorial/group_stack.md +++ b/docs/tutorial/group_stack.md @@ -14,7 +14,7 @@ we also add the same dimension to the color channel.
-{% include-markdown "tutorial/assets/setup/setup_b.md" %} +// {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/orientation_split_polar.md b/docs/tutorial/orientation_split_polar.md index f76813580..d10fd3adc 100644 --- a/docs/tutorial/orientation_split_polar.md +++ b/docs/tutorial/orientation_split_polar.md @@ -14,7 +14,7 @@ only use temporarily.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/shorthands_store.md b/docs/tutorial/shorthands_store.md index 300345b04..0bcf027b8 100644 --- a/docs/tutorial/shorthands_store.md +++ b/docs/tutorial/shorthands_store.md @@ -17,7 +17,7 @@ animate method, you can simplify your code by using only the object of the
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/sorting.md b/docs/tutorial/sorting.md index 4a9ea9b47..8594abc06 100644 --- a/docs/tutorial/sorting.md +++ b/docs/tutorial/sorting.md @@ -13,7 +13,7 @@ ascending order.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/docs/tutorial/without_coordinates_noop_channel.md b/docs/tutorial/without_coordinates_noop_channel.md index ef3a2ef1a..f021dbc8d 100644 --- a/docs/tutorial/without_coordinates_noop_channel.md +++ b/docs/tutorial/without_coordinates_noop_channel.md @@ -14,7 +14,7 @@ still on the `color` channel.
-{% include-markdown "tutorial/assets/setup/setup_c.md" %} +// {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript chart.animate({ diff --git a/tools/docs/mkdocs.yml b/tools/docs/mkdocs.yml index 9203bd6bf..cebee35e8 100644 --- a/tools/docs/mkdocs.yml +++ b/tools/docs/mkdocs.yml @@ -87,7 +87,8 @@ plugins: - literate-nav: implicit_index: true - autorefs - - include-markdown + - include-markdown: + opening_tag: "// {%" - placeholder - gen-files: scripts: From a66a6b024b35d566267e9a241ec9dda55bf73883 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 09:14:56 +0100 Subject: [PATCH 03/49] rewrite aggregating data --- docs/tutorial/aggregating_data.js | 167 ------------------------ docs/tutorial/aggregating_data.md | 84 ++---------- docs/tutorial/aggregating_data/01_a.js | 5 + docs/tutorial/aggregating_data/01_b.js | 7 + docs/tutorial/aggregating_data/01_c.js | 5 + docs/tutorial/aggregating_data/01_d.js | 7 + docs/tutorial/aggregating_data/02_a.js | 5 + docs/tutorial/aggregating_data/02_b.js | 7 + docs/tutorial/aggregating_data/03_a.js | 5 + docs/tutorial/aggregating_data/03_b.js | 7 + docs/tutorial/aggregating_data/04_a.js | 5 + docs/tutorial/aggregating_data/04_b.js | 7 + docs/tutorial/aggregating_data/05_a.js | 5 + docs/tutorial/aggregating_data/05_b.js | 7 + docs/tutorial/aggregating_data/06_a.js | 5 + docs/tutorial/aggregating_data/06_b.js | 7 + docs/tutorial/aggregating_data/07_a.js | 5 + docs/tutorial/aggregating_data/07_b.js | 7 + docs/tutorial/aggregating_data/index.js | 17 +++ 19 files changed, 123 insertions(+), 241 deletions(-) delete mode 100644 docs/tutorial/aggregating_data.js create mode 100644 docs/tutorial/aggregating_data/01_a.js create mode 100644 docs/tutorial/aggregating_data/01_b.js create mode 100644 docs/tutorial/aggregating_data/01_c.js create mode 100644 docs/tutorial/aggregating_data/01_d.js create mode 100644 docs/tutorial/aggregating_data/02_a.js create mode 100644 docs/tutorial/aggregating_data/02_b.js create mode 100644 docs/tutorial/aggregating_data/03_a.js create mode 100644 docs/tutorial/aggregating_data/03_b.js create mode 100644 docs/tutorial/aggregating_data/04_a.js create mode 100644 docs/tutorial/aggregating_data/04_b.js create mode 100644 docs/tutorial/aggregating_data/05_a.js create mode 100644 docs/tutorial/aggregating_data/05_b.js create mode 100644 docs/tutorial/aggregating_data/06_a.js create mode 100644 docs/tutorial/aggregating_data/06_b.js create mode 100644 docs/tutorial/aggregating_data/07_a.js create mode 100644 docs/tutorial/aggregating_data/07_b.js create mode 100644 docs/tutorial/aggregating_data/index.js diff --git a/docs/tutorial/aggregating_data.js b/docs/tutorial/aggregating_data.js deleted file mode 100644 index b14ce3be1..000000000 --- a/docs/tutorial/aggregating_data.js +++ /dev/null @@ -1,167 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Sum of all Popularity Values' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - title: 'Sum of Popularity by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { set: 'Genres' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Minimum of Popularity by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'min(Popularity)' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Maximum of Popularity by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'max(Popularity)' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Mean of Popularity by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'mean(Popularity)' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Count of items by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'count()' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Distinct Kinds by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'distinct(Kinds)' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Sum of Popularity by Genre' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { set: 'sum(Popularity)' } - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index 2b09cb43e..3d7b71a7e 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -16,25 +16,9 @@ within `Genres`. // {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['Popularity'] - } - } - } -}) - -chart.animate({ - config: { - channels: { - x: { - set: ['Genres'] - } - } - } -}) +// {% include "tutorial/aggregating_data/01_b.js" %} + +// {% include "tutorial/aggregating_data/01_d.js" %} ``` Next to the default logic of sum, there are a handful of other aggregation @@ -53,15 +37,7 @@ measure in each of the `Genres`.
```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['min(Popularity)'] - } - } - } -}) +// {% include "tutorial/aggregating_data/02_b.js" %} ``` Maximum value: the height of the bars show the maximum value in the `Popularity` @@ -70,15 +46,7 @@ measure in each of the `Genres`.
```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['max(Popularity)'] - } - } - } -}) +// {% include "tutorial/aggregating_data/03_b.js" %} ``` Mean value: the height of the bars show the mean value of the `Popularity` @@ -87,15 +55,7 @@ measure in each of the `Genres`.
```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['mean(Popularity)'] - } - } - } -}) +// {% include "tutorial/aggregating_data/04_b.js" %} ``` Count: the height of the bars show the number of items (rows if you will) in @@ -104,15 +64,7 @@ each of the `Genres`.
```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['count()'] - } - } - } -}) +// {% include "tutorial/aggregating_data/05_b.js" %} ``` Distinct: the height of the bars show the number of distinct categories of @@ -125,15 +77,7 @@ Distinct: the height of the bars show the number of distinct categories of
```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['distinct(Kinds)'] - } - } - } -}) +// {% include "tutorial/aggregating_data/06_b.js" %} ``` Sum: this is how you can get back to the default aggregation logic of `Vizzu` @@ -142,15 +86,7 @@ that sums the `Popularity` values in each of the `Genres`.
```javascript -chart.animate({ - config: { - channels: { - y: { - set: ['sum(Popularity)'] - } - } - } -}) +// {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/aggregating_data/01_a.js b/docs/tutorial/aggregating_data/01_a.js new file mode 100644 index 000000000..65da50661 --- /dev/null +++ b/docs/tutorial/aggregating_data/01_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Sum of all Popularity Values' + } +}) diff --git a/docs/tutorial/aggregating_data/01_b.js b/docs/tutorial/aggregating_data/01_b.js new file mode 100644 index 000000000..162641107 --- /dev/null +++ b/docs/tutorial/aggregating_data/01_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/01_c.js b/docs/tutorial/aggregating_data/01_c.js new file mode 100644 index 000000000..1ca132fe2 --- /dev/null +++ b/docs/tutorial/aggregating_data/01_c.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Sum of Popularity by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/01_d.js b/docs/tutorial/aggregating_data/01_d.js new file mode 100644 index 000000000..88ebd5129 --- /dev/null +++ b/docs/tutorial/aggregating_data/01_d.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + x: { set: 'Genres' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/02_a.js b/docs/tutorial/aggregating_data/02_a.js new file mode 100644 index 000000000..12559f19b --- /dev/null +++ b/docs/tutorial/aggregating_data/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Minimum of Popularity by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/02_b.js b/docs/tutorial/aggregating_data/02_b.js new file mode 100644 index 000000000..d47bbe164 --- /dev/null +++ b/docs/tutorial/aggregating_data/02_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'min(Popularity)' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/03_a.js b/docs/tutorial/aggregating_data/03_a.js new file mode 100644 index 000000000..3f81cf8e9 --- /dev/null +++ b/docs/tutorial/aggregating_data/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Maximum of Popularity by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/03_b.js b/docs/tutorial/aggregating_data/03_b.js new file mode 100644 index 000000000..11766a498 --- /dev/null +++ b/docs/tutorial/aggregating_data/03_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'max(Popularity)' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/04_a.js b/docs/tutorial/aggregating_data/04_a.js new file mode 100644 index 000000000..3e1ecf325 --- /dev/null +++ b/docs/tutorial/aggregating_data/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Mean of Popularity by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/04_b.js b/docs/tutorial/aggregating_data/04_b.js new file mode 100644 index 000000000..a4da693d7 --- /dev/null +++ b/docs/tutorial/aggregating_data/04_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'mean(Popularity)' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/05_a.js b/docs/tutorial/aggregating_data/05_a.js new file mode 100644 index 000000000..632d626f8 --- /dev/null +++ b/docs/tutorial/aggregating_data/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Count of items by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/05_b.js b/docs/tutorial/aggregating_data/05_b.js new file mode 100644 index 000000000..c502eee1c --- /dev/null +++ b/docs/tutorial/aggregating_data/05_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'count()' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/06_a.js b/docs/tutorial/aggregating_data/06_a.js new file mode 100644 index 000000000..e482b3989 --- /dev/null +++ b/docs/tutorial/aggregating_data/06_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Distinct Kinds by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/06_b.js b/docs/tutorial/aggregating_data/06_b.js new file mode 100644 index 000000000..776aff941 --- /dev/null +++ b/docs/tutorial/aggregating_data/06_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'distinct(Kinds)' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/07_a.js b/docs/tutorial/aggregating_data/07_a.js new file mode 100644 index 000000000..1ca132fe2 --- /dev/null +++ b/docs/tutorial/aggregating_data/07_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Sum of Popularity by Genre' + } +}) diff --git a/docs/tutorial/aggregating_data/07_b.js b/docs/tutorial/aggregating_data/07_b.js new file mode 100644 index 000000000..a6b9a4a1a --- /dev/null +++ b/docs/tutorial/aggregating_data/07_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + y: { set: 'sum(Popularity)' } + } + } +}) diff --git a/docs/tutorial/aggregating_data/index.js b/docs/tutorial/aggregating_data/index.js new file mode 100644 index 000000000..f8263c8e7 --- /dev/null +++ b/docs/tutorial/aggregating_data/index.js @@ -0,0 +1,17 @@ +const dataLoaded = import('../../assets/data/music_data.js') +const mdChartLoaded = import('../../assets/javascripts/mdchart.js') + +Promise.all([dataLoaded, mdChartLoaded]).then((results) => { + const data = results[0].default + const MdChart = results[1].default + const mdchart = new MdChart(data, 'tutorial') + mdchart.create([ + ['01_a', '01_b', '01_c', '01_d'], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'], + ['06_a', '06_b'], + ['07_a', '07_b'] + ]) +}) From 07d6bf759c384a340cfcf53e8b6919fe64e492c8 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 10:00:04 +0100 Subject: [PATCH 04/49] tutorial, use snippet config --- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/aggregating_data/config.json | 9 +++++++++ docs/tutorial/aggregating_data/index.js | 17 ----------------- docs/tutorial/axes_title_tooltip.md | 2 +- docs/tutorial/axes_title_tooltip/config.json | 8 ++++++++ docs/tutorial/axes_title_tooltip/index.js | 16 ---------------- docs/tutorial/tutorial.js | 16 ++++++++++++++++ 7 files changed, 35 insertions(+), 35 deletions(-) create mode 100644 docs/tutorial/aggregating_data/config.json delete mode 100644 docs/tutorial/aggregating_data/index.js create mode 100644 docs/tutorial/axes_title_tooltip/config.json delete mode 100644 docs/tutorial/axes_title_tooltip/index.js create mode 100644 docs/tutorial/tutorial.js diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index 3d7b71a7e..ae4d3ba68 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -89,4 +89,4 @@ that sums the `Popularity` values in each of the `Genres`. // {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/aggregating_data/config.json b/docs/tutorial/aggregating_data/config.json new file mode 100644 index 000000000..bc528cc95 --- /dev/null +++ b/docs/tutorial/aggregating_data/config.json @@ -0,0 +1,9 @@ +[ + ["01_a", "01_b", "01_c", "01_d"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"], + ["06_a", "06_b"], + ["07_a", "07_b"] +] diff --git a/docs/tutorial/aggregating_data/index.js b/docs/tutorial/aggregating_data/index.js deleted file mode 100644 index f8263c8e7..000000000 --- a/docs/tutorial/aggregating_data/index.js +++ /dev/null @@ -1,17 +0,0 @@ -const dataLoaded = import('../../assets/data/music_data.js') -const mdChartLoaded = import('../../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - mdchart.create([ - ['01_a', '01_b', '01_c', '01_d'], - ['02_a', '02_b'], - ['03_a', '03_b'], - ['04_a', '04_b'], - ['05_a', '05_b'], - ['06_a', '06_b'], - ['07_a', '07_b'] - ]) -}) diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 36549629c..94f749998 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -88,4 +88,4 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/axes_title_tooltip/config.json b/docs/tutorial/axes_title_tooltip/config.json new file mode 100644 index 000000000..aa0382002 --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/config.json @@ -0,0 +1,8 @@ +[ + ["01_a", "01_b"], + "02", + "03", + [{ "name": "04_a", "returnOriginal": true }, "04_b"], + "05", + { "name": "06", "returnOriginal": true } +] diff --git a/docs/tutorial/axes_title_tooltip/index.js b/docs/tutorial/axes_title_tooltip/index.js deleted file mode 100644 index 1654490df..000000000 --- a/docs/tutorial/axes_title_tooltip/index.js +++ /dev/null @@ -1,16 +0,0 @@ -const dataLoaded = import('../../assets/data/music_data.js') -const mdChartLoaded = import('../../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - mdchart.create([ - ['01_a', '01_b'], - '02', - '03', - [{ name: '04_a', returnOriginal: true }, '04_b'], - '05', - { name: '06', returnOriginal: true } - ]) -}) diff --git a/docs/tutorial/tutorial.js b/docs/tutorial/tutorial.js new file mode 100644 index 000000000..154f33845 --- /dev/null +++ b/docs/tutorial/tutorial.js @@ -0,0 +1,16 @@ +const mdChartLoaded = import('../assets/javascripts/mdchart.js') + +const scriptTag = document.currentScript +const dataFile = scriptTag.getAttribute('data') +const configFile = scriptTag.getAttribute('config') + +const dataLoaded = import(dataFile) +const configLoaded = fetch(configFile).then((response) => response.json()) + +Promise.all([mdChartLoaded, dataLoaded, configLoaded]).then((results) => { + const data = results[1].default + const config = results[2] + const MdChart = results[0].default + const mdchart = new MdChart(data, 'tutorial') + mdchart.create(config) +}) From 5f43645036b83847a9a58aa2d18605515541ced4 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 10:19:21 +0100 Subject: [PATCH 05/49] refactor mdchart, add replace config --- docs/assets/javascripts/mdchart.js | 45 +++++++++++++++++++----------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index 7dadb8e22..e476ccda7 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -93,11 +93,20 @@ class MdChart { return chart } - static async loadAnimation(url, returnOriginal = false) { + static async loadAnimation(url, returnOriginal = false, replace = null) { try { const response = await fetch(url) if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`) - const code = await response.text() + let code = await response.text() + if (Array.isArray(replace)) { + replace.forEach(([searchValue, replaceValue]) => { + const regex = new RegExp( + searchValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), + 'g' + ) + code = code.replace(regex, replaceValue) + }) + } return new Function( // eslint-disable-line no-new-func 'chart', returnOriginal ? `${code}; return chart;` : `return ${code}` @@ -109,27 +118,29 @@ class MdChart { static async loadAnimations(animations) { const steps = [] - for (const animation of animations) { + + async function loadAnimation(animation) { if (typeof animation === 'string') { const func = await MdChart.loadAnimation(`./${animation}.js`) - steps.push([(chart) => func(chart)]) - } else if (Array.isArray(animation)) { + return (chart) => func(chart) + } else if (typeof animation === 'object' && animation.name) { + const { name, returnOriginal, replace } = animation + const func = await MdChart.loadAnimation(`./${name}.js`, returnOriginal, replace) + return (chart) => func(chart) + } + } + + for (const animation of animations) { + if (Array.isArray(animation)) { const animSteps = [] for (const subAnimation of animation) { - if (typeof subAnimation === 'string') { - const func = await MdChart.loadAnimation(`./${subAnimation}.js`) - animSteps.push((chart) => func(chart)) - } else if (typeof subAnimation === 'object' && subAnimation.name) { - const { name, returnOriginal } = subAnimation - const func = await MdChart.loadAnimation(`./${name}.js`, returnOriginal) - animSteps.push((chart) => func(chart)) - } + const func = await loadAnimation(subAnimation) + if (func) animSteps.push(func) } steps.push(animSteps) - } else if (typeof animation === 'object' && animation.name) { - const { name, returnOriginal } = animation - const func = await MdChart.loadAnimation(`./${name}.js`, returnOriginal) - steps.push([(chart) => func(chart)]) + } else { + const func = await loadAnimation(animation) + if (func) steps.push([func]) } } return steps From d32ac501534315ee9ef2bc4f22f909082bdd552d Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 14:49:47 +0100 Subject: [PATCH 06/49] rewrite tutorial geometry --- docs/tutorial/geometry.js | 73 ------------------------------ docs/tutorial/geometry.md | 26 ++--------- docs/tutorial/geometry/01_a.js | 9 ++++ docs/tutorial/geometry/01_b.js | 3 ++ docs/tutorial/geometry/02_a.js | 3 ++ docs/tutorial/geometry/02_b.js | 3 ++ docs/tutorial/geometry/03_a.js | 3 ++ docs/tutorial/geometry/03_b.js | 3 ++ docs/tutorial/geometry/04_a.js | 3 ++ docs/tutorial/geometry/04_b.js | 3 ++ docs/tutorial/geometry/config.json | 6 +++ 11 files changed, 41 insertions(+), 94 deletions(-) delete mode 100644 docs/tutorial/geometry.js create mode 100644 docs/tutorial/geometry/01_a.js create mode 100644 docs/tutorial/geometry/01_b.js create mode 100644 docs/tutorial/geometry/02_a.js create mode 100644 docs/tutorial/geometry/02_b.js create mode 100644 docs/tutorial/geometry/03_a.js create mode 100644 docs/tutorial/geometry/03_b.js create mode 100644 docs/tutorial/geometry/04_a.js create mode 100644 docs/tutorial/geometry/04_b.js create mode 100644 docs/tutorial/geometry/config.json diff --git a/docs/tutorial/geometry.js b/docs/tutorial/geometry.js deleted file mode 100644 index 854fd9eb1..000000000 --- a/docs/tutorial/geometry.js +++ /dev/null @@ -1,73 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Geometry: area', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } - }) - }, - (chart) => { - return chart.animate({ - geometry: 'area' - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - title: 'Geometry: line' - }) - }, - (chart) => { - return chart.animate({ - geometry: 'line' - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - title: 'Geometry: circle' - }) - }, - (chart) => { - return chart.animate({ - geometry: 'circle' - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - title: 'Geometry: rectangle - default' - }) - }, - (chart) => { - return chart.animate({ - geometry: 'rectangle' - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index e6121c52c..1b7510b91 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -15,11 +15,7 @@ Switching the geometry to area. // {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript -chart.animate({ - config: { - geometry: 'area', - } -}) +// {% include "tutorial/geometry/01_b.js" %} ``` Drawing a line chart. @@ -27,11 +23,7 @@ Drawing a line chart.
```javascript -chart.animate({ - config: { - geometry: 'line', - } -}) +// {% include "tutorial/geometry/02_b.js" %} ``` Switching the geometry to circle. This setting is the most useful when used @@ -40,11 +32,7 @@ together with the size channel, as shown in the next chapter of the tutorial.
```javascript -chart.animate({ - config: { - geometry: 'circle', - } -}) +// {% include "tutorial/geometry/03_b.js" %} ``` Rectangle geometry is the default setting in `Vizzu`, used for most common @@ -53,11 +41,7 @@ charts like bar and column charts.
```javascript -chart.animate({ - config: { - geometry: 'rectangle', - } -}) +// {% include "tutorial/geometry/04_b.js" %} ``` - + diff --git a/docs/tutorial/geometry/01_a.js b/docs/tutorial/geometry/01_a.js new file mode 100644 index 000000000..e751f8a66 --- /dev/null +++ b/docs/tutorial/geometry/01_a.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + title: 'Geometry: area', + channels: { + y: { set: 'Popularity' }, + x: { set: 'Genres' } + } + } +}) diff --git a/docs/tutorial/geometry/01_b.js b/docs/tutorial/geometry/01_b.js new file mode 100644 index 000000000..7bdee3640 --- /dev/null +++ b/docs/tutorial/geometry/01_b.js @@ -0,0 +1,3 @@ +chart.animate({ + geometry: 'area' +}) diff --git a/docs/tutorial/geometry/02_a.js b/docs/tutorial/geometry/02_a.js new file mode 100644 index 000000000..695fc1de0 --- /dev/null +++ b/docs/tutorial/geometry/02_a.js @@ -0,0 +1,3 @@ +chart.animate({ + title: 'Geometry: line' +}) diff --git a/docs/tutorial/geometry/02_b.js b/docs/tutorial/geometry/02_b.js new file mode 100644 index 000000000..adbc3fece --- /dev/null +++ b/docs/tutorial/geometry/02_b.js @@ -0,0 +1,3 @@ +chart.animate({ + geometry: 'line' +}) diff --git a/docs/tutorial/geometry/03_a.js b/docs/tutorial/geometry/03_a.js new file mode 100644 index 000000000..41e8e7f46 --- /dev/null +++ b/docs/tutorial/geometry/03_a.js @@ -0,0 +1,3 @@ +chart.animate({ + title: 'Geometry: circle' +}) diff --git a/docs/tutorial/geometry/03_b.js b/docs/tutorial/geometry/03_b.js new file mode 100644 index 000000000..eff30343c --- /dev/null +++ b/docs/tutorial/geometry/03_b.js @@ -0,0 +1,3 @@ +chart.animate({ + geometry: 'circle' +}) diff --git a/docs/tutorial/geometry/04_a.js b/docs/tutorial/geometry/04_a.js new file mode 100644 index 000000000..e6927b4cb --- /dev/null +++ b/docs/tutorial/geometry/04_a.js @@ -0,0 +1,3 @@ +chart.animate({ + title: 'Geometry: rectangle - default' +}) diff --git a/docs/tutorial/geometry/04_b.js b/docs/tutorial/geometry/04_b.js new file mode 100644 index 000000000..3f1c0b7c5 --- /dev/null +++ b/docs/tutorial/geometry/04_b.js @@ -0,0 +1,3 @@ +chart.animate({ + geometry: 'rectangle' +}) diff --git a/docs/tutorial/geometry/config.json b/docs/tutorial/geometry/config.json new file mode 100644 index 000000000..11cb28e94 --- /dev/null +++ b/docs/tutorial/geometry/config.json @@ -0,0 +1,6 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"] +] From 43cacc3b0b174636d9a1e0c64490163a8c5abac3 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 15:00:30 +0100 Subject: [PATCH 07/49] tutorial, rewrite channels legend --- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/axes_title_tooltip.md | 2 +- docs/tutorial/channels_legend.js | 109 ---------------------- docs/tutorial/channels_legend.md | 48 +--------- docs/tutorial/channels_legend/01_a.js | 9 ++ docs/tutorial/channels_legend/01_b.js | 9 ++ docs/tutorial/channels_legend/02_a.js | 5 + docs/tutorial/channels_legend/02_b.js | 10 ++ docs/tutorial/channels_legend/03_a.js | 5 + docs/tutorial/channels_legend/03_b.js | 13 +++ docs/tutorial/channels_legend/04_a.js | 5 + docs/tutorial/channels_legend/04_b.js | 10 ++ docs/tutorial/channels_legend/config.json | 6 ++ docs/tutorial/geometry.md | 2 +- docs/tutorial/geometry/01_a.js | 14 +-- docs/tutorial/geometry/01_b.js | 2 +- docs/tutorial/geometry/02_a.js | 2 +- docs/tutorial/geometry/02_b.js | 2 +- docs/tutorial/geometry/03_a.js | 2 +- docs/tutorial/geometry/03_b.js | 2 +- docs/tutorial/geometry/04_a.js | 2 +- docs/tutorial/geometry/04_b.js | 2 +- docs/tutorial/tutorial.js | 3 +- 23 files changed, 95 insertions(+), 171 deletions(-) delete mode 100644 docs/tutorial/channels_legend.js create mode 100644 docs/tutorial/channels_legend/01_a.js create mode 100644 docs/tutorial/channels_legend/01_b.js create mode 100644 docs/tutorial/channels_legend/02_a.js create mode 100644 docs/tutorial/channels_legend/02_b.js create mode 100644 docs/tutorial/channels_legend/03_a.js create mode 100644 docs/tutorial/channels_legend/03_b.js create mode 100644 docs/tutorial/channels_legend/04_a.js create mode 100644 docs/tutorial/channels_legend/04_b.js create mode 100644 docs/tutorial/channels_legend/config.json diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index ae4d3ba68..05aa1a2fd 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -89,4 +89,4 @@ that sums the `Popularity` values in each of the `Genres`. // {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 94f749998..7586a7724 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -88,4 +88,4 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/channels_legend.js b/docs/tutorial/channels_legend.js deleted file mode 100644 index 18a72f438..000000000 --- a/docs/tutorial/channels_legend.js +++ /dev/null @@ -1,109 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Label', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - label: { - attach: 'Popularity' - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Lightness - legend on' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - lightness: { - attach: 'Popularity' - } - }, - legend: 'lightness' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Color' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - lightness: { - set: null - }, - color: { - attach: 'Genres' - } - }, - legend: 'color' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Size - change of geometry required' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - size: { - set: 'Popularity' - } - }, - geometry: 'circle' - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index b60fca5c0..d803f6416 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -22,15 +22,7 @@ them differently with the `style` object introduced in the // {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript -chart.animate({ - config: { - channels: { - label: { - attach: ['Popularity'] - } - } - } -}) +// {% include "tutorial/channels_legend/01_b.js" %} ``` The `lightness` channel sets the lightness of the markers. In this case the same @@ -47,16 +39,7 @@ columns’ height and lightness represent the same values. The legend for the
```javascript -chart.animate({ - config: { - channels: { - lightness: { - attach: ['Popularity'] - } - }, - legend: 'lightness' - } -}) +// {% include "tutorial/channels_legend/02_b.js" %} ``` The `color` channel sets the color of the markers. The same dimension (`Genres`) @@ -70,19 +53,7 @@ color. If a measure is put on the `color` channel, a color range will be used.
```javascript -chart.animate({ - config: { - channels: { - lightness: { - set: null - }, - color: { - attach: ['Genres'] - } - }, - legend: 'color', - } -}) +// {% include "tutorial/channels_legend/03_b.js" %} ``` The `size` channel sets the size of the markers if the geometry is circle - @@ -93,16 +64,7 @@ change the geometry to circle in the example.
```javascript -chart.animate({ - config: { - channels: { - size: { - set: ['Popularity'] - } - }, - geometry: 'circle' - } -}) +// {% include "tutorial/channels_legend/04_b.js" %} ``` - + diff --git a/docs/tutorial/channels_legend/01_a.js b/docs/tutorial/channels_legend/01_a.js new file mode 100644 index 000000000..9f0ca2906 --- /dev/null +++ b/docs/tutorial/channels_legend/01_a.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + title: 'Label', + channels: { + y: { set: 'Popularity' }, + x: { set: 'Genres' } + } + } +}) diff --git a/docs/tutorial/channels_legend/01_b.js b/docs/tutorial/channels_legend/01_b.js new file mode 100644 index 000000000..05167f7b8 --- /dev/null +++ b/docs/tutorial/channels_legend/01_b.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + channels: { + label: { + attach: 'Popularity' + } + } + } +}) diff --git a/docs/tutorial/channels_legend/02_a.js b/docs/tutorial/channels_legend/02_a.js new file mode 100644 index 000000000..753d4349e --- /dev/null +++ b/docs/tutorial/channels_legend/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Lightness - legend on' + } +}) diff --git a/docs/tutorial/channels_legend/02_b.js b/docs/tutorial/channels_legend/02_b.js new file mode 100644 index 000000000..f51343890 --- /dev/null +++ b/docs/tutorial/channels_legend/02_b.js @@ -0,0 +1,10 @@ +chart.animate({ + config: { + channels: { + lightness: { + attach: 'Popularity' + } + }, + legend: 'lightness' + } +}) diff --git a/docs/tutorial/channels_legend/03_a.js b/docs/tutorial/channels_legend/03_a.js new file mode 100644 index 000000000..5d7aafcbc --- /dev/null +++ b/docs/tutorial/channels_legend/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Color' + } +}) diff --git a/docs/tutorial/channels_legend/03_b.js b/docs/tutorial/channels_legend/03_b.js new file mode 100644 index 000000000..1c8dfacd5 --- /dev/null +++ b/docs/tutorial/channels_legend/03_b.js @@ -0,0 +1,13 @@ +chart.animate({ + config: { + channels: { + lightness: { + set: null + }, + color: { + attach: 'Genres' + } + }, + legend: 'color' + } +}) diff --git a/docs/tutorial/channels_legend/04_a.js b/docs/tutorial/channels_legend/04_a.js new file mode 100644 index 000000000..b061814ce --- /dev/null +++ b/docs/tutorial/channels_legend/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Size - change of geometry required' + } +}) diff --git a/docs/tutorial/channels_legend/04_b.js b/docs/tutorial/channels_legend/04_b.js new file mode 100644 index 000000000..79d6f9dc3 --- /dev/null +++ b/docs/tutorial/channels_legend/04_b.js @@ -0,0 +1,10 @@ +chart.animate({ + config: { + channels: { + size: { + set: 'Popularity' + } + }, + geometry: 'circle' + } +}) diff --git a/docs/tutorial/channels_legend/config.json b/docs/tutorial/channels_legend/config.json new file mode 100644 index 000000000..11cb28e94 --- /dev/null +++ b/docs/tutorial/channels_legend/config.json @@ -0,0 +1,6 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"] +] diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index 1b7510b91..6af4c887a 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -44,4 +44,4 @@ charts like bar and column charts. // {% include "tutorial/geometry/04_b.js" %} ``` - + diff --git a/docs/tutorial/geometry/01_a.js b/docs/tutorial/geometry/01_a.js index e751f8a66..2fe2643d7 100644 --- a/docs/tutorial/geometry/01_a.js +++ b/docs/tutorial/geometry/01_a.js @@ -1,9 +1,9 @@ chart.animate({ - config: { - title: 'Geometry: area', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } + config: { + title: 'Geometry: area', + channels: { + y: { set: 'Popularity' }, + x: { set: 'Genres' } + } + } }) diff --git a/docs/tutorial/geometry/01_b.js b/docs/tutorial/geometry/01_b.js index 7bdee3640..0176f6fbf 100644 --- a/docs/tutorial/geometry/01_b.js +++ b/docs/tutorial/geometry/01_b.js @@ -1,3 +1,3 @@ chart.animate({ - geometry: 'area' + geometry: 'area' }) diff --git a/docs/tutorial/geometry/02_a.js b/docs/tutorial/geometry/02_a.js index 695fc1de0..4216320b5 100644 --- a/docs/tutorial/geometry/02_a.js +++ b/docs/tutorial/geometry/02_a.js @@ -1,3 +1,3 @@ chart.animate({ - title: 'Geometry: line' + title: 'Geometry: line' }) diff --git a/docs/tutorial/geometry/02_b.js b/docs/tutorial/geometry/02_b.js index adbc3fece..0bc3873b1 100644 --- a/docs/tutorial/geometry/02_b.js +++ b/docs/tutorial/geometry/02_b.js @@ -1,3 +1,3 @@ chart.animate({ - geometry: 'line' + geometry: 'line' }) diff --git a/docs/tutorial/geometry/03_a.js b/docs/tutorial/geometry/03_a.js index 41e8e7f46..d5d8fa26a 100644 --- a/docs/tutorial/geometry/03_a.js +++ b/docs/tutorial/geometry/03_a.js @@ -1,3 +1,3 @@ chart.animate({ - title: 'Geometry: circle' + title: 'Geometry: circle' }) diff --git a/docs/tutorial/geometry/03_b.js b/docs/tutorial/geometry/03_b.js index eff30343c..2d260344e 100644 --- a/docs/tutorial/geometry/03_b.js +++ b/docs/tutorial/geometry/03_b.js @@ -1,3 +1,3 @@ chart.animate({ - geometry: 'circle' + geometry: 'circle' }) diff --git a/docs/tutorial/geometry/04_a.js b/docs/tutorial/geometry/04_a.js index e6927b4cb..eeb624274 100644 --- a/docs/tutorial/geometry/04_a.js +++ b/docs/tutorial/geometry/04_a.js @@ -1,3 +1,3 @@ chart.animate({ - title: 'Geometry: rectangle - default' + title: 'Geometry: rectangle - default' }) diff --git a/docs/tutorial/geometry/04_b.js b/docs/tutorial/geometry/04_b.js index 3f1c0b7c5..dcaa0b763 100644 --- a/docs/tutorial/geometry/04_b.js +++ b/docs/tutorial/geometry/04_b.js @@ -1,3 +1,3 @@ chart.animate({ - geometry: 'rectangle' + geometry: 'rectangle' }) diff --git a/docs/tutorial/tutorial.js b/docs/tutorial/tutorial.js index 154f33845..5d498890e 100644 --- a/docs/tutorial/tutorial.js +++ b/docs/tutorial/tutorial.js @@ -1,10 +1,9 @@ const mdChartLoaded = import('../assets/javascripts/mdchart.js') const scriptTag = document.currentScript -const dataFile = scriptTag.getAttribute('data') const configFile = scriptTag.getAttribute('config') -const dataLoaded = import(dataFile) +const dataLoaded = import('../assets/data/music_data.js') const configLoaded = fetch(configFile).then((response) => response.json()) Promise.all([mdChartLoaded, dataLoaded, configLoaded]).then((results) => { From e2f480e90b91f94fb03091236681a4a0b3dff799 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 15:42:50 +0100 Subject: [PATCH 08/49] tutorial, remove config --- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/axes_title_tooltip.md | 2 +- docs/tutorial/channels_legend.md | 2 +- docs/tutorial/geometry.md | 2 +- docs/tutorial/tutorial.js | 5 +---- 5 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index 05aa1a2fd..f736f44d2 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -89,4 +89,4 @@ that sums the `Popularity` values in each of the `Genres`. // {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 7586a7724..3bedb91f4 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -88,4 +88,4 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index d803f6416..fb20b7558 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -67,4 +67,4 @@ change the geometry to circle in the example. // {% include "tutorial/channels_legend/04_b.js" %} ``` - + diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index 6af4c887a..a0973d6cc 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -44,4 +44,4 @@ charts like bar and column charts. // {% include "tutorial/geometry/04_b.js" %} ``` - + diff --git a/docs/tutorial/tutorial.js b/docs/tutorial/tutorial.js index 5d498890e..f11ac2913 100644 --- a/docs/tutorial/tutorial.js +++ b/docs/tutorial/tutorial.js @@ -1,10 +1,7 @@ const mdChartLoaded = import('../assets/javascripts/mdchart.js') -const scriptTag = document.currentScript -const configFile = scriptTag.getAttribute('config') - const dataLoaded = import('../assets/data/music_data.js') -const configLoaded = fetch(configFile).then((response) => response.json()) +const configLoaded = fetch('./config.json').then((response) => response.json()) Promise.all([mdChartLoaded, dataLoaded, configLoaded]).then((results) => { const data = results[1].default From 56af4b53dd587b6e02ad002203b26bbe95200d41 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 15:54:02 +0100 Subject: [PATCH 09/49] tutorial, reqrite group stack --- docs/tutorial/group_stack.js | 102 -------------------------- docs/tutorial/group_stack.md | 51 ++----------- docs/tutorial/group_stack/01_a.js | 9 +++ docs/tutorial/group_stack/01_b.js | 12 +++ docs/tutorial/group_stack/02_a.js | 5 ++ docs/tutorial/group_stack/02_b.js | 8 ++ docs/tutorial/group_stack/03_a.js | 5 ++ docs/tutorial/group_stack/03_b.js | 7 ++ docs/tutorial/group_stack/04_a.js | 5 ++ docs/tutorial/group_stack/04_b.js | 8 ++ docs/tutorial/group_stack/config.json | 6 ++ 11 files changed, 70 insertions(+), 148 deletions(-) delete mode 100644 docs/tutorial/group_stack.js create mode 100644 docs/tutorial/group_stack/01_a.js create mode 100644 docs/tutorial/group_stack/01_b.js create mode 100644 docs/tutorial/group_stack/02_a.js create mode 100644 docs/tutorial/group_stack/02_b.js create mode 100644 docs/tutorial/group_stack/03_a.js create mode 100644 docs/tutorial/group_stack/03_b.js create mode 100644 docs/tutorial/group_stack/04_a.js create mode 100644 docs/tutorial/group_stack/04_b.js create mode 100644 docs/tutorial/group_stack/config.json diff --git a/docs/tutorial/group_stack.js b/docs/tutorial/group_stack.js deleted file mode 100644 index 7270deebe..000000000 --- a/docs/tutorial/group_stack.js +++ /dev/null @@ -1,102 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Creating a stacked chart', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - attach: 'Kinds' - }, - color: { - attach: 'Kinds' - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: '...then you can add it to another channel = group elements' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { detach: 'Kinds' }, - x: { attach: 'Kinds' } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Regrouping the chart' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { set: ['Kinds', 'Genres'] } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: '...doing it the other way is how you stack your chart' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { detach: 'Kinds' }, - y: { attach: 'Kinds' } - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/group_stack.md b/docs/tutorial/group_stack.md index e0af181c8..08462e972 100644 --- a/docs/tutorial/group_stack.md +++ b/docs/tutorial/group_stack.md @@ -17,18 +17,7 @@ we also add the same dimension to the color channel. // {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript -chart.animate({ - config: { - channels: { - y: { - attach: ['Kinds'] - }, - color: { - attach: ['Kinds'] - } - } - } -}) +// {% include "tutorial/group_stack/01_b.js" %} ``` By detaching this newly added dimension from the y-axis and attaching it to the @@ -38,18 +27,7 @@ viewer.
```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Kinds'] - }, - x: { - attach: ['Kinds'] - } - } - } -}) +// {% include "tutorial/group_stack/02_b.js" %} ``` In order to change the category via which the elements are grouped, just change @@ -58,15 +36,7 @@ the order of the dimension with another one on the same axis.
```javascript -chart.animate({ - config: { - channels: { - x: { - set: ['Kinds', 'Genres'] - } - } - } -}) +// {% include "tutorial/group_stack/03_b.js" %} ``` To stack a grouped chart, you just have to do the same thing the other way @@ -75,18 +45,7 @@ around: detach the dimension from the x-axis and attach it to the y-axis.
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } -}) +// {% include "tutorial/group_stack/04_b.js" %} ``` - + diff --git a/docs/tutorial/group_stack/01_a.js b/docs/tutorial/group_stack/01_a.js new file mode 100644 index 000000000..4ccfaee7e --- /dev/null +++ b/docs/tutorial/group_stack/01_a.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + title: 'Creating a stacked chart', + channels: { + y: { set: 'Popularity' }, + x: { set: 'Genres' } + } + } +}) diff --git a/docs/tutorial/group_stack/01_b.js b/docs/tutorial/group_stack/01_b.js new file mode 100644 index 000000000..c443ba356 --- /dev/null +++ b/docs/tutorial/group_stack/01_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + attach: 'Kinds' + }, + color: { + attach: 'Kinds' + } + } + } +}) diff --git a/docs/tutorial/group_stack/02_a.js b/docs/tutorial/group_stack/02_a.js new file mode 100644 index 000000000..c70c0c116 --- /dev/null +++ b/docs/tutorial/group_stack/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: '...then you can add it to another channel = group elements' + } +}) diff --git a/docs/tutorial/group_stack/02_b.js b/docs/tutorial/group_stack/02_b.js new file mode 100644 index 000000000..0dd528c89 --- /dev/null +++ b/docs/tutorial/group_stack/02_b.js @@ -0,0 +1,8 @@ +chart.animate({ + config: { + channels: { + y: { detach: 'Kinds' }, + x: { attach: 'Kinds' } + } + } +}) diff --git a/docs/tutorial/group_stack/03_a.js b/docs/tutorial/group_stack/03_a.js new file mode 100644 index 000000000..bf026c377 --- /dev/null +++ b/docs/tutorial/group_stack/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Regrouping the chart' + } +}) diff --git a/docs/tutorial/group_stack/03_b.js b/docs/tutorial/group_stack/03_b.js new file mode 100644 index 000000000..56272b3a3 --- /dev/null +++ b/docs/tutorial/group_stack/03_b.js @@ -0,0 +1,7 @@ +chart.animate({ + config: { + channels: { + x: { set: ['Kinds', 'Genres'] } + } + } +}) diff --git a/docs/tutorial/group_stack/04_a.js b/docs/tutorial/group_stack/04_a.js new file mode 100644 index 000000000..934a11a13 --- /dev/null +++ b/docs/tutorial/group_stack/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: '...doing it the other way is how you stack your chart' + } +}) diff --git a/docs/tutorial/group_stack/04_b.js b/docs/tutorial/group_stack/04_b.js new file mode 100644 index 000000000..5e52e3425 --- /dev/null +++ b/docs/tutorial/group_stack/04_b.js @@ -0,0 +1,8 @@ +chart.animate({ + config: { + channels: { + x: { detach: 'Kinds' }, + y: { attach: 'Kinds' } + } + } +}) diff --git a/docs/tutorial/group_stack/config.json b/docs/tutorial/group_stack/config.json new file mode 100644 index 000000000..11cb28e94 --- /dev/null +++ b/docs/tutorial/group_stack/config.json @@ -0,0 +1,6 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"] +] From 47ce75f1988f29a27fc378ef18ecddf036544840 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 16:01:44 +0100 Subject: [PATCH 10/49] tutorial, rewrite sorting --- docs/tutorial/sorting.js | 119 ------------------------------ docs/tutorial/sorting.md | 44 ++--------- docs/tutorial/sorting/01_a.js | 11 +++ docs/tutorial/sorting/01_b.js | 5 ++ docs/tutorial/sorting/02_a.js | 5 ++ docs/tutorial/sorting/02_b.js | 5 ++ docs/tutorial/sorting/03_a.js | 5 ++ docs/tutorial/sorting/03_b.js | 6 ++ docs/tutorial/sorting/04_a.js | 5 ++ docs/tutorial/sorting/04_b.js | 12 +++ docs/tutorial/sorting/05_a.js | 5 ++ docs/tutorial/sorting/05_b.js | 9 +++ docs/tutorial/sorting/config.json | 7 ++ 13 files changed, 81 insertions(+), 157 deletions(-) delete mode 100644 docs/tutorial/sorting.js create mode 100644 docs/tutorial/sorting/01_a.js create mode 100644 docs/tutorial/sorting/01_b.js create mode 100644 docs/tutorial/sorting/02_a.js create mode 100644 docs/tutorial/sorting/02_b.js create mode 100644 docs/tutorial/sorting/03_a.js create mode 100644 docs/tutorial/sorting/03_b.js create mode 100644 docs/tutorial/sorting/04_a.js create mode 100644 docs/tutorial/sorting/04_b.js create mode 100644 docs/tutorial/sorting/05_a.js create mode 100644 docs/tutorial/sorting/05_b.js create mode 100644 docs/tutorial/sorting/config.json diff --git a/docs/tutorial/sorting.js b/docs/tutorial/sorting.js deleted file mode 100644 index 5e30c4df9..000000000 --- a/docs/tutorial/sorting.js +++ /dev/null @@ -1,119 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Switch to ascending order...', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - sort: 'byValue' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: '...or descending order.' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - reverse: true - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: "Let's get back to where we were" - } - }) - }, - (chart) => { - return chart.animate({ - config: { - sort: 'none', - reverse: false - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'With two discretes on one axis...' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - detach: 'Kinds' - }, - x: { - set: ['Genres', 'Kinds'] - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: '...grouping is determined by their order.' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { - set: ['Kinds', 'Genres'] - } - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/sorting.md b/docs/tutorial/sorting.md index 8594abc06..42ddc39a2 100644 --- a/docs/tutorial/sorting.md +++ b/docs/tutorial/sorting.md @@ -16,11 +16,7 @@ ascending order. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - config: { - sort: 'byValue' - } -}) +// {% include "tutorial/sorting/01_b.js" %} ``` If you want descending order instead, you have to set the `reverse` parameter to @@ -30,11 +26,7 @@ in the opposite order than they are in the data set added to `Vizzu`.
```javascript -chart.animate({ - config: { - reverse: true - } -}) +// {% include "tutorial/sorting/02_b.js" %} ``` This is how to switch back to the default sorting. @@ -42,12 +34,7 @@ This is how to switch back to the default sorting.
```javascript -chart.animate({ - config: { - sort: 'none', - reverse: false - } -}) +// {% include "tutorial/sorting/03_b.js" %} ``` When you have more than one dimension on a channel, their order determines how @@ -57,18 +44,7 @@ organized by `Genres`, and then we have one bar for each of `Kinds`.
```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Kinds'] - }, - x: { - set: ['Genres', 'Kinds'] - } - } - } -}) +// {% include "tutorial/sorting/04_b.js" %} ``` When switching the order of dimensions on the x-axis `Vizzu` will rearrange the @@ -80,15 +56,7 @@ elements according to this new logic.
```javascript -chart.animate({ - config: { - channels: { - x: { - set: ['Kinds', 'Genres'] - }, - } - } -}) +// {% include "tutorial/sorting/05_b.js" %} ``` - + diff --git a/docs/tutorial/sorting/01_a.js b/docs/tutorial/sorting/01_a.js new file mode 100644 index 000000000..5ebedc446 --- /dev/null +++ b/docs/tutorial/sorting/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Switch to ascending order...', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/sorting/01_b.js b/docs/tutorial/sorting/01_b.js new file mode 100644 index 000000000..73ed51884 --- /dev/null +++ b/docs/tutorial/sorting/01_b.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + sort: 'byValue' + } +}) diff --git a/docs/tutorial/sorting/02_a.js b/docs/tutorial/sorting/02_a.js new file mode 100644 index 000000000..dc9700c3f --- /dev/null +++ b/docs/tutorial/sorting/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: '...or descending order.' + } +}) diff --git a/docs/tutorial/sorting/02_b.js b/docs/tutorial/sorting/02_b.js new file mode 100644 index 000000000..2e0b46120 --- /dev/null +++ b/docs/tutorial/sorting/02_b.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + reverse: true + } +}) diff --git a/docs/tutorial/sorting/03_a.js b/docs/tutorial/sorting/03_a.js new file mode 100644 index 000000000..6a54b6984 --- /dev/null +++ b/docs/tutorial/sorting/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: "Let's get back to where we were" + } +}) diff --git a/docs/tutorial/sorting/03_b.js b/docs/tutorial/sorting/03_b.js new file mode 100644 index 000000000..87913115d --- /dev/null +++ b/docs/tutorial/sorting/03_b.js @@ -0,0 +1,6 @@ +chart.animate({ + config: { + sort: 'none', + reverse: false + } +}) diff --git a/docs/tutorial/sorting/04_a.js b/docs/tutorial/sorting/04_a.js new file mode 100644 index 000000000..fde149644 --- /dev/null +++ b/docs/tutorial/sorting/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'With two discretes on one axis...' + } +}) diff --git a/docs/tutorial/sorting/04_b.js b/docs/tutorial/sorting/04_b.js new file mode 100644 index 000000000..c432c2ed1 --- /dev/null +++ b/docs/tutorial/sorting/04_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + detach: 'Kinds' + }, + x: { + set: ['Genres', 'Kinds'] + } + } + } +}) diff --git a/docs/tutorial/sorting/05_a.js b/docs/tutorial/sorting/05_a.js new file mode 100644 index 000000000..55ac1f67e --- /dev/null +++ b/docs/tutorial/sorting/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: '...grouping is determined by their order.' + } +}) diff --git a/docs/tutorial/sorting/05_b.js b/docs/tutorial/sorting/05_b.js new file mode 100644 index 000000000..0d83d5848 --- /dev/null +++ b/docs/tutorial/sorting/05_b.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + channels: { + x: { + set: ['Kinds', 'Genres'] + } + } + } +}) diff --git a/docs/tutorial/sorting/config.json b/docs/tutorial/sorting/config.json new file mode 100644 index 000000000..61cfe4435 --- /dev/null +++ b/docs/tutorial/sorting/config.json @@ -0,0 +1,7 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"] +] From eb9fe2724cca0f71d67ad07fd5b3b8687392441c Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 16:38:30 +0100 Subject: [PATCH 11/49] tutorial, rewrite align range --- docs/tutorial/align_range.js | 160 -------------------------- docs/tutorial/align_range.md | 73 ++---------- docs/tutorial/align_range/01_a.js | 11 ++ docs/tutorial/align_range/01_b.js | 10 ++ docs/tutorial/align_range/02_a.js | 5 + docs/tutorial/align_range/02_b.js | 5 + docs/tutorial/align_range/03_a.js | 5 + docs/tutorial/align_range/03_b.js | 10 ++ docs/tutorial/align_range/04_a.js | 5 + docs/tutorial/align_range/04_b.js | 11 ++ docs/tutorial/align_range/05_a.js | 5 + docs/tutorial/align_range/05_b.js | 12 ++ docs/tutorial/align_range/06_a.js | 5 + docs/tutorial/align_range/06_b.js | 17 +++ docs/tutorial/align_range/config.json | 8 ++ 15 files changed, 116 insertions(+), 226 deletions(-) delete mode 100644 docs/tutorial/align_range.js create mode 100644 docs/tutorial/align_range/01_a.js create mode 100644 docs/tutorial/align_range/01_b.js create mode 100644 docs/tutorial/align_range/02_a.js create mode 100644 docs/tutorial/align_range/02_b.js create mode 100644 docs/tutorial/align_range/03_a.js create mode 100644 docs/tutorial/align_range/03_b.js create mode 100644 docs/tutorial/align_range/04_a.js create mode 100644 docs/tutorial/align_range/04_b.js create mode 100644 docs/tutorial/align_range/05_a.js create mode 100644 docs/tutorial/align_range/05_b.js create mode 100644 docs/tutorial/align_range/06_a.js create mode 100644 docs/tutorial/align_range/06_b.js create mode 100644 docs/tutorial/align_range/config.json diff --git a/docs/tutorial/align_range.js b/docs/tutorial/align_range.js deleted file mode 100644 index 1b2b7c901..000000000 --- a/docs/tutorial/align_range.js +++ /dev/null @@ -1,160 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Align: center', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - align: 'center', - channels: { - y: { - labels: false - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Align: stretch = % view' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - align: 'stretch' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Align: none - default' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - align: 'none', - channels: { - y: { - labels: true - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Axis range set proportionally to shown values' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - range: { - max: '150%' - } - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Axis range set explicitly on an axis with discrete series' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { - range: { - min: -2, - max: 3 - } - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Back to the default ranges' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - range: { - max: 'auto' - } - }, - x: { - range: { - min: 'auto', - max: 'auto' - } - } - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/align_range.md b/docs/tutorial/align_range.md index f195d7fb9..0df9b1474 100644 --- a/docs/tutorial/align_range.md +++ b/docs/tutorial/align_range.md @@ -26,16 +26,7 @@ whereas on a bar chart, horizontally. Change align and configures the y axis labels to disappear during the animation. ```javascript -chart.animate({ - config: { - align: 'center', - channels: { - y: { - labels: false - } - } - } -}) +// {% include "tutorial/align_range/01_b.js" %} ``` Stretched alignment. This way the elements will proportionally fill the entire @@ -45,11 +36,7 @@ scale will also switch from values to percentages when used.
```javascript -chart.animate({ - config: { - align: 'stretch' - } -}) +// {% include "tutorial/align_range/02_b.js" %} ``` Getting back to the default alignment. @@ -57,16 +44,7 @@ Getting back to the default alignment.
```javascript -chart.animate({ - config: { - align: 'none', - channels: { - y: { - labels: true - } - } - } -}) +// {% include "tutorial/align_range/03_b.js" %} ``` You can set the range of an axis by setting the minimum and maximum values of @@ -78,17 +56,7 @@ the biggest element’s value.
```javascript -chart.animate({ - config: { - channels: { - y: { - range: { - max: '150%' - } - } - } - } -}) +// {% include "tutorial/align_range/04_b.js" %} ``` You can also set the range for an axis with a dimension on it. You can even use @@ -97,18 +65,7 @@ this feature to filter certain elements, just like in the following example.
```javascript -chart.animate({ - config: { - channels: { - x: { - range: { - min: -2, - max: 3 - } - } - } - } -}) +// {% include "tutorial/align_range/05_b.js" %} ``` Ranges have certain defaults depending on the chart's configuration, based on @@ -124,23 +81,7 @@ Whenever you want to set your ranges back to the default value, just set them to
```javascript -chart.animate({ - config: { - channels: { - x: { - range: { - min: 'auto', - max: 'auto' - } - }, - y: { - range: { - max: 'auto' - } - } - } - } -}) +// {% include "tutorial/align_range/06_b.js" %} ``` - + diff --git a/docs/tutorial/align_range/01_a.js b/docs/tutorial/align_range/01_a.js new file mode 100644 index 000000000..e73068309 --- /dev/null +++ b/docs/tutorial/align_range/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Align: center', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/align_range/01_b.js b/docs/tutorial/align_range/01_b.js new file mode 100644 index 000000000..c5c4e4813 --- /dev/null +++ b/docs/tutorial/align_range/01_b.js @@ -0,0 +1,10 @@ +chart.animate({ + config: { + align: 'center', + channels: { + y: { + labels: false + } + } + } +}) diff --git a/docs/tutorial/align_range/02_a.js b/docs/tutorial/align_range/02_a.js new file mode 100644 index 000000000..8a07ac13a --- /dev/null +++ b/docs/tutorial/align_range/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Align: stretch = % view' + } +}) diff --git a/docs/tutorial/align_range/02_b.js b/docs/tutorial/align_range/02_b.js new file mode 100644 index 000000000..aec3f6b80 --- /dev/null +++ b/docs/tutorial/align_range/02_b.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + align: 'stretch' + } +}) diff --git a/docs/tutorial/align_range/03_a.js b/docs/tutorial/align_range/03_a.js new file mode 100644 index 000000000..2afc9113d --- /dev/null +++ b/docs/tutorial/align_range/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Align: none - default' + } +}) diff --git a/docs/tutorial/align_range/03_b.js b/docs/tutorial/align_range/03_b.js new file mode 100644 index 000000000..109368056 --- /dev/null +++ b/docs/tutorial/align_range/03_b.js @@ -0,0 +1,10 @@ +chart.animate({ + config: { + align: 'none', + channels: { + y: { + labels: true + } + } + } +}) diff --git a/docs/tutorial/align_range/04_a.js b/docs/tutorial/align_range/04_a.js new file mode 100644 index 000000000..e9e75a48c --- /dev/null +++ b/docs/tutorial/align_range/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Axis range set proportionally to shown values' + } +}) diff --git a/docs/tutorial/align_range/04_b.js b/docs/tutorial/align_range/04_b.js new file mode 100644 index 000000000..a7ebadcf3 --- /dev/null +++ b/docs/tutorial/align_range/04_b.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + channels: { + y: { + range: { + max: '150%' + } + } + } + } +}) diff --git a/docs/tutorial/align_range/05_a.js b/docs/tutorial/align_range/05_a.js new file mode 100644 index 000000000..6e7465820 --- /dev/null +++ b/docs/tutorial/align_range/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Axis range set explicitly on an axis with discrete series' + } +}) diff --git a/docs/tutorial/align_range/05_b.js b/docs/tutorial/align_range/05_b.js new file mode 100644 index 000000000..f561b9001 --- /dev/null +++ b/docs/tutorial/align_range/05_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + x: { + range: { + min: -2, + max: 3 + } + } + } + } +}) diff --git a/docs/tutorial/align_range/06_a.js b/docs/tutorial/align_range/06_a.js new file mode 100644 index 000000000..57ec03577 --- /dev/null +++ b/docs/tutorial/align_range/06_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Back to the default ranges' + } +}) diff --git a/docs/tutorial/align_range/06_b.js b/docs/tutorial/align_range/06_b.js new file mode 100644 index 000000000..6ebab2d0e --- /dev/null +++ b/docs/tutorial/align_range/06_b.js @@ -0,0 +1,17 @@ +chart.animate({ + config: { + channels: { + y: { + range: { + max: 'auto' + } + }, + x: { + range: { + min: 'auto', + max: 'auto' + } + } + } + } +}) diff --git a/docs/tutorial/align_range/config.json b/docs/tutorial/align_range/config.json new file mode 100644 index 000000000..d9d51ca10 --- /dev/null +++ b/docs/tutorial/align_range/config.json @@ -0,0 +1,8 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"], + ["06_a", "06_b"] +] From 979cdef0d30907b05bd4de93891fd7678c2705bb Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 16:46:58 +0100 Subject: [PATCH 12/49] tutorial, rewrite changing dimensions --- docs/tutorial/changing_dimensions.js | 128 ------------------ docs/tutorial/changing_dimensions.md | 67 +-------- docs/tutorial/changing_dimensions/01_a.js | 11 ++ docs/tutorial/changing_dimensions/01_b.js | 9 ++ docs/tutorial/changing_dimensions/02_a.js | 5 + docs/tutorial/changing_dimensions/02_b.js | 9 ++ docs/tutorial/changing_dimensions/03_a.js | 5 + docs/tutorial/changing_dimensions/03_b.js | 10 ++ docs/tutorial/changing_dimensions/04_a.js | 5 + docs/tutorial/changing_dimensions/04_b.js | 10 ++ docs/tutorial/changing_dimensions/05_a.js | 5 + docs/tutorial/changing_dimensions/05_b.js | 8 ++ docs/tutorial/changing_dimensions/config.json | 7 + 13 files changed, 90 insertions(+), 189 deletions(-) delete mode 100644 docs/tutorial/changing_dimensions.js create mode 100644 docs/tutorial/changing_dimensions/01_a.js create mode 100644 docs/tutorial/changing_dimensions/01_b.js create mode 100644 docs/tutorial/changing_dimensions/02_a.js create mode 100644 docs/tutorial/changing_dimensions/02_b.js create mode 100644 docs/tutorial/changing_dimensions/03_a.js create mode 100644 docs/tutorial/changing_dimensions/03_b.js create mode 100644 docs/tutorial/changing_dimensions/04_a.js create mode 100644 docs/tutorial/changing_dimensions/04_b.js create mode 100644 docs/tutorial/changing_dimensions/05_a.js create mode 100644 docs/tutorial/changing_dimensions/05_b.js create mode 100644 docs/tutorial/changing_dimensions/config.json diff --git a/docs/tutorial/changing_dimensions.js b/docs/tutorial/changing_dimensions.js deleted file mode 100644 index e183f3757..000000000 --- a/docs/tutorial/changing_dimensions.js +++ /dev/null @@ -1,128 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Aggregate', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { - set: null - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Changing dimensions' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { detach: ['Kinds'] }, - x: { set: ['Genres'] }, - color: { set: null } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Changing dimensions by drilling down' - } - }) - }, - (chart) => { - return chart.animate( - { - config: { - channels: { - x: { detach: ['Genres'], attach: ['Kinds'] } - } - } - }, - { regroupStrategy: 'drilldown' } - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Changing dimensions with fading' - } - }) - }, - (chart) => { - return chart.animate( - { - config: { - channels: { - x: { detach: ['Kinds'], attach: ['Genres'] } - } - } - }, - { regroupStrategy: 'fade' } - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Drill-down' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { attach: ['Kinds'] }, - color: { set: ['Kinds'] } - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/changing_dimensions.md b/docs/tutorial/changing_dimensions.md index 6753e7e04..19e6ecc77 100644 --- a/docs/tutorial/changing_dimensions.md +++ b/docs/tutorial/changing_dimensions.md @@ -18,15 +18,7 @@ elements. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - config: { - channels: { - x: { - set: null - } - } - } -}) +// {% include "tutorial/changing_dimensions/01_b.js" %} ``` When you simultaneously add and remove dimensions, the partitioning of the @@ -39,21 +31,7 @@ then drilled down to the target state, as shown below.
```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Kinds'] - }, - x: { - set: ['Genres'] - }, - color: { - set: null - }, - } - } -}) +// {% include "tutorial/changing_dimensions/02_b.js" %} ``` You can change this setting and drill down to the union of the two states @@ -62,18 +40,7 @@ instead, and then aggregate to the target state:
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Genres'], - attach: ['Kinds'] - } - } - } -}, { - regroupStrategy: 'drilldown' -}) +// {% include "tutorial/changing_dimensions/03_b.js" %} ``` There is also the option to fade the chart between the states: @@ -81,18 +48,7 @@ There is also the option to fade the chart between the states:
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Kinds'], - attach: ['Genres'] - } - } - } -}, { - regroupStrategy: 'fade' -}) +// {% include "tutorial/changing_dimensions/04_b.js" %} ``` To simply drill down, the same dimension is put back on the y-axis. @@ -100,18 +56,7 @@ To simply drill down, the same dimension is put back on the y-axis.
```javascript -chart.animate({ - config: { - channels: { - y: { - attach: ['Kinds'] - }, - color: { - set: ['Kinds'] - } - } - } -}) +// {% include "tutorial/changing_dimensions/05_b.js" %} ``` - + diff --git a/docs/tutorial/changing_dimensions/01_a.js b/docs/tutorial/changing_dimensions/01_a.js new file mode 100644 index 000000000..6b1522f04 --- /dev/null +++ b/docs/tutorial/changing_dimensions/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Aggregate', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/changing_dimensions/01_b.js b/docs/tutorial/changing_dimensions/01_b.js new file mode 100644 index 000000000..fb974f72a --- /dev/null +++ b/docs/tutorial/changing_dimensions/01_b.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + channels: { + x: { + set: null + } + } + } +}) diff --git a/docs/tutorial/changing_dimensions/02_a.js b/docs/tutorial/changing_dimensions/02_a.js new file mode 100644 index 000000000..31de56ca6 --- /dev/null +++ b/docs/tutorial/changing_dimensions/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Changing dimensions' + } +}) diff --git a/docs/tutorial/changing_dimensions/02_b.js b/docs/tutorial/changing_dimensions/02_b.js new file mode 100644 index 000000000..4643b7f3c --- /dev/null +++ b/docs/tutorial/changing_dimensions/02_b.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + channels: { + y: { detach: ['Kinds'] }, + x: { set: ['Genres'] }, + color: { set: null } + } + } +}) diff --git a/docs/tutorial/changing_dimensions/03_a.js b/docs/tutorial/changing_dimensions/03_a.js new file mode 100644 index 000000000..ea17bb035 --- /dev/null +++ b/docs/tutorial/changing_dimensions/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Changing dimensions by drilling down' + } +}) diff --git a/docs/tutorial/changing_dimensions/03_b.js b/docs/tutorial/changing_dimensions/03_b.js new file mode 100644 index 000000000..972598b16 --- /dev/null +++ b/docs/tutorial/changing_dimensions/03_b.js @@ -0,0 +1,10 @@ +chart.animate( + { + config: { + channels: { + x: { detach: ['Genres'], attach: ['Kinds'] } + } + } + }, + { regroupStrategy: 'drilldown' } +) diff --git a/docs/tutorial/changing_dimensions/04_a.js b/docs/tutorial/changing_dimensions/04_a.js new file mode 100644 index 000000000..54c9edf4c --- /dev/null +++ b/docs/tutorial/changing_dimensions/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Changing dimensions with fading' + } +}) diff --git a/docs/tutorial/changing_dimensions/04_b.js b/docs/tutorial/changing_dimensions/04_b.js new file mode 100644 index 000000000..fb625200f --- /dev/null +++ b/docs/tutorial/changing_dimensions/04_b.js @@ -0,0 +1,10 @@ +chart.animate( + { + config: { + channels: { + x: { detach: ['Kinds'], attach: ['Genres'] } + } + } + }, + { regroupStrategy: 'fade' } +) diff --git a/docs/tutorial/changing_dimensions/05_a.js b/docs/tutorial/changing_dimensions/05_a.js new file mode 100644 index 000000000..71268e48d --- /dev/null +++ b/docs/tutorial/changing_dimensions/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Drill-down' + } +}) diff --git a/docs/tutorial/changing_dimensions/05_b.js b/docs/tutorial/changing_dimensions/05_b.js new file mode 100644 index 000000000..120b92624 --- /dev/null +++ b/docs/tutorial/changing_dimensions/05_b.js @@ -0,0 +1,8 @@ +chart.animate({ + config: { + channels: { + y: { attach: ['Kinds'] }, + color: { set: ['Kinds'] } + } + } +}) diff --git a/docs/tutorial/changing_dimensions/config.json b/docs/tutorial/changing_dimensions/config.json new file mode 100644 index 000000000..61cfe4435 --- /dev/null +++ b/docs/tutorial/changing_dimensions/config.json @@ -0,0 +1,7 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"] +] From 1ab1d1b7f22c9021b4ee35ed1bc5b1f6fc8f35f9 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 16:56:32 +0100 Subject: [PATCH 13/49] tutorial, rewrite orientation split polar --- docs/tutorial/orientation_split_polar.md | 50 +++---------------- docs/tutorial/orientation_split_polar/01_a.js | 11 ++++ docs/tutorial/orientation_split_polar/01_b.js | 12 +++++ docs/tutorial/orientation_split_polar/02_a.js | 5 ++ docs/tutorial/orientation_split_polar/02_b.js | 5 ++ docs/tutorial/orientation_split_polar/03_a.js | 5 ++ docs/tutorial/orientation_split_polar/03_b.js | 5 ++ docs/tutorial/orientation_split_polar/04_a.js | 5 ++ docs/tutorial/orientation_split_polar/04_b.js | 9 ++++ docs/tutorial/orientation_split_polar/05_a.js | 5 ++ docs/tutorial/orientation_split_polar/05_b.js | 12 +++++ .../orientation_split_polar/config.json | 7 +++ 12 files changed, 87 insertions(+), 44 deletions(-) create mode 100644 docs/tutorial/orientation_split_polar/01_a.js create mode 100644 docs/tutorial/orientation_split_polar/01_b.js create mode 100644 docs/tutorial/orientation_split_polar/02_a.js create mode 100644 docs/tutorial/orientation_split_polar/02_b.js create mode 100644 docs/tutorial/orientation_split_polar/03_a.js create mode 100644 docs/tutorial/orientation_split_polar/03_b.js create mode 100644 docs/tutorial/orientation_split_polar/04_a.js create mode 100644 docs/tutorial/orientation_split_polar/04_b.js create mode 100644 docs/tutorial/orientation_split_polar/05_a.js create mode 100644 docs/tutorial/orientation_split_polar/05_b.js create mode 100644 docs/tutorial/orientation_split_polar/config.json diff --git a/docs/tutorial/orientation_split_polar.md b/docs/tutorial/orientation_split_polar.md index d10fd3adc..770d4729d 100644 --- a/docs/tutorial/orientation_split_polar.md +++ b/docs/tutorial/orientation_split_polar.md @@ -17,18 +17,7 @@ only use temporarily. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Popularity'] - }, - x: { - attach: ['Popularity'] - } - } - } -}) +// {% include "tutorial/orientation_split_polar/01_b.js" %} ``` By turning the split parameter on, you can see stacked elements side-by-side, @@ -37,11 +26,7 @@ which enables the comparison of the components.
```javascript -chart.animate({ - config: { - split: true - } -}) +// {% include "tutorial/orientation_split_polar/02_b.js" %} ``` Merging the components by turning the split parameter off. @@ -49,11 +34,7 @@ Merging the components by turning the split parameter off.
```javascript -chart.animate({ - config: { - split: false - } -}) +// {% include "tutorial/orientation_split_polar/03_b.js" %} ``` We aggregate the data by removing the `Genres` dimension from the x-axis. @@ -61,15 +42,7 @@ We aggregate the data by removing the `Genres` dimension from the x-axis.
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Genres'] - } - } - } -}) +// {% include "tutorial/orientation_split_polar/04_b.js" %} ``` Switching from cartesian coordinates to polar. When doing so, it is worth @@ -84,18 +57,7 @@ coordinates, just set the `coordSystem` parameter to `'cartesian'`.
```javascript -chart.animate({ - config: { - channels: { - y: { - range: { - min: '-30%' - } - } - }, - coordSystem: 'polar' - } -}) +// {% include "tutorial/orientation_split_polar/05_b.js" %} ``` - + diff --git a/docs/tutorial/orientation_split_polar/01_a.js b/docs/tutorial/orientation_split_polar/01_a.js new file mode 100644 index 000000000..aae09050d --- /dev/null +++ b/docs/tutorial/orientation_split_polar/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Switch the orientation = arrange by other axis', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/orientation_split_polar/01_b.js b/docs/tutorial/orientation_split_polar/01_b.js new file mode 100644 index 000000000..f3415d1d2 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/01_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + detach: 'Popularity' + }, + x: { + attach: 'Popularity' + } + } + } +}) diff --git a/docs/tutorial/orientation_split_polar/02_a.js b/docs/tutorial/orientation_split_polar/02_a.js new file mode 100644 index 000000000..0bf697e4f --- /dev/null +++ b/docs/tutorial/orientation_split_polar/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Split stacked values = show side-by-side' + } +}) diff --git a/docs/tutorial/orientation_split_polar/02_b.js b/docs/tutorial/orientation_split_polar/02_b.js new file mode 100644 index 000000000..d5d2f52a5 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/02_b.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + split: true + } +}) diff --git a/docs/tutorial/orientation_split_polar/03_a.js b/docs/tutorial/orientation_split_polar/03_a.js new file mode 100644 index 000000000..0c86d1b79 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Merge' + } +}) diff --git a/docs/tutorial/orientation_split_polar/03_b.js b/docs/tutorial/orientation_split_polar/03_b.js new file mode 100644 index 000000000..b190b1e34 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/03_b.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + split: false + } +}) diff --git a/docs/tutorial/orientation_split_polar/04_a.js b/docs/tutorial/orientation_split_polar/04_a.js new file mode 100644 index 000000000..57dd68418 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Aggregate' + } +}) diff --git a/docs/tutorial/orientation_split_polar/04_b.js b/docs/tutorial/orientation_split_polar/04_b.js new file mode 100644 index 000000000..989331030 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/04_b.js @@ -0,0 +1,9 @@ +chart.animate({ + config: { + channels: { + x: { + detach: 'Genres' + } + } + } +}) diff --git a/docs/tutorial/orientation_split_polar/05_a.js b/docs/tutorial/orientation_split_polar/05_a.js new file mode 100644 index 000000000..26bc6b9e7 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Polar coordinates' + } +}) diff --git a/docs/tutorial/orientation_split_polar/05_b.js b/docs/tutorial/orientation_split_polar/05_b.js new file mode 100644 index 000000000..c8c0ca524 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/05_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + range: { + min: '-30%' + } + } + }, + coordSystem: 'polar' + } +}) diff --git a/docs/tutorial/orientation_split_polar/config.json b/docs/tutorial/orientation_split_polar/config.json new file mode 100644 index 000000000..61cfe4435 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/config.json @@ -0,0 +1,7 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"] +] From 78b1394d0986cf6c637123ee59aff58f7451868d Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 17:01:42 +0100 Subject: [PATCH 14/49] tutorial, rewrite without coordinates --- .../without_coordinates_noop_channel.js | 88 ------------------- .../without_coordinates_noop_channel.md | 37 +------- .../without_coordinates_noop_channel/01_a.js | 11 +++ .../without_coordinates_noop_channel/01_b.js | 15 ++++ .../without_coordinates_noop_channel/02_a.js | 5 ++ .../without_coordinates_noop_channel/02_b.js | 5 ++ .../without_coordinates_noop_channel/03_a.js | 5 ++ .../without_coordinates_noop_channel/03_b.js | 12 +++ .../config.json | 5 ++ 9 files changed, 62 insertions(+), 121 deletions(-) delete mode 100644 docs/tutorial/without_coordinates_noop_channel.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/01_a.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/01_b.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/02_a.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/02_b.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/03_a.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/03_b.js create mode 100644 docs/tutorial/without_coordinates_noop_channel/config.json diff --git a/docs/tutorial/without_coordinates_noop_channel.js b/docs/tutorial/without_coordinates_noop_channel.js deleted file mode 100644 index 9ad5d44a1..000000000 --- a/docs/tutorial/without_coordinates_noop_channel.js +++ /dev/null @@ -1,88 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Treemap', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - set: null - }, - x: { - set: null - }, - size: { - attach: ['Genres', 'Popularity'] - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Bubble chart - stacked' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - geometry: 'circle' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Bubble chart - grouped - using the noop channel' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - size: { - detach: 'Genres' - }, - noop: { - set: 'Genres' - } - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/without_coordinates_noop_channel.md b/docs/tutorial/without_coordinates_noop_channel.md index f021dbc8d..02aa1a7c2 100644 --- a/docs/tutorial/without_coordinates_noop_channel.md +++ b/docs/tutorial/without_coordinates_noop_channel.md @@ -17,21 +17,7 @@ still on the `color` channel. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - config: { - channels: { - y: { - set: null - }, - x: { - set: null - }, - size: { - attach: ['Genres', 'Popularity'] - } - } - } -}) +// {% include "tutorial/without_coordinates_noop_channel/01_b.js" %} ``` Getting from a treemap to a bubble chart is simply by changing the geometry to @@ -41,11 +27,7 @@ circle. This bubble chart is stacked by the `Kinds` dimension that is on the
```javascript -chart.animate({ - config: { - geometry: 'circle' - } -}) +// {% include "tutorial/without_coordinates_noop_channel/02_b.js" %} ``` In order to show all bubbles as one group, we use the `noop` (no operations) @@ -56,18 +38,7 @@ their count.
```javascript -chart.animate({ - config: { - channels: { - size: { - detach: ['Genres'] - }, - noop: { - set: ['Genres'] - } - } - } -}) +// {% include "tutorial/without_coordinates_noop_channel/03_b.js" %} ``` - + diff --git a/docs/tutorial/without_coordinates_noop_channel/01_a.js b/docs/tutorial/without_coordinates_noop_channel/01_a.js new file mode 100644 index 000000000..6429e4ab3 --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Treemap', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/without_coordinates_noop_channel/01_b.js b/docs/tutorial/without_coordinates_noop_channel/01_b.js new file mode 100644 index 000000000..b3f496611 --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/01_b.js @@ -0,0 +1,15 @@ +chart.animate({ + config: { + channels: { + y: { + set: null + }, + x: { + set: null + }, + size: { + attach: ['Genres', 'Popularity'] + } + } + } +}) diff --git a/docs/tutorial/without_coordinates_noop_channel/02_a.js b/docs/tutorial/without_coordinates_noop_channel/02_a.js new file mode 100644 index 000000000..6ed086cee --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Bubble chart - stacked' + } +}) diff --git a/docs/tutorial/without_coordinates_noop_channel/02_b.js b/docs/tutorial/without_coordinates_noop_channel/02_b.js new file mode 100644 index 000000000..25ce255bf --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/02_b.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + geometry: 'circle' + } +}) diff --git a/docs/tutorial/without_coordinates_noop_channel/03_a.js b/docs/tutorial/without_coordinates_noop_channel/03_a.js new file mode 100644 index 000000000..4fa0261a0 --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Bubble chart - grouped - using the noop channel' + } +}) diff --git a/docs/tutorial/without_coordinates_noop_channel/03_b.js b/docs/tutorial/without_coordinates_noop_channel/03_b.js new file mode 100644 index 000000000..fbb52120c --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/03_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + size: { + detach: 'Genres' + }, + noop: { + set: 'Genres' + } + } + } +}) diff --git a/docs/tutorial/without_coordinates_noop_channel/config.json b/docs/tutorial/without_coordinates_noop_channel/config.json new file mode 100644 index 000000000..2c44e04bd --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/config.json @@ -0,0 +1,5 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"] +] From cdc388741cf71ea4ab4bc246a213035e4f0125b1 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 30 Oct 2024 17:03:20 +0100 Subject: [PATCH 15/49] tutorial, remove old js --- docs/tutorial/orientation_split_polar.js | 125 ----------------------- 1 file changed, 125 deletions(-) delete mode 100644 docs/tutorial/orientation_split_polar.js diff --git a/docs/tutorial/orientation_split_polar.js b/docs/tutorial/orientation_split_polar.js deleted file mode 100644 index 0e2fca85b..000000000 --- a/docs/tutorial/orientation_split_polar.js +++ /dev/null @@ -1,125 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Switch the orientation = arrange by other axis', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - detach: 'Popularity' - }, - x: { - attach: 'Popularity' - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Split stacked values = show side-by-side' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - split: true - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Merge' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - split: false - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Aggregate' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { - detach: 'Genres' - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Polar coordinates' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - range: { - min: '-30%' - } - } - }, - coordSystem: 'polar' - } - }) - } - ] - } - ]) -}) From 3b76c705b00729dcabeaa76a15e64ad1e8315147 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 09:51:41 +0100 Subject: [PATCH 16/49] tutorial, rewrite color palette fonts --- docs/tutorial/color_palette_fonts.js | 117 ------------------ docs/tutorial/color_palette_fonts.md | 40 ++---- docs/tutorial/color_palette_fonts/01_a.js | 11 ++ docs/tutorial/color_palette_fonts/01_b.js | 9 ++ docs/tutorial/color_palette_fonts/01_c.js | 1 + docs/tutorial/color_palette_fonts/02_a.js | 5 + docs/tutorial/color_palette_fonts/02_b.js | 7 ++ docs/tutorial/color_palette_fonts/03_a.js | 5 + docs/tutorial/color_palette_fonts/03_b.js | 7 ++ docs/tutorial/color_palette_fonts/04_a.js | 5 + docs/tutorial/color_palette_fonts/04_b.js | 5 + docs/tutorial/color_palette_fonts/05_a.js | 5 + docs/tutorial/color_palette_fonts/05_b.js | 3 + docs/tutorial/color_palette_fonts/config.json | 7 ++ 14 files changed, 77 insertions(+), 150 deletions(-) delete mode 100644 docs/tutorial/color_palette_fonts.js create mode 100644 docs/tutorial/color_palette_fonts/01_a.js create mode 100644 docs/tutorial/color_palette_fonts/01_b.js create mode 100644 docs/tutorial/color_palette_fonts/01_c.js create mode 100644 docs/tutorial/color_palette_fonts/02_a.js create mode 100644 docs/tutorial/color_palette_fonts/02_b.js create mode 100644 docs/tutorial/color_palette_fonts/03_a.js create mode 100644 docs/tutorial/color_palette_fonts/03_b.js create mode 100644 docs/tutorial/color_palette_fonts/04_a.js create mode 100644 docs/tutorial/color_palette_fonts/04_b.js create mode 100644 docs/tutorial/color_palette_fonts/05_a.js create mode 100644 docs/tutorial/color_palette_fonts/05_b.js create mode 100644 docs/tutorial/color_palette_fonts/config.json diff --git a/docs/tutorial/color_palette_fonts.js b/docs/tutorial/color_palette_fonts.js deleted file mode 100644 index 32915436b..000000000 --- a/docs/tutorial/color_palette_fonts.js +++ /dev/null @@ -1,117 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Color palette', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - style: { - plot: { - marker: { - colorPalette: '#9355e8FF #123456FF #BDAF10FF' - } - } - } - }) - }, - (chart) => { - console.log(chart.style) // eslint-disable-line no-console - return chart - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Title font size' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - title: { - fontSize: 50 - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Title font size - back to default' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - title: { - fontSize: null - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Setting all font sizes in one step' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - fontSize: 20 - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Setting all style settings back to default' - } - }) - }, - (chart) => { - return chart.animate({ - style: null - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/color_palette_fonts.md b/docs/tutorial/color_palette_fonts.md index 9517b8f7e..65c29d907 100644 --- a/docs/tutorial/color_palette_fonts.md +++ b/docs/tutorial/color_palette_fonts.md @@ -24,21 +24,13 @@ you should add // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - style: { - plot: { - marker: { - colorPalette: '#9355e8FF #123456FF #BDAF10FF' - } - } - } -}) +// {% include "tutorial/color_palette_fonts/01_b.js" %} ``` The actual style settings of the chart can be accessed via the `style` property. ```javascript -console.log(chart.style); +// {% include "tutorial/color_palette_fonts/01_c.js" %} ``` Changing the title font size will only affect the title; all other font sizes @@ -47,13 +39,7 @@ remain the same. `CSS` version: `--vizzu-title-fontSize: 50;`.
```javascript -chart.animate({ - style: { - title: { - fontSize: 50 - } - } -}) +// {% include "tutorial/color_palette_fonts/02_b.js" %} ``` This is how to set the font size back to its default value. @@ -61,13 +47,7 @@ This is how to set the font size back to its default value.
```javascript -chart.animate({ - style: { - title: { - fontSize: null - } - } -}) +// {% include "tutorial/color_palette_fonts/03_b.js" %} ``` In case you change the font size of the whole chart with the top-level @@ -77,11 +57,7 @@ proportionally. The size refers to the font size of the axis labels by default.
```javascript -chart.animate({ - style: { - fontSize: 20 - } -}) +// {% include "tutorial/color_palette_fonts/04_b.js" %} ``` You can reset styles to default on any levels by setting them to `null`. @@ -89,12 +65,10 @@ You can reset styles to default on any levels by setting them to `null`.
```javascript -chart.animate({ - style: null -}) +// {% include "tutorial/color_palette_fonts/05_b.js" %} ``` For information on all available style parameters see the [Style](./style.md) chapter. - + diff --git a/docs/tutorial/color_palette_fonts/01_a.js b/docs/tutorial/color_palette_fonts/01_a.js new file mode 100644 index 000000000..fb24a8a6c --- /dev/null +++ b/docs/tutorial/color_palette_fonts/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Color palette', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/color_palette_fonts/01_b.js b/docs/tutorial/color_palette_fonts/01_b.js new file mode 100644 index 000000000..0b97e0396 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/01_b.js @@ -0,0 +1,9 @@ +chart.animate({ + style: { + plot: { + marker: { + colorPalette: '#9355e8FF #123456FF #BDAF10FF' + } + } + } +}) diff --git a/docs/tutorial/color_palette_fonts/01_c.js b/docs/tutorial/color_palette_fonts/01_c.js new file mode 100644 index 000000000..7abf36771 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/01_c.js @@ -0,0 +1 @@ +console.log(chart.style) diff --git a/docs/tutorial/color_palette_fonts/02_a.js b/docs/tutorial/color_palette_fonts/02_a.js new file mode 100644 index 000000000..1d4c8df4d --- /dev/null +++ b/docs/tutorial/color_palette_fonts/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Title font size' + } +}) diff --git a/docs/tutorial/color_palette_fonts/02_b.js b/docs/tutorial/color_palette_fonts/02_b.js new file mode 100644 index 000000000..6b39d3444 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/02_b.js @@ -0,0 +1,7 @@ +chart.animate({ + style: { + title: { + fontSize: 50 + } + } +}) diff --git a/docs/tutorial/color_palette_fonts/03_a.js b/docs/tutorial/color_palette_fonts/03_a.js new file mode 100644 index 000000000..ac5068ff4 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Title font size - back to default' + } +}) diff --git a/docs/tutorial/color_palette_fonts/03_b.js b/docs/tutorial/color_palette_fonts/03_b.js new file mode 100644 index 000000000..0f0f3caab --- /dev/null +++ b/docs/tutorial/color_palette_fonts/03_b.js @@ -0,0 +1,7 @@ +chart.animate({ + style: { + title: { + fontSize: null + } + } +}) diff --git a/docs/tutorial/color_palette_fonts/04_a.js b/docs/tutorial/color_palette_fonts/04_a.js new file mode 100644 index 000000000..16204de44 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Setting all font sizes in one step' + } +}) diff --git a/docs/tutorial/color_palette_fonts/04_b.js b/docs/tutorial/color_palette_fonts/04_b.js new file mode 100644 index 000000000..85afa5d05 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/04_b.js @@ -0,0 +1,5 @@ +chart.animate({ + style: { + fontSize: 20 + } +}) diff --git a/docs/tutorial/color_palette_fonts/05_a.js b/docs/tutorial/color_palette_fonts/05_a.js new file mode 100644 index 000000000..07c47a21b --- /dev/null +++ b/docs/tutorial/color_palette_fonts/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Setting all style settings back to default' + } +}) diff --git a/docs/tutorial/color_palette_fonts/05_b.js b/docs/tutorial/color_palette_fonts/05_b.js new file mode 100644 index 000000000..3b70ff723 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/05_b.js @@ -0,0 +1,3 @@ +chart.animate({ + style: null +}) diff --git a/docs/tutorial/color_palette_fonts/config.json b/docs/tutorial/color_palette_fonts/config.json new file mode 100644 index 000000000..e3b8e5ee7 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/config.json @@ -0,0 +1,7 @@ +[ + ["01_a", "01_b", { "name": "01_c", "returnOriginal": true }], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"] +] From f1d2358a9a8534bfd70b56453540b7a8e1ae2d2c Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 09:59:58 +0100 Subject: [PATCH 17/49] tutorial, rewirte chart layout --- docs/tutorial/chart_layout.js | 146 ------------------------- docs/tutorial/chart_layout.md | 68 ++---------- docs/tutorial/chart_layout/01_a.js | 11 ++ docs/tutorial/chart_layout/01_b.js | 11 ++ docs/tutorial/chart_layout/02_a.js | 5 + docs/tutorial/chart_layout/02_b.js | 7 ++ docs/tutorial/chart_layout/03.js | 7 ++ docs/tutorial/chart_layout/04_a.js | 5 + docs/tutorial/chart_layout/04_b.js | 9 ++ docs/tutorial/chart_layout/05.js | 9 ++ docs/tutorial/chart_layout/06_a.js | 5 + docs/tutorial/chart_layout/06_b.js | 8 ++ docs/tutorial/chart_layout/07.js | 8 ++ docs/tutorial/chart_layout/config.json | 1 + 14 files changed, 94 insertions(+), 206 deletions(-) delete mode 100644 docs/tutorial/chart_layout.js create mode 100644 docs/tutorial/chart_layout/01_a.js create mode 100644 docs/tutorial/chart_layout/01_b.js create mode 100644 docs/tutorial/chart_layout/02_a.js create mode 100644 docs/tutorial/chart_layout/02_b.js create mode 100644 docs/tutorial/chart_layout/03.js create mode 100644 docs/tutorial/chart_layout/04_a.js create mode 100644 docs/tutorial/chart_layout/04_b.js create mode 100644 docs/tutorial/chart_layout/05.js create mode 100644 docs/tutorial/chart_layout/06_a.js create mode 100644 docs/tutorial/chart_layout/06_b.js create mode 100644 docs/tutorial/chart_layout/07.js create mode 100644 docs/tutorial/chart_layout/config.json diff --git a/docs/tutorial/chart_layout.js b/docs/tutorial/chart_layout.js deleted file mode 100644 index 2b6349776..000000000 --- a/docs/tutorial/chart_layout.js +++ /dev/null @@ -1,146 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Plot, title and legend background', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - style: { - backgroundColor: '#A0A0A0', - plot: { - backgroundColor: '#D2D2D2' - }, - legend: { - backgroundColor: '#808080' - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Legend width' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - legend: { - width: 50 - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - style: { - legend: { - width: null - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Title padding' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - title: { - paddingTop: 20, - paddingBottom: 20, - paddingLeft: 200 - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - style: { - title: { - paddingTop: null, - paddingBottom: null, - paddingLeft: null - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Plot padding' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - plot: { - paddingLeft: 100, - paddingRight: 100 - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - style: { - plot: { - paddingLeft: null, - paddingRight: null - } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/chart_layout.md b/docs/tutorial/chart_layout.md index e018610fd..96b096e46 100644 --- a/docs/tutorial/chart_layout.md +++ b/docs/tutorial/chart_layout.md @@ -21,17 +21,7 @@ are aligned. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - style: { - backgroundColor: '#A0A0A0', - plot: { - backgroundColor: '#D2D2D2' - }, - legend: { - backgroundColor: '#808080' - }, - } -}) +// {% include "tutorial/chart_layout/01_b.js" %} ``` Setting the width of the legend. @@ -39,13 +29,7 @@ Setting the width of the legend.
```javascript -chart.animate({ - style: { - legend: { - width: 50 - } - } -}) +// {% include "tutorial/chart_layout/02_b.js" %} ``` Setting the legend width back to its default value. @@ -53,13 +37,7 @@ Setting the legend width back to its default value.
```javascript -chart.animate({ - style: { - legend: { - width: null - } - } -}) +// {% include "tutorial/chart_layout/03.js" %} ``` Changing the title paddings. By default, the title is horizontally centered @@ -69,15 +47,7 @@ the text moving to the right.
```javascript -chart.animate({ - style: { - title: { - paddingTop: 20, - paddingBottom: 20, - paddingLeft: 200 - } - } -}) +// {% include "tutorial/chart_layout/04_b.js" %} ``` Setting the title paddings back to their default values. @@ -85,15 +55,7 @@ Setting the title paddings back to their default values.
```javascript -chart.animate({ - style: { - title: { - paddingTop: null, - paddingBottom: null, - paddingLeft: null - } - } -}) +// {% include "tutorial/chart_layout/05.js" %} ``` Changing the paddings of the plot area to position the plot. The texts on the @@ -102,14 +64,7 @@ axes are drawn on the padding of the plot and not the plot itself.
```javascript -chart.animate({ - style: { - plot: { - paddingLeft: 100, - paddingRight: 100 - } - } -}) +// {% include "tutorial/chart_layout/06_b.js" %} ``` Setting the plot paddings back to their default values. @@ -117,14 +72,7 @@ Setting the plot paddings back to their default values.
```javascript -chart.animate({ - style: { - plot: { - paddingLeft: null, - paddingRight: null - } - } -}) +// {% include "tutorial/chart_layout/07.js" %} ``` - + diff --git a/docs/tutorial/chart_layout/01_a.js b/docs/tutorial/chart_layout/01_a.js new file mode 100644 index 000000000..12121cf6d --- /dev/null +++ b/docs/tutorial/chart_layout/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Plot, title and legend background', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/chart_layout/01_b.js b/docs/tutorial/chart_layout/01_b.js new file mode 100644 index 000000000..6b186705b --- /dev/null +++ b/docs/tutorial/chart_layout/01_b.js @@ -0,0 +1,11 @@ +chart.animate({ + style: { + backgroundColor: '#A0A0A0', + plot: { + backgroundColor: '#D2D2D2' + }, + legend: { + backgroundColor: '#808080' + } + } +}) diff --git a/docs/tutorial/chart_layout/02_a.js b/docs/tutorial/chart_layout/02_a.js new file mode 100644 index 000000000..4708c4ec6 --- /dev/null +++ b/docs/tutorial/chart_layout/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Legend width' + } +}) diff --git a/docs/tutorial/chart_layout/02_b.js b/docs/tutorial/chart_layout/02_b.js new file mode 100644 index 000000000..b9ddaca6b --- /dev/null +++ b/docs/tutorial/chart_layout/02_b.js @@ -0,0 +1,7 @@ +chart.animate({ + style: { + legend: { + width: 50 + } + } +}) diff --git a/docs/tutorial/chart_layout/03.js b/docs/tutorial/chart_layout/03.js new file mode 100644 index 000000000..23508da2a --- /dev/null +++ b/docs/tutorial/chart_layout/03.js @@ -0,0 +1,7 @@ +chart.animate({ + style: { + legend: { + width: null + } + } +}) diff --git a/docs/tutorial/chart_layout/04_a.js b/docs/tutorial/chart_layout/04_a.js new file mode 100644 index 000000000..44737ef99 --- /dev/null +++ b/docs/tutorial/chart_layout/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Title padding' + } +}) diff --git a/docs/tutorial/chart_layout/04_b.js b/docs/tutorial/chart_layout/04_b.js new file mode 100644 index 000000000..4b2680381 --- /dev/null +++ b/docs/tutorial/chart_layout/04_b.js @@ -0,0 +1,9 @@ +chart.animate({ + style: { + title: { + paddingTop: 20, + paddingBottom: 20, + paddingLeft: 200 + } + } +}) diff --git a/docs/tutorial/chart_layout/05.js b/docs/tutorial/chart_layout/05.js new file mode 100644 index 000000000..e16a9014f --- /dev/null +++ b/docs/tutorial/chart_layout/05.js @@ -0,0 +1,9 @@ +chart.animate({ + style: { + title: { + paddingTop: null, + paddingBottom: null, + paddingLeft: null + } + } +}) diff --git a/docs/tutorial/chart_layout/06_a.js b/docs/tutorial/chart_layout/06_a.js new file mode 100644 index 000000000..0a2e99178 --- /dev/null +++ b/docs/tutorial/chart_layout/06_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Plot padding' + } +}) diff --git a/docs/tutorial/chart_layout/06_b.js b/docs/tutorial/chart_layout/06_b.js new file mode 100644 index 000000000..b4c224c9f --- /dev/null +++ b/docs/tutorial/chart_layout/06_b.js @@ -0,0 +1,8 @@ +chart.animate({ + style: { + plot: { + paddingLeft: 100, + paddingRight: 100 + } + } +}) diff --git a/docs/tutorial/chart_layout/07.js b/docs/tutorial/chart_layout/07.js new file mode 100644 index 000000000..8d448a54d --- /dev/null +++ b/docs/tutorial/chart_layout/07.js @@ -0,0 +1,8 @@ +chart.animate({ + style: { + plot: { + paddingLeft: null, + paddingRight: null + } + } +}) diff --git a/docs/tutorial/chart_layout/config.json b/docs/tutorial/chart_layout/config.json new file mode 100644 index 000000000..c846a016e --- /dev/null +++ b/docs/tutorial/chart_layout/config.json @@ -0,0 +1 @@ +[["01_a", "01_b"], ["02_a", "02_b"], ["03"], ["04_a", "04_b"], ["05"], ["06_a", "06_b"], ["07"]] From ea52536d21ea4716710dcb89a58460835e1370c3 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 10:10:04 +0100 Subject: [PATCH 18/49] tutorial, rewrite anim options --- docs/tutorial/animation_options.js | 204 -------------------- docs/tutorial/animation_options.md | 103 +--------- docs/tutorial/animation_options/01_a.js | 11 ++ docs/tutorial/animation_options/01_b.js | 12 ++ docs/tutorial/animation_options/02_a.js | 5 + docs/tutorial/animation_options/02_b.js | 12 ++ docs/tutorial/animation_options/03_a.js | 5 + docs/tutorial/animation_options/03_b.js | 24 +++ docs/tutorial/animation_options/04_a.js | 5 + docs/tutorial/animation_options/04_b.js | 18 ++ docs/tutorial/animation_options/05_a.js | 5 + docs/tutorial/animation_options/05_b.js | 26 +++ docs/tutorial/animation_options/06_a.js | 5 + docs/tutorial/animation_options/06_b.js | 17 ++ docs/tutorial/animation_options/config.json | 8 + 15 files changed, 160 insertions(+), 300 deletions(-) delete mode 100644 docs/tutorial/animation_options.js create mode 100644 docs/tutorial/animation_options/01_a.js create mode 100644 docs/tutorial/animation_options/01_b.js create mode 100644 docs/tutorial/animation_options/02_a.js create mode 100644 docs/tutorial/animation_options/02_b.js create mode 100644 docs/tutorial/animation_options/03_a.js create mode 100644 docs/tutorial/animation_options/03_b.js create mode 100644 docs/tutorial/animation_options/04_a.js create mode 100644 docs/tutorial/animation_options/04_b.js create mode 100644 docs/tutorial/animation_options/05_a.js create mode 100644 docs/tutorial/animation_options/05_b.js create mode 100644 docs/tutorial/animation_options/06_a.js create mode 100644 docs/tutorial/animation_options/06_b.js create mode 100644 docs/tutorial/animation_options/config.json diff --git a/docs/tutorial/animation_options.js b/docs/tutorial/animation_options.js deleted file mode 100644 index 98820dbc6..000000000 --- a/docs/tutorial/animation_options.js +++ /dev/null @@ -1,204 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Default options - step 1', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { - detach: 'Kinds' - }, - x: { - attach: 'Kinds' - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Default options - step 2' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - x: { - detach: 'Kinds' - }, - y: { - attach: 'Kinds' - } - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Custom animation settings for specific groups' - } - }) - }, - (chart) => { - return chart.animate( - { - config: { - channels: { - x: { - attach: 'Kinds' - }, - y: { - detach: 'Kinds' - } - } - } - }, - { - y: { - duration: 2, - delay: 2 - }, - style: { - duration: 2, - delay: 4 - } - } - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Custom options for the whole animation' - } - }) - }, - (chart) => { - return chart.animate( - { - config: { - channels: { - x: { - detach: 'Kinds' - }, - y: { - attach: 'Kinds' - } - } - } - }, - { - duration: 1, - easing: 'linear' - } - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Custom settings for both' - } - }) - }, - (chart) => { - return chart.animate( - { - config: { - channels: { - x: { - attach: 'Kinds' - }, - y: { - detach: 'Kinds' - } - } - } - }, - { - duration: 1, - easing: 'linear', - y: { - duration: 2, - delay: 2 - }, - style: { - duration: 2, - delay: 4 - } - } - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Custom unit for duration' - } - }) - }, - (chart) => { - return chart.animate( - { - config: { - channels: { - x: { - detach: 'Kinds' - }, - y: { - attach: 'Kinds' - } - } - } - }, - { - duration: '500ms' - } - ) - } - ] - } - ]) -}) diff --git a/docs/tutorial/animation_options.md b/docs/tutorial/animation_options.md index 8b82e8f27..fe17f2e9d 100644 --- a/docs/tutorial/animation_options.md +++ b/docs/tutorial/animation_options.md @@ -17,18 +17,7 @@ the default animation options. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Kinds'] - }, - x: { - attach: ['Kinds'] - } - } - } -}) +// {% include "tutorial/animation_options/01_b.js" %} ``` We stack the columns, still with the default options. @@ -36,18 +25,7 @@ We stack the columns, still with the default options.
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } -}) +// {% include "tutorial/animation_options/02_b.js" %} ``` Now we change the animation settings for the elements moving along the y-axis @@ -57,27 +35,7 @@ move from the center of the chart elements to the top of them.
```javascript -chart.animate({ - config: { - channels: { - y: { - detach: ['Kinds'] - }, - x: { - attach: ['Kinds'] - } - } - } -}, { - y: { - duration: 2, - delay: 2 - }, - style: { - duration: 2, - delay: 4 - } -}) +// {% include "tutorial/animation_options/03_b.js" %} ``` This is an example of changing the settings for the whole animation at once. @@ -85,21 +43,7 @@ This is an example of changing the settings for the whole animation at once.
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } -}, { - duration: 1, - easing: 'linear' -}) +// {% include "tutorial/animation_options/04_b.js" %} ``` When the two settings are combined, `Vizzu` will use the general animation @@ -110,29 +54,7 @@ quicker since the duration of the whole animation is set to 1 second.
```javascript -chart.animate({ - config: { - channels: { - x: { - attach: ['Kinds'] - }, - y: { - detach: ['Kinds'] - } - } - } -}, { - duration: 1, - easing: 'linear', - y: { - duration: 2, - delay: 2 - }, - style: { - duration: 2, - delay: 4 - } -}) +// {% include "tutorial/animation_options/05_b.js" %} ``` The default unit for animation is seconds, but you can set other units. Besides @@ -142,18 +64,7 @@ following, simplified format to do that.
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } -}, '500ms') +// {% include "tutorial/animation_options/06_b.js" %} ``` - + diff --git a/docs/tutorial/animation_options/01_a.js b/docs/tutorial/animation_options/01_a.js new file mode 100644 index 000000000..00b75d96d --- /dev/null +++ b/docs/tutorial/animation_options/01_a.js @@ -0,0 +1,11 @@ +chart.animate({ + config: { + title: 'Default options - step 1', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + color: { set: 'Kinds' }, + label: { set: 'Popularity' } + } + } +}) diff --git a/docs/tutorial/animation_options/01_b.js b/docs/tutorial/animation_options/01_b.js new file mode 100644 index 000000000..cea859331 --- /dev/null +++ b/docs/tutorial/animation_options/01_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + y: { + detach: 'Kinds' + }, + x: { + attach: 'Kinds' + } + } + } +}) diff --git a/docs/tutorial/animation_options/02_a.js b/docs/tutorial/animation_options/02_a.js new file mode 100644 index 000000000..add286b2d --- /dev/null +++ b/docs/tutorial/animation_options/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Default options - step 2' + } +}) diff --git a/docs/tutorial/animation_options/02_b.js b/docs/tutorial/animation_options/02_b.js new file mode 100644 index 000000000..9f534f45c --- /dev/null +++ b/docs/tutorial/animation_options/02_b.js @@ -0,0 +1,12 @@ +chart.animate({ + config: { + channels: { + x: { + detach: 'Kinds' + }, + y: { + attach: 'Kinds' + } + } + } +}) diff --git a/docs/tutorial/animation_options/03_a.js b/docs/tutorial/animation_options/03_a.js new file mode 100644 index 000000000..7d0bd4491 --- /dev/null +++ b/docs/tutorial/animation_options/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Custom animation settings for specific groups' + } +}) diff --git a/docs/tutorial/animation_options/03_b.js b/docs/tutorial/animation_options/03_b.js new file mode 100644 index 000000000..764ab86f1 --- /dev/null +++ b/docs/tutorial/animation_options/03_b.js @@ -0,0 +1,24 @@ +chart.animate( + { + config: { + channels: { + x: { + attach: 'Kinds' + }, + y: { + detach: 'Kinds' + } + } + } + }, + { + y: { + duration: 2, + delay: 2 + }, + style: { + duration: 2, + delay: 4 + } + } +) diff --git a/docs/tutorial/animation_options/04_a.js b/docs/tutorial/animation_options/04_a.js new file mode 100644 index 000000000..b5265e613 --- /dev/null +++ b/docs/tutorial/animation_options/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Custom options for the whole animation' + } +}) diff --git a/docs/tutorial/animation_options/04_b.js b/docs/tutorial/animation_options/04_b.js new file mode 100644 index 000000000..30dbf3194 --- /dev/null +++ b/docs/tutorial/animation_options/04_b.js @@ -0,0 +1,18 @@ +chart.animate( + { + config: { + channels: { + x: { + detach: 'Kinds' + }, + y: { + attach: 'Kinds' + } + } + } + }, + { + duration: 1, + easing: 'linear' + } +) diff --git a/docs/tutorial/animation_options/05_a.js b/docs/tutorial/animation_options/05_a.js new file mode 100644 index 000000000..dae410a80 --- /dev/null +++ b/docs/tutorial/animation_options/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Custom settings for both' + } +}) diff --git a/docs/tutorial/animation_options/05_b.js b/docs/tutorial/animation_options/05_b.js new file mode 100644 index 000000000..b702773c3 --- /dev/null +++ b/docs/tutorial/animation_options/05_b.js @@ -0,0 +1,26 @@ +chart.animate( + { + config: { + channels: { + x: { + attach: 'Kinds' + }, + y: { + detach: 'Kinds' + } + } + } + }, + { + duration: 1, + easing: 'linear', + y: { + duration: 2, + delay: 2 + }, + style: { + duration: 2, + delay: 4 + } + } +) diff --git a/docs/tutorial/animation_options/06_a.js b/docs/tutorial/animation_options/06_a.js new file mode 100644 index 000000000..f85a44ab7 --- /dev/null +++ b/docs/tutorial/animation_options/06_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Custom unit for duration' + } +}) diff --git a/docs/tutorial/animation_options/06_b.js b/docs/tutorial/animation_options/06_b.js new file mode 100644 index 000000000..83d0c41a6 --- /dev/null +++ b/docs/tutorial/animation_options/06_b.js @@ -0,0 +1,17 @@ +chart.animate( + { + config: { + channels: { + x: { + detach: 'Kinds' + }, + y: { + attach: 'Kinds' + } + } + } + }, + { + duration: '500ms' + } +) diff --git a/docs/tutorial/animation_options/config.json b/docs/tutorial/animation_options/config.json new file mode 100644 index 000000000..d9d51ca10 --- /dev/null +++ b/docs/tutorial/animation_options/config.json @@ -0,0 +1,8 @@ +[ + ["01_a", "01_b"], + ["02_a", "02_b"], + ["03_a", "03_b"], + ["04_a", "04_b"], + ["05_a", "05_b"], + ["06_a", "06_b"] +] From d7f4311aea8ecb596d9d9fd216c840f0223a4eb7 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 10:22:46 +0100 Subject: [PATCH 19/49] tutorial, rewrite chart presets --- docs/tutorial/chart_presets.js | 74 ------------------------- docs/tutorial/chart_presets.md | 28 ++-------- docs/tutorial/chart_presets/01_a.js | 5 ++ docs/tutorial/chart_presets/01_b.js | 7 +++ docs/tutorial/chart_presets/02_a.js | 5 ++ docs/tutorial/chart_presets/02_b.js | 8 +++ docs/tutorial/chart_presets/03_a.js | 5 ++ docs/tutorial/chart_presets/03_b.js | 9 +++ docs/tutorial/chart_presets/config.json | 5 ++ 9 files changed, 48 insertions(+), 98 deletions(-) delete mode 100644 docs/tutorial/chart_presets.js create mode 100644 docs/tutorial/chart_presets/01_a.js create mode 100644 docs/tutorial/chart_presets/01_b.js create mode 100644 docs/tutorial/chart_presets/02_a.js create mode 100644 docs/tutorial/chart_presets/02_b.js create mode 100644 docs/tutorial/chart_presets/03_a.js create mode 100644 docs/tutorial/chart_presets/03_b.js create mode 100644 docs/tutorial/chart_presets/config.json diff --git a/docs/tutorial/chart_presets.js b/docs/tutorial/chart_presets.js deleted file mode 100644 index b24ed18c1..000000000 --- a/docs/tutorial/chart_presets.js +++ /dev/null @@ -1,74 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Using a preset' - } - }) - }, - (chart) => { - return chart.animate( - chart.constructor.presets.stackedBubble({ - size: 'Popularity', - color: 'Kinds', - stackedBy: 'Genres' - }) - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Set sorting for a chart preset' - } - }) - }, - (chart) => { - return chart.animate( - chart.constructor.presets.radialStackedBar({ - angle: 'Popularity', - radius: 'Genres', - stackedBy: 'Kinds', - sort: 'byValue' - }) - ) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Setting style for a preset' - } - }) - }, - (chart) => { - return chart.animate({ - config: chart.constructor.presets.radialBar({ - angle: 'Popularity', - radius: 'Genres' - }), - style: { - 'plot.xAxis.interlacing.color': '#ffffff00' - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/chart_presets.md b/docs/tutorial/chart_presets.md index b5a2cee0f..010e9f843 100644 --- a/docs/tutorial/chart_presets.md +++ b/docs/tutorial/chart_presets.md @@ -22,12 +22,7 @@ stacked bubble chart using its preset. // {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript -chart.animate(Vizzu.presets.stackedBubble({ - size: 'Popularity', - color: 'Kinds', - stackedBy: 'Genres', - title: 'Using a preset', -})) +// {% include "tutorial/chart_presets/01_b.js" %} ``` Presets will override all channels, removing all previously set series from the @@ -39,13 +34,7 @@ where chart elements are sorted by value.
```javascript -chart.animate(Vizzu.presets.radialStackedBar({ - angle: 'Popularity', - radius: 'Genres', - stackedBy: 'Kinds', - sort: 'byValue', - title: 'Set sorting for a chart preset' -})) +// {% include "tutorial/chart_presets/02_b.js" %} ``` As you will see, the preset doesn't override the previously configured sorting @@ -60,16 +49,7 @@ method's parameter.
```javascript -chart.animate({ - config: Vizzu.presets.radialBar({ - angle: 'Popularity', - radius: 'Genres', - title: 'Setting style for a preset' - }), - style: { - 'plot.xAxis.interlacing.color': '#ffffff00' - } -}) +// {% include "tutorial/chart_presets/03_b.js" %} ``` !!! info @@ -77,4 +57,4 @@ chart.animate({ `Vizzu.presets.radialBar` is equivalent to `chart.constructor.presets.radialBar`. - + diff --git a/docs/tutorial/chart_presets/01_a.js b/docs/tutorial/chart_presets/01_a.js new file mode 100644 index 000000000..993237ffc --- /dev/null +++ b/docs/tutorial/chart_presets/01_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Using a preset' + } +}) diff --git a/docs/tutorial/chart_presets/01_b.js b/docs/tutorial/chart_presets/01_b.js new file mode 100644 index 000000000..211954d10 --- /dev/null +++ b/docs/tutorial/chart_presets/01_b.js @@ -0,0 +1,7 @@ +chart.animate( + Vizzu.presets.stackedBubble({ + size: 'Popularity', + color: 'Kinds', + stackedBy: 'Genres' + }) +) diff --git a/docs/tutorial/chart_presets/02_a.js b/docs/tutorial/chart_presets/02_a.js new file mode 100644 index 000000000..068769258 --- /dev/null +++ b/docs/tutorial/chart_presets/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Set sorting for a chart preset' + } +}) diff --git a/docs/tutorial/chart_presets/02_b.js b/docs/tutorial/chart_presets/02_b.js new file mode 100644 index 000000000..78e5977a3 --- /dev/null +++ b/docs/tutorial/chart_presets/02_b.js @@ -0,0 +1,8 @@ +chart.animate( + Vizzu.presets.radialStackedBar({ + angle: 'Popularity', + radius: 'Genres', + stackedBy: 'Kinds', + sort: 'byValue' + }) +) diff --git a/docs/tutorial/chart_presets/03_a.js b/docs/tutorial/chart_presets/03_a.js new file mode 100644 index 000000000..1fc8aa2f0 --- /dev/null +++ b/docs/tutorial/chart_presets/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Setting style for a preset' + } +}) diff --git a/docs/tutorial/chart_presets/03_b.js b/docs/tutorial/chart_presets/03_b.js new file mode 100644 index 000000000..c20a2dcd7 --- /dev/null +++ b/docs/tutorial/chart_presets/03_b.js @@ -0,0 +1,9 @@ +chart.animate({ + config: Vizzu.presets.radialBar({ + angle: 'Popularity', + radius: 'Genres' + }), + style: { + 'plot.xAxis.interlacing.color': '#ffffff00' + } +}) diff --git a/docs/tutorial/chart_presets/config.json b/docs/tutorial/chart_presets/config.json new file mode 100644 index 000000000..c1ead381d --- /dev/null +++ b/docs/tutorial/chart_presets/config.json @@ -0,0 +1,5 @@ +[ + ["01_a", { "name": "01_b", "replace": [["Vizzu.presets.", "chart.constructor.presets."]] }], + ["02_a", { "name": "02_b", "replace": [["Vizzu.presets.", "chart.constructor.presets."]] }], + ["03_a", { "name": "03_b", "replace": [["Vizzu.presets.", "chart.constructor.presets."]] }] +] From 3e66c96b093558dc10c434df972cac3e7c537f42 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 10:39:04 +0100 Subject: [PATCH 20/49] tutorial, add data parameter --- docs/assets/javascripts/mdchart.js | 6 +----- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/align_range.md | 2 +- docs/tutorial/animation_options.md | 2 +- docs/tutorial/axes_title_tooltip.md | 2 +- docs/tutorial/changing_dimensions.md | 2 +- docs/tutorial/channels_legend.md | 2 +- docs/tutorial/chart_layout.md | 2 +- docs/tutorial/chart_presets.md | 2 +- docs/tutorial/color_palette_fonts.md | 2 +- docs/tutorial/geometry.md | 2 +- docs/tutorial/group_stack.md | 2 +- docs/tutorial/orientation_split_polar.md | 2 +- docs/tutorial/{tutorial.js => snippet.js} | 5 ++++- docs/tutorial/sorting.md | 2 +- docs/tutorial/without_coordinates_noop_channel.md | 2 +- 16 files changed, 19 insertions(+), 20 deletions(-) rename docs/tutorial/{tutorial.js => snippet.js} (71%) diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index e476ccda7..99b1f51e8 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -100,11 +100,7 @@ class MdChart { let code = await response.text() if (Array.isArray(replace)) { replace.forEach(([searchValue, replaceValue]) => { - const regex = new RegExp( - searchValue.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), - 'g' - ) - code = code.replace(regex, replaceValue) + code = code.replaceAll(searchValue, replaceValue) }) } return new Function( // eslint-disable-line no-new-func diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index f736f44d2..f99fe368f 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -89,4 +89,4 @@ that sums the `Popularity` values in each of the `Genres`. // {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/align_range.md b/docs/tutorial/align_range.md index 0df9b1474..cb6cb1f95 100644 --- a/docs/tutorial/align_range.md +++ b/docs/tutorial/align_range.md @@ -84,4 +84,4 @@ Whenever you want to set your ranges back to the default value, just set them to // {% include "tutorial/align_range/06_b.js" %} ``` - + diff --git a/docs/tutorial/animation_options.md b/docs/tutorial/animation_options.md index fe17f2e9d..c81dd768c 100644 --- a/docs/tutorial/animation_options.md +++ b/docs/tutorial/animation_options.md @@ -67,4 +67,4 @@ following, simplified format to do that. // {% include "tutorial/animation_options/06_b.js" %} ``` - + diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 3bedb91f4..89c9fade7 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -88,4 +88,4 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/changing_dimensions.md b/docs/tutorial/changing_dimensions.md index 19e6ecc77..09c08b639 100644 --- a/docs/tutorial/changing_dimensions.md +++ b/docs/tutorial/changing_dimensions.md @@ -59,4 +59,4 @@ To simply drill down, the same dimension is put back on the y-axis. // {% include "tutorial/changing_dimensions/05_b.js" %} ``` - + diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index fb20b7558..d6c59eba7 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -67,4 +67,4 @@ change the geometry to circle in the example. // {% include "tutorial/channels_legend/04_b.js" %} ``` - + diff --git a/docs/tutorial/chart_layout.md b/docs/tutorial/chart_layout.md index 96b096e46..b8fe8dae6 100644 --- a/docs/tutorial/chart_layout.md +++ b/docs/tutorial/chart_layout.md @@ -75,4 +75,4 @@ Setting the plot paddings back to their default values. // {% include "tutorial/chart_layout/07.js" %} ``` - + diff --git a/docs/tutorial/chart_presets.md b/docs/tutorial/chart_presets.md index 010e9f843..7ed918606 100644 --- a/docs/tutorial/chart_presets.md +++ b/docs/tutorial/chart_presets.md @@ -57,4 +57,4 @@ method's parameter. `Vizzu.presets.radialBar` is equivalent to `chart.constructor.presets.radialBar`. - + diff --git a/docs/tutorial/color_palette_fonts.md b/docs/tutorial/color_palette_fonts.md index 65c29d907..1fd4357c9 100644 --- a/docs/tutorial/color_palette_fonts.md +++ b/docs/tutorial/color_palette_fonts.md @@ -71,4 +71,4 @@ You can reset styles to default on any levels by setting them to `null`. For information on all available style parameters see the [Style](./style.md) chapter. - + diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index a0973d6cc..630247674 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -44,4 +44,4 @@ charts like bar and column charts. // {% include "tutorial/geometry/04_b.js" %} ``` - + diff --git a/docs/tutorial/group_stack.md b/docs/tutorial/group_stack.md index 08462e972..3832269b2 100644 --- a/docs/tutorial/group_stack.md +++ b/docs/tutorial/group_stack.md @@ -48,4 +48,4 @@ around: detach the dimension from the x-axis and attach it to the y-axis. // {% include "tutorial/group_stack/04_b.js" %} ``` - + diff --git a/docs/tutorial/orientation_split_polar.md b/docs/tutorial/orientation_split_polar.md index 770d4729d..fc8e7c1fd 100644 --- a/docs/tutorial/orientation_split_polar.md +++ b/docs/tutorial/orientation_split_polar.md @@ -60,4 +60,4 @@ coordinates, just set the `coordSystem` parameter to `'cartesian'`. // {% include "tutorial/orientation_split_polar/05_b.js" %} ``` - + diff --git a/docs/tutorial/tutorial.js b/docs/tutorial/snippet.js similarity index 71% rename from docs/tutorial/tutorial.js rename to docs/tutorial/snippet.js index f11ac2913..25b60723d 100644 --- a/docs/tutorial/tutorial.js +++ b/docs/tutorial/snippet.js @@ -1,6 +1,9 @@ const mdChartLoaded = import('../assets/javascripts/mdchart.js') -const dataLoaded = import('../assets/data/music_data.js') +const scriptTag = document.currentScript +const dataFile = scriptTag.getAttribute('data') ?? '../assets/data/music_data.js' + +const dataLoaded = import(dataFile) const configLoaded = fetch('./config.json').then((response) => response.json()) Promise.all([mdChartLoaded, dataLoaded, configLoaded]).then((results) => { diff --git a/docs/tutorial/sorting.md b/docs/tutorial/sorting.md index 42ddc39a2..9e20ebc7e 100644 --- a/docs/tutorial/sorting.md +++ b/docs/tutorial/sorting.md @@ -59,4 +59,4 @@ elements according to this new logic. // {% include "tutorial/sorting/05_b.js" %} ``` - + diff --git a/docs/tutorial/without_coordinates_noop_channel.md b/docs/tutorial/without_coordinates_noop_channel.md index 02aa1a7c2..10bdf0e3e 100644 --- a/docs/tutorial/without_coordinates_noop_channel.md +++ b/docs/tutorial/without_coordinates_noop_channel.md @@ -41,4 +41,4 @@ their count. // {% include "tutorial/without_coordinates_noop_channel/03_b.js" %} ``` - + From a3ee166699cda46b97d9e8d63f088403f3862f53 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 10:46:35 +0100 Subject: [PATCH 21/49] tutorial, rewrite stacking explanation --- docs/tutorial/stacking_explanation.js | 147 ------------------ docs/tutorial/stacking_explanation.md | 2 +- docs/tutorial/stacking_explanation/01_a.js | 33 ++++ docs/tutorial/stacking_explanation/01_b.js | 32 ++++ docs/tutorial/stacking_explanation/01_c.js | 32 ++++ docs/tutorial/stacking_explanation/01_d.js | 33 ++++ .../tutorial/stacking_explanation/config.json | 1 + docs/tutorial/stacking_explanation/data.js | 9 ++ 8 files changed, 141 insertions(+), 148 deletions(-) delete mode 100644 docs/tutorial/stacking_explanation.js create mode 100644 docs/tutorial/stacking_explanation/01_a.js create mode 100644 docs/tutorial/stacking_explanation/01_b.js create mode 100644 docs/tutorial/stacking_explanation/01_c.js create mode 100644 docs/tutorial/stacking_explanation/01_d.js create mode 100644 docs/tutorial/stacking_explanation/config.json create mode 100644 docs/tutorial/stacking_explanation/data.js diff --git a/docs/tutorial/stacking_explanation.js b/docs/tutorial/stacking_explanation.js deleted file mode 100644 index e3ca37300..000000000 --- a/docs/tutorial/stacking_explanation.js +++ /dev/null @@ -1,147 +0,0 @@ -const mdChartLoaded = import('../assets/javascripts/mdchart.js') -const animOptions = { - duration: 2, - delay: 3 -} - -Promise.all([mdChartLoaded]).then((results) => { - const MdChart = results[0].default - const data = { - series: [ - { name: 'D', values: ['A', 'B', 'C'] }, - { name: 'M', values: [6.1, 3.5, 1.4] }, - { name: 'i', values: [1, 1, 1] } - ] - } - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - // tutorial_01 - { - anims: [ - (chart) => - chart.animate( - { - config: { - title: 'Dimension only', - channels: { - x: { - set: ['D', 'i'], - range: { max: 3 }, - axis: true, - labels: false, - title: 'x: [ dimension ]', - interlacing: false, - markerGuides: true, - ticks: false - }, - y: { - set: null, - axis: true, - labels: false, - title: null, - interlacing: false - }, - color: 'D', - label: ['D'] - }, - legend: null - } - }, - { ...animOptions, delay: 0 } - ), - (chart) => - chart.animate( - { - config: { - title: 'Measure and dimension', - channels: { - x: { - set: ['D', 'M'], - range: { max: 12 }, - axis: true, - labels: true, - title: 'x: [ measure, dimension ]', - interlacing: false, - markerGuides: true, - ticks: true - }, - y: { - set: null, - axis: true, - labels: false, - title: null, - interlacing: false - }, - color: 'D', - label: ['D'] - } - } - }, - animOptions - ), - (chart) => - chart.animate( - { - config: { - title: 'Measure only', - channels: { - x: { - set: 'M', - range: { max: 7 }, - axis: true, - labels: true, - title: 'x: [ measure ]', - interlacing: false, - markerGuides: true, - ticks: true - }, - y: { - set: null, - axis: true, - labels: false, - title: null, - interlacing: false - }, - color: 'D', - label: ['D'] - } - } - }, - animOptions - ), - (chart) => - chart.animate( - { - config: { - title: 'Dimension only', - channels: { - x: { - set: ['D', 'i'], - range: { max: 3 }, - axis: true, - labels: false, - title: 'x: [ dimension ]', - interlacing: false, - markerGuides: true, - ticks: false - }, - y: { - set: null, - axis: true, - labels: false, - title: null, - interlacing: false - }, - color: 'D', - label: ['D'] - }, - legend: null - } - }, - animOptions - ) - ] - } - ]) -}) diff --git a/docs/tutorial/stacking_explanation.md b/docs/tutorial/stacking_explanation.md index 48e810072..bed7dabb6 100644 --- a/docs/tutorial/stacking_explanation.md +++ b/docs/tutorial/stacking_explanation.md @@ -14,4 +14,4 @@ origo.
- + diff --git a/docs/tutorial/stacking_explanation/01_a.js b/docs/tutorial/stacking_explanation/01_a.js new file mode 100644 index 000000000..fb57c0925 --- /dev/null +++ b/docs/tutorial/stacking_explanation/01_a.js @@ -0,0 +1,33 @@ +chart.animate( + { + config: { + title: 'Dimension only', + channels: { + x: { + set: ['D', 'i'], + range: { max: 3 }, + axis: true, + labels: false, + title: 'x: [ dimension ]', + interlacing: false, + markerGuides: true, + ticks: false + }, + y: { + set: null, + axis: true, + labels: false, + title: null, + interlacing: false + }, + color: 'D', + label: ['D'] + }, + legend: null + } + }, + { + duration: 2, + delay: 0 + } +) diff --git a/docs/tutorial/stacking_explanation/01_b.js b/docs/tutorial/stacking_explanation/01_b.js new file mode 100644 index 000000000..1a92ac8b8 --- /dev/null +++ b/docs/tutorial/stacking_explanation/01_b.js @@ -0,0 +1,32 @@ +chart.animate( + { + config: { + title: 'Measure and dimension', + channels: { + x: { + set: ['D', 'M'], + range: { max: 12 }, + axis: true, + labels: true, + title: 'x: [ measure, dimension ]', + interlacing: false, + markerGuides: true, + ticks: true + }, + y: { + set: null, + axis: true, + labels: false, + title: null, + interlacing: false + }, + color: 'D', + label: ['D'] + } + } + }, + { + duration: 2, + delay: 3 + } +) diff --git a/docs/tutorial/stacking_explanation/01_c.js b/docs/tutorial/stacking_explanation/01_c.js new file mode 100644 index 000000000..641317fd1 --- /dev/null +++ b/docs/tutorial/stacking_explanation/01_c.js @@ -0,0 +1,32 @@ +chart.animate( + { + config: { + title: 'Measure only', + channels: { + x: { + set: 'M', + range: { max: 7 }, + axis: true, + labels: true, + title: 'x: [ measure ]', + interlacing: false, + markerGuides: true, + ticks: true + }, + y: { + set: null, + axis: true, + labels: false, + title: null, + interlacing: false + }, + color: 'D', + label: ['D'] + } + } + }, + { + duration: 2, + delay: 3 + } +) diff --git a/docs/tutorial/stacking_explanation/01_d.js b/docs/tutorial/stacking_explanation/01_d.js new file mode 100644 index 000000000..825b36814 --- /dev/null +++ b/docs/tutorial/stacking_explanation/01_d.js @@ -0,0 +1,33 @@ +chart.animate( + { + config: { + title: 'Dimension only', + channels: { + x: { + set: ['D', 'i'], + range: { max: 3 }, + axis: true, + labels: false, + title: 'x: [ dimension ]', + interlacing: false, + markerGuides: true, + ticks: false + }, + y: { + set: null, + axis: true, + labels: false, + title: null, + interlacing: false + }, + color: 'D', + label: ['D'] + }, + legend: null + } + }, + { + duration: 2, + delay: 3 + } +) diff --git a/docs/tutorial/stacking_explanation/config.json b/docs/tutorial/stacking_explanation/config.json new file mode 100644 index 000000000..cc8368397 --- /dev/null +++ b/docs/tutorial/stacking_explanation/config.json @@ -0,0 +1 @@ +[["01_a", "01_b", "01_c", "01_d"]] diff --git a/docs/tutorial/stacking_explanation/data.js b/docs/tutorial/stacking_explanation/data.js new file mode 100644 index 000000000..e82c28416 --- /dev/null +++ b/docs/tutorial/stacking_explanation/data.js @@ -0,0 +1,9 @@ +const data = { + series: [ + { name: 'D', values: ['A', 'B', 'C'] }, + { name: 'M', values: [6.1, 3.5, 1.4] }, + { name: 'i', values: [1, 1, 1] } + ] +} + +export default data From 7a2bff93e5a910608f62b73db76cf8ed67d2225d Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 11:46:38 +0100 Subject: [PATCH 22/49] tutorial, refactor setup code snippets, rewrite setup a --- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/align_range.md | 2 +- docs/tutorial/animation_options.md | 2 +- docs/tutorial/assets/setup/config_a.md | 5 ----- docs/tutorial/assets/setup/config_b.md | 15 ------------- docs/tutorial/assets/setup/config_c.md | 21 ------------------- docs/tutorial/assets/setup/init.md | 4 ++++ docs/tutorial/assets/setup/setup_a.md | 2 -- .../01_a.js => assets/setup/setup_b.js} | 0 docs/tutorial/assets/setup/setup_b.md | 4 +++- docs/tutorial/assets/setup/setup_c.js | 18 ++++++++++++++++ docs/tutorial/assets/setup/setup_c.md | 4 +++- docs/tutorial/{ => assets}/snippet.js | 4 ++-- docs/tutorial/axes_title_tooltip.md | 6 +++--- .../axes_title_tooltip/{01_b.js => 01.js} | 0 docs/tutorial/axes_title_tooltip/config.json | 2 +- docs/tutorial/changing_dimensions.md | 2 +- docs/tutorial/channels_legend.md | 2 +- docs/tutorial/chart_layout.md | 2 +- docs/tutorial/chart_presets.md | 2 +- docs/tutorial/color_palette_fonts.md | 2 +- docs/tutorial/geometry.md | 4 ++-- docs/tutorial/geometry/{01_b.js => 01.js} | 0 docs/tutorial/geometry/01_a.js | 9 -------- docs/tutorial/geometry/config.json | 8 ++++++- docs/tutorial/group_stack.md | 2 +- docs/tutorial/orientation_split_polar.md | 2 +- docs/tutorial/sorting.md | 2 +- docs/tutorial/stacking_explanation.md | 2 +- .../without_coordinates_noop_channel.md | 2 +- tools/docs/mkdocs.yml | 2 +- 31 files changed, 57 insertions(+), 77 deletions(-) delete mode 100644 docs/tutorial/assets/setup/config_a.md delete mode 100644 docs/tutorial/assets/setup/config_b.md delete mode 100644 docs/tutorial/assets/setup/config_c.md rename docs/tutorial/{axes_title_tooltip/01_a.js => assets/setup/setup_b.js} (100%) create mode 100644 docs/tutorial/assets/setup/setup_c.js rename docs/tutorial/{ => assets}/snippet.js (72%) rename docs/tutorial/axes_title_tooltip/{01_b.js => 01.js} (100%) rename docs/tutorial/geometry/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/geometry/01_a.js diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index f99fe368f..3c7106d91 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -89,4 +89,4 @@ that sums the `Popularity` values in each of the `Genres`. // {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/align_range.md b/docs/tutorial/align_range.md index cb6cb1f95..16aca020d 100644 --- a/docs/tutorial/align_range.md +++ b/docs/tutorial/align_range.md @@ -84,4 +84,4 @@ Whenever you want to set your ranges back to the default value, just set them to // {% include "tutorial/align_range/06_b.js" %} ``` - + diff --git a/docs/tutorial/animation_options.md b/docs/tutorial/animation_options.md index c81dd768c..ed3321fe1 100644 --- a/docs/tutorial/animation_options.md +++ b/docs/tutorial/animation_options.md @@ -67,4 +67,4 @@ following, simplified format to do that. // {% include "tutorial/animation_options/06_b.js" %} ``` - + diff --git a/docs/tutorial/assets/setup/config_a.md b/docs/tutorial/assets/setup/config_a.md deleted file mode 100644 index e4014f41f..000000000 --- a/docs/tutorial/assets/setup/config_a.md +++ /dev/null @@ -1,5 +0,0 @@ -```javascript -chart.animate({ - data -}) -``` diff --git a/docs/tutorial/assets/setup/config_b.md b/docs/tutorial/assets/setup/config_b.md deleted file mode 100644 index a3ab00898..000000000 --- a/docs/tutorial/assets/setup/config_b.md +++ /dev/null @@ -1,15 +0,0 @@ -```javascript -chart.animate({ - data: data, - config: { - channels: { - y: { - set: ['Popularity'] - }, - x: { - set: ['Genres'] - }, - }, - } -}) -``` diff --git a/docs/tutorial/assets/setup/config_c.md b/docs/tutorial/assets/setup/config_c.md deleted file mode 100644 index 349e4042f..000000000 --- a/docs/tutorial/assets/setup/config_c.md +++ /dev/null @@ -1,21 +0,0 @@ -```javascript -chart.animate({ - data: data, - config: { - channels: { - y: { - set: ['Popularity', 'Kinds'] - }, - x: { - set: ['Genres'] - }, - color: { - set: ['Kinds'] - }, - label: { - set: ['Popularity'] - }, - }, - } -}) -``` diff --git a/docs/tutorial/assets/setup/init.md b/docs/tutorial/assets/setup/init.md index 280620410..d87d34b81 100644 --- a/docs/tutorial/assets/setup/init.md +++ b/docs/tutorial/assets/setup/init.md @@ -19,4 +19,8 @@ import data from 'https://lib.vizzuhq.com/xLIB_MINOR_VERSIONx/assets/data/music_ let chart = new Vizzu('myVizzu') await chart.initializing + +chart.animate({ + data +}) ``` diff --git a/docs/tutorial/assets/setup/setup_a.md b/docs/tutorial/assets/setup/setup_a.md index da1280961..fd112d649 100644 --- a/docs/tutorial/assets/setup/setup_a.md +++ b/docs/tutorial/assets/setup/setup_a.md @@ -1,4 +1,2 @@ ??? info "Info - How to setup Vizzu" // {% include-markdown "tutorial/assets/setup/init.md" %} - - // {% include-markdown "tutorial/assets/setup/config_a.md" %} diff --git a/docs/tutorial/axes_title_tooltip/01_a.js b/docs/tutorial/assets/setup/setup_b.js similarity index 100% rename from docs/tutorial/axes_title_tooltip/01_a.js rename to docs/tutorial/assets/setup/setup_b.js diff --git a/docs/tutorial/assets/setup/setup_b.md b/docs/tutorial/assets/setup/setup_b.md index 4eeab86c9..9fa9e52f9 100644 --- a/docs/tutorial/assets/setup/setup_b.md +++ b/docs/tutorial/assets/setup/setup_b.md @@ -1,4 +1,6 @@ ??? info "Info - How to setup Vizzu" // {% include-markdown "tutorial/assets/setup/init.md" %} - // {% include-markdown "tutorial/assets/setup/config_b.md" %} + ```javascript + // {% include "tutorial/assets/setup/setup_b.js" %} + ``` diff --git a/docs/tutorial/assets/setup/setup_c.js b/docs/tutorial/assets/setup/setup_c.js new file mode 100644 index 000000000..b1c0bca5d --- /dev/null +++ b/docs/tutorial/assets/setup/setup_c.js @@ -0,0 +1,18 @@ +chart.animate({ + config: { + channels: { + y: { + set: ['Popularity', 'Kinds'] + }, + x: { + set: ['Genres'] + }, + color: { + set: ['Kinds'] + }, + label: { + set: ['Popularity'] + } + } + } +}) diff --git a/docs/tutorial/assets/setup/setup_c.md b/docs/tutorial/assets/setup/setup_c.md index d4ca138f6..1c39ca46a 100644 --- a/docs/tutorial/assets/setup/setup_c.md +++ b/docs/tutorial/assets/setup/setup_c.md @@ -1,4 +1,6 @@ ??? info "Info - How to setup Vizzu" // {% include-markdown "tutorial/assets/setup/init.md" %} - // {% include-markdown "tutorial/assets/setup/config_c.md" %} + ```javascript + // {% include "tutorial/assets/setup/setup_c.js" %} + ``` diff --git a/docs/tutorial/snippet.js b/docs/tutorial/assets/snippet.js similarity index 72% rename from docs/tutorial/snippet.js rename to docs/tutorial/assets/snippet.js index 25b60723d..5ab86c78b 100644 --- a/docs/tutorial/snippet.js +++ b/docs/tutorial/assets/snippet.js @@ -1,7 +1,7 @@ -const mdChartLoaded = import('../assets/javascripts/mdchart.js') +const mdChartLoaded = import('../../assets/javascripts/mdchart.js') const scriptTag = document.currentScript -const dataFile = scriptTag.getAttribute('data') ?? '../assets/data/music_data.js' +const dataFile = scriptTag.getAttribute('data') ?? '../../assets/data/music_data.js' const dataLoaded = import(dataFile) const configLoaded = fetch('./config.json').then((response) => response.json()) diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 89c9fade7..81dc37545 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -18,7 +18,7 @@ the measure (`Popularity`) to the y-axis using the set property. // {% include-markdown "tutorial/assets/setup/setup_a.md" %} ```javascript -// {% include "tutorial/axes_title_tooltip/01_a.js" %} +// {% include "tutorial/assets/setup/setup_b.js" %} ``` We will reference the data series by names for clarity throughout the tutorial. @@ -28,7 +28,7 @@ see the [Aggregating data](./aggregating_data.md) chapter. The previous example can be rewritten using data series descriptor objects as follows: ```javascript -// {% include "tutorial/axes_title_tooltip/01_b.js" %} +// {% include "tutorial/axes_title_tooltip/01.js" %} ``` In the next step, the chart is rearranged by putting both series on the y-axis @@ -88,4 +88,4 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/axes_title_tooltip/01_b.js b/docs/tutorial/axes_title_tooltip/01.js similarity index 100% rename from docs/tutorial/axes_title_tooltip/01_b.js rename to docs/tutorial/axes_title_tooltip/01.js diff --git a/docs/tutorial/axes_title_tooltip/config.json b/docs/tutorial/axes_title_tooltip/config.json index aa0382002..78c93dcf8 100644 --- a/docs/tutorial/axes_title_tooltip/config.json +++ b/docs/tutorial/axes_title_tooltip/config.json @@ -1,5 +1,5 @@ [ - ["01_a", "01_b"], + ["../assets/setup/setup_b", "01"], "02", "03", [{ "name": "04_a", "returnOriginal": true }, "04_b"], diff --git a/docs/tutorial/changing_dimensions.md b/docs/tutorial/changing_dimensions.md index 09c08b639..97bf9b1e4 100644 --- a/docs/tutorial/changing_dimensions.md +++ b/docs/tutorial/changing_dimensions.md @@ -59,4 +59,4 @@ To simply drill down, the same dimension is put back on the y-axis. // {% include "tutorial/changing_dimensions/05_b.js" %} ``` - + diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index d6c59eba7..6766408ab 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -67,4 +67,4 @@ change the geometry to circle in the example. // {% include "tutorial/channels_legend/04_b.js" %} ``` - + diff --git a/docs/tutorial/chart_layout.md b/docs/tutorial/chart_layout.md index b8fe8dae6..e3cd77a72 100644 --- a/docs/tutorial/chart_layout.md +++ b/docs/tutorial/chart_layout.md @@ -75,4 +75,4 @@ Setting the plot paddings back to their default values. // {% include "tutorial/chart_layout/07.js" %} ``` - + diff --git a/docs/tutorial/chart_presets.md b/docs/tutorial/chart_presets.md index 7ed918606..0534e3359 100644 --- a/docs/tutorial/chart_presets.md +++ b/docs/tutorial/chart_presets.md @@ -57,4 +57,4 @@ method's parameter. `Vizzu.presets.radialBar` is equivalent to `chart.constructor.presets.radialBar`. - + diff --git a/docs/tutorial/color_palette_fonts.md b/docs/tutorial/color_palette_fonts.md index 1fd4357c9..8f5446144 100644 --- a/docs/tutorial/color_palette_fonts.md +++ b/docs/tutorial/color_palette_fonts.md @@ -71,4 +71,4 @@ You can reset styles to default on any levels by setting them to `null`. For information on all available style parameters see the [Style](./style.md) chapter. - + diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index 630247674..1d8799ddd 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -15,7 +15,7 @@ Switching the geometry to area. // {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript -// {% include "tutorial/geometry/01_b.js" %} +// {% include "tutorial/geometry/01.js" %} ``` Drawing a line chart. @@ -44,4 +44,4 @@ charts like bar and column charts. // {% include "tutorial/geometry/04_b.js" %} ``` - + diff --git a/docs/tutorial/geometry/01_b.js b/docs/tutorial/geometry/01.js similarity index 100% rename from docs/tutorial/geometry/01_b.js rename to docs/tutorial/geometry/01.js diff --git a/docs/tutorial/geometry/01_a.js b/docs/tutorial/geometry/01_a.js deleted file mode 100644 index 2fe2643d7..000000000 --- a/docs/tutorial/geometry/01_a.js +++ /dev/null @@ -1,9 +0,0 @@ -chart.animate({ - config: { - title: 'Geometry: area', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } -}) diff --git a/docs/tutorial/geometry/config.json b/docs/tutorial/geometry/config.json index 11cb28e94..d1e4c7718 100644 --- a/docs/tutorial/geometry/config.json +++ b/docs/tutorial/geometry/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_b", + "replace": [["config: {", "config: {title: 'Geometry: area',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"] diff --git a/docs/tutorial/group_stack.md b/docs/tutorial/group_stack.md index 3832269b2..b42e1bb44 100644 --- a/docs/tutorial/group_stack.md +++ b/docs/tutorial/group_stack.md @@ -48,4 +48,4 @@ around: detach the dimension from the x-axis and attach it to the y-axis. // {% include "tutorial/group_stack/04_b.js" %} ``` - + diff --git a/docs/tutorial/orientation_split_polar.md b/docs/tutorial/orientation_split_polar.md index fc8e7c1fd..fa1750090 100644 --- a/docs/tutorial/orientation_split_polar.md +++ b/docs/tutorial/orientation_split_polar.md @@ -60,4 +60,4 @@ coordinates, just set the `coordSystem` parameter to `'cartesian'`. // {% include "tutorial/orientation_split_polar/05_b.js" %} ``` - + diff --git a/docs/tutorial/sorting.md b/docs/tutorial/sorting.md index 9e20ebc7e..6288dcafd 100644 --- a/docs/tutorial/sorting.md +++ b/docs/tutorial/sorting.md @@ -59,4 +59,4 @@ elements according to this new logic. // {% include "tutorial/sorting/05_b.js" %} ``` - + diff --git a/docs/tutorial/stacking_explanation.md b/docs/tutorial/stacking_explanation.md index bed7dabb6..f311cb99a 100644 --- a/docs/tutorial/stacking_explanation.md +++ b/docs/tutorial/stacking_explanation.md @@ -14,4 +14,4 @@ origo.
- + diff --git a/docs/tutorial/without_coordinates_noop_channel.md b/docs/tutorial/without_coordinates_noop_channel.md index 10bdf0e3e..fb588530d 100644 --- a/docs/tutorial/without_coordinates_noop_channel.md +++ b/docs/tutorial/without_coordinates_noop_channel.md @@ -41,4 +41,4 @@ their count. // {% include "tutorial/without_coordinates_noop_channel/03_b.js" %} ``` - + diff --git a/tools/docs/mkdocs.yml b/tools/docs/mkdocs.yml index cebee35e8..154ad615a 100644 --- a/tools/docs/mkdocs.yml +++ b/tools/docs/mkdocs.yml @@ -76,7 +76,7 @@ markdown_extensions: plugins: - exclude: glob: - - tutorial/assets/** + - tutorial/assets/**.md - mike: version_selector: true alias_type: symlink From 7a623ac9fb2f419c24576a4bda93be4359a36e54 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 11:49:43 +0100 Subject: [PATCH 23/49] tutorial, rewrite setup b --- docs/tutorial/channels_legend.md | 2 +- docs/tutorial/channels_legend/{01_b.js => 01.js} | 0 docs/tutorial/channels_legend/01_a.js | 9 --------- docs/tutorial/channels_legend/config.json | 8 +++++++- docs/tutorial/group_stack.md | 2 +- docs/tutorial/group_stack/{01_b.js => 01.js} | 0 docs/tutorial/group_stack/01_a.js | 9 --------- docs/tutorial/group_stack/config.json | 8 +++++++- 8 files changed, 16 insertions(+), 22 deletions(-) rename docs/tutorial/channels_legend/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/channels_legend/01_a.js rename docs/tutorial/group_stack/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/group_stack/01_a.js diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index 6766408ab..3cd765bb0 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -22,7 +22,7 @@ them differently with the `style` object introduced in the // {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript -// {% include "tutorial/channels_legend/01_b.js" %} +// {% include "tutorial/channels_legend/01.js" %} ``` The `lightness` channel sets the lightness of the markers. In this case the same diff --git a/docs/tutorial/channels_legend/01_b.js b/docs/tutorial/channels_legend/01.js similarity index 100% rename from docs/tutorial/channels_legend/01_b.js rename to docs/tutorial/channels_legend/01.js diff --git a/docs/tutorial/channels_legend/01_a.js b/docs/tutorial/channels_legend/01_a.js deleted file mode 100644 index 9f0ca2906..000000000 --- a/docs/tutorial/channels_legend/01_a.js +++ /dev/null @@ -1,9 +0,0 @@ -chart.animate({ - config: { - title: 'Label', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } -}) diff --git a/docs/tutorial/channels_legend/config.json b/docs/tutorial/channels_legend/config.json index 11cb28e94..800e4ac47 100644 --- a/docs/tutorial/channels_legend/config.json +++ b/docs/tutorial/channels_legend/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_b", + "replace": [["config: {", "config: {title: 'Label',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"] diff --git a/docs/tutorial/group_stack.md b/docs/tutorial/group_stack.md index b42e1bb44..9fcfcc09a 100644 --- a/docs/tutorial/group_stack.md +++ b/docs/tutorial/group_stack.md @@ -17,7 +17,7 @@ we also add the same dimension to the color channel. // {% include-markdown "tutorial/assets/setup/setup_b.md" %} ```javascript -// {% include "tutorial/group_stack/01_b.js" %} +// {% include "tutorial/group_stack/01.js" %} ``` By detaching this newly added dimension from the y-axis and attaching it to the diff --git a/docs/tutorial/group_stack/01_b.js b/docs/tutorial/group_stack/01.js similarity index 100% rename from docs/tutorial/group_stack/01_b.js rename to docs/tutorial/group_stack/01.js diff --git a/docs/tutorial/group_stack/01_a.js b/docs/tutorial/group_stack/01_a.js deleted file mode 100644 index 4ccfaee7e..000000000 --- a/docs/tutorial/group_stack/01_a.js +++ /dev/null @@ -1,9 +0,0 @@ -chart.animate({ - config: { - title: 'Creating a stacked chart', - channels: { - y: { set: 'Popularity' }, - x: { set: 'Genres' } - } - } -}) diff --git a/docs/tutorial/group_stack/config.json b/docs/tutorial/group_stack/config.json index 11cb28e94..8e7d257d0 100644 --- a/docs/tutorial/group_stack/config.json +++ b/docs/tutorial/group_stack/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_b", + "replace": [["config: {", "config: {title: 'Creating a stacked chart',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"] From 25dd3c8c3903d9ac2f30d76791fae2ccc38a4d58 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Thu, 31 Oct 2024 12:04:35 +0100 Subject: [PATCH 24/49] tutorial, rewrite setup c --- docs/tutorial/align_range.md | 2 +- docs/tutorial/align_range/{01_b.js => 01.js} | 0 docs/tutorial/align_range/01_a.js | 11 ----------- docs/tutorial/align_range/config.json | 8 +++++++- docs/tutorial/animation_options.md | 2 +- .../animation_options/{01_b.js => 01.js} | 0 docs/tutorial/animation_options/01_a.js | 11 ----------- docs/tutorial/animation_options/config.json | 8 +++++++- docs/tutorial/changing_dimensions.md | 2 +- .../changing_dimensions/{01_b.js => 01.js} | 0 docs/tutorial/changing_dimensions/01_a.js | 11 ----------- docs/tutorial/changing_dimensions/config.json | 8 +++++++- docs/tutorial/chart_layout.md | 2 +- docs/tutorial/chart_layout/{01_b.js => 01.js} | 0 docs/tutorial/chart_layout/01_a.js | 11 ----------- docs/tutorial/chart_layout/config.json | 16 +++++++++++++++- docs/tutorial/color_palette_fonts.md | 4 ++-- docs/tutorial/color_palette_fonts/01_a.js | 12 +++++------- docs/tutorial/color_palette_fonts/01_b.js | 10 +--------- docs/tutorial/color_palette_fonts/01_c.js | 1 - docs/tutorial/color_palette_fonts/config.json | 9 ++++++++- docs/tutorial/orientation_split_polar.md | 2 +- .../orientation_split_polar/{01_b.js => 01.js} | 0 docs/tutorial/orientation_split_polar/01_a.js | 11 ----------- .../tutorial/orientation_split_polar/config.json | 10 +++++++++- docs/tutorial/sorting.md | 2 +- docs/tutorial/sorting/{01_b.js => 01.js} | 0 docs/tutorial/sorting/01_a.js | 11 ----------- docs/tutorial/sorting/config.json | 8 +++++++- .../tutorial/without_coordinates_noop_channel.md | 2 +- .../{01_b.js => 01.js} | 0 .../without_coordinates_noop_channel/01_a.js | 11 ----------- .../without_coordinates_noop_channel/config.json | 8 +++++++- 33 files changed, 82 insertions(+), 111 deletions(-) rename docs/tutorial/align_range/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/align_range/01_a.js rename docs/tutorial/animation_options/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/animation_options/01_a.js rename docs/tutorial/changing_dimensions/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/changing_dimensions/01_a.js rename docs/tutorial/chart_layout/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/chart_layout/01_a.js delete mode 100644 docs/tutorial/color_palette_fonts/01_c.js rename docs/tutorial/orientation_split_polar/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/orientation_split_polar/01_a.js rename docs/tutorial/sorting/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/sorting/01_a.js rename docs/tutorial/without_coordinates_noop_channel/{01_b.js => 01.js} (100%) delete mode 100644 docs/tutorial/without_coordinates_noop_channel/01_a.js diff --git a/docs/tutorial/align_range.md b/docs/tutorial/align_range.md index 16aca020d..9409eb219 100644 --- a/docs/tutorial/align_range.md +++ b/docs/tutorial/align_range.md @@ -26,7 +26,7 @@ whereas on a bar chart, horizontally. Change align and configures the y axis labels to disappear during the animation. ```javascript -// {% include "tutorial/align_range/01_b.js" %} +// {% include "tutorial/align_range/01.js" %} ``` Stretched alignment. This way the elements will proportionally fill the entire diff --git a/docs/tutorial/align_range/01_b.js b/docs/tutorial/align_range/01.js similarity index 100% rename from docs/tutorial/align_range/01_b.js rename to docs/tutorial/align_range/01.js diff --git a/docs/tutorial/align_range/01_a.js b/docs/tutorial/align_range/01_a.js deleted file mode 100644 index e73068309..000000000 --- a/docs/tutorial/align_range/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Align: center', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/align_range/config.json b/docs/tutorial/align_range/config.json index d9d51ca10..adffb4cd1 100644 --- a/docs/tutorial/align_range/config.json +++ b/docs/tutorial/align_range/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Align: center',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"], diff --git a/docs/tutorial/animation_options.md b/docs/tutorial/animation_options.md index ed3321fe1..13412d166 100644 --- a/docs/tutorial/animation_options.md +++ b/docs/tutorial/animation_options.md @@ -17,7 +17,7 @@ the default animation options. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/animation_options/01_b.js" %} +// {% include "tutorial/animation_options/01.js" %} ``` We stack the columns, still with the default options. diff --git a/docs/tutorial/animation_options/01_b.js b/docs/tutorial/animation_options/01.js similarity index 100% rename from docs/tutorial/animation_options/01_b.js rename to docs/tutorial/animation_options/01.js diff --git a/docs/tutorial/animation_options/01_a.js b/docs/tutorial/animation_options/01_a.js deleted file mode 100644 index 00b75d96d..000000000 --- a/docs/tutorial/animation_options/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Default options - step 1', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/animation_options/config.json b/docs/tutorial/animation_options/config.json index d9d51ca10..f50a212f7 100644 --- a/docs/tutorial/animation_options/config.json +++ b/docs/tutorial/animation_options/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Default options - step 1',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"], diff --git a/docs/tutorial/changing_dimensions.md b/docs/tutorial/changing_dimensions.md index 97bf9b1e4..9678fa184 100644 --- a/docs/tutorial/changing_dimensions.md +++ b/docs/tutorial/changing_dimensions.md @@ -18,7 +18,7 @@ elements. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/changing_dimensions/01_b.js" %} +// {% include "tutorial/changing_dimensions/01.js" %} ``` When you simultaneously add and remove dimensions, the partitioning of the diff --git a/docs/tutorial/changing_dimensions/01_b.js b/docs/tutorial/changing_dimensions/01.js similarity index 100% rename from docs/tutorial/changing_dimensions/01_b.js rename to docs/tutorial/changing_dimensions/01.js diff --git a/docs/tutorial/changing_dimensions/01_a.js b/docs/tutorial/changing_dimensions/01_a.js deleted file mode 100644 index 6b1522f04..000000000 --- a/docs/tutorial/changing_dimensions/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Aggregate', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/changing_dimensions/config.json b/docs/tutorial/changing_dimensions/config.json index 61cfe4435..bf7bbc3fc 100644 --- a/docs/tutorial/changing_dimensions/config.json +++ b/docs/tutorial/changing_dimensions/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Aggregate',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"], diff --git a/docs/tutorial/chart_layout.md b/docs/tutorial/chart_layout.md index e3cd77a72..730f00354 100644 --- a/docs/tutorial/chart_layout.md +++ b/docs/tutorial/chart_layout.md @@ -21,7 +21,7 @@ are aligned. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/chart_layout/01_b.js" %} +// {% include "tutorial/chart_layout/01.js" %} ``` Setting the width of the legend. diff --git a/docs/tutorial/chart_layout/01_b.js b/docs/tutorial/chart_layout/01.js similarity index 100% rename from docs/tutorial/chart_layout/01_b.js rename to docs/tutorial/chart_layout/01.js diff --git a/docs/tutorial/chart_layout/01_a.js b/docs/tutorial/chart_layout/01_a.js deleted file mode 100644 index 12121cf6d..000000000 --- a/docs/tutorial/chart_layout/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Plot, title and legend background', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/chart_layout/config.json b/docs/tutorial/chart_layout/config.json index c846a016e..23b43138b 100644 --- a/docs/tutorial/chart_layout/config.json +++ b/docs/tutorial/chart_layout/config.json @@ -1 +1,15 @@ -[["01_a", "01_b"], ["02_a", "02_b"], ["03"], ["04_a", "04_b"], ["05"], ["06_a", "06_b"], ["07"]] +[ + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Plot, title and legend background',"]] + }, + "01" + ], + ["02_a", "02_b"], + ["03"], + ["04_a", "04_b"], + ["05"], + ["06_a", "06_b"], + ["07"] +] diff --git a/docs/tutorial/color_palette_fonts.md b/docs/tutorial/color_palette_fonts.md index 8f5446144..f5283763c 100644 --- a/docs/tutorial/color_palette_fonts.md +++ b/docs/tutorial/color_palette_fonts.md @@ -24,13 +24,13 @@ you should add // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/color_palette_fonts/01_b.js" %} +// {% include "tutorial/color_palette_fonts/01_a.js" %} ``` The actual style settings of the chart can be accessed via the `style` property. ```javascript -// {% include "tutorial/color_palette_fonts/01_c.js" %} +// {% include "tutorial/color_palette_fonts/01_b.js" %} ``` Changing the title font size will only affect the title; all other font sizes diff --git a/docs/tutorial/color_palette_fonts/01_a.js b/docs/tutorial/color_palette_fonts/01_a.js index fb24a8a6c..0b97e0396 100644 --- a/docs/tutorial/color_palette_fonts/01_a.js +++ b/docs/tutorial/color_palette_fonts/01_a.js @@ -1,11 +1,9 @@ chart.animate({ - config: { - title: 'Color palette', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } + style: { + plot: { + marker: { + colorPalette: '#9355e8FF #123456FF #BDAF10FF' + } } } }) diff --git a/docs/tutorial/color_palette_fonts/01_b.js b/docs/tutorial/color_palette_fonts/01_b.js index 0b97e0396..7abf36771 100644 --- a/docs/tutorial/color_palette_fonts/01_b.js +++ b/docs/tutorial/color_palette_fonts/01_b.js @@ -1,9 +1 @@ -chart.animate({ - style: { - plot: { - marker: { - colorPalette: '#9355e8FF #123456FF #BDAF10FF' - } - } - } -}) +console.log(chart.style) diff --git a/docs/tutorial/color_palette_fonts/01_c.js b/docs/tutorial/color_palette_fonts/01_c.js deleted file mode 100644 index 7abf36771..000000000 --- a/docs/tutorial/color_palette_fonts/01_c.js +++ /dev/null @@ -1 +0,0 @@ -console.log(chart.style) diff --git a/docs/tutorial/color_palette_fonts/config.json b/docs/tutorial/color_palette_fonts/config.json index e3b8e5ee7..2203b095c 100644 --- a/docs/tutorial/color_palette_fonts/config.json +++ b/docs/tutorial/color_palette_fonts/config.json @@ -1,5 +1,12 @@ [ - ["01_a", "01_b", { "name": "01_c", "returnOriginal": true }], + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Color palette',"]] + }, + "01_a", + { "name": "01_b", "returnOriginal": true } + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"], diff --git a/docs/tutorial/orientation_split_polar.md b/docs/tutorial/orientation_split_polar.md index fa1750090..9d1ac5bf9 100644 --- a/docs/tutorial/orientation_split_polar.md +++ b/docs/tutorial/orientation_split_polar.md @@ -17,7 +17,7 @@ only use temporarily. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/orientation_split_polar/01_b.js" %} +// {% include "tutorial/orientation_split_polar/01.js" %} ``` By turning the split parameter on, you can see stacked elements side-by-side, diff --git a/docs/tutorial/orientation_split_polar/01_b.js b/docs/tutorial/orientation_split_polar/01.js similarity index 100% rename from docs/tutorial/orientation_split_polar/01_b.js rename to docs/tutorial/orientation_split_polar/01.js diff --git a/docs/tutorial/orientation_split_polar/01_a.js b/docs/tutorial/orientation_split_polar/01_a.js deleted file mode 100644 index aae09050d..000000000 --- a/docs/tutorial/orientation_split_polar/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Switch the orientation = arrange by other axis', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/orientation_split_polar/config.json b/docs/tutorial/orientation_split_polar/config.json index 61cfe4435..568db281b 100644 --- a/docs/tutorial/orientation_split_polar/config.json +++ b/docs/tutorial/orientation_split_polar/config.json @@ -1,5 +1,13 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_c", + "replace": [ + ["config: {", "config: {title: 'Switch the orientation = arrange by other axis',"] + ] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"], diff --git a/docs/tutorial/sorting.md b/docs/tutorial/sorting.md index 6288dcafd..bd0cb85b0 100644 --- a/docs/tutorial/sorting.md +++ b/docs/tutorial/sorting.md @@ -16,7 +16,7 @@ ascending order. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/sorting/01_b.js" %} +// {% include "tutorial/sorting/01.js" %} ``` If you want descending order instead, you have to set the `reverse` parameter to diff --git a/docs/tutorial/sorting/01_b.js b/docs/tutorial/sorting/01.js similarity index 100% rename from docs/tutorial/sorting/01_b.js rename to docs/tutorial/sorting/01.js diff --git a/docs/tutorial/sorting/01_a.js b/docs/tutorial/sorting/01_a.js deleted file mode 100644 index 5ebedc446..000000000 --- a/docs/tutorial/sorting/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Switch to ascending order...', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/sorting/config.json b/docs/tutorial/sorting/config.json index 61cfe4435..5d2668468 100644 --- a/docs/tutorial/sorting/config.json +++ b/docs/tutorial/sorting/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Switch to ascending order...',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"], ["04_a", "04_b"], diff --git a/docs/tutorial/without_coordinates_noop_channel.md b/docs/tutorial/without_coordinates_noop_channel.md index fb588530d..21a714091 100644 --- a/docs/tutorial/without_coordinates_noop_channel.md +++ b/docs/tutorial/without_coordinates_noop_channel.md @@ -17,7 +17,7 @@ still on the `color` channel. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -// {% include "tutorial/without_coordinates_noop_channel/01_b.js" %} +// {% include "tutorial/without_coordinates_noop_channel/01.js" %} ``` Getting from a treemap to a bubble chart is simply by changing the geometry to diff --git a/docs/tutorial/without_coordinates_noop_channel/01_b.js b/docs/tutorial/without_coordinates_noop_channel/01.js similarity index 100% rename from docs/tutorial/without_coordinates_noop_channel/01_b.js rename to docs/tutorial/without_coordinates_noop_channel/01.js diff --git a/docs/tutorial/without_coordinates_noop_channel/01_a.js b/docs/tutorial/without_coordinates_noop_channel/01_a.js deleted file mode 100644 index 6429e4ab3..000000000 --- a/docs/tutorial/without_coordinates_noop_channel/01_a.js +++ /dev/null @@ -1,11 +0,0 @@ -chart.animate({ - config: { - title: 'Treemap', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } -}) diff --git a/docs/tutorial/without_coordinates_noop_channel/config.json b/docs/tutorial/without_coordinates_noop_channel/config.json index 2c44e04bd..863f9d6aa 100644 --- a/docs/tutorial/without_coordinates_noop_channel/config.json +++ b/docs/tutorial/without_coordinates_noop_channel/config.json @@ -1,5 +1,11 @@ [ - ["01_a", "01_b"], + [ + { + "name": "../assets/setup/setup_c", + "replace": [["config: {", "config: {title: 'Treemap',"]] + }, + "01" + ], ["02_a", "02_b"], ["03_a", "03_b"] ] From de8dd23126f0e33145348a951221669cc3ccc8f3 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 11:29:51 +0100 Subject: [PATCH 25/49] tutorial, refactor, use config js, add first test case --- docs/assets/javascripts/mdchart.js | 40 +++++++++++++++---- docs/tutorial/aggregating_data.md | 2 +- docs/tutorial/aggregating_data/config.js | 9 +++++ docs/tutorial/aggregating_data/config.json | 9 ----- docs/tutorial/align_range.md | 2 +- docs/tutorial/align_range/config.js | 14 +++++++ docs/tutorial/align_range/config.json | 14 ------- docs/tutorial/animation_options.md | 2 +- docs/tutorial/animation_options/config.js | 14 +++++++ docs/tutorial/animation_options/config.json | 14 ------- docs/tutorial/assets/snippet.js | 5 ++- docs/tutorial/axes_title_tooltip.md | 2 +- docs/tutorial/axes_title_tooltip/config.js | 8 ++++ docs/tutorial/axes_title_tooltip/config.json | 8 ---- docs/tutorial/changing_dimensions.md | 2 +- docs/tutorial/changing_dimensions/config.js | 13 ++++++ docs/tutorial/changing_dimensions/config.json | 13 ------ docs/tutorial/channels_legend.md | 2 +- docs/tutorial/channels_legend/config.js | 12 ++++++ docs/tutorial/channels_legend/config.json | 12 ------ docs/tutorial/chart_layout.md | 2 +- docs/tutorial/chart_layout/config.js | 15 +++++++ docs/tutorial/chart_layout/config.json | 15 ------- docs/tutorial/chart_presets.md | 2 +- docs/tutorial/chart_presets/config.js | 5 +++ docs/tutorial/chart_presets/config.json | 5 --- docs/tutorial/color_palette_fonts.md | 2 +- docs/tutorial/color_palette_fonts/config.js | 14 +++++++ docs/tutorial/color_palette_fonts/config.json | 14 ------- docs/tutorial/geometry.md | 2 +- docs/tutorial/geometry/config.js | 12 ++++++ docs/tutorial/geometry/config.json | 12 ------ docs/tutorial/group_stack.md | 2 +- docs/tutorial/group_stack/config.js | 12 ++++++ docs/tutorial/group_stack/config.json | 12 ------ docs/tutorial/orientation_split_polar.md | 2 +- .../orientation_split_polar/config.js | 15 +++++++ .../orientation_split_polar/config.json | 15 ------- docs/tutorial/sorting.md | 2 +- docs/tutorial/sorting/config.js | 13 ++++++ docs/tutorial/sorting/config.json | 13 ------ docs/tutorial/stacking_explanation.md | 2 +- docs/tutorial/stacking_explanation/config.js | 1 + .../tutorial/stacking_explanation/config.json | 1 - .../without_coordinates_noop_channel.md | 2 +- .../config.js | 11 +++++ .../config.json | 11 ----- test/e2e/man.cjs | 3 +- test/e2e/test.cjs | 3 +- test/e2e/tests/docs.json | 4 ++ .../docs/tutorial/axes_title_tooltip.mjs | 16 ++++++++ tools/docs/mkdocs.yml | 2 +- 52 files changed, 243 insertions(+), 196 deletions(-) create mode 100644 docs/tutorial/aggregating_data/config.js delete mode 100644 docs/tutorial/aggregating_data/config.json create mode 100644 docs/tutorial/align_range/config.js delete mode 100644 docs/tutorial/align_range/config.json create mode 100644 docs/tutorial/animation_options/config.js delete mode 100644 docs/tutorial/animation_options/config.json create mode 100644 docs/tutorial/axes_title_tooltip/config.js delete mode 100644 docs/tutorial/axes_title_tooltip/config.json create mode 100644 docs/tutorial/changing_dimensions/config.js delete mode 100644 docs/tutorial/changing_dimensions/config.json create mode 100644 docs/tutorial/channels_legend/config.js delete mode 100644 docs/tutorial/channels_legend/config.json create mode 100644 docs/tutorial/chart_layout/config.js delete mode 100644 docs/tutorial/chart_layout/config.json create mode 100644 docs/tutorial/chart_presets/config.js delete mode 100644 docs/tutorial/chart_presets/config.json create mode 100644 docs/tutorial/color_palette_fonts/config.js delete mode 100644 docs/tutorial/color_palette_fonts/config.json create mode 100644 docs/tutorial/geometry/config.js delete mode 100644 docs/tutorial/geometry/config.json create mode 100644 docs/tutorial/group_stack/config.js delete mode 100644 docs/tutorial/group_stack/config.json create mode 100644 docs/tutorial/orientation_split_polar/config.js delete mode 100644 docs/tutorial/orientation_split_polar/config.json create mode 100644 docs/tutorial/sorting/config.js delete mode 100644 docs/tutorial/sorting/config.json create mode 100644 docs/tutorial/stacking_explanation/config.js delete mode 100644 docs/tutorial/stacking_explanation/config.json create mode 100644 docs/tutorial/without_coordinates_noop_channel/config.js delete mode 100644 docs/tutorial/without_coordinates_noop_channel/config.json create mode 100644 test/e2e/tests/docs.json create mode 100644 test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index 99b1f51e8..c45666ed5 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -93,16 +93,33 @@ class MdChart { return chart } - static async loadAnimation(url, returnOriginal = false, replace = null) { + static async loadAnimation(url, config) { try { - const response = await fetch(url) - if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`) - let code = await response.text() + let code + if ( + typeof window === 'undefined' && + typeof process !== 'undefined' && + process.versions?.node + ) { + const fs = await import('fs').then((module) => module.promises) + code = await fs.readFile( + config?.nodeBaseUrl ? `${config.nodeBaseUrl}/${url}` : url, + 'utf8' + ) + } else { + const response = await fetch( + config?.browserBaseUrl ? `${config.browserBaseUrl}/${url}` : url + ) + if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`) + code = await response.text() + } + const replace = config?.replace if (Array.isArray(replace)) { replace.forEach(([searchValue, replaceValue]) => { code = code.replaceAll(searchValue, replaceValue) }) } + const returnOriginal = config?.returnOriginal return new Function( // eslint-disable-line no-new-func 'chart', returnOriginal ? `${code}; return chart;` : `return ${code}` @@ -112,16 +129,23 @@ class MdChart { } } - static async loadAnimations(animations) { + static async loadAnimations(animations, nodeBaseUrl = undefined, browserBaseUrl = undefined) { const steps = [] + const baseUrl = { + nodeBaseUrl, + browserBaseUrl + } async function loadAnimation(animation) { if (typeof animation === 'string') { - const func = await MdChart.loadAnimation(`./${animation}.js`) + const func = await MdChart.loadAnimation(`${animation}.js`, baseUrl) return (chart) => func(chart) } else if (typeof animation === 'object' && animation.name) { - const { name, returnOriginal, replace } = animation - const func = await MdChart.loadAnimation(`./${name}.js`, returnOriginal, replace) + const { name, ...config } = animation + const func = await MdChart.loadAnimation( + `${name}.js`, + Object.assign({}, config, baseUrl) + ) return (chart) => func(chart) } } diff --git a/docs/tutorial/aggregating_data.md b/docs/tutorial/aggregating_data.md index 3c7106d91..6e0ff57b2 100644 --- a/docs/tutorial/aggregating_data.md +++ b/docs/tutorial/aggregating_data.md @@ -89,4 +89,4 @@ that sums the `Popularity` values in each of the `Genres`. // {% include "tutorial/aggregating_data/07_b.js" %} ``` - + diff --git a/docs/tutorial/aggregating_data/config.js b/docs/tutorial/aggregating_data/config.js new file mode 100644 index 000000000..339505ae8 --- /dev/null +++ b/docs/tutorial/aggregating_data/config.js @@ -0,0 +1,9 @@ +export default [ + ['01_a', '01_b', '01_c', '01_d'], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'], + ['06_a', '06_b'], + ['07_a', '07_b'] +] diff --git a/docs/tutorial/aggregating_data/config.json b/docs/tutorial/aggregating_data/config.json deleted file mode 100644 index bc528cc95..000000000 --- a/docs/tutorial/aggregating_data/config.json +++ /dev/null @@ -1,9 +0,0 @@ -[ - ["01_a", "01_b", "01_c", "01_d"], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"], - ["06_a", "06_b"], - ["07_a", "07_b"] -] diff --git a/docs/tutorial/align_range.md b/docs/tutorial/align_range.md index 9409eb219..dca68749c 100644 --- a/docs/tutorial/align_range.md +++ b/docs/tutorial/align_range.md @@ -84,4 +84,4 @@ Whenever you want to set your ranges back to the default value, just set them to // {% include "tutorial/align_range/06_b.js" %} ``` - + diff --git a/docs/tutorial/align_range/config.js b/docs/tutorial/align_range/config.js new file mode 100644 index 000000000..290dbf118 --- /dev/null +++ b/docs/tutorial/align_range/config.js @@ -0,0 +1,14 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Align: center',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'], + ['06_a', '06_b'] +] diff --git a/docs/tutorial/align_range/config.json b/docs/tutorial/align_range/config.json deleted file mode 100644 index adffb4cd1..000000000 --- a/docs/tutorial/align_range/config.json +++ /dev/null @@ -1,14 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Align: center',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"], - ["06_a", "06_b"] -] diff --git a/docs/tutorial/animation_options.md b/docs/tutorial/animation_options.md index 13412d166..8d467be27 100644 --- a/docs/tutorial/animation_options.md +++ b/docs/tutorial/animation_options.md @@ -67,4 +67,4 @@ following, simplified format to do that. // {% include "tutorial/animation_options/06_b.js" %} ``` - + diff --git a/docs/tutorial/animation_options/config.js b/docs/tutorial/animation_options/config.js new file mode 100644 index 000000000..3db62c642 --- /dev/null +++ b/docs/tutorial/animation_options/config.js @@ -0,0 +1,14 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Default options - step 1',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'], + ['06_a', '06_b'] +] diff --git a/docs/tutorial/animation_options/config.json b/docs/tutorial/animation_options/config.json deleted file mode 100644 index f50a212f7..000000000 --- a/docs/tutorial/animation_options/config.json +++ /dev/null @@ -1,14 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Default options - step 1',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"], - ["06_a", "06_b"] -] diff --git a/docs/tutorial/assets/snippet.js b/docs/tutorial/assets/snippet.js index 5ab86c78b..c90fac65a 100644 --- a/docs/tutorial/assets/snippet.js +++ b/docs/tutorial/assets/snippet.js @@ -2,13 +2,14 @@ const mdChartLoaded = import('../../assets/javascripts/mdchart.js') const scriptTag = document.currentScript const dataFile = scriptTag.getAttribute('data') ?? '../../assets/data/music_data.js' +const configFile = scriptTag.getAttribute('config') const dataLoaded = import(dataFile) -const configLoaded = fetch('./config.json').then((response) => response.json()) +const configLoaded = import(configFile) Promise.all([mdChartLoaded, dataLoaded, configLoaded]).then((results) => { const data = results[1].default - const config = results[2] + const config = results[2].default const MdChart = results[0].default const mdchart = new MdChart(data, 'tutorial') mdchart.create(config) diff --git a/docs/tutorial/axes_title_tooltip.md b/docs/tutorial/axes_title_tooltip.md index 81dc37545..2c91dba15 100644 --- a/docs/tutorial/axes_title_tooltip.md +++ b/docs/tutorial/axes_title_tooltip.md @@ -88,4 +88,4 @@ over them with their mouse by adding the (`'tooltip'`, `true`) parameters to the !!! note Calls to this method before the library initialization completed will fail. - + diff --git a/docs/tutorial/axes_title_tooltip/config.js b/docs/tutorial/axes_title_tooltip/config.js new file mode 100644 index 000000000..bd19fffbf --- /dev/null +++ b/docs/tutorial/axes_title_tooltip/config.js @@ -0,0 +1,8 @@ +export default [ + ['../assets/setup/setup_b', '01'], + '02', + '03', + [{ name: '04_a', returnOriginal: true }, '04_b'], + '05', + { name: '06', returnOriginal: true } +] diff --git a/docs/tutorial/axes_title_tooltip/config.json b/docs/tutorial/axes_title_tooltip/config.json deleted file mode 100644 index 78c93dcf8..000000000 --- a/docs/tutorial/axes_title_tooltip/config.json +++ /dev/null @@ -1,8 +0,0 @@ -[ - ["../assets/setup/setup_b", "01"], - "02", - "03", - [{ "name": "04_a", "returnOriginal": true }, "04_b"], - "05", - { "name": "06", "returnOriginal": true } -] diff --git a/docs/tutorial/changing_dimensions.md b/docs/tutorial/changing_dimensions.md index 9678fa184..da5f8c421 100644 --- a/docs/tutorial/changing_dimensions.md +++ b/docs/tutorial/changing_dimensions.md @@ -59,4 +59,4 @@ To simply drill down, the same dimension is put back on the y-axis. // {% include "tutorial/changing_dimensions/05_b.js" %} ``` - + diff --git a/docs/tutorial/changing_dimensions/config.js b/docs/tutorial/changing_dimensions/config.js new file mode 100644 index 000000000..24e6453ee --- /dev/null +++ b/docs/tutorial/changing_dimensions/config.js @@ -0,0 +1,13 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Aggregate',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'] +] diff --git a/docs/tutorial/changing_dimensions/config.json b/docs/tutorial/changing_dimensions/config.json deleted file mode 100644 index bf7bbc3fc..000000000 --- a/docs/tutorial/changing_dimensions/config.json +++ /dev/null @@ -1,13 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Aggregate',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"] -] diff --git a/docs/tutorial/channels_legend.md b/docs/tutorial/channels_legend.md index 3cd765bb0..e10f9e1f2 100644 --- a/docs/tutorial/channels_legend.md +++ b/docs/tutorial/channels_legend.md @@ -67,4 +67,4 @@ change the geometry to circle in the example. // {% include "tutorial/channels_legend/04_b.js" %} ``` - + diff --git a/docs/tutorial/channels_legend/config.js b/docs/tutorial/channels_legend/config.js new file mode 100644 index 000000000..0eb5136f1 --- /dev/null +++ b/docs/tutorial/channels_legend/config.js @@ -0,0 +1,12 @@ +export default [ + [ + { + name: '../assets/setup/setup_b', + replace: [['config: {', "config: {title: 'Label',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'] +] diff --git a/docs/tutorial/channels_legend/config.json b/docs/tutorial/channels_legend/config.json deleted file mode 100644 index 800e4ac47..000000000 --- a/docs/tutorial/channels_legend/config.json +++ /dev/null @@ -1,12 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_b", - "replace": [["config: {", "config: {title: 'Label',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"] -] diff --git a/docs/tutorial/chart_layout.md b/docs/tutorial/chart_layout.md index 730f00354..809a76c2d 100644 --- a/docs/tutorial/chart_layout.md +++ b/docs/tutorial/chart_layout.md @@ -75,4 +75,4 @@ Setting the plot paddings back to their default values. // {% include "tutorial/chart_layout/07.js" %} ``` - + diff --git a/docs/tutorial/chart_layout/config.js b/docs/tutorial/chart_layout/config.js new file mode 100644 index 000000000..25b067f38 --- /dev/null +++ b/docs/tutorial/chart_layout/config.js @@ -0,0 +1,15 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Plot, title and legend background',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03'], + ['04_a', '04_b'], + ['05'], + ['06_a', '06_b'], + ['07'] +] diff --git a/docs/tutorial/chart_layout/config.json b/docs/tutorial/chart_layout/config.json deleted file mode 100644 index 23b43138b..000000000 --- a/docs/tutorial/chart_layout/config.json +++ /dev/null @@ -1,15 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Plot, title and legend background',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03"], - ["04_a", "04_b"], - ["05"], - ["06_a", "06_b"], - ["07"] -] diff --git a/docs/tutorial/chart_presets.md b/docs/tutorial/chart_presets.md index 0534e3359..c50f54df6 100644 --- a/docs/tutorial/chart_presets.md +++ b/docs/tutorial/chart_presets.md @@ -57,4 +57,4 @@ method's parameter. `Vizzu.presets.radialBar` is equivalent to `chart.constructor.presets.radialBar`. - + diff --git a/docs/tutorial/chart_presets/config.js b/docs/tutorial/chart_presets/config.js new file mode 100644 index 000000000..5492525b9 --- /dev/null +++ b/docs/tutorial/chart_presets/config.js @@ -0,0 +1,5 @@ +export default [ + ['01_a', { name: '01_b', replace: [['Vizzu.presets.', 'chart.constructor.presets.']] }], + ['02_a', { name: '02_b', replace: [['Vizzu.presets.', 'chart.constructor.presets.']] }], + ['03_a', { name: '03_b', replace: [['Vizzu.presets.', 'chart.constructor.presets.']] }] +] diff --git a/docs/tutorial/chart_presets/config.json b/docs/tutorial/chart_presets/config.json deleted file mode 100644 index c1ead381d..000000000 --- a/docs/tutorial/chart_presets/config.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - ["01_a", { "name": "01_b", "replace": [["Vizzu.presets.", "chart.constructor.presets."]] }], - ["02_a", { "name": "02_b", "replace": [["Vizzu.presets.", "chart.constructor.presets."]] }], - ["03_a", { "name": "03_b", "replace": [["Vizzu.presets.", "chart.constructor.presets."]] }] -] diff --git a/docs/tutorial/color_palette_fonts.md b/docs/tutorial/color_palette_fonts.md index f5283763c..11ff2257c 100644 --- a/docs/tutorial/color_palette_fonts.md +++ b/docs/tutorial/color_palette_fonts.md @@ -71,4 +71,4 @@ You can reset styles to default on any levels by setting them to `null`. For information on all available style parameters see the [Style](./style.md) chapter. - + diff --git a/docs/tutorial/color_palette_fonts/config.js b/docs/tutorial/color_palette_fonts/config.js new file mode 100644 index 000000000..714b2d8b7 --- /dev/null +++ b/docs/tutorial/color_palette_fonts/config.js @@ -0,0 +1,14 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Color palette',"]] + }, + '01_a', + { name: '01_b', returnOriginal: true } + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'] +] diff --git a/docs/tutorial/color_palette_fonts/config.json b/docs/tutorial/color_palette_fonts/config.json deleted file mode 100644 index 2203b095c..000000000 --- a/docs/tutorial/color_palette_fonts/config.json +++ /dev/null @@ -1,14 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Color palette',"]] - }, - "01_a", - { "name": "01_b", "returnOriginal": true } - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"] -] diff --git a/docs/tutorial/geometry.md b/docs/tutorial/geometry.md index 1d8799ddd..e9636a561 100644 --- a/docs/tutorial/geometry.md +++ b/docs/tutorial/geometry.md @@ -44,4 +44,4 @@ charts like bar and column charts. // {% include "tutorial/geometry/04_b.js" %} ``` - + diff --git a/docs/tutorial/geometry/config.js b/docs/tutorial/geometry/config.js new file mode 100644 index 000000000..438f8ae13 --- /dev/null +++ b/docs/tutorial/geometry/config.js @@ -0,0 +1,12 @@ +export default [ + [ + { + name: '../assets/setup/setup_b', + replace: [['config: {', "config: {title: 'Geometry: area',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'] +] diff --git a/docs/tutorial/geometry/config.json b/docs/tutorial/geometry/config.json deleted file mode 100644 index d1e4c7718..000000000 --- a/docs/tutorial/geometry/config.json +++ /dev/null @@ -1,12 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_b", - "replace": [["config: {", "config: {title: 'Geometry: area',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"] -] diff --git a/docs/tutorial/group_stack.md b/docs/tutorial/group_stack.md index 9fcfcc09a..07c11d92b 100644 --- a/docs/tutorial/group_stack.md +++ b/docs/tutorial/group_stack.md @@ -48,4 +48,4 @@ around: detach the dimension from the x-axis and attach it to the y-axis. // {% include "tutorial/group_stack/04_b.js" %} ``` - + diff --git a/docs/tutorial/group_stack/config.js b/docs/tutorial/group_stack/config.js new file mode 100644 index 000000000..a2cfa7da0 --- /dev/null +++ b/docs/tutorial/group_stack/config.js @@ -0,0 +1,12 @@ +export default [ + [ + { + name: '../assets/setup/setup_b', + replace: [['config: {', "config: {title: 'Creating a stacked chart',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'] +] diff --git a/docs/tutorial/group_stack/config.json b/docs/tutorial/group_stack/config.json deleted file mode 100644 index 8e7d257d0..000000000 --- a/docs/tutorial/group_stack/config.json +++ /dev/null @@ -1,12 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_b", - "replace": [["config: {", "config: {title: 'Creating a stacked chart',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"] -] diff --git a/docs/tutorial/orientation_split_polar.md b/docs/tutorial/orientation_split_polar.md index 9d1ac5bf9..25fb782db 100644 --- a/docs/tutorial/orientation_split_polar.md +++ b/docs/tutorial/orientation_split_polar.md @@ -60,4 +60,4 @@ coordinates, just set the `coordSystem` parameter to `'cartesian'`. // {% include "tutorial/orientation_split_polar/05_b.js" %} ``` - + diff --git a/docs/tutorial/orientation_split_polar/config.js b/docs/tutorial/orientation_split_polar/config.js new file mode 100644 index 000000000..d06ec2013 --- /dev/null +++ b/docs/tutorial/orientation_split_polar/config.js @@ -0,0 +1,15 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [ + ['config: {', "config: {title: 'Switch the orientation = arrange by other axis',"] + ] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'] +] diff --git a/docs/tutorial/orientation_split_polar/config.json b/docs/tutorial/orientation_split_polar/config.json deleted file mode 100644 index 568db281b..000000000 --- a/docs/tutorial/orientation_split_polar/config.json +++ /dev/null @@ -1,15 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [ - ["config: {", "config: {title: 'Switch the orientation = arrange by other axis',"] - ] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"] -] diff --git a/docs/tutorial/sorting.md b/docs/tutorial/sorting.md index bd0cb85b0..c4f580090 100644 --- a/docs/tutorial/sorting.md +++ b/docs/tutorial/sorting.md @@ -59,4 +59,4 @@ elements according to this new logic. // {% include "tutorial/sorting/05_b.js" %} ``` - + diff --git a/docs/tutorial/sorting/config.js b/docs/tutorial/sorting/config.js new file mode 100644 index 000000000..af3620ddd --- /dev/null +++ b/docs/tutorial/sorting/config.js @@ -0,0 +1,13 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Switch to ascending order...',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'], + ['04_a', '04_b'], + ['05_a', '05_b'] +] diff --git a/docs/tutorial/sorting/config.json b/docs/tutorial/sorting/config.json deleted file mode 100644 index 5d2668468..000000000 --- a/docs/tutorial/sorting/config.json +++ /dev/null @@ -1,13 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Switch to ascending order...',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"], - ["04_a", "04_b"], - ["05_a", "05_b"] -] diff --git a/docs/tutorial/stacking_explanation.md b/docs/tutorial/stacking_explanation.md index f311cb99a..dd2f38119 100644 --- a/docs/tutorial/stacking_explanation.md +++ b/docs/tutorial/stacking_explanation.md @@ -14,4 +14,4 @@ origo.
- + diff --git a/docs/tutorial/stacking_explanation/config.js b/docs/tutorial/stacking_explanation/config.js new file mode 100644 index 000000000..a7f79ba2f --- /dev/null +++ b/docs/tutorial/stacking_explanation/config.js @@ -0,0 +1 @@ +export default [['01_a', '01_b', '01_c', '01_d']] diff --git a/docs/tutorial/stacking_explanation/config.json b/docs/tutorial/stacking_explanation/config.json deleted file mode 100644 index cc8368397..000000000 --- a/docs/tutorial/stacking_explanation/config.json +++ /dev/null @@ -1 +0,0 @@ -[["01_a", "01_b", "01_c", "01_d"]] diff --git a/docs/tutorial/without_coordinates_noop_channel.md b/docs/tutorial/without_coordinates_noop_channel.md index 21a714091..bb17f20d6 100644 --- a/docs/tutorial/without_coordinates_noop_channel.md +++ b/docs/tutorial/without_coordinates_noop_channel.md @@ -41,4 +41,4 @@ their count. // {% include "tutorial/without_coordinates_noop_channel/03_b.js" %} ``` - + diff --git a/docs/tutorial/without_coordinates_noop_channel/config.js b/docs/tutorial/without_coordinates_noop_channel/config.js new file mode 100644 index 000000000..c91e589ae --- /dev/null +++ b/docs/tutorial/without_coordinates_noop_channel/config.js @@ -0,0 +1,11 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Treemap',"]] + }, + '01' + ], + ['02_a', '02_b'], + ['03_a', '03_b'] +] diff --git a/docs/tutorial/without_coordinates_noop_channel/config.json b/docs/tutorial/without_coordinates_noop_channel/config.json deleted file mode 100644 index 863f9d6aa..000000000 --- a/docs/tutorial/without_coordinates_noop_channel/config.json +++ /dev/null @@ -1,11 +0,0 @@ -[ - [ - { - "name": "../assets/setup/setup_c", - "replace": [["config: {", "config: {title: 'Treemap',"]] - }, - "01" - ], - ["02_a", "02_b"], - ["03_a", "03_b"] -] diff --git a/test/e2e/man.cjs b/test/e2e/man.cjs index e3ceb71f4..d001352a9 100644 --- a/test/e2e/man.cjs +++ b/test/e2e/man.cjs @@ -41,7 +41,8 @@ The animation of the selected test case will be displayed using the chosen Vizzu '/test/e2e/tests/config_tests.json', '/test/e2e/tests/style_tests.json', '/test/e2e/tests/features.json', - '/test/e2e/tests/fixes.json' + '/test/e2e/tests/fixes.json', + '/test/e2e/tests/docs.json' ]) .example([ diff --git a/test/e2e/test.cjs b/test/e2e/test.cjs index 264f5154b..dca08bf7d 100644 --- a/test/e2e/test.cjs +++ b/test/e2e/test.cjs @@ -60,7 +60,8 @@ Please note that the test require Chrome, ChromeDriver and Selenium Webdriver to '/test/e2e/tests/config_tests.json', '/test/e2e/tests/style_tests.json', '/test/e2e/tests/features.json', - '/test/e2e/tests/fixes.json' + '/test/e2e/tests/fixes.json', + '/test/e2e/tests/docs.json' ]) .choices('Werror', ['noref', 'sameref']) diff --git a/test/e2e/tests/docs.json b/test/e2e/tests/docs.json new file mode 100644 index 000000000..b9b577614 --- /dev/null +++ b/test/e2e/tests/docs.json @@ -0,0 +1,4 @@ +{ + "suite": "/test/e2e/tests/docs", + "test": {} +} diff --git a/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs b/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs new file mode 100644 index 000000000..fd53bbfb6 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs @@ -0,0 +1,16 @@ +import MdChart from '../../../../../docs/assets/javascripts/mdchart.js' + +const dataLoaded = await import('../../../../../docs/assets/data/music_data.js') +const configLoaded = await import('../../../../../docs/tutorial/axes_title_tooltip/config.js') +const [data, config] = await Promise.all([dataLoaded, configLoaded]) + +const animations = await MdChart.loadAnimations( + config.default, + './docs/tutorial/axes_title_tooltip', + '../../../../../../docs/tutorial/axes_title_tooltip' +) +animations.unshift((chart) => chart.animate({ data: data.default })) + +const testSteps = animations.flat(Infinity) + +export default testSteps diff --git a/tools/docs/mkdocs.yml b/tools/docs/mkdocs.yml index 154ad615a..1d1134b56 100644 --- a/tools/docs/mkdocs.yml +++ b/tools/docs/mkdocs.yml @@ -88,7 +88,7 @@ plugins: implicit_index: true - autorefs - include-markdown: - opening_tag: "// {%" + opening_tag: '// {%' - placeholder - gen-files: scripts: From fe3a18353586106c18768536dd492fe780b46041 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 11:41:46 +0100 Subject: [PATCH 26/49] refactor tutorial test --- test/e2e/tests/docs.json | 2 +- test/e2e/tests/docs/tutorial.mjs | 18 ++++++++++++++++++ .../tests/docs/tutorial/axes_title_tooltip.mjs | 16 ++++------------ 3 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 test/e2e/tests/docs/tutorial.mjs diff --git a/test/e2e/tests/docs.json b/test/e2e/tests/docs.json index b9b577614..5f560c11b 100644 --- a/test/e2e/tests/docs.json +++ b/test/e2e/tests/docs.json @@ -1,4 +1,4 @@ { - "suite": "/test/e2e/tests/docs", + "suite": "/test/e2e/tests/docs/tutorial", "test": {} } diff --git a/test/e2e/tests/docs/tutorial.mjs b/test/e2e/tests/docs/tutorial.mjs new file mode 100644 index 000000000..05d127328 --- /dev/null +++ b/test/e2e/tests/docs/tutorial.mjs @@ -0,0 +1,18 @@ +import MdChart from '../../../../docs/assets/javascripts/mdchart.js' + +async function getTestSteps(dataFile, configName) { + const dataLoaded = await import(dataFile) + const configLoaded = await import(`../../../../docs/tutorial/${configName}/config.js`) + const [data, config] = await Promise.all([dataLoaded, configLoaded]) + + const animations = await MdChart.loadAnimations( + config.default, + `./docs/tutorial/${configName}`, + `../../../../../../docs/tutorial/${configName}` + ) + animations.unshift((chart) => chart.animate({ data: data.default })) + + return animations.flat(Infinity) +} + +export default getTestSteps diff --git a/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs b/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs index fd53bbfb6..8ba762379 100644 --- a/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs +++ b/test/e2e/tests/docs/tutorial/axes_title_tooltip.mjs @@ -1,16 +1,8 @@ -import MdChart from '../../../../../docs/assets/javascripts/mdchart.js' +import getTestSteps from '../tutorial.mjs' -const dataLoaded = await import('../../../../../docs/assets/data/music_data.js') -const configLoaded = await import('../../../../../docs/tutorial/axes_title_tooltip/config.js') -const [data, config] = await Promise.all([dataLoaded, configLoaded]) - -const animations = await MdChart.loadAnimations( - config.default, - './docs/tutorial/axes_title_tooltip', - '../../../../../../docs/tutorial/axes_title_tooltip' +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'axes_title_tooltip' ) -animations.unshift((chart) => chart.animate({ data: data.default })) - -const testSteps = animations.flat(Infinity) export default testSteps From a28f09e5348a8a467cc4242c4526b4c3b7b5193f Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 11:53:22 +0100 Subject: [PATCH 27/49] Add tutorial test cases --- test/e2e/tests/docs/tutorial/aggregating_data.mjs | 8 ++++++++ test/e2e/tests/docs/tutorial/align_range.mjs | 5 +++++ test/e2e/tests/docs/tutorial/animation_options.mjs | 8 ++++++++ test/e2e/tests/docs/tutorial/changing_dimensions.mjs | 8 ++++++++ test/e2e/tests/docs/tutorial/channels_legend.mjs | 8 ++++++++ test/e2e/tests/docs/tutorial/chart_layout.mjs | 5 +++++ test/e2e/tests/docs/tutorial/chart_presets.mjs | 5 +++++ test/e2e/tests/docs/tutorial/color_palette_fonts.mjs | 8 ++++++++ test/e2e/tests/docs/tutorial/geometry.mjs | 5 +++++ test/e2e/tests/docs/tutorial/group_stack.mjs | 5 +++++ test/e2e/tests/docs/tutorial/orientation_split_polar.mjs | 8 ++++++++ test/e2e/tests/docs/tutorial/sorting.mjs | 5 +++++ test/e2e/tests/docs/tutorial/stacking_explanation.mjs | 8 ++++++++ .../docs/tutorial/without_coordinates_noop_channel.mjs | 8 ++++++++ 14 files changed, 94 insertions(+) create mode 100644 test/e2e/tests/docs/tutorial/aggregating_data.mjs create mode 100644 test/e2e/tests/docs/tutorial/align_range.mjs create mode 100644 test/e2e/tests/docs/tutorial/animation_options.mjs create mode 100644 test/e2e/tests/docs/tutorial/changing_dimensions.mjs create mode 100644 test/e2e/tests/docs/tutorial/channels_legend.mjs create mode 100644 test/e2e/tests/docs/tutorial/chart_layout.mjs create mode 100644 test/e2e/tests/docs/tutorial/chart_presets.mjs create mode 100644 test/e2e/tests/docs/tutorial/color_palette_fonts.mjs create mode 100644 test/e2e/tests/docs/tutorial/geometry.mjs create mode 100644 test/e2e/tests/docs/tutorial/group_stack.mjs create mode 100644 test/e2e/tests/docs/tutorial/orientation_split_polar.mjs create mode 100644 test/e2e/tests/docs/tutorial/sorting.mjs create mode 100644 test/e2e/tests/docs/tutorial/stacking_explanation.mjs create mode 100644 test/e2e/tests/docs/tutorial/without_coordinates_noop_channel.mjs diff --git a/test/e2e/tests/docs/tutorial/aggregating_data.mjs b/test/e2e/tests/docs/tutorial/aggregating_data.mjs new file mode 100644 index 000000000..9a2544c0f --- /dev/null +++ b/test/e2e/tests/docs/tutorial/aggregating_data.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'aggregating_data' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/align_range.mjs b/test/e2e/tests/docs/tutorial/align_range.mjs new file mode 100644 index 000000000..c2a1d5573 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/align_range.mjs @@ -0,0 +1,5 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps('../../../../docs/assets/data/music_data.js', 'align_range') + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/animation_options.mjs b/test/e2e/tests/docs/tutorial/animation_options.mjs new file mode 100644 index 000000000..04ddf3916 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/animation_options.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'animation_options' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/changing_dimensions.mjs b/test/e2e/tests/docs/tutorial/changing_dimensions.mjs new file mode 100644 index 000000000..6cb4d7c26 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/changing_dimensions.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'changing_dimensions' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/channels_legend.mjs b/test/e2e/tests/docs/tutorial/channels_legend.mjs new file mode 100644 index 000000000..c32d5d1e4 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/channels_legend.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'channels_legend' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/chart_layout.mjs b/test/e2e/tests/docs/tutorial/chart_layout.mjs new file mode 100644 index 000000000..48a921c4f --- /dev/null +++ b/test/e2e/tests/docs/tutorial/chart_layout.mjs @@ -0,0 +1,5 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps('../../../../docs/assets/data/music_data.js', 'chart_layout') + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/chart_presets.mjs b/test/e2e/tests/docs/tutorial/chart_presets.mjs new file mode 100644 index 000000000..ac86209ac --- /dev/null +++ b/test/e2e/tests/docs/tutorial/chart_presets.mjs @@ -0,0 +1,5 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps('../../../../docs/assets/data/music_data.js', 'chart_presets') + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/color_palette_fonts.mjs b/test/e2e/tests/docs/tutorial/color_palette_fonts.mjs new file mode 100644 index 000000000..9af70fb29 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/color_palette_fonts.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'color_palette_fonts' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/geometry.mjs b/test/e2e/tests/docs/tutorial/geometry.mjs new file mode 100644 index 000000000..00e88a417 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/geometry.mjs @@ -0,0 +1,5 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps('../../../../docs/assets/data/music_data.js', 'geometry') + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/group_stack.mjs b/test/e2e/tests/docs/tutorial/group_stack.mjs new file mode 100644 index 000000000..b4b9c3148 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/group_stack.mjs @@ -0,0 +1,5 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps('../../../../docs/assets/data/music_data.js', 'group_stack') + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/orientation_split_polar.mjs b/test/e2e/tests/docs/tutorial/orientation_split_polar.mjs new file mode 100644 index 000000000..b28d7a005 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/orientation_split_polar.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'orientation_split_polar' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/sorting.mjs b/test/e2e/tests/docs/tutorial/sorting.mjs new file mode 100644 index 000000000..704f63036 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/sorting.mjs @@ -0,0 +1,5 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps('../../../../docs/assets/data/music_data.js', 'sorting') + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/stacking_explanation.mjs b/test/e2e/tests/docs/tutorial/stacking_explanation.mjs new file mode 100644 index 000000000..3ac4ed01a --- /dev/null +++ b/test/e2e/tests/docs/tutorial/stacking_explanation.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/tutorial/stacking_explanation/data.js', + 'stacking_explanation' +) + +export default testSteps diff --git a/test/e2e/tests/docs/tutorial/without_coordinates_noop_channel.mjs b/test/e2e/tests/docs/tutorial/without_coordinates_noop_channel.mjs new file mode 100644 index 000000000..c7141b7a8 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/without_coordinates_noop_channel.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'without_coordinates_noop_channel' +) + +export default testSteps From 62c75b2af0440b4f35cdb846111966097ed42ec9 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 13:40:18 +0100 Subject: [PATCH 28/49] tutorial, rewrite anim control --- docs/tutorial/animation_control_keyframes.js | 127 ------------------ docs/tutorial/animation_control_keyframes.md | 65 +-------- .../animation_control_keyframes/01.js | 14 ++ .../animation_control_keyframes/02_a.js | 5 + .../animation_control_keyframes/02_b.js | 20 +++ .../animation_control_keyframes/03_a.js | 5 + .../animation_control_keyframes/03_b.js | 37 +++++ .../animation_control_keyframes/config.js | 31 +++++ .../tutorial/animation_control_keyframes.mjs | 8 ++ 9 files changed, 124 insertions(+), 188 deletions(-) delete mode 100644 docs/tutorial/animation_control_keyframes.js create mode 100644 docs/tutorial/animation_control_keyframes/01.js create mode 100644 docs/tutorial/animation_control_keyframes/02_a.js create mode 100644 docs/tutorial/animation_control_keyframes/02_b.js create mode 100644 docs/tutorial/animation_control_keyframes/03_a.js create mode 100644 docs/tutorial/animation_control_keyframes/03_b.js create mode 100644 docs/tutorial/animation_control_keyframes/config.js create mode 100644 test/e2e/tests/docs/tutorial/animation_control_keyframes.mjs diff --git a/docs/tutorial/animation_control_keyframes.js b/docs/tutorial/animation_control_keyframes.js deleted file mode 100644 index 797ddbd4d..000000000 --- a/docs/tutorial/animation_control_keyframes.js +++ /dev/null @@ -1,127 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Jumping from 0% to 50% progress at the begining of the animation', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - chart = chart.animate({ - config: { - channels: { - x: { - attach: 'Kinds' - }, - y: { - detach: 'Kinds' - } - } - } - }) - chart.activated.then((control) => control.seek('50%')) - return chart - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Using initial animation control parameters' - } - }) - }, - (chart) => { - chart = chart.animate( - { - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } - }, - { - playState: 'paused', - position: 0.5 - } - ) - chart.activated.then((control) => control.play()) - return chart - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Using keyframes' - } - }) - }, - (chart) => { - return chart.animate([ - { - target: { - config: { - channels: { - x: { - attach: ['Kinds'] - }, - y: { - detach: ['Kinds'] - } - }, - title: 'Using keyframes' - } - }, - options: { - duration: 0.5 - } - }, - { - target: { - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } - }, - options: { - duration: 1 - } - } - ]) - } - ] - } - ]) -}) diff --git a/docs/tutorial/animation_control_keyframes.md b/docs/tutorial/animation_control_keyframes.md index 0627aa2db..a5d3d0d2b 100644 --- a/docs/tutorial/animation_control_keyframes.md +++ b/docs/tutorial/animation_control_keyframes.md @@ -14,18 +14,7 @@ In this step, we seek forward to `50%` of progress after the animation starts. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - config: { - channels: { - x: { - attach: ['Kinds'] - }, - y: { - detach: ['Kinds'] - } - }, - } -}).activated.then(control => control.seek('50%')); +// {% include "tutorial/animation_control_keyframes/01.js" %} ``` You can also control the initial position and play state of the animation @@ -34,21 +23,7 @@ through the animation options argument of the animate method.
```javascript -chart.animate({ - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - }, - } -}, { - playState: 'paused', - position: 0.5 -}).activated.then(control => control.play()); +// {% include "tutorial/animation_control_keyframes/02_b.js" %} ``` You may want to control multiple animations as a single one. For example you @@ -63,42 +38,10 @@ keyframes.
```javascript -chart.animate([{ - target: { - config: { - channels: { - x: { - attach: ['Kinds'] - }, - y: { - detach: ['Kinds'] - } - }, - } - }, - options: { - duration: 0.5 - } -}, { - target: { - config: { - channels: { - x: { - detach: ['Kinds'] - }, - y: { - attach: ['Kinds'] - } - } - } - }, - options: { - duration: 1 - } -}]); +// {% include "tutorial/animation_control_keyframes/03_b.js" %} ``` The initial state of the animation can be set, too, by using the second argument of the `animate` method. - + diff --git a/docs/tutorial/animation_control_keyframes/01.js b/docs/tutorial/animation_control_keyframes/01.js new file mode 100644 index 000000000..40c0ba36d --- /dev/null +++ b/docs/tutorial/animation_control_keyframes/01.js @@ -0,0 +1,14 @@ +chart + .animate({ + config: { + channels: { + x: { + attach: 'Kinds' + }, + y: { + detach: 'Kinds' + } + } + } + }) + .activated.then((control) => control.seek('50%')) diff --git a/docs/tutorial/animation_control_keyframes/02_a.js b/docs/tutorial/animation_control_keyframes/02_a.js new file mode 100644 index 000000000..4b6be2a6e --- /dev/null +++ b/docs/tutorial/animation_control_keyframes/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Using initial animation control parameters' + } +}) diff --git a/docs/tutorial/animation_control_keyframes/02_b.js b/docs/tutorial/animation_control_keyframes/02_b.js new file mode 100644 index 000000000..97ded6930 --- /dev/null +++ b/docs/tutorial/animation_control_keyframes/02_b.js @@ -0,0 +1,20 @@ +chart + .animate( + { + config: { + channels: { + x: { + detach: ['Kinds'] + }, + y: { + attach: ['Kinds'] + } + } + } + }, + { + playState: 'paused', + position: 0.5 + } + ) + .activated.then((control) => control.play()) diff --git a/docs/tutorial/animation_control_keyframes/03_a.js b/docs/tutorial/animation_control_keyframes/03_a.js new file mode 100644 index 000000000..223ac128c --- /dev/null +++ b/docs/tutorial/animation_control_keyframes/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Using keyframes' + } +}) diff --git a/docs/tutorial/animation_control_keyframes/03_b.js b/docs/tutorial/animation_control_keyframes/03_b.js new file mode 100644 index 000000000..f125b558d --- /dev/null +++ b/docs/tutorial/animation_control_keyframes/03_b.js @@ -0,0 +1,37 @@ +chart.animate([ + { + target: { + config: { + channels: { + x: { + attach: ['Kinds'] + }, + y: { + detach: ['Kinds'] + } + }, + title: 'Using keyframes' + } + }, + options: { + duration: 0.5 + } + }, + { + target: { + config: { + channels: { + x: { + detach: ['Kinds'] + }, + y: { + attach: ['Kinds'] + } + } + } + }, + options: { + duration: 1 + } + } +]) diff --git a/docs/tutorial/animation_control_keyframes/config.js b/docs/tutorial/animation_control_keyframes/config.js new file mode 100644 index 000000000..01552a9d7 --- /dev/null +++ b/docs/tutorial/animation_control_keyframes/config.js @@ -0,0 +1,31 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [ + [ + 'config: {', + "config: {title: 'Jumping from 0% to 50% progress at the begining of the animation'," + ] + ] + }, + { + name: '01', + returnOriginal: true + } + ], + [ + '02_a', + { + name: '02_b', + returnOriginal: true + } + ], + [ + '03_a', + { + name: '03_b', + returnOriginal: true + } + ] +] diff --git a/test/e2e/tests/docs/tutorial/animation_control_keyframes.mjs b/test/e2e/tests/docs/tutorial/animation_control_keyframes.mjs new file mode 100644 index 000000000..924b83c6a --- /dev/null +++ b/test/e2e/tests/docs/tutorial/animation_control_keyframes.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'animation_control_keyframes' +) + +export default testSteps From 2a5a5622d5f18e483c58fe3cd831f60f901132d2 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 15:07:25 +0100 Subject: [PATCH 29/49] tutorial, rewrite shorthands --- docs/tutorial/shorthands_store.js | 213 ------------------ docs/tutorial/shorthands_store.md | 66 +----- docs/tutorial/shorthands_store/01.js | 5 + docs/tutorial/shorthands_store/02.js | 5 + docs/tutorial/shorthands_store/03_a.js | 5 + docs/tutorial/shorthands_store/03_b.js | 19 ++ docs/tutorial/shorthands_store/04_a.js | 5 + docs/tutorial/shorthands_store/04_b.js | 8 + docs/tutorial/shorthands_store/05_a.js | 5 + docs/tutorial/shorthands_store/05_b.js | 6 + docs/tutorial/shorthands_store/06_a.js | 5 + docs/tutorial/shorthands_store/06_b.js | 14 ++ docs/tutorial/shorthands_store/07_a.js | 5 + docs/tutorial/shorthands_store/07_b.js | 7 + docs/tutorial/shorthands_store/08.js | 16 ++ docs/tutorial/shorthands_store/09.js | 13 ++ docs/tutorial/shorthands_store/config.js | 27 +++ .../tests/docs/tutorial/shorthands_store.mjs | 8 + 18 files changed, 162 insertions(+), 270 deletions(-) delete mode 100644 docs/tutorial/shorthands_store.js create mode 100644 docs/tutorial/shorthands_store/01.js create mode 100644 docs/tutorial/shorthands_store/02.js create mode 100644 docs/tutorial/shorthands_store/03_a.js create mode 100644 docs/tutorial/shorthands_store/03_b.js create mode 100644 docs/tutorial/shorthands_store/04_a.js create mode 100644 docs/tutorial/shorthands_store/04_b.js create mode 100644 docs/tutorial/shorthands_store/05_a.js create mode 100644 docs/tutorial/shorthands_store/05_b.js create mode 100644 docs/tutorial/shorthands_store/06_a.js create mode 100644 docs/tutorial/shorthands_store/06_b.js create mode 100644 docs/tutorial/shorthands_store/07_a.js create mode 100644 docs/tutorial/shorthands_store/07_b.js create mode 100644 docs/tutorial/shorthands_store/08.js create mode 100644 docs/tutorial/shorthands_store/09.js create mode 100644 docs/tutorial/shorthands_store/config.js create mode 100644 test/e2e/tests/docs/tutorial/shorthands_store.mjs diff --git a/docs/tutorial/shorthands_store.js b/docs/tutorial/shorthands_store.js deleted file mode 100644 index d8e7514d5..000000000 --- a/docs/tutorial/shorthands_store.js +++ /dev/null @@ -1,213 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'When only the config property is used', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - config: { - align: 'stretch' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Store function' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'When just one series is used' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: { detach: 'Kinds' }, - x: { attach: 'Kinds' } - }, - align: 'none' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'When you use set and no other channel options' - } - }) - }, - (chart) => { - return chart.animate({ - config: { - channels: { - y: ['Kinds', 'Popularity'], - x: 'Genres' - } - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: "You don't have to use the channel object" - } - }) - }, - (chart) => { - return chart.animate({ - config: { - y: 'Kinds', - x: ['Genres', 'Popularity'] - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: "You don't have to use the keyframe object" - } - }) - }, - (chart) => { - return chart.animate([ - { - y: ['Genres', 'Popularity'], - x: 'Kinds' - }, - { - y: 'Kinds', - x: ['Genres', 'Popularity'] - } - ]) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Shorthand for styles' - } - }) - }, - (chart) => { - return chart.animate({ - style: { - 'plot.xAxis.label.fontSize': '150%', - 'plot.backgroundColor': '#A0A0A0' - } - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate( - { - style: null, - config: { - title: 'Store function', - align: 'stretch', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - label: { attach: 'Popularity' } - }, - color: { set: 'Kinds' } - } - }, - 0 - ) - }, - (chart) => { - return chart.animate({ - config: { - title: 'When you use set and no other channel options' - } - }) - }, - (chart) => { - return chart.animate({ - channels: { - // x: { attach: [ 'Kinds' ] }, - x: { - attach: 'Kinds' - }, - // y: { detach: [ 'Kinds' ] }, - y: { - detach: 'Kinds' - } - }, - align: 'none' - }) - } - ] - }, - { - anims: [ - (chart) => { - return chart.animate({ - style: null, - config: { - title: 'Store function', - align: 'stretch', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - label: { attach: 'Popularity' } - }, - color: { set: 'Kinds' } - } - }) - } - ] - } - ]) -}) diff --git a/docs/tutorial/shorthands_store.md b/docs/tutorial/shorthands_store.md index 0bcf027b8..fa9abfdad 100644 --- a/docs/tutorial/shorthands_store.md +++ b/docs/tutorial/shorthands_store.md @@ -20,11 +20,7 @@ animate method, you can simplify your code by using only the object of the // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - // config: { - align: 'stretch' - // } -}) +// {% include "tutorial/shorthands_store/01.js" %} ``` Let's save this state by calling the `store` function. @@ -32,9 +28,9 @@ Let's save this state by calling the `store` function.
```javascript -var snapshot; +var snapshot -snapshot = chart.store(); +snapshot = chart.store() ``` If you set/attach/detach just one series on a channel, you don't have to put @@ -44,23 +40,7 @@ that series into an array. Also, let's save this animation by calling the
```javascript -var animation; - -chart.animate({ - channels: { - // x: { attach: [ 'Kinds' ] }, - x: { - attach: 'Kinds' - }, - // y: { detach: [ 'Kinds' ] }, - y: { - detach: 'Kinds' - } - }, - align: 'none' -}).activated.then(control => { - animation = control.store(); -}); +// {% include "tutorial/shorthands_store/03_b.js" %} ``` If you use set on a channel and no other options like range, you don't have to @@ -70,14 +50,7 @@ can simply write the series' name after the channel name.
```javascript -chart.animate({ - channels: { - // y: { set: [ 'Kinds', 'Popularity' ] }, - y: ['Kinds', 'Popularity'], - // x: { set: [ 'Genres' ] }, - x: 'Genres' - } -}) +// {% include "tutorial/shorthands_store/04_b.js" %} ``` In any case, you can simply omit the `channel` object, `Vizzu` will @@ -86,12 +59,7 @@ automatically recognize the channels by their names.
```javascript -chart.animate({ - // channels: { - y: 'Kinds', - x: ['Genres', 'Popularity'] - // } -}) +// {% include "tutorial/shorthands_store/05_b.js" %} ``` If you have multiple keyframes, but with no animation options, you can omit the @@ -100,17 +68,7 @@ If you have multiple keyframes, but with no animation options, you can omit the
```javascript -chart.animate([{ - // target: { - y: ['Genres', 'Popularity'] - x: 'Kinds', - // } -}, { - // target: { - y: 'Kinds', - x: ['Genres', 'Popularity'] - // } -}]) +// {% include "tutorial/shorthands_store/06_b.js" %} ``` Instead of creating nested objects, you can set the styles like this. @@ -118,13 +76,7 @@ Instead of creating nested objects, you can set the styles like this.
```javascript -chart.animate({ - style: { - // plot: { xAxis: { label: { fontSize: '150%' } } } - 'plot.xAxis.label.fontSize': '150%', - 'plot.backgroundColor': '#A0A0A0' - } -}) +// {% include "tutorial/shorthands_store/07_b.js" %} ``` Shorthands feature can be switched off if not needed: @@ -149,4 +101,4 @@ You can also get back to a state that you previously stored. chart.animate(snapshot) ``` - + diff --git a/docs/tutorial/shorthands_store/01.js b/docs/tutorial/shorthands_store/01.js new file mode 100644 index 000000000..3f3a505c6 --- /dev/null +++ b/docs/tutorial/shorthands_store/01.js @@ -0,0 +1,5 @@ +chart.animate({ + // config: { + align: 'stretch' + // } +}) diff --git a/docs/tutorial/shorthands_store/02.js b/docs/tutorial/shorthands_store/02.js new file mode 100644 index 000000000..bae63888a --- /dev/null +++ b/docs/tutorial/shorthands_store/02.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Store function' + } +}) diff --git a/docs/tutorial/shorthands_store/03_a.js b/docs/tutorial/shorthands_store/03_a.js new file mode 100644 index 000000000..f289d0522 --- /dev/null +++ b/docs/tutorial/shorthands_store/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'When just one series is used' + } +}) diff --git a/docs/tutorial/shorthands_store/03_b.js b/docs/tutorial/shorthands_store/03_b.js new file mode 100644 index 000000000..9f813eaff --- /dev/null +++ b/docs/tutorial/shorthands_store/03_b.js @@ -0,0 +1,19 @@ +var animation + +chart + .animate({ + channels: { + // x: { attach: [ 'Kinds' ] }, + x: { + attach: 'Kinds' + }, + // y: { detach: [ 'Kinds' ] }, + y: { + detach: 'Kinds' + } + }, + align: 'none' + }) + .activated.then((control) => { + animation = control.store() + }) diff --git a/docs/tutorial/shorthands_store/04_a.js b/docs/tutorial/shorthands_store/04_a.js new file mode 100644 index 000000000..f248fd523 --- /dev/null +++ b/docs/tutorial/shorthands_store/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'When you use set and no other channel options' + } +}) diff --git a/docs/tutorial/shorthands_store/04_b.js b/docs/tutorial/shorthands_store/04_b.js new file mode 100644 index 000000000..c43a9ffbc --- /dev/null +++ b/docs/tutorial/shorthands_store/04_b.js @@ -0,0 +1,8 @@ +chart.animate({ + channels: { + // y: { set: [ 'Kinds', 'Popularity' ] }, + y: ['Kinds', 'Popularity'], + // x: { set: [ 'Genres' ] }, + x: 'Genres' + } +}) diff --git a/docs/tutorial/shorthands_store/05_a.js b/docs/tutorial/shorthands_store/05_a.js new file mode 100644 index 000000000..841d15eaa --- /dev/null +++ b/docs/tutorial/shorthands_store/05_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: "You don't have to use the channel object" + } +}) diff --git a/docs/tutorial/shorthands_store/05_b.js b/docs/tutorial/shorthands_store/05_b.js new file mode 100644 index 000000000..0ea0bd5ae --- /dev/null +++ b/docs/tutorial/shorthands_store/05_b.js @@ -0,0 +1,6 @@ +chart.animate({ + // channels: { + y: 'Kinds', + x: ['Genres', 'Popularity'] + // } +}) diff --git a/docs/tutorial/shorthands_store/06_a.js b/docs/tutorial/shorthands_store/06_a.js new file mode 100644 index 000000000..eb565da49 --- /dev/null +++ b/docs/tutorial/shorthands_store/06_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: "You don't have to use the keyframe object" + } +}) diff --git a/docs/tutorial/shorthands_store/06_b.js b/docs/tutorial/shorthands_store/06_b.js new file mode 100644 index 000000000..b6e9f9c48 --- /dev/null +++ b/docs/tutorial/shorthands_store/06_b.js @@ -0,0 +1,14 @@ +chart.animate([ + { + // target: { + x: 'Kinds', + y: ['Genres', 'Popularity'] + // } + }, + { + // target: { + x: ['Genres', 'Popularity'], + y: 'Kinds' + // } + } +]) diff --git a/docs/tutorial/shorthands_store/07_a.js b/docs/tutorial/shorthands_store/07_a.js new file mode 100644 index 000000000..d34fdbc81 --- /dev/null +++ b/docs/tutorial/shorthands_store/07_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Shorthand for styles' + } +}) diff --git a/docs/tutorial/shorthands_store/07_b.js b/docs/tutorial/shorthands_store/07_b.js new file mode 100644 index 000000000..f08c55474 --- /dev/null +++ b/docs/tutorial/shorthands_store/07_b.js @@ -0,0 +1,7 @@ +chart.animate({ + style: { + // plot: { xAxis: { label: { fontSize: '150%' } } } + 'plot.xAxis.label.fontSize': '150%', + 'plot.backgroundColor': '#A0A0A0' + } +}) diff --git a/docs/tutorial/shorthands_store/08.js b/docs/tutorial/shorthands_store/08.js new file mode 100644 index 000000000..9410c9300 --- /dev/null +++ b/docs/tutorial/shorthands_store/08.js @@ -0,0 +1,16 @@ +chart.animate( + { + style: null, + config: { + title: 'Store function', + align: 'stretch', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + label: { attach: 'Popularity' } + }, + color: { set: 'Kinds' } + } + }, + 0 +) diff --git a/docs/tutorial/shorthands_store/09.js b/docs/tutorial/shorthands_store/09.js new file mode 100644 index 000000000..25f78006e --- /dev/null +++ b/docs/tutorial/shorthands_store/09.js @@ -0,0 +1,13 @@ +chart.animate({ + style: null, + config: { + title: 'Store function', + align: 'stretch', + channels: { + y: { set: ['Popularity', 'Kinds'] }, + x: { set: 'Genres' }, + label: { attach: 'Popularity' } + }, + color: { set: 'Kinds' } + } +}) diff --git a/docs/tutorial/shorthands_store/config.js b/docs/tutorial/shorthands_store/config.js new file mode 100644 index 000000000..cf41f0956 --- /dev/null +++ b/docs/tutorial/shorthands_store/config.js @@ -0,0 +1,27 @@ +const animationStore = { + name: '03_b', + replace: [ + ['var animation\n\n', ''], + ['.activated.then((control) => {\n\t\tanimation = control.store()\n\t})', ''] + ] +} + +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'When only the config property is used',"]] + }, + { + name: '01' + } + ], + '02', + ['03_a', animationStore], + ['04_a', '04_b'], + ['05_a', '05_b'], + ['06_a', '06_b'], + ['07_a', '07_b'], + ['08', '04_a', animationStore], + '09' +] diff --git a/test/e2e/tests/docs/tutorial/shorthands_store.mjs b/test/e2e/tests/docs/tutorial/shorthands_store.mjs new file mode 100644 index 000000000..2be460207 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/shorthands_store.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'shorthands_store' +) + +export default testSteps From c08ae556137ec757731bcbec48f2c2b1593c3acf Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 15:31:29 +0100 Subject: [PATCH 30/49] fix lint --- .eslintrc.cjs | 8 ++++++++ docs/tutorial/.eslintrc.cjs | 6 ++++++ tools/docs/mkdocs.yml | 1 + 3 files changed, 15 insertions(+) create mode 100644 docs/tutorial/.eslintrc.cjs diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 9dda8bbe5..a9a95aeb1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -13,6 +13,14 @@ module.exports = { files: ['*.js', '*.mjs', '*.cjs'], extends: ['@vizzu/eslint-config/standard'] }, + { + files: ['docs/tutorial/shorthands_store/03_b.js'], + extends: ['@vizzu/eslint-config/standard'], + rules: { + 'no-var': 'off', + 'no-unused-vars': 'off' + } + }, { files: ['test/e2e/test_cases/**', 'test/e2e/test_data/**'], extends: ['@vizzu/eslint-config/standard'], diff --git a/docs/tutorial/.eslintrc.cjs b/docs/tutorial/.eslintrc.cjs new file mode 100644 index 000000000..dd7e60b5b --- /dev/null +++ b/docs/tutorial/.eslintrc.cjs @@ -0,0 +1,6 @@ +module.exports = { + globals: { + chart: true, + Vizzu: true + } +} diff --git a/tools/docs/mkdocs.yml b/tools/docs/mkdocs.yml index 1d1134b56..cdfe75948 100644 --- a/tools/docs/mkdocs.yml +++ b/tools/docs/mkdocs.yml @@ -77,6 +77,7 @@ plugins: - exclude: glob: - tutorial/assets/**.md + - tutorial/.eslintrc.cjs - mike: version_selector: true alias_type: symlink From 00febd929cb3993ca784facc7ca26eeb83c0403e Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 17:03:23 +0100 Subject: [PATCH 31/49] tutorial, rewrite filter --- docs/assets/javascripts/mdchart.js | 35 +++--- docs/tutorial/filter_add_new_records.js | 112 ------------------ docs/tutorial/filter_add_new_records.md | 34 +----- docs/tutorial/filter_add_new_records/01.js | 5 + docs/tutorial/filter_add_new_records/02_a.js | 5 + docs/tutorial/filter_add_new_records/02_b.js | 6 + docs/tutorial/filter_add_new_records/03_a.js | 5 + docs/tutorial/filter_add_new_records/03_b.js | 5 + docs/tutorial/filter_add_new_records/04_a.js | 5 + docs/tutorial/filter_add_new_records/04_b.js | 9 ++ .../tutorial/filter_add_new_records/config.js | 35 ++++++ 11 files changed, 100 insertions(+), 156 deletions(-) delete mode 100644 docs/tutorial/filter_add_new_records.js create mode 100644 docs/tutorial/filter_add_new_records/01.js create mode 100644 docs/tutorial/filter_add_new_records/02_a.js create mode 100644 docs/tutorial/filter_add_new_records/02_b.js create mode 100644 docs/tutorial/filter_add_new_records/03_a.js create mode 100644 docs/tutorial/filter_add_new_records/03_b.js create mode 100644 docs/tutorial/filter_add_new_records/04_a.js create mode 100644 docs/tutorial/filter_add_new_records/04_b.js create mode 100644 docs/tutorial/filter_add_new_records/config.js diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index c45666ed5..cb17e6b17 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -7,7 +7,7 @@ class MdChart { } async create(snippets) { - const animations = (await MdChart.loadAnimations(snippets)).map((anims) => ({ anims })) + const animations = await MdChart.loadAnimations(snippets) let chart = Promise.resolve() for (let i = 0; i < animations.length; i++) { const number = i + 1 @@ -71,7 +71,7 @@ class MdChart { }) for (let i = 0; i < snippet.anims.length; i++) { chart = chart.then((chart) => { - chart = snippet.anims[i](chart, {}) + chart = snippet.anims[i](chart, this.data, {}) if (this.id === 'tutorial' && firstRun && chart.activated) { chart.activated.then((control) => control.seek('100%')) } @@ -122,6 +122,7 @@ class MdChart { const returnOriginal = config?.returnOriginal return new Function( // eslint-disable-line no-new-func 'chart', + 'data', returnOriginal ? `${code}; return chart;` : `return ${code}` ) } catch (error) { @@ -137,31 +138,35 @@ class MdChart { } async function loadAnimation(animation) { + let func + let initDataFilter + const test = { func, initDataFilter } if (typeof animation === 'string') { - const func = await MdChart.loadAnimation(`${animation}.js`, baseUrl) - return (chart) => func(chart) + func = await MdChart.loadAnimation(`${animation}.js`, baseUrl) } else if (typeof animation === 'object' && animation.name) { const { name, ...config } = animation - const func = await MdChart.loadAnimation( - `${name}.js`, - Object.assign({}, config, baseUrl) - ) - return (chart) => func(chart) + func = await MdChart.loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl)) + if (config?.initDataFilter !== undefined) + test.initDataFilter = config.initDataFilter } + test.func = (chart, data) => func(chart, data) + return test } for (const animation of animations) { + const step = { anims: [] } if (Array.isArray(animation)) { - const animSteps = [] for (const subAnimation of animation) { - const func = await loadAnimation(subAnimation) - if (func) animSteps.push(func) + const test = await loadAnimation(subAnimation) + if (test?.func) step.anims.push(test.func) + if (test?.initDataFilter) step.initDataFilter = test.initDataFilter } - steps.push(animSteps) } else { - const func = await loadAnimation(animation) - if (func) steps.push([func]) + const test = await loadAnimation(animation) + if (test?.func) step.anims.push(test.func) + if (test?.initDataFilter) step.initDataFilter = test.initDataFilter } + steps.push(step) } return steps } diff --git a/docs/tutorial/filter_add_new_records.js b/docs/tutorial/filter_add_new_records.js deleted file mode 100644 index 7804d7434..000000000 --- a/docs/tutorial/filter_add_new_records.js +++ /dev/null @@ -1,112 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - mdchart.create([ - { - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Filter by one dimension', - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - } - } - }) - }, - (chart) => { - return chart.animate({ - data: { - filter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal' - } - }) - } - ] - }, - { - initDataFilter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal', - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Filter by two dimensions' - } - }) - }, - (chart) => { - return chart.animate({ - data: { - filter: (record) => - (record.Genres === 'Pop' || record.Genres === 'Metal') && - record.Kinds === 'Smooth' - } - }) - } - ] - }, - { - initDataFilter: (record) => - (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth', - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Filter off' - } - }) - }, - (chart) => { - return chart.animate({ - data: { - filter: null - } - }) - } - ] - }, - { - initDataFilter: (record) => record.Genres !== 'Soul', - anims: [ - (chart) => { - return chart.animate({ - config: { - title: 'Adding new records' - } - }) - }, - (chart) => { - const expandedData = JSON.parse(JSON.stringify(data)) - - expandedData.series[0].values.splice(5, 0, 'Soul') - expandedData.series[0].values.splice(9, 0, 'Soul') - expandedData.series[0].values.splice(14, 0, 'Soul') - - expandedData.series[1].values.splice(5, 0, 'Hard') - expandedData.series[1].values.splice(9, 0, 'Smooth') - expandedData.series[1].values.splice(14, 0, 'Experimental') - - expandedData.series[2].values.splice(5, 0, 91) - expandedData.series[2].values.splice(9, 0, 57) - expandedData.series[2].values.splice(14, 0, 115) - - expandedData.filter = null - - return chart.animate( - { - data: expandedData - }, - 2 - ) - } - ] - } - ]) -}) diff --git a/docs/tutorial/filter_add_new_records.md b/docs/tutorial/filter_add_new_records.md index 52475c236..6cf7459db 100644 --- a/docs/tutorial/filter_add_new_records.md +++ b/docs/tutorial/filter_add_new_records.md @@ -18,13 +18,7 @@ from the chart. // {% include-markdown "tutorial/assets/setup/setup_c.md" %} ```javascript -chart.animate({ - data: { - filter: record => - record['Genres'] == 'Pop' || - record['Genres'] == 'Metal', - } -}) +// {% include "tutorial/filter_add_new_records/01.js" %} ``` Now we add a cross-filter that includes items from both the `Genres` and the @@ -34,13 +28,7 @@ we weren't update the filter, `Vizzu` would use it in subsequent states.
```javascript -chart.animate({ - data: { - filter: record => - (record['Genres'] == 'Pop' || record['Genres'] == 'Metal') && - record['Kinds'] == 'Smooth' - } -}) +// {% include "tutorial/filter_add_new_records/02_b.js" %} ``` Switching the filter off to get back to the original view. @@ -48,11 +36,7 @@ Switching the filter off to get back to the original view.
```javascript -chart.animate({ - data: { - filter: null, - } -}) +// {% include "tutorial/filter_add_new_records/03_b.js" %} ``` Here we add another record to the data set and update the chart accordingly. @@ -60,15 +44,7 @@ Here we add another record to the data set and update the chart accordingly.
```javascript -chart.animate({ - data: { - records: [ - ['Soul', 'Hard', 91], - ['Soul', 'Smooth', 57], - ['Soul', 'Experimental', 115], - ] - } -}) +// {% include "tutorial/filter_add_new_records/04_b.js" %} ``` !!! info @@ -77,4 +53,4 @@ chart.animate({ function saves the config and style parameters of the chart into a variable but not the data. - + diff --git a/docs/tutorial/filter_add_new_records/01.js b/docs/tutorial/filter_add_new_records/01.js new file mode 100644 index 000000000..41a0ecc73 --- /dev/null +++ b/docs/tutorial/filter_add_new_records/01.js @@ -0,0 +1,5 @@ +chart.animate({ + data: { + filter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal' + } +}) diff --git a/docs/tutorial/filter_add_new_records/02_a.js b/docs/tutorial/filter_add_new_records/02_a.js new file mode 100644 index 000000000..e9832c105 --- /dev/null +++ b/docs/tutorial/filter_add_new_records/02_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Filter by two dimensions' + } +}) diff --git a/docs/tutorial/filter_add_new_records/02_b.js b/docs/tutorial/filter_add_new_records/02_b.js new file mode 100644 index 000000000..f6a0305aa --- /dev/null +++ b/docs/tutorial/filter_add_new_records/02_b.js @@ -0,0 +1,6 @@ +chart.animate({ + data: { + filter: (record) => + (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth' + } +}) diff --git a/docs/tutorial/filter_add_new_records/03_a.js b/docs/tutorial/filter_add_new_records/03_a.js new file mode 100644 index 000000000..5431f4286 --- /dev/null +++ b/docs/tutorial/filter_add_new_records/03_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Filter off' + } +}) diff --git a/docs/tutorial/filter_add_new_records/03_b.js b/docs/tutorial/filter_add_new_records/03_b.js new file mode 100644 index 000000000..b7061795f --- /dev/null +++ b/docs/tutorial/filter_add_new_records/03_b.js @@ -0,0 +1,5 @@ +chart.animate({ + data: { + filter: null + } +}) diff --git a/docs/tutorial/filter_add_new_records/04_a.js b/docs/tutorial/filter_add_new_records/04_a.js new file mode 100644 index 000000000..74d28d0a8 --- /dev/null +++ b/docs/tutorial/filter_add_new_records/04_a.js @@ -0,0 +1,5 @@ +chart.animate({ + config: { + title: 'Adding new records' + } +}) diff --git a/docs/tutorial/filter_add_new_records/04_b.js b/docs/tutorial/filter_add_new_records/04_b.js new file mode 100644 index 000000000..98dfdc28f --- /dev/null +++ b/docs/tutorial/filter_add_new_records/04_b.js @@ -0,0 +1,9 @@ +chart.animate({ + data: { + records: [ + ['Soul', 'Hard', 91], + ['Soul', 'Smooth', 57], + ['Soul', 'Experimental', 115] + ] + } +}) diff --git a/docs/tutorial/filter_add_new_records/config.js b/docs/tutorial/filter_add_new_records/config.js new file mode 100644 index 000000000..55cc791c5 --- /dev/null +++ b/docs/tutorial/filter_add_new_records/config.js @@ -0,0 +1,35 @@ +export default [ + [ + { + name: '../assets/setup/setup_c', + replace: [['config: {', "config: {title: 'Filter by one dimension',"]] + }, + '01' + ], + [ + { + name: '02_a', + initDataFilter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal' + }, + '02_b' + ], + [ + { + name: '03_a', + initDataFilter: (record) => + (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth' + }, + '03_b' + ], + [ + { + name: '04_a', + replace: [['config: {', 'data, config: {']], + initDataFilter: (record) => record.Genres !== 'Soul' + }, + { + name: '04_b', + replace: [['data: {', 'data: { filter: null,']] + } + ] +] From 7a7589d18b0e8e81bb21b4a794261246a6a6f7a1 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Mon, 4 Nov 2024 17:22:43 +0100 Subject: [PATCH 32/49] add test for filter tutorial chapter --- test/e2e/tests/docs/tutorial.mjs | 12 +++++++----- .../tests/docs/tutorial/filter_add_new_records.mjs | 8 ++++++++ 2 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 test/e2e/tests/docs/tutorial/filter_add_new_records.mjs diff --git a/test/e2e/tests/docs/tutorial.mjs b/test/e2e/tests/docs/tutorial.mjs index 05d127328..7b6b71d76 100644 --- a/test/e2e/tests/docs/tutorial.mjs +++ b/test/e2e/tests/docs/tutorial.mjs @@ -5,11 +5,13 @@ async function getTestSteps(dataFile, configName) { const configLoaded = await import(`../../../../docs/tutorial/${configName}/config.js`) const [data, config] = await Promise.all([dataLoaded, configLoaded]) - const animations = await MdChart.loadAnimations( - config.default, - `./docs/tutorial/${configName}`, - `../../../../../../docs/tutorial/${configName}` - ) + const animations = ( + await MdChart.loadAnimations( + config.default, + `./docs/tutorial/${configName}`, + `../../../../../../docs/tutorial/${configName}` + ) + ).map((obj) => obj.anims) animations.unshift((chart) => chart.animate({ data: data.default })) return animations.flat(Infinity) diff --git a/test/e2e/tests/docs/tutorial/filter_add_new_records.mjs b/test/e2e/tests/docs/tutorial/filter_add_new_records.mjs new file mode 100644 index 000000000..d3c1aba91 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/filter_add_new_records.mjs @@ -0,0 +1,8 @@ +import getTestSteps from '../tutorial.mjs' + +const testSteps = await getTestSteps( + '../../../../docs/assets/data/music_data.js', + 'filter_add_new_records' +) + +export default testSteps From 9612dfde374e5f17245bbcbbee178e79772a10fe Mon Sep 17 00:00:00 2001 From: David Vegh Date: Tue, 5 Nov 2024 13:39:30 +0100 Subject: [PATCH 33/49] tutorial, event base --- docs/assets/javascripts/mdchart.js | 39 +++++---- docs/tutorial/axes_title_tooltip/config.js | 8 +- docs/tutorial/events.md | 34 ++++---- docs/tutorial/events/01.js | 1 + docs/tutorial/events/02_a.js | 12 +++ docs/tutorial/events/02_b.js | 1 + docs/tutorial/events/03_a.js | 12 +++ docs/tutorial/events/03_b.js | 1 + docs/tutorial/events/04_a.js | 12 +++ docs/tutorial/events/04_b.js | 3 + docs/tutorial/events/config.js | 84 +++++++++++++++++++ .../tutorial/filter_add_new_records/config.js | 48 +++++------ docs/tutorial/shorthands_store/config.js | 4 +- 13 files changed, 191 insertions(+), 68 deletions(-) create mode 100644 docs/tutorial/events/01.js create mode 100644 docs/tutorial/events/02_a.js create mode 100644 docs/tutorial/events/02_b.js create mode 100644 docs/tutorial/events/03_a.js create mode 100644 docs/tutorial/events/03_b.js create mode 100644 docs/tutorial/events/04_a.js create mode 100644 docs/tutorial/events/04_b.js create mode 100644 docs/tutorial/events/config.js diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index cb17e6b17..d6f81228b 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -71,7 +71,7 @@ class MdChart { }) for (let i = 0; i < snippet.anims.length; i++) { chart = chart.then((chart) => { - chart = snippet.anims[i](chart, this.data, {}) + chart = snippet.anims[i](chart, this.data, snippet?.assets) if (this.id === 'tutorial' && firstRun && chart.activated) { chart.activated.then((control) => control.seek('100%')) } @@ -123,6 +123,7 @@ class MdChart { return new Function( // eslint-disable-line no-new-func 'chart', 'data', + 'assets', returnOriginal ? `${code}; return chart;` : `return ${code}` ) } catch (error) { @@ -138,33 +139,35 @@ class MdChart { } async function loadAnimation(animation) { - let func - let initDataFilter - const test = { func, initDataFilter } + let anim + const ans = { anim: undefined, assets: undefined } if (typeof animation === 'string') { - func = await MdChart.loadAnimation(`${animation}.js`, baseUrl) + anim = await MdChart.loadAnimation(`${animation}.js`, baseUrl) } else if (typeof animation === 'object' && animation.name) { const { name, ...config } = animation - func = await MdChart.loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl)) - if (config?.initDataFilter !== undefined) - test.initDataFilter = config.initDataFilter + anim = await MdChart.loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl)) + ans.assets = animation?.assets } - test.func = (chart, data) => func(chart, data) - return test + ans.anim = (chart, data, assets) => anim(chart, data, assets) + return ans } for (const animation of animations) { const step = { anims: [] } + + let subAnimations if (Array.isArray(animation)) { - for (const subAnimation of animation) { - const test = await loadAnimation(subAnimation) - if (test?.func) step.anims.push(test.func) - if (test?.initDataFilter) step.initDataFilter = test.initDataFilter - } + subAnimations = animation } else { - const test = await loadAnimation(animation) - if (test?.func) step.anims.push(test.func) - if (test?.initDataFilter) step.initDataFilter = test.initDataFilter + subAnimations = animation?.anims ?? [] + if (animation?.initDataFilter !== undefined) + step.initDataFilter = animation.initDataFilter + } + + for (const subAnimation of subAnimations) { + const ans = await loadAnimation(subAnimation) + step.anims.push(ans.anim) + if (ans.assets) step.assets = ans.assets } steps.push(step) } diff --git a/docs/tutorial/axes_title_tooltip/config.js b/docs/tutorial/axes_title_tooltip/config.js index bd19fffbf..e732da803 100644 --- a/docs/tutorial/axes_title_tooltip/config.js +++ b/docs/tutorial/axes_title_tooltip/config.js @@ -1,8 +1,8 @@ export default [ ['../assets/setup/setup_b', '01'], - '02', - '03', + ['02'], + ['03'], [{ name: '04_a', returnOriginal: true }, '04_b'], - '05', - { name: '06', returnOriginal: true } + ['05'], + [{ name: '06', returnOriginal: true }] ] diff --git a/docs/tutorial/events.md b/docs/tutorial/events.md index 273c6ca7e..1cb214253 100644 --- a/docs/tutorial/events.md +++ b/docs/tutorial/events.md @@ -18,16 +18,16 @@ block with information about the clicked chart element. ```javascript function clickHandler(event) { - alert(JSON.stringify(event.target)); + alert(JSON.stringify(event.target)) } -chart.on('click', clickHandler); +// {% include "tutorial/events/01.js" %} ``` Unregistering the previously registered handler. ```javascript -chart.off('click', clickHandler); +chart.off('click', clickHandler) ``` Here we override the axis label color for `Jazz` to red and all others to gray. @@ -37,16 +37,16 @@ Here we override the axis label color for `Jazz` to red and all others to gray. ```javascript function labelDrawHandler(event) { event.renderingContext.fillStyle = - (event.target.value === 'Jazz') ? 'red' : 'gray'; + (event.target.value === 'Jazz') ? 'red' : 'gray' } -chart.on('plot-axis-label-draw', labelDrawHandler); +// {% include "tutorial/events/02_b.js" %} ``` Unregistering the previously registered handler. ```javascript -chart.off('plot-axis-label-draw', labelDrawHandler); +chart.off('plot-axis-label-draw', labelDrawHandler) ``` The default behaviour of all events can be blocked by calling the event's @@ -57,16 +57,16 @@ bottom right corner of the chart. ```javascript function logoDrawHandler(event) { - event.preventDefault(); + event.preventDefault() } -chart.on('logo-draw', logoDrawHandler); +// {% include "tutorial/events/03_b.js" %} ``` Unregistering the previously registered handler. ```javascript -chart.off('logo-draw', logoDrawHandler); +chart.off('logo-draw', logoDrawHandler) ``` You can also add a background image to the chart using the `preventDefault` @@ -75,24 +75,22 @@ method.
```javascript -const image = new Image(); +const image = new Image() +image.src = 'data:image/gif;base64,R0lGODlhAwACAPIAAJLf6q/i7M/r8un0+PT6+/n8/QAAAAAAACH5BAQAAAAALAAAAAADAAIAAAMEWBMkkAA7' function backgroundImageHandler(event) { event.renderingContext.drawImage(image, 0, 0, - event.detail.rect.size.x, event.detail.rect.size.y); - event.preventDefault(); + event.detail.rect.size.x, event.detail.rect.size.y) + event.preventDefault() } -image.src = 'data:image/gif;base64,R0lGODlhAwACAPIAAJLf6q/i7M/r8un0+PT6+/n8/QAAAAAAACH5BAQAAAAALAAAAAADAAIAAAMEWBMkkAA7'; -image.onload = () => { - chart.on('background-draw', backgroundImageHandler); -}; +// {% include "tutorial/events/04_b.js" %} ``` Unregistering the previously registered handler. ```javascript -chart.off('background-draw', backgroundImageHandler); +chart.off('background-draw', backgroundImageHandler) ``` - + diff --git a/docs/tutorial/events/01.js b/docs/tutorial/events/01.js new file mode 100644 index 000000000..e4b9f34b9 --- /dev/null +++ b/docs/tutorial/events/01.js @@ -0,0 +1 @@ +chart.on('click', clickHandler) diff --git a/docs/tutorial/events/02_a.js b/docs/tutorial/events/02_a.js new file mode 100644 index 000000000..9ce30463a --- /dev/null +++ b/docs/tutorial/events/02_a.js @@ -0,0 +1,12 @@ +try { + chart.off('plot-axis-label-draw', assets.eventHandler) +} catch (error) { + if (!error.toString().includes('unknown event handler')) { + throw error + } +} +chart = chart.animate({ + config: { + title: 'Changing the canvas context before label draw' + } +}) diff --git a/docs/tutorial/events/02_b.js b/docs/tutorial/events/02_b.js new file mode 100644 index 000000000..d2938d0e9 --- /dev/null +++ b/docs/tutorial/events/02_b.js @@ -0,0 +1 @@ +chart.on('plot-axis-label-draw', labelDrawHandler) diff --git a/docs/tutorial/events/03_a.js b/docs/tutorial/events/03_a.js new file mode 100644 index 000000000..5589072c5 --- /dev/null +++ b/docs/tutorial/events/03_a.js @@ -0,0 +1,12 @@ +try { + chart.off('logo-draw', assets.eventHandler) +} catch (error) { + if (!error.toString().includes('unknown event handler')) { + throw error + } +} +chart = chart.animate({ + config: { + title: 'Prevent default behavior' + } +}) diff --git a/docs/tutorial/events/03_b.js b/docs/tutorial/events/03_b.js new file mode 100644 index 000000000..4514e3cc6 --- /dev/null +++ b/docs/tutorial/events/03_b.js @@ -0,0 +1 @@ +chart.on('logo-draw', logoDrawHandler) diff --git a/docs/tutorial/events/04_a.js b/docs/tutorial/events/04_a.js new file mode 100644 index 000000000..6c76540d8 --- /dev/null +++ b/docs/tutorial/events/04_a.js @@ -0,0 +1,12 @@ +try { + chart.off('background-draw', assets.eventHandler) +} catch (error) { + if (!error.toString().includes('unknown event handler')) { + throw error + } +} +chart = chart.animate({ + config: { + title: 'Add background image' + } +}) diff --git a/docs/tutorial/events/04_b.js b/docs/tutorial/events/04_b.js new file mode 100644 index 000000000..b6fc6a635 --- /dev/null +++ b/docs/tutorial/events/04_b.js @@ -0,0 +1,3 @@ +image.onload = () => { + chart.on('background-draw', backgroundImageHandler) +} diff --git a/docs/tutorial/events/config.js b/docs/tutorial/events/config.js new file mode 100644 index 000000000..532ec0b6a --- /dev/null +++ b/docs/tutorial/events/config.js @@ -0,0 +1,84 @@ +const renderingUpdate = 'chart.feature.rendering.update()' +const unknownEvent = "if (!error.toString().includes('unknown event handler')) throw error" + +const image = new Image() +image.src = + 'data:image/gif;base64,R0lGODlhAwACAPIAAJLf6q/i7M/r8un0+PT6+/n8/QAAAAAAACH5BAQAAAAALAAAAAADAAIAAAMEWBMkkAA7' + +export default [ + [ + { + name: '../assets/setup/setup_c', + returnOriginal: true, + replace: [ + [ + 'chart.animate', + `try { chart.off('click', assets.eventHandler) } catch (error) { ${unknownEvent} }; chart = chart.animate` + ], + ['config: {', "config: {title: 'Click event added to markers',"] + ] + }, + { + name: '01', + returnOriginal: true, + replace: [['clickHandler)', `assets.eventHandler);${renderingUpdate}`]], + assets: { eventHandler: (event) => alert(JSON.stringify(event.target)) } + } + ], + [ + { + name: '02_a', + returnOriginal: true + }, + { + name: '02_b', + returnOriginal: true, + replace: [['labelDrawHandler)', `assets.eventHandler);${renderingUpdate}`]], + assets: { + eventHandler: (event) => { + event.renderingContext.fillStyle = + event.target.value === 'Jazz' ? 'red' : 'gray' + } + } + } + ], + [ + { + name: '03_a', + returnOriginal: true + }, + { + name: '03_b', + returnOriginal: true, + replace: [['logoDrawHandler)', `assets.eventHandler);${renderingUpdate}`]], + assets: { + eventHandler: (event) => { + event.preventDefault() + } + } + } + ], + [ + { + name: '04_a', + returnOriginal: true + }, + { + name: '04_b', + returnOriginal: true, + replace: [['backgroundImageHandler)', `backgroundImageHandler);${renderingUpdate}`]], + assets: { + eventHandler: (event) => { + event.renderingContext.drawImage( + image, + 0, + 0, + event.detail.rect.size.x, + event.detail.rect.size.y + ) + event.preventDefault() + } + } + } + ] +] diff --git a/docs/tutorial/filter_add_new_records/config.js b/docs/tutorial/filter_add_new_records/config.js index 55cc791c5..09d8c1ffb 100644 --- a/docs/tutorial/filter_add_new_records/config.js +++ b/docs/tutorial/filter_add_new_records/config.js @@ -6,30 +6,26 @@ export default [ }, '01' ], - [ - { - name: '02_a', - initDataFilter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal' - }, - '02_b' - ], - [ - { - name: '03_a', - initDataFilter: (record) => - (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth' - }, - '03_b' - ], - [ - { - name: '04_a', - replace: [['config: {', 'data, config: {']], - initDataFilter: (record) => record.Genres !== 'Soul' - }, - { - name: '04_b', - replace: [['data: {', 'data: { filter: null,']] - } - ] + { + initDataFilter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal', + anims: ['02_a', '02_b'] + }, + { + initDataFilter: (record) => + (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth', + anims: ['03_a', '03_b'] + }, + { + initDataFilter: (record) => record.Genres !== 'Soul', + anims: [ + { + name: '04_a', + replace: [['config: {', 'data, config: {']] + }, + { + name: '04_b', + replace: [['data: {', 'data: { filter: null,']] + } + ] + } ] diff --git a/docs/tutorial/shorthands_store/config.js b/docs/tutorial/shorthands_store/config.js index cf41f0956..5bd75e312 100644 --- a/docs/tutorial/shorthands_store/config.js +++ b/docs/tutorial/shorthands_store/config.js @@ -16,12 +16,12 @@ export default [ name: '01' } ], - '02', + ['02'], ['03_a', animationStore], ['04_a', '04_b'], ['05_a', '05_b'], ['06_a', '06_b'], ['07_a', '07_b'], ['08', '04_a', animationStore], - '09' + ['09'] ] From c491d8dc1ad34535b3eca765cf3fc07bb8dab551 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Tue, 5 Nov 2024 22:35:09 +0100 Subject: [PATCH 34/49] tutorial, rewrite events, test not working --- docs/tutorial/.eslintrc.cjs | 8 +- docs/tutorial/events.js | 140 ----------- docs/tutorial/events/config.js | 18 +- package-lock.json | 424 +++++++++++++++++++++++++++++++++ package.json | 1 + 5 files changed, 449 insertions(+), 142 deletions(-) delete mode 100644 docs/tutorial/events.js diff --git a/docs/tutorial/.eslintrc.cjs b/docs/tutorial/.eslintrc.cjs index dd7e60b5b..2e56c9e05 100644 --- a/docs/tutorial/.eslintrc.cjs +++ b/docs/tutorial/.eslintrc.cjs @@ -1,6 +1,12 @@ module.exports = { globals: { chart: true, - Vizzu: true + Vizzu: true, + assets: true, + image: true, + clickHandler: true, + labelDrawHandler: true, + logoDrawHandler: true, + backgroundImageHandler: true } } diff --git a/docs/tutorial/events.js b/docs/tutorial/events.js deleted file mode 100644 index cba84feda..000000000 --- a/docs/tutorial/events.js +++ /dev/null @@ -1,140 +0,0 @@ -const dataLoaded = import('../assets/data/music_data.js') -const mdChartLoaded = import('../assets/javascripts/mdchart.js') - -Promise.all([dataLoaded, mdChartLoaded]).then((results) => { - const data = results[0].default - const MdChart = results[1].default - const mdchart = new MdChart(data, 'tutorial') - - const clickHandler = (event) => { - alert(JSON.stringify(event.target)) // eslint-disable-line no-alert - } - - const labelDrawHandler = (event) => { - event.renderingContext.fillStyle = event.target.value === 'Jazz' ? 'red' : 'gray' - } - - const logoDrawHandler = (event) => { - event.preventDefault() - } - - const image = new Image() - image.src = - 'data:image/gif;base64,R0lGODlhAwACAPIAAJLf6q/i7M/r8un0+PT6+/n8/QAAAAAAACH5BAQAAAAALAAAAAADAAIAAAMEWBMkkAA7' - - const backgroundImageHandler = (event) => { - event.renderingContext.drawImage( - image, - 0, - 0, - event.detail.rect.size.x, - event.detail.rect.size.y - ) - event.preventDefault() - } - - mdchart.create([ - { - anims: [ - (chart) => { - try { - chart.off('click', clickHandler) - } catch (error) { - if (!error.toString().includes('unknown event handler')) { - throw error - } - } - return chart.animate({ - config: { - channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, - color: { set: 'Kinds' }, - label: { set: 'Popularity' } - }, - title: 'Click event added to markers' - } - }) - }, - (chart) => { - chart.on('click', clickHandler) - chart.feature.rendering.update() - return chart - } - ] - }, - { - anims: [ - (chart) => { - try { - chart.off('plot-axis-label-draw', labelDrawHandler) - } catch (error) { - if (!error.toString().includes('unknown event handler')) { - throw error - } - } - return chart.animate({ - config: { - title: 'Changing the canvas context before label draw' - } - }) - }, - (chart) => { - chart.on('plot-axis-label-draw', labelDrawHandler) - chart.feature.rendering.update() - return chart - } - ] - }, - { - anims: [ - (chart) => { - try { - chart.off('logo-draw', logoDrawHandler) - } catch (error) { - if (!error.toString().includes('unknown event handler')) { - throw error - } - } - return chart.animate({ - config: { - title: 'Prevent default behavior' - } - }) - }, - (chart) => { - chart.on('logo-draw', logoDrawHandler) - chart.feature.rendering.update() - return chart - } - ] - }, - { - anims: [ - (chart) => { - try { - chart.off('background-draw', backgroundImageHandler) - } catch (error) { - if (!error.toString().includes('unknown event handler')) { - throw error - } - } - return chart.animate({ - config: { - title: 'Add background image' - } - }) - }, - (chart) => { - const registerHandler = () => { - chart.on('background-draw', backgroundImageHandler) - chart.feature.rendering.update() - } - if (!image.complete) image.onload = registerHandler - else registerHandler() - return chart - } - ] - } - ]) -}) diff --git a/docs/tutorial/events/config.js b/docs/tutorial/events/config.js index 532ec0b6a..59a30e68d 100644 --- a/docs/tutorial/events/config.js +++ b/docs/tutorial/events/config.js @@ -1,9 +1,18 @@ const renderingUpdate = 'chart.feature.rendering.update()' const unknownEvent = "if (!error.toString().includes('unknown event handler')) throw error" +let Image +if (typeof window === 'undefined') { + const { Image: NodeImage } = await import('canvas') + Image = NodeImage +} else { + Image = window.Image +} const image = new Image() image.src = 'data:image/gif;base64,R0lGODlhAwACAPIAAJLf6q/i7M/r8un0+PT6+/n8/QAAAAAAACH5BAQAAAAALAAAAAADAAIAAAMEWBMkkAA7' +const imageComplete = + 'if (!assets.image.complete) assets.image.onload = registerHandler; else registerHandler()' export default [ [ @@ -66,8 +75,15 @@ export default [ { name: '04_b', returnOriginal: true, - replace: [['backgroundImageHandler)', `backgroundImageHandler);${renderingUpdate}`]], + replace: [ + ['image.onload', 'const registerHandler '], + [ + 'backgroundImageHandler)\n}', + `assets.eventHandler);${renderingUpdate}};${imageComplete}` + ] + ], assets: { + image, eventHandler: (event) => { event.renderingContext.drawImage( image, diff --git a/package-lock.json b/package-lock.json index 5f60dd23e..0e1ea90cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "aggregate-error": "^5.0.0", "ajv": "8.12.0", "axios": "^1.5.1", + "canvas": "^2.11.2", "check-dts": "^0.7.2", "colors": "^1.4.0", "eslint": "^8.49.0", @@ -1323,6 +1324,75 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mapbox/node-pre-gyp": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz", + "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==", + "dev": true, + "dependencies": { + "detect-libc": "^2.0.0", + "https-proxy-agent": "^5.0.0", + "make-dir": "^3.1.0", + "node-fetch": "^2.6.7", + "nopt": "^5.0.0", + "npmlog": "^5.0.1", + "rimraf": "^3.0.2", + "semver": "^7.3.5", + "tar": "^6.1.11" + }, + "bin": { + "node-pre-gyp": "bin/node-pre-gyp" + } + }, + "node_modules/@mapbox/node-pre-gyp/node_modules/agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "dev": true, + "dependencies": { + "debug": "4" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/@mapbox/node-pre-gyp/node_modules/https-proxy-agent": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", + "dev": true, + "dependencies": { + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", + "dev": true, + "dependencies": { + "semver": "^6.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@mapbox/node-pre-gyp/node_modules/make-dir/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1803,6 +1873,12 @@ "prettier": "^3.1.0" } }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", + "dev": true + }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -1951,6 +2027,26 @@ "node": ">= 8" } }, + "node_modules/aproba": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", + "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==", + "dev": true + }, + "node_modules/are-we-there-yet": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz", + "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==", + "deprecated": "This package is no longer supported.", + "dev": true, + "dependencies": { + "delegates": "^1.0.0", + "readable-stream": "^3.6.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -2584,6 +2680,21 @@ } ] }, + "node_modules/canvas": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz", + "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "@mapbox/node-pre-gyp": "^1.0.0", + "nan": "^2.17.0", + "simple-get": "^3.0.3" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -2630,6 +2741,15 @@ "typescript": ">=4.0.0" } }, + "node_modules/chownr": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/chromium-bidi": { "version": "0.5.12", "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.12.tgz", @@ -2743,6 +2863,15 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/color-support": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", + "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==", + "dev": true, + "bin": { + "color-support": "bin.js" + } + }, "node_modules/colors": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", @@ -2776,6 +2905,12 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==", + "dev": true + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -2914,6 +3049,18 @@ } } }, + "node_modules/decompress-response": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", + "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", + "dev": true, + "dependencies": { + "mimic-response": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/dedent": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz", @@ -3000,6 +3147,12 @@ "node": ">=0.4.0" } }, + "node_modules/delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==", + "dev": true + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -3019,6 +3172,15 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -4213,6 +4375,36 @@ "node": ">=14.14" } }, + "node_modules/fs-minipass": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", + "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", + "dev": true, + "dependencies": { + "minipass": "^3.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/fs-minipass/node_modules/minipass": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fs-minipass/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -4269,6 +4461,27 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gauge": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz", + "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==", + "deprecated": "This package is no longer supported.", + "dev": true, + "dependencies": { + "aproba": "^1.0.3 || ^2.0.0", + "color-support": "^1.1.2", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.1", + "object-assign": "^4.1.1", + "signal-exit": "^3.0.0", + "string-width": "^4.2.3", + "strip-ansi": "^6.0.1", + "wide-align": "^1.1.2" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -4602,6 +4815,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==", + "dev": true + }, "node_modules/hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -6275,6 +6494,18 @@ "node": ">=6" } }, + "node_modules/mimic-response": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz", + "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/minimatch": { "version": "9.0.3", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", @@ -6299,6 +6530,46 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/minipass": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", + "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/minizlib": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", + "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", + "dev": true, + "dependencies": { + "minipass": "^3.0.0", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/minizlib/node_modules/minipass": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz", + "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minizlib/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/mitt": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", @@ -6327,12 +6598,30 @@ "node": ">=0.10.0" } }, + "node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true, + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/nan": { + "version": "2.22.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.22.0.tgz", + "integrity": "sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==", + "dev": true + }, "node_modules/nanospinner": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/nanospinner/-/nanospinner-1.1.0.tgz", @@ -6410,6 +6699,21 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, + "node_modules/nopt": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz", + "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==", + "dev": true, + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/normalize-package-data": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", @@ -6637,6 +6941,28 @@ "node": ">=8" } }, + "node_modules/npmlog": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz", + "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==", + "deprecated": "This package is no longer supported.", + "dev": true, + "dependencies": { + "are-we-there-yet": "^2.0.0", + "console-control-strings": "^1.1.0", + "gauge": "^3.0.0", + "set-blocking": "^2.0.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.13.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", @@ -7516,6 +7842,20 @@ "node": ">=4" } }, + "node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dev": true, + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", @@ -7845,6 +8185,12 @@ "node": ">= 0.8.0" } }, + "node_modules/set-blocking": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", + "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==", + "dev": true + }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -7985,6 +8331,37 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "node_modules/simple-concat": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz", + "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/simple-get": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz", + "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==", + "dev": true, + "dependencies": { + "decompress-response": "^4.2.0", + "once": "^1.3.1", + "simple-concat": "^1.0.0" + } + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", @@ -8144,6 +8521,15 @@ "bare-events": "^2.2.0" } }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dev": true, + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -8308,6 +8694,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tar": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz", + "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==", + "dev": true, + "dependencies": { + "chownr": "^2.0.0", + "fs-minipass": "^2.0.0", + "minipass": "^5.0.0", + "minizlib": "^2.1.1", + "mkdirp": "^1.0.3", + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/tar-fs": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz", @@ -8333,6 +8736,12 @@ "streamx": "^2.15.0" } }, + "node_modules/tar/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/terser": { "version": "5.29.2", "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz", @@ -8798,6 +9207,12 @@ "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==", "dev": true }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true + }, "node_modules/utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -8994,6 +9409,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/wide-align": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz", + "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==", + "dev": true, + "dependencies": { + "string-width": "^1.0.2 || 2 || 3 || 4" + } + }, "node_modules/wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", diff --git a/package.json b/package.json index db55b8ac8..6316a5d37 100644 --- a/package.json +++ b/package.json @@ -134,6 +134,7 @@ "aggregate-error": "^5.0.0", "ajv": "8.12.0", "axios": "^1.5.1", + "canvas": "^2.11.2", "check-dts": "^0.7.2", "colors": "^1.4.0", "eslint": "^8.49.0", From 0d28ab00ec1b23ffe5c2858b2ed5601f443a56c7 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 10:40:50 +0100 Subject: [PATCH 35/49] tutiral, add test for events --- docs/assets/javascripts/mdchart.js | 18 +- docs/tutorial/events/config.js | 157 +++++++++--------- .../tutorial/filter_add_new_records/config.js | 12 +- test/e2e/tests/docs/tutorial.mjs | 4 +- test/e2e/tests/docs/tutorial/events.mjs | 29 ++++ 5 files changed, 127 insertions(+), 93 deletions(-) create mode 100644 test/e2e/tests/docs/tutorial/events.mjs diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index d6f81228b..634b9201a 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -31,9 +31,8 @@ class MdChart { if (prevChart) { animTarget.config = Object.assign({}, prevChart.config) animTarget.style = Object.assign({}, prevChart.style) - // remove if it can be found in the prevChart - if (snippet.initDataFilter) { - animTarget.data = { filter: snippet.initDataFilter } + if (snippet?.assets?.initDataFilter) { + animTarget.data = { filter: snippet.assets.initDataFilter } } } } @@ -140,16 +139,13 @@ class MdChart { async function loadAnimation(animation) { let anim - const ans = { anim: undefined, assets: undefined } if (typeof animation === 'string') { anim = await MdChart.loadAnimation(`${animation}.js`, baseUrl) } else if (typeof animation === 'object' && animation.name) { const { name, ...config } = animation anim = await MdChart.loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl)) - ans.assets = animation?.assets } - ans.anim = (chart, data, assets) => anim(chart, data, assets) - return ans + return (chart, data, assets) => anim(chart, data, assets) } for (const animation of animations) { @@ -160,14 +156,12 @@ class MdChart { subAnimations = animation } else { subAnimations = animation?.anims ?? [] - if (animation?.initDataFilter !== undefined) - step.initDataFilter = animation.initDataFilter + if (animation?.assets) step.assets = animation.assets } for (const subAnimation of subAnimations) { - const ans = await loadAnimation(subAnimation) - step.anims.push(ans.anim) - if (ans.assets) step.assets = ans.assets + const anim = await loadAnimation(subAnimation) + step.anims.push(anim) } steps.push(step) } diff --git a/docs/tutorial/events/config.js b/docs/tutorial/events/config.js index 59a30e68d..e4c16666b 100644 --- a/docs/tutorial/events/config.js +++ b/docs/tutorial/events/config.js @@ -15,86 +15,93 @@ const imageComplete = 'if (!assets.image.complete) assets.image.onload = registerHandler; else registerHandler()' export default [ - [ - { - name: '../assets/setup/setup_c', - returnOriginal: true, - replace: [ - [ - 'chart.animate', - `try { chart.off('click', assets.eventHandler) } catch (error) { ${unknownEvent} }; chart = chart.animate` - ], - ['config: {', "config: {title: 'Click event added to markers',"] - ] - }, - { - name: '01', - returnOriginal: true, - replace: [['clickHandler)', `assets.eventHandler);${renderingUpdate}`]], - assets: { eventHandler: (event) => alert(JSON.stringify(event.target)) } - } - ], - [ - { - name: '02_a', - returnOriginal: true + { + assets: { eventHandler: (event) => alert(JSON.stringify(event.target)) }, + anims: [ + { + name: '../assets/setup/setup_c', + returnOriginal: true, + replace: [ + [ + 'chart.animate', + `try { chart.off('click', assets.eventHandler) } catch (error) { ${unknownEvent} }; chart = chart.animate` + ], + ['config: {', "config: {title: 'Click event added to markers',"] + ] + }, + { + name: '01', + returnOriginal: true, + replace: [['clickHandler)', `assets.eventHandler);${renderingUpdate}`]] + } + ] + }, + { + assets: { + eventHandler: (event) => { + event.renderingContext.fillStyle = event.target.value === 'Jazz' ? 'red' : 'gray' + } }, - { - name: '02_b', - returnOriginal: true, - replace: [['labelDrawHandler)', `assets.eventHandler);${renderingUpdate}`]], - assets: { - eventHandler: (event) => { - event.renderingContext.fillStyle = - event.target.value === 'Jazz' ? 'red' : 'gray' - } + anims: [ + { + name: '02_a', + returnOriginal: true + }, + { + name: '02_b', + returnOriginal: true, + replace: [['labelDrawHandler)', `assets.eventHandler);${renderingUpdate}`]] + } + ] + }, + { + assets: { + eventHandler: (event) => { + event.preventDefault() } - } - ], - [ - { - name: '03_a', - returnOriginal: true }, - { - name: '03_b', - returnOriginal: true, - replace: [['logoDrawHandler)', `assets.eventHandler);${renderingUpdate}`]], - assets: { - eventHandler: (event) => { - event.preventDefault() - } + anims: [ + { + name: '03_a', + returnOriginal: true + }, + { + name: '03_b', + returnOriginal: true, + replace: [['logoDrawHandler)', `assets.eventHandler);${renderingUpdate}`]] + } + ] + }, + { + assets: { + image, + eventHandler: (event) => { + event.renderingContext.drawImage( + image, + 0, + 0, + event.detail.rect.size.x, + event.detail.rect.size.y + ) + event.preventDefault() } - } - ], - [ - { - name: '04_a', - returnOriginal: true }, - { - name: '04_b', - returnOriginal: true, - replace: [ - ['image.onload', 'const registerHandler '], - [ - 'backgroundImageHandler)\n}', - `assets.eventHandler);${renderingUpdate}};${imageComplete}` + anims: [ + { + name: '04_a', + returnOriginal: true + }, + { + name: '04_b', + returnOriginal: true, + replace: [ + ['image.onload', 'const registerHandler '], + [ + 'backgroundImageHandler)\n}', + `assets.eventHandler);${renderingUpdate}};${imageComplete}` + ] ] - ], - assets: { - image, - eventHandler: (event) => { - event.renderingContext.drawImage( - image, - 0, - 0, - event.detail.rect.size.x, - event.detail.rect.size.y - ) - event.preventDefault() - } } - } - ] + ] + } ] diff --git a/docs/tutorial/filter_add_new_records/config.js b/docs/tutorial/filter_add_new_records/config.js index 09d8c1ffb..8924de89a 100644 --- a/docs/tutorial/filter_add_new_records/config.js +++ b/docs/tutorial/filter_add_new_records/config.js @@ -7,16 +7,20 @@ export default [ '01' ], { - initDataFilter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal', + assets: { + initDataFilter: (record) => record.Genres === 'Pop' || record.Genres === 'Metal' + }, anims: ['02_a', '02_b'] }, { - initDataFilter: (record) => - (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth', + assets: { + initDataFilter: (record) => + (record.Genres === 'Pop' || record.Genres === 'Metal') && record.Kinds === 'Smooth' + }, anims: ['03_a', '03_b'] }, { - initDataFilter: (record) => record.Genres !== 'Soul', + assets: { initDataFilter: (record) => record.Genres !== 'Soul' }, anims: [ { name: '04_a', diff --git a/test/e2e/tests/docs/tutorial.mjs b/test/e2e/tests/docs/tutorial.mjs index 7b6b71d76..a5ede016c 100644 --- a/test/e2e/tests/docs/tutorial.mjs +++ b/test/e2e/tests/docs/tutorial.mjs @@ -1,8 +1,8 @@ import MdChart from '../../../../docs/assets/javascripts/mdchart.js' async function getTestSteps(dataFile, configName) { - const dataLoaded = await import(dataFile) - const configLoaded = await import(`../../../../docs/tutorial/${configName}/config.js`) + const dataLoaded = import(dataFile) + const configLoaded = import(`../../../../docs/tutorial/${configName}/config.js`) const [data, config] = await Promise.all([dataLoaded, configLoaded]) const animations = ( diff --git a/test/e2e/tests/docs/tutorial/events.mjs b/test/e2e/tests/docs/tutorial/events.mjs new file mode 100644 index 000000000..55a2a7875 --- /dev/null +++ b/test/e2e/tests/docs/tutorial/events.mjs @@ -0,0 +1,29 @@ +import MdChart from '../../../../../docs/assets/javascripts/mdchart.js' + +async function getTestSteps(dataFile, configName) { + const dataLoaded = import(dataFile) + const configLoaded = import(`../../../../../docs/tutorial/${configName}/config.js`) + const [data, config] = await Promise.all([dataLoaded, configLoaded]) + + const baseUrl = { + nodeBaseUrl: `./docs/tutorial/${configName}`, + browserBaseUrl: `../../../../../docs/tutorial/${configName}` + } + + const steps = [] + for (const animation of config.default) { + for (const subAnimation of animation.anims) { + const func = await MdChart.loadAnimation( + `${subAnimation.name}.js`, + Object.assign({}, subAnimation, baseUrl) + ) + steps.push((chart) => func(chart, data.default, animation?.assets)) + } + } + + steps.unshift((chart) => chart.animate({ data: data.default })) + return steps +} + +const testSteps = await getTestSteps('../../../../../docs/assets/data/music_data.js', 'events') +export default testSteps From 577c31230c03df7935125cdcfdff1a9626b0f172 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 10:47:51 +0100 Subject: [PATCH 36/49] tutorial, fix geometry chapter --- docs/tutorial/geometry/01.js | 4 +++- docs/tutorial/geometry/02_b.js | 4 +++- docs/tutorial/geometry/03_b.js | 4 +++- docs/tutorial/geometry/04_b.js | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/geometry/01.js b/docs/tutorial/geometry/01.js index 0176f6fbf..74444f23c 100644 --- a/docs/tutorial/geometry/01.js +++ b/docs/tutorial/geometry/01.js @@ -1,3 +1,5 @@ chart.animate({ - geometry: 'area' + config: { + geometry: 'area' + } }) diff --git a/docs/tutorial/geometry/02_b.js b/docs/tutorial/geometry/02_b.js index 0bc3873b1..fef50a277 100644 --- a/docs/tutorial/geometry/02_b.js +++ b/docs/tutorial/geometry/02_b.js @@ -1,3 +1,5 @@ chart.animate({ - geometry: 'line' + config: { + geometry: 'line' + } }) diff --git a/docs/tutorial/geometry/03_b.js b/docs/tutorial/geometry/03_b.js index 2d260344e..25ce255bf 100644 --- a/docs/tutorial/geometry/03_b.js +++ b/docs/tutorial/geometry/03_b.js @@ -1,3 +1,5 @@ chart.animate({ - geometry: 'circle' + config: { + geometry: 'circle' + } }) diff --git a/docs/tutorial/geometry/04_b.js b/docs/tutorial/geometry/04_b.js index dcaa0b763..d198a4912 100644 --- a/docs/tutorial/geometry/04_b.js +++ b/docs/tutorial/geometry/04_b.js @@ -1,3 +1,5 @@ chart.animate({ - geometry: 'rectangle' + config: { + geometry: 'rectangle' + } }) From 7c876944f4b6d6ff11ccad63127bce97ea6f4de8 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 10:52:01 +0100 Subject: [PATCH 37/49] tutorial, fix axes title chapter --- docs/tutorial/axes_title_tooltip/04_b.js | 4 +++- docs/tutorial/axes_title_tooltip/05.js | 6 ++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/axes_title_tooltip/04_b.js b/docs/tutorial/axes_title_tooltip/04_b.js index ebf752761..1018ce9a9 100644 --- a/docs/tutorial/axes_title_tooltip/04_b.js +++ b/docs/tutorial/axes_title_tooltip/04_b.js @@ -1,3 +1,5 @@ chart.animate({ - title: 'My first chart' + config: { + title: 'My first chart' + } }) diff --git a/docs/tutorial/axes_title_tooltip/05.js b/docs/tutorial/axes_title_tooltip/05.js index 37b74e3ca..c39a879d8 100644 --- a/docs/tutorial/axes_title_tooltip/05.js +++ b/docs/tutorial/axes_title_tooltip/05.js @@ -1,4 +1,6 @@ chart.animate({ - subtitle: 'with fancy animations', - caption: 'Source: Vizzu tutorial' + config: { + subtitle: 'with fancy animations', + caption: 'Source: Vizzu tutorial' + } }) From 3740c8c4cdfa4b6c008ba12d8bd64a42bf7f6537 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 10:55:20 +0100 Subject: [PATCH 38/49] tutorial, fix aggregating data chapter --- docs/tutorial/aggregating_data/01_b.js | 2 +- docs/tutorial/aggregating_data/01_d.js | 2 +- docs/tutorial/aggregating_data/02_b.js | 2 +- docs/tutorial/aggregating_data/03_b.js | 2 +- docs/tutorial/aggregating_data/04_b.js | 2 +- docs/tutorial/aggregating_data/05_b.js | 2 +- docs/tutorial/aggregating_data/06_b.js | 2 +- docs/tutorial/aggregating_data/07_b.js | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/tutorial/aggregating_data/01_b.js b/docs/tutorial/aggregating_data/01_b.js index 162641107..a1e960d08 100644 --- a/docs/tutorial/aggregating_data/01_b.js +++ b/docs/tutorial/aggregating_data/01_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'Popularity' } + y: { set: ['Popularity'] } } } }) diff --git a/docs/tutorial/aggregating_data/01_d.js b/docs/tutorial/aggregating_data/01_d.js index 88ebd5129..64e445d18 100644 --- a/docs/tutorial/aggregating_data/01_d.js +++ b/docs/tutorial/aggregating_data/01_d.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - x: { set: 'Genres' } + x: { set: ['Genres'] } } } }) diff --git a/docs/tutorial/aggregating_data/02_b.js b/docs/tutorial/aggregating_data/02_b.js index d47bbe164..1037fee28 100644 --- a/docs/tutorial/aggregating_data/02_b.js +++ b/docs/tutorial/aggregating_data/02_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'min(Popularity)' } + y: { set: ['min(Popularity)'] } } } }) diff --git a/docs/tutorial/aggregating_data/03_b.js b/docs/tutorial/aggregating_data/03_b.js index 11766a498..b3f2bb388 100644 --- a/docs/tutorial/aggregating_data/03_b.js +++ b/docs/tutorial/aggregating_data/03_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'max(Popularity)' } + y: { set: ['max(Popularity)'] } } } }) diff --git a/docs/tutorial/aggregating_data/04_b.js b/docs/tutorial/aggregating_data/04_b.js index a4da693d7..fbcf523f3 100644 --- a/docs/tutorial/aggregating_data/04_b.js +++ b/docs/tutorial/aggregating_data/04_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'mean(Popularity)' } + y: { set: ['mean(Popularity)'] } } } }) diff --git a/docs/tutorial/aggregating_data/05_b.js b/docs/tutorial/aggregating_data/05_b.js index c502eee1c..93b83c95a 100644 --- a/docs/tutorial/aggregating_data/05_b.js +++ b/docs/tutorial/aggregating_data/05_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'count()' } + y: { set: ['count()'] } } } }) diff --git a/docs/tutorial/aggregating_data/06_b.js b/docs/tutorial/aggregating_data/06_b.js index 776aff941..8b40e9558 100644 --- a/docs/tutorial/aggregating_data/06_b.js +++ b/docs/tutorial/aggregating_data/06_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'distinct(Kinds)' } + y: { set: ['distinct(Kinds)'] } } } }) diff --git a/docs/tutorial/aggregating_data/07_b.js b/docs/tutorial/aggregating_data/07_b.js index a6b9a4a1a..57e17c3b4 100644 --- a/docs/tutorial/aggregating_data/07_b.js +++ b/docs/tutorial/aggregating_data/07_b.js @@ -1,7 +1,7 @@ chart.animate({ config: { channels: { - y: { set: 'sum(Popularity)' } + y: { set: ['sum(Popularity)'] } } } }) From e6dc77d044cd70601009f57c2c923ff51d334649 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 10:58:12 +0100 Subject: [PATCH 39/49] tutorial, fix channel legen chapter --- docs/tutorial/channels_legend/01.js | 2 +- docs/tutorial/channels_legend/02_b.js | 2 +- docs/tutorial/channels_legend/03_b.js | 2 +- docs/tutorial/channels_legend/04_b.js | 2 +- docs/tutorial/geometry/02_a.js | 4 +++- docs/tutorial/geometry/03_a.js | 4 +++- docs/tutorial/geometry/04_a.js | 4 +++- 7 files changed, 13 insertions(+), 7 deletions(-) diff --git a/docs/tutorial/channels_legend/01.js b/docs/tutorial/channels_legend/01.js index 05167f7b8..eb2516351 100644 --- a/docs/tutorial/channels_legend/01.js +++ b/docs/tutorial/channels_legend/01.js @@ -2,7 +2,7 @@ chart.animate({ config: { channels: { label: { - attach: 'Popularity' + attach: ['Popularity'] } } } diff --git a/docs/tutorial/channels_legend/02_b.js b/docs/tutorial/channels_legend/02_b.js index f51343890..523d805d2 100644 --- a/docs/tutorial/channels_legend/02_b.js +++ b/docs/tutorial/channels_legend/02_b.js @@ -2,7 +2,7 @@ chart.animate({ config: { channels: { lightness: { - attach: 'Popularity' + attach: ['Popularity'] } }, legend: 'lightness' diff --git a/docs/tutorial/channels_legend/03_b.js b/docs/tutorial/channels_legend/03_b.js index 1c8dfacd5..15861dd09 100644 --- a/docs/tutorial/channels_legend/03_b.js +++ b/docs/tutorial/channels_legend/03_b.js @@ -5,7 +5,7 @@ chart.animate({ set: null }, color: { - attach: 'Genres' + attach: ['Genres'] } }, legend: 'color' diff --git a/docs/tutorial/channels_legend/04_b.js b/docs/tutorial/channels_legend/04_b.js index 79d6f9dc3..c17214489 100644 --- a/docs/tutorial/channels_legend/04_b.js +++ b/docs/tutorial/channels_legend/04_b.js @@ -2,7 +2,7 @@ chart.animate({ config: { channels: { size: { - set: 'Popularity' + set: ['Popularity'] } }, geometry: 'circle' diff --git a/docs/tutorial/geometry/02_a.js b/docs/tutorial/geometry/02_a.js index 4216320b5..84a03dcb6 100644 --- a/docs/tutorial/geometry/02_a.js +++ b/docs/tutorial/geometry/02_a.js @@ -1,3 +1,5 @@ chart.animate({ - title: 'Geometry: line' + config: { + title: 'Geometry: line' + } }) diff --git a/docs/tutorial/geometry/03_a.js b/docs/tutorial/geometry/03_a.js index d5d8fa26a..ef7a6398f 100644 --- a/docs/tutorial/geometry/03_a.js +++ b/docs/tutorial/geometry/03_a.js @@ -1,3 +1,5 @@ chart.animate({ - title: 'Geometry: circle' + config: { + title: 'Geometry: circle' + } }) diff --git a/docs/tutorial/geometry/04_a.js b/docs/tutorial/geometry/04_a.js index eeb624274..1fe8c2769 100644 --- a/docs/tutorial/geometry/04_a.js +++ b/docs/tutorial/geometry/04_a.js @@ -1,3 +1,5 @@ chart.animate({ - title: 'Geometry: rectangle - default' + config: { + title: 'Geometry: rectangle - default' + } }) From 29a0dd0ff955008c83dfb4e5161bf01004670b41 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 11:01:39 +0100 Subject: [PATCH 40/49] tutorial, fix group stack chapter --- docs/tutorial/group_stack/01.js | 4 ++-- docs/tutorial/group_stack/02_b.js | 4 ++-- docs/tutorial/group_stack/04_b.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/group_stack/01.js b/docs/tutorial/group_stack/01.js index c443ba356..78dd56c46 100644 --- a/docs/tutorial/group_stack/01.js +++ b/docs/tutorial/group_stack/01.js @@ -2,10 +2,10 @@ chart.animate({ config: { channels: { y: { - attach: 'Kinds' + attach: ['Kinds'] }, color: { - attach: 'Kinds' + attach: ['Kinds'] } } } diff --git a/docs/tutorial/group_stack/02_b.js b/docs/tutorial/group_stack/02_b.js index 0dd528c89..2d3b076f3 100644 --- a/docs/tutorial/group_stack/02_b.js +++ b/docs/tutorial/group_stack/02_b.js @@ -1,8 +1,8 @@ chart.animate({ config: { channels: { - y: { detach: 'Kinds' }, - x: { attach: 'Kinds' } + y: { detach: ['Kinds'] }, + x: { attach: ['Kinds'] } } } }) diff --git a/docs/tutorial/group_stack/04_b.js b/docs/tutorial/group_stack/04_b.js index 5e52e3425..a8f0df80d 100644 --- a/docs/tutorial/group_stack/04_b.js +++ b/docs/tutorial/group_stack/04_b.js @@ -1,8 +1,8 @@ chart.animate({ config: { channels: { - x: { detach: 'Kinds' }, - y: { attach: 'Kinds' } + x: { detach: ['Kinds'] }, + y: { attach: ['Kinds'] } } } }) From fb6fa7345cac361fe38f219829528c10dc1f472d Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 11:03:52 +0100 Subject: [PATCH 41/49] tutorial, fic chapter sorting --- docs/tutorial/sorting/04_b.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/sorting/04_b.js b/docs/tutorial/sorting/04_b.js index c432c2ed1..b07bf09bf 100644 --- a/docs/tutorial/sorting/04_b.js +++ b/docs/tutorial/sorting/04_b.js @@ -2,7 +2,7 @@ chart.animate({ config: { channels: { y: { - detach: 'Kinds' + detach: ['Kinds'] }, x: { set: ['Genres', 'Kinds'] From baf57ed3aee51f5f8abcaa6e4fbf325369160537 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 11:08:00 +0100 Subject: [PATCH 42/49] tutorial, fix orientation chapter --- docs/tutorial/orientation_split_polar/01.js | 4 ++-- docs/tutorial/orientation_split_polar/04_b.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/tutorial/orientation_split_polar/01.js b/docs/tutorial/orientation_split_polar/01.js index f3415d1d2..36dbefcb5 100644 --- a/docs/tutorial/orientation_split_polar/01.js +++ b/docs/tutorial/orientation_split_polar/01.js @@ -2,10 +2,10 @@ chart.animate({ config: { channels: { y: { - detach: 'Popularity' + detach: ['Popularity'] }, x: { - attach: 'Popularity' + attach: ['Popularity'] } } } diff --git a/docs/tutorial/orientation_split_polar/04_b.js b/docs/tutorial/orientation_split_polar/04_b.js index 989331030..c65c855af 100644 --- a/docs/tutorial/orientation_split_polar/04_b.js +++ b/docs/tutorial/orientation_split_polar/04_b.js @@ -2,7 +2,7 @@ chart.animate({ config: { channels: { x: { - detach: 'Genres' + detach: ['Genres'] } } } From 4610f97e206dd6909746c7bfed559fb544238fa9 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 14:40:03 +0100 Subject: [PATCH 43/49] tutorial, fix without coordinates chapter --- docs/tutorial/without_coordinates_noop_channel/03_b.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/without_coordinates_noop_channel/03_b.js b/docs/tutorial/without_coordinates_noop_channel/03_b.js index fbb52120c..c2bd3ae84 100644 --- a/docs/tutorial/without_coordinates_noop_channel/03_b.js +++ b/docs/tutorial/without_coordinates_noop_channel/03_b.js @@ -2,10 +2,10 @@ chart.animate({ config: { channels: { size: { - detach: 'Genres' + detach: ['Genres'] }, noop: { - set: 'Genres' + set: ['Genres'] } } } From c21f54d6f37325899c3253cb1178f661b79252ec Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 14:43:49 +0100 Subject: [PATCH 44/49] tutorial, fix layout chapter --- docs/tutorial/chart_layout/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/chart_layout/config.js b/docs/tutorial/chart_layout/config.js index 25b067f38..31590b493 100644 --- a/docs/tutorial/chart_layout/config.js +++ b/docs/tutorial/chart_layout/config.js @@ -2,7 +2,7 @@ export default [ [ { name: '../assets/setup/setup_c', - replace: [['config: {', "config: {title: 'Plot, title and legend background',"]] + replace: [['config: {', "config: {title: 'Plot, legend and background',"]] }, '01' ], From 1f9caf08bf9c3c8771ec36cbf823bddab410dce4 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 14:49:19 +0100 Subject: [PATCH 45/49] tutorial, fix anim opt chapter --- docs/tutorial/animation_options/01.js | 4 ++-- docs/tutorial/animation_options/02_b.js | 4 ++-- docs/tutorial/animation_options/03_b.js | 4 ++-- docs/tutorial/animation_options/04_b.js | 4 ++-- docs/tutorial/animation_options/05_b.js | 4 ++-- docs/tutorial/animation_options/06_b.js | 8 +++----- 6 files changed, 13 insertions(+), 15 deletions(-) diff --git a/docs/tutorial/animation_options/01.js b/docs/tutorial/animation_options/01.js index cea859331..c46ba32a5 100644 --- a/docs/tutorial/animation_options/01.js +++ b/docs/tutorial/animation_options/01.js @@ -2,10 +2,10 @@ chart.animate({ config: { channels: { y: { - detach: 'Kinds' + detach: ['Kinds'] }, x: { - attach: 'Kinds' + attach: ['Kinds'] } } } diff --git a/docs/tutorial/animation_options/02_b.js b/docs/tutorial/animation_options/02_b.js index 9f534f45c..e035d34b7 100644 --- a/docs/tutorial/animation_options/02_b.js +++ b/docs/tutorial/animation_options/02_b.js @@ -2,10 +2,10 @@ chart.animate({ config: { channels: { x: { - detach: 'Kinds' + detach: ['Kinds'] }, y: { - attach: 'Kinds' + attach: ['Kinds'] } } } diff --git a/docs/tutorial/animation_options/03_b.js b/docs/tutorial/animation_options/03_b.js index 764ab86f1..85c772f46 100644 --- a/docs/tutorial/animation_options/03_b.js +++ b/docs/tutorial/animation_options/03_b.js @@ -3,10 +3,10 @@ chart.animate( config: { channels: { x: { - attach: 'Kinds' + attach: ['Kinds'] }, y: { - detach: 'Kinds' + detach: ['Kinds'] } } } diff --git a/docs/tutorial/animation_options/04_b.js b/docs/tutorial/animation_options/04_b.js index 30dbf3194..089197ec3 100644 --- a/docs/tutorial/animation_options/04_b.js +++ b/docs/tutorial/animation_options/04_b.js @@ -3,10 +3,10 @@ chart.animate( config: { channels: { x: { - detach: 'Kinds' + detach: ['Kinds'] }, y: { - attach: 'Kinds' + attach: ['Kinds'] } } } diff --git a/docs/tutorial/animation_options/05_b.js b/docs/tutorial/animation_options/05_b.js index b702773c3..af067d872 100644 --- a/docs/tutorial/animation_options/05_b.js +++ b/docs/tutorial/animation_options/05_b.js @@ -3,10 +3,10 @@ chart.animate( config: { channels: { x: { - attach: 'Kinds' + attach: ['Kinds'] }, y: { - detach: 'Kinds' + detach: ['Kinds'] } } } diff --git a/docs/tutorial/animation_options/06_b.js b/docs/tutorial/animation_options/06_b.js index 83d0c41a6..1800113d3 100644 --- a/docs/tutorial/animation_options/06_b.js +++ b/docs/tutorial/animation_options/06_b.js @@ -3,15 +3,13 @@ chart.animate( config: { channels: { x: { - detach: 'Kinds' + detach: ['Kinds'] }, y: { - attach: 'Kinds' + attach: ['Kinds'] } } } }, - { - duration: '500ms' - } + '500ms' ) From dffa33bce5016c006274fc5373e7e08a387ceaf5 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 14:57:14 +0100 Subject: [PATCH 46/49] tutorial, fix anim control chapter --- docs/tutorial/animation_control_keyframes/01.js | 4 ++-- docs/tutorial/animation_control_keyframes/03_b.js | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/animation_control_keyframes/01.js b/docs/tutorial/animation_control_keyframes/01.js index 40c0ba36d..2eac7ea1c 100644 --- a/docs/tutorial/animation_control_keyframes/01.js +++ b/docs/tutorial/animation_control_keyframes/01.js @@ -3,10 +3,10 @@ chart config: { channels: { x: { - attach: 'Kinds' + attach: ['Kinds'] }, y: { - detach: 'Kinds' + detach: ['Kinds'] } } } diff --git a/docs/tutorial/animation_control_keyframes/03_b.js b/docs/tutorial/animation_control_keyframes/03_b.js index f125b558d..1501469ef 100644 --- a/docs/tutorial/animation_control_keyframes/03_b.js +++ b/docs/tutorial/animation_control_keyframes/03_b.js @@ -9,8 +9,7 @@ chart.animate([ y: { detach: ['Kinds'] } - }, - title: 'Using keyframes' + } } }, options: { From 4a23318b20c7b97a52bb75ea69ae3dffa09d2f6f Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 15:02:23 +0100 Subject: [PATCH 47/49] tutorial, fix shorthands chapter --- docs/tutorial/shorthands_store/08.js | 6 +++--- docs/tutorial/shorthands_store/09.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/tutorial/shorthands_store/08.js b/docs/tutorial/shorthands_store/08.js index 9410c9300..405645f83 100644 --- a/docs/tutorial/shorthands_store/08.js +++ b/docs/tutorial/shorthands_store/08.js @@ -5,11 +5,11 @@ chart.animate( title: 'Store function', align: 'stretch', channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, + y: ['Popularity', 'Kinds'], + x: 'Genres', label: { attach: 'Popularity' } }, - color: { set: 'Kinds' } + color: 'Kinds' } }, 0 diff --git a/docs/tutorial/shorthands_store/09.js b/docs/tutorial/shorthands_store/09.js index 25f78006e..6f540773e 100644 --- a/docs/tutorial/shorthands_store/09.js +++ b/docs/tutorial/shorthands_store/09.js @@ -4,10 +4,10 @@ chart.animate({ title: 'Store function', align: 'stretch', channels: { - y: { set: ['Popularity', 'Kinds'] }, - x: { set: 'Genres' }, + y: ['Popularity', 'Kinds'], + x: 'Genres', label: { attach: 'Popularity' } }, - color: { set: 'Kinds' } + color: 'Kinds' } }) From eb913773556fa7b056ae7e4fb25dc20400ec60b8 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 15:20:37 +0100 Subject: [PATCH 48/49] tutorial tests, add hashes --- test/e2e/tests/docs.json | 60 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/test/e2e/tests/docs.json b/test/e2e/tests/docs.json index 5f560c11b..33dde8416 100644 --- a/test/e2e/tests/docs.json +++ b/test/e2e/tests/docs.json @@ -1,4 +1,62 @@ { "suite": "/test/e2e/tests/docs/tutorial", - "test": {} + "test": { + "aggregating_data": { + "refs": ["83f7b33"] + }, + "align_range": { + "refs": ["b3188f8"] + }, + "animation_control_keyframes": { + "refs": ["ef161c7"] + }, + "animation_options": { + "refs": ["6a84a70"] + }, + "axes_title_tooltip": { + "refs": ["e7a5619"] + }, + "changing_dimensions": { + "refs": ["23be71f"] + }, + "channels_legend": { + "refs": ["f7f4417"] + }, + "chart_layout": { + "refs": ["93a235c"] + }, + "chart_presets": { + "refs": ["4dfa5ac"] + }, + "color_palette_fonts": { + "refs": ["c6d06d7"] + }, + "events": { + "refs": ["31dc184"] + }, + "filter_add_new_records": { + "refs": ["1207ccf"] + }, + "geometry": { + "refs": ["50d8151"] + }, + "group_stack": { + "refs": ["981e902"] + }, + "orientation_split_polar": { + "refs": ["5e3012a"] + }, + "shorthands_store": { + "refs": ["df4002a"] + }, + "sorting": { + "refs": ["f86ec6a"] + }, + "stacking_explanation": { + "refs": ["919ff24"] + }, + "without_coordinates_noop_channel": { + "refs": ["294bc34"] + } + } } From 60276aac70cd5293083f33c4965f97521a16b809 Mon Sep 17 00:00:00 2001 From: David Vegh Date: Wed, 6 Nov 2024 15:51:17 +0100 Subject: [PATCH 49/49] fix test run --- docs/assets/javascripts/mdchart.js | 79 +------------------------ docs/assets/javascripts/snippet.js | 74 +++++++++++++++++++++++ test/e2e/tests/docs/tutorial.mjs | 4 +- test/e2e/tests/docs/tutorial/events.mjs | 4 +- 4 files changed, 80 insertions(+), 81 deletions(-) create mode 100644 docs/assets/javascripts/snippet.js diff --git a/docs/assets/javascripts/mdchart.js b/docs/assets/javascripts/mdchart.js index 634b9201a..9d59f9953 100644 --- a/docs/assets/javascripts/mdchart.js +++ b/docs/assets/javascripts/mdchart.js @@ -1,4 +1,5 @@ import Vizzu from '../dist/vizzu.min.js' +import { loadAnimations } from './snippet.js' class MdChart { constructor(data, id) { @@ -7,7 +8,7 @@ class MdChart { } async create(snippets) { - const animations = await MdChart.loadAnimations(snippets) + const animations = await loadAnimations(snippets) let chart = Promise.resolve() for (let i = 0; i < animations.length; i++) { const number = i + 1 @@ -91,82 +92,6 @@ class MdChart { return chart } - - static async loadAnimation(url, config) { - try { - let code - if ( - typeof window === 'undefined' && - typeof process !== 'undefined' && - process.versions?.node - ) { - const fs = await import('fs').then((module) => module.promises) - code = await fs.readFile( - config?.nodeBaseUrl ? `${config.nodeBaseUrl}/${url}` : url, - 'utf8' - ) - } else { - const response = await fetch( - config?.browserBaseUrl ? `${config.browserBaseUrl}/${url}` : url - ) - if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`) - code = await response.text() - } - const replace = config?.replace - if (Array.isArray(replace)) { - replace.forEach(([searchValue, replaceValue]) => { - code = code.replaceAll(searchValue, replaceValue) - }) - } - const returnOriginal = config?.returnOriginal - return new Function( // eslint-disable-line no-new-func - 'chart', - 'data', - 'assets', - returnOriginal ? `${code}; return chart;` : `return ${code}` - ) - } catch (error) { - console.error('Error during animation load or execution:', error) - } - } - - static async loadAnimations(animations, nodeBaseUrl = undefined, browserBaseUrl = undefined) { - const steps = [] - const baseUrl = { - nodeBaseUrl, - browserBaseUrl - } - - async function loadAnimation(animation) { - let anim - if (typeof animation === 'string') { - anim = await MdChart.loadAnimation(`${animation}.js`, baseUrl) - } else if (typeof animation === 'object' && animation.name) { - const { name, ...config } = animation - anim = await MdChart.loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl)) - } - return (chart, data, assets) => anim(chart, data, assets) - } - - for (const animation of animations) { - const step = { anims: [] } - - let subAnimations - if (Array.isArray(animation)) { - subAnimations = animation - } else { - subAnimations = animation?.anims ?? [] - if (animation?.assets) step.assets = animation.assets - } - - for (const subAnimation of subAnimations) { - const anim = await loadAnimation(subAnimation) - step.anims.push(anim) - } - steps.push(step) - } - return steps - } } export default MdChart diff --git a/docs/assets/javascripts/snippet.js b/docs/assets/javascripts/snippet.js new file mode 100644 index 000000000..b14b2be18 --- /dev/null +++ b/docs/assets/javascripts/snippet.js @@ -0,0 +1,74 @@ +export async function loadAnimation(url, config) { + try { + let code + if ( + typeof window === 'undefined' && + typeof process !== 'undefined' && + process.versions?.node + ) { + const fs = await import('fs').then((module) => module.promises) + code = await fs.readFile( + config?.nodeBaseUrl ? `${config.nodeBaseUrl}/${url}` : url, + 'utf8' + ) + } else { + const response = await fetch( + config?.browserBaseUrl ? `${config.browserBaseUrl}/${url}` : url + ) + if (!response.ok) throw new Error(`Error fetching: ${response.statusText}`) + code = await response.text() + } + const replace = config?.replace + if (Array.isArray(replace)) { + replace.forEach(([searchValue, replaceValue]) => { + code = code.replaceAll(searchValue, replaceValue) + }) + } + const returnOriginal = config?.returnOriginal + return new Function( // eslint-disable-line no-new-func + 'chart', + 'data', + 'assets', + returnOriginal ? `${code}; return chart;` : `return ${code}` + ) + } catch (error) { + console.error('Error during animation load or execution:', error) + } +} + +export async function loadAnimations( + animations, + nodeBaseUrl = undefined, + browserBaseUrl = undefined +) { + const steps = [] + const baseUrl = { + nodeBaseUrl, + browserBaseUrl + } + + for (const animation of animations) { + const step = { anims: [] } + + let subAnimations + if (Array.isArray(animation)) { + subAnimations = animation + } else { + subAnimations = animation?.anims ?? [] + if (animation?.assets) step.assets = animation.assets + } + + for (const subAnimation of subAnimations) { + let anim + if (typeof subAnimation === 'string') { + anim = await loadAnimation(`${subAnimation}.js`, baseUrl) + } else if (typeof animation === 'object' && subAnimation.name) { + const { name, ...config } = subAnimation + anim = await loadAnimation(`${name}.js`, Object.assign({}, config, baseUrl)) + } + step.anims.push((chart, data, assets) => anim(chart, data, assets)) + } + steps.push(step) + } + return steps +} diff --git a/test/e2e/tests/docs/tutorial.mjs b/test/e2e/tests/docs/tutorial.mjs index a5ede016c..309c02c67 100644 --- a/test/e2e/tests/docs/tutorial.mjs +++ b/test/e2e/tests/docs/tutorial.mjs @@ -1,4 +1,4 @@ -import MdChart from '../../../../docs/assets/javascripts/mdchart.js' +import { loadAnimations } from '../../../../docs/assets/javascripts/snippet.js' async function getTestSteps(dataFile, configName) { const dataLoaded = import(dataFile) @@ -6,7 +6,7 @@ async function getTestSteps(dataFile, configName) { const [data, config] = await Promise.all([dataLoaded, configLoaded]) const animations = ( - await MdChart.loadAnimations( + await loadAnimations( config.default, `./docs/tutorial/${configName}`, `../../../../../../docs/tutorial/${configName}` diff --git a/test/e2e/tests/docs/tutorial/events.mjs b/test/e2e/tests/docs/tutorial/events.mjs index 55a2a7875..f0e6221bd 100644 --- a/test/e2e/tests/docs/tutorial/events.mjs +++ b/test/e2e/tests/docs/tutorial/events.mjs @@ -1,4 +1,4 @@ -import MdChart from '../../../../../docs/assets/javascripts/mdchart.js' +import { loadAnimation } from '../../../../../docs/assets/javascripts/snippet.js' async function getTestSteps(dataFile, configName) { const dataLoaded = import(dataFile) @@ -13,7 +13,7 @@ async function getTestSteps(dataFile, configName) { const steps = [] for (const animation of config.default) { for (const subAnimation of animation.anims) { - const func = await MdChart.loadAnimation( + const func = await loadAnimation( `${subAnimation.name}.js`, Object.assign({}, subAnimation, baseUrl) )