customeranalytics 0.1__py3-none-any.whl

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

@@ -0,0 +1,524 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} Overall {% 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 active" aria-current="page"><h5><strong>Overall</strong></h5></li>
+							<li class="breadcrumb-item"><a href="index2">Customers</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;">Orders - Revenue - Visitors - Discount</h5>
+									  Orders; Number of purchase count
+									  Revenue; Total Purchase Amount
+									  Visitors; Total Unique Visitors Count
+									  Discount; Total Discount Amount (Optional)
+								  </div>
+							  </li>
+							   <li>
+								  <div class="card-header">
+									<h5 class="card-title" style="color:green;">Daily Orders</h5>
+									  Total Number of Success Purchase Transaction per day.
+								  </div>
+							  </li>
+							  <li>
+								  <div class="card-header">
+									<h5 class="card-title" style="color:green;">Customer Journey</h5>
+									    Customers Journey Calculation;
+    									1. Calculate average Hour difference from Download to 1st orders.
+    									2 . Calculate average order count
+    									3 .For each calculated average orders, calculate the average purchase amount,
+    									Example;
+    									average 2 orders, 1st orders avg 30.3£, 2nd orders avg 33.3£
+    									Calculate average recent hours customers last order to a recent date.
+
+								  </div>
+							  </li>
+							  <li>
+								  <div class="card-header">
+									<h5 class="card-title" style="color:green;">Churn Rate</h5>
+									    First, the Frequency value is calculated for each user.
+									    Frequency is the time difference between each sequential order per customer.
+									    Each customer's last order date is not expected to be purchased before the average frequency day.
+									    In other words, Each customer is expected to order at most average frequency days before.
+										A number of unique customers who have ordered between average frequency date
+									    before the current date and current date are engaged users Churn is engaged users
+									    divided by total unique ordered users.
+								  </div>
+							  </li>
+						      <li>
+								  <div class="card-header">
+									<h5 class="card-title" style="color:green;">Churn Rate Weekly</h5>
+									    It is calculated the same as the churn rate per week (each Monday of the week).
+								  </div>
+							  </li>
+							  <li>
+								  <div class="card-header">
+									<h5 class="card-title" style="color:green;">Top 10 Purchased Products</h5>
+									    The most preferred products for the customers.
+									    Each bar represents the total number of order per product.
+								  </div>
+							  </li>
+							  <li>
+								  <div class="card-header">
+									<h5 class="card-title" style="color:green;">Top 10 Purchased Categories</h5>
+									    The most preferred product categories for the customers.
+									    Each bar represents the total number of order per product category.
+								  </div>
+							  </li>
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+
+
+			<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:180px;">
+									<div class="card-body">
+										<h5 class="card-title mb-4">Orders  {% if data_type['total_orders'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<h1 class="mt-1 mb-3">{{ kpis.total_orders }}</h1>
+										<div class="mb-1">
+											{% if kpis.since_last_week_orders[0] == '-' %}
+												<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_orders }}% </span>
+											{% endif %}
+											{% if kpis.since_last_week_orders[0] != '-' %}
+												<span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_orders }}% </span>
+											{% endif %}
+											<span class="text-muted">Since last week</span>
+										</div>
+									</div>
+								</div>
+								<div class="card" style="height:180px;">
+									<div class="card-body">
+										<h5 class="card-title mb-4">Visitors {% if data_type['total_visitors'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<h1 class="mt-1 mb-3">{{ kpis.total_visitors }}</h1>
+										<div class="mb-1">
+											{% if kpis.since_last_week_total_visitors[0] == '-' %}
+												<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_total_visitors }}% </span>
+											{% endif %}
+											{% if kpis.since_last_week_total_visitors[0] != '-' %}
+												<span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_total_visitors }}% </span>
+											{% endif %}
+											<span class="text-muted">Since last week</span>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="col-sm-6">
+								<div class="card" style="height:180px;">
+									<div class="card-body">
+										<h5 class="card-title mb-4">Revenue {% if data_type['total_revenue'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<h1 class="mt-1 mb-3">{{ kpis.total_revenue }}</h1>
+										<div class="mb-1">
+											{% if kpis.since_last_week_revenue[0] == '-' %}
+												<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_revenue }}% </span>
+											{% endif %}
+											{% if kpis.since_last_week_revenue[0] != '-' %}
+												<span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_revenue }}% </span>
+											{% endif %}
+											<span class="text-muted">Since last week</span>
+										</div>
+									</div>
+								</div>
+								<div class="card">
+									<div class="card-body" style="height:180px;">
+										<h5 class="card-title mb-4">Discount {% if data_type['total_discount'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<h1 class="mt-1 mb-3">{{ kpis.total_discount }}</h1>
+										<div class="mb-1">
+											{% if kpis.since_last_week_total_discount[0] == '-' %}
+												<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_total_discount }}% </span>
+											{% endif %}
+											{% if kpis.since_last_week_total_discount[0] != '-' %}
+												<span class="text-success"> <i class="mdi mdi-arrow-bottom-right"></i> {{ kpis.since_last_week_total_discount }}% </span>
+											{% endif %}
+											<span class="text-muted">Since last week</span>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="col-xl-6 col-xxl-7" >
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+
+							<h5 class="card-title mb-0" >Daily Orders {% if data_type['daily_orders'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+
+						</div>
+
+						<div class="card-body py-3" >
+							<div id="chart_asd2" class="chart" style="height:200px;"></div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<form method="POST"><div class="row">
+				<div class="col-12 col-md-6 col-xxl-3 d-flex order-2 order-xxl-3">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+							<h5 class="card-title mb-0" >Churn Rate (%) {% if data_type['churn'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body d-flex">
+
+							<div  id="churn_rate_id" class="chart"></div>
+
+						</div>
+					</div>
+				</div>
+				<div class="col-12 col-md-6 col-xxl-3 d-flex order-2 order-xxl-3">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+							<h5 class="card-title mb-0" >Churn Rate Weekly (%) {% if data_type['churn_weekly'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body d-flex">
+
+							<div  id="churn_rate_weekly_id" class="chart"></div>
+
+						</div>
+					</div>
+				</div>
+				<div class="col-12 col-md-12 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">Customer Segmentation {% if data_type['segmentation'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div class="card-body px-5" style="height:400px;">
+							<div  id="segmentation" class="chart" style="height:400px;"></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">Customer Journey {% if data_type['customer_journey'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div  id="cj_id" class="chart" style="height:400px;"></div>
+					</div>
+				</div>
+				<div class="col-12 col-lg-4 col-xxl-3 d-flex">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+
+							<h5 class="card-title mb-0">Top 10 Purchased Products {% if data_type['most_ordered_products'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div  id="products_id" class="chart" style="height:400px;"></div>
+					</div>
+				</div>
+				<div class="col-12 col-lg-4 col-xxl-3 d-flex">
+					<div class="card flex-fill w-100">
+						<div class="card-header">
+
+							<h5 class="card-title mb-0">Top 10 Purchased Categories {% if data_type['most_ordered_categories'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+						</div>
+						<div  id="categories_id" class="chart" style="height:400px;"></div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+		</form>
+
+	</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 graphs = {{charts | safe}};
+
+        Plotly.plot('chart_asd2', // the ID of the div, created above
+					graphs.trace, graphs.layout, {});
+
+		var segments = {{customer_segments | safe}};
+
+		Plotly.plot('segmentation', // the ID of the div, created above
+					segments.trace, segments.layout,  {});
+
+		var cj = {{customer_journey | safe}};
+
+		Plotly.plot('cj_id', // the ID of the div, created above
+					cj.trace, cj.layout,  {});
+
+		var products = {{top_products | safe}};
+
+		Plotly.plot('products_id', // the ID of the div, created above
+					products.trace, products.layout,  {});
+
+		var categories = {{top_categories | safe}};
+
+		Plotly.plot('categories_id', // the ID of the div, created above
+					categories.trace, categories.layout,  {});
+
+		var kpis = {{kpis | safe}};
+
+		total_orders = kpis.total_orders
+
+		var churn_rate = {{churn | safe}};
+
+		Plotly.plot('churn_rate_id', // the ID of the div, created above
+					churn_rate.trace, churn_rate.layout,  {});
+
+		var churn_rate_weekly = {{churn_weekly | safe}};
+
+		Plotly.plot('churn_rate_weekly_id', // the ID of the div, created above
+					churn_rate_weekly.trace, churn_rate_weekly.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() {
+			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 %}