feat: add a slider to choose time range

README.md

@@ -65,14 +65,14 @@ To configure the application, update the `config.py` file in the `src/config` di
 TOP_COMPANIES_COUNT = 10000
 TIMESTAMP_FORMAT = "%Y-%m-%dT%H:%M:%SZ"
 UTC_DIFFERENCE = 8
-NEWS_LOOKBACK_DAYS = 1
+MAX_NEWS_LOOKBACK_DAYS = 60
 CPU_COUNT = 2
 ```
 
 - `TOP_COMPANIES_COUNT`: The number of top companies ranked by market cap to search.
 - `TIMESTAMP_FORMAT`: The format for timestamps used in the application, especially for the news API.
 - `UTC_DIFFERENCE`: The difference in hours between local time and UTC.
-- `NEWS_LOOKBACK_DAYS`: The number of days to look back when fetching news articles.
+- `MAX_NEWS_LOOKBACK_DAYS`: The max number of days to look back when fetching news articles.
 - `CPU_COUNT`: The number of CPUs to be used for multiprocessing.
 
 ## LICENSE

src/app/flask_app.py

@@ -3,7 +3,7 @@
 
 from flask import Flask, render_template, request
 
-from config.config import CPU_COUNT, NEWS_LOOKBACK_DAYS, TIMESTAMP_FORMAT
+from config.config import CPU_COUNT, MAX_NEWS_LOOKBACK_DAYS, TIMESTAMP_FORMAT
 from scrapers import yahoo_news_scraper
 from utils import action, data, sentiment_analyzer, time
 
@@ -74,15 +74,20 @@ def home():
     @app.route("/", methods=["POST"])
     def search():
         input_company = request.form["company"]
+        start_day = int(request.form["start"])
+        end_day = int(request.form["end"])
 
         company_exists, [company_name, ticker_symbol] = (
             data.check_company_exists(input_company)
         )
         if company_exists:
-            current_timestamp = datetime.now().strftime(TIMESTAMP_FORMAT)
+            current_timestamp = (
+                datetime.now() - timedelta(days=start_day)
+            ).strftime(TIMESTAMP_FORMAT)
             start_timestamp = (
-                datetime.now() - timedelta(days=NEWS_LOOKBACK_DAYS)
+                datetime.now() - timedelta(days=end_day)
             ).strftime(TIMESTAMP_FORMAT)
+
             news = yahoo_news_scraper.get_news_URLs(
                 ticker_symbol,
                 start_timestamp=start_timestamp,
@@ -119,6 +124,7 @@ def search():
                 news=news,
                 recommended_action=recommended_action,
                 confidence_index=f"{confidence_index: .3f}",
+                max_news_lookback_days=MAX_NEWS_LOOKBACK_DAYS,
             )
         else:
             return render_template(

src/app/templates/index.html

@@ -8,6 +8,45 @@
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.8.1/nouislider.css"
+    integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const slider = document.getElementById("slider")
+      const formatter = {
+        to: (value) => `${parseInt(value)} day`,
+        from: (value) => {
+          return parseInt(value.replace(' day', ''));
+        }
+      };
+
+      noUiSlider.create(slider, {
+        connect: true,
+        range: {
+          'min': 0,
+          'max': {{ max_news_lookback_days }},
+        },
+        step: 1,
+        {% if company_exists %}
+          start: [{{ start_day }}, {{ end_day }}],
+        {% else %}
+          start: [0, 2],
+        {% endif %}
+        tooltips: [formatter, formatter],
+      });
+
+      slider.noUiSlider.on('update', (values) => {
+        console.log(values);
+        const start = parseInt(values[0]);
+        const end = parseInt(values[1]);
+
+        document.querySelector('form > input#start').value = start;
+        document.querySelector('form > input#end').value = end;
+      });
+    });
+  </script>
 </head>
 
 <body>
@@ -17,9 +56,16 @@ <h1 class="text-center mt-3">Sentiment Analysis on News with Stock Market Insigh
       <div class="col-8">
         <form action="/" method="post" class="input-group">
           <input list="companies" name="company" id="company" class="form-control mx-auto col-4"
+            {% if company_exists %}
+              value="{{ ticker_symbol }}"
+            {% endif %}
             placeholder="Enter company name or ticker symbol">
+          <input name="start" id="start" style="display: none;">
+          <input name="end" id="end" style="display: none;">
           <button type="submit" class="btn btn-primary col-2">Search</button>
         </form>
+        <br/><br/>
+        <div id="slider"></div>
       </div>
     </div>
     <div class="row mt-4">
@@ -222,6 +268,10 @@ <h3 class="col card-title text-center">Stock Prices Chart</h3>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
     integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
     crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.8.1/nouislider.min.js"
+    integrity="sha512-g/feAizmeiVKSwvfW0Xk3ZHZqv5Zs8PEXEBKzL15pM0SevEvoX8eJ4yFWbqakvRj7vtw1Q97bLzEpG2IVWX0Mg=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"></script>
 </body>
 
 </html>

src/config/config.py

@@ -1,5 +1,5 @@
 TOP_COMPANIES_COUNT = 10000
 TIMESTAMP_FORMAT = "%Y-%m-%dT%H:%M:%SZ"
 UTC_DIFFERENCE = 8
-NEWS_LOOKBACK_DAYS = 1
 CPU_COUNT = 2
+MAX_NEWS_LOOKBACK_DAYS = 60