customeranalytics 0.1__py3-none-any.whl

customeranalytics/web/app/home/templates/funnel-session.html

@@ -0,0 +1,236 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Funnel - Sessions {% endblock %}
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+	<main class="content">
+		<div class="container-fluid p-0">
+			<h5 class="h3 mb-3">Sessions Of Actions Funnel</h5>
+			<div class="col-md-12">
+				<div class="accordion" id="accordionExample">
+					<div class="card">
+						<div class="card-header" id="headingOne">
+							<h5 class="card-title my-1">
+								<a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="color:green;font-size:12px">
+									Filters
+								</a>
+							</h5>
+						</div>
+						<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
+							<form method="POST">
+								<div class="row">
+									<div class="col-md-6">
+										<div class="card">
+											<div class="card-body">
+												<div class="card">
+													<div class="card-header">
+														<h5 class="card-title mb-0">Dimension selection</h5>
+													</div>
+													<div class="card-body">
+														<select name="index" id="index" class="form-control">
+															{% for d in filters['dimensions'] %}
+																{% if d == 'There is no available report. Please execute Schedule Data Process' %}
+																	<option value= "main">{{ d }}</option>
+																{% endif %}
+																{% if d != 'There is no available report. Please execute Schedule Data Process' %}
+																	<option value="{{ d }}">{{ d }}</option>
+																{% endif %}
+															{% endfor %}
+														</select>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<div class="col-md-6">
+										<div class="card flex-fil">
+											<div class="card-body col-12">
+												<div class="col-12 ">
+													<div class="align-self-center w-100">
+														<div class="chart">
+															<input name="date" id="datetimepicker-dashboard" hidden>
+														</div>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div class="card-header">
+										<button  type="submit" class="btn btn-pill btn-primary">Apply</button>
+									</div>
+								</div>
+							</form>
+						</div>
+					</div>
+
+					<div class="card">
+						<div class="card-header" id="headingTwo">
+							<h5 class="card-title my-1">
+								<a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" style="color:green;font-size:12px">
+									Infos
+								</a>
+							</h5>
+						</div>
+						<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
+							<div class="card-body ">
+								<ul>
+								  <li>
+									  <strong style="color:green;">Session Funnels</strong> are aggregated count of events on a purchase process for customers according to time periods.
+									  They are started to be counted from the session initial event, till the purchased transaction action (events).
+								  </li>
+								  <li>
+									  <div class="card-header">
+
+									  	<h5 class="card-title" style="color:green;">What is the Session of Action?</h5>
+									  	Between 2 events, there might be more events which are probably stored in your system which they are called
+									    <strong style="color:green;">Session Actions</strong>. Example of these kind of actions; Adding Items to the Basket, Purchasement Screen Events, etc.
+
+									  	Session Actions are able to be added to ElasticSearch indexes manually while it is connecting the Sessions data Source.
+								      	In the page <strong style="color:green;">Sessions & Customers Data Source</strong>, columns name of the actions are specified in the
+								      	<strong style="color:green;">Action Column Names</strong> in Data Source.
+									  </div>
+
+								  </li>
+
+								  <li>
+									  <div class="card-header">
+									  	<h5 class="card-title" style="color:green;">What are Time Periods of Funnels?</h5>
+									  	There are daily, weekly, monthly and hourly Funnels. daily, weekly, monthly Funnels are calculated as total transaction count per action per day/week/month.
+									  	Hourly Funnel is calculated as average of total transaction count per action per hour
+									  </div>
+								  </li>
+									<li>
+									  <div class="card-header">
+									  	<h5 class="card-title" style="color:green;">How do I see the Dimensional Funnel?</h5>
+        									Each Dimensionally Funnels is created individually for dimension.
+										    Dimension columns are also specified in the page <strong style="color:green;">Sessions & Customers Data Source</strong>.
+										    After that, you may select dimension from filters section.
+									  </div>
+								  </li>
+
+									<li>
+									  <div class="card-header">
+									  	<h5 class="card-title" style="color:green;">How do I select Funnels of start - end dates?</h5>
+										  	Funnels of start date is not able to be selected. However it is possible to select end date from filters section.
+									  </div>
+								  </li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="card">
+					<div class="card-body">
+						<div class="row">
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Daily Funnel {% if data_type['daily_funnel'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div  id="d_funnel" class="plotly-gra ph-div" style="height:400px;"></div>
+								</div>
+							</div>
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Weekly Funnel {% if data_type['weekly_funnel'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="w_funnel" class="plotly-gra ph-div" style="height:350px;"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Monthly Funnel {% if data_type['monthly_funnel'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="m_funnel" class="plotly-gra ph-div" style="height:350px;"></div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Hourly Funnel {% if data_type['hourly_funnel'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="h_funnel" class="plotly-gra ph-div" style="height:350px;"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+
+			</div>
+		</div>
+	</main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}
+	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
+	<script>
+
+			var d_f = {{daily_funnel | safe}};
+
+	        Plotly.plot('d_funnel', // the ID of the div, created above
+						d_f.trace, d_f.layout, {});
+
+			var w_f = {{weekly_funnel | safe}};
+
+	        Plotly.plot('w_funnel', // the ID of the div, created above
+						w_f.trace, w_f.layout, {});
+
+			var m_f = {{monthly_funnel | safe}};
+
+	        Plotly.plot('m_funnel', // the ID of the div, created above
+						m_f.trace, m_f.layout, {});
+
+			var h_f = {{hourly_funnel | safe}};
+
+	        Plotly.plot('h_funnel', // the ID of the div, created above
+						h_f.trace, h_f.layout, {});
+
+
+
+
+	function myFunction() {
+	  // Get the checkbox
+	  var checkBox = document.getElementById("myCheck");
+	  // Get the output text
+	  var text = document.getElementById("text");
+
+	  // If the checkbox is checked, display the output text
+	  if (checkBox.checked == true){
+	    text.style.display = "block";
+	  } else {
+	    text.style.display = "none";
+	  }
+	}
+	</script>
+
+	<script>
+		document.addEventListener("DOMContentLoaded", function() {
+			document.getElementById("datetimepicker-dashboard").flatpickr({
+				inline: true,
+
+				prevArrow: "<span class=\"fas fa-chevron-left\" title=\"Previous month\"></span>",
+				nextArrow: "<span class=\"fas fa-chevron-right\" title=\"Next month\"></span>",
+			});
+		});
+	</script>
+{% endblock javascripts %}