customeranalytics 0.1__py3-none-any.whl

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

@@ -0,0 +1,515 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Customers {% endblock %}
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+	<main class="content">
+		<form method="POST">
+			<div class="container-fluid p-0">
+
+			<div class="row mb-2 mb-xl-3">
+				<div class="col-auto d-none d-sm-block">
+					<h3><strong>Customer Analytics</strong></h3>
+				</div>
+
+				<div class="col-auto ml-auto text-right mt-n1">
+					<nav aria-label="breadcrumb">
+						<ol class="breadcrumb bg-transparent p-0 mt-1 mb-0">
+							<li class="breadcrumb-item"><a href="index">Overall</a></li>
+							<li class="breadcrumb-item" aria-current="page"><h5><strong>Customers</strong></h5></a></li>
+						</ol>
+					</nav>
+				</div>
+			</div>
+				<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>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Payment Amount Distribution</h5>
+												  	  X Axis is the purchase amount values with bins.
+													  Y Axis is number of Unique Customer count related to their average purchase amounts.
+													  This Distribution allows us the see how much customers are willing to pay for a purchase.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Total Number Customer Breakdown with Purchased Order Count</h5>
+												  	  X Axis is Order Counts staring with 1.
+													  Y Axis is number of Unique Customer count related to their order counts.
+													  This Distribution allows us the see overall potential of your business.
+												  </div>
+											  </li>
+												<li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">RFM</h5>
+												  	  X Axis represents 'recency'.
+													  Y Axis represents 'monetary'.
+													  Z Axis represents 'frequency'.
+													  Recency metric is a time difference between customers of last purchase transaction date to recent date.
+													  Monetary metric is average purchase amount per customer.
+													  Frequency metric is average time difference per between purchase date of each order per customer.
+													  There is a colored dots. These are represents the segmented customers according to their RFM values.
+												  </div>
+											  </li>
+											  <li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Download to First Order Cohort</h5>
+														If there isn`t any downloaded date, you may assign any date which is related to customers of first event with your business.
+														This cohort of date column represent download date. If it is Weekly Cohort it will represent the mondays of each week.
+													  	Otherwise it will represent days.
+													 	Each Numeric column from 0 to 15 are the day differences after the downloaded date.
+													    For instance, if date columns is 2021-05-06, and numeric column is 10 and value is 100,
+													    this refers that there are 100 customers who have downloads in  2021-05-06 and have first orders 10 days later.
+												  </div>
+											  </li>
+
+												<li>
+												  <div class="card-header">
+												  	<h5 class="card-title" style="color:green;">Daily Funnel</h5>
+													   X Axis represents days that are stored in ElasticSearch.
+													   Y Axis represents number of transactions such as order count, session count, add product the basket transaction count per day.
+													   In order to show actions such as add product the basket transaction count except order count, session count,
+													   these actions must be added to actions label while creating Sessions data source
+													   (For more information pls. check Create Data Source - Sessions & Customers)
+												  </div>
+											  </li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+
+
+			<div class="row">
+				<div class="col-xl-8 col-xxl-6" >
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+
+							<h5 class="card-title mb-0" >Payment Amount Distribution {% if data_type['purchase_amount_distribution'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body py-3" >
+							<div id="pa_distribution_id" class="chart" style="height:300px;"></div>
+						</div>
+					</div>
+				</div>
+
+
+				<div class="col-xl-8 col-xxl-6" >
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+
+							<h5 class="card-title mb-0">Total Number Customer Breakdown with Purchased Order Count {% if data_type['user_counts_per_order_seq'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body py-3" >
+							<!--<div class="chart chart-sm">
+									<canvas id="chartjs-dashboard-line"></canvas>
+							</div>
+							-->
+							<div id="order_seq_id" class="chart" style="height:300px;"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<form method="POST"><div class="row">
+				<div class="col-8 col-md-8 col-xxl-6 d-flex order-3 order-xxl-2">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+							<h5 class="card-title mb-0">RFM {% if data_type['rfm'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body px-5" style="height:650px;">
+							<div id="rfm_values" ></div>
+
+						</div>
+					</div>
+				</div>
+
+				<div class="col-8 col-md-8 col-xxl-6 d-flex order-3 order-xxl-2">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+							<h5 class="card-title mb-0">CLV Prediction - Daily {% if data_type['daily_clv'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body px-5" style="height:650px;">
+							<div id="clv_id" ></div>
+
+						</div>
+					</div>
+				</div>
+
+			</div></form>
+
+			<div class="row">
+				<div class="col-12 col-lg-8 col-xxl-6 d-flex">
+					<div class="card flex-fill">
+						<div class="card-header">
+							<h5 class="card-title mb-0">Download to First Order Cohorts {% if data_type['weekly_cohort_downloads'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+
+						<div class="card-body" >
+							<div id="w_c_d_id" class="chart" style="height:300px;"></div>
+						</div>
+
+					</div>
+				</div>
+				<div class="col-12 col-lg-4 col-xxl-6 d-flex">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+
+							<h5 class="card-title mb-0">Daily Funnel {% if data_type['daily_funnel'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body" >
+							<div id="d_funnel_id" class="chart" style="height:300px;"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+		</form>
+
+	</main>
+
+{% endblock content %}
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}
+	<script>
+
+
+		var rfm = {{rfm | safe}};
+
+        Plotly.plot('rfm_values', // the ID of the div, created above
+					rfm.trace,
+					rfm.layout, {});
+
+		var order_seq = {{uoc_order_seq | safe}};
+
+        Plotly.plot('order_seq_id', // the ID of the div, created above
+					order_seq.trace,
+					order_seq.layout, {});
+
+		var pa_distribution = {{purchase_amount_distribution | safe}};
+
+        Plotly.plot('pa_distribution_id', // the ID of the div, created above
+					pa_distribution.trace,
+					pa_distribution.layout, {});
+
+		var d_funnel = {{daily_funnel | safe}};
+
+        Plotly.plot('d_funnel_id', // the ID of the div, created above
+					d_funnel.trace, d_funnel.layout, {});
+
+		var w_c_d = {{weekly_cohort_downloads | safe}};
+
+        Plotly.plot('w_c_d_id', // the ID of the div, created above
+					w_c_d.trace, w_c_d.layout, {});
+
+		var clv = {{daily_clv | safe}};
+
+        Plotly.plot('clv_id', // the ID of the div, created above
+					clv.trace, clv.layout, {});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+		document.addEventListener("DOMContentLoaded", function() {
+			var ctx = document.getElementById("chartjs-dashboard-line").getContext("2d");
+			var gradient = ctx.createLinearGradient(0, 0, 0, 225);
+			gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
+			gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
+			// Line chart
+			new Chart(document.getElementById("chartjs-dashboard-line"), {
+				type: "line",
+				data: {
+					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+					datasets: [{
+						label: "Sales ($)",
+						fill: true,
+						backgroundColor: gradient,
+						borderColor: window.theme.primary,
+						data: [
+							2115,
+							1562,
+							1584,
+							1892,
+							1587,
+							1923,
+							2566,
+							2448,
+							2805,
+							3438,
+							2917,
+							3327
+						]
+					}]
+				},
+				options: {
+					maintainAspectRatio: false,
+					legend: {
+						display: false
+					},
+					tooltips: {
+						intersect: false
+					},
+					hover: {
+						intersect: true
+					},
+					plugins: {
+						filler: {
+							propagate: false
+						}
+					},
+					scales: {
+						xAxes: [{
+							reverse: true,
+							gridLines: {
+								color: "rgba(0,0,0,0.0)"
+							}
+						}],
+						yAxes: [{
+							ticks: {
+								stepSize: 1000
+							},
+							display: true,
+							borderDash: [3, 3],
+							gridLines: {
+								color: "rgba(0,0,0,0.0)"
+							}
+						}]
+					}
+				}
+			});
+		});
+	</script>
+	<script>
+		document.addEventListener("DOMContentLoaded", function() {
+			// Pie chart
+			new Chart(document.getElementById("chartjs-dashboard-pie"), {
+				type: "pie",
+				data: {
+					labels: ["Chrome", "Firefox", "IE"],
+					datasets: [{
+						data: [4306, 3801, 1689],
+						backgroundColor: [
+							window.theme.primary,
+							window.theme.warning,
+							window.theme.danger
+						],
+						borderWidth: 5
+					}]
+				},
+				options: {
+					responsive: !window.MSInputMethodContext,
+					maintainAspectRatio: false,
+					legend: {
+						display: false
+					},
+					cutoutPercentage: 75
+				}
+			});
+		});
+	</script>
+	<script>
+		document.addEventListener("DOMContentLoaded", function() {
+			// Bar chart
+			new Chart(document.getElementById("chartjs-dashboard-bar"), {
+				type: "bar",
+				data: {
+					labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+					datasets: [{
+						label: "This year",
+						backgroundColor: window.theme.primary,
+						borderColor: window.theme.primary,
+						hoverBackgroundColor: window.theme.primary,
+						hoverBorderColor: window.theme.primary,
+						data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
+						barPercentage: .75,
+						categoryPercentage: .5
+					}]
+				},
+				options: {
+					maintainAspectRatio: false,
+					legend: {
+						display: false
+					},
+					scales: {
+						yAxes: [{
+							gridLines: {
+								display: false
+							},
+							stacked: false,
+							ticks: {
+								stepSize: 20
+							}
+						}],
+						xAxes: [{
+							stacked: false,
+							gridLines: {
+								color: "transparent"
+							}
+						}]
+					}
+				}
+			});
+		});
+	</script>
+	<script>
+		document.addEventListener("DOMContentLoaded", function() {
+			var markers = [{
+					coords: [31.230391, 121.473701],
+					name: "Shanghai"
+				},
+				{
+					coords: [28.704060, 77.102493],
+					name: "Delhi"
+				},
+				{
+					coords: [6.524379, 3.379206],
+					name: "Lagos"
+				},
+				{
+					coords: [35.689487, 139.691711],
+					name: "Tokyo"
+				},
+				{
+					coords: [23.129110, 113.264381],
+					name: "Guangzhou"
+				},
+				{
+					coords: [40.7127837, -74.0059413],
+					name: "New York"
+				},
+				{
+					coords: [34.052235, -118.243683],
+					name: "Los Angeles"
+				},
+				{
+					coords: [41.878113, -87.629799],
+					name: "Chicago"
+				},
+				{
+					coords: [51.507351, -0.127758],
+					name: "London"
+				},
+				{
+					coords: [40.416775, -3.703790],
+					name: "Madrid "
+				}
+			];
+			var map = new JsVectorMap({
+				map: "world",
+				selector: "#world_map",
+				zoomButtons: true,
+				markers: markers,
+				markerStyle: {
+					initial: {
+						r: 9,
+						strokeWidth: 7,
+						stokeOpacity: .4,
+						fill: window.theme.primary
+					},
+					hover: {
+						fill: window.theme.primary,
+						stroke: window.theme.primary
+					}
+				}
+			});
+			window.addEventListener("resize", () => {
+				map.updateSize();
+			});
+		});
+	</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/page-403.html

@@ -0,0 +1,46 @@
+{% extends "layouts/base-fullscreen.html" %}
+
+{% block title %} Error 403 {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- Section -->
+	<main class="d-flex w-100">
+		<div class="container d-flex flex-column">
+			<div class="row vh-100">
+				<div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
+					<div class="d-table-cell align-middle">
+
+						<div class="text-center mt-4">
+							<h1 class="h2">
+                                Error 403
+                            </h1>
+							<p class="lead">
+								Access denied - please contact support or authenticate.
+							</p>
+						</div>
+
+						<div class="card">
+							<div class="card-body">
+                                    <div class="text-center mt-3">
+                                        <a href="{{ url_for('base_blueprint.login') }}" 
+										   class="btn btn-lg btn-primary">LOGIN</a>
+                                        <!-- <button type="submit" class="btn btn-lg btn-primary">Sign in</button> -->
+                                    </div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

customeranalytics/web/app/home/templates/page-404.html

@@ -0,0 +1,45 @@
+{% extends "layouts/base-fullscreen.html" %}
+
+{% block title %} Error 404 {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- Section -->
+	<main class="d-flex w-100">
+		<div class="container d-flex flex-column">
+			<div class="row vh-100">
+				<div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
+					<div class="d-table-cell align-middle">
+
+						<div class="text-center mt-4">
+							<h1 class="h2">
+                                Error 404
+                            </h1>
+							<p class="lead">
+								Page not found
+							</p>
+						</div>
+
+						<div class="card">
+							<div class="card-body">
+                                    <div class="text-center mt-3">
+                                        <a href="/" class="btn btn-lg btn-primary">HOME</a>
+                                        <!-- <button type="submit" class="btn btn-lg btn-primary">Sign in</button> -->
+                                    </div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

customeranalytics/web/app/home/templates/page-500.html

@@ -0,0 +1,45 @@
+{% extends "layouts/base-fullscreen.html" %}
+
+{% block title %} Error 500 {% endblock %} 
+
+<!-- Specific Page CSS goes HERE  -->
+{% block stylesheets %}{% endblock stylesheets %}
+
+{% block content %}
+
+    <!-- Section -->
+	<main class="d-flex w-100">
+		<div class="container d-flex flex-column">
+			<div class="row vh-100">
+				<div class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
+					<div class="d-table-cell align-middle">
+
+						<div class="text-center mt-4">
+							<h1 class="h2">
+                                Error 500
+                            </h1>
+							<p class="lead">
+								Server error - please contact support.
+							</p>
+						</div>
+
+						<div class="card">
+							<div class="card-body">
+                                    <div class="text-center mt-3">
+                                        <a href="/" class="btn btn-lg btn-primary">HOME</a>
+                                        <!-- <button type="submit" class="btn btn-lg btn-primary">Sign in</button> -->
+                                    </div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+		</div>
+	</main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}

customeranalytics/web/app/home/templates/pages-blank.html

@@ -0,0 +1,33 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Blank Page {% 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">Blank Page</h1>
+
+			<div class="row">
+				<div class="col-12">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="card-title mb-0">Empty card</h5>
+						</div>
+						<div class="card-body">
+						</div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+	</main>
+
+{% endblock content %}
+
+<!-- Specific Page JS goes HERE  -->
+{% block javascripts %}{% endblock javascripts %}