Update litepicker and add ranges plugin

Fix litepicker colors

Fix litepicker event

Add custom ranges to litepicker

Fix code style

Remove some date ranges

Fix date ranges

Replace yesterday date range with last 3 days

Update packages

Improve litepicker box shadow

package-lock.json

@@ -1,12 +1,153 @@
 {
   "name": "shynet",
+  "lockfileVersion": 2,
   "requires": true,
-  "lockfileVersion": 1,
+  "packages": {
+    "": {
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.1",
+        "a17t": "^0.5.1",
+        "apexcharts": "^3.24.0",
+        "flag-icon-css": "^3.5.0",
+        "inter-ui": "^3.15.0",
+        "litepicker": "^2.0.11"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
+      "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/a17t": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/a17t/-/a17t-0.5.1.tgz",
+      "integrity": "sha512-peIPrH9eDiu49LLzLlSTFFrXj6WLlEX3TRsUkqyyOHi/i58ilJ/eERnu7AcswXhuCBx+/2W9EUuHM+8iAq4ipg=="
+    },
+    "node_modules/apexcharts": {
+      "version": "3.26.2",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.2.tgz",
+      "integrity": "sha512-CD7bad4ygwc9rs9vOQDDagUcoJ1mcc9BwNSiQB14l6jiZBCQKrXxnG4I1ZjJ2MIel/Y5GmsJFs8HTcZBqpe/Ew==",
+      "dependencies": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/apexcharts/apexcharts.js?sponsor=1"
+      }
+    },
+    "node_modules/flag-icon-css": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-3.5.0.tgz",
+      "integrity": "sha512-pgJnJLrtb0tcDgU1fzGaQXmR8h++nXvILJ+r5SmOXaaL/2pocunQo2a8TAXhjQnBpRLPtZ1KCz/TYpqeNuE2ew=="
+    },
+    "node_modules/inter-ui": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.18.1.tgz",
+      "integrity": "sha512-W3LnAirp6a1ixpAHZwr9gH52KlOQOAp0oqbmIoGi2dAIlcIB7auJgLr9XFHUzYy2FoZ0Nf7aPe/nHMZB4/Zvdg=="
+    },
+    "node_modules/litepicker": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.11.tgz",
+      "integrity": "sha512-7MECMp2EDGIYDIz9QT24t9hWpgBD9JD57ZdDrbffNMGfbw0JVhBhvlYsyaIUuYhywtLvgmI5lfulM7XF2HLEkg=="
+    },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    }
+  },
   "dependencies": {
     "@fortawesome/fontawesome-free": {
-      "version": "5.15.1",
+      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
-      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
+      "integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w=="
     },
     "a17t": {
       "version": "0.5.1",
@@ -14,9 +155,9 @@
       "integrity": "sha512-peIPrH9eDiu49LLzLlSTFFrXj6WLlEX3TRsUkqyyOHi/i58ilJ/eERnu7AcswXhuCBx+/2W9EUuHM+8iAq4ipg=="
     },
     "apexcharts": {
-      "version": "3.24.0",
+      "version": "3.26.2",
-      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.24.0.tgz",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.2.tgz",
-      "integrity": "sha512-iT6czJCIVrmAtrcO90MZTQCvC+xi6R6Acf0jNH/d40FVTtCfcqECuKIh5iAMyOTtgUb7+fQ8rbadH2bm1kbL9Q==",
+      "integrity": "sha512-CD7bad4ygwc9rs9vOQDDagUcoJ1mcc9BwNSiQB14l6jiZBCQKrXxnG4I1ZjJ2MIel/Y5GmsJFs8HTcZBqpe/Ew==",
       "requires": {
         "svg.draggable.js": "^2.2.2",
         "svg.easing.js": "^2.0.0",
@@ -32,14 +173,14 @@
       "integrity": "sha512-pgJnJLrtb0tcDgU1fzGaQXmR8h++nXvILJ+r5SmOXaaL/2pocunQo2a8TAXhjQnBpRLPtZ1KCz/TYpqeNuE2ew=="
     },
     "inter-ui": {
-      "version": "3.15.0",
+      "version": "3.18.1",
-      "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.18.1.tgz",
-      "integrity": "sha512-6v0WK8FHkVYbNQZ7L9O5tP8280pgTBR9ydxqYwssMuUH6SZO70ZFK/NQ1Ob8nNmOOzpUJAzT0WE73ty96z1tAQ=="
+      "integrity": "sha512-W3LnAirp6a1ixpAHZwr9gH52KlOQOAp0oqbmIoGi2dAIlcIB7auJgLr9XFHUzYy2FoZ0Nf7aPe/nHMZB4/Zvdg=="
     },
     "litepicker": {
-      "version": "1.5.7",
+      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-1.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.11.tgz",
-      "integrity": "sha512-4L2ZcF8iqCE4A/qGWS3PbdFplZR1g751x5SsZ87zCRZ4LQN1Fgezarnvqi0eHk/kDWK7Qx0HZ9Y4bNznJMF1xA=="
+      "integrity": "sha512-7MECMp2EDGIYDIz9QT24t9hWpgBD9JD57ZdDrbffNMGfbw0JVhBhvlYsyaIUuYhywtLvgmI5lfulM7XF2HLEkg=="
     },
     "svg.draggable.js": {
       "version": "2.2.2",

package.json

@@ -22,6 +22,6 @@
     "apexcharts": "^3.24.0",
     "flag-icon-css": "^3.5.0",
     "inter-ui": "^3.15.0",
-    "litepicker": "^1.5.7"
+    "litepicker": "^2.0.11"
   }
 }

shynet/dashboard/mixins.py

@@ -1,12 +1,11 @@
 from datetime import datetime, time
-from urllib.parse import urlparse
 
 from django.utils import timezone
 
 
 class DateRangeMixin:
     def get_start_date(self):
-        if self.request.GET.get("startDate") != None:
+        if self.request.GET.get("startDate") is not None:
             found_time = timezone.datetime.strptime(
                 self.request.GET.get("startDate"), "%Y-%m-%d"
             )
@@ -15,7 +14,7 @@ class DateRangeMixin:
             return timezone.now() - timezone.timedelta(days=30)
 
     def get_end_date(self):
-        if self.request.GET.get("endDate") != None:
+        if self.request.GET.get("endDate") is not None:
             found_time = timezone.datetime.strptime(
                 self.request.GET.get("endDate"), "%Y-%m-%d"
             )
@@ -23,8 +22,45 @@ class DateRangeMixin:
         else:
             return timezone.now()
 
+    def get_date_ranges(self):
+        now = timezone.now()
+        return [
+            {
+                'name': 'Last 3 days',
+                'start': now - timezone.timedelta(days=2),
+                'end': now,
+            },
+            {
+                'name': 'Last 30 days',
+                'start': now - timezone.timedelta(days=29),
+                'end': now,
+            },
+            {
+                'name': 'Last 90 days',
+                'start': now - timezone.timedelta(days=89),
+                'end': now,
+            },
+            {
+                'name': 'This month',
+                'start': now.replace(day=1),
+                'end': now,
+            },
+            {
+                'name': 'Last month',
+                'start': now.replace(day=1, month=now.month - 1),
+                'end': now.replace(day=1, month=now.month) - timezone.timedelta(days=1),
+            },
+            {
+                'name': 'This year',
+                'start': now.replace(day=1, month=1),
+                'end': now,
+            },
+        ]
+
     def get_context_data(self, **kwargs):
         data = super().get_context_data(**kwargs)
         data["start_date"] = self.get_start_date()
         data["end_date"] = self.get_end_date()
+        data["date_ranges"] = self.get_date_ranges()
+
         return data

shynet/dashboard/templates/base.html

@@ -10,7 +10,10 @@
   {% include 'a17t/includes/head.html' %}
   <link rel="icon" type="image/png" href="{% static 'dashboard/images/icon.png' %}">
   <script src="{% static 'apexcharts/dist/apexcharts.min.js'%}"></script>
-  <script src="{% static 'litepicker/dist/js/main.js' %}"></script>
+  <script src="{% static 'litepicker/dist/nocss/litepicker.js' %}"></script>
+  <script src="{% static 'litepicker/dist/plugins/ranges.js' %}"></script>
+  <link rel="stylesheet" href="{% static 'litepicker/dist/css/litepicker.css' %}">
+
   <script src="{% static 'dashboard/js/base.js' %}"></script>
   <link rel="stylesheet" href="{% static 'dashboard/css/global.css' %}">
   <link rel="stylesheet" href="{% static 'flag-icon-css/css/flag-icon.min.css' %}">

shynet/dashboard/templates/dashboard/includes/date_range.html

@@ -5,29 +5,45 @@
 <input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral bg-neutral-000 cursor-pointer w-auto" readonly>
 <style>
     :root {
-        --litepickerMonthButtonHover: var(--color-urge);
+        --litepicker-button-prev-month-color-hover: var(--color-urge);
-        --litepickerDayColorHover: var(--color-urge);
+        --litepicker-button-next-month-color-hover: var(--color-urge);
-        --litepickerDayIsTodayColor: var(--color-urge);
+        --litepicker-day-color-hover: var(--color-urge);
-        --litepickerDayIsInRange: var(--color-urge-normal-fill);
+        --litepicker-is-today-color: var(--color-urge);
-        --litepickerDayIsStartBg: var(--color-urge);
+        --litepicker-is-in-range-color: var(--color-urge-normal-fill);
-        --litepickerDayIsEndBg: var(--color-urge);
+        --litepicker-is-start-color-bg: var(--color-urge);
-        --litepickerButtonApplyBg: var(--color-urge);
+        --litepicker-is-end-color-bg: var(--color-urge);
+        --litepicker-button-apply-color-bg: var(--color-urge);
+    }
+
+    .litepicker .container__predefined-ranges, .litepicker .container__months {
+        box-shadow: var(--fallback-box-shadow-normal) !important;
     }
 </style>
 <script>
     var picker = new Litepicker({
         element: document.getElementById('rangePicker'),
+        plugins: ['ranges'],
         singleMode: false,
         format: "MMM DD 'YY",
         maxDate: new Date(),
         startDate: Date.parse(document.getElementById("startDate").getAttribute("value")),
         endDate: Date.parse(document.getElementById("endDate").getAttribute("value")),
-        onSelect: function (startDate, endDate) {
+        ranges: {
+            customRanges: {
+                {% for date_range in date_ranges %}
+                    '{{ date_range.name }}': [
+                        new Date('{{ date_range.start.isoformat }}'),
+                        new Date('{{ date_range.end.isoformat }}')
+                    ],
+                {% endfor %}
+            }
+        }
+    });
+    picker.on('selected', (startDate, endDate) => {
         document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
             "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
         document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
             (endDate.getMonth() + 1) + "-" + endDate.getDate());
         document.getElementById("datePicker").submit();
-        }
     });
 </script>

shynet/shynet/settings.py

@@ -301,7 +301,11 @@ NPM_ROOT_PATH = "../"
 NPM_FILE_PATTERNS = {
     "a17t": [os.path.join("dist", "a17t.css"), os.path.join("dist", "tailwind.css")],
     "apexcharts": [os.path.join("dist", "apexcharts.min.js")],
-    "litepicker": [os.path.join("dist", "js", "main.js")],
+    "litepicker": [
+        os.path.join("dist", "nocss", "litepicker.js"),
+        os.path.join("dist", "css", "litepicker.css"),
+        os.path.join("dist", "plugins", "ranges.js"),
+    ],
     "turbolinks": [os.path.join("dist", "turbolinks.js")],
     "stimulus": [os.path.join("dist", "stimulus.umd.js")],
     "inter-ui": [os.path.join("Inter (web)", "*")],