dash_creator 0.1.2

data/app/views/dash_creator/chart/_modals.html.erb

@@ -0,0 +1,74 @@
+<div class="modal fade" id="save_chart_modal" tabindex="-1" role="dialog" aria-labelledby="Save Chart Modal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"><%=t :save_chart%></h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="form-group">
+              <label><%=t :name%></label>
+              <input type="text" name="chart-name" class="form-control">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="pull-right btn btn-success" id="save-chart-btn" data-dismiss="modal">Submit</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+<div class="modal fade" id="delete_charts_modal" tabindex="-1" role="dialog" aria-labelledby="Delete Charts Modal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"><%=t :delete_charts%></h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="row" id="charts-checkbox-list">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="pull-right btn btn-success" id="delete-charts-btn" data-dismiss="modal">Submit</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+<div class="modal fade" id="edit_chart_modal" tabindex="-1" role="dialog" aria-labelledby="Edit Chart Modal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"><%=t :edit_chart%></h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <h3 id="edit-message"></h3>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="pull-left btn btn-success" id="confirm-edit-chart-btn" data-dismiss="modal">Confirm</button>
+        <button type="submit" class="pull-right btn btn-danger" id="cancel-edit-chart-btn" data-dismiss="modal">Cancel</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->

data/app/views/dash_creator/chart/_plot_chart.html.erb

@@ -0,0 +1,45 @@
+<button class="pull-right btn" id="chart-refresh-btn">Refresh</button>
+<span class="pull-right" id="last-updated"></span>
+<canvas id="chart-<%= id %>" style="display: block; align-items: stretch;"></canvas>
+
+<script>
+    var options = <%= raw options.to_json %>;
+
+    <% if type == 'mixed' %>
+    var labeling_step = options.scales.xAxes[0].ticks["callback"];
+    if (typeof labeling_step === "undefined")
+        labeling_step = 1;
+    options.scales.xAxes[0].ticks["callback"] = function(dataLabel, index) {
+        return index % labeling_step === 0 ? dataLabel : null;
+    };
+
+    <% else %>
+    options.tooltips["callbacks"] = {
+        label: function(tooltipItem, data) {
+            var dataset = data.datasets[tooltipItem.datasetIndex];
+
+            var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
+                return previousValue + currentValue;
+            });
+
+            var currentValue = dataset.data[tooltipItem.index];
+
+            var percentage = Math.floor(((currentValue/total) * 100) + 0.5);
+
+            var label = " " + currentValue + " - " + percentage  + "%";
+
+            return label;
+        }
+    };
+
+    <% end %>
+
+    var canvas = document.getElementById("chart-<%= id %>");
+    canvas.width = "80%"; canvas.height = "80%";
+    var ctx = canvas.getContext("2d");
+    chart_<%= id.to_s.underscore %> = new Chart(ctx, {
+        type: "<%= type == 'mixed' ? 'bar' : type %>",
+        data: <%= raw data.to_json %>,
+        options: options
+    });
+</script>

data/app/views/dash_creator/chart/create_chart.js.erb

