Documentation(1042484):Fixed the publishing issues in chartSDK

chart-sdk/angular/treemap/how-to/drilldown-with-label.md

@@ -46,7 +46,7 @@ Labels can be added to show additional information about the items in the TreeMa
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}
-{% includecode-snippet/chart-sdk/angular/treemap/getting-started/treemap-cs57/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/treemap/getting-started/treemap-cs57/src/app.component.ts %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}

chart-sdk/javascript/3d-circular-charts/tooltip.md

@@ -102,10 +102,10 @@ If the specified format does not match the resolved value type, the original val
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/inline-format/index.js %}
+{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/tooltip-inline-format/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/inline-format/index.html %}
+{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/tooltip-inline-format/index.html %}
 {% endhighlight %}
 {% endtabs %}
 

chart-sdk/javascript/circular-chart-3d/tooltip.md

@@ -102,10 +102,10 @@ If the specified format does not match the resolved value type, the original val
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/inline-format/index.js %}
+{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/tooltip-inline-format/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/inline-format/index.html %}
+{% include code-snippet/chart-sdk/javascript/3d-circular-charts/user-interaction/tooltip-inline-format/index.html %}
 {% endhighlight %}
 {% endtabs %}
 

chart-sdk/javascript/sparkline/es5-getting-started.md

@@ -69,10 +69,10 @@ The global scripts added in the previous step register the `ej.charts.Sparkline`
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
-{% include code-snippet/chart-sdk/javascript/sparkline-charts/index.js %}
+{% include code-snippet/chart-sdk/javascript/sparkline-charts/getting-started-cs1/index.js %}
 {% endhighlight %}
 {% highlight html tabtitle="index.html" %}
-{% include code-snippet/chart-sdk/javascript/sparkline-charts/index.html %}
+{% include code-snippet/chart-sdk/javascript/sparkline-charts/getting-started-cs1/index.html %}
 {% endhighlight %}
 {% endtabs %}
 

chart-sdk/react/linear-gauge/axis.md

