** ****************************************************************************************** *
** MANDRAGORE PLANETE  
*** *******************************************************************************************
#include  "#SYSPATHMS4BI+\zInclude\includeChart.h"
#include  "#SYSPATHMS4BI+\zInclude\IncludeChartExcel.h" 
#include  "#SYSPATHMS4BI+\zInclude\IncludeDisplay.h" 
Array    DataDashGreatLow  Occurs 2 { CHAR Province :25 ;  INTEGER TotalPopul ;   } ;
Array    DataDash      Occurs 40 { CHAR Province :25 ;  INTEGER TotalPopul ;char mapcode:5 ;   } ;
Array    DataDashcity  Occurs 40 { CHAR city :25 ; CHAR latitude:12 ; CHAR longitude:12 ;   } ;

Array    DashFormat  Occurs 40 {  CHAR zlabel :128 ; } ;
Array    DashFormatArrays   Occurs 40 {  CHAR stringVal :128;   };
Array    DashFormatArrays2  Occurs 40 {  CHAR stringVal :128;   } ;

text : LocalServerDB :="#WWWMS4BISERVER+\Ms4BI-DemoUnicodeCube.db"; 
text :   ztable :="ms4TotalPopulByProvinceMapCode",FormOutputchar  ; 
integer : i,y,yes, no, msgsql,TRUE :=1,false:=0,ztotalPopulGreat:=0,ztotalPopulLow :=   9999,zTotalCount;
 
printlog(1);  
 text : LCurrentDir1 , LcurrentDirExcel   ;
