DOCINFRA-2341_merged_using_automation

ej2-react-toc.html

@@ -1064,7 +1064,6 @@
 Dialog
 <ul>   
 <li><a href="/ej2-react/dialog/getting-started">Getting Started</a></li>
-<li><a href="/ej2-react/dialog/getting-started-functional">Getting Started using functional component</a></li>
 <li><a href="/ej2-react/dialog/template">Templates</a></li>
 <li><a href="/ej2-react/dialog/animation">Animation</a></li>
 <li><a href="/ej2-react/dialog/resize">Resizing</a></li>
@@ -2380,6 +2379,8 @@
 <li>Scheduler Integrations
 <ul>
 <li><a href="/ej2-react/schedule/vite-js">Vite</a></li>
+<li><a href="/ej2-react/schedule/django-with-mysql">Django REST</a></li>
+<li><a href="/ej2-react/schedule/mongodb-integration">MongoDB</a></li>
 </ul>
 </li>
 <li><a href="/ej2-react/schedule/crud-actions">CRUD Actions</a></li>

ej2-react/button-group/getting-started.md

@@ -81,7 +81,7 @@ import './App.css';
 
 function App() {
   return (
-    <div className='e-btn-group' style={{marginTop: '150px'}}>
+    <div className='e-btn-group'>
       <ButtonComponent>HTML</ButtonComponent>
       <ButtonComponent>CSS</ButtonComponent>
       <ButtonComponent>Javascript</ButtonComponent>

ej2-react/button/getting-started.md

@@ -82,7 +82,7 @@ import * as React from 'react';
 import './App.css';
 
 function App() {
-  return ( <div style={{marginTop: '150px'}}>
+  return ( <div>
     <ButtonComponent>Button</ButtonComponent>
   </div>
   );

ej2-react/check-box/getting-started.md

@@ -79,7 +79,7 @@ import './App.css';
 
 function App() {
   return (
-    <div style={{ marginTop: '150px' }}>
+    <div>
       <CheckBoxComponent label="Default" />
     </div>
   );

ej2-react/circular-gauge/getting-started.md

@@ -10,15 +10,15 @@ domainurl: ##DomainURL##
 
 # Getting Started with React Circular gauge component
 
-This article describes the steps to create a simple Circular Gauge and demonstrates the component's basic usage.
+This section explains the steps required to create a simple React Circular Gauge component and demonstrate its basic usage in a React environment.
 
-Prerequisites: Node.js (recommended v14 or later), npm, and a compatible React version (hooks-enabled React 16.8+).
+> Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> React development? Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> React components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistant/overview).
 
 ## Dependencies
 
 Following is the list of minimum dependencies required to use the Circular Gauge.
 
-```ts
+```
 |-- @syncfusion/ej2-react-circulargauge
     |-- @syncfusion/ej2-react-base
 |-- @syncfusion/ej2-circulargauge
@@ -27,53 +27,49 @@ Following is the list of minimum dependencies required to use the Circular Gauge
     |-- @syncfusion/ej2-paf-export
 ```
 
-## Installation and configuration
-
-To get started with the React application, use [create-react-app](https://github.com/facebook/create-react-app) to set up the project. To install the `create-react-app` tool globally, run the following command.
-
-```
-npm install -g create-react-app
-```
+## Setup for local development
 
-To create basic React application, run the following command.
+Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
 
-```
-create-react-app quickstart
-```
+> Note: To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
 
-Now, the application is created in the **quickstart** folder. Run the following command to navigate to the **quickstart** folder, and install the required **npm** packages.
+To create a new React application, run the following command.
 
 ```
-cd quickstart
+npm create vite@latest my-app
 ```
 
-> In the **quickstart** application, the Syncfusion<sup style="font-size:70%">&reg;</sup> component is added in the JavaScript file.
+This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
 
-Note: For production builds, register the Syncfusion license as required by Syncfusion licensing terms. See the Syncfusion licensing documentation for instructions.
+![Initial_setup](./images/Initial-setup.jpg)
 
-### Creating a React application with TypeScript
-
-To create React application with TypeScript, use the following command.
+To set up a React application in TypeScript environment, run the following command.
 
 ```
-create-react-app quickstart --template typescript
+npm create vite@latest my-app -- --template react-ts
+cd my-app
+npm run dev
 ```
 
-The TypeScript template creates the application in the **quickstart** folder. Change directory into **quickstart** before installing additional packages.
+To set up a React application in JavaScript environment, run the following command.
 
 ```
-cd quickstart
+npm create vite@latest my-app -- --template react
+cd my-app
+npm run dev
 ```
 
-### Adding Syncfusion<sup style="font-size:70%">&reg;</sup> packages
+## Adding Syncfusion<sup style="font-size:70%">&reg;</sup> React Circular Gauge packages
 
-All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install Circular Gauge package, use the following command.
+All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install the Circular Gauge component, use the following command.
 
 ```
 npm install @syncfusion/ej2-react-circulargauge --save
 ```
 
-### Adding Circular Gauge component to the Project
+> The –save will instruct NPM to include the Circular Gauge package inside of the dependencies section of the package.json.
+
+## Adding Circular Gauge component
 
 Add the Circular Gauge component to the application. To initialize the Circular Gauge control in the React application, import the component into `src/App.js` or `src/App.tsx` as appropriate. Use the example below to include the Circular Gauge component.
 
@@ -111,9 +107,22 @@ The below example shows the basic Circular Gauge.
 
  {% previewsample "page.domainurl/code-snippet/circulargauge/getting-started-cs1" %}
 
-## Set Pointer Value
+## Module injection
+
+Circular Gauge component features are segregated into individual feature-wise modules. To use a particular feature, inject its feature module using the `Inject` directive. The current application uses the Legend, Tooltip, and Annotation features of the Circular Gauge. The relevant feature module names and descriptions are listed below.
+
+* `Legend` - Inject this module to use legend feature.
+* `Tooltip` - Inject this module to use tooltip feature.
+* `Annotations` - Inject this module to use annotations feature.
+* `GaugeTooltip` - Inject this module to use gauge tooltip feature.
 
-You can change the pointer value in the above sample using [value](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/pointer#value-number) property in [pointers](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/pointer).
+These modules should be injected into the Circular Gauge using the `Inject` directive.
+
+> Additional feature modules are available [here](https://ej2.syncfusion.com/react/documentation/circular-gauge/gauge-user-interaction).
+
+## Set pointer value
+
+You can change the pointer value in the above sample using the [value](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/pointer#value-number) property in [pointers](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/pointer). The pointer indicates the current value on the gauge scale.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -125,3 +134,79 @@ You can change the pointer value in the above sample using [value](https://ej2.s
 {% endtabs %}
 
  {% previewsample "page.domainurl/code-snippet/circulargauge/getting-started-cs2" %}
+
+## Adding ranges
+
+Ranges are used to categorize the axis values into different sections with distinct colors. Add ranges to the gauge by configuring the [ranges](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/range) property. Each range can have a start value, end value, and color to visually represent different sections of the gauge.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/circulargauge/gauge-ranges-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/circulargauge/gauge-ranges-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/circulargauge/gauge-ranges-cs1" %}
+
+## Adding annotations
+
+Annotations provide the ability to add custom HTML content at specific locations within the gauge. Enable annotations by injecting the `Annotations` module and using the [annotations](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/annotation) property. Annotations are useful for displaying additional information, labels, or custom content on the gauge.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/circulargauge/gauge-annotations-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/circulargauge/gauge-annotations-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/circulargauge/gauge-annotations-cs1" %}
+
+## Adding legend
+
+Legends provide information about the ranges displayed in the circular gauge. Enable legends by setting the [visible](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/legendSettings#visible) property to `true` in [legendSettings](https://ej2.syncfusion.com/react/documentation/api/circular-gauge/legendSettings) and injecting the `Legend` module. Without the Legend module, the legend will not render.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/circulargauge/gauge-legend-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/circulargauge/gauge-legend-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/circulargauge/gauge-legend-cs1" %}
+
+## Run the application
+
+Run the `npm run dev` command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
+
+```
+npm run dev
+```
+
+The output appears as follows.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/circulargauge/gauge-legend-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/circulargauge/gauge-legend-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/circulargauge/gauge-legend-cs1" %}
+
+> Refer to the [React Circular Gauge](https://www.syncfusion.com/react-components/react-circular-gauge) feature tour page for its groundbreaking feature representations. You can also explore our [React Circular Gauge Component example](https://ej2.syncfusion.com/react/demos/#/material3/circular-gauge/default) that shows how to render the Circular Gauge in React.
+
+## See also
+
+* [Getting Started with Next.js](https://ej2.syncfusion.com/react/documentation/circular-gauge/nextjs-getting-started)
+* [Circular Gauge Axes](https://ej2.syncfusion.com/react/documentation/circular-gauge/gauge-axes)
+* [Circular Gauge Ranges](https://ej2.syncfusion.com/react/documentation/circular-gauge/gauge-ranges)
+* [Circular Gauge Pointers](https://ej2.syncfusion.com/react/documentation/circular-gauge/gauge-pointers)
+* [Circular Gauge Annotations](https://ej2.syncfusion.com/react/documentation/circular-gauge/gauge-annotations)

ej2-react/code-snippet/bullet-chart/code-path/getting-started/datasource-cs1/app/index.jsx

@@ -1,3 +1,4 @@
+{% raw %}
 
 import { BulletChartComponent } from '@syncfusion/ej2-react-charts';
 import * as React from "react";
@@ -18,3 +19,5 @@ export default App;
 
 const root = createRoot(document.getElementById("charts"));
 root.render(<App />);
+
+{% endraw %}

ej2-react/code-snippet/bullet-chart/code-path/getting-started/datasource-cs1/app/index.tsx

@@ -1,4 +1,4 @@
-
+{% raw %}
 
 
 
@@ -32,3 +32,4 @@ export default App;
 const root = createRoot(document.getElementById("charts")!);
 root.render(<App />);
 
+{% endraw %}

ej2-react/code-snippet/circulargauge/gauge-annotations-cs1/app/index.jsx

@@ -1,22 +1,25 @@
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, Inject, Annotations, AnnotationsDirective, AnnotationDirective } from '@syncfusion/ej2-react-circulargauge';
-export function App() {
-   return(
-  <CircularGaugeComponent>
-    <Inject services={[ Annotations ]}/>
-    <AxesDirective>
-      <AxisDirective>
-        <PointersDirective>
-            <PointerDirective value = {50}></PointerDirective>
-        </PointersDirective>
-        <AnnotationsDirective>
-            <AnnotationDirective content='<div><div><span>Pointer Value : 50</span></div></div>' zIndex='1'/>
-        </AnnotationsDirective>
-      </AxisDirective>
-    </AxesDirective>
-  </CircularGaugeComponent>);
+
+function App() {
+  return (
+    <CircularGaugeComponent>
+      <Inject services={[Annotations]} />
+      <AxesDirective>
+        <AxisDirective>
+          <PointersDirective>
+            <PointerDirective value={50} />
+          </PointersDirective>
+          <AnnotationsDirective>
+            <AnnotationDirective content='<div><div><span>Pointer Value : 50</span></div></div>' zIndex='1' />
+          </AnnotationsDirective>
+        </AxisDirective>
+      </AxesDirective>
+    </CircularGaugeComponent>
+  );
 }
-const root = ReactDOM.createRoot(document.getElementById('container'));
+
+const root = createRoot(document.getElementById('container'));
 root.render(<App />);

ej2-react/code-snippet/circulargauge/gauge-annotations-cs1/app/index.tsx

@@ -1,22 +1,25 @@
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CircularGaugeComponent, AxesDirective, AxisDirective, PointersDirective, PointerDirective, Inject, Annotations, AnnotationsDirective, AnnotationDirective } from '@syncfusion/ej2-react-circulargauge';
-export function App() {
-   return(
-  <CircularGaugeComponent>
-    <Inject services={[ Annotations ]}/>
-    <AxesDirective>
-      <AxisDirective>
-        <PointersDirective>
-            <PointerDirective value = {50}></PointerDirective>
-        </PointersDirective>
-        <AnnotationsDirective>
-            <AnnotationDirective content='<div><div><span>Pointer Value : 50</span></div></div>' zIndex='1'/>
-        </AnnotationsDirective>
-      </AxisDirective>
-    </AxesDirective>
-  </CircularGaugeComponent>);
+
+function App() {
+  return (
+    <CircularGaugeComponent>
+      <Inject services={[Annotations]} />
+      <AxesDirective>
+        <AxisDirective>
+          <PointersDirective>
+            <PointerDirective value={50} />
+          </PointersDirective>
+          <AnnotationsDirective>
+            <AnnotationDirective content='<div><div><span>Pointer Value : 50</span></div></div>' zIndex='1' />
+          </AnnotationsDirective>
+        </AxisDirective>
+      </AxesDirective>
+    </CircularGaugeComponent>
+  );
 }
-const root = ReactDOM.createRoot(document.getElementById('container'));
+
+const root = createRoot(document.getElementById('container')!);
 root.render(<App />);