customeranalytics 0.1__py3-none-any.whl

customeranalytics/web/app/home/templates/abtest-segments.html

@@ -0,0 +1,298 @@
+{% 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;">A/B Test Customer Segment Change </strong> are bunch of tests
+												  which compares the effect of Customers Segments of Change within Time Periods to the business.
+
+												  Before and After time periods are constants time periods which are day, week and month.
+												  Each segment of current day, current week and current month are compared
+												  with the last 4 weeks of same weekday of current weekday,
+												  last 4 weeks and last 4 months.
+												  There are two metrics which help us to measure comparison values.
+												  These are number of orders counts per segment and Average purchase amount per segment.
+												  Difference of Segments between before and after time periods related to these metrics are tested
+												  with Before - After Analysis.
+												  in order to the answer the question that is "Is there any significant increase/decrease
+												  on Order Count / Average Payment Amount per Customer Segment"
+												  While we need to see to Segment which increases/decreases the number of orders and the average purchase amount,
+												  This Section can help us to find the right Segment of Improvements.
+											  </li>
+											  <li>
+												  <div class="card-header">
+													  <h5 class="card-title" style="color:green;">Hypothesis are;</h5>
+													  <div class="card-header">
+														  <div class="row">H0 : These is no significant Difference with A - B of order count / purchase amount.</div>
+														  <div class="row">H1 : These is significant Difference with A - B of order count / purchase amount.</div>
+													  </div>
+												  </div>
+											  </li>
+											  <li>
+											    <div class="card-header">
+											  	  <h5 class="card-title" style="color:green;">Bootstrapping Method;</h5>
+											  	  <div class="card-header">
+											  		  <div class="row">
+											  		    Each test process are applied with Boostraping Method.
+											  	        So, Iteratively randomly selected A and B sample customers of order count / average purchase amount will be tested acceptable enough time.
+											  	        Each iteration A - B samples are randomly selected.
+											  	        Accepted ratio will show us the confidence of our test results. For instance, There are 100 tests and 75 of them are ended with H0 Accepted.
+											  	        So, test are % 75  our test are H0 Accepted.
+											  		  </div>
+											  	  </div>
+											    </div>
+											  </li>
+											</ul>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div class="col-md-4">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title" style="font-size:10px;"><strong> Daily </strong> Customers' <strong> Total Order Count </strong> per Customer Segment {% if data_type['segments_change_daily_before_after_orders'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<div class="row">
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> After :</strong> Each bar represents Average of total order count per customers per segment for <strong style="color:green;"> current week day (Ex: Monday)</strong>.</h6>
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> Before :</strong> Each bar represents Average of total order count per customers per segment for <strong style="color:green;"> last 4 weeks of current week day (Ex : last 4 Mondays)</strong>.</h6>
+										</div>
+									</div>
+									<div class="card-body">
+										<div id="sc_daily_ba_o_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-4">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title" style="font-size:10px;"><strong> Weekly </strong> Customers' <strong> Total Order Count </strong> per Customer Segment {% if data_type['segments_change_weekly_before_after_orders'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<div class="row">
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> After :</strong> Each bar represents Average of total order count per customers per segment for <strong style="color:green;"> current week</strong>.</h6>
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> Before :</strong> Each bar represents Average of total order count per customers per segment for <strong style="color:green;"> last 4 weeks </strong>.</h6>
+										</div>
+									</div>
+									<div class="card-body">
+										<div id="sc_weekly_ba_o_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-4">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title" style="font-size:10px;"><strong> Monthly </strong> Customers' <strong> Total Order Count </strong> per Customer Segment {% if data_type['segments_change_monthly_before_after_orders'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<div class="row">
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> After :</strong> Each bar represents average of total order count per customer per segment for <strong style="color:green;"> current month</strong>.</h6>
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> Before :</strong> Each bar represents average of total order count per customer per segment for <strong style="color:green;"> last 4 months </strong>.</h6>
+										</div>
+									</div>
+									<div class="card-body">
+										<div id="sc_monthly_ba_o_id" class="plotly-gra ph-div" style="height:400px;wight"></div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+
+						<div class="row">
+							<div class="col-md-4">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title" style="font-size:10px;"><strong> Daily </strong> Customers' Average Purchase <strong> Payment Amount</strong> per Customer Segment {% if data_type['segments_change_daily_before_after_amount'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<div class="row">
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> After :</strong> Each bar represents average payment amount per customer per segment for <strong style="color:green;"> current week day (Ex: Monday)</strong>.</h6>
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> Before :</strong> Each bar represents average payment amount per customer per segment for <strong style="color:green;"> last 4 weeks of current week day (Ex : last 4 Mondays)</strong>.</h6>
+										</div>
+									</div>
+									<div class="card-body">
+										<div id="sc_weekly_ba_a_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-4">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title" style="font-size:10px;"><strong> Weekly </strong> Customers' Average Purchase <strong> Payment Amount</strong> per Customer Segment {% if data_type['segments_change_weekly_before_after_amount'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<div class="row">
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> After :</strong> Each bar represents average payment amount per customer per segment for <strong style="color:green;"> current week</strong>.</h6>
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> Before :</strong> Each bar represents average payment amount per customer per segment for <strong style="color:green;"> last 4 weeks </strong>.</h6>
+										</div>
+									</div>
+									<div class="card-body">
+										<div id="sc_daily_ba_a_id" class="plotly-gra ph-div" style="height:400px;"></div>
+									</div>
+								</div>
+							</div>
+							<div class="col-md-4">
+								<div class="card">
+									<div class="card-header">
+										<h5 class="card-title" style="font-size:10px;"><strong> Monthly </strong> Customers' Average Purchase <strong> Payment Amount</strong> per Customer Segment {% if data_type['segments_change_monthly_before_after_amount'] == False %}  <strong style="color:red;"> sample data </strong> {% endif %}</h5>
+										<div class="row">
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> After :</strong> Each bar represents average payment amount per customer per segment for <strong style="color:green;"> current month</strong>.</h6>
+											<h6 class="card-subtitle text-muted mb-1" style="font-size:10px;">- <strong style="color:green;"> Before :</strong> Each bar represents average payment amount per customer per segment for <strong style="color:green;"> last 4 months </strong>.</h6>
+										</div>
+									</div>
+									<div class="card-body">
+										<div id="sc_monthly_ba_a_id" class="plotly-gra ph-div" style="height:400px;wight"></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 sc_weekly_ba_o = {{sc_weekly_ba_orders | safe}};
+
+	        Plotly.plot('sc_weekly_ba_o_id', // the ID of the div, created above
+						sc_weekly_ba_o.trace, sc_weekly_ba_o.layout, {});
+
+			var sc_daily_ba_o = {{sc_daily_ba_orders | safe}};
+
+	        Plotly.plot('sc_daily_ba_o_id', // the ID of the div, created above
+						sc_daily_ba_o.trace, sc_daily_ba_o.layout, {});
+
+			var sc_monthly_ba_o = {{sc_monthly_ba_orders | safe}};
+
+	        Plotly.plot('sc_monthly_ba_o_id', // the ID of the div, created above
+						sc_monthly_ba_o.trace, sc_monthly_ba_o.layout, {});
+
+
+			var sc_weekly_ba_a = {{sc_weekly_ba_amount | safe}};
+
+	        Plotly.plot('sc_weekly_ba_a_id', // the ID of the div, created above
+						sc_weekly_ba_a.trace, sc_weekly_ba_a.layout, {});
+
+
+			var sc_daily_ba_a = {{sc_daily_ba_amount | safe}};
+
+	        Plotly.plot('sc_daily_ba_a_id', // the ID of the div, created above
+						sc_daily_ba_a.trace, sc_daily_ba_a.layout, {});
+
+			var sc_monthly_ba_a = {{sc_monthly_ba_amount | safe}};
+
+	        Plotly.plot('sc_monthly_ba_a_id', // the ID of the div, created above
+						sc_monthly_ba_a.trace, sc_monthly_ba_a.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/add-data-delivery.html

@@ -0,0 +1,184 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} delivery data 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">Deliveries</h5>
+			<div class="col-md-12">
+				<form method="POST">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="card-title"><strong>Sessions of Delivery Data Source</strong> </h5>
+							<div class="row">
+								<h6 class="card-subtitle text-muted mb-3">
+									<strong style="color:green;"> Delivery : </strong> The delivery data source is the sub-data source for the sessions.
+									This data source is merging with Sessions data source and storing into the ElasticSearch.
+									If any session has a deliver process, the Order ID of the session of delivery information must be included at delivery data source
+									 and purchase value must be True.
+									Delivery Data Source is optional.
+								</h6>
+							</div>
+
+							<div class="row ">
+								<h6 class="card-subtitle text-muted">
+									{% if values['data_source_con_check'] == 'Connected' %}
+										{% if values['s_c_p_connection_check']['deliveries'] == 'False' %}
+											<strong style="color:green;">There isn`t any connection detected for Deliveries.</strong>
+										{% endif %}
+										{% if values['s_c_p_connection_check']['deliveries'] == 'True' %}
+											<strong style="color:green;">Deliveries Data Source is successfully created.</strong>
+										{% endif %}
+									{% endif %}
+									{% if values['data_source_con_check'] != 'Connected'  and values['data_source_con_check'] != '....' %}
+											<strong style="color:red;">Connection is failed! .</strong>
+									{% endif %}
+									{% if values['data_source_con_check'] == '....' %}
+										{% if values['s_c_p_connection_check']['deliveries'] == 'True' %}
+											<strong style="color:green;">Deliveries Data Source is detected</strong>
+										{% endif %}
+									{% endif %}
+								</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;">Delivery Data Source</strong></h5>
+											<h6 class="card-subtitle text-muted">
+												<div class="row">
+													- Each session ID (Order ID) must be unique. Sessions must cover only purchase transactions.
+												</div>
+												<div class="row">
+													- session IDs must be matched with Session IDs on Sessions Data Source.
+												</div>
+												<div class="row">
+													- Delivery Date and Session ID columns are required but prepare date, return date latitude longitude are optional.
+												</div>
+												<div class="row">
+													- Latitude and Longitude are the customer of the location coordinates and they are optional.
+												</div>
+											</h6>
+										</div>
+										<div class="card-body">
+											{% if values['es_connection'] != '....' %}
+												<div class="mb-4 col-md-12">
+													{% if values['es_connection']['url'] == 'None' %}
+														<td>  <a href="{{ 'http://'+ values['es_connection']['host'] + ':' +values['es_connection']['port'] }}" target="_blank">{{ 'http://'+ values['es_connection']['host'] + ':' +values['es_connection']['port'] }}</a></td>
+													{% endif %}
+												</div>
+
+												<div class="mb-4 col-md-12">
+													<label class="form-label mb-2" for="input_name">Delivery Connection Tag Name</label>
+													<input name="deliveries_data_source_tag" type="text" class="form-control mb-3" id="input_name" placeholder="delivery connection" required>
+												</div>
+												<table class="table table-striped">
+													<thead>
+														<tr>
+														<th  style="width:16%;">
+															order ID
+														</th>
+														<th style="width:15%;">
+															delivery date
+														</th>
+
+														<th style="width:15%;">
+															prepare date
+														</th>
+
+														<th style="width:15%;">
+															return date
+														</th>
+
+														<th style="width:15%;">
+															latitude
+														</th>
+														<th style="width:15%;">
+															longitude
+														</th>
+														</tr>
+													</thead>
+													<tbody>
+														<tr>
+															<td> <input name="order_id_2" type="text" class="form-control mb-3" id="order_id_2" required> </td>
+															<td> <input name="delivery_date" type="text" class="form-control mb-3" id="delivery_date" required> </td>
+															<td> <input name="prepare_date" type="text" class="form-control mb-3" id="prepare_date"> </td>
+															<td> <input name="return_date" type="text" class="form-control mb-3" id="return_date"> </td>
+															<td> <input name="latitude" type="text" class="form-control mb-3" id="latitude"> </td>
+															<td> <input name="longitude" type="text" class="form-control mb-3" id="longitude"> </td>
+														</tr>
+
+													</tbody>
+												</table>
+
+
+												<div class="row">
+													<div class="col-md-6">
+														<label class="form-label" for="inputState">data source</label>
+														<select size="3" name="deliveries_data_source_type" id="products_data_source_type"  data-show-content="true" class="form-control mb-3" required>
+															<option>postgresql</option>
+															<option>google big query</option>
+															<option>aws redshift</option>
+															<option selected>csv</option>
+															<option>parquet</option>
+															<option>hdf5</option>
+														</select>
+														<label class="form-label">Data Query or Path</label>
+														<textarea name="deliveries_data_query_path" class="form-control mb-3" placeholder="SELECT * FROM table .... / raw_data.csv" rows="10"></textarea>
+													</div>
+													<div class="col-md-6">
+														<label class="form-label" for="inputPasswordNew2">user</label>
+														<input name="deliveries_user" type="text" class="form-control mb-3" id="products_user">
+														<label class="form-label" for="inputPasswordNew">password</label>
+														<input name="deliveries_password" type="password" class="form-control mb-3" id="inputPasswordNew">
+														<label class="form-label" for="inputPasswordNew2">port</label>
+														<input name="deliveries_port" type="text" class="form-control mb-3" id="deliveries_port">
+														<label class="form-label" for="inputPasswordNew2">host</label>
+														<input name="deliveries_host" type="text" class="form-control mb-3" id="deliveries_host">
+														<label class="form-label" for="inputPasswordNew2">database</label>
+														<input name="deliveries_db" type="text" class="form-control" id="deliveries_db">
+													</div>
+												</div>
+												<button name="connect" value="deliveries" type="submit" class="btn btn-primary" >Connect</button>
+											{% endif %}
+
+											{% if values['es_connection'] == '....' %}
+												<strong style="color:red;">Please add ElasticSearch Connection</strong>
+											{% 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 %}

customeranalytics/web/app/home/templates/add-data-product.html

@@ -0,0 +1,177 @@
+{% extends "layouts/base.html" %}
+
+{% block title %} basket data 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">Baskets</h5>
+			<div class="col-md-12">
+				<form method="POST">
+					<div class="card">
+						<div class="card-header">
+							<h5 class="card-title"><strong>Sessions of Baskets Data Source</strong> </h5>
+							<div class="row">
+								<h6 class="card-subtitle text-muted mb-3">
+									<strong style="color:green;"> Baskets : </strong> The basket data source is the sub-data source for the sessions.
+									This data source is merging with Sessions data source and storing into the ElasticSearch
+									If any session has a basket, the Order ID of the session of basket information must be included at basket data source.
+									Basket Data Source is optional.
+									Product Analytics Dashboard and A/B Test for Products are calculated related to basket datasource.
+									If here is action in the Session data source related to basket creation,
+									'Add-to-basket' action will have True value while there is a created basket.
+								</h6>
+							</div>
+
+							<div class="row ">
+								<h6 class="card-subtitle text-muted">
+									{% if values['data_source_con_check'] == 'Connected' %}
+										{% if values['s_c_p_connection_check']['products'] == 'False' %}
+											<strong style="color:green;">There isn`t any connection detected for Baskets.</strong>
+										{% endif %}
+										{% if values['s_c_p_connection_check']['baskets'] == 'True' %}
+											<strong style="color:green;">Baskets Data Source is successfully created.</strong>
+										{% endif %}
+									{% endif %}
+									{% if values['data_source_con_check'] != 'Connected'  and values['data_source_con_check'] != '....' %}
+											<strong style="color:red;">Connection is failed! .</strong>
+									{% endif %}
+									{% if values['data_source_con_check'] == '....' %}
+										{% if values['s_c_p_connection_check']['baskets'] == 'True' %}
+											<strong style="color:green;">Baskets Data Source is detected</strong>
+										{% endif %}
+									{% endif %}
+								</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;">Basket Data Source</strong></h5>
+											<h6 class="card-subtitle text-muted">
+												<div class="row">
+													- Each session ID (Order ID) must be unique. Sessions must cover both non-purchased and purchase transactions.
+												</div>
+												<div class="row">
+													- session IDs must be matched with Session IDs on Sessions Data Source.
+												</div>
+												<div class="row">
+													- Products are assigned as product IDs or product names.
+												</div>
+												<div class="row">
+													- Price will be the Amount * Price of the product.
+												</div>
+											</h6>
+										</div>
+										<div class="card-body">
+											{% if values['es_connection'] != '....' %}
+												<div class="mb-4 col-md-12">
+													{% if values['es_connection']['url'] == 'None' %}
+														<td>  <a href="{{ 'http://'+ values['es_connection']['host'] + ':' +values['es_connection']['port'] }}" target="_blank">{{ 'http://'+ values['es_connection']['host'] + ':' +values['es_connection']['port'] }}</a></td>
+													{% endif %}
+												</div>
+
+												<div class="mb-4 col-md-12">
+													<label class="form-label mb-2" for="input_name">Basket Connection Tag Name</label>
+													<input name="products_data_source_tag" type="text" class="form-control mb-3" id="input_name" placeholder="main_session connection" required>
+												</div>
+												<table class="table table-striped">
+													<thead>
+														<tr>
+														<th  style="width:16%;">
+															order ID
+														</th>
+														<th style="width:15%;">
+															product
+														</th>
+
+														<th style="width:15%;">
+															price
+														</th>
+
+														<th style="width:15%;">
+															category
+														</th>
+														</tr>
+													</thead>
+													<tbody>
+														<tr>
+															<td> <input name="order_id" type="text" class="form-control mb-3" id="order_id" required> </td>
+															<td> <input name="product" type="text" class="form-control mb-3" id="product" required> </td>
+															<td> <input name="price" type="text" class="form-control mb-3" id="price" required> </td>
+															<td> <input name="category" type="text" class="form-control mb-3" id="category" required> </td>
+														</tr>
+
+													</tbody>
+												</table>
+
+
+												<div class="row">
+													<div class="col-md-6">
+														<label class="form-label" for="inputState">data source</label>
+														<select size="3" name="products_data_source_type" id="products_data_source_type"  data-show-content="true" class="form-control mb-3" required>
+															<option>postgresql</option>
+															<option>google big query</option>
+															<option>aws redshift</option>
+															<option selected>csv</option>
+															<option>parquet</option>
+															<option>hdf5</option>
+														</select>
+														<label class="form-label">Data Query or Path</label>
+														<textarea name="products_data_query_path" class="form-control mb-3" placeholder="SELECT * FROM table .... / raw_data.csv" rows="10"></textarea>
+													</div>
+													<div class="col-md-6">
+														<label class="form-label" for="inputPasswordNew2">user</label>
+														<input name="products_user" type="text" class="form-control mb-3" id="products_user">
+														<label class="form-label" for="inputPasswordNew">password</label>
+														<input name="products_password" type="password" class="form-control mb-3" id="inputPasswordNew">
+														<label class="form-label" for="inputPasswordNew2">port</label>
+														<input name="products_port" type="text" class="form-control mb-3" id="products_port">
+														<label class="form-label" for="inputPasswordNew2">host</label>
+														<input name="products_host" type="text" class="form-control mb-3" id="products_host">
+														<label class="form-label" for="inputPasswordNew2">database</label>
+														<input name="products_db" type="text" class="form-control" id="products_db">
+													</div>
+												</div>
+												<button name="connect" value="products" type="submit" class="btn btn-primary" >Connect</button>
+											{% endif %}
+
+											{% if values['es_connection'] == '....' %}
+												<strong style="color:red;">Please add ElasticSearch Connection</strong>
+											{% 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 %}