@@ -0,0 +1,53 @@
+var in_creator = $('#chart-creator').length !== 0;
+
+// Rebuild all chart creator fields if in creator
+if (in_creator) {
+    var chart_creator = $('#chart-creator').data('chartCreator');
+    <% unless filters_data.nil? %>
+    chart_creator.filter_creator.data('filterCreator').buildFilters(<%= raw filters_data.to_json %>);
+    <% end %>
+    chart_creator.buildChartFields(<%= raw chart_data.to_json %>);
+}
+
+<% # Get main chart type %>
+<% main_type = chart_data['types'][0] %>
+<% main_type = 'mixed' if main_type == 'bar' || main_type == 'line' %>
+
+<% options = chart_data['options'] == '' ? {} : chart_data['options'] %>
+
+<% # Get data from redis if exists or query it %>
+<% processed_data = chart_processed_data_from_redis(chart_data) %>
+
+// Build chart script & append it to chart wrapper div
+<% function_name = "plot_#{main_type}_chart" %>
+var chart_script_string = '<%= raw public_send(function_name, id, processed_data, options).gsub("\n", '') %>';
+
+var chart_wrapper_div = in_creator ? $('.chart-wrapper') : $('.chart-wrapper[data-id="<%= id %>"]');
+
+chart_wrapper_div.children().remove();
+$(chart_script_string).appendTo(chart_wrapper_div);
+
+// Refresh option
+chart_wrapper_div
+    .off('click')                                           // Remove previous bound refresh event
+    .on('click', '#chart-refresh-btn', refreshChart);       // Bind refresh event
+
+function refreshChart() {
+    if (in_creator) {
+        var chart_data = chart_creator.getChartData();
+        chart_data['refresh'] = true;
+        sendChartDataCreate(chart_data);
+    }
+    else {
+        var params = {
+            chart_id: '<%= id %>',
+            refresh: 'true'
+        };
+        $.post("<%= get_chart_path %>", params);
+    }
+}
+
+chart_wrapper_div.find('span#last-updated').text('Last updated: ' + "<%= processed_data['last_updated'] %>");
+
+
+<% # DashCreator.redis_store_variable.keys.each {|k| $redis.del(k)}   # To delete what is stored in redis %>

data/app/views/dash_creator/dashboard/_dashboard_creator.html.erb

