v19.1.63 is released

Author: pipeline

README.md

@@ -119,10 +119,95 @@ Note: Here, '\*' Specifies that install the latest published package form the on
         "@syncfusion/ej2-react-grids": "*"
 },
 ```
-## Run your Sample Browser
+# Using the samples
+
+## Installing
+
+Before installation check `@syncfusion:registry=http://nexus.syncfusion.com/repository/ej2-production/` is available in npmrc file. Then use the below command to install all dependent packages.
+
+```
+npm install
+```
+
+## Build
+
+Use `npm run build` command to compile the source files. It calls the following tasks synchronously,
+
+1. SEO changes
+2. Build
+3. Styles ship
+4. Site-map generate.
+
+### SEO changes
+
+It will set meta data and description for the h1 tag to show our components first in search engine. Use the below command to run it individual. 
+
+```
+gulp SEO-changes
+```
+
+### Build
+
+Use the below command to generate scripts, styles, locale and sample lists.
+
+```
+gulp build
+```
+It runs the following tasks synchronously,
+
+1. Scripts
+2. Styles
+
+#### **Scripts**
+
+ It compiles the Typescript files and use the below command to run this task.
+
+```
+gulp scripts
+```
+
+#### **Styles**
+
+`gulp styles` command is used to compile default themes. It calls the following two tasks synchronously.
+
+1. Default theme
+2. Compile styles
+
+#### Default theme
+
+Use the below command to generate default theme files.
+
+```
+gulp default-theme
+```
+
+#### Compile Styles
+It compiles the scss file to css file. To run this task use the below command,
+
+```
+gulp compile-styles
+```
+
+### Styles Shipping
+
+It copies css files for themes from node_modules. Use the below command to run it individual.
+
+```
+gulp styles-ship
+```
+
+### Site map generation
+
+The below command combines sample of all components and store it in sitemap-demos.xml file to index our components, samples, documents in search engine.
+
+```
+gulp sitemap-generate
+```
+
+## Running the Sample Browser
 
 To run your sample browser you can use any of the following command.
 
 ```
 gulp serve
-```
+```

index.html

@@ -25,7 +25,7 @@
     <link href="src/common/lib/content/bootstrap.min.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
     <link rel="shortcut icon" href="favicon.ico" />
-    <style id="themelink"></style>
+    <link id="themelink" href="styles/material.css" rel="stylesheet" />
     <link rel="stylesheet" type="text/css" href="./styles/index.css" />
     <link rel="stylesheet" type="text/css" href="./src/common/lib/highlightjs/styles/default.css" />
     <link href="src/common/lib/content/codemirror.css" rel="stylesheet"></link>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-react-samples",
-  "version": "19.1.54",
+  "version": "19.1.63",
   "description": "Examples of React UI Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",

src/chart/adindicator.tsx

@@ -117,14 +117,14 @@ export class AccumulationDistribution extends SampleBase<{}, {}> {
         let  chart:  Element  =  document.getElementById('charts');
         chart.setAttribute('title',  '');
     };
-    // custom code start
+    
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
         replace(/-dark/i, "Dark") as ChartTheme; 
     };
-    // custom code end
+    
 
     public axisLableRender(args: IAxisLabelRenderEventArgs): void {
         if (args.axis.name === 'secondary') {

src/chart/annotation.tsx

@@ -129,14 +129,14 @@ export class Annotation extends SampleBase<{}, {}> {
         });
         this.pie.appendTo('#chart_annotation');
     };
-    // custom code start
+    
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
         replace(/-dark/i, "Dark") as ChartTheme;
     };
-    // custom code end
+    
 
     public loaded(args: ILoadedEventArgs): void {
         if (this.isRender) {

src/chart/area-empty.tsx

@@ -93,12 +93,12 @@ export class AreaEmpty extends SampleBase<{}, {}> {
         let  chart:  Element  =  document.getElementById('charts');
         chart.setAttribute('title',  '');
     };
-    // custom code start
+    
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
         replace(/-dark/i, "Dark") as ChartTheme;
     };
-    // custom code end
+    
 }

src/chart/area-segments.tsx

@@ -175,12 +175,12 @@ export class AreaMultiColored extends SampleBase<{}, {}> {
         let chart: Element = document.getElementById('charts');
         chart.setAttribute('title', '');
     };
-      // custom code start
+      
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
         replace(/-dark/i, "Dark") as ChartTheme;
     };
-      // custom code end
+      
 }

src/chart/area.tsx

@@ -94,11 +94,11 @@ export class Area extends SampleBase<{}, {}> {
         let  chart:  Element  =  document.getElementById('charts');
         chart.setAttribute('title',  '');
     };
-        // custom code start
+        
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as ChartTheme;
     };
-        // custom code end
+        
 }

src/chart/atrindicator.tsx

@@ -116,12 +116,12 @@ export class ATR extends SampleBase<{}, {}> {
         let chart: Element = document.getElementById('charts');
         chart.setAttribute('title', '');
     };
-        // custom code start
+        
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
         replace(/-dark/i, "Dark") as ChartTheme;
     };
-        // custom code end
+        
 }

src/chart/axis-crossing.tsx

@@ -176,12 +176,12 @@ export class AxisCrossing extends SampleBase<{}, {}> {
         chart.setAttribute('title', '');
 
     };
-        // custom code start
+        
     public load(args: ILoadedEventArgs): void {
         let selectedTheme: string = location.hash.split('/')[1];
         selectedTheme = selectedTheme ? selectedTheme : 'Material';
         args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).
         replace(/-dark/i, "Dark") as ChartTheme;
     };
-        // custom code end
+        
 }