Vertical layout & cosmetic fixes

sweetviz/dataframe_report.py

@@ -159,7 +159,7 @@ def __init__(self,
  self.progress_bar.close()
  raise ValueError(f"\nTarget feature '{targets_found[0]}' contains NaN (missing) values.\n"
  f"To avoid confusion in interpreting target distribution,\n"
- f"target features MUST NOT have any MISSING VALUES at this time.\n")
+ f"target features MUST NOT have any missing values at this time.\n")
 
  # Find Target in compared, if present
  compare_target_series = None
@@ -170,7 +170,7 @@ def __init__(self,
  raise ValueError(
  f"\nTarget feature '{target_feature_name}' in COMPARED data contains NaN (missing) values.\n"
  f"To avoid confusion in interpreting target distribution,\n"
- f"target features MUST NOT have any MISSING VALUES at this time.\n")
+ f"target features MUST NOT have any missing values at this time.\n")
  compare_target_series = compare_df[target_feature_name]
 
  # TARGET processed HERE with COMPARE if present

sweetviz/templates/dataframe_page.html

@@ -65,8 +65,8 @@
  <div class="pos-logo-group">
  <div class="pos-logo im-logo"></div>
  <div class="pos-credits text-credits">
- {{ version }}<br>
- <a href="https://github.com/fbdesignpro/sweetviz">Click here for docs & updates</a> <br>
+ <span class="text-version">{{ version }}<br>
+ <a href="https://github.com/fbdesignpro/sweetviz">Click here for docs & updates</a></span><br>
  Created & maintained by <a href="https://www.fbdesignpro.com">Francois Bertrand</a> <br>
  Graphic design by <a href="https://www.fbdesignpro.com" data-reach="Jeff is working on his contact info :)">Jean-Francois Hains</a>
  </div>
@@ -91,6 +91,10 @@
  {% if dataframe._target is not none: %}
  <div class="pos-feature-summary" style="top: {{ dataframe._target.summary_pos }}px">
  {{ dataframe._target.html_summary }}
+ <!-- This DETAIL WINDOW (VERTICAL ONLY) -->
+ {% if dataframe.page_layout == 'vertical': %}
+ {{ dataframe._target.html_detail }}
+ {% endif %}
  </div>
  {% endif %}
  <!-- FEATURE Summaries -->

sweetviz/templates/dataframe_summary.html

@@ -57,10 +57,10 @@
  <div class="pos-df-summary-center">TEXT</div>
  <div class="pos-df-summary-compare color-compare">{{ dataframe.summary_compare.num_text if dataframe.summary_compare is not none }}</div>
  </div>
- <button class="button-bins size-df-summary-button pos-df-summary-button-assoc-source" id="button-summary-associations-source"
+ <button class="button-assoc size-df-summary-button pos-df-summary-button-assoc-source" id="button-summary-associations-source"
  data-detail-div="df-assoc-source">Associations</button >
  {% if dataframe.summary_compare is not none %}
- <button class="button-bins size-df-summary-button pos-df-summary-button-assoc-compare" id="button-summary-associations-compare"
+ <button class="button-assoc size-df-summary-button pos-df-summary-button-assoc-compare" id="button-summary-associations-compare"
  data-detail-div="df-assoc-compare">Associations</button >
  {% endif %}
  </div>

sweetviz/templates/feature_detail_cat.html

@@ -17,7 +17,7 @@
  pos-detail-cat-graph" id="detail_graph-f{{ feature_dict.order_index }}"
  style="top: {{ detail_layout.graph_y }}px;"></span>
 
- <div class="pos-detail-cat-breakdown" id="detail_breakdown-f{{ feature_dict.order_index }}"
+ <div class="pos-detail-cat-breakdown {{ "color-target-summary" if (dataframe.page_layout == "vertical" and feature_dict.is_target) }}" id="detail_breakdown-f{{ feature_dict.order_index }}"
  style="top: {{ detail_layout.breakdown_y }}px;"> <!-- height: {{ detail_layout.breakdown_height }}px;"> WHY was this needed? Causes issue in vertical layout. -->
  <!-- HEADER ROW -->
  <div class="{{ detail_layout.breakdown_header_class }} text-value" style="width:553px">
@@ -62,7 +62,7 @@
  {% endif %}
  <div class="breakdown-row text-value {{ loop.cycle('', 'row-colored') }}" style="width:553px">
  <!-- Name -->
- <div class="text-label color-normal" style="position: absolute; left:10px;
+ <div class="text-label color-normal {{ "color-target-summary" if (dataframe.page_layout == "vertical" and feature_dict.is_target) }}" style="position: absolute; left:10px;
  width: {{ cols.name_max_len }}px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ rowdata.name }}</div>
 
  <!-- Freq -->
@@ -107,8 +107,11 @@
  <!-- ASSOCIATIONS -->
 {% if influencing is not none %}
  <div class="pos-detail-cat-assoc-1" id="cat-assoc-CC-f{{ feature_dict.order_index }}">
+ <!-- no background for target in vertical mode -->
+ {% if not (dataframe.page_layout == "vertical" and feature_dict.is_target): %}
  <span class="bg-extra-column"></span>
- <div class="container-detail-assoc">
+ {% endif %}
+ <div class="container-detail-assoc {{ "color-target-summary" if (dataframe.page_layout == "vertical" and feature_dict.is_target) }}" id="cat-assoc-window-f{{ feature_dict.order_index }}">
  <!-- CAT-CAT -->
  <div class="text-small-bold color-light" style="text-align:right; line-height: 10px">
  CATEGORICAL ASSOCIATIONS<br>

