fix tutorial and showcases

Author: veghdev

docs/showcases/musicformats/musicformats.csv

@@ -37,6 +37,8 @@ Year,Format,Revenue
 1982,Tapes,97
 1982,Cassette,3713
 1982,Vinyl,5922
+1982,CD,0
+1983,Tapes,0
 1983,CD,45
 1983,Cassette,4706
 1983,Vinyl,5089
@@ -55,6 +57,7 @@ Year,Format,Revenue
 1988,Vinyl,1559
 1988,CD,4594
 1988,Cassette,7531
+1988,DVD,0
 1989,DVD,241
 1989,Vinyl,703
 1989,CD,5401
@@ -115,6 +118,9 @@ Year,Format,Revenue
 2003,Cassette,152
 2003,DVD,574
 2003,CD,15888
+2003,Streaming,0
+2003,Download,0
+2004,Other,0
 2004,Streaming,10
 2004,Cassette,33
 2004,Vinyl,54
@@ -149,6 +155,7 @@ Year,Format,Revenue
 2008,Other,1178
 2008,Download,2054
 2008,CD,6585
+2009,Cassette,0
 2009,Vinyl,80
 2009,DVD,255
 2009,Streaming,436

docs/tutorial/shorthands_store.js

@@ -44,8 +44,8 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
 					return chart.animate({
 						config: {
 							channels: {
-								y: { detach: 'Kinds' },
-								x: { attach: 'Kinds' }
+								x: { attach: 'Kinds' },
+								y: { detach: 'Kinds' }
 							},
 							align: 'none'
 						}
@@ -106,7 +106,7 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
 					return chart.animate({
 						style: {
 							'plot.xAxis.label.fontSize': '150%',
-							'title.backgroundColor': '#A0A0A0'
+							'plot.backgroundColor': '#A0A0A0'
 						}
 					})
 				}
@@ -122,11 +122,11 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
 								title: 'Store function',
 								align: 'stretch',
 								channels: {
-									y: { set: ['Popularity', 'Kinds'] },
-									x: { set: ['Genres'] },
-									label: { attach: ['Popularity'] }
+									y: ['Popularity', 'Kinds'],
+									x: ['Genres'],
+									label: ['Popularity']
 								},
-								color: { set: ['Kinds'] }
+								color: ['Kinds']
 							}
 						},
 						0
@@ -165,11 +165,11 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
 							title: 'Store function',
 							align: 'stretch',
 							channels: {
-								y: { set: ['Popularity', 'Kinds'] },
-								x: { set: ['Genres'] },
-								label: { attach: ['Popularity'] }
+								y: ['Popularity', 'Kinds'],
+								x: ['Genres'],
+								label: ['Popularity']
 							},
-							color: { set: ['Kinds'] }
+							color: ['Kinds']
 						}
 					})
 				}

docs/tutorial/shorthands_store.md

@@ -104,7 +104,7 @@ chart.animate(
         {
             # "plot": { "xAxis": { "label": { "fontSize": "150%" } } },
             "plot.xAxis.label.fontSize": "150%",
-            "title.backgroundColor": "#A0A0A0",
+            "plot.backgroundColor": "#A0A0A0",
         }
     )
 )

docs/tutorial/stacking_explanation.js

@@ -1,8 +1,4 @@
 const mdChartLoaded = import('../assets/javascripts/mdchart.js')
-const animOptions = {
-	duration: 2,
-	delay: 3
-}
 
 Promise.all([mdChartLoaded]).then((results) => {
 	const MdChart = results[0].default
@@ -48,7 +44,10 @@ Promise.all([mdChartLoaded]).then((results) => {
 								legend: null
 							}
 						},
-						{ ...animOptions, delay: 0 }
+						{
+							duration: 2,
+							delay: 0
+						}
 					),
 				(chart) =>
 					chart.animate(
@@ -78,7 +77,10 @@ Promise.all([mdChartLoaded]).then((results) => {
 								}
 							}
 						},
-						animOptions
+						{
+							duration: 2,
+							delay: 3
+						}
 					),
 				(chart) =>
 					chart.animate(
@@ -108,7 +110,10 @@ Promise.all([mdChartLoaded]).then((results) => {
 								}
 							}
 						},
-						animOptions
+						{
+							duration: 2,
+							delay: 3
+						}
 					),
 				(chart) =>
 					chart.animate(
@@ -139,7 +144,10 @@ Promise.all([mdChartLoaded]).then((results) => {
 								legend: null
 							}
 						},
-						animOptions
+						{
+							duration: 2,
+							delay: 3
+						}
 					)
 			]
 		}