Add pie.sort/donut/sort option to disable sorting - #328

11 years ago · 4033306090
4 changed files with 100 additions and 3 deletions
--- a/c3.js
+++ b/c3.js
@ -259,6 +259,7 @@
        var __pie_label_show = getConfig(['pie', 'label', 'show'], true),
            __pie_label_format = getConfig(['pie', 'label', 'format']),
            __pie_label_threshold = getConfig(['pie', 'label', 'threshold'], 0.05),
+            __pie_sort = getConfig(['pie', 'sort'], true),
            __pie_expand = getConfig(['pie', 'expand'], true),
            __pie_onclick = getConfig(['pie', 'onclick'], function () {}),
            __pie_onmouseover = getConfig(['pie', 'onmouseover'], function () {}),
@ -280,6 +281,7 @@
        var __donut_label_show = getConfig(['donut', 'label', 'show'], true),
            __donut_label_format = getConfig(['donut', 'label', 'format']),
            __donut_label_threshold = getConfig(['donut', 'label', 'threshold'], 0.05),
+            __donut_sort = getConfig(['donut', 'sort'], true),
            __donut_expand = getConfig(['donut', 'expand'], true),
            __donut_title = getConfig(['donut', 'title'], ""),
            __donut_onclick = getConfig(['donut', 'onclick'], function () {}),
@ -1010,6 +1012,9 @@
        pie = d3.layout.pie().value(function (d) {
            return d.values.reduce(function (a, b) { return a + b.value; }, 0);
        });
+        if (!__pie_sort || !__donut_sort) { // TODO: this needs to be called by each type
+            pie.sort(null);
+        }

        function updateAngle(d) {
            var found = false;
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -58,6 +58,9 @@
              <a href="./samples/chart_pie.html">
                Pie chart with ordinary data
              </a>
+              <a href="./samples/chart_pie_sort.html">
+                Pie chart with/without sort
+              </a>
            </div>
            <div class="col-md-4">
              <h3>Donut Chart</h3>
--- a/htdocs/samples/chart_pie_sort.html
+++ b/htdocs/samples/chart_pie_sort.html
@ -0,0 +1,89 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var sort = true;
+
+      var generate = function () { return c3.generate({
+        data: {
+          columns: [
+//            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
+            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
+            ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
+            ["setosa", 30],
+//            ["versicolor", 40],
+//            ["virginica", 50],
+          ],
+          type : 'pie',
+        },
+        axis: {
+          x: {
+            label: 'Sepal.Width'
+          },
+          y: {
+            label: 'Petal.Width'
+          }
+        },
+        pie: {
+          sort: sort,
+          onmouseover: function (d, i) { console.log(d, i); },
+          onmouseout: function (d, i) { console.log(d, i); },
+          onclick: function (d, i) { console.log(d, i); },
+        }
+      }); }, chart = generate();
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 1000);
+
+      setTimeout(function () {
+        chart.unload('virginica');
+      }, 2000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["new data", 300],
+          ]
+        });
+      }, 3000);
+
+      setTimeout(function () {
+        sort = false;
+        chart = generate();
+      }, 4000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["setosa", 130],
+          ]
+        });
+      }, 5000);
+
+      setTimeout(function () {
+        chart.unload('virginica');
+      }, 6000);
+
+      setTimeout(function () {
+        chart.load({
+          columns: [
+            ["new data", 300],
+          ]
+        });
+      }, 7000);
+
+    </script>
+  </body>
+</html>