vk-typescript-cli 1.0.0

package/src/templates/angular/scheduler.component.ts

@@ -0,0 +1,75 @@
+import { Component, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ScheduleComponent,
+  ScheduleModule,
+  DayService,
+  WeekService,
+  WorkWeekService,
+  MonthService,
+  AgendaService,
+  ResizeService,
+  DragAndDropService,
+  DragEventArgs,
+  EventSettingsModel
+} from '@syncfusion/ej2-angular-schedule';
+
+@Component({
+  selector: 'app-scheduler',
+  standalone: true,
+  imports: [CommonModule, ScheduleModule],
+  providers: [
+    DayService,
+    WeekService,
+    WorkWeekService,
+    MonthService,
+    AgendaService,
+    ResizeService,
+    DragAndDropService
+  ],
+  templateUrl: './scheduler.component.html'
+})
+export class SchedulerComponent {
+  @ViewChild('scheduleObj')
+  public scheduleObj?: ScheduleComponent;
+
+  public selectedDate: Date = new Date(2021, 0, 10);
+
+  public dataSource: Object[] = [
+    { "Id": 1, "Subject": "Explosion of Betelgeuse Star", "Location": "Space Center USA", "StartTime": "2021-01-10T04:00:00.000Z", "EndTime": "2021-01-10T05:30:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 2, "Subject": "Thule Air Crash Report", "Location": "Newyork City", "StartTime": "2021-01-11T06:30:00.000Z", "EndTime": "2021-01-11T08:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 3, "Subject": "Blue Moon Eclipse", "Location": "Space Center USA", "StartTime": "2021-01-12T04:00:00.000Z", "EndTime": "2021-01-12T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 4, "Subject": "Meteor Showers in 2021", "Location": "Space Center USA", "StartTime": "2021-01-13T07:30:00.000Z", "EndTime": "2021-01-13T09:00:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 5, "Subject": "Milky Way as Melting pot", "Location": "Space Center USA", "StartTime": "2021-01-14T06:30:00.000Z", "EndTime": "2021-01-14T08:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 6, "Subject": "Mysteries of Bermuda Triangle", "Location": "Bermuda", "StartTime": "2021-01-14T04:00:00.000Z", "EndTime": "2021-01-14T05:30:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 7, "Subject": "Glaciers and Snowflakes", "Location": "Himalayas", "StartTime": "2021-01-15T05:30:00.000Z", "EndTime": "2021-01-15T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 8, "Subject": "Life on Mars", "Location": "Space Center USA", "StartTime": "2021-01-16T03:30:00.000Z", "EndTime": "2021-01-16T04:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 9, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-18T05:30:00.000Z", "EndTime": "2021-01-18T07:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 10, "Subject": "Wildlife Galleries", "Location": "Africa", "StartTime": "2021-01-20T05:30:00.000Z", "EndTime": "2021-01-20T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 11, "Subject": "Best Photography 2021", "Location": "London", "StartTime": "2021-01-21T04:00:00.000Z", "EndTime": "2021-01-21T05:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 12, "Subject": "Smarter Puppies", "Location": "Sweden", "StartTime": "2021-01-08T04:30:00.000Z", "EndTime": "2021-01-08T06:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 13, "Subject": "Myths of Andromeda Galaxy", "Location": "Space Center USA", "StartTime": "2021-01-06T05:00:00.000Z", "EndTime": "2021-01-06T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 14, "Subject": "Aliens vs Humans", "Location": "Research Center of USA", "StartTime": "2021-01-05T04:30:00.000Z", "EndTime": "2021-01-05T06:00:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 15, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-19T04:00:00.000Z", "EndTime": "2021-01-19T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 16, "Subject": "Sky Gazers", "Location": "Alaska", "StartTime": "2021-01-22T05:30:00.000Z", "EndTime": "2021-01-22T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 17, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-11T00:00:00.000Z", "EndTime": "2021-01-11T02:00:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 18, "Subject": "Space Galaxies and Planets", "Location": "Space Center USA", "StartTime": "2021-01-11T11:30:00.000Z", "EndTime": "2021-01-11T13:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 19, "Subject": "Lifecycle of Bumblebee", "Location": "San Fransisco", "StartTime": "2021-01-14T00:30:00.000Z", "EndTime": "2021-01-14T02:00:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 20, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-14T10:30:00.000Z", "EndTime": "2021-01-14T12:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 21, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-10T08:30:00.000Z", "EndTime": "2021-01-10T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 22, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-12T09:00:00.000Z", "EndTime": "2021-01-12T10:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 23, "Subject": "Sky Gazers", "Location": "Greenland", "StartTime": "2021-01-15T09:00:00.000Z", "EndTime": "2021-01-15T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 24, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-16T07:00:00.000Z", "EndTime": "2021-01-16T09:00:00.000Z", "CategoryColor": "#7fa900" }
+  ];
+
+  public eventSettings: EventSettingsModel = {
+    dataSource: this.dataSource
+  };
+
+  public onDragStart(args: DragEventArgs): void {
+    if (args.navigation) {
+      args.navigation.enable = true;
+    }
+  }
+}