Getcurrentdir(LCurrentDir1);
Concatene  LCurrentDir1,"japaneseExampleSmall.xls" into LcurrentDirExcel ; 
 StringReplaceAll(LcurrentDirExcel,"\","/"); 		  
** ************************************************************
** DISPLAY DASHBOARD RWD
** ***********************************************************	
 
BEGIN ** ----------->LOCALPC<----------------------------------------------------------------
     DBconnect{Ms4DB}(LocalServerDB);
	     ViewExist{ms4db}("ViewCount") Return  ( msgsql) ;
		/* 2 return codes : TRUE or FALSE */
 ** msgsql = 1 : Ok , msgsql = 0 Not ok */
 
		if ( msgsql = TRUE) then
 	      Ms4_sql{ms4db} ( " Drop  View  [ViewCount] ");
		  end_if ;

       Ms4_sql{ms4db} ( " Create View  [ViewCount] as  SELECT count(*)  FROM  [%s] ",zTable);
       Ms4_SQLFetch{ms4db}("SELECT  * FROM  [ViewCount] ")
 		 Row_ForEach :
			 
				zTotalCount	:= Column_GetData:1,INTEGER;
	    	 Display "->[Table & count ]  : " ,zTable," : ",zTotalCount;
 
		End_Row_ForEach ;
		Ms4_sql{ms4db} ( " Drop  View  [ViewCount] ");
		 	Perform InsertArray1(void);
				Perform InsertArray2(void);
	  
     	
  	Str_Format(DashFormat[1].zlabel," ##b Nb Province : \n     %i ##b \n\n\n ",ZTotalcount) ;
   
    Clear FormOutputchar; 
	Num_str  DataDashGreatLow[1].totalPopul   to FormOutputchar Format "8.0" ; /* conversion numeric to char */
   	Str_Format(DashFormat[2].zlabel,"###b HIGHEST PROVINCE: %s  ###b    ##b %s  ##b  __(thousand people)__    ",DataDashGreatLow[1].Province,FormOutputchar) ;

    Clear FormOutputchar; 
	Num_str  DataDashGreatLow[2].totalPopul   to FormOutputchar Format "8.0" ; /* conversion numeric to char */
    Str_Format(DashFormat[3].zlabel,"###b LOWEST PROVINCE: %s ###b     ##b %s ##b  __(thousand people)__    ",DataDashGreatLow[2].Province,FormOutputchar) ;

       Display "->END-----[Table & count ]  : " ,zTable," : ",zTotalCount;
** TOP !! for select , dash.. 		 
 integer iTop :=10;
   	Num_str  iTOP   to FormOutputchar   ; /* conversion numeric to char */
    Str_Format(DashFormat[4].zlabel,"##b TOP %i  ##b ",iTOP) ;
	
END ; ** ----------->LOCALPC<----------------------------------------------------------------

** **********************************************************************
**  DRAW : RWD (responsive) : data, charts, UI : button, Icon, Panel, table responsive
** **********************************************************************	
** 12 columns max
** xs (for phones - screens less than 768px wide)
** sm (for tablets - screens equal to or greater than 768px wide)
** md (for small laptops - screens equal to or greater than 992px wide)
** lg (for laptops and desktops - screens equal to or greater than 1200px wide)
** ********************************************************************** 
BEGIN ** ----------->SERVER<----------------------------------------------------------------

Begin_Block_Rwd  :  full_page  
   Setting  :
  	Backgroundcolor : "gray" ;

  printsw (" /w #c  MS4BI by Mandragore Planete  - CHINA - Population by Province (example !) --  %s %s -- #c /w ", date, time) ;   /* marker down : #c = H1 + center */
 
 
 <Rwd_Row + $bg_white  :  1 /* 1 : optional */
        <Rwd_Col :   lg:3 ,"text-right" :  
	            <div $widgetStyle +  $bg_primary :  
 				   <Rwd_Row :  2
				          <Rwd_Col :   xs:4, "text-center" :    <icon : $fa_5x  + $fa_pull_left  +    $fa_podcast    >    >, /* end col xs:4 */
						  <Rwd_Col :   xs:8, "text-right" :    <Text : $Bts_Text_right    , DashFormat[1].zlabel   >  ,
 					   >   /* end col xs:8 */
					>  /* end Row 2 */
				>   /* end div */
 	     >   /* end col lg:3 */
		    
		<Rwd_Col :   lg:3 ,"text-right" :  
	            <div $widget + $bg_navy :
 				   <Rwd_Row :  2
				     <Rwd_Col :   xs:2, "text-center" :   <icon : $fa_5x  + $fa_pull_left +     $fa_long_arrow_up    >  > /* end col xs:4 */
					 <Rwd_Col :   xs:10, "text-right" :   <Text : $Bts_Text_right    , DashFormat[2].zlabel >    >  /* end col xs:8 TOP PROVINCE*/
					> /* end Row 2 */
				>  /* end div */
 	     >  /* end col lg:3 */
		   
		<Rwd_Col :   lg:3 ,"text-right" :  
	         <div $widget + + $bg_red:
 				   <Rwd_Row :  2
				     <Rwd_Col :   xs:2, "text-center" :  <icon : $fa_5x  + $fa_pull_left  +    $fa_long_arrow_down    >   >,/*  end col xs:4 */
					 <Rwd_Col :   xs:10, "text-right" :   <Text : $Bts_Text_right    , DashFormat[3].zlabel >  >, /* end col xs:8 */
					> /* end Row 2 */
			 >  /* end div */
 	     >  /* end col lg:3 */
	   
		<Rwd_Col :   lg:3 ,"text-right" :  
	        <div $widget + $bg_yellow :
 				   <Rwd_Row :  2
				     <Rwd_Col :   xs:4, "text-center" :  <icon : $fa_5x  + $fa_pull_left  +    $fa_soundcloud   >  >,/* end col xs:4 */
					 <Rwd_Col :   xs:8, "text-right" :  <Text : $Bts_Text_right    ," New messages \n     ##b 260 ##b\n\n\n " >  >, /* end col xs:8 LOW province*/
					> /* end Row 2 */
			 > /* end div */
 	     >  /* end col lg:3 */
 	 >; /* end Row 1 */
    
	<Rwd_Row    :  2 /* 2 : optional */
	           <Rwd_Col :   lg:4 ,"text-left" :  
	            <div $widget + $bg_yellow + "no-padding" :
 				      <div  "class='p-m " :
						<Text : ""     , "     ##  Population by Province ##  " > ,
 					   <Text :  ""     , "  --( GEOMAP  ) China--   " > ,
					  >  /* end div */
						FormGoogle : DRAWGEOMAP 
						loadArray DashFormatArrays  { field : "stringVal"  } ,
						begin_sw
						{
						colorAxis: {colors: ['yellow', 'red']},
						displayMode: 'regions',
						region: 'CN',
						resolution: 'provinces'
						}
						end_sw	,
  				>  /* end div */
 			 >  /* end col lg:4 */
 		    <Rwd_Col :   lg:4 ,"text-right" :  
	          <div $widget + $bg_warning + "no-padding" :
 				   <Rwd_Row :  2
				    <Rwd_Col :   xs:2, "text-center" :   <icon : $fa_4x  + $fa_pull_left  +    $fa_location_arrow ,<text :"",DashFormat[4].zlabel >>>,/*  end col xs:4 */
				  	  <Rwd_Col :   xs:8, "text-right" : 
				 	  <div  "class='p-m " :
			 	 	   <Text :  ""     , "  --  China--   " > ,
				 	  >  /* end div */
					  	 DBconnect{Ms4DB}(LocalServerDB),
	                    Ms4_Query{ms4db}  option : into  $MS4DBTMP 
					   (" SELECT  *   from  [ms4TotalPopulByProvince]  order by TOTALThousandPopulationByProvince desc limit %i ",iTop ), ** TOP 10
 				        DBconnect{Ms4DB}($MS4DBTMP),
						FormMorris :	DrawBar ,  title :"" ,TYPE :  $AERAOVERLAY   , FORMAT :"th"  
	                    use   View  ($MS4VIEWDBTMP)  
  					 	>  /* end col xs:8 */
					> /* end Row 2 */
				>  /* end div */
 	        >   /* end col lg:6 */ 
			 <Rwd_Col :   lg:4 ,"text-left" :  
	            <div $widget + $bg_info + "no-padding" :
 				      <div  "class='p-m " :
						<Text : ""     , "     #  Population by City #  " > ,
 					    <Text :  ""     , "  --( GEOMAP LEAFLET  ) China--   " > ,
					  >
					  FormLeaflet : DRAWGEOMAP ID: "mymap",	SetView(31.934572,118.312164), Zoom : 4.3 , height :"270px",width : "380px"
						loadArray DashFormatArrays2   { field : "stringVal"  } , 
						begin_sw
							var influence = L.circle([39.913818,116.363625], 160000).addTo(mymap);
							var circle = L.circle([33.391376,117.557678], {
												color: 'red',
												fillColor: '#f03',
												fillOpacity: 0.5,
												radius: 150000
												}).addTo(mymap);
											circle.bindPopup("I am a circle.");
							var polygon = L.polygon([
												[27.518280, 120.425766],
												[32.540447,119.243889],
												[27.934572,116.312164]
											]).addTo(mymap);

											polygon.bindPopup("I am a polygon.");

 											var popup = L.popup()
											.setLatLng([35.8617,104.1954])
											.setContent("CHINA.")
											.openOn(mymap);
 						end_sw		
				>  /* end div */
 			 >  /* end col lg:6 */					  
 > ; /* end Row 2 */
 /*  conditional as possible          */
     msgsql := true ; /* change this   True	 */
 if ( msgsql = TRUE) then 
  	<Rwd_Row    :  3 /* 2 : optional */
            <Rwd_Col :   lg:4 ,"text-left" :  
	            <div $widget + $bg_primary + "no-padding" :
 				      <div  "class='p-m " :
						<Text : ""     , "     #  Population by Province #  " > ,
					   <Text :  ""    , "    ###b   ( PIE  ) ###b " > ,
					   <Text :  ""     , "  --China--   " > ,
					  >  /* end div */
					        DBconnect {Ms4DB} (LocalServerDB) ,
							FormMorris :  DrawPIE,   title :"" ,  
							TYPE : $DONUT, FORMAT: "Th"  use View  ("[ms4TotalPopulByProvince]")   			   
				>  /* end div */
 			 >  /* end col lg:6 */
			  <Rwd_Col :   lg:8 ,"text-left" : 
 	            <div $widget + $bg_info + "no-padding" :
				  <div  "class='p-m " :
						<Text : ""     , "     #  Population by Province #  " > ,
 					   <Text :  ""     , "  -- China--   " > ,
					 
 				      <Rwd_Col :   xs:2, "text-center" :   <icon : $fa_2x  + $fa_pull_left  +   $fa_location_arrow  ,<text :"",DashFormat[4].zlabel >>>,/*  end col xs:4 */
					  <Rwd_Col :   xs:10  : 
					>  /* end div */
	  				        DBconnect{Ms4DB}($MS4DBTMP),
						FormMorris :	DrawBar ,  title :"" ,TYPE :  $BAR   , FORMAT :"Th"  
	                    use   View  ($MS4VIEWDBTMP)  		 		>, /* end div */
						>
 			 >  /* end col lg:6 */
   	  >; 
  end_if ;	  

<	Rwd_Row +  $bg_success :  4
     <   Rwd_Col : sm:8,md:6,lg:4 : 
      <div $widget + $bg_lazur   :

** ***************** DRAW GRID   ************************************************************************	
   	       DBconnect{Ms4DB}($MS4DBTMP),  
		FormPlus : 	Drawgrid  	 
		Option  : 
		BEGIN 
			Style     :$blue ,
			pagesize  :10
   
		END   title : ""  use   View  ($MS4VIEWDBTMP)  ,
		>
	 >
    <Rwd_Col : sm:8,md:6,lg:5 : 
	 <div $widget + $bg_white   :
  
** ***************** DRAW BAR ************************************************************************	
  	   DBconnect{Ms4DB}(LocalServerDB),
	   MS4_SQL_OnServer{ms4db}("  CREATE TEMPORARY VIEW IF NOT EXISTS  tmp_gentable_ms40015  AS  "+ 
		 " select   CASE WHEN LENGTH(province) > 2 THEN  "  + 
 		 "  			substr(province,1,2)   "  + 
 		 "  		ELSE "  + 
 		 "  			province  "  + 
 		 "  		END Shortprovince, "  + 
 		 "  TOTALThousandPopulationByProvince  from  ms4TotalPopulByProvince "  ),
    	 setting : chart : legend :0, 
		FormPchart : DrawPLOT, title : "" ,
		   ImageAera :520, 285 ,TYPE : $STANDARD,  FORMAT :"th"  use View  ("tmp_gentable_ms40015") , 	 
	 			     <icon : $fa_3x  + $fa_pull_left   +   $fa_envelope_o   > , <icon : $fa_2x  + $fa_pull_left   +   $fa_envelope_o   > ,   
								<icon : $fa_1x  + $fa_pull_left   +   $fa_envelope_o   > , 
					     <Rwd_Col :   xs:9, "text-right" : 
 					     <Text : $Bts_Text_right    , " New messages \n     ##b 26 ##b " > , > , 
		FormExcel : DrawGrid , title : "" ,
		      	use loadfile : LcurrentDirExcel   	 ,
						 
	 		
 		>	 		 
	>
    < Rwd_Col : sm:8,md:6,lg:3 : 
	     <Panel     : $ms4_Panel_yellow ,  <Panel_Header      : "####  Basic Panel & Body & Footer YELLOW ####   ">  , 
	     <Panel_Body       :   
	 		<notification : $Bts_Notif_info_Dismissable    ,  "**Info!** This message box could provide info or require positive action."> , 
	 		<notification : $Bts_Notif_danger , icon :  $fa_5x +    $fa_bomb ,  text :"**Warning!** You should" ,   url : "https://getms4bi.com"  , " read this message" > ,
	 	
		>,/* end body panel */
		 
			<Panel_Footer       :  " example  Footer Panel" >  
	     > /* end panel */
	  
   > 
> ; 
<Rwd_Row + $bg_gainboro :  5
    <Rwd_Col : sm:8,md:10,lg:12 : 
  	 	<notification : $Bts_Notif_Warning_Dismissable    ,  "###  Analysis ... the latest information ###  "> , 
	>
>; 
<Rwd_Row + $bg_info :  6
 	  <Rwd_Col :   lg:4 ,"text-left" :  
	            <div $widget + $bg_info  :
    				    DBconnect{Ms4DB}($MS4DBTMP),
						FormChartJS :	DrawBar , height : "150",  width :"180", title :"" ,  TYPE :  $LINE_Animation     , FORMAT :"Th"  
	                    use   View  ($MS4VIEWDBTMP)  				>  /* end div */
 			 >  /* end col lg:6 */
 
   <Rwd_Col  : sm:2,md:4,lg:3 : 
** ***************** table responsive ************************************************************************	
       		begin_div : table responsive    /* style */
				|	 # |	Date |	Time 	| Amount |
				| fuller |	10/21/2013 |	3:29 PM |	$321.33  |
				| /b leverling /b | /r	10/21/2013 /r |	3:20 PM |	** $9234.34 **  |
				| leverling |	10/21/2013 |	3:03 PM |	$724.17  |
				| /r Davolio /r |	10/21/2013 |	3:00 PM |	/r $23.71  /r |
				| Peacock |	10/21/2013 |	2:49 PM 	|   $8345.23 |
				| King |	10/21/2013 |	2:23 PM 	|  	$245.12   |
				| Callahan |	10/21/2013 |	2:15 PM |	$5663.54 |
				| leverling |	10/21/2013 |	2:13 PM |	$943.45  |
			end_div   
  	>	
    < Rwd_Col : sm:2,md:2,lg:1 : 
    DBconnect{Ms4DB}(LocalServerDB),  FormPlus :  DrawQrCODE type : $MAIL ("http://www.mgplanete.com")  ,
	 <url : "https://getms4bi.com"    button :   $Bts_btn_info   , " Link GetMS4bi.com"	 > 	
	 <url : "https://www.linkedin.com/"  button :   $Bts_btn_social_linkedin , icon : $fa_linkedin  	 >
	>
	<Rwd_Col : sm:8,md:6,lg:4 : 
** ***************** DRAW BAR ************************************************************************	
	 DBconnect{Ms4DB}(LocalServerDB),	
	 setting : chart : 
	 legend : 0  
	 redraw : 1 , counter : 30  ,
	 FormPlus : theme : "silver" DrawBAR, height : "430",  width :"520",title : ""   , 
	             TYPE : $COLUMN + TYPE: $LINE , FIELD:"TOTALThousandpopulationbyProvince", FORMAT :"th"  use View   ("[ms4TotalPopulByProvince]") 
    >		
>		; 
 <Rwd_Row + "bg-black"  :  7 /* 1 : optional */
            <Rwd_Col :   lg:12 ,"text-left" :  
			DBconnect{Ms4DB}(LocalServerDB),setting : chart :  redraw : 1,counter : 30,
            FormPlus : theme : "moonlight" DrawBAR, height : "350",  width :"1500" ,  title : "",  
			TYPE :  $BAR    , FORMAT :"th"		
			use View   (" [ms4TotalPopulByProvince]") ,
			    >  /* end div */
 	 
 	    >; /* end col lg:2 */
  END_Block_Rwd ;		
  
 ** ***************** REPORTS : TAB = DASBOARD ! ************************************************************************	
    InsertCssAndDashBoard(void);
	
 
Begin_Block_Rwd  :  full_page 	
	 <Rwd_Row + "bg-gray"  : 5 /* 5 : optional */
 	    <Rwd_Col :   lg:2   :  
	         <div $widgetStyle + $bg_black :
 				   <Rwd_Row + "vertical-align" :  1
				     <Rwd_Col :   xs:3  :  <icon : $fa_3x  + $fa_pull_left  +   $fa_thumbs_up   > >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 400 ##b " >  >, /* end col xs:8 */
					> /* end Row 5 */
				 >  /* end div */
	         >  /* end col lg:2 */
			  
	        <Rwd_Col :   lg:2   :  
	           <div $widgetStyle + $bg_white :
 				   <Rwd_Row + "vertical-align" :  2 
				      <Rwd_Col :   xs:3  :  <icon : $fa_3x  + $fa_pull_left  +    $fa_rss   >    >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" :   <Text : $Bts_Text_right    , "  ##b 10 ##b " >  >, /* end col xs:8 */
					> /* end Row 5 */
			   >  /* end div */
 	         >  /* end col lg:2 */
			   
			 <Rwd_Col :   lg:2   :  
	             <div $widgetStyle + $bg_lazur :
 				   <Rwd_Row + "vertical-align" :   3
				     <Rwd_Col :   xs:3  :  <icon : $fa_3x  + $fa_pull_left  +    $fa_phone   >    >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : <Text : $Bts_Text_right    , "  ##b 420 ##b " > >, /* end col xs:8 */
 					> /* end Row 5 */
			   >  /* end div */
	         >  /* end col lg:2 */
 			<Rwd_Col :   lg:2   :  
	           <div $widgetStyle + $bg_red :
 				   <Rwd_Row + "vertical-align" :  4
				     <Rwd_Col :   xs:3  :  <icon : $fa_3x  + $fa_pull_left  +    $fa_euro   >    >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" :  <Text : $Bts_Text_right    , "  ##b 462 ##b " >  >, /* end col xs:8 */
 					> /* end Row 5 */
			   >  /* end div */
	         >  /* end col lg:2 */
 						
			<Rwd_Col :   lg:2   :  
	           <div $widgetStyle + $bg_yellow :
 				   <Rwd_Row + "vertical-align" :   5
				     <Rwd_Col :   xs:3  : <icon : $fa_3x  + $fa_pull_left  +    $fa_shield   >  >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : <Text : $Bts_Text_right    , "  ##b 610 ##b " >  >, /* end col xs:8 */
 					> /* end Row 5 */
			   >  /* end div */
	         >  /* end col lg:2 */
	       <Rwd_Col :   lg:2   :  
	         <div $widget :
 				   <Rwd_Row + "vertical-align" :  6
				     <Rwd_Col :   xs:3: 
 					   <icon : $fa_3x  + $fa_pull_left   +   $fa_envelope_o   > ,   >,/*  end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , " New messages \n     ##b 260 ##b " > ,
 					   >  /* end col xs:8 */
					> /* end Row 2 */
			 >  /* end div */
 	     >  /* end col lg:3 */     
		>;
  	   <Rwd_Row + "bg-gray"  :  6 /* 6 : optional */
** ***************** widget * HEAD * IMG **********************************************************************	  
	   
            <Rwd_Col :   lg:4  :  
	               <div  $widgetHead + $bg_navy + "p-lg text-center " :
 				      <div "class='m-b-md' " :
						   <Text : ""     , "     ##b  PBE ##b  " > ,
	 					   <Text :  ""    , "    Founder of Groupe MS4 BI " > ,
 						  printsw " 	<img src='/ui/include/img/a4.jpg' class='img-circle circle-border m-b-md' alt='profile'>" 
				       >  /* end div */	
							<Text :  ""    , "   100 Tweets  |" > 
							<Text :  ""    , "   350 Following  |" >  
							<Text :  ""    , "   610 Followers " >  
 				       >  /* end div */	
						<div $widgetTextbox :	
						   <Text : ""     , "     ####b  Contact Mandragore Planete ####b  " >  
			 			    <Text : ""     , "   Lorem Ipsum is simply dummy text of the printing and typesetting industry.  " >  
						  printsw "<div class='text-right'>" ,/* it s possible! */
							<button :   $Bts_btn_xs,  icon   :  $fa_thumbs_up , text : "--Like--" >	  
							<button :   $Bts_btn_primary_btn_xs ,  icon   :  $fa_heart , text : "--Love--" >	 
						  printsw  $End_div  /*  it s possible! */
 				        >, /* end div */	   
 		    >, /* end col lg:4*/
			 <Rwd_Col :   lg:2  :  
	            <div $widget + $bg_navy + "p-lg text-center " :
 				    <div "class='m-b-md " :
						 <icon : $fa_4x  +    $fa_shield   >  
						 <Text : ""     , DashFormat[2].zlabel >  
						  <Text : ""     , "   ####b  XXXXXXXXXXX ####b  " >  
						  <Text : ""     , "     --Province--  " >  
			       >, /* end div */	
			     >, /* end div */	  
			     <div $widget + " p-lg text-center " :
 				    <div "class='m-b-md' " :
			 			 <icon : $fa_4x   +    $fa_flash   >  
						 <Text : ""     , "     #  612 #  " >  
						  <Text : ""     , "   ####b  Thunder ####b  " > 
						  <Text : ""     , "     --amount--  " >  
			        >  /* end div */
			     >  /* end div */	  
			>  /* end col lg:2*/		
			
	<Rwd_Col :   lg:4  :  
	         <div $widget + $bg_lazur + "p-xl" :
					<Text : ""     , "    ##b   MG PLANETE    ##b " > 
                      < tag      "ul" + "class='list-unstyled m-t-md'  " :
 					 <div $widget + $bg_lazur  :
  	 	 				<tag   "li" :       <icon : $fa_1x   +    $fa_envelope, <text : "","contact@mgplanete.com" >  > >	,
						<tag   "li" :	 	  <icon : $fa_1x   +    $fa_home, <text : "","15 rue des Halles 75001 PARIS FR" > > >	,
						<tag   "li" :	 	  <icon : $fa_1x   +   $fa_phone, <text : "","Contact: 00 33 (0)1 76 46 09 83"  >> >	,	
						>						
                      >  /* tag ul */
			  >  /* end div */
					 
			  <div $widget + $bg_red + "p-xl text-center  " :		
		          <div "class='m-b-md' " :	
		  			<icon : $fa_4x   +    $fa_bell> 
					< text :  "", " # 47 # "> 
					< text :  "", "  ###b Notification ###b "  > 
		 			< Text : "" , "     --Error detected--  " > 
 			      >  /* end div */	
			   >  /* end div */	
 		>  /* end col lg:4 */		
 		<Rwd_Col :   lg:2  : 
             <div $widget + $bg_yellow + "p-xs text-center " :
			    <div  "class='m-b-md' " :	
	 				<icon : $fa_4x  +   $fa_thumbs_up>
					< text :  ""  , " # 520 # "> 
					< text :  ""  , "  ###b Likes ###b "  > 
 					< Text :  ""  , "  --amount--  " > 
                  >  /* end div */	
			 >  /* end div */
                  
                 
              <div $widget + $bg_yellow + " p-lg text-center " :
			    <div  "class='m-b-md' " :
 					<icon : $fa_4x  +    $fa_warning>
					< text :  "",  " # Alarm # "> 
					< text :  "",  "  ###b Do ###b "  > 
		 			< Text :  "" , " --something--  " > 
  			     >  /* end div */			
			   >  /* end div */				
 		>  /* end col lg:2 */	
 	
	  >; /* end row 5*/
 	  <Rwd_Row + "bg-gray"  :  7 /* 7 : optional */ 
** ***************** widget +  MORRIS  CHART**** + TOP 5****************************************************	  
		   <Rwd_Col :   lg:4 ,"text-right" :  
	          <div $widgetTextbox :
 				   <Rwd_Row :  2
				     <Rwd_Col :   xs:2, "text-center" :   <icon : $fa_5x  + $fa_pull_left  +   $fa_cloud ,<text :"",DashFormat[4].zlabel >>>,/*  end col xs:4 */
					  <Rwd_Col :   xs:10, "text-right" : 
	 			        DBconnect{Ms4DB}($MS4DBTMP),
	 					FormGoogle : DRAWPIE  ,    title :  "" ,
						type :$SLICES use  View  ($MS4VIEWDBTMP)  ,
						 setting : chart : redraw : 1 ,counter : 99,
						FormPlus : theme :  "metro"  DrawPIE, height : "330",  width :"220",title : ""   , ANGLE :120,
						TYPE : $DONUT  ,FORMAT :"th"  use View   ($MS4VIEWDBTMP) 

  						>  /* end col xs:8 */ 
					> /* end Row 2 */
				>  /* end div */
 	        >  /* end col lg:6 */ 
** ***************** table TROW + TCELL ************************************************************************		 
         <Rwd_Col :   lg:4  :	   
			<table $Bts_Class_Table	 :  
				<trow :  
					<tcell : <button :   $Bts_btn_danger_btn_sm ,"12">  
							<Text : ""    , "Total messages" > 
					>
					<tcell : <button :   $Bts_btn_primary_btn_sm ,"28">  
							<Text : ""    , "Posts" > 
					>
					<tcell :  <button :   $Bts_btn_info_btn_sm ,"15"> 
								<Text : ""   , "Comments" > 
					>
				> /* end 1 Trow table */
			  <trow :  
					<tcell : <button :   $Bts_btn_info_btn_sm ,"20">  
	                          <Text : ""    , "News" > 
					>
					<tcell :   <button : $Bts_btn_success_btn_sm ,"40"> 
	                          <Text : ""    , "Likes" > 
					>
					<tcell :  <button :   $Bts_btn_danger_btn_sm ,"30"> 
							  <Text : ""    , "Notifications" > 
					>
				>,/* end 2 Trow table */
				<trow :  
					<tcell :   <button :   $Bts_btn_warning_btn_sm ,"20">  
								<Text :""    , " Albums" > 
					>
					<tcell :   <button :   $Bts_btn_default_btn_sm ,"40">  
								<Text : ""    , "Groups" > 
					>
					<tcell :  <button :   $Bts_btn_warning_btn_sm ,"30">  
								<Text : ""    , "Permissions" > 
					>
				> /* end 3 Trow table */
			>  /* table end */
		>  /* en col 4*/	
		 <Rwd_Col :   lg:4  :
	       <div :
		          <Text :  ""    , " Memory" > ,
		          <Text :$Bts_Text_right_small    , " 10/200 GB" >  
			>  /* end div */		  
				<div $Bts_progress_small	 :
					<div "style='width: 60%;' "  +  $Bts_progress_bar + $bg_lazur :
					>  /* end div */
	  			>  /* end div */
			<div :
		         <Text :""    , " Bandwidth" > ,
		          <Text :$Bts_Text_right_small    , " 20 GB" > 
			 >  /* end div */		  
				<div $Bts_progress_small	 :  
					<div "style='width:50%' "  +  $Bts_progress_bar + $bg_red :
					>  /* end div */
	  			>  /* end div */
				<div :
		     <Text :""    , " Activity" >  
		          <Text :$Bts_Text_right_small    , " 73%" >  
			 >  /* end div */		  
				<div $Bts_progress_small	 :
					<div "style='width: 40%;' "  +  $Bts_progress_bar :
					>  /* end div */
	  			>  /* end div */
	     >  /* en col 6*/	
		 <Rwd_Col :   lg:4  :
		 
		 	<button :    $Bts_btn_social_block_linkedin ,icon: $fa_linkedin   ,"Sign in with linkedin"> 
 			<button :    $Bts_btn_social_block_pinterest,icon: $fa_pinterest   ,"Sign in with pinterest"> 
 			<button :    $Bts_btn_social_block_tumblr ,icon :$fa_tumblr     ,"Sign in with tumblr"> 
 			<button :    $Bts_btn_social_block_twitter ,icon: $fa_twitter    ,"Sign in with twitter"> 
 			<button :    $Bts_btn_social_block_vk  ,icon :$fa_vk        ,"Sign in with  Vk "> 

		>
         <Rwd_Col :   lg:4  :
 			<button :    $Bts_btn_social_bitbucket,icon: $fa_bitbucket >  
 			<button :    $Bts_btn_social_dropbox ,icon: $fa_dropbox >  
 			<button :    $Bts_btn_social_facebook,icon :$fa_facebook > 
 			<button :    $Bts_btn_social_flickr  ,icon: $fa_flickr >  
 			<button :    $Bts_btn_social_github ,icon: $fa_github >  
 			<button :    $Bts_btn_social_google_plus ,icon: $fa_google_plus> 
 			<button :    $Bts_btn_social_instagram ,icon: $fa_instagram  >  
 			<button :    $Bts_btn_social_linkedin ,icon :$fa_linkedin  >  
 			<button :    $Bts_btn_social_pinterest ,icon :$fa_pinterest >  
 			<button :    $Bts_btn_social_tumblr ,icon :$fa_tumblr >  
 			<button :    $Bts_btn_social_twitter  ,icon: $fa_twitter > 
 			<button :    $Bts_btn_social_vk    ,icon :$fa_vk  >   
		> 
			<Rwd_Col :   lg:4  :
			** circle 
			printsw "\n\l",
			<button :   $Bts_default_btn_circle_xl,  icon   :  $fa_check , text : "" >	 
     		<button :   $Bts_primary_btn_circle_xl,  icon   :  $fa_list , text : "" >	  
			<button :   $Bts_success_btn_circle_xl ,  icon   : $fa_link , text : "" >	  
			<button :   $Bts_info_btn_circle_xl,  icon   :  $fa_check , text : "" >	 
			<button :   $Bts_warning_btn_circle_xl,  icon   :  $fa_times , text : "" > 
			<button :   $Bts_danger_btn_circle_xl,  icon   :  $fa_heart , text : "" >	   
			>
	 
	  >;	/* end row */
	  
position: relative,120,260:
 <StickyNotes  style=" background-color:RGB(73,190,228);color:RGB(64,0,64);font-size:22px;transform: rotate(+00deg);" : "MANDRAGORE PLANETE \n \nhttps//getms4bi.com"> ;
 
position: relative, auto,210 :
<div $widget + $bg_info   :		
<Rwd_Row :  
<Rwd_Col :   xs:4  : 
 <icon : $fa_2x    +   $fa_internet_explorer,   style:"color:blue; ">, >,/* end col xs:4 */
 <Rwd_Col :   lg:4, "text-left" : 

<Text : $Bts_Text_right    , " **the official sites**  " > >  /* end col xs:4 */
>,/* end Row   */
<Rwd_Row :  
<Rwd_Col :  lg:4  : 
<Text : $Bts_Text_center    , " $$www.mgplanete.com$$  " > 
<Text : $Bts_Text_center     , " $$getms4bi.com$$  " > 
<Text : $Bts_Text_center    , " $$demos.ms4bi.com$$  " > 
<Text : $Bts_Text_center    , " $$help.ms4bi.com$$    " > 
<Text : $Bts_Text_center   , " $$www.ms4script.com$$ " > 
,>, /* end col xs:4 */
>,/* end Row   */
>; /* end div */  
position: relative, auto,1050 :
<Rwd_Row :  
	<Rwd_Col :   lg:12 ,"text-left" :  
	            <div $widget + $bg_warning + "no-padding" :
 				      <div  "class='p-m " :
						<Text : ""     ,  "     #  HeadQuarter #  " > ,
 					    <Text :  ""     , "  --( GEOMAP LEAFLET  ) MG--   " > ,
					  >
	 						FormLeaflet  : DRAWGEOMAP ID: "mymap2", 
						SetView( 48.864716, 2.349014), Zoom :  14 , ** longitude latitude
						height :"350px",width : "850px" 
						 BEGIN_Sw
						 L.marker([ 48.8601804,2.3461359]).addTo(mymap2).bindPopup('<b>Hello MG planete</b>')
						 END_sw ,
						  
				>  /* end div */
 			 >  /* end col lg:6 */					  
 > ; /* end Row 2 */

END_Block_Rwd ;
 
 
 
 
 position : 6000, 140, auto,230 :

<div  $IsVisible_lg :  /* visible only large (screen) */		
   DrawWindow : "Win25" , actions : $WinCustom +  $WinMinimize + $WinMaximize + $WinClose , position :6000, 50 ,500,1450  TITLE : "  Window Web: MS4 script Rapid Developt--" 
		 							 url :  UrlMs4Script   /* key word ms4script */
>;
END; ** ----------->SERVER<----------------------------------------------------------------
Exit ;

** **************************************
**  array 1
** *************************************
proc InsertArray1(void)
begin_proc 
 display "load array 1";
		clear i,y; /* global var */
		/* retrieve   province-population  */
	    Ms4_SQLFetch{Ms4DB}("SELECT  * FROM  [%s] ",zTable)
 	 	  Row_ForEach  :
		  if(y= 0) then
		  	 ** format for GeoMap :load Arrays
			 Str_Format(DashFormatArrays[y].stringval,"([ ['Province','Popul.'], " ); 
          End_if ;			 
    	  i++;y++;
		  if ( ((i <=zTotalCount ) and (i <=50) )  )
		  then 
	  	 	 	DataDash[i].Province 	    := Column_GetData:1,CHAR;
				DataDash[i].totalPopul   	:= Column_GetData:2,INTEGER;
				DataDash[i].MapCODe 	    := Column_GetData:3,CHAR;
				** format for GeoMap :load Arrays
                Str_Format(DashFormatArrays[y].stringval,"[{f:'%s ', v:'%s '},%i],",DataDash[i].Province,DataDash[i].MapCODe,DataDash[i].totalPopul );         ** example %s string %i integer %l long %f float

 		          if(DataDash[i].totalPopul >  ztotalPopulGreat) 
				  then ztotalPopulGreat :=  DataDash[i].totalPopul; 
				   DataDashGreatLow[1].Province :=DataDash[i].Province ;   DataDashGreatLow[1].totalPopul :=ztotalPopulGreat;  
				 End_if;
				   if(DataDash[i].totalPopul < ztotalPopulLow) 
				   then
				   ztotalPopulLow := DataDash[i].totalPopul; 
				   	DataDashGreatLow[2].Province :=DataDash[i].Province;  DataDashGreatLow[2].totalPopul :=ztotalPopulLow;  
				  End_if;         
			  SetColorText(Hwdisplay:green,black);
		      Display " [ms4TotalPopulByProvince]-->[Row] :",i, "-> ( Column 1 & 2 Values ) are :->", DataDash[i].Province,"  ",DataDash[i].totalPopul,
		              " HIGHEST : ",DataDashGreatLow[1].totalPopul," LOWEST : ",DataDashGreatLow[2].totalPopul;
		 End_if; 
	 	End_Row_ForEach ; 
	  	 ** format for GeoMap :load Arrays END
			 Str_Format(DashFormatArrays[y].stringval," ]), " ); 
end_proc 	
** **************************************
**  array 2
** *************************************		 
proc InsertArray2(void)
begin_proc 
Local
 integer : XC;
text   :   ztableLD :="ms4CityLatitudeLongitude"   ;
end_local  
  XC:=0 ;
	/* retrieve   latitude */
	 DBconnect{Ms4DB}(LocalServerDB);
	    Ms4_SQLFetch{Ms4DB}("SELECT  * FROM  [%s] ",zTableLD)
 	 	  Row_ForEach  :
	  	  XC++; 
	  			DataDashCity[XC].city	   		 := Column_GetData:1,CHAR;
				DataDashCity[XC].latitude	   	 := Column_GetData:2,CHAR;
				DataDashCity[XC].longitude 	     := Column_GetData:3,CHAR;
				** format for GeoMap :load Arrays
				** L.marker([22.516998,113.392723]).addTo(mymap).bindPopup("<b>Zhongshan</b>");
                Str_Format(DashFormatArrays2[XC].stringval,"L.marker([%s,%s]).addTo(mymap).bindPopup(\"<b>%s</b>\");" ,
				           DataDashCity[XC].latitude,DataDashCity[XC].longitude ,DataDashCity[XC].city);         ** example %s string %i integer %l long %f float
   		End_Row_ForEach ;
end_proc 
proc InsertCssAndDashBoard(void)
begin_proc
Local
 integer : XC;
text   :   ztableLD :="ms4CityLatitudeLongitude"   ;
end_local  
** ***************** SCRIPT WEB *****  HTML PHP JS ...*****************************************************************	
	begin_sw : /* insert script web: jsp,html,php etc.. as possible */
   
		<style type="text/css">
		#mycss	.k-grid { border-bottom: none; font-size: 9px;}  
		#mycss	.k-header { background-color:#dff0d8;color:green;font-family:consolas;font-size:16px;  } 
		#mycss	.k-header.k-link { color:black; } 
		#mycss	.k-state-selected { background-color:#A7CDF0;background-image:none;color:red;} 
		#mycss	.k-alt.k-state-selected  { background-color:green;background-image:none;color:black;} 
		#mycss	.k-grid tr { font-family:consolas;font-size:11px;color:black;border-bottom:solid 14px #DBDEE1;height:21px;} 
		#mycss	.k-alt { background-color:#fcf8e3; } 
		#mycss	.k-grid td { line-height: 2; padding:0px 10px;margin:0px;border-bottom:solid 2px green;  } 
		#mycss	.k-grid-header { padding:0px 0px;margin:0px; } 
		#mycss	::-webkit-scrollbar 			    	{    width: 20px;}
		#mycss	::-webkit-scrollbar-button 	     		{    background: orange;}
		#mycss	::-webkit-scrollbar-track-piece    		{    background: green;}
		#mycss	::-webkit-scrollbar-thumb 		 	    {    background: yellow}
		#mycss	.k-pager-wrap > .k-link   {  border:solid 2px #DBDEE1; background-color: orange;   color: black;}
		#mycss	.k-state-selected         {  border-radius: 20px; background-color: yellow;   color: black; font-family:tahoma;font-size:12px;border-bottom:solid 2px green;  }
		#mycss	.k-pager-numbers .k-link  {  border-radius: 20px;border-color:yellow ;background-color:green;color:white;font-family:tahoma;font-size:11px;border-bottom:solid 2px yellow;}

		</style> 
		<div id="mycss">
	 	end_sw ; 
	BEGIN_DASHBOARD  
		option :
		BEGIN
		type  : $TABSTRIP , 	  	title :   ""  
		END
		TabTitle : "My Aggregate Report  " ,  
	   Ms4Script_Import :  "#DRIVERSYS+\MANDRAGOREPLANETE\MS4BI\01-GETTING-STARTED-UNICODE\GET-05-01BasicReportAggreg.ms4" ;
  	 FormPlus : theme : "blueopal"	
		  DrawPIE , title :"" , ANGLE :120 , 
			TYPE : $STANDARD, FORMAT: "pers"  use View  ("[ms4TotalPopulByProvince]") ;  
			 TabTitle : "My Excel Consolidation  "     
		 FormPlus :  DrawGrid 
		 Option  : 
		 BEGIN 
           	height  : 650,  pagesize:20,
	 	 END   title :"MS4 DB : ms4LangConsolidation China/Japan : 英語 = b.city :Drag & Drop Column "   use   View  ("[ms4LangConsolidation]")   ;
  	 
		 TabTitle : "Radar  "     
		  FormPlus : theme : "bootstrap" DrawRADAR, title : "  RADAR Line by province"   , TYPE : $RDCOLUMN  
 			 use View   ("[ms4TotalPopulByProvince]") ;
 
         TabTitle : "My Report Design 2  " ,     
		  Ms4Script_Import :  "#DRIVERSYS+\MANDRAGOREPLANETE\MS4BI\01-GETTING-STARTED-UNICODE\GET-07-02ReportDesign-Totalise.ms4";
         TabTitle : "My Grid: Nb City/Province ..  " ,	
		  FormPlus : DrawGrid, title :"MS4 DB :  View  2:  nb city/province : Drag & Drop Column "    use   View  ("[ms4TotalcitybyProvince]")   ;
  
		 TabTitle : "My Grid: Nb City,Popula..  " ,
		  FormPlus : DrawGrid, title :"MS4 DB :  View  3 :  nb city ,province,population  "    use   View  ("[ms4TotalcityProvincePopulation]")   ;
		 	
		 TabTitle : "My Grid  AVG Population..  " ,	
		  FormPlus : DrawGrid, title :"MS4 DB :   View  4 :  average  population  "    use   View  ("[ms4AVGPopulation]")   ;
     
	 		
        END_DASHBOARD ; 
		printsw " \n</div> 		" ;
end_proc