@@ -0,0 +1,182 @@
+<div class="row">
+  <div class="col-md-12">
+    <div class="card">
+      <div class="card-header">
+        Crazy Dashboard Creator
+      </div>
+      <div class="card-block" id="dashboard-creator" style="margin:20px 50px;">
+
+      </div>
+      <div class="card-footer">
+        <a href="#" data-toggle="modal" data-target="#delete_dashboards_modal" class="pull-right btn btn-sm btn-danger" id="dashboard-unsave-btn"><%=t :delete_dashboards%></a>
+        <a href="#" data-toggle="modal" data-target="#edit_dashboard_modal" class="pull-right btn btn-sm btn-primary" id="dashboard-edit-btn"><%=t :modify_dashboard%></a>
+        <a href="#" data-toggle="modal" data-target="#save_dashboard_modal" class="pull-right btn btn-sm btn-success"><%=t :save_new_dashboard%></a>
+        <%= select_tag 'dashboard-select', options_for_select([]), prompt: 'Choose a dashboard', id: '', class: 'form-control pull-right', style: 'width: 20%; margin-right: 10%;' %>
+      </div>
+    </div>
+    <!--/.card-->
+  </div>
+
+  <!--<div class="col-md-12">-->
+    <!--<div class="card" id="crazy-dashboard-creator-objects">-->
+      <!--<div class="card-header">-->
+        <!--Dashboard Objects-->
+      <!--</div>-->
+      <!--<div class="card-block" style="margin:20px 50px;">-->
+        <!--<div class="row">-->
+          <!--<div class="col-md-12 px-2">-->
+            <!--<table>-->
+              <!--<thead>-->
+              <!--<tr>-->
+                <!--<th><%=t :name%></th>-->
+                <!--<th><%=t :code%></th>-->
+                <!--<th><%=t :information%></th>-->
+                <!--<th><%=t :options%></th>-->
+                <!--<th><%=t :edit%></th>-->
+                <!--<th><%=t :delete%></th>-->
+              <!--</thead>-->
+              <!--<tbody>-->
+              <!---->
+              <!--</tbody>-->
+            <!--</table>-->
+          <!--</div>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;/.card&ndash;&gt;-->
+  <!--</div>-->
+</div>
+
+<script>
+    var dashboards = <%= raw @dashboards %>;
+
+    <% objects_data = {} %>
+    <% @dashboard_objects.each do |o| %>
+        <% objects_data[o.code] = {name: o.name, related_model: o.related_model, objects: @model_objects[o.code] } %>
+    <% end %>
+
+    $('#dashboard-creator').dashboardCreator({
+        objects_data: <%= raw objects_data.to_json %>
+    });
+    var dashboard_creator = $('#dashboard-creator').data('dashboardCreator');
+
+
+    // --------------- Dashboard model handling ---------------
+
+    var dashboard_id = '';
+
+    // Save dashboard
+    $(document).on('click', '#save-dashboard-btn', function() {
+        var params = {options: dashboard_creator.getDashboardData()};
+
+        // Get the dashboard name
+        params['dashboard_name'] = $('.modal#save_dashboard_modal').find('[name="dashboard-name"]').val();
+
+        $.post("<%= save_dashboard_path %>", params, function(data) {
+            // Add to dashboards list
+            dashboard_id = data['dashboard_id'];
+            dashboards.push([params['dashboard_name'], dashboard_id]);
+        });
+    });
+
+    // Prepare modal display for edit
+    $('#dashboard-edit-btn').click(function() {
+        var confirm_edit_dashboard_btn = $('#confirm-edit-dashboard-btn');
+
+        var message_div = $('.modal#edit_dashboard_modal .modal-body #edit-message');
+        message_div.empty();
+        confirm_edit_dashboard_btn.prop('disabled', false);
+
+        var message;
+        if (dashboard_id !== '') {
+            message = 'Are you sure you want to edit dashboard ';
+            for (var i = 0; i < dashboards.length; i++) {
+                var dashboard_name = dashboards[i][0], id = dashboards[i][1];
+                if (dashboard_id === id) {
+                    message += dashboard_name;
+                    break;
+                }
+            }
+            message += ' ?'
+        }
+        else {
+            message = 'No dashboard to edit.';
+            confirm_edit_dashboard_btn.prop('disabled', true);
+        }
+        message_div.text(message);
+    });
+
+    // Prepare and send new dashboard data on dashboard edit confirm
+    $(document).on('click', '#confirm-edit-dashboard-btn', function() {
+        var params = {options: dashboard_creator.getDashboardData()};
+        params['dashboard_id'] = dashboard_id;
+
+        $.post("<%= edit_dashboard_path %>", params);
+    });
+
+    // Prepare list of dashboards for delete dashboards modal
+    $('#dashboard-unsave-btn').click(function() {
+        var dashboards_checkbox_list = $('#dashboards-checkbox-list');
+        // First empty the checkbox list
+        dashboards_checkbox_list.children().remove();
+
+        // Append dashboards list to div in modal
+        var checkbox_string_start = '<div class="col-sm-12"><div class="form-group">'
+            + '<input type="checkbox" class="form-control" name="dashboard" value="';
+        for (var i = 0; i < dashboards.length; i++) {
+            var dashboard_name = dashboards[i][0], id = dashboards[i][1];
+            var dashboard_string = checkbox_string_start + id + '"><label>' + dashboard_name + '</label><br>';
+            $(dashboard_string).appendTo(dashboards_checkbox_list);
+        }
+        $('</div></div>').appendTo(dashboards_checkbox_list);
+    });
+
+    // Delete dashboards configs
+    $(document).on('click', '#delete-dashboards-btn', function() {
+        // Get the dashboards ids
+        var dashboards_ids = [];
+        $(this).closest('.modal').find('[name="dashboard"]:checked').each(function() {
+            dashboards_ids.push($(this).attr("value"));
+        });
+
+        var params = {dashboards_ids: dashboards_ids};
+
+        $.post("<%= delete_dashboards_path %>", params, function() {
+            // Remove from dashboards list
+            for (var i = 0; i < dashboards.length; i++) {
+                var id = dashboards[i][1];
+                if ($.inArray(id, dashboards_ids) !== -1) {
+                    dashboards.splice(i, 1);
+                    i--;
+                }
+            }
+        });
+    });
+
+
+    $('[name="dashboard-select"]')
+        .focusin(displaySavedDashboards)
+        .change(displayDashboard);
+
+    // Display saved configs
+    function displaySavedDashboards() {
+        $(this).children('option').not('[value=""]').remove();
+        for (var i = 0; i < dashboards.length; i++) {
+            var dashboard_name = dashboards[i][0], id = dashboards[i][1];
+            $('<option value="' + id + '">' + dashboard_name + '</option>').appendTo($('[name="dashboard-select"]'));
+        }
+    }
+
+    // Display chosen config (rebuild)
+    function displayDashboard() {
+        if ($(this).val() === '') { return false; }
+
+        dashboard_id = $(this).val();
+        var params = {dashboard_id: dashboard_id};
+
+        $.post("<%= get_dashboard_path %>", params, function(data) {
+            dashboard_creator.buildDashboard(data);
+        });
+    }
+</script>

