survey/app/views/surveys/my_record.html.erb

<%
  data = action_data 
  @survey = data["survey"]
  @user = data["user"]
  @survey_answers = data["survey_answers"]
  @table_fields = data["table_fields"]
  @is_answer_list = data["is_answer_list"]
%>
<% if @user.nil? %>
  <h3><a id="display_login_button" href="#" title="<%=t("survey.please_login_first")%>"><%=t("survey.please_login_first")%></a></h3>
  <script>
    $("#display_login_button").click(function(){
      $('#loginbutton').click();
    })
  </script>
<% else %>
<style type="text/css">
  #survey_answer_search label{
    float: left;
    margin-right: 0.5em;
    line-height: 2;
  }
  #survey_answer_search input{
    float: left;
    line-height: 2;
  }
</style>
<h3><%= @survey.title %></h3>
<div>
  <h4><%=t('survey.taken_by')%>: <%=@user.member_name%></h4>
</div>
<% if @is_answer_list %>
<% type = 'result_chart' if params[:type] == 'result_chart' %>
<div class="pull-right">
  <a href="?method=my_record&type=" class="btn <%= 'active' if type != 'result_chart' %>"><%=t("survey.table")%></a>
  <a href="?method=my_record&type=result_chart" class="btn <%= 'active' if type == 'result_chart' %>"><%=t("survey.result_chart")%></a>
</div>
<% end %>
<% if type == "result_chart" %>
<% @survey_answers.options = {} %>
<div style="clear: both;"></div>
<style type="text/css">
  .tooltip{
    position: absolute;
    background: #ffffff;
    z-index: 1;
    border-radius: 10px;
    padding: 2px;
    display: none;
    font-weight: bold;
    font-size: 1em;
    opacity: 1;
  }
  .flot_wrapper{
    position: relative;
  }
</style>
<%= javascript_include_tag "survey/jquery.colorhelpers.js" %>
<%= javascript_include_tag "survey/jquery.canvaswrapper.js" %>
<%= javascript_include_tag "survey/jquery.flot_3.0.js" %>
<%= javascript_include_tag "survey/jquery.flot.time.min.js" %>
<%= javascript_include_tag "survey/jquery.flot.uiConstants.js" %>
<%= javascript_include_tag "survey/jquery.flot.saturated.js" %>
<%= javascript_include_tag "survey/jquery.flot.browser.js" %>
<%= javascript_include_tag "survey/jquery.flot.drawSeries.js" %>
<%= javascript_include_tag "survey/jquery.flot.axislabels.js" %>
<%= javascript_include_tag "survey/jquery.flot.hover.js" %>
<%= javascript_include_tag "survey/jquery.flot.animator.min.js" %>
<!-- <%= javascript_include_tag "survey/jquery.flot.legend.js" %> -->
<%= javascript_include_tag "survey/moment.min.js" %>
<style type="text/css">
  .axisLabels {
    font-weight: bold;
  }
