Date (locales) improvement

* Date picker range * Chart first day of the week
crypto-red · Jul 9, 2021 · 06e6139 · 06e6139
1 parent 01ebc1e
commit 06e6139
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 11 deletions.
diff --git a/404.html b/404.html
@@ -60,7 +60,7 @@
 
     <body>
         <div id="app"></div>
-        <script src="/client.min.js?v=12.16"></script>
+        <script src="/client.min.js?v=12.17"></script>
     </body>
 
 </html>
diff --git a/client.min.js b/client.min.js
diff --git a/index.html b/index.html
@@ -60,6 +60,6 @@
 
     <body>
         <div id="app"></div>
-        <script src="/client.min.js?v=12.16"></script>
+        <script src="/client.min.js?v=12.17"></script>
     </body>
 </html>
diff --git a/service-worker.js b/service-worker.js
@@ -1,4 +1,4 @@
-var CACHE = "network-or-cache-v12.16";
+var CACHE = "network-or-cache-v12.17";
 
 // On install, cache some resource.
 self.addEventListener("install", function(evt) {
@@ -10,7 +10,7 @@ self.addEventListener("install", function(evt) {
     cache.addAll([
       "/",
       "/404.html",
-      "/client.min.js?v=12.16",
+      "/client.min.js?v=12.17",
       "src/fonts/Cantarell-Regular.ttf",
       "src/fonts/OpenSans-Regular.ttf",
       "src/fonts/Saira-Regular.ttf",

diff --git a/src/js/components/CoinChartsChart.js b/src/js/components/CoinChartsChart.js
@@ -14,7 +14,9 @@ import Skeleton from "@material-ui/lab/Skeleton";
 import ChartDot from "../icons/ChartDot";
 
 import { scaleTime } from "d3-scale";
-import {utcHour, utcDay, utcMonth, utcWeek, utcYear} from "d3-time";
+import {utcHour, utcDay, utcMonth, utcWeek, utcYear, utcMonday, utcFriday, utcSaturday, utcSunday} from "d3-time";
+
+import { FIRST_WEEK_DAY_BY_COUNTRY } from "../utils/constants";
 
 import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from "recharts";
 import price_formatter from "../utils/price-formatter";
@@ -247,7 +249,8 @@ class CoinChartsChart extends React.Component {
 
     _get_coin_chart_data_ticks = (graph_data, coin_chart_data_time) => {
 
-        if (!graph_data || !graph_data.length ) {return [];}
+        const { selected_locales_code } = this.state;
+        if (!graph_data || !graph_data.length || !selected_locales_code) {return [];}
 
         const domain = [new Date(+graph_data[0].date), new Date(+graph_data[graph_data.length - 1].date)];
         const scale = scaleTime().domain(domain).range([0, 1]);
@@ -267,7 +270,25 @@ class CoinChartsChart extends React.Component {
                 return ticks.map(entry => +entry);
             case "30":
 
-                ticks = scale.ticks(utcWeek, 1);
+                let utc_day = utcWeek;
+
+                switch(FIRST_WEEK_DAY_BY_COUNTRY[selected_locales_code.split("-")[1] || "US"]) {
+
+                    case "mon":
+                        utc_day = utcMonday;
+                        break;
+                    case "fri":
+                        utc_day = utcFriday;
+                        break;
+                    case "sat":
+                        utc_day = utcSaturday;
+                        break;
+                    case "sun":
+                        utc_day = utcSunday;
+                        break;
+                }
+
+                ticks = scale.ticks(utc_day, 1);
                 return ticks.map(entry => +entry);
             case "180":
 

diff --git a/src/js/components/CoinChartsConvert.js b/src/js/components/CoinChartsConvert.js
@@ -43,6 +43,7 @@ class CoinChartsConvert extends React.Component {
             selected_locales_code: props.selected_locales_code,
             selected_currency: props.selected_currency,
             coin_data: props.coin_data,
+            _min_date: new Date(),
             _selected_date: new Date(),
             _cryptocurrency_input_value: 1,
             _selected_cryptocurrency_price: 0,
@@ -73,6 +74,8 @@ class CoinChartsConvert extends React.Component {
 
         if(!error && results !== null) {
 
+            const _min_date = results.prices[0].date;
+
             for (let i = 0; i < results.prices.length; i++) {
 
                 const result = results.prices[i];
@@ -84,7 +87,7 @@ class CoinChartsConvert extends React.Component {
                 }
             }
 
-            this.setState({_selected_cryptocurrency_price}, () => {this._handle_cryptocurrency_input_value_change(null)});
+            this.setState({_min_date, _selected_cryptocurrency_price}, () => {this._handle_cryptocurrency_input_value_change(null)});
         }
     };
 
@@ -127,7 +130,7 @@ class CoinChartsConvert extends React.Component {
     render() {
 
         const { classes, selected_currency, _selected_date, coin_data, coin_id } = this.state;
-        const { _cryptocurrency_input_value, _fiat_input_value } = this.state;
+        const { _cryptocurrency_input_value, _fiat_input_value, _min_date } = this.state;
 
         const date_format = this._get_date_format();
 
@@ -155,6 +158,9 @@ class CoinChartsConvert extends React.Component {
                             <KeyboardDatePicker
                                 cancelLabel={t("words.cancel")}
                                 okLabel={t("words.ok")}
+                                minDate={_min_date}
+                                maxDate={Date.now()}
+                                disableFuture={true}
                                 invalidDateMessage={t("sentences.invalid date message")}
                                 className={classes.noTopMargin}
                                 margin="normal"

diff --git a/src/js/utils/constants.js b/src/js/utils/constants.js
@@ -189,11 +189,166 @@ const CURRENCY_COUNTRIES = {
     ZAR: ["ZA"],
 };
 
+const FIRST_WEEK_DAY_BY_COUNTRY = {
+    "001": "mon",
+    "AD": "mon",
+    "AE": "sat",
+    "AF": "sat",
+    "AG": "sun",
+    "AI": "mon",
+    "AL": "mon",
+    "AM": "mon",
+    "AN": "mon",
+    "AR": "mon",
+    "AS": "sun",
+    "AT": "mon",
+    "AU": "sun",
+    "AX": "mon",
+    "AZ": "mon",
+    "BA": "mon",
+    "BD": "sun",
+    "BE": "mon",
+    "BG": "mon",
+    "BH": "sat",
+    "BM": "mon",
+    "BN": "mon",
+    "BR": "sun",
+    "BS": "sun",
+    "BT": "sun",
+    "BW": "sun",
+    "BY": "mon",
+    "BZ": "sun",
+    "CA": "sun",
+    "CH": "mon",
+    "CL": "mon",
+    "CM": "mon",
+    "CN": "sun",
+    "CO": "sun",
+    "CR": "mon",
+    "CY": "mon",
+    "CZ": "mon",
+    "DE": "mon",
+    "DJ": "sat",
+    "DK": "mon",
+    "DM": "sun",
+    "DO": "sun",
+    "DZ": "sat",
+    "EC": "mon",
+    "EE": "mon",
+    "EG": "sat",
+    "ES": "mon",
+    "ET": "sun",
+    "FI": "mon",
+    "FJ": "mon",
+    "FO": "mon",
+    "FR": "mon",
+    "GB": "mon",
+    "GB-alt-variant": "sun",
+    "GE": "mon",
+    "GF": "mon",
+    "GP": "mon",
+    "GR": "mon",
+    "GT": "sun",
+    "GU": "sun",
+    "HK": "sun",
+    "HN": "sun",
+    "HR": "mon",
+    "HU": "mon",
+    "ID": "sun",
+    "IE": "mon",
+    "IL": "sun",
+    "IN": "sun",
+    "IQ": "sat",
+    "IR": "sat",
+    "IS": "mon",
+    "IT": "mon",
+    "JM": "sun",
+    "JO": "sat",
+    "JP": "sun",
+    "KE": "sun",
+    "KG": "mon",
+    "KH": "sun",
+    "KR": "sun",
+    "KW": "sat",
+    "KZ": "mon",
+    "LA": "sun",
+    "LB": "mon",
+    "LI": "mon",
+    "LK": "mon",
+    "LT": "mon",
+    "LU": "mon",
+    "LV": "mon",
+    "LY": "sat",
+    "MC": "mon",
+    "MD": "mon",
+    "ME": "mon",
+    "MH": "sun",
+    "MK": "mon",
+    "MM": "sun",
+    "MN": "mon",
+    "MO": "sun",
+    "MQ": "mon",
+    "MT": "sun",
+    "MV": "fri",
+    "MX": "sun",
+    "MY": "mon",
+    "MZ": "sun",
+    "NI": "sun",
+    "NL": "mon",
+    "NO": "mon",
+    "NP": "sun",
+    "NZ": "mon",
+    "OM": "sat",
+    "PA": "sun",
+    "PE": "sun",
+    "PH": "sun",
+    "PK": "sun",
+    "PL": "mon",
+    "PR": "sun",
+    "PT": "sun",
+    "PY": "sun",
+    "QA": "sat",
+    "RE": "mon",
+    "RO": "mon",
+    "RS": "mon",
+    "RU": "mon",
+    "SA": "sun",
+    "SD": "sat",
+    "SE": "mon",
+    "SG": "sun",
+    "SI": "mon",
+    "SK": "mon",
+    "SM": "mon",
+    "SV": "sun",
+    "SY": "sat",
+    "TH": "sun",
+    "TJ": "mon",
+    "TM": "mon",
+    "TR": "mon",
+    "TT": "sun",
+    "TW": "sun",
+    "UA": "mon",
+    "UM": "sun",
+    "US": "sun",
+    "UY": "mon",
+    "UZ": "mon",
+    "VA": "mon",
+    "VE": "sun",
+    "VI": "sun",
+    "VN": "mon",
+    "WS": "sun",
+    "XK": "mon",
+    "YE": "sun",
+    "ZA": "sun",
+    "ZW": "sun"
+}
+
 module.exports = {
     LOCALE_MAP: LOCALE_MAP,
     HISTORY: HISTORY,
     PAGE_ROUTES: PAGE_ROUTES,
     COINS: COINS,
     LOCALES: LOCALES,
-    CURRENCY_COUNTRIES: CURRENCY_COUNTRIES
+    CURRENCY_COUNTRIES: CURRENCY_COUNTRIES,
+    FIRST_WEEK_DAY_BY_COUNTRY: FIRST_WEEK_DAY_BY_COUNTRY,
 };