customeranalytics 0.1__py3-none-any.whl

customeranalytics/web/app/home/templates/customer-segmentation.html

@@ -0,0 +1,308 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} A/B Test Customer Segments {% 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">A/B Test Customer Segment Change</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;">Customer Segmentation </strong>
+												     The customers, who are engaged with the business,  are counted as millions.
+												     However, Each individual customers have their unique behavior with the business,
+												     mostly they can be clustered in the same way according to their engagement and attention to your business.
+													 In that case, Customer Segmentation allows us to see
+												     this similarity of customers by separating the customers' population to the individual homogeny sub-groups.
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Segments</h5>
+														By using RFM values it is possible to segment each customer.
+													    We aim to find how they engage with
+													    the business which part of them can be encouraged to engage the business, who are gone?
+													    Who are new to the business?
+													    <strong style="color:green;">Here are the segments;</strong>
+													  	<div class="card-header">
+												     		<strong style="color:green;">Champions; </strong>
+												     		They love your business, and are pleased with your services or products.
+															Probably, They won’t let you down very soon.You are the rock star for them.
+															<p style="font-size:100px">&#128526;</p>
+												        </div>
+													  	<div class="card-header">
+												     		<strong style="color:green;">Loyal Customers; </strong>
+												     		Just like champions, they do love your business and not thinking to leave you soon.
+															They are pleased about your service and products of quality.
+															Just They do love your rock band and never miss your concert,
+															however, they would like to watch it at the back.
+ 														    <p style=“font-size:100px”>&#129311;</p>
+												        </div>
+													    <div class="card-header">
+												     		<strong style="color:green;">potential loyalist; </strong>
+												     		This group of customers would like to engage with your business recently, frequently,
+															but they are still not sure that they would like to totally engage. They probably need a push.
+												        </div>
+													  	<div class="card-header">
+												     		<strong style="color:green;">can`t lose them; </strong>
+												     		Just like the ‘potential loyalist’ segment of customers, these are engaged customers,
+															but their average basket value is a bit higher when we compare with loyal customers.
+												        </div>
+													  	<div class="card-header">
+												     		<strong style="color:green;">at risk; </strong>
+												     		They probably leave and become churn customers.
+															Make sure to keep them engaged in the business.
+												        </div>
+
+													  	<div class="card-header">
+												     		<strong style="color:green;">Need attention; </strong>
+												     		Just like ‘at risk’ segment of customers,
+															these are going to become churn customers.
+															Like the ‘at risk’ segment of customers, you have more chance to make them engaged again.
+												        </div>
+
+													  	<div class="card-header">
+												     		<strong style="color:green;">lost; </strong>
+												     		They are churn customers or very close to become the churn customers.
+												        </div>
+													  	<div class="card-header">
+												     		<strong style="color:green;">newcomers; </strong>
+												     		They have just arrived at your business. And we might not know about their satisfaction
+															because of the lack of information about them. Track their behaviors and see how they become churn or champions in the future.
+												        </div>
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">How does Customer Segmentation work?</h5>
+													  The calculated RFM values are segmented individually with 5 segments (K=5). New process will be the assigning of segment name according the top segments for RFM values.
+													  For instance, A customer who has recency; 0.2 hr (average recency; 3 days), monetary; 70 (average monetary is 30), frequency; 1 day (average frequency is 4 days).
+													  This customer`s frequency segment will be 1, recency segment will be 1, monetary segment will be 1. This customer will segmented as ‘Champions’.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Customer Segmentation TreeMap</h5>
+        												This is a treemap with % of total unique customer count per segment.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Frequency Segmentation</h5>
+        												Each customer's average time difference is calculated (Frequency Calculation).
+														Frequency values are clustered with K-Means clustering into the 5 clusters (K=5).
+													    According to each frequency value number of customers is counted per frequency segment.
+													    The X-axis represents average frequency values.
+													    Y-Axis represents the total number of client count per average frequency per frequency segment.
+												  </div>
+											  </li>
+
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Monetary Segmentation</h5>
+        												Each customer's average purchased amount is calculated (Monetary calculation).
+													    Monetary values are clustered with K-Means clustering into the 5 clusters (K=5).
+													    According to each monetary value number of customers is counted per monetary segment.
+													    The X-axis represents average monetary values.
+													    Y-Axis represents the total number of client count per average monetary per monetary segment.
+												  </div>
+											  </li>
+
+												<li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Recency Segmentation</h5>
+        												Each customer's average time difference between the current date to last purchased date is calculated (recency calculation).
+													    Recency values are clustered with K-Means clustering into the 5 clusters (K=5).
+													    According to each recency value number of customers is counted per recency segment.
+														The X-axis represents average recency values.
+													    Y-Axis represents the total number of client count per average recency per recency segment.
+												  </div>
+											  </li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div class="col-md-6">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title">Customer Segmentation {% if data_type['segmentation'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+
+									<div  id="segment_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 Segmentation {% if data_type['frequency_clusters'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="f_segment_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 Segmentation {% if data_type['monetary_clusters'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="m_segment_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 Segmentation {% if data_type['recency_clusters'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+									</div>
+									<div class="card-body">
+										<div  id="r_segment_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 segment = {{segmentation | safe}};
+
+	        Plotly.plot('segment_id', // the ID of the div, created above
+						segment.trace, segment.layout, {});
+
+			var f_segment = {{frequency_clusters | safe}};
+
+	        Plotly.plot('f_segment_id', // the ID of the div, created above
+						f_segment.trace, f_segment.layout, {});
+
+			var m_segment = {{monetary_clusters | safe}};
+
+	        Plotly.plot('m_segment_id', // the ID of the div, created above
+						m_segment.trace, m_segment.layout, {});
+
+			var r_segment = {{recency_clusters | safe}};
+
+	        Plotly.plot('r_segment_id', // the ID of the div, created above
+						r_segment.trace, r_segment.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/data-es.html

@@ -0,0 +1,152 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} ElasticSearch connection {% 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">ElasticSearch Connection</h5>
+			<div class="col-md-12">
+				<form method="POST">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="card-title"><strong>ElasticSearch Settings</strong> </h5>
+							<div class="row">
+								<h6 class="card-subtitle text-muted mb-1">
+									<strong style="color:green;"> ElasticSearch : </strong> is a search engine based on the Lucene library.
+									The reason for it is flexibility when it has been querying, data sets (Session, customer, Basket Data Sources)
+									will be stored in ElasticSearch with 2 main indexes, Orders (Sessions) and Downloads (Customers data Source)
+								</h6>
+							</div>
+
+						</div>
+						<div class="card-body">
+							<div class="row">
+								<div class="col-md-12">
+									<div class="card">
+										<div class="card-header">
+											<h5 class="card-title"><strong style="color:green;">ElasticSearch Configurations</strong></h5>
+											<h6 class="card-subtitle text-muted">
+												<div class="row">
+													- Make sure the platform is eligible to query and update ElasticSearch
+												</div>
+												<div class="row">
+													- It is possible to download and use the server locally. by default, the port is 9200.
+												</div>
+											</h6>
+										</div>
+										<div class="card-body">
+											{% if values['es_connection'] == '....' %}
+												{% if values['es_connection_check'] != '....' %}
+													<div class="mb-3">
+														<strong style="color:red;">Can not connect to ElasticSearch. {{ values['es_connection_check'] }}</strong>
+													</div>
+												{% endif %}
+												<div class="mb-3">
+													<label class="form-label" for="inputUsername">tag ElasticSearch connection</label>
+													<input name="tag" type="text" class="form-control" id="inputUsername" placeholder="assign a name to connection" required>
+												</div>
+
+												<div class="mb-3">
+													<label class="form-label" for="inputUsername">host</label>
+													<input name="host" type="text" class="form-control" id="inputHost" placeholder="host" required>
+												</div>
+
+												<div class="mb-3">
+													<label class="form-label" for="inputUsername">port</label>
+													<input name="port" type="text" class="form-control" id="inputPort" placeholder="port" required>
+												</div>
+
+												<div class="mb-3">
+													<label class="form-label mb-1" for="inputUsername">Temporary Folder Directory</label>
+													<h5 class="mb-3" style="color:green;">
+														- CLV Prediction process will use this folder for import results with '.csv' format.
+													</h5>
+													<h5 class="mb-3" style="color:green;">
+														- In order to import Charts of data in '.csv' format 'built_in_reports' folder will be created at this folder.
+													</h5>
+													<input name="directory" type="text" class="form-control" id="esDirectory" placeholder="enter folder path" required>
+												</div>
+
+												<div class="mb-3">
+													<label class="form-label" for="inputUsername">Download ElasticSearch</label>
+												</div>
+												<div class="mb-3">
+													<a href="https://www.elastic.co/elasticsearch/" target="_blank">Download ElasticSearch! https://www.elastic.co/elasticsearch/</a>
+												</div>
+												<div class="row">
+													<div class="mb-1 col-md-12">
+														<label class="form-label" for="inputFirstName">CPU Max Capacity And RAM Max Capacity</label>
+														<h5 class="mb-3" style="color:green;"> It is important to run ElasticSearch server with;
+														</h5>
+													</div>
+													<div class="mb-1 col-order-10">
+														<h5 class="mb-3" style="color:blue;"> ES_JAVA_OPTS="-Xms4g -Xmx4g" </h5>
+													</div>
+													<div class="mb-1 col-md-12">
+														<h5 class="mb-3" style="color:green;">
+															This will help us to improve the capacity of ElasticSearch that is able to use.
+														</h5>
+													</div>
+												</div>
+												<div class="mb-3">
+													<label class="form-label" for="inputCity">URL</label>
+													<input name="url" type="text"  class="form-control" id="port" placeholder="http://localhost:9200">
+													<small> Optional - generated with host and port</small>
+												</div>
+												<button name="connect" type="submit"  value="True" class="btn btn-primary">Connect</button>
+											{% endif %}
+											{% if values['es_connection'] != '....' %}
+												<div class="mb-3">
+													<h5 class="mb-3" style="color:green;">connected ElasticSearch!</h5>
+													<a class="mb-3" href="{{ values['es_connection']['tag'] }} - {{ 'http://'+ values['es_connection']['host'] + ':' +values['es_connection']['port'] }}"
+													   target="_blank">{{ values['es_connection']['tag'] }} - {{ 'http://'+ values['es_connection']['host'] + ':' +values['es_connection']['port'] }}
+													</a>
+													<div class="mb-3">
+														<strong style="color:green;"> Temporary Folder Directory; </strong> {{ values['es_connection']['directory'] }}
+													</div>
+
+												</div>
+												<div class="mb-3">
+													<button name="delete" type="submit"  value="True" class="btn btn-primary">Delete Connection</button>
+												</div>
+
+
+
+
+
+											{% endif %}
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</form>
+
+			</div>
+		</div>
+	</main>
+
+{% endblock content %}
+
+<script>
+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>
+{% block javascripts %}{% endblock javascripts %}