package/src/templates/angular/spreadsheet-editor.component.html

@@ -0,0 +1,42 @@
+<div class="control-pane" style="padding: 50px; margin: 0 auto">
+  <ejs-spreadsheet
+    #spreadsheet
+    [openUrl]="openUrl"
+    [saveUrl]="saveUrl"
+    (created)="onCreated()"
+  >
+    <e-sheets>
+      <e-sheet name="Car Sales Report">
+        <e-ranges>
+          <e-range [dataSource]="defaultData"></e-range>
+        </e-ranges>
+
+        <e-rows>
+          <e-row [index]="12">
+            <e-cells>
+              <e-cell
+                [index]="4"
+                value="Total Amount:"
+                [style]="boldRight"
+              ></e-cell>
+
+              <e-cell
+                formula="=SUM(F2:F12)"
+                [style]="bold"
+              ></e-cell>
+            </e-cells>
+          </e-row>
+        </e-rows>
+
+        <e-columns>
+          <e-column [width]="180"></e-column>
+          <e-column [width]="130"></e-column>
+          <e-column [width]="130"></e-column>
+          <e-column [width]="180"></e-column>
+          <e-column [width]="130"></e-column>
+          <e-column [width]="120"></e-column>
+        </e-columns>
+      </e-sheet>
+    </e-sheets>
+  </ejs-spreadsheet>
+</div>

package/src/templates/angular/spreadsheet-editor.component.ts