data/app/views/dash_creator/dashboard/_modals.html.erb

@@ -0,0 +1,74 @@
+<div class="modal fade" id="save_dashboard_modal" tabindex="-1" role="dialog" aria-labelledby="Save Dashboard Modal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"><%=t :save_dashboard%></h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="form-group">
+              <label><%=t :name%></label>
+              <input type="text" name="dashboard-name" class="form-control">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="pull-right btn btn-success" id="save-dashboard-btn" data-dismiss="modal">Submit</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+<div class="modal fade" id="delete_dashboards_modal" tabindex="-1" role="dialog" aria-labelledby="Delete Dashboards Modal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"><%=t :delete_dashboards%></h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="row" id="dashboards-checkbox-list">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="pull-right btn btn-success" id="delete-dashboards-btn" data-dismiss="modal">Submit</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->
+
+<div class="modal fade" id="edit_dashboard_modal" tabindex="-1" role="dialog" aria-labelledby="Edit Dashboard Modal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"><%=t :edit_dashboard%></h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <h3 id="edit-message"></h3>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="pull-left btn btn-success" id="confirm-edit-dashboard-btn" data-dismiss="modal">Confirm</button>
+        <button type="submit" class="pull-right btn btn-danger" id="cancel-edit-dashboard-btn" data-dismiss="modal">Cancel</button>
+      </div>
+    </div>
+    <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
+<!-- /.modal -->

data/app/views/dash_creator/dashboard_object/_chart.html.erb

@@ -0,0 +1,9 @@
+<div class="col-md-<%= chart['size'] %> offset-md-<%= chart['offset'] %>" style="margin-bottom: 50px;">
+  <div class="chart-wrapper" data-id="<%= chart['id'] %>" style="height: 400px;">
+    <iframe class="chartjs-hidden-iframe" tabindex="-1" style="display: flex; overflow: hidden; border: 0; margin: 0; top: 0; left: 0; bottom: 0; right: 0; height: 100%; width: 100%; position: absolute; pointer-events: none; z-index: -1;"></iframe>
+  </div>
+  <script>
+      var params = {chart_id: '<%= chart['id'] %>'};
+      $.post("<%= get_chart_path %>", params);
+  </script>
+</div>

data/app/views/dash_creator/dashboard_object/_stat.html.erb

@@ -0,0 +1,24 @@
+<% filter = DashCreator::Filter.find(stat['id']) %>
+
+<div class="col-md-<%= stat['size'] %> offset-md-<%= stat['offset'] %>" style="margin-bottom: 50px;">
+  <div class="stat-wrapper text-center" data-id="<%= stat['id'] %>" style="padding: 20px; background-color: #a6d5ec; border-radius: 5px;">
+
+    <h3><%= filter.name %></h3><br>
+
+    <% filter.options.keys.each do |k| %>
+        <strong class="filter-count" data-key="<%= k %>"></strong><br>
+    <% end %>
+
+    <div class="refresh-container" style="margin-top: 30px;">
+      <span id="last-updated"></span>
+      <button id="stat-refresh-btn">Refresh</button>
+    </div>
+
+    <script>
+      var params = {
+          filter_id: '<%= stat['id'] %>'
+      };
+      $.post('<%= create_stat_path %>', params);
+    </script>
+  </div>
+</div>