Bump the release version and make a build

chartshq · Feb 1, 2019 · 962193b · 962193b
1 parent c783e5a
commit 962193b
Show file tree

Hide file tree

Showing 11 changed files with 5,433 additions and 4,721 deletions.
diff --git a/dist/muze.js b/dist/muze.js
diff --git a/dist/muze.js.map b/dist/muze.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -6,14 +6,57 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Muze</title>
-    <!-- <link rel="stylesheet" href="./muze.css" /> -->
-    <script src="/muze.js"></script>
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+
+    <!-- <link href="/muze.css" rel="stylesheet"> -->
+    <script src="/muze.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>
 </head>
+<style>
+    body,
+    html {
+        font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+        width: 100%;
+        height: 100%;
+    }
+
+
+    #parentdiv {
+        width: 1200px;
+        height: 1000px;
+        display: inline-block;
+    }
+    #chart {
+        float: left;
+    }
+    #chart2 {
+        float: left;
+    }
+    #chart3 {
+        padding: 50px 0;
+        overflow: hidden;
+        clear: both;
+    }
+</style>
 
 <body>
-    <div id='chart'></div>
 
-    <script src="./js/d3.js"></script>
-    <script src="./js/sample3.js"></script>
+    <div id='parentdiv'>
+        <div id="chart"></div>
+        <div id="chart2"></div>
+        <div id="chart3"></div>
+    </div>
+
+
+    <script src="https://d3js.org/d3.v4.js"></script>
+    <script src="./js/sample5.js"></script>
 </body>
+
 </html>
diff --git a/examples/js/sample3.js b/examples/js/sample3.js
@@ -1,4 +1,4 @@
-/* eslint disable */
+/* eslint-disable */
 const env = muze();
 const DataModel = muze.DataModel;
 
@@ -49,31 +49,19 @@ d3.json('../../data/cars.json', (data) => {
     }
     ];
 
-    const rootData = new DataModel(jsonData, schema);
-    let rows = ['Origin'],
-        columns = ['Horsepower'];
-    canvas = env.data(rootData)
-        .canvas()
-        .rows(rows)
-        .columns(columns)
-        .height(400)
-        // .color('Y.ear')
-        .width(250)
-        .minUnitWidth(140)
-        // .config({
-        //     axes: {
-        //         x: {
-        //             tickFormat: (value, rawValue, i, ticks) => value
-        //         }
-        //     }
-        // })
-        .config({
-            invalidValues: {
-                null: 'No Data Value is present in this particular tooltip'
-            }
-        })
-        .subtitle('A Nice Chart')
-        .title('Horsepower-Year')
-    .mount('#chart');
+    let rootData = new DataModel(jsonData, schema);
+    rootData = rootData.groupBy(["Origin", "Year"], {
+        Acceleration: "avg"
+    })
+
+    env.canvas()
+        .data(rootData)
+        .rows(['Acceleration'])
+        .columns(["Year"])
+        .color("Origin")
+        .height(500)
+        .width(600)
+        .title("Year wise average car Acceleration")
+        .mount('#chart');
 });
 
diff --git a/examples/js/sample5.js b/examples/js/sample5.js
@@ -0,0 +1,110 @@
+/* eslint-disable */
+d3.json('../data/cars.json', (data) => {
+    const jsonData = data;
+    const schema = [
+        {
+            name: 'Name',
+            type: 'dimension'
+        },
+        {
+            name: 'Maker',
+            type: 'dimension'
+        },
+        {
+            name: 'Miles_per_Gallon',
+            type: 'measure',
+            defAggFn: 'avg'
+        },
+
+        {
+            name: 'Displacement',
+            type: 'measure'
+        },
+        {
+            name: 'Horsepower',
+            type: 'measure',
+            defAggFn: 'avg'
+        },
+        {
+            name: 'Weight_in_lbs',
+            type: 'measure'
+        },
+        {
+            name: 'Acceleration',
+            type: 'measure',
+            defAggFn: 'sum'
+        },
+        {
+            name: 'Origin',
+            type: 'dimension'
+        },
+        {
+            name: 'Cylinders',
+            type: 'dimension'
+        },
+        {
+            name: 'Year',
+            type: 'dimension',
+            subtype: 'temporal',
+            format: '%Y-%m-%d'
+        }
+    ];
+
+    const env = muze();
+    const DataModel = muze.DataModel;
+
+    let rootData = new DataModel(jsonData, schema);
+    rootData = rootData.calculateVariable(
+        {
+            name: 'CountVehicle',
+            type: 'measure',
+            defAggFn: 'count',
+            numberFormat: val => parseInt(val, 10)
+        },
+        ['Name', () => 1]
+    );
+    env.data(rootData);
+
+    // line chart
+    env.canvas()
+        .rows(['CountVehicle'])
+        .columns(['Year'])
+        .data(rootData)
+        .width(450)
+        .height(300)
+        .title('Line Chart')
+        .mount('#chart');
+
+    // stacked bar chart
+    env.canvas()
+        .rows(['CountVehicle'])
+        .columns(['Year'])
+        .data(rootData)
+        .width(600)
+        .color('Origin')
+        .layers([{
+            mark: 'bar',
+            transform: {
+                type: 'stack'
+            }
+        }])
+        .height(300)
+        .title('Stacked Bar Chart')
+        .mount('#chart2');
+
+    // grouped bar chart with line
+    env.canvas()
+        .rows(['Miles_per_Gallon'])
+        .columns(['Year'])
+        .data(rootData)
+        .width(1050)
+        .color('Origin')
+        .layers([{
+            mark: 'bar'
+        }, {
+            mark: 'line'
+        }])
+        .height(300)
+        .title('Grouped Bar Chart and Line')
+        .mount('#chart3');
+});