customeranalytics 0.1__py3-none-any.whl

customeranalytics/web/app/home/templates/rfm.html

@@ -0,0 +1,254 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} RFM {% 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">Recency - Monetary - Frequency Calculations for Customers</h5>
+			<div class="col-md-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="row">
+							<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;">
+													  RFM (Recency - Monetary - Frequency) </strong>
+												      RFM is the most common Marketing measurement for each business.
+												      It is easy to apply for any kind of business.
+												      It is the combination of 3 metrics which are Recency - Monetary - Frequency.
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Recency</h5>
+													  	It is a time difference measurement related to how recently the customer engages with the business.
+												  </div>
+											  </li>
+									          <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Monetary</h5>
+													  	It is the value of the purchases per customer.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Frequency</h5>
+													  	It is a time difference measurement related to how average hourly difference between 2 orders per customer in the business.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">RFM 3D Scatter</h5>
+														Each point represents individual customer`s of RFM values
+														The X-axis represents recency; Y-axis represents monetary, Z-Axis represents frequency values.
+												  </div>
+											  </li>
+												<li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Frequency - Recency Scatter</h5>
+        												The X-axis represents frequency; Y-axis represents recency values.
+													  Colors represent Customer Segments.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Monetary - Frequency Scatter</h5>
+        												The X-axis represents monetary; Y-axis represents frequency values.
+													    Colors represent Customer Segments
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Recency - Monetary Scatter</h5>
+        												The X-axis represents recency; Y-axis represents monetary values.
+														Colors represent Customer Segments.
+												  </div>
+											  </li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">RFM {% if data_type['rfm'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+
+									<div  id="rfm_vals_id" 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">Frequency - Recency {% if data_type['frequency_recency'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="fr_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Monetary - Frequency {% if data_type['monetary_frequency'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="mf_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Recency - Monetary {% if data_type['recency_monetary'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="rm_id" class="plotly-gra ph-div" style="height:400px;"></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 rfm_vals = {{rfm | safe}};
+
+	        Plotly.plot('rfm_vals_id', // the ID of the div, created above
+						rfm_vals.trace, rfm_vals.layout, {});
+
+			var fr = {{frequency_recency | safe}};
+
+	        Plotly.plot('fr_id', // the ID of the div, created above
+						fr.trace, fr.layout, {});
+
+			var mf = {{monetary_frequency | safe}};
+
+	        Plotly.plot('mf_id', // the ID of the div, created above
+						mf.trace, mf.layout, {});
+
+			var rm = {{recency_monetary | safe}};
+
+	        Plotly.plot('rm_id', // the ID of the div, created above
+						rm.trace, rm.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 %}

customeranalytics/web/app/home/templates/search.html

@@ -0,0 +1,167 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} search {% 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">Search Results {% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+
+			{% if search_results.has_results  == True %}
+				<h5 class="card-title mb-4" style="color:green;">
+					search_value : {{ search_results.search_value }} ||
+					similarity_score : {{ search_results.similarity_score }} ||
+					search_type: {{ search_results.search_type }}
+				</h5>
+			{% endif %}
+			<div class="col-md-12">
+				<div class="card">
+					<div class="card-body">
+						<div class="row">
+							<div class="col-xl-6 col-xxl-5 d-flex">
+								<div class="w-100">
+									<div class="row">
+										<div class="col-sm-6">
+											<div class="card" style="height:200px;">
+												<div class="card-body">
+													<h5 class="card-title mb-4">
+														{{ chart_names.kpi_1 }}  {% if data_type['kpi_1'] == False %}  <strong style="color:red;"> sample data </strong>
+														{% endif %} {% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+													<h1 class="mt-1 mb-3">{{ kpis.kpi_1 }}</h1>
+												</div>
+											</div>
+											<div class="card" style="height:200px;">
+												<div class="card-body">
+													<h5 class="card-title mb-4">
+														{{ chart_names.kpi_2 }}  {% if data_type['kpi_2'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}
+														{% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+													<h1 class="mt-1 mb-3">{{ kpis.kpi_2 }}</h1>
+												</div>
+											</div>
+										</div>
+										<div class="col-sm-6">
+											<div class="card" style="height:200px;">
+												<div class="card-body">
+													<h5 class="card-title mb-4">
+														{{ chart_names.kpi_3 }}  {% if data_type['kpi_3'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}
+														{% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+													<h1 class="mt-1 mb-3">{{ kpis.kpi_3 }}</h1>
+												</div>
+											</div>
+
+											<div class="card" style="height:200px;">
+												<div class="card-body">
+													<h5 class="card-title mb-4">
+														{{ chart_names.kpi_4 }}  {% if data_type['kpi_4'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}
+														{% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+													<h1 class="mt-1 mb-3">{{ kpis.kpi_4 }}</h1>
+												</div>
+											</div>
+
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-7">
+								<div class="card" style="height:200px;">
+									<div class="card-header">
+										<h5 class="card-title">{{ chart_names.chart_2_search }}</strong>
+										{% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+
+									</div>
+									<div class="card-body">
+										<div  id="chart_2_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						{% if search_results.search_type ==  'product' or search_results.search_type ==  'promotion' or search_results.search_type ==  'dimension' %}
+							<div class="row">
+								<div class="col-md-6">
+									<div class="card">
+										<div class="card-header">
+											<h5 class="card-title">{{ chart_names.chart_3_search }}</strong>
+											{% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+										</div>
+										<div class="card-body">
+											<div  id="chart_3_id" class="plotly-gra ph-div" style="height:400px;"></div>
+										</div>
+									</div>
+								</div>
+								<div class="col-md-6">
+									<div class="card">
+										<div class="card-header">
+											<h5 class="card-title">{{ chart_names.chart_4_search }}</strong>
+											{% if search_results.has_results  == False %}  <strong style="color:red;"> no result is found. (sample data) </strong> {% endif %}</h5>
+										</div>
+										<div class="card-body">
+											<div  id="chart_4_id" class="plotly-gra ph-div" style="height:400px;"></div>
+										</div>
+									</div>
+								</div>
+							</div>
+						{% endif %}
+
+					</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 chart_2_v = {{chart_2 | safe}};
+
+	        Plotly.plot('chart_2_id', // the ID of the div, created above
+						chart_2_v.trace, chart_2_v.layout, {});
+
+			var chart_3_v = {{chart_3 | safe}};
+
+	        Plotly.plot('chart_3_id', // the ID of the div, created above
+			chart_3_v.trace, chart_3_v.layout, {});
+
+			var chart_4_v = {{chart_4 | safe}};
+
+	        Plotly.plot('chart_4_id', // the ID of the div, created above
+			chart_4_v.trace, chart_4_v.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 %}

customeranalytics/web/app/home/templates/settings.html

@@ -0,0 +1,205 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Settings {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+	<main class="content">
+		<div class="container-fluid p-0">
+			<h1 class="h3 mb-3">Settings</h1>
+			<div class="row">
+				<div class="col-md-3 col-xl-2">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="card-title mb-0">Profile Settings</h5>
+						</div>
+						<div class="list-group list-group-flush" role="tablist">
+							<a class="list-group-item list-group-item-action active" data-toggle="list" href="#account" role="tab">
+							Account
+							</a>
+							<a class="list-group-item list-group-item-action" data-toggle="list" href="#password" role="tab">
+							Password
+							</a>
+							<a class="list-group-item list-group-item-action" data-toggle="list" href="#" role="tab">
+							Delete account
+							</a>
+						</div>
+					</div>
+				</div>
+				<div class="col-md-9 col-xl-10">
+					<div class="tab-content">
+						<div class="tab-pane fade show active" id="account" role="tabpanel">
+							<div class="card">
+								<div class="card-header">
+									<h5 class="card-title mb-0">Public info</h5>
+								</div>
+								<div class="card-body">
+									<form>
+										<div class="row">
+											<div class="col-md-8">
+												<div class="mb-3">
+													<label class="form-label" for="inputUsername">Username</label>
+													<input type="text" class="form-control" id="inputUsername" placeholder="Username">
+												</div>
+												<div class="mb-3">
+													<label class="form-label" for="inputUsername">Biography</label>
+													<textarea rows="2" class="form-control" id="inputBio" placeholder="Tell something about yourself"></textarea>
+												</div>
+											</div>
+											<div class="col-md-4">
+												<div class="text-center">
+													{% if pic == 'None' %}
+														<div class="card-body text-center" style="text-allign:center;">
+															<span id="firstName" hidden>{{ current_user.username }} </span>
+															<span id="lastName" hidden>{{ current_user.email }} </span>
+															<div id="profileImage" width="128" height="128" align="center"></div>
+														</div>
+													{% endif %}
+													{% if pic != 'None' %}
+														<img src="/static/assets/img/avatars/{{ pic }}"class="img-fluid rounded-circle mb-2" width="128" height="128" />
+													{% endif %}
+													<form action="/upload-image" method="POST" enctype="multipart/form-data">
+      												  <div class="form-group">
+      												    <div class="custom-file mb-1">
+															<label for="image" class="btn" style="color:green;">Select Image</label>
+      												        <input type="file" class="custom-file-input"  style="visibility:hidden;" name="image" id="image" required>
+															<button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i>Upload</button>
+      												    </div>
+      												  </div>
+      												</form>
+													<small>choose an avatar with .png format</small>
+												</div>
+											</div>
+										</div>
+										<button type="submit" class="btn btn-primary">Save changes</button>
+									</form>
+
+								</div>
+							</div>
+							<div class="card">
+								<div class="card-header">
+									<h5 class="card-title mb-0">Private info</h5>
+								</div>
+								<div class="card-body">
+									<form>
+										<div class="row">
+											<div class="mb-3 col-md-6">
+												<label class="form-label" for="inputFirstName">First name</label>
+												<input type="text" class="form-control" id="inputFirstName" placeholder="First name">
+											</div>
+											<div class="mb-3 col-md-6">
+												<label class="form-label" for="inputLastName">Last name</label>
+												<input type="text" class="form-control" id="inputLastName" placeholder="Last name">
+											</div>
+										</div>
+										<div class="mb-3">
+											<label class="form-label" for="inputEmail4">Email</label>
+											<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+										</div>
+										<div class="mb-3">
+											<label class="form-label" for="inputAddress">Address</label>
+											<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+										</div>
+										<div class="mb-3">
+											<label class="form-label" for="inputAddress2">Address 2</label>
+											<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+										</div>
+										<div class="row">
+											<div class="mb-3 col-md-6">
+												<label class="form-label" for="inputCity">City</label>
+												<input type="text" class="form-control" id="inputCity">
+											</div>
+											<div class="mb-3 col-md-4">
+												<label class="form-label" for="inputState">State</label>
+												<select id="inputState" class="form-control">
+													<option selected>Choose...</option>
+													<option>...</option>
+												</select>
+											</div>
+											<div class="mb-3 col-md-2">
+												<label class="form-label" for="inputZip">Zip</label>
+												<input type="text" class="form-control" id="inputZip">
+											</div>
+										</div>
+										<button type="submit" class="btn btn-primary">Save changes</button>
+									</form>
+								</div>
+							</div>
+						</div>
+						<div class="tab-pane fade" id="password" role="tabpanel">
+							<div class="card">
+								<div class="card-body">
+									<h5 class="card-title">Password</h5>
+									<form>
+										<div class="mb-3">
+											<label class="form-label" for="inputPasswordCurrent">Current password</label>
+											<input type="password" class="form-control" id="inputPasswordCurrent">
+											<small><a href="#">Forgot your password?</a></small>
+										</div>
+										<div class="mb-3">
+											<label class="form-label" for="inputPasswordNew">New password</label>
+											<input type="password" class="form-control" id="inputPasswordNew">
+										</div>
+										<div class="mb-3">
+											<label class="form-label" for="inputPasswordNew2">Verify password</label>
+											<input type="password" class="form-control" id="inputPasswordNew2">
+										</div>
+										<button type="submit" class="btn btn-primary">Save changes</button>
+									</form>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+<style>
+
+					.inputfile {
+
+					opacity: 8;
+					overflow: hidden;
+					position: absolute;
+					z-index: -1;
+				}
+
+				.inputfile + label {
+					cursor: pointer; /* "hand" cursor */
+				}
+
+</style>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
+<script>
+
+		$(document).ready(function(){
+  			var firstName = $('#firstName').text();
+  			var lastName = $('#lastName').text();
+  			var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
+  			var profileImage = $('#profileImage').text(intials);
+		});
+
+		$(document).ready(function(){
+		  var firstName = $('#firstName').text();
+		  var lastName = $('#lastName').text();
+		  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
+		  var profileImage = $('#profileImageTop').text(intials);
+		});
+
+		imgInp.onchange = evt => {
+		  const [file] = imgInp.files
+		  if (file) {
+		    blah.src = URL.createObjectURL(file)
+		  }
+		}
+</script>
+
+{% endblock javascripts %}