sweetviz/templates/js/sweetviz.js

@@ -185,6 +185,7 @@ $("#button-summary-associations-source, #button-summary-associations-compare").c
  g_snapped = this.id;
  $("#" + $(this).data("detail-div")).show();
  }
+// $(this).addClass("assoc_active");
 
 });
 

sweetviz/templates/js/sweetviz_vertical.js

@@ -72,13 +72,40 @@ $(".selector").click(function(event) {
  // EXPAND
  // --------------------------------------------------------
  $("#" + $(this).data("detail-div")).show();
-
  $(this).parent().parent().data('expanded', 'true');
+ //alert($(this).parent().attr('id').substring(8) );
 
- // var $el = $('#detail_breakdown-f4'); //record the elem so you don't crawl the DOM everytime
- // var bottom = $el.position().top + $el.outerHeight(true); // passing "true" will also include the top and bottom margin
-
- $(this).parent().parent().css('height', '1030px');
+ var feature_index_str = $(this).parent().attr('id').substring(8);
+ if ($(this).parent().attr('id') == "summary-target") {
+ // Special feature name for target, so use common index notation for the following tasks
+ feature_index_str = "f-1";
+ }
+ if ($('#cat-assoc-window-'+feature_index_str).length) {
+ // CATEGORICAL feature: use variable-height window
+ var $el = $('#detail_breakdown-' + feature_index_str); //record the elem so you don't crawl the DOM everytime
+ var bottom = $el.position().top + $el.outerHeight(true); // passing "true" will also include the top and bottom margin
+ var desiredBottomBreakdown = bottom + 157;
+
+ $el = $('#cat-assoc-window-' + feature_index_str); //record the elem so you don't crawl the DOM everytime
+ var bottomAssoc = $el.position().top + $el.outerHeight(true); // passing "true" will also include the top and bottom margin
+ var desiredBottomAssoc = bottomAssoc + 166;
+
+ var finalHeight = Math.max(desiredBottomBreakdown, desiredBottomAssoc);
+ if ($(this).parent().attr('id') == "summary-target")
+ {
+ // More special processing for the target: change its background and limit its height (so it doesn't show through others below)
+ // (Here, make the Height a bit taller so the black background shows through)
+ $(this).parent().css('height', String((finalHeight + 50))+ 'px');
+ $("#summary-target").css("overflow", "hidden");
+ }
+ $(this).parent().parent().css('height', String(finalHeight) + 'px');
+ }
+ else
+ {
+ // NON-CATEGORICAL feature: use fixed height window
+ $(this).parent().parent().css('height', '1030px');
+ }
+ // Use the "big" background image for the target
  if ($(this).parent().attr('id') == "summary-target")
  {
  $("#summary-target-bg").addClass("bg-tab-summary-target-full");
@@ -88,6 +115,10 @@ $(".selector").click(function(event) {
  // HACK: For SOME reason, a selection gets made when we change what is hidden, unselect it
  let sel = document.getSelection();
  sel.removeAllRanges();
+
+ // Animate to the top of the screen when expanding, so we can see the whole thing immediately
+ $('html,body').animate(
+ {scrollTop: $("#" + $(this).parent().attr('id')).offset().top}, 'fast');
  }
  else
  {
@@ -108,9 +139,6 @@ $(".selector").click(function(event) {
  $("#summary-target-bg").addClass("bg-tab-summary-target");
  }
  }
- $('html,body').animate(
- {scrollTop: $("#" + $(this).parent().attr('id')).offset().top},
- 'fast');
  // var offTop = $("#" + $(this).parent().attr('id')).offset().top;
  // $('html,body').scrollTop(offTop);
  // let thisIndex = $(this).parent().parent().data('order-index');
@@ -166,13 +194,18 @@ $(".selector").click(function(event) {
 // ASSOCIATIONS CLICK
 $("#button-summary-associations-source, #button-summary-associations-compare").click(function(event) {
  let actual_div = "#" + $(this).data("detail-div");
+ // Quick hack: just remove the selected state to both buttons and restore if needed
+ $("#button-summary-associations-source, #button-summary-associations-compare").removeClass("button-assoc-selected");
+ $("#button-summary-associations-source, #button-summary-associations-compare").addClass("button-assoc");
  if(g_snapped == actual_div)
  {
  // DESELECT/HIDE ASSOC
  // --------------------------------------------------------
  g_snapped = "";
  $(actual_div).hide();
  $(".page-all-summaries").css({top: "160px"});
+ // $(this).removeClass("button-assoc-selected");
+ // $(this).addClass("button-assoc");
  }
  else if(g_snapped == "")
  {
@@ -181,13 +214,17 @@ $("#button-summary-associations-source, #button-summary-associations-compare").c
  g_snapped = actual_div;
  $(actual_div).show();
  $(".page-all-summaries").css({top: "993px"});
+ $(this).addClass("button-assoc-selected");
  }
  else
  {
- // DESELECT old, select new
+ // SWAP to OTHER ASSOC: DESELECT old, select new
  // --------------------------------------------------------
+ $(g_snapped).removeClass("button-assoc-selected");
+ $(g_snapped).addClass("button-assoc");
  $(g_snapped).hide();
  g_snapped = actual_div;
+ $(this).addClass("button-assoc-selected");
  $(actual_div).show();
  }
 });