Merge branch 'release/v1.3.1'

Author: adarshlilha

README.md

@@ -127,13 +127,13 @@ canvas
   .mount("#chart"); // Specify an element to mount on using a CSS selector
 ```
 
-See [muzejs.org/docs](https://muzejs.org/docs) for more documentation!
+See [muzejs.org/docs](https://muzejs.org/docs/v1.3.1) for more documentation!
 
 You also can checkout our Yeoman Generator [generator-muze](https://github.com/chartshq/generator-muze) to try out the **muze** through a boilerplate app.
 
 ## Documentation
 
-You can find detailed tutorials, concepts and API references at [muzejs.org/docs](https://muzejs.org/docs).
+You can find detailed tutorials, concepts and API references at [muzejs.org/docs](https://muzejs.org/docs/v1.3.1).
 
 ## Support
 

bitbucket-pipelines.yml

@@ -1,5 +1,6 @@
 image: node:10.16.3
-
+options:
+  max-time: 30
 pipelines:
    pull-requests:
       '**':
@@ -9,4 +10,4 @@ pipelines:
                 - apt-get install zip
                 - npm install --unsafe-perm
                 - npm run test
-                - npm run autotest:prod
+                - npm run autotest:prod

dist/muze.css

@@ -9,26 +9,16 @@
     <!-- <link rel="stylesheet" href="./muze.css" /> -->
     <script src="/muze.js"></script>
     <style>
-        body,
-        html {
-            font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
-        }
-
-        #chart-container {
+        #chart {
+            /* width: 800px; */
+            /* height: 550px; */
             overflow-y: auto !important;
             text-align: center;
             padding: 0px 10px 10px 10px;
             height: auto;
-            min-height: 350px;
-        }
-
-        .averageLine path {
-            stroke-width: 2px;
         }
-        #chart{
-            /* position: absolute;
-            left:50px;
-            top:50px; */
+        .muze-grid-td-id-15795913960365158 {
+            border-color: brown !important;
         }
     </style>
 </head>
@@ -47,20 +37,7 @@
         <div id="chart7"></div>
         <div id="chart8"></div>
 </div>
-<!-- <script src="./js/simple-bar.js"></script> -->
-<script src="./samples/design-samples/scatter-shape.js"></script>
-
-<!-- <script src="./js/tooltips/area.js"></script> -->
-<!-- <script src="./js/simple-bar.js"></script> -->
-<!-- <script src="./samples/design-samples/scatter-shape.js"></script> -->
-<!-- <script src="./js/aaa1.js"></script> -->
-<!-- <script src="./js/aaa3.js"></script> -->
-<!-- <script src="./js/aaa2.js"></script> -->
-<!-- <script src="./js/composite-layers.js"></script> -->
-<!-- <script src="./js/composition-of-layer.js"></script> -->
-<!-- <script src="./js/reference-lines.js"></script> -->
-<!-- <script src="./js/dual-line-point.js"></script> -->
-<!-- <script src="./js/no-data.js"></script> -->
-<!-- <script src="./js/concurrent-tooltip.js"></script> -->
+<script src="./js/legends/gradient.js"></script>
 </body>
+
 </html>

dist/muze.js

@@ -21,7 +21,7 @@
     <script src="./js/d3.js"></script>
     <!-- <script src="./js/sample3.js"></script> -->
     <!-- <script src="./js/crosstab-sorted.js"></script> -->
-    <script src="./js/bubble-temporal.js"></script>
+    <script src="./samples/design-samples/scatter-shape.js"></script>
 </body>
 
 </html>

dist/muze.js.map

@@ -4,62 +4,34 @@
     let env = window.muze();
     const DataModel = window.muze.DataModel;
 
-    d3.csv('/data/weather.csv', (data) => {
-        const share = muze.Operators.share;
+    d3.csv('/data/austin-weather.csv', (data) => {
         const schema = [{
-        name: 'maxDays',
-        type: 'measure'
+        name: 'Date',
+        type: 'dimension'
     }, {
-        name: 'minDays',
+        name: 'Events',
+        type: 'dimension'
+    },{
+        name: 'DewPointHighF',
         type: 'measure'
-    }, {
-        name: 'time',
-        type: 'dimension',
     }];
-
-    let rootData = new DataModel(data, schema)
-
-    rootData = rootData.calculateVariable({
-        name: "date",
-        type: "dimension",
-        subtype: "temporal",
-        format: "%Y-%m-%d"
-    }, ["Year", function (d) {
-        return d;
+    let dm = new DataModel(data, schema);
+    dm = dm.calculateVariable({
+        name: 'Year',
+        type: 'dimension'
+    }, ['Date', (y) => {
+        const date = new Date(y);
+        return date.getFullYear();
     }]);
-
-    env = env.data(rootData).minUnitHeight(40).minUnitWidth(40);
-    var mountPoint = document.getElementById('chart');
-    window.canvas = env.canvas();
-    var rows = ['Cylinders', 'Horsepower'],
-        columns = ['Origin', 'Year'];
-    canvas = canvas.rows(rows).columns(columns).height(800).color('Origin')
-    //{initProps}
-    .mount(mountPoint);
-
-    setTimeout(() => {
-        canvas.rows(['Horsepower', 'Acceleration']).columns(['Acceleration', 'Horsepower']).color('Horsepower').size('Cylinders').detail(['Maker']).width(300).height(300);
-        canvas.once('canvas.animationend').then(function (client) {
-            var element = document.getElementById('chart');
-            element.classList.add('animateon');
-        });
-    }, 3000);
-
-    // const canvas = env.canvas();
+    // dm = dm.select((fields) => !!fields.Events.value)
+    const canvas = env.canvas();
 
-    // canvas
-    //     .data(rootData)
-    //     // .rows(['maxDays'])
-    //     .rows([share('maxDays', 'minDays')])
-    //     .columns(['time'])
-    //     .layers([{ mark: 'tick', encoding: { y: 'maxDays', y0: 'minDays' } } ])
-    //     // .layers([{
-    //     //     mark: 'area'
-    //     // }])
-    //     // .detail(['Name'])
-    //     .mount('#chart')
-    //     .height(500)
-    //     .width(900)
-    //     .title('Charts');
-    })
-})();
+    canvas
+        .columns(['Year', 'Events'])
+        .rows(['DewPointHighF'])	
+        .width(1000)
+        .height(400)
+        .data(dm)
+        .mount('#chart')
+    });
+})();

examples/index.html

@@ -10,71 +10,71 @@ d3.json('../data/cars.json', function (data) {
 
         schema = [{
 
-        name: 'Name',
+            name: 'Name',
 
-        type: 'dimension'
+            type: 'dimension'
 
-    }, {
+        }, {
 
-        name: 'Maker',
+            name: 'Maker',
 
-        type: 'dimension'
+            type: 'dimension'
 
-    }, {
+        }, {
 
-        name: 'Miles_per_Gallon',
+            name: 'Miles_per_Gallon',
 
-        type: 'measure'
+            type: 'measure'
 
-    }, {
+        }, {
 
-        name: 'Displacement',
+            name: 'Displacement',
 
-        type: 'measure'
+            type: 'measure'
 
-    }, {
+        }, {
 
-        name: 'Horsepower',
+            name: 'Horsepower',
 
-        type: 'measure'
+            type: 'measure'
 
-    }, {
+        }, {
 
-        name: 'Weight_in_lbs',
+            name: 'Weight_in_lbs',
 
-        type: 'measure'
+            type: 'measure'
 
-    }, {
+        }, {
 
-        name: 'Acceleration',
+            name: 'Acceleration',
 
-        type: 'measure'
+            type: 'measure'
 
-    }, {
+        }, {
 
-        name: 'Origin',
+            name: 'Origin',
 
-        type: 'dimension'
+            type: 'dimension'
 
-    }, {
+        }, {
 
-        name: 'Cylinders',
+            name: 'Cylinders',
 
-        type: 'dimension'
+            type: 'dimension'
 
-    }, {
+        }, {
 
-        name: 'Year',
+            name: 'Year',
 
-        type: 'dimension',
+            type: 'dimension',
 
-        //{subtype}
+            //{subtype}
 
-        // subtype: 'temporal',
+            // subtype: 'temporal',
 
-        // format: '%Y-%m-%d'
+            // format: '%Y-%m-%d'
 
-    }];
+        }];
 
     var rootData = new DataModel(jsonData, schema);
 
@@ -93,25 +93,18 @@ d3.json('../data/cars.json', function (data) {
         })
         .config({
             legend: {
-                position: 'bottom'
+                position: 'bottom',
+                color: {
+                    marker: {
+                        text: {
+                            formatter: (data, domain, dm) => {
+                                return `${data} m/s2`;
+                            }
+                        }
+                    },
+
+                }
             }
         })
-        .mount('#chart1')
-
-    env.canvas()
-        .rows(["Maker"])
-        .height(400)
-        .columns(['Acceleration'])
-        .data(rootData)
-        .color({
-            field: 'Acceleration',
-            stops: 3
-        })
-        .config({
-            legend: {
-                position: 'left'
-            }
-        })
-        .mount('#chart2')
-
+        .mount('#chart1');
 });

examples/index1.html

@@ -57,20 +57,25 @@ d3.csv('../../data/coffee.csv', (data) => {
         },
         facetConfig: { rows: { verticalAlign: 'bottom' } }, /* dimensional values are placed in middle */
         border:{
+          color:'blue',
             showRowBorders: {
               top: true,
               bottom: true,
+              left: true,
+              right: true
+            },
+            showValueBorders:{
+              top: false,
+              bottom: true,
+              left: true,
+              right: true
             },
             showColBorders:{
-                left: true,
-                right: true
+              top: true,
+              bottom: true,
+              left: true,
+              right: true
             },
-            showValueBorders: {
-                top: true,
-                bottom: true,
-                left: true,
-                right: true
-            }
         },
       })
       .title('Visual Crosstab')