chore(donut chart): Add more default colors for donut chart (#916)

patternfly · Jan 19, 2018 · 74cdae7 · 74cdae7
1 parent dec146e
commit 74cdae7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/src/js/patternfly-settings-charts.js b/src/js/patternfly-settings-charts.js
@@ -155,6 +155,18 @@
           ]
         };
       },
+      getDefaultRelationshipDonutColors = function () {
+        return {
+          pattern: [
+            patternfly.pfPaletteColors.blue,
+            patternfly.pfPaletteColors.red100,
+            patternfly.pfPaletteColors.orange400,
+            patternfly.pfPaletteColors.green400,
+            patternfly.pfPaletteColors.cyan500,
+            patternfly.pfPaletteColors.gold200,
+          ]
+        };
+      },
       getDefaultDonutTooltip = function () {
         return {
           show: false
@@ -174,6 +186,15 @@
           tooltip: this.getDefaultDonutTooltip()
         };
       },
+      getDefaultRelationshipDonutConfig = function (title) {
+        return {
+          donut: this.getDefaultDonut(title),
+          size: this.getDefaultDonutSize(),
+          legend: this.getDefaultDonutLegend(),
+          color: this.getDefaultRelationshipDonutColors(),
+          tooltip: this.getDefaultDonutTooltip()
+        };
+      },
       getDefaultPie = function () {
         return {
           expand: true,
@@ -391,9 +412,11 @@
       getDefaultDonutTooltip: getDefaultDonutTooltip,
       getDefaultDonutLegend: getDefaultDonutLegend,
       getDefaultDonutConfig: getDefaultDonutConfig,
+      getDefaultRelationshipDonutConfig: getDefaultRelationshipDonutConfig,
       getDefaultPie: getDefaultPie,
       getDefaultPieSize: getDefaultPieSize,
       getDefaultPieColors: getDefaultPieColors,
+      getDefaultRelationshipDonutColors: getDefaultRelationshipDonutColors,
       getDefaultPieTooltip: getDefaultPieTooltip,
       getDefaultPieLegend: getDefaultPieLegend,
       getDefaultPieConfig: getDefaultPieConfig,

diff --git a/tests/pages/_includes/widgets/charts/donut-mini.html b/tests/pages/_includes/widgets/charts/donut-mini.html
@@ -5,12 +5,6 @@
 
   var donutData = {
     type : 'donut',
-    colors: {
-      Cats: $.pfPaletteColors.blue,
-      Hamsters: $.pfPaletteColors.green,
-      Fish: $.pfPaletteColors.orange,
-      Dogs: $.pfPaletteColors.red
-    },
     columns: [
       ['Dogs', 2],
       ['Cats', 2],
@@ -23,7 +17,7 @@
   };
 
   // Small Donut Chart
-  var donutChartSmallConfig = c3ChartDefaults.getDefaultDonutConfig('8');
+  var donutChartSmallConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig('8');
   donutChartSmallConfig.bindto = '#{{include.id}}';
   donutChartSmallConfig.tooltip = {show: true};
   donutChartSmallConfig.data = donutData;

diff --git a/tests/pages/_includes/widgets/charts/donut-whole-relationship.html b/tests/pages/_includes/widgets/charts/donut-whole-relationship.html
@@ -6,12 +6,6 @@
 
   var donutData = {
     type : 'donut',
-    colors: {
-      Cats: $.pfPaletteColors.blue,
-      Hamsters: $.pfPaletteColors.green,
-      Fish: $.pfPaletteColors.orange,
-      Dogs: $.pfPaletteColors.red
-    },
     columns: [
       ['Dogs', 2],
       ['Cats', 2],
@@ -24,7 +18,7 @@
   };
 
   // Donut Chart without Legend
-  var donutChartConfig = c3ChartDefaults.getDefaultDonutConfig();
+  var donutChartConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig();
   donutChartConfig.bindto = '#{{include.id}}1';
   donutChartConfig.tooltip = {show: true};
   donutChartConfig.data = donutData;
@@ -40,7 +34,7 @@
   $().pfSetDonutChartTitle("#{{include.id}}1", "8", "Animals");
 
   // Right Legend
-  var donutChartRightConfig = c3ChartDefaults.getDefaultDonutConfig();
+  var donutChartRightConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig();
   donutChartRightConfig.bindto = '#{{include.id}}2';
   donutChartRightConfig.tooltip = {show: true};
   donutChartRightConfig.data = donutData;
@@ -60,7 +54,7 @@
   $().pfSetDonutChartTitle("#{{include.id}}2", "8", "Animals");
 
   // Donut Chart Bottom Legend
-  var donutChartBottomConfig = c3ChartDefaults.getDefaultDonutConfig();
+  var donutChartBottomConfig = c3ChartDefaults.getDefaultRelationshipDonutConfig();
   donutChartBottomConfig.bindto = '#{{include.id}}3';
   donutChartBottomConfig.tooltip = {show: true};
   donutChartBottomConfig.data = donutData;