@@ -0,0 +1,61 @@
+import { Component, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SpreadsheetModule,
+  SpreadsheetComponent,
+  CellStyleModel
+} from '@syncfusion/ej2-angular-spreadsheet';
+
+@Component({
+  selector: 'app-spreadsheet-editor',
+  standalone: true,
+  imports: [CommonModule, SpreadsheetModule],
+  templateUrl: './spreadsheet-editor.component.html'
+})
+export class SpreadsheetEditorComponent {
+  @ViewChild('spreadsheet')
+  public spreadsheetObj!: SpreadsheetComponent;
+
+  public openUrl: string = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
+
+  public saveUrl: string = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
+
+  public defaultData: Object[] = [
+    { "Customer Name": "Romona Heaslip", "Model": "Taurus", "Color": "Aquamarine", "Payment Mode": "Debit Card", "Delivery Date": "07-11-2015", "Amount": "8529.22" },
+    { "Customer Name": "Clare Batterton", "Model": "Sparrow", "Color": "Pink", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-13-2016", "Amount": "17866.19" },
+    { "Customer Name": "Eamon Traise", "Model": "Grand Cherokee", "Color": "Blue", "Payment Mode": "Net Banking", "Delivery Date": "09-04-2015", "Amount": "13853.09" },
+    { "Customer Name": "Julius Gorner", "Model": "GTO", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-15-2017", "Amount": "2338.74" },
+    { "Customer Name": "Jenna Schoolfield", "Model": "LX", "Color": "Yellow", "Payment Mode": "Credit Card", "Delivery Date": "10-08-2014", "Amount": "9578.45" },
+    { "Customer Name": "Marylynne Harring", "Model": "Catera", "Color": "Green", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-01-2017", "Amount": "19141.62" },
+    { "Customer Name": "Vilhelmina Leipelt", "Model": "7 Series", "Color": "Goldenrod", "Payment Mode": "Credit Card", "Delivery Date": "12-20-2015", "Amount": "6543.30" },
+    { "Customer Name": "Barby Heisler", "Model": "Corvette", "Color": "Red", "Payment Mode": "Credit Card", "Delivery Date": "11-24-2014", "Amount": "13035.06" },
+    { "Customer Name": "Karyn Boik", "Model": "Regal", "Color": "Indigo", "Payment Mode": "Debit Card", "Delivery Date": "05-12-2014", "Amount": "18488.80" },
+    { "Customer Name": "Jeanette Pamplin", "Model": "S4", "Color": "Fuscia", "Payment Mode": "Net Banking", "Delivery Date": "12-30-2014", "Amount": "12317.04" },
+    { "Customer Name": "Cristi Espinos", "Model": "TL", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-18-2013", "Amount": "6230.13" }
+  ];
+
+  public boldRight: CellStyleModel = {
+    fontWeight: 'bold',
+    textAlign: 'right'
+  };
+
+  public bold: CellStyleModel = {
+    fontWeight: 'bold'
+  };
+
+  public onCreated(): void {
+    if (this.spreadsheetObj) {
+      this.spreadsheetObj.cellFormat(
+        {
+          fontWeight: 'bold',
+          textAlign: 'center',
+          verticalAlign: 'middle'
+        },
+        'A1:F1'
+      );
+
+      this.spreadsheetObj.numberFormat('$#,##0.00', 'F2:F12');
+      this.spreadsheetObj.numberFormat('m/d/yyyy', 'E2:E12');
+    }
+  }
+}

package/src/templates/chart-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateChartTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `Chart${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const chartDir = path.join(componentsDir, 'chart');
+    await copyTemplateFiles('angular', ['chart.component.ts', 'chart.component.html'], '', chartDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'Chart.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'ChartView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'Chart.ts', componentsDir);
+  }
+}

package/src/templates/diagram-template.js

@@ -0,0 +1,26 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateDiagramTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `Diagram${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const diagramDir = path.join(componentsDir, 'diagram');
+    await copyTemplateFiles(
+      'angular',
+      ['diagram.component.ts', 'diagram.component.html'],
+      '',
+      diagramDir
+    );
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'Diagram.vue', componentsDir);
+
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'DiagramView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'Diagram.ts', componentsDir);
+  }
+}

package/src/templates/docx-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateDOCXTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `DOCXEditor${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const docxEditorDir = path.join(componentsDir, 'docx-editor');
+    await copyTemplateFiles('angular', ['docx-editor.component.ts', 'docx-editor.component.html'], '', docxEditorDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'DOCXEditor.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'DOCXEditorView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'DOCXEditor.ts', componentsDir);
+  }
+}

package/src/templates/filemanager-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateFileManagerTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `FileManager${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const fmDir = path.join(componentsDir, 'file-manager');
+    await copyTemplateFiles('angular', ['filemanager.component.ts', 'filemanager.component.html'], '', fmDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'FileManager.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'FileManagerView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'FileManager.ts', componentsDir);
+  }
+}

package/src/templates/gantt-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateGanttTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `Gantt${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const ganttDir = path.join(componentsDir, 'gantt');
+    await copyTemplateFiles('angular', ['gantt.component.ts', 'gantt.component.html'], '', ganttDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'Gantt.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'GanttView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'Gantt.ts', componentsDir);
+  }
+}

package/src/templates/grid-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateGridTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `Grid${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const gridDir = path.join(componentsDir, 'grid');
+    await copyTemplateFiles('angular', ['grid.component.ts', 'grid.component.html'], '', gridDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'Grid.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'GridView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'Grid.ts', componentsDir);
+  }
+}

