Merge branch 'main' of https://github.com/vizzuhq/vizzu-lib into main

andraskangyal · andraskangyal · commit b025315e2c0b · 2021-09-23T15:35:00.000+02:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://github.com/vizzuhq/vizzu-lib">
-    <img src="/docs/images/logo-bg-white.svg" alt="Vizzu" />
+    <img src="https://vizzuhq.github.io/vizzu-lib-doc/readme/logo-bg-white.svg" alt="Vizzu" />
   </a>
   <p align="center">Library for animated data visualizations and data stories.</p>
   <p align="center">
@@ -36,7 +36,7 @@ Or use it from CDN:
 
 ```html
 <script type="module">
-import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.0/vizzu.js';
+import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js';
 </script>
 ```
 
@@ -51,7 +51,7 @@ Create a placeholder element that will contain the rendered chart:
 Create a simple bar chart:
 
 ```javascript
-import Vizzu from 'https://vizzu-lib-main.storage.googleapis.com/lib/vizzu.js';
+import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js';
 
 let data = {
   series: [
@@ -80,7 +80,7 @@ chart.animate({
   geometry: 'circle' 
 });
 ```
-[Try it!](https://jsfiddle.net/VizzuHQ/dk7b86vc/19/)
+[Try it!](https://jsfiddle.net/VizzuHQ/dk7b86vc/29/)
 
 ![Example chart](https://vizzuhq.github.io/vizzu-lib-doc/readme/example.gif)
 
diff --git a/docs/generator/genroot.js b/docs/generator/genroot.js
@@ -29,15 +29,15 @@ class Generator
 			  const hljs = require('highlight.js');
 			  const language = hljs.getLanguage(lang) ? lang : 'plaintext';
 			  return hljs.highlight(code, { language }).value;
-			}
+			},
 		});
 
 		let defaultRender = new marked.Renderer();
 
 		marked.use({
 			renderer: {
 				link: function (href, title, string) {
-					if (!href.startsWith('http'))
+					if (!href.startsWith('http') && !href.startsWith('mailto'))
 						href = 'https://github.com/vizzuhq/vizzu-lib/blob/main/'+href;
 					return defaultRender.link(href, title, string);
 				}
diff --git a/docs/generator/index.root.in.html b/docs/generator/index.root.in.html
@@ -5,8 +5,8 @@
 	<title>Vizzu Library</title>
 	<link rel="icon" href="0.3.0/images/favicon.svg">
 	<meta name='viewport' content='width=device-width, initial-scale=1'>
-	<link rel='stylesheet' type='text/css' media='screen' href='docs/style/root.css'>
-	<link rel='stylesheet' type='text/css' media='screen' href='docs/style/highlight.css'>
+	<link rel='stylesheet' type='text/css' media='screen' href='0.3.0/style/root.css'>
+	<link rel='stylesheet' type='text/css' media='screen' href='0.3.0/style/highlight.css'>
 </head>
 <body>
 	<div id="content"></div>
diff --git a/test/integration/test_cases.json b/test/integration/test_cases.json
@@ -796,7 +796,7 @@
     },
     "web_content/sample_static/polar/NO_spiderweb_line_2dis_1con": {
         "refs": {
-            "ubuntu_focal_chrome_headless": "da5026b"
+            "ubuntu_focal_chrome_headless": "44c4971"
         }
     },
     "web_content/sample_static/polar/coxcomb_stacked_rectangle_2dis_1con": {
@@ -826,12 +826,12 @@
     },
     "web_content/sample_static/polar/spiderweb_area_1dis_1con": {
         "refs": {
-            "ubuntu_focal_chrome_headless": "c86ac90"
+            "ubuntu_focal_chrome_headless": "403e997"
         }
     },
     "web_content/sample_static/polar/spiderweb_line_1dis_1con": {
         "refs": {
-            "ubuntu_focal_chrome_headless": "d699f0e"
+            "ubuntu_focal_chrome_headless": "22fd6d6"
         }
     },
     "web_content/sample_static/without/bubble_circle_1dis_2con": {
@@ -856,7 +856,7 @@
     },
     "web_content/templates/composition_comparison_pie_coxcomb_column_2dis_2con": {
         "refs": {
-            "ubuntu_focal_chrome_headless": "5365092"
+            "ubuntu_focal_chrome_headless": "469b9e8"
         }
     },
     "web_content/templates/composition_comparison_waterfall_column_2dis_1con": {
@@ -866,7 +866,7 @@
     },
     "web_content/templates/composition_percentage_area_stream_3dis_1con": {
         "refs": {
-            "ubuntu_focal_chrome_headless": "49d38a0"
+            "ubuntu_focal_chrome_headless": "5e30e2e"
         }
     },
     "web_content/templates/composition_percentage_column_3dis_1con": {
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/column_grouped_rectangle_negative_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/column_grouped_rectangle_negative_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             },
             title: 'Grouped Column Chart'
         },
-        style: { // This chart type needs special angle for small labels.
+        style: { // Labels have to be rotated on this chart.
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/column_stacked_rectangle_negative_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/column_stacked_rectangle_negative_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             },
             title: 'Stacked Column Chart'
         },
-        style: { // This chart type needs special angle for small labels.
+        style: { // Labels have to be rotated on this chart.
             plot: {
                 xAxis: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/histogram_rectangle_negative_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/histogram_rectangle_negative_1dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
       title: 'Histogram',
       align: 'none'
     },
-    style: { // This chart type no needs space between markes. 
+    style: { // Spaces between markers should be eliminated on this chart. 
       'plot.marker.rectangleSpacing': 0.07
     }
   })
diff --git a/test/integration/test_cases/web_content/sample_static/cartesian/waterfall_rectangle_negative_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/cartesian/waterfall_rectangle_negative_1dis_1con.mjs
@@ -6,7 +6,7 @@ const testSteps = [
         config: {
             channels: {
                 x: { set: ['Year'] },
-                y: { set: ['Year', 'Value 5 (+/-)'] }, // Repeated data series (Year) on both axles builds up waterfall positions of the markers. 
+                y: { set: ['Year', 'Value 5 (+/-)'] }, // Adding the same dimension (Year) on both axes is how you create a Waterfall Chart in Vizzu. 
                 label: { set: ['Value 5 (+/-)'] }
             },
             title: 'Waterfall Chart',
diff --git a/test/integration/test_cases/web_content/sample_static/polar/coxcomb_stacked_rectangle_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/coxcomb_stacked_rectangle_2dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Nightingale (Coxcomb) Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs yAxis and yAxis-labels. 
+        style: { // y-axis and its labels are unnecessary on these types of charts.
             plot: {
                 yAxis: {
                     title: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/donut_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/donut_rectangle_1dis_1con.mjs
@@ -6,14 +6,14 @@ const testSteps = [
         config: {
             channels: {
                 x: { set: ['Joy factors', 'Value 2 (+)'] },
-                y: { range: { min: '-200%' } }, // Set the radius of the empty center-circle.
+                y: { range: { min: '-200%' } }, // Setting the radius of the empty circle in the centre.
                 color: { set: ['Joy factors'] },
                 label: { set: ['Value 2 (+)'] }
             },
             title: 'Donut Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs axles and axis labels, except bigger size marker-labels. 
+        style: { // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged. 
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/pie_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/pie_rectangle_1dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Pie Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs axles and axis labels, except bigger size marker-labels. 
+        style: { // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged. 
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/radial_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/radial_rectangle_1dis_1con.mjs
@@ -8,15 +8,15 @@ const testSteps = [
                 x: { set: ['Value 2 (+)'] },
                 y: {
                     set: ['Joy factors'],
-                    range: { min: '-30%' } // Set the radius of the empty center-circle.
+                    range: { min: '-30%' } // Setting the radius of the empty circle in the centre.
                 },
                 color: { set: ['Joy factors'] },
                 label: { set: ['Value 2 (+)'] }
             },
             title: 'Radial Bar Chart',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs axles and axis labels, except yAxis-labels. 
+        style: { // All axes and axis labels are unnecessary on these types of charts, except for the labels of the y-axis.
             plot: {
                 yAxis: {
                     color: '#ffffff00',
diff --git a/test/integration/test_cases/web_content/sample_static/polar/radial_stacked_rectangle_2dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/radial_stacked_rectangle_2dis_1con.mjs
@@ -8,7 +8,7 @@ const testSteps = [
                 x: { set: ['Country', 'Value 2 (+)'] },
                 y: {
                     set: ['Year'],
-                    range: { min: '-20%' } // Set the radius of the empty center-circle.
+                    range: { min: '-20%' } // Setting the radius of the empty circle in the centre.
                 },
                 color: { set: ['Country'] },
                 lightness: { set: ['Year'] }
diff --git a/test/integration/test_cases/web_content/sample_static/polar/spiderweb_area_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/spiderweb_area_1dis_1con.mjs
@@ -8,15 +8,15 @@ const testSteps = [
                 x: { set: ['Year'] },
                 y: {
                     set: ['$exists', 'Value 2 (+)'],
-                    range: { max: '130%' } // Set enought space for tangential labels.
+                    range: { max: '130%' } // Set enough space for tangential labels.
                 },
                 label: { set: ['Value 2 (+)'] },
             },
             title: 'Polar Area Chart',
             geometry: 'area',
             coordSystem: 'polar',
         },
-        style: { // This chart type no needs yAxis and yAxis-labels. 
+        style: { // y-axis and its labels are unnecessary on these types of charts.
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/sample_static/polar/spiderweb_line_1dis_1con.mjs b/test/integration/test_cases/web_content/sample_static/polar/spiderweb_line_1dis_1con.mjs
@@ -8,15 +8,15 @@ const testSteps = [
                 x: { set: ['Year'] },
                 y: {
                     set: ['$exists', 'Value 2 (+)'],
-                    range: { max: '130%' } // Set enought space for tangential labels.
+                    range: { max: '130%' } // Set enough space for tangential labels.
                 },
                 label: { set: ['Value 2 (+)'] }
             },
             title: 'Polar Line Chart',
             geometry: 'line',
             coordSystem: 'polar'
         },
-        style: { // This chart type no needs yAxis and yAxis-labels. 
+        style: { // y-axis and its labels are unnecessary on these types of charts.
             plot: {
                 marker: {
                     label: {
diff --git a/test/integration/test_cases/web_content/templates/composition_comparison_pie_coxcomb_column_2dis_2con.mjs b/test/integration/test_cases/web_content/templates/composition_comparison_pie_coxcomb_column_2dis_2con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Pie Chart',
             coordSystem: 'polar'
         },
-        style: { // These chart-types no need axles and axis labels, except bigger size marker-labels on special positions. 
+        style: { // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged and their position is set. 
             plot: {
                 marker: {       
                     label: {
@@ -51,7 +51,7 @@ const testSteps = [
                 x: { set: ['Value 1', 'Joy factors', 'Region', 'Country code'] },
                 y: { 
                     set: ['Value 3'], 
-                    range: { min: '-60%' } // Set the radius of the empty center-circle.
+                    range: { min: '-60%' } // Setting the radius of the empty circle in the centre.
                 },
             },
             title: 'Coxcomb Chart'
diff --git a/test/integration/test_cases/web_content/templates/composition_comparison_waterfall_column_2dis_1con.mjs b/test/integration/test_cases/web_content/templates/composition_comparison_waterfall_column_2dis_1con.mjs
@@ -12,8 +12,7 @@ const testSteps = [
                 y: { set: ['Year', 'Value 5 (+/-)'] },
                 color: {
                     set: ['Value 5 (+/-)'],
-                    range: { 
-                        // Set range of colorGradient.
+                    range: { // Setting the range of the colorGradient symmetrically so that the color changes at 0
                         min: '-45',
                         max: '45'
                     }
@@ -27,7 +26,7 @@ const testSteps = [
         style: {
             plot: {
                 marker: {
-                    // Set the color palette of the colorGradient. 
+                    // / Setting the colors used for the measure on the color channel
                     colorGradient: 
                     [
                         '#3d51b8 0',
diff --git a/test/integration/test_cases/web_content/templates/composition_percentage_column_stream_3dis_1con.mjs b/test/integration/test_cases/web_content/templates/composition_percentage_column_stream_3dis_1con.mjs
@@ -11,7 +11,7 @@ const testSteps = [
             channels: {
                 x: { set: ['Year'] },
                 y: { set: ['Value 2 (+)', 'Country'] },
-                noop: { set: ['Country'] } // noop (no operation) channel ...???
+                noop: { set: ['Country'] } //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
             },
             title: 'Column Chart',
             geometry: 'rectangle'
@@ -37,7 +37,7 @@ const testSteps = [
             channels: {
                 y: {
                     range: {
-                        max: '110%' // Set back the default yAxis-range.
+                        max: 'auto' // Setting back the y-axis range to the default value.
                     }
                 }
             },
diff --git a/test/integration/test_cases/web_content/templates/distribution_relationship_dotplot_dotplot.mjs b/test/integration/test_cases/web_content/templates/distribution_relationship_dotplot_dotplot.mjs
@@ -8,7 +8,7 @@ const testSteps = [
                 x: { set: ['Joy factors'] },
                 y: { set: ['Value 5 (+/-)'] },
                 color: { set: ['Joy factors'] },
-                noop: { set: ['Country_code'] } // noop (no operation) channel ...???
+                noop: { set: ['Country_code'] } //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
             },
             title: 'Distribution',
             geometry: 'circle'
diff --git a/test/integration/test_cases/web_content/templates/drilldown_aggregate_line.mjs b/test/integration/test_cases/web_content/templates/drilldown_aggregate_line.mjs
@@ -9,10 +9,10 @@ const testSteps = [
                 y: {
                     set: ['Value 3 (+)'],
                     range: {
-                        max: '6000000000' // Keep the yAxis-range during the next animation phase.
+                        max: '6000000000' // Making the chart elements fill the whole of the y-axis as the default value is now 110%
                     }
                 },
-                size: { set: ['Country'] } // Set the other categories of the chart.
+                size: { set: ['Country'] } // Add the dimension that we’ll use in the next state without splitting the lines in this state.
             },
             title: 'Line Chart',
             geometry: 'line'
@@ -22,7 +22,7 @@ const testSteps = [
         config: {
             channels: {
                 color: { set: ['Country'] },
-                size: { set: null } // You don't need the categories on this channel, because they are on the 'color' channel already.
+                size: { set: null } // We don’t need this dimension here anymore since it’s already on the 'color' channel.
             },
             title: 'Drill Down'
         }
@@ -32,7 +32,7 @@ const testSteps = [
             channels: {
                 y: {
                     range: {
-                        max: '110%' // Set back the default yAxis-range.
+                        max: 'auto' // Setting back the y-axis range to the default value.
                     }
                 },
             },
diff --git a/test/integration/test_cases/web_content/templates/merge_split_radial_stacked_rectangle_2dis_1con.mjs b/test/integration/test_cases/web_content/templates/merge_split_radial_stacked_rectangle_2dis_1con.mjs
@@ -9,7 +9,7 @@ const testSteps = [
                 y: { 
                     set: ['Year'], 
                     range: { 
-                        min: '-3' // Set the radius of the empty center-circle.
+                        min: '-3' // Setting the radius of the empty circle in the centre.
                     } 
                 },
                 color: { set: ['Country'] }
diff --git a/test/integration/test_cases/web_content/templates/orientation_circle.mjs b/test/integration/test_cases/web_content/templates/orientation_circle.mjs
@@ -8,7 +8,7 @@ const testSteps = [
                 x: { set: ['Value 5 (+/-)'] },
                 y: { set: ['Joy factors'] },
                 lightness: { set: ['Joy factors'] }, // Lightness channel not necessary but helps to fallow during the animation how spreading categories of the first chart.
-                noop: { set: ['Year'] } // noop (no operation) channel ...??? 
+                noop: { set: ['Year'] } //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance. 
             },
             title: 'Distribution by Y',
             geometry: 'circle'
diff --git a/test/integration/test_cases/web_content/templates/orientation_dot_circle.mjs b/test/integration/test_cases/web_content/templates/orientation_dot_circle.mjs
@@ -7,8 +7,8 @@ const testSteps = [
             channels: {
                 x: { set: ['Value 5 (+/-)'] },
                 y: { set: ['Value 6 (+/-)'] },
-                noop: { set: ['Joy factors'] }, // noop (no operation) channel ...???
-                lightness: { set: ['Year'] } // Lightness channel helps to fallow during the animation how spreading categories of the 'Year' data series.
+                noop: { set: ['Joy factors'] }, //The noop channel splits the markers as all the other channels but will have no effect on the markers’ appearance.
+                lightness: { set: ['Year'] } // Lightness channel is used to assist the viewer in following the animation.
             },
             title: 'Relationship by X, Y',
             geometry: 'circle'
diff --git a/test/integration/test_cases/web_content/templates/orientation_rectangle.mjs b/test/integration/test_cases/web_content/templates/orientation_rectangle.mjs
@@ -26,7 +26,7 @@ const testSteps = [
   chart => chart.animate({
     config: {
       channels: {
-        x: { set: ['Values 1'] }, // Take off 'Timeseries' data series to show sum of the new stacked bars.
+        x: { set: ['Values 1'] }, // Taking the dimension off to show the sum of the newly stacked elements.
       }
     }
   })
diff --git a/test/integration/test_cases/web_content/templates/pie_donut2_rectangle_1dis_1con.mjs b/test/integration/test_cases/web_content/templates/pie_donut2_rectangle_1dis_1con.mjs
@@ -12,7 +12,7 @@ const testSteps = [
             title: 'Pie Chart',
             coordSystem: 'polar'
         },
-        style: {  // This chart type no needs axles and axis labels, except bigger size marker-labels. 
+        style: {  // All axes and axis labels are unnecessary on these types of charts. Meanwhile the marker labels are enlarged. 
             plot: {
                 marker: {
                     label: {
@@ -39,7 +39,7 @@ const testSteps = [
     chart => chart.animate({
         config: {
             channels: {
-                y: { range: { min: '-200%' } } // Set the radius of the empty center-circle. 
+                y: { range: { min: '-200%' } } // Setting the radius of the empty circle in the centre. 
             },
             title: 'Donut Chart'
         }
diff --git a/test/integration/test_cases/web_content/templates/relationship_comparison_circle_2_bubble_plot.mjs b/test/integration/test_cases/web_content/templates/relationship_comparison_circle_2_bubble_plot.mjs
diff --git a/test/integration/test_cases/web_content/templates/stack_group_area_line.mjs b/test/integration/test_cases/web_content/templates/stack_group_area_line.mjs
diff --git a/test/integration/test_cases/web_content/templates/stack_group_circle.mjs b/test/integration/test_cases/web_content/templates/stack_group_circle.mjs
diff --git a/test/integration/test_cases/web_content/templates/stack_group_treemap.mjs b/test/integration/test_cases/web_content/templates/stack_group_treemap.mjs
diff --git a/test/integration/test_cases/web_content/templates/total_element_bubble_2_bar.mjs b/test/integration/test_cases/web_content/templates/total_element_bubble_2_bar.mjs
diff --git a/test/integration/test_cases/web_content/templates/total_element_bubble_column.mjs b/test/integration/test_cases/web_content/templates/total_element_bubble_column.mjs
diff --git a/test/integration/test_cases/web_content/templates/total_time_area_bar.mjs b/test/integration/test_cases/web_content/templates/total_time_area_bar.mjs
diff --git a/test/integration/test_cases/web_content/templates/total_time_area_column.mjs b/test/integration/test_cases/web_content/templates/total_time_area_column.mjs
diff --git a/test/integration/test_cases/web_content/templates/total_time_column_line.mjs b/test/integration/test_cases/web_content/templates/total_time_column_line.mjs
diff --git a/test/integration/test_cases/web_content/templates/treemap_radial.mjs b/test/integration/test_cases/web_content/templates/treemap_radial.mjs
diff --git a/test/integration/test_cases/web_content/templates/zoom_area.mjs b/test/integration/test_cases/web_content/templates/zoom_area.mjs
diff --git a/test/integration/test_cases/web_content/templates/zoom_line.mjs b/test/integration/test_cases/web_content/templates/zoom_line.mjs

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const testSteps = [`
`12`	`12`	`title: 'Histogram',`
`13`	`13`	`align: 'none'`
`14`	`14`	`},`
`15`		`- style: { // This chart type no needs space between markes.`
	`15`	`+ style: { // Spaces between markers should be eliminated on this chart.`
`16`	`16`	`'plot.marker.rectangleSpacing': 0.07`
`17`	`17`	`}`
`18`	`18`	`})`