Chronos: Update Chronos install guide form's js and css file. (#5360)

* Update chronos_installation_guide.css

* Update chronos_installation_guide.js

* Update chronos.md

* Change border color

* Deleted test text in '2. Install' title

I changed the title in last commit to check if my build in readthedoc web works fine. Now I delete it.

* Update button css selector

Revised the button selector to avoid influencing other buttons' style on the web.

* Update #cmd height

* Update as pull-request comment required.

1, disable other options when users choose windows, and guide users to https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html in "Install CMD"
2, guide users to https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend in "Install CMD" when tensorflow is chosen.
3, guide users to https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly in "install CMD" when docker is chosen.

* Update css file to meet the comment requirements

Make the disabled items' background darker to have a better vis experience. 
Have a larger fontsize.

* Update js file to meet the comment requirement.

 Make the disabled items' background darker to have a better vis experience.

* Update border css settings.

Changed table border settings since last version looks not good.

* Change pmdarima to ARIMA

* Update visuals.

The button now has a hovering style, indicating the user that it can be clicked.

docs/readthedocs/source/_static/css/chronos_installation_guide.css

@@ -1,29 +1,26 @@
 /* Border styles */
-#table-1 thead, #table-1 tr, #table-1 td  {
+#table-1 tr, #table-1 td, #table-1 th  {
-    border-top-width: 1px;
+    border-width: 2px;
-    border-top-style: solid;
+    border-style: solid;
-    border-top-color: rgb(150, 200, 230);
+    border-color: white ;
+    padding: 5px;
     }
+
     #table-1 {
-    border-bottom-width: 1px;
+    border-bottom-width: 0px;
-    border-bottom-style: solid;
-    border-bottom-color: rgb(150, 200, 230);
     }
     
     /* Padding and font style */
     #table-1 td, #table-1 th {
-    padding: 5px 10px;
+    font-size: 16px;
-    font-size: 12px;
     font-family: Verdana;
     color: rgb(15, 24, 33);
     }
     
     /* Alternating background colors */
-    #table-1 tr:nth-child(even) {
+    #table-1 tr, td{
-    background: rgb(150, 200, 230)
+        background-color: rgb(240, 241, 245);
-    }
+        height: 30px;
-    #table-1 tr:nth-child(odd) {
-    background: rgb(150, 200, 230)
     }
     
     .displayed {
@@ -31,3 +28,24 @@
         text-align: center;
         margin-left: auto;
         margin-right: auto }
+
+    /* setting div id=cmd width */
+    #cmd {
+        width: 450px;
+        height: 35px;
+        overflow:unset;
+    }
+
+    td, th {
+        text-align: center;
+    }
+
+    #table-1 button {
+        border-color: transparent;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+        font-size: 16px;
+    }
+

docs/readthedocs/source/_static/js/chronos_installation_guide.js

@@ -12,13 +12,36 @@ var hardware="singlenode";
 var automl="automlno"
 
 
+
 function set_color(id){
-   $("#"+id).css("background-color","yellow");
+   $("#"+id).parent().css("background-color","rgb(74, 106, 237)");
+   $("#"+id).css("color","white");
+   $("#"+id).addClass("isset");
 }
 
 function reset_color(list){
     for (btn in list){
-        $("#"+list[btn]).css("background-color","buttonface");
+        $("#"+list[btn]).parent().css("background-color","transparent");
+        $("#"+list[btn]).css("color","black");
+        $("#"+list[btn]).removeClass("isset");
+    }
+}
+
+function disable(list){
+    for(btn in list){
+        $("#"+list[btn]).css("text-decoration","line-through");
+        $("#"+list[btn]).attr("disabled","true");
+    }
+    reset_color(list);
+    for(btn in list){
+        $("#"+list[btn]).parent().css("background-color","rgb(133, 133, 133)");
+    }
+}
+
+function enable(list){
+    for(btn in list){
+        $("#"+list[btn]).css("text-decoration","none");
+        $("#"+list[btn]).attr("disabled",false);
     }
 }
 
@@ -37,14 +60,33 @@ function refresh_cmd(){
     set_color(automl);
 
     var cmd = "NA";
-    if(ai=="pytorch"){
+
     if(way=="docker"){
-            cmd="Please refer to docker installation guide.";
+        disable(ais);
+        disable(releases);
+        disable(oss);
+        disable(hardwares);
+        disable(automls);
+        cmd="Please refer to <a href=' https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly'>docker installation guide.</a>";
+    }else if(os=="win"){
+        disable(ais);
+        disable(releases);
+        disable(ways);
+        disable(hardwares);
+        disable(automls);
+        cmd="Please refer to <a href='https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html'>windows_guide.</a>";
     }else{
-            if(os=="win"){
+        enable(ais);
-                cmd="Please refer to windows installation guide.";
+        enable(releases);
-            }else{
+        enable(oss);
-                if(way=="pypi"){
+        enable(ways);
+        enable(hardwares);
+        enable(automls);
+    }
+
+
+    if(ai=="pytorch"){
+        if(way=="pypi"&&os=="linux"){
             if(hardware=="singlenode"){
                 if(automl=="automlno"){
                     if(release=="nightly")
@@ -73,31 +115,15 @@ function refresh_cmd(){
             }
         }
     }
-        }
-    }
     
     if(ai=="tensorflow"){
-        if(way=="docker"){
+        if(way=="pypi"&&os=="linux"){
-            cmd="Please refer to docker installation guide.";
+            cmd="Please refer to <a href=' https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend'>tensorflow installation guide.</a>"
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
-                    cmd="Please refer to tensorflow installation guide."
-                }
-            }
         }
     }
 
     if(ai=="prophet"){
-        if(way=="docker"){
+        if(way=="pypi"&&os=="linux"){
-            cmd="Please refer to docker installation guide.";
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
             if(hardware=="singlenode"){
                 if(automl=="automlno"){
                     if(release=="nightly")
@@ -126,17 +152,9 @@ function refresh_cmd(){
             }
         }
     }
-        }
-    }
 
     if(ai=="pmdarima"){
-        if(way=="docker"){
+        if(way=="pypi"&&os=="linux"){
-            cmd="Please refer to docker installation guide.";
-        }else{
-            if(os=="win"){
-                cmd="Please refer to windows installation guide.";
-            }else{
-                if(way=="pypi"){
             if(hardware=="singlenode"){
                 if(automl=="automlno"){
                     if(release=="nightly")
@@ -165,8 +183,6 @@ function refresh_cmd(){
             }
         }
     }
-        }
-    }
     $("#cmd").html(cmd);
 }
 
@@ -227,4 +243,14 @@ $("button").click(function(){
     }
 });
 
+$("button").hover(function(){
+    $(this).parent().css("background-color","rgb(74, 106, 237)");
+    $(this).css("color","white");
+},function(){
+    if(!$(this).hasClass("isset")){
+        $(this).parent().css("background-color","transparent");
+        $(this).css("color","black");
+    }
+})
+
 refresh_cmd();

docs/readthedocs/source/doc/Chronos/Overview/chronos.md

@@ -29,7 +29,7 @@ You can use _Chronos_ to do:
                 <th colspan="1"><button id="tensorflow"
                         title="Use Tensorflow as deep learning models' backend.">Tensorflow</button></th>
                 <th colspan="1"><button id="prophet" title="For Prophet model.">Prophet</button></th>
-                <th colspan="1"><button id="pmdarima" title="For ARIMA model.">pmdarima</button></th>
+                <th colspan="1"><button id="pmdarima" title="For ARIMA model.">ARIMA</button></th>
             </thead>
             <tbody>