package/src/templates/pdfviewer-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generatePDFTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `PDFViewer${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const pdfViewerDir = path.join(componentsDir, 'pdf-viewer');
+    await copyTemplateFiles('angular', ['pdf-viewer.component.ts', 'pdf-viewer.component.html'], '', pdfViewerDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'PDFViewer.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'PDFViewerView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'PDFViewer.ts', componentsDir);
+  }
+}

package/src/templates/react/Chart.jsx

@@ -0,0 +1,81 @@
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Legend, Double, Tooltip, Highlight, SeriesLabel } from '@syncfusion/ej2-react-charts';
+import { Browser } from '@syncfusion/ej2-base';
+
+export let vietnamData = [
+  { x: 2016, y: 7.8 },
+  { x: 2017, y: 10.3 },
+  { x: 2018, y: 15.5 },
+  { x: 2019, y: 17.5 },
+  { x: 2020, y: 19.5 },
+  { x: 2021, y: 23.0 },
+  { x: 2022, y: 20.0 },
+  { x: 2023, y: 19.0 },
+  { x: 2024, y: 22.1 }
+];
+
+export let indonesiaData = [
+  { x: 2016, y: 4.8 },
+  { x: 2017, y: 5.2 },
+  { x: 2018, y: 6.2 },
+  { x: 2019, y: 7.8 },
+  { x: 2020, y: 9.3 },
+  { x: 2021, y: 14.3 },
+  { x: 2022, y: 15.6 },
+  { x: 2023, y: 16.0 },
+  { x: 2024, y: 17.0 }
+];
+
+export let franceData = [
+  { x: 2016, y: 14.6 },
+  { x: 2017, y: 15.5 },
+  { x: 2018, y: 15.4 },
+  { x: 2019, y: 14.4 },
+  { x: 2020, y: 11.6 },
+  { x: 2021, y: 13.9 },
+  { x: 2022, y: 12.1 },
+  { x: 2023, y: 10.0 },
+  { x: 2024, y: 10.8 }
+];
+
+export let polandData = [
+  { x: 2016, y: 8.9 },
+  { x: 2017, y: 10.3 },
+  { x: 2018, y: 10.8 },
+  { x: 2019, y: 9.0 },
+  { x: 2020, y: 7.9 },
+  { x: 2021, y: 8.5 },
+  { x: 2022, y: 7.4 },
+  { x: 2023, y: 6.4 },
+  { x: 2024, y: 7.1 }
+];
+
+export let mexicoData = [
+  { x: 2016, y: 19.0 },
+  { x: 2017, y: 20.0 },
+  { x: 2018, y: 20.2 },
+  { x: 2019, y: 18.4 },
+  { x: 2020, y: 16.8 },
+  { x: 2021, y: 18.5 },
+  { x: 2022, y: 18.4 },
+  { x: 2023, y: 16.3 },
+  { x: 2024, y: 13.7 }
+];
+
+export default function Chart () {
+  return (
+    <div className="control-pane" style={{ margin: "50px 0px" }}>
+      <div className="control-section">
+        <ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'Double', interval: 1, edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume in million metric tons', labelFormat: '{value}', rangePadding: 'None', minimum: 0, maximum: 25, interval: 5, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} tooltip={{ enable: true, enableHighlight: true, showNearestTooltip: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>' }} legendSettings={{ enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} title="Annual Crude Steel Production by Country (2016–2024)" subTitle="Source: wikipedia.org">
+          <Inject services={[LineSeries, Double, Legend, Tooltip, Highlight, SeriesLabel]} />
+          <SeriesCollectionDirective>
+            <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Circle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={indonesiaData} xName="x" yName="y" name="Indonesia" width={2} marker={{ visible: true, width: 6, height: 6, shape: 'Triangle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Diamond', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" width={2} marker={{ visible: true, width: 5, height: 5, shape: 'Rectangle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Pentagon', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+          </SeriesCollectionDirective>
+        </ChartComponent>
+      </div>
+    </div>
+  )
+}

package/src/templates/react/Chart.tsx

@@ -0,0 +1,81 @@
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Legend, Double, Tooltip, Highlight, SeriesLabel } from '@syncfusion/ej2-react-charts';
+import { Browser } from '@syncfusion/ej2-base';
+
+export let vietnamData: Object[] = [
+  { x: 2016, y: 7.8 },
+  { x: 2017, y: 10.3 },
+  { x: 2018, y: 15.5 },
+  { x: 2019, y: 17.5 },
+  { x: 2020, y: 19.5 },
+  { x: 2021, y: 23.0 },
+  { x: 2022, y: 20.0 },
+  { x: 2023, y: 19.0 },
+  { x: 2024, y: 22.1 }
+];
+
+export let indonesiaData: Object[] = [
+  { x: 2016, y: 4.8 },
+  { x: 2017, y: 5.2 },
+  { x: 2018, y: 6.2 },
+  { x: 2019, y: 7.8 },
+  { x: 2020, y: 9.3 },
+  { x: 2021, y: 14.3 },
+  { x: 2022, y: 15.6 },
+  { x: 2023, y: 16.0 },
+  { x: 2024, y: 17.0 }
+];
+
+export let franceData: Object[] = [
+  { x: 2016, y: 14.6 },
+  { x: 2017, y: 15.5 },
+  { x: 2018, y: 15.4 },
+  { x: 2019, y: 14.4 },
+  { x: 2020, y: 11.6 },
+  { x: 2021, y: 13.9 },
+  { x: 2022, y: 12.1 },
+  { x: 2023, y: 10.0 },
+  { x: 2024, y: 10.8 }
+];
+
+export let polandData: Object[] = [
+  { x: 2016, y: 8.9 },
+  { x: 2017, y: 10.3 },
+  { x: 2018, y: 10.8 },
+  { x: 2019, y: 9.0 },
+  { x: 2020, y: 7.9 },
+  { x: 2021, y: 8.5 },
+  { x: 2022, y: 7.4 },
+  { x: 2023, y: 6.4 },
+  { x: 2024, y: 7.1 }
+];
+
+export let mexicoData: Object[] = [
+  { x: 2016, y: 19.0 },
+  { x: 2017, y: 20.0 },
+  { x: 2018, y: 20.2 },
+  { x: 2019, y: 18.4 },
+  { x: 2020, y: 16.8 },
+  { x: 2021, y: 18.5 },
+  { x: 2022, y: 18.4 },
+  { x: 2023, y: 16.3 },
+  { x: 2024, y: 13.7 }
+];
+
+export default function Chart () {
+  return (
+    <div className="control-pane" style={{ margin: "50px 0px" }}>
+      <div className="control-section">
+        <ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ valueType: 'Double', interval: 1, edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 } }} primaryYAxis={{ title: 'Volume in million metric tons', labelFormat: '{value}', rangePadding: 'None', minimum: 0, maximum: 25, interval: 5, lineStyle: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 } }} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} tooltip={{ enable: true, enableHighlight: true, showNearestTooltip: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}M</b>' }} legendSettings={{ enableHighlight: true }} width={Browser.isDevice ? '100%' : '75%'} title="Annual Crude Steel Production by Country (2016–2024)" subTitle="Source: wikipedia.org">
+          <Inject services={[LineSeries, Double, Legend, Tooltip, Highlight, SeriesLabel]} />
+          <SeriesCollectionDirective>
+            <SeriesDirective dataSource={vietnamData} xName="x" yName="y" name="Vietnam" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Circle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={indonesiaData} xName="x" yName="y" name="Indonesia" width={2} marker={{ visible: true, width: 6, height: 6, shape: 'Triangle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={franceData} xName="x" yName="y" name="France" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Diamond', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={polandData} xName="x" yName="y" name="Poland" width={2} marker={{ visible: true, width: 5, height: 5, shape: 'Rectangle', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+            <SeriesDirective dataSource={mexicoData} xName="x" yName="y" name="Mexico" width={2} marker={{ visible: true, width: 7, height: 7, shape: 'Pentagon', isFilled: true }} type="Line" labelSettings={{ visible: true }}></SeriesDirective>
+          </SeriesCollectionDirective>
+        </ChartComponent>
+      </div>
+    </div>
+  )
+}