</style>
<% @survey_answers = @survey_answers.order_by(:created_at=>1) %>
<% last_year = @survey_answers.last.created_at.year %>
<% first_year = @survey_answers.first.created_at.year %>
<% all_years = (first_year..last_year).to_a.reverse %>
<% all_years.each do |year|%>
  <% start_d = DateTime.parse("#{year}/1/1 #{Time.zone}") %>
  <% end_d = start_d.end_of_year %>
  <% survey_answers_sep = @survey_answers.where(:created_at.gte=>start_d).and(:created_at.lte=>end_d) %>
  <% next if survey_answers_sep.count == 0 %>
  <div class="flot_wrapper" id="<%=year%>_block">
    <h4 style="text-align: center;"><%= year %></h4>
    <span class="tooltip"></span>
    <div class="legend-container"></div>
    <div class="flot-placeholder"></div>
  </div>
  <script>
    (function(){
    <% if @survey.need_assign_color %>
      <% data = survey_answers_sep.group_by(&:color).map{|k,sas| [k, sas.map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} ] }.to_h %>
      var min_time = <%= data.map{|k,d| d[0][0] rescue 0}.min %>;
      var max_time = <%= data.map{|k,d| d[-1][0] rescue 0}.max %>;
      <% all_data = data.values.flatten(1) %>
      <% y_data = all_data.map{|v| v[1]} %>
      var min_y = <%= y_data.min.to_i %>;
      var max_y = <%= y_data.max.to_i %>;
    <% else %>
      <% data = survey_answers_sep.order_by(:created_at=>1).map{|sa| [sa.created_at.to_i * 1000 , sa.scored_points ]} %>
      var min_time = <%= data[0][0] rescue 0 %>;
      var max_time = <%= data[-1][0] rescue 0 %>;
      var min_y = <%= data.map{|a| a[1]}.min.to_i %>;
      var max_y = <%= data.map{|a| a[1]}.max.to_i %>;
    <% end %>
    var xaxes = [{
      mode: "time",
      axisLabelUseCanvas: false,
      timeformat: "%Y/%m/%d",
      timezone: "browser",
      font: {
        size: '16',
        color: 'black'
      },
      // min: min_time,
      // max: max_time,
      axisLabel: "<%=t("survey.taken_date")%>",
      position: "bottom",
    }];
    var yaxes = [{
      use_min_force: false, //modify at jquery_flot_3.0.js
      axisLabelUseCanvas: false,
      showTickLabels: 'all',
      font: {
        size: '16',
        color: 'black'
      },
      // min: min_y,
      // max: max_y,
      axisLabel: "<%=t("survey.result_score")%>",
      position: "left",
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
      axisLabelPadding: 5
    }];
    var options = {
      series: {
        lines: { 
          show: true,
          lineWidth: 2,
          steps: false , //畫斜線
          is_sort: true
        },
        points: {
          radius: 5,
          show: true,
          fillColor: '#ffffff'
        },
        downsample: {
          threshold: 0
        }
      },
      grid: {
        hoverable: true,
        clickable: true,
        show: true
      },
      xaxes: xaxes,
      yaxes: yaxes,
      zoom: {
        interactive: true
      },
      pan: {
        interactive: true,
        enableTouch: true
      },
      colors: ["#708fff"], //["#708fff","#ffc107","#96478c","#1e7e34"],
      polycolors: ["#3f66f4"],//["#3f66f4","#ffc107","#dc3545","#1e7e34"],
      // legend: {
      //   show: true,
      //   noColumns: 1
      // },
      bar: {
        zero: false
      }
    };
    <% all_colors = @survey.result_criteria.map{|c| c["color"]}.select{|c| c.present?}.uniq %>
    var points_fillColor = "#ffffff";
    var need_split_data = false;
    <% if all_colors.count == 1 %>
    points_fillColor = "<%=all_colors[0]%>";
    <% end %>
    // options['legend']['container'] = $('.legend-container')[0];
    <% if @survey.need_assign_color %>
    options["series"]["lines"]["show"] = false;
    <% label_name = @user.member_name rescue "NA" %>
    var chart_data = <%= ([{"label"=> label_name, "data"=> all_data,
          "color"=> "#708fff",
          "lines"=> { 
          "show"=> true,
          "lineWidth"=> 2,
          "steps"=> false ,
          "is_sort"=> true
      }}] + data.map{|color,d| tmp_color=(color.blank? ? "#ffffff" : color);{"label"=>label_name, "data"=>d, "color"=> (tmp_color == "#ffffff" ? "#708fff" : tmp_color), "points"=>{
      "show"=> true,
      "fillColor"=> tmp_color
    }}}).to_json.html_safe %>;
    <% else %>
    var chart_data = [{"label": "<%=@user.member_name rescue "NA" %>", "data": <%= data.to_json.html_safe %>,"points": {
        show: true,
        fillColor: points_fillColor
      }}];
    <% end %>
    $(document).ready(function(){
      var chart_height = $(window).outerWidth(true)*0.2;
      $("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
    })
    $(window).resize(function(){
      var chart_height = $(window).outerWidth(true)*0.2;
      $("#<%=year%>_block .flot-placeholder").height(chart_height).plot(chart_data,options);
    })
    })();
  </script>
<% end %>
<script>
  $(document).ready(function(){
    $(".flot-placeholder").bind("plothover", function (event, pos, item) {
      if (!pos.x || !pos.y) {
        return;
      }
      if (!item) {
        $(this).siblings(".tooltip").hide();
      }
    });
    $(".flot-placeholder").bind("plotclick", function (event, pos, item) {
      if (!pos.x || !pos.y || item == null) {
        return;
      }
      var tooltip = $(this).siblings(".tooltip");
      console.log(tooltip)
      var x = item.datapoint[0].toFixed(2),
          y = item.datapoint[1].toFixed(0);
      var date = new moment(Math.round(x));
      var tp =  "(" + date.format("yyyy/MM/DD HH:mm") + ")"
      tooltip.html("<%=t("survey.type.0")%>: "+y+"<br>"+tp);
      var left = 0;
      var content_width = tp.length*8.2
      if (content_width+item.pageX+5>$(window).width()){
        left = $(window).width()-content_width;
      }else{
        left = item.pageX - content_width / 2;
      }
      var offset = $(this).parents(".flot_wrapper").eq(0).offset();
      tooltip.css({top: item.pageY+5-offset.top, left: left-offset.left})
                    .fadeIn(200);
    });
  })