@@ -24,7 +24,7 @@ To change the pointer value from the default value of the gauge, set the [`value
 {% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/chart-sdk/react/linear-gauge/code-path/getting-started-cs3/app/index.jsx %}
 {% endhighlight %}
-{% highlight tsx tabtitle="app.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/chart-sdk/react/linear-gauge/code-path/getting-started-cs3/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}

chart-sdk/react/linear-gauge/getting-started.md

@@ -78,7 +78,7 @@ npm install @syncfusion/ej2-react-lineargauge
 The React Linear Gauge component can be added to the application by following these steps. Add the Linear Gauge component to the `src/App.tsx` (or `src/App.jsx`) file using the following code.
 
 {% tabs %}
-{% highlight jsx tabtitle="app.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 
 import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
 import * as React from 'react';
@@ -89,7 +89,7 @@ function App() {
 export default App;
 
 {% endhighlight %}
-{% highlight tsx tabtitle="app.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 
 import { LinearGaugeComponent } from '@syncfusion/ej2-react-lineargauge';
 import * as React from 'react';
@@ -105,7 +105,7 @@ export default App;
 Make sure your `src/main.tsx` (or `src/main.jsx`) file renders the `App` component inside an element with `id="container"`. A minimal example is shown below.
 
 {% tabs %}
-{% highlight jsx tabtitle="main.jsx" %}
+{% highlight js tabtitle="main.jsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -115,7 +115,7 @@ const root = ReactDOM.createRoot(document.getElementById('container'));
 root.render(<App />);
 
 {% endhighlight %}
-{% highlight tsx tabtitle="main.tsx" %}
+{% highlight ts tabtitle="main.tsx" %}
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';

chart-sdk/react/linear-gauge/pointers.md

@@ -15,10 +15,10 @@ domainurl: https://help.syncfusion.com/chart-sdk
 The pointer value is demonstrated in the following sample using the [`value`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/pointer#value-number) property of a `PointerDirective` inside the `PointersDirective` collection of the axis. The pointer can be customized with a different color using the `color` property to make it visually distinct.
 
 {% tabs %}
-{% highlight jsx tabtitle="app.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/chart-sdk/react/linear-gauge/code-path/getting-started-cs4/app/index.jsx %}
 {% endhighlight %}
-{% highlight tsx tabtitle="app.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/chart-sdk/react/linear-gauge/code-path/getting-started-cs4/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}

chart-sdk/react/linear-gauge/ranges.md

@@ -29,10 +29,10 @@ Range is the set of values in the axis. The range can be defined using the [`sta
 The range of the axis can be set using the [`minimum`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#minimum-number) and [`maximum`](https://ej2.syncfusion.com/react/documentation/api/linear-gauge/axis#maximum-number) properties of the Linear Gauge. The default values are `0` for `minimum` and `100` for `maximum`. These properties define the start and end values displayed on the gauge axis.
 
 {% tabs %}
-{% highlight jsx tabtitle="app.jsx" %}
+{% highlight js tabtitle="app.jsx" %}
 {% include code-snippet/chart-sdk/react/linear-gauge/code-path/getting-started-cs2/app/index.jsx %}
 {% endhighlight %}
-{% highlight tsx tabtitle="app.tsx" %}
+{% highlight ts tabtitle="app.tsx" %}
 {% include code-snippet/chart-sdk/react/linear-gauge/code-path/getting-started-cs2/app/index.tsx %}
 {% endhighlight %}
 {% endtabs %}

chart-sdk/react/maps/getting-started.md

@@ -141,11 +141,17 @@ import { MapsComponent, Inject, DataLabel, LayerDirective, LayersDirective } fro
 
 function App() {
     return (
+        const dataLabelSettings = {
+            visible: true,
+            labelPath: 'name',
+            smartLabelMode: 'Hide'
+        };
+
         <div className="App">
             <MapsComponent id="maps">
                 <Inject services={[DataLabel]} />
                 <LayersDirective>
-                    <LayerDirective shapeData={world_map} dataLabelSettings={{ visible: true, labelPath: 'name', smartLabelMode: 'Hide' }}>
+                    <LayerDirective shapeData={world_map} dataLabelSettings={dataLabelSettings}>
                     </LayerDirective>
                 </LayersDirective>
             </MapsComponent>
@@ -180,7 +186,7 @@ Open the URL shown in the terminal (for example, `http://localhost:5173/`) in yo
 
 If the map does not appear as expected, work through the following common issues:
 
-* **Blank canvas or zero-height map** — The `MapsComponent` fills its container, so a missing height on the parent element is the most common cause. Wrap the component in a sized container (for example, `<div style={{ height: 600 }}>`) or set CSS such as `#maps { height: 600px; }`.
+* **Blank canvas or zero-height map**: The `MapsComponent` fills its container, so a missing height on the parent element is the most common cause. Wrap the component in a container with a CSS class, such as `<div className="map-container">`, and define `.map-container { height: 600px; }`.
 * **"Cannot find module './world_map'" / shape data not rendered** — Make sure `world_map.ts` is saved in `src/` and that the import path matches the file location and the file's export style (named vs default export).
 * **Data labels do not show up** — Confirm that the `DataLabel` service is injected via `<Inject services={[DataLabel]} />` and that `dataLabelSettings.visible` is `true`. Also confirm the `labelPath` value (for example, `'name'`) matches a key in the GeoJSON's `Feature.properties`.
 * **`'Inject' is not exported` or module not found** — Update `@syncfusion/ej2-react-maps` to a supported version and restart the dev server.

chart-sdk/react/range-navigator/tool-tip.md

@@ -23,8 +23,9 @@ import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject } f
 import * as React from "react";
 
 function App() {
+  const tooltipSettings = { enable: true };
   return (
-    <RangeNavigatorComponent id="charts" tooltip={{ enable: true }}>
+    <RangeNavigatorComponent id="charts" tooltip={tooltipSettings}>
       <Inject services={[AreaSeries, DateTime, RangeTooltip]} />
     </RangeNavigatorComponent>
   );

chart-sdk/react/treemap/getting-started.md

@@ -73,7 +73,7 @@ npm install @syncfusion/ej2-react-treemap
 
 Replace the contents of `src/App.jsx` (or `src/App.tsx` for TypeScript) with the following code to render a simple TreeMap:
 
-```tsx
+```
 
 import * as React from 'react';
 import { TreeMapComponent } from '@syncfusion/ej2-react-treemap';
@@ -86,12 +86,13 @@ export function App() {
     { State: "Ecuador", Count: 7 },
     { State: "Chile", Count: 6 }
   ];
+  const leafItemSettings = { labelPath: 'State' };
   return (
     <TreeMapComponent
       height="350px"
       dataSource={dataSource}
       weightValuePath="Count"
-      leafItemSettings={{ labelPath: 'State' }}
+      leafItemSettings={leafItemSettings}
     />
   );
 }
@@ -104,7 +105,7 @@ export default App;
 
 Open `src/main.jsx` (or `src/main.tsx`) and ensure the `App` component is mounted to the DOM:
 
-```tsx
+```
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
@@ -132,7 +133,7 @@ The TreeMap component is segregated into individual feature-wise modules. To use
 
 The example below shows how to inject the `TreeMapLegend` module:
 
-```tsx
+```
 import { TreeMapComponent, Inject, TreeMapLegend } from '@syncfusion/ej2-react-treemap';
 
 <TreeMapComponent dataSource={dataSource} weightValuePath="Count">

code-snippet/chart-sdk/angular/accumulation-chart/accumulation-chart-data-cs1/angular.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

code-snippet/chart-sdk/angular/accumulation-chart/accumulation-chart-data-cs1/index.css

@@ -0,0 +1,22 @@
+#loader {
+    color: #008cff;
+    font-family:  'Helvetica Neue','calibiri';
+    font-size:16px;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+}
+.animation {
+    background: #333333;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    height: 100px;
+    width: 100px;
+}
+
+#chart-container {
+    display: block;
+    height: 350px;
+}

code-snippet/chart-sdk/angular/accumulation-chart/accumulation-chart-data-cs1/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>EJ2 Animation</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript UI Controls" />
+
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+  </head>
+  <body style="margin-top: 125px">
+    <app-root>
+      <div id="loader">Loading....</div>
+    </app-root>
+  </body>
+</html>

code-snippet/chart-sdk/angular/accumulation-chart/accumulation-chart-data-cs1/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "syncfusion-component",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/core": "17.1.2",
+    "@angular/platform-browser": "17.1.2",
+    "@angular/platform-browser-dynamic": "17.1.2",
+    "@syncfusion/ej2-charts": "*",
+    "@syncfusion/ej2-angular-buttons": "*",
+    "@syncfusion/ej2-angular-charts": "*",
+    "@syncfusion/ej2-angular-base": "*",
+    "@syncfusion/ej2-angular-grids": "*",
+    "@angular/animations": "17.1.2",
+    "@angular/common": "17.1.2",
+    "@angular/compiler": "17.1.2",
+    "@angular/forms": "17.1.2",
+    "@angular/router": "17.1.2",
+    "moment": "2.29.4",
+    "rxjs": "7.8.0",
+    "tslib": "2.3.0",
+    "zone.js": "0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "17.1.2",
+    "@angular/cli": "17.1.2",
+    "@angular/compiler-cli": "17.1.2",
+    "@types/jasmine": "4.3.0",
+    "jasmine-core": "4.5.0",
+    "karma": "6.4.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.2.0",
+    "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.0.0",
+    "typescript": "5.3.3"
+  }
+}