Add percentage range option for y-axis (#493)

Author: mpolidori

ckanext/querytool/controllers/querytool.py

@@ -492,6 +492,14 @@ def edit_visualizations(self, querytool=None, data=None,
                         visualization['y_from_zero'] = 'true'
                     else:
                         visualization['y_from_zero'] = 'false'
+                    visualization['axis_max'] = \
+                        data.get('chart_field_axis_max_{}'.format(id))
+                    visualization['axis_min'] = \
+                        data.get('chart_field_axis_min_{}'.format(id))
+                    if 'chart_field_axis_range_{}'.format(id) in data:
+                        visualization['axis_range'] = 'true'
+                    else:
+                        visualization['axis_range'] = 'false'
                     if 'chart_field_x_from_zero_{}'.format(id) in data:
                         visualization['x_from_zero'] = 'true'
                     else:

ckanext/querytool/fanstatic/javascript/dist/modules/viz-preview.js

@@ -1075,4 +1075,44 @@ function renderChartTitle (title, options) {
   } catch (error) {
       return title;
   }
-}
+}
+
+// Hide axis range for unsupported types
+$('body').on('change','[id^=chart_field_graph_]',function(){
+  var chart_number = this.id.split('_').slice(-1)[0];
+  var selected = $(`#chart_field_graph_${chart_number}`).val();
+  var rangeEnabled = $(`#chart_field_axis_range_${chart_number}`)[0].checked;
+
+  hideAxisPercentagesCheckbox(selected,chart_number);
+  hideAxisMinMax(selected,chart_number,rangeEnabled);
+});
+
+$('body').on('change','[id^=chart_field_axis_range_]',function(){
+  var chart_number = this.id.split('_').slice(-1)[0];
+  var selected = $(`#chart_field_graph_${chart_number}`).val();
+  var rangeEnabled = this.checked;
+
+  hideAxisMinMax(selected,chart_number,rangeEnabled);
+});
+
+function hideAxisPercentagesCheckbox(selected,chart_number){
+  if(['shbar', 'sbar', 'pie', 'donut'].includes(selected)) {
+    $(`#chart_field_axis_range_${chart_number}`).attr('checked', false);
+    $(`#chart_field_axis_range_${chart_number}`).hide();
+    $(`label[for=chart_field_axis_range_${chart_number}], #chart_field_axis_range_${chart_number}`).hide();
+  } else {
+    $(`#chart_field_axis_range_${chart_number}`).show();
+    $(`.show_axis_range_${chart_number}`).removeClass('hidden');
+    $(`label[for=chart_field_axis_range_${chart_number}], #chart_field_axis_range_${chart_number}`).show();
+  }
+};
+
+function hideAxisMinMax(selected,chart_number,rangeEnabled){
+  if(['shbar', 'sbar', 'pie', 'donut'].includes(selected) || [false, undefined].includes(rangeEnabled)) {
+    $(`.axis_range_min_${chart_number}`).addClass('hidden');
+    $(`.axis_range_max_${chart_number}`).addClass('hidden');
+  } else {
+    $(`.axis_range_min_${chart_number}`).removeClass('hidden');
+    $(`.axis_range_max_${chart_number}`).removeClass('hidden');
+  }
+};

ckanext/querytool/fanstatic/javascript/dist/visualizations_settings.js

@@ -570,6 +570,7 @@
                </div>
             </div>
 
+
             {# Show values as percentages (pie and donut charts only) #}
             {% if chart %}
               {% set show_labels_as_percentages = chart.show_labels_as_percentages %}
@@ -630,6 +631,42 @@
             </div>
             {# {% endif %} #}
 
+            {# Axis percentages #}
+            {% if chart %}
+              {% set axis_range = chart.axis_range %}
+              {% set axis_min = chart.axis_min %}
+              {% set axis_max = chart.axis_max %}
+            {% endif %}
+
+            {% if axis_range=='true' and selected_chart_type not in ['pie', 'donut', 'sbar', 'shbar'] %}
+              {% set show_range = '' %}
+            {% else %}
+              {% set show_range = 'hidden' %}
+            {% endif %}
+
+            <div class="control-group show_axis_range_{{ n }} {{show_range}}">
+               <label class="control-label" for="chart_field_axis_range_{{ n }}">{{ _('Set axis range') }}</label>
+               <div class="controls ">
+                  <input id="chart_field_axis_range_{{ n }}" type="checkbox" name="chart_field_axis_range_{{ n }}" value="{{ axis_range }}" {% if axis_range=='true' %}checked{% endif %}>
+               </div>
+            </div>
+
+            {# Axis range min #}
+            <div class="control-group axis_range_min_{{n}} {{ show_range }}">
+               <label class="control-label" for="chart_field_axis_min_{{ n }}">{{ _('Axis range minimum') }}</label>
+               <div class="controls ">
+                  <input id="chart_field_axis_min_{{ n }}" type="text" name="chart_field_axis_min_{{ n }}" value="{{ axis_min }}" placeholder="{{ _('Axis minimum') }}">
+               </div>
+            </div>
+
+            {# Axis range max #}
+            <div class="control-group axis_range_max_{{n}} {{ show_range }}">
+               <label class="control-label" for="chart_field_axis_max_{{ n }}">{{ _('Axis range maximum') }}</label>
+               <div class="controls ">
+                  <input id="chart_field_axis_max_{{ n }}" type="text" name="chart_field_axis_max_{{ n }}" value="{{ axis_max }}" placeholder="{{ _('Axis maximum') }}">
+               </div>
+            </div>
+            {# {% endif %} #}
 
           </div>
         </div>
@@ -917,6 +954,8 @@
           {% set upper_bounds = chart.upper_bounds %}
           {% set lower_bounds = chart.lower_bounds %}
           {% set show_bounds = chart.show_bounds %}
+          {% set axis_min = chart.axis_min %}
+          {% set axis_max = chart.axis_max %}
       {% endif %}
       {% snippet 'ajax_snippets/visualization_item.html',
           type='chart',
@@ -967,7 +1006,10 @@
           donut_hole = donut_hole,
           upper_bounds = upper_bounds,
           lower_bounds = lower_bounds,
-          show_bounds = show_bounds
+          show_bounds = show_bounds,
+          axis_range = axis_range,
+          axis_min = axis_min,
+          axis_max = axis_max
       %}
    </div>
 </div>

ckanext/querytool/fanstatic/javascript/vitals.js

@@ -50,5 +50,8 @@
      data-module-upper_bounds="{{ upper_bounds }}"
      data-module-lower_bounds="{{ lower_bounds }}"
      data-module-show_bounds="{{ show_bounds }}"
+     data-module-axis_range="{{ axis_range or 'false' }}"
+     data-module-axis_min="{{ axis_min }}"
+     data-module-axis_max="{{ axis_max }}"
      >
 </div>

ckanext/querytool/templates/ajax_snippets/chart_item.html

@@ -275,7 +275,10 @@ <h3 id="item-title-{{chart_id}}">{{ item.map_custom_title_field }}</h3>
             description = item.additional_description,
             upper_bounds = item.upper_bounds,
             lower_bounds = item.lower_bounds,
-            show_bounds = item.show_bounds
+            show_bounds = item.show_bounds,
+            axis_range = item.axis_range,
+            axis_min = item.axis_min,
+            axis_max = item.axis_max
           %}
         {% endif %}
         {% if item.type == 'text_box' %}