</script>
<% else %>
<table class="table main-list">
  <thead>
    <tr class="sort-header">
      <% @table_fields.each do |f| %>
      	<%= thead(f) %>
      <% end %>
    </tr>
  </thead>
  <tbody>
  <% @is_answer_list = true if !@answer_repeat%>
  <% answers_nil = @survey_answers.nil? %>
  <% (@survey_answer_groups || @survey_answers).each do |sa| %>
  	<tr>
  	<% user = sa.user.nil? ? nil : (User.find(sa.user) rescue nil) %>
  	<% if !user.nil? %>
		<td><%= user.member_name rescue user.name %></td>
  	<% else %>
  		<td>NA</td>
  	<% end %>
  	<td><%= (@is_answer_list ? sa.created_at : sa.last_modified).strftime((I18n.locale == :zh_tw ? "%Y/%m/%d %H:%M" : "%h %d, %Y  -  %H:%M")) rescue nil %></td>
  	<td>
      <% if @answer_repeat && !@is_answer_list %>
        <a class="btn btn-primary" href="/admin/surveys/<%= sa.id.to_s %>/answer_list" title="<%= t("survey.view") %>"><%= t("survey.view") %>(<%=sa.survey_answer_ids.count%>)</a>
        <button class="btn btn-primary export-xls" data-href="/admin/surveys/<%= sa.id.to_s %>/export_answers" title="<%= t("survey.export") %>"><%= t("survey.export") %></button>
      <% else %>
        <% sa = sa.survey_answers.last if answers_nil %>
        <% if @survey.result_type == QuestionnaireSurvey::ResultCriteria %>
          <% tmp_msgs = []
            answer_model_attrs = sa.attributes
            weight_relations = @survey.survey_questions.map{|q| [q.id.to_s,(q.weight.nil? ? 1 : q.weight)]}.to_h
            types = [] %>
          <% @survey.result_criteria.each do |criteria| %>
            <%
              total_criteria_score = 0
              total_weight = 0
              ((criteria["questions"][0].to_i - 1)..(criteria["questions"][1].to_i - 1)).each do |x|
                total_criteria_score = (total_criteria_score + sa.individual_total[x].to_i) rescue 0
                k = weight_relations.keys[x]
                if k && answer_model_attrs.has_key?(k)
                  total_weight += weight_relations[k]
                end
              end
              type = criteria["type"].to_i
            %>
            <% if type == 0 %>
              <% if (criteria["range"][0].to_i..criteria["range"][1].to_i).cover?(total_criteria_score) %>
                <% tmp_msgs << criteria["msg"] %>
                <% types << type %>
              <% end %>
            <% else %>
              <% if ((criteria["range"][0].to_i..criteria["range"][1].to_i).cover?(total_criteria_score / total_weight) rescue false) %>
                <% tmp_msgs << criteria["msg"] %>
                <% types << type %>
              <% end %>
            <% end %>
          <% end %>
          <% if types.include?(0) %>
            <h4>Your total score is <%= sa.scored_points %> </h4>
          <% end %>
          <% if types.include?(1) %>
            <h4>Your average score is <%= sa.get_avg_points  %> </h4>
          <% end %>
          <% tmp_msgs.each do |msg| %>
            <div><%=msg.html_safe%></div>
          <% end %>
        <% else %>
        <a class="btn btn-primary" href="/admin/surveys/<%= @is_answer_list ? sa.id : sa.survey_answer_ids.last.to_s %>/answer_set" title="<%= t("survey.view_answers") %>"><%= t("survey.view_answers") %></a>
        <% end %>
      <% end %>
    </td>
  	</tr>
  <% end %>
  </tbody>
  </table>
  <%= create_pagination((@survey_answer_groups || @survey_answers).total_pages).html_safe %>
<% end %>
<% end %>