Implement color attribute

keitaroinc · Nov 18, 2019 · 6d8e64e · 6d8e64e
1 parent c85a016
commit 6d8e64e
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 15 deletions.
diff --git a/ckanext/visualize/controllers/admin.py b/ckanext/visualize/controllers/admin.py
@@ -7,18 +7,7 @@
 import ckan.lib.helpers as h
 from ckan.plugins import toolkit
 from ckan.common import config
-
-DEFAULT_COLORS = [
-    '#332288',
-    '#117733',
-    '#44aa99',
-    '#88ccee',
-    '#ddcc77',
-    '#cc6677',
-    '#aa4499',
-    '#882255',
-    '#dd4444'
-]
+from ckanext.visualize.default_color_palette import DEFAULT_COLORS
 
 
 class AdminController(AdminController):

diff --git a/ckanext/visualize/default_color_palette.py b/ckanext/visualize/default_color_palette.py
@@ -0,0 +1,11 @@
+DEFAULT_COLORS = [
+    '#332288',
+    '#117733',
+    '#44aa99',
+    '#88ccee',
+    '#ddcc77',
+    '#cc6677',
+    '#aa4499',
+    '#882255',
+    '#dd4444'
+]
diff --git a/ckanext/visualize/fanstatic/js/modules/visualize-colors-settings-remove.js b/ckanext/visualize/fanstatic/js/modules/visualize-colors-settings-remove.js
@@ -7,6 +7,11 @@ ckan.module('visualize-colors-settings-remove', function($) {
       $(colorRemoveButton).on(
         'click',
         function(e) {
+          var colorPalette = $('#color-pallet');
+          if (colorPalette.children().length === 1) {
+            alert('At least one color is required for the palette.');
+            return;
+          }
           $(e.currentTarget)
             .closest('.input-group')
             .remove();

diff --git a/ckanext/visualize/fanstatic/js/modules/visualize-data.js b/ckanext/visualize/fanstatic/js/modules/visualize-data.js
@@ -3,13 +3,15 @@ on a chart based on the resource that has been provided. The resource must be
 uploaded to DataStore. */
 
 ckan.module('visualize-data', function($) {
+  var colorPalette = [];
   return {
     initialize: function() {
       var resourceView = this.options.resourceView;
       var resource = {
         id: this.options.resourceId,
         endpoint: this.sandbox.client.endpoint + '/api'
       };
+      colorPalette = this.options.colorPalette;
       var filters = resourceView.filters || [];
       var queryParams = {
         filters: [],
@@ -61,7 +63,7 @@ ckan.module('visualize-data', function($) {
           {
             label: 'Some dataset label',
             data: [],
-            backgroundColor: '#332288'
+            backgroundColor: colorPalette[0]
           }
         ]
       };
@@ -133,6 +135,9 @@ ckan.module('visualize-data', function($) {
           put: ['columns']
         },
         animation: 150,
+        onAdd: function onAdd(evt) {
+          onColumnAdd(evt);
+        },
         onRemove: function onRemove(evt) {
           onColumnRemove(evt);
         }
@@ -151,6 +156,33 @@ ckan.module('visualize-data', function($) {
             $.each(columns[column], function(i, item) {
               data.datasets[0].data.push(item);
             });
+          } else if (to === 'colour-attr') {
+            var colors = [];
+
+            // Extract the unique values from the selected column
+            var unique = columns[column].filter(
+              (v, i, a) => a.indexOf(v) === i
+            );
+
+            var columnColorsMapping = {};
+            var colorsIndex = 0;
+
+            // For each value assign a color
+            unique.forEach(function(value, i) {
+              var currentColor = colorPalette[i];
+
+              if (!currentColor) {
+                currentColor = colorPalette[colorsIndex];
+                colorsIndex++;
+              }
+
+              columnColorsMapping[value] = currentColor;
+            });
+
+            columns[column].forEach(function(value) {
+              colors.push(columnColorsMapping[value]);
+            });
+            data.datasets[0].backgroundColor = colors;
           }
           chart.update();
         }
@@ -165,6 +197,8 @@ ckan.module('visualize-data', function($) {
             data.labels = [];
           } else if (from === 'y-axis') {
             data.datasets[0].data = [];
+          } else if (from === 'colour-attr') {
+            data.datasets[0].backgroundColor = colorPalette[0];
           }
           item.remove();
           chart.update();

diff --git a/ckanext/visualize/helpers.py b/ckanext/visualize/helpers.py
@@ -1,4 +1,9 @@
+import json
+
 from ckan.plugins import toolkit
+from ckan.common import config
+
+from ckanext.visualize.default_color_palette import DEFAULT_COLORS
 
 
 def get_fields_without_id(resource_id):
@@ -14,6 +19,24 @@ def get_fields_without_id(resource_id):
     return [{'value': v['id'], 'type': v['type']} for v in fields if v['id'] != '_id']
 
 
+def get_color_palette():
+    """ Gets the existing color palette from the configuration.
+
+    :returns: List of colors
+    :rtype: list """
+
+    visualize_colors = config.get('visualize_colors')
+
+    if visualize_colors:
+        visualize_colors = json.loads(visualize_colors)
+        color_palette = []
+        for i, color in enumerate(visualize_colors):
+            color_palette.append(color.get('color_{0}'.format(i + 1)))
+        return color_palette
+    else:
+        return DEFAULT_COLORS
+
+
 def _get_fields(resource_id):
     """ Retrieves the DataStore fields for a resource.
 

diff --git a/ckanext/visualize/plugin.py b/ckanext/visualize/plugin.py
@@ -12,6 +12,7 @@ class VisualizePlugin(plugins.SingletonPlugin):
     plugins.implements(plugins.IConfigurer)
     plugins.implements(plugins.IResourceView, inherit=True)
     plugins.implements(plugins.IRoutes, inherit=True)
+    plugins.implements(plugins.ITemplateHelpers)
 
     # IConfigurer
 
@@ -80,3 +81,10 @@ def before_map(self, map):
         )
 
         return map
+
+    # ITemplateHelpers
+
+    def get_helpers(self):
+        return {
+            'get_color_palette': helpers.get_color_palette
+        }
diff --git a/ckanext/visualize/templates/snippets/visualize_view_show.html b/ckanext/visualize/templates/snippets/visualize_view_show.html
@@ -9,7 +9,8 @@
     class="container visualize-wrapper"
     data-module="visualize-data"
     data-module-resource-id = "{{ resource_id }}"
-    data-module-resource-view = "{{ h.dump_json(resource_view) }}">
+    data-module-resource-view = "{{ h.dump_json(resource_view) }}"
+    data-module-color-palette="{{ h.dump_json(h.get_color_palette()) }}">
     <div class="row">
             <nav class="main-nav navbar">
                 <div class="col-md-2 figure-wrapper">
@@ -59,7 +60,7 @@ <h5 class="section-heading">Data Types<em>For Intelligent Chart Selection, drag
                     </ul>
                 </section>
             </nav>
-       
+
     </div>
         <section class="chart-container">
             <canvas id="barChart"></canvas>

diff --git a/ckanext/visualize/tests/test_helpers.py b/ckanext/visualize/tests/test_helpers.py
@@ -0,0 +1,30 @@
+from ckan import plugins as p
+from ckan.tests import helpers as core_helpers
+
+from ckanext.visualize.default_color_palette import DEFAULT_COLORS
+from ckanext.visualize import helpers as extension_helpers
+
+
+class TestHelpers(core_helpers.FunctionalTestBase):
+
+    @classmethod
+    def setup_class(self):
+        super(TestHelpers, self).setup_class()
+
+        if not p.plugin_loaded('visualize'):
+            p.load('visualize')
+
+    @classmethod
+    def teardown_class(self):
+        super(TestHelpers, self).teardown_class()
+
+        p.unload('visualize')
+
+        core_helpers.reset_db()
+
+    def test_get_color_palette(self):
+        assert extension_helpers.get_color_palette() == DEFAULT_COLORS
+
+    @core_helpers.change_config('visualize_colors', '[{"color_1":"#fff"}]')
+    def test_get_color_palette_from_config(self):
+        assert extension_helpers.get_color_palette() == ['#fff']