Merge branch 'release/v1.2.3'

Author: rousan

dist/muze.js

@@ -1,111 +1,48 @@
-/* eslint-disable */
-
-(function () {
-	let env = muze();
-	let DataTable = muze.DataModel,
-		share = muze.Operators.share,
-		html = muze.Operators.html;
-
-	d3.csv('../../../data/coffee.csv', (data) => {
-		const jsonData = data,
-			schema = [{
-					name: 'Market',
-					type: 'dimension'
-				},
-				{
-					name: 'Product',
-					type: 'dimension'
-				},
-				{
-					name: 'Product Type',
-					type: 'dimension'
-				},
-
-				{
-					name: 'Revenue',
-					type: 'measure'
-				},
-				{
-					name: 'Expense',
-					type: 'measure'
-				},
-				{
-					name: 'Profit',
-					type: 'measure',
-				},
-				{
-					name: 'Order Count',
-					type: 'measure'
-				},
-			];
-        let rootData = new DataTable(jsonData, schema);
-
-
-		rootData = rootData.groupBy(['Market', 'Product Type', 'Product'], {
-
-		});
-
-		env = env.data(rootData).minUnitHeight(40).minUnitWidth(40);
-		let mountPoint = document.getElementById('chart');
-		window.canvas = env.canvas();
-		let canvas2 = env.canvas();
-		let canvas3 = env.canvas();
-		let rows = [[ 'Market', 'Product Type', 'Product']],
-			columns = [['Revenue', 'Expense', 'Profit', 'Order Count'], []];
-		canvas = canvas
-			.rows(rows)
-			.columns(columns)
-            .data(rootData)
-            // .detail(['Market', 'Product Type', 'Product'])
-            .minUnitHeight(10)
-			.width(500)
-            .height(2000)
-            .config({
-                border:{
-                    width: 2,
-                    // showRowBorders: false,
-                    // showColBorders:false,
-                    // showValueBorders: {
-                    //     top: false,
-                    //     bottom: true,
-                    //     left: true,
-                    //     right: false
-                    // }
-                },
-                axes:{
-                        x:{
-                            showAxisName: true,
-                            tickFormat : (d)=>{
-                                if(d<1000) return d;
-                                if(d>1000 && d<1000000) return `${d/1000}K`
-                                if(d>1000000) return `${d/1000}M`
-                                return d
-                            }
-
-
-                    }, y:{
-                        // showAxisName: true,
-                        // name: 'Acceleration per year',
-                        axisNamePadding: 12
-                    }
-                }
-            })
-
-        canvas.legend({
-            align:'horizontal',
-            title: [''],
-            item:{
-                text:{
-                    position:'right'
-                }
-            },
-            steps: 6
-        })
-
-        .title('The Muze Project', { position: "top", align: "left",  })
-		.subtitle('Composable visualisations with a data first approach', { position: "top", align: "left" })
-        .mount(document.getElementsByTagName('body')[0]);
-
-	})
-
-})()
+d3.csv('/data/coffee.csv', function (data) {
+    // load data and schema from url
+    var schema = [{
+      "name": "Market",
+      "type": "dimension"
+    }, {
+      "name": "Product",
+      "type": "dimension"
+    }, {
+      "name": "Product Type",
+      "type": "dimension"
+    }, {
+      "name": "Revenue",
+      "type": "measure"
+    }, {
+      "name": "Expense",
+      "type": "measure"
+    }, {
+      "name": "Profit",
+      "type": "measure"
+    }, {
+      "name": "Order Count",
+      "type": "measure"
+    }];
+    var env = window.muze();
+    var DataModel = window.muze.DataModel;
+    var rootData = new DataModel(data, schema);
+    // console.log('-----------------> 1 ', rootData.getData());
+     /* data and schema is global */
+    var canvas = env.canvas();
+    canvas.rows(['Market', 'Product Type']).columns([['Revenue', 'Expense'], ['Revenue', 'Expense']]).data(rootData).width(650).height(800).config({
+      showHeaders: true, /* show the headers of fields used in faceting */
+      facetConfig: { rows: { verticalAlign: 'middle' } }, /* dimensional values are placed in middle */
+      axes: {
+        y: { showAxisName: false }, /* dont show axis name as we are showing headers, its redundant information */
+        x: {
+          tickFormat: function tickFormat(d) {
+            if (d < 1000) return d;
+            if (d > 1000 && d < 1000000) return d / 1000 + "K";
+            if (d > 1000000) return d / 1000 + "M";
+            return d;
+          }
+        }
+      }
+    })
+    .title('Visual Crosstab')
+    .mount('#chart')
+});