From ae84cacb92be539813aab7453a8e773dec4dc2be Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Tue, 4 Dec 2018 10:27:20 -0500
Subject: [PATCH 1/7] fix ticks transition

---
 src/axis/transition.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/axis/transition.js b/src/axis/transition.js
index af93140..f33d74d 100644
--- a/src/axis/transition.js
+++ b/src/axis/transition.js
@@ -1,15 +1,16 @@
 import rotateXTicks from './rotete';
+import { transition } from 'd3-transition';
 
 const transitionTicks = (svg, data, opt, xAxis, yAxis) => {
-  const transition = svg.transition().duration(opt.animation.duration.update);
+  const _transition = transition().duration(opt.animation.duration.update);
   const delay = (d, i) => (i / data.length) * opt.animation.duration.update;
 
-  transition
+  _transition
     .select('.x.axis')
     .delay(delay)
     .call(xAxis);
 
-  transition
+  _transition
     .select('.y.axis')
     .delay(delay)
     .call(yAxis);

From 992c96184f6e3b9face88ee48f2fc04b4e5e70b1 Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Wed, 5 Dec 2018 09:48:39 -0500
Subject: [PATCH 2/7] fix rose center position

---
 src/model/rose/draw-canvas.js        | 5 ++++-
 src/model/rose/draw-hidden-canvas.js | 5 ++++-
 src/model/rose/draw-label.js         | 4 ++--
 src/model/rose/draw-petal.js         | 5 ++++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/model/rose/draw-canvas.js b/src/model/rose/draw-canvas.js
index 1ff2020..51fbb1f 100644
--- a/src/model/rose/draw-canvas.js
+++ b/src/model/rose/draw-canvas.js
@@ -18,7 +18,10 @@ const drawCanvas = (context, state, opt) => {
     let maxR = 0;
     for (let e of d.slice) {
       context.save();
-      context.translate(opt.chart.width / 2, opt.chart.height / 2);
+      context.translate(
+        opt.chart.innerWidth / 2 + opt.chart.margin.left,
+        opt.chart.innerHeight / 2 + opt.chart.margin.top
+      );
       context.beginPath();
       context.fillStyle = getTransparentColor(e.c, e.alpha);
       context.strokeWidth = 1;
diff --git a/src/model/rose/draw-hidden-canvas.js b/src/model/rose/draw-hidden-canvas.js
index e732503..1d2ba8d 100644
--- a/src/model/rose/draw-hidden-canvas.js
+++ b/src/model/rose/draw-hidden-canvas.js
@@ -20,7 +20,10 @@ const drawHiddenCanvas = (context, state, opt) => {
       const color = genColorByIndex(++i);
 
       context.save();
-      context.translate(opt.chart.width / 2, opt.chart.height / 2);
+      context.translate(
+        opt.chart.innerWidth / 2 + opt.chart.margin.left,
+        opt.chart.innerHeight / 2 + opt.chart.margin.top
+      );
       context.beginPath();
       context.fillStyle = color;
 
diff --git a/src/model/rose/draw-label.js b/src/model/rose/draw-label.js
index e49a361..8b44fad 100644
--- a/src/model/rose/draw-label.js
+++ b/src/model/rose/draw-label.js
@@ -11,8 +11,8 @@ const drawLabel = (context, opt, text, i, sliceNum, maxR, scale) => {
     14,
     'Oswald',
     opt.plots.axisLabelColor,
-    opt.chart.innerWidth / 2,
-    opt.chart.innerHeight / 2,
+    opt.chart.innerWidth / 2 + opt.chart.margin.left,
+    opt.chart.innerHeight / 2 + opt.chart.margin.top,
     radius,
     angle * i + angle / 2,
     0
diff --git a/src/model/rose/draw-petal.js b/src/model/rose/draw-petal.js
index ec5340e..dae8797 100644
--- a/src/model/rose/draw-petal.js
+++ b/src/model/rose/draw-petal.js
@@ -13,7 +13,10 @@ const drawPetal = (context, selection, opt, sliceNum) => {
     let maxR = 0;
     group.selectAll('.petal').each(function(d) {
       context.save();
-      context.translate(opt.chart.innerWidth / 2, opt.chart.innerHeight / 2);
+      context.translate(
+        opt.chart.innerWidth / 2 + opt.chart.margin.left,
+        opt.chart.innerHeight / 2 + opt.chart.margin.top
+      );
 
       const petal = select(this);
       const color = petal.attr('fill');

From 5e31166952f8bf4869dbb6577afb8298e2394a90 Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Wed, 5 Dec 2018 12:09:13 -0500
Subject: [PATCH 3/7] add missing imports

---
 src/model/corona/animate.js  | 1 +
 src/model/rose/draw-label.js | 4 ++--
 src/model/rose/draw-petal.js | 5 +----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/model/corona/animate.js b/src/model/corona/animate.js
index 6827c85..032a82d 100644
--- a/src/model/corona/animate.js
+++ b/src/model/corona/animate.js
@@ -1,4 +1,5 @@
 import animateStates from './tween-states';
+import { applyVoronoi } from 'vizart-core';
 import { mouse } from 'd3-selection';
 import { getDimensionVal, getMetric } from '../../helper/withCartesian';
 import getRadius from './get-radius';
diff --git a/src/model/rose/draw-label.js b/src/model/rose/draw-label.js
index 8b44fad..182f69d 100644
--- a/src/model/rose/draw-label.js
+++ b/src/model/rose/draw-label.js
@@ -11,8 +11,8 @@ const drawLabel = (context, opt, text, i, sliceNum, maxR, scale) => {
     14,
     'Oswald',
     opt.plots.axisLabelColor,
-    opt.chart.innerWidth / 2 + opt.chart.margin.left,
-    opt.chart.innerHeight / 2 + opt.chart.margin.top,
+    opt.chart.innerWidth,
+    opt.chart.innerHeight,
     radius,
     angle * i + angle / 2,
     0
diff --git a/src/model/rose/draw-petal.js b/src/model/rose/draw-petal.js
index dae8797..b923134 100644
--- a/src/model/rose/draw-petal.js
+++ b/src/model/rose/draw-petal.js
@@ -13,10 +13,7 @@ const drawPetal = (context, selection, opt, sliceNum) => {
     let maxR = 0;
     group.selectAll('.petal').each(function(d) {
       context.save();
-      context.translate(
-        opt.chart.innerWidth / 2 + opt.chart.margin.left,
-        opt.chart.innerHeight / 2 + opt.chart.margin.top
-      );
+      context.translate(opt.chart.innerWidth, opt.chart.innerHeight);
 
       const petal = select(this);
       const color = petal.attr('fill');

From d331c44d649928d93fce366a0550187bbcd6cd38 Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Wed, 5 Dec 2018 12:15:57 -0500
Subject: [PATCH 4/7] organize imports

---
 src/model/corona/animate.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/model/corona/animate.js b/src/model/corona/animate.js
index 032a82d..ad9507a 100644
--- a/src/model/corona/animate.js
+++ b/src/model/corona/animate.js
@@ -1,8 +1,8 @@
-import animateStates from './tween-states';
-import { applyVoronoi } from 'vizart-core';
+import { applyVoronoi, getTransparentColor } from 'vizart-core';
 import { mouse } from 'd3-selection';
 import { getDimensionVal, getMetric } from '../../helper/withCartesian';
 import getRadius from './get-radius';
+import animateStates from './tween-states';
 import drawCanvas from './draw-canvas';
 import { scaleLinear } from 'd3-scale';
 import highlight from './highlight';

From 1903550bf206c3d3c2a0c33ca002568dd75cdb41 Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Wed, 5 Dec 2018 13:48:04 -0500
Subject: [PATCH 5/7] fix rose center

---
 demo/row.html                        | 32 ++++++++++++++++++++++++----
 src/model/rose/draw-canvas.js        |  4 ++--
 src/model/rose/draw-hidden-canvas.js |  4 ++--
 src/model/rose/draw-label.js         |  4 ++--
 src/model/rose/draw-petal.js         |  2 +-
 5 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/demo/row.html b/demo/row.html
index db6a72e..2c2d021 100644
--- a/demo/row.html
+++ b/demo/row.html
@@ -135,6 +135,7 @@
 
         // change color
         $('#color1').click(function(){
+            options2.color.type = 'sequential';
             options2.color.scheme = [
                 '#ffe100',
                 '#ffbf00',
@@ -146,21 +147,25 @@
         });
 
         $('#color2').click(function(){
+            options2.color.type = 'sequential';
             options2.color.scheme = "Cold";
             barChart.color(options2.color)
         });
 
         $('#color3').click(function(){
+            options2.color.type = 'categorical';
             options2.color.scheme = "Warm";
             barChart.color(options2.color)
         });
 
         $('#color4').click(function(){
+            options2.color.type = 'categorical';
             options2.color.scheme = d3.interpolateCubehelixDefault;
             barChart.color(options2.color);
         });
 
         $('#set1').click(function(){
+            options2.color.type = 'sequential';
             options2.color.scheme = [
                 '#deebf7',
                 '#3182bd'
@@ -170,6 +175,7 @@
 
 
         $('#set2').click(function(){
+            options2.color.type = 'sequential';
             options2.color.scheme = [
                 '#deebf7',
                 '#9ecae1',
@@ -180,6 +186,7 @@
 
 
         $('#set3').click(function(){
+            options2.color.type = 'sequential';
             options2.color.scheme = [
                 '#eff3ff',
                 '#bdd7e7',
@@ -194,6 +201,7 @@
 
 
         $('#set4').click(function(){
+            options2.color.type = 'sequential';
             options2.color.scheme = [
                 '#f7fbff',
                 '#deebf7',
@@ -209,16 +217,32 @@
         });
 
         $('#a1').click(function(){
-            barChart.sort('Director', 'asc');
+            options2.color.ordering = {
+                accessor: 'Director',
+                direction: 'asc'
+            };
+            barChart.update();
         })
         $('#a2').click(function(){
-            barChart.sort('Director', 'desc');
+            options2.color.ordering = {
+                accessor: 'Director',
+                direction: 'desc'
+            };
+            barChart.update();
         });
         $('#a3').click(function(){
-            barChart.sort('Total', 'asc');
+            options2.color.ordering = {
+                accessor: 'Total',
+                direction: 'asc'
+            };
+            barChart.update();
         });
         $('#a4').click(function(){
-            barChart.sort('Total', 'desc');
+            options2.color.ordering = {
+                accessor: 'Total',
+                direction: 'desc'
+            };
+            barChart.update();
         });
 
     });
diff --git a/src/model/rose/draw-canvas.js b/src/model/rose/draw-canvas.js
index 51fbb1f..8bc1f2c 100644
--- a/src/model/rose/draw-canvas.js
+++ b/src/model/rose/draw-canvas.js
@@ -19,8 +19,8 @@ const drawCanvas = (context, state, opt) => {
     for (let e of d.slice) {
       context.save();
       context.translate(
-        opt.chart.innerWidth / 2 + opt.chart.margin.left,
-        opt.chart.innerHeight / 2 + opt.chart.margin.top
+        opt.chart.width / 2,
+        opt.chart.height / 2
       );
       context.beginPath();
       context.fillStyle = getTransparentColor(e.c, e.alpha);
diff --git a/src/model/rose/draw-hidden-canvas.js b/src/model/rose/draw-hidden-canvas.js
index 1d2ba8d..e5da0a2 100644
--- a/src/model/rose/draw-hidden-canvas.js
+++ b/src/model/rose/draw-hidden-canvas.js
@@ -21,8 +21,8 @@ const drawHiddenCanvas = (context, state, opt) => {
 
       context.save();
       context.translate(
-        opt.chart.innerWidth / 2 + opt.chart.margin.left,
-        opt.chart.innerHeight / 2 + opt.chart.margin.top
+          opt.chart.width / 2,
+          opt.chart.height / 2
       );
       context.beginPath();
       context.fillStyle = color;
diff --git a/src/model/rose/draw-label.js b/src/model/rose/draw-label.js
index 182f69d..05157d3 100644
--- a/src/model/rose/draw-label.js
+++ b/src/model/rose/draw-label.js
@@ -11,8 +11,8 @@ const drawLabel = (context, opt, text, i, sliceNum, maxR, scale) => {
     14,
     'Oswald',
     opt.plots.axisLabelColor,
-    opt.chart.innerWidth,
-    opt.chart.innerHeight,
+    opt.chart.width / 2,
+    opt.chart.height / 2,
     radius,
     angle * i + angle / 2,
     0
diff --git a/src/model/rose/draw-petal.js b/src/model/rose/draw-petal.js
index b923134..5125b51 100644
--- a/src/model/rose/draw-petal.js
+++ b/src/model/rose/draw-petal.js
@@ -13,7 +13,7 @@ const drawPetal = (context, selection, opt, sliceNum) => {
     let maxR = 0;
     group.selectAll('.petal').each(function(d) {
       context.save();
-      context.translate(opt.chart.innerWidth, opt.chart.innerHeight);
+      context.translate(opt.chart.width / 2, opt.chart.height / 2);
 
       const petal = select(this);
       const color = petal.attr('fill');

From b32e832d6e8d8a90aaaa9aff2bdbf1d4a7c6b190 Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Thu, 6 Dec 2018 22:38:27 -0500
Subject: [PATCH 6/7] coding style

---
 demo/rose.html                       | 89 +++++++++++++++++++++++++---
 src/model/rose/draw-canvas.js        |  5 +-
 src/model/rose/draw-hidden-canvas.js |  5 +-
 3 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/demo/rose.html b/demo/rose.html
index 716423d..6e3baa0 100644
--- a/demo/rose.html
+++ b/demo/rose.html
@@ -10,6 +10,7 @@
     <script src="./lib/bootstrap-3.3.7/js/bootstrap.js"></script>
     <script src="./lib/d3.js"></script>
     <script src="./lib/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.js"></script>
     <script src="./vizart-basic.standalone.js" type="text/javascript"></script>
 </head>
 <body>
@@ -26,15 +27,23 @@
     </ul>
 </div>
 
-<div id="chart" class="chart-container"></div>
-
+<div class="container" style="width: 100%; height: 100%">
+    <div class="row"  style="width: 100%; height: 100%">
+        <div class="col-lg-6"  style="height: 100%">
+            <div id="chart" class="chart-container"></div>
+        </div>
+        <div class="col-lg-6"  style="height: 100%">
+            <div id="chart2" class="chart-container"></div>
+        </div>
+    </div>
+</div>
 
 <script>
     $(document).ready(function () {
-        var opt = {
+        const opt = {
             chart: {
               margin: {
-                  left: 0,
+                  left: 10,
                   right: 0,
                   top: 0,
                   bottom: 0
@@ -52,6 +61,7 @@
                     { name: 'm3', type: 'number', accessor: 'm3'}
                 ],
             },
+            legend: { enabled : true },
             plots: {
                 innerRadiusRatio: 0,
                 padAngle: 0.04,
@@ -74,10 +84,60 @@
             },
         };
 
+        const opt2 = {
+            chart: {
+                margin: {
+                    left: 10,
+                    right: 10,
+                    top: 0,
+                    bottom: 0
+                }
+            },
+            color: {
+                type: 'categorical',
+                scheme: [
+                    '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
+                    '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
+                ]
+            },
+            legend: { enabled : false },
+            data: {
+                x:   { name: 'Director', type: 'string', accessor: 'dimension'},
+                y: [
+                    { name: 'Total', type: 'number', accessor: 'metric'},
+                ],
+            },
+            plots: {
+                innerRadiusRatio: 0.4,
+                padAngle: 0,
+                opacity: 1,
+                outerRadiusMargin: 20,
+                axisLabelAlign: true,
+                axisLabelAlignThreshold: 0.7,
+                dimensionOrder: ["January",
+                    "February",
+                    "March",
+                    "April",
+                    "May",
+                    "June",
+                    "console.log(userOpt)July",
+                    "August",
+                    "September",
+                    "October",
+                    "November",
+                    "December"]
+            },
+        };
 
-        var rose = VizArtBasic.rose('#chart', opt);
 
-        var data = [
+
+        const rose = VizArtBasic.rose('#chart', opt);
+        const rose2 = VizArtBasic.rose('#chart2', opt2);
+        console.log(rose._options.chart.margin);
+        console.log(rose2._options.chart.margin);
+
+
+        const data = [
             {"dimension": "January", "metric": 10, m2: 4, m3: 34},
             {"dimension": "February", "metric": 15, m2: 2, m3: 24},
             {"dimension": "March", "metric": 12, m2: 3, m3: 25},
@@ -92,8 +152,23 @@
             {"dimension": "December", "metric": 20, m2: 12, m3: 13}
         ]
 
-        rose.render(data);
+        const data2 = [
+            {"dimension": "January", "metric": 2, m2: 142, m3: 324},
+            {"dimension": "February", "metric": 15, m2: 29, m3: 234},
+            {"dimension": "March", "metric": 12, m2: 3, m3: 25},
+            {"dimension": "April", "metric": 4, m2: 6, m3: 35},
+            {"dimension": "May", "metric": 20, m2: 7, m3: 63},
+            {"dimension": "June", "metric": 21, m2: 5, m3: 38},
+            {"dimension": "July", "metric": 2, m2: 2, m3: 33},
+            {"dimension": "August", "metric": 8, m2: 1, m3: 52},
+            {"dimension": "September", "metric": 7, m2: 9, m3: 45},
+            {"dimension": "October", "metric": 12, m2: 5, m3: 10},
+            {"dimension": "November", "metric": 22, m2: 12, m3: 3},
+            {"dimension": "December", "metric": 20, m2: 12, m3: 13}
+        ]
 
+        rose.render(data);
+        rose2.render(data2);
 
         // live update button is clicked
         $('#update').click(function(){
diff --git a/src/model/rose/draw-canvas.js b/src/model/rose/draw-canvas.js
index 8bc1f2c..1ff2020 100644
--- a/src/model/rose/draw-canvas.js
+++ b/src/model/rose/draw-canvas.js
@@ -18,10 +18,7 @@ const drawCanvas = (context, state, opt) => {
     let maxR = 0;
     for (let e of d.slice) {
       context.save();
-      context.translate(
-        opt.chart.width / 2,
-        opt.chart.height / 2
-      );
+      context.translate(opt.chart.width / 2, opt.chart.height / 2);
       context.beginPath();
       context.fillStyle = getTransparentColor(e.c, e.alpha);
       context.strokeWidth = 1;
diff --git a/src/model/rose/draw-hidden-canvas.js b/src/model/rose/draw-hidden-canvas.js
index e5da0a2..e732503 100644
--- a/src/model/rose/draw-hidden-canvas.js
+++ b/src/model/rose/draw-hidden-canvas.js
@@ -20,10 +20,7 @@ const drawHiddenCanvas = (context, state, opt) => {
       const color = genColorByIndex(++i);
 
       context.save();
-      context.translate(
-          opt.chart.width / 2,
-          opt.chart.height / 2
-      );
+      context.translate(opt.chart.width / 2, opt.chart.height / 2);
       context.beginPath();
       context.fillStyle = color;
 

From e5de67c68bad180333979073d642e7aca04f5cdc Mon Sep 17 00:00:00 2001
From: Yun Xing <ink.xing.yun@gmail.com>
Date: Thu, 6 Dec 2018 22:46:45 -0500
Subject: [PATCH 7/7] bump to v2.0.3

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ed07ae..8f29ab7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vizart-basic",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 049d630..a023a00 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vizart-basic",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "VizArt Basic Charts: bar, row, rose, line, area, etc.",
   "main": "dist/vizart-basic.js",
   "module": "dist/vizart-basic.mjs",