decidim-comparative_stats 1.0.1

data/README.md

@@ -0,0 +1,187 @@
+# Decidim::ComparativeStats
+
+![Test](https://github.com/Platoniq/decidim-module-comparative_stats/workflows/Test/badge.svg)
+[![Maintainability](https://api.codeclimate.com/v1/badges/59d3415b89244ef0d40b/maintainability)](https://codeclimate.com/github/Platoniq/decidim-module-comparative_stats/maintainability)
+[![Codecov](https://codecov.io/gh/Platoniq/decidim-module-comparative_stats/branch/master/graph/badge.svg?token=XhzWO0IiWt)](https://codecov.io/gh/Platoniq/decidim-module-comparative_stats)
+
+Allows to compare different Decidim sites by accessing their GraphQL API and
+generate graphs.
+
+> NOTE: This module is in beta status, feel free to report issues or contribute in it!
+
+## Usage
+
+This module works by connecting to several Decidim API's.
+Just go to your `your-decidim-installation.org/admin/comparative_stats` and
+add endpoints to compare.
+For instance, Decidim Barcelona endpoint is `https://www.decidim.barcelona/api`
+
+Then, go to graphs and see some nice graphs!
+
+Graphs can be embedded anywhere independently, just use the button
+`embed <>` and copy the code to any other place.
+
+The generated code will look something like:
+
+```html
+<iframe
+  src="http://your_url/comparative_stats/widgets/global_stats.html"
+  frameborder="0"
+  width="100%"
+  height="420"
+  scrolling="vertical"></iframe>
+```
+
+You might want to customize the `height` parameter to match your particular case.
+
+![Barcelona/Helsinki comparison](example.png)
+*A real example comparing the participatory processes carried out by the cities of Barcelona and Helsinki in 2019*
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-comparative_stats", "~> 1.0.1"
+```
+
+And then execute:
+
+```bash
+bundle
+bundle exec rails decidim_comparative_stats:install:migrations
+bundle exec rails db:migrate
+```
+
+Depending on your Decidim version, choose the corresponding Awesome version to ensure
+compatibility:
+
+| Comparative stats version | Compatible Decidim versions |
+|---|---|
+| 1.0.x | 0.21.x - 0.23.x |
+
+## Configuration options
+
+API queries are cached 1 hour by default.
+This can be tuned by creating an initializer in your Decidim installation.
+For instance, create the file `config/initializers/comparative_stats.rb`
+with this content:
+
+```ruby
+# frozen_string_literal: true
+
+Decidim::ComparativeStats.configure do |config|
+  config.stats_cache_expiration_time = 2.hour
+end
+```
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+### Developing
+
+To start contributing to this project, first:
+
+- Install the basic dependencies (such as Ruby and PostgreSQL)
+- Clone this repository
+
+Decidim's main repository also provides a Docker configuration file if you
+prefer to use Docker instead of installing the dependencies locally on your
+machine.
+
+You can create the development app by running the following commands after
+cloning this project:
+
+```bash
+bundle
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake development_app
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+Then to test how the module works in Decidim, start the development server:
+
+```bash
+cd development_app
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rails s
+```
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add the environment variables to the root directory of the project in a file
+named `.rbenv-vars`. If these are defined for the environment, you can omit
+defining these in the commands shown above.
+
+#### Code Styling
+
+Please follow the code styling defined by the different linters that ensure we
+are all talking with the same language collaborating on the same project. This
+project is set to follow the same rules that Decidim itself follows.
+
+[Rubocop](https://rubocop.readthedocs.io/) linter is used for the Ruby language.
+
+You can run the code styling checks by running the following commands from the
+console:
+
+```
+bundle exec rubocop
+```
+
+To ease up following the style guide, you should install the plugin to your
+favorite editor, such as:
+
+- Atom - [linter-rubocop](https://atom.io/packages/linter-rubocop)
+- Sublime Text - [Sublime RuboCop](https://github.com/pderichs/sublime_rubocop)
+- Visual Studio Code - [Rubocop for Visual Studio Code](https://github.com/misogi/vscode-ruby-rubocop)
+
+### Testing
+
+To run the tests run the following in the gem development path:
+
+```bash
+bundle
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake test_app
+DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rspec
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add these environment variables to the root directory of the project in a
+file named `.rbenv-vars`. In this case, you can omit defining these in the
+commands shown above.
+
+### Test code coverage
+
+If you want to generate the code coverage report for the tests, you can use
+the `SIMPLECOV=1` environment variable in the rspec command as follows:
+
+```bash
+SIMPLECOV=1 bundle exec rspec
+```
+
+This will generate a folder named `coverage` in the project root which contains
+the code coverage report.
+
+### Localization
+
+If you would like to see this module in your own language, you can help with its
+translation at Crowdin:
+
+<https://crowdin.com/translate/decidim-comparative-stats>
+
+## License
+
+This engine is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE.
+
+## Credits
+
+This plugin has been developed by ![Platoniq](app/assets/images/platoniq-logo.png)
+
+> Amb el suport de l'Ajuntament de Barcelona - Direcció de Serveis d'Innovació Democràtica
+>
+> ![Logo Barcelona](app/assets/images/bcn-logo.png)

data/Rakefile

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+def install_module(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim_comparative_stats:install:migrations")
+    system("bundle exec rake db:migrate")
+  end
+end
+
+def seed_db(path)
+  Dir.chdir(path) do
+    system("bundle exec rake db:seed")
+  end
+end
+
+desc "Generates a dummy app for testing"
+task test_app: "decidim:generate_external_test_app" do
+  ENV["RAILS_ENV"] = "test"
+  install_module("spec/decidim_dummy_app")
+end
+
+desc "Generates a development app"
+task :development_app do
+  Bundler.with_original_env do
+    generate_decidim_app(
+      "development_app",
+      "--app_name",
+      "#{base_app_name}_development_app",
+      "--path",
+      "..",
+      "--recreate_db",
+      "--demo"
+    )
+  end
+
+  install_module("development_app")
+  seed_db("development_app")
+end

data/app/assets/config/admin/comparative_stats_manifest.css

@@ -0,0 +1,4 @@
+/*
+ *= link decidim/comparative_stats/graphs.css
+ *= link decidim/comparative_stats/geocoded_events.css
+ */

data/app/assets/config/admin/comparative_stats_manifest.js

@@ -0,0 +1,2 @@
+//= link decidim/comparative_stats/graphs.js
+//= link decidim/comparative_stats/geocoded_events.js

data/app/assets/config/comparative_stats_manifest.css

@@ -0,0 +1,4 @@
+/*
+ *= link decidim/comparative_stats/widget.css
+ *= link decidim/comparative_stats/geocoded_events.css
+ */

data/app/assets/config/comparative_stats_manifest.js

@@ -0,0 +1,2 @@
+//= link decidim/comparative_stats/graphs.js
+//= link decidim/comparative_stats/geocoded_events.js

data/app/assets/images/decidim/comparative_stats/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><path d="M17.5 35A17.5 17.5 0 1 1 35 17.5 17.52 17.52 0 0 1 17.5 35zm0-33.06A15.56 15.56 0 1 0 33.06 17.5 15.57 15.57 0 0 0 17.5 1.94zm9.5 13.7H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zm0 3.68H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zM22.26 23H8a1 1 0 0 1 0-1.94h14.26a1 1 0 0 1 0 1.94z"/></svg>

data/app/assets/javascripts/decidim/comparative_stats/geocoded_events.js.es6

@@ -0,0 +1,94 @@
+// = require leaflet
+// = require leaflet-svg-icon
+// = require leaflet.markercluster
+// = require jquery-tmpl
+// = require_self
+
+$(() => {
+
+  var map_object = document.getElementById('geocoded_events');
+  var map = L.map(map_object, {
+    center: [41,2],
+    zoom: 4
+  });
+
+  L.DivIcon.SVGIcon.DecidimIcon = L.DivIcon.SVGIcon.extend({
+    options: {
+      fillColor: "#ef604d",
+      opacity: 0
+    },
+    _createPathDescription: function() {
+      return "M14 1.17a11.685 11.685 0 0 0-11.685 11.685c0 11.25 10.23 20.61 10.665 21a1.5 1.5 0 0 0 2.025 0c0.435-.435 10.665-9.81 10.665-21A11.685 11.685 0 0 0 14 1.17Zm0 17.415A5.085 5.085 0 1 1 19.085 13.5 5.085 5.085 0 0 1 14 18.585Z";
+    },
+    _createCircle: function() {
+      return ""
+    }
+  });
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(map);
+
+  var endpoints = $('#geocoded_events').data('geocoded-events');
+  const popupProposalsTemplateId = "marker-popup-proposal";
+  $.template(popupProposalsTemplateId, $(`#${popupProposalsTemplateId}`).html());
+  const popupMeetingsTemplateId = "marker-popup-meeting";
+  $.template(popupMeetingsTemplateId, $(`#${popupMeetingsTemplateId}`).html());
+
+  const randomColor = () => '#'+Math.floor(Math.random()*16777215).toString(16);
+
+  const getMarker = (id, point, color) => {
+    let coordinates = [point.latitude, point.longitude];
+    let marker = L.marker(coordinates, {
+      icon: new L.DivIcon.SVGIcon.DecidimIcon({fillColor: color})
+    });
+
+    let node = document.createElement("div");
+
+    $.tmpl(id, point).appendTo(node);
+    marker.bindPopup(node, {
+      maxWidth: 640,
+      minWidth: 500,
+      keepInView: true,
+      className: "map-info"
+    }).openPopup();
+
+    return marker;
+  };
+
+  let layers = {};
+
+  for (let endpoint in endpoints) {
+
+    // In the future the color should come from the assigned to the endpoint
+    let color = randomColor();
+    let markerClusters = L.markerClusterGroup({
+      iconCreateFunction: function (cluster) {
+        var childCount = cluster.getChildCount();
+
+        return new L.DivIcon({ html: '<div style="background-color:' + color +'"><span>' + childCount + '</span></div>', className: 'marker-cluster', iconSize: new L.Point(40, 40) });
+
+      }
+    });
+
+    let meetings = endpoints[endpoint].meetings;
+    let proposals = endpoints[endpoint].proposals;
+
+    for(let key in meetings) {
+      markerClusters.addLayer(getMarker(popupMeetingsTemplateId, meetings[key], color));
+    }
+
+    for(let key in proposals) {
+      markerClusters.addLayer(getMarker(popupProposalsTemplateId, proposals[key], color));
+    }
+    markerClusters.addTo(map);
+    let key = '<span class="endpoint-legend"><span class="square" style="background-color:' + color +'"></span>' + endpoints[endpoint].name + '</span>';
+    layers[key] = markerClusters;
+  }
+
+  L.control.layers(null, layers).addTo(map);
+
+  $("[data-tabs]").on('change.zf.tabs', function() {
+    map.invalidateSize(true);
+  });
+});

data/app/assets/javascripts/decidim/comparative_stats/graphs.js.es6

@@ -0,0 +1,13 @@
+// = require chartkick
+// = require Chart.bundle
+// = require_self
+
+$(() => {
+    //create trigger to resizeEnd event
+    $(window).resize(() => {
+        if(window.resizeTO) clearTimeout(window.resizeTO);
+        window.resizeTO = setTimeout(() => {
+        $(window).trigger('resizeEnd');
+        }, 100);
+    });
+});

data/app/assets/stylesheets/decidim/comparative_stats/geocoded_events.scss

@@ -0,0 +1,23 @@
+@import "graphs";
+@import "decidim/modules/cards";
+@import "decidim/modules/address";
+@import "decidim/modules/buttons";
+@import "decidim/modules/map";
+@import "decidim/extras/leaflet";
+
+#geocoded_events{
+  min-height: 360px;
+  height: 100%;
+
+  .endpoint-legend{
+    font-size: .8rem;
+    line-height: .8;
+
+    .square{
+      display: inline-block;
+      width: .9em;
+      height: .9em;
+      margin-right: .3em;
+    }
+  }
+}

data/app/assets/stylesheets/decidim/comparative_stats/graphs.scss

@@ -0,0 +1,6 @@
+@import "decidim/variables";
+@import "decidim/utils/settings";
+@import "decidim/utils/mixins";
+@import "decidim/modules/typography";
+@import "decidim/modules/margins";
+@import "decidim/modules/buttons";

data/app/assets/stylesheets/decidim/comparative_stats/widget.scss

@@ -0,0 +1,8 @@
+html,
+body{
+  height: 100%;
+}
+
+.full-height{
+  height: calc(100% - 1.5rem);
+}

data/app/cells/decidim/comparative_stats/metric_piecharts/show.erb

@@ -0,0 +1,14 @@
+<div class="row small-up-1 smallmedium-up-2 mediumlarge-up-3 large-up-4 card-grid">
+  <% metrics.each do |name, metric| %>
+    <div class="column" style="padding: 1em">
+      <div class="card">
+        <div class="card-divider">
+          <%= title name %>
+        </div>
+        <div class="card-section">
+          <%= pie_chart metric, id: "pie_chart_#{name}" %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/cells/decidim/comparative_stats/metric_piecharts_cell.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require "chartkick"
+require "chartkick/helper"
+
+module Decidim
+  module ComparativeStats
+    class MetricPiechartsCell < Decidim::ViewModel
+      include Chartkick::Helper
+
+      def show
+        return unless model
+
+        render :show
+      end
+
+      def endpoints
+        model
+      end
+
+      def title(name)
+        return t "decidim.comparative_stats.metrics.users.title" if name == "users"
+
+        t "decidim.metrics.#{name}.title"
+      end
+
+      def metrics
+        metrics = {}
+        endpoints.each do |endpoint|
+          endpoint.api.fetch_global_metrics.data.metrics.each do |item|
+            metrics[item.name] ||= {}
+            metrics[item.name][endpoint.name] = item.count
+          end
+        end
+        metrics
+      end
+    end
+  end
+end