Merge pull request #1751 from ag-grid/ag-11506/generate-financial-cha…

…rts-fw-tags

AG-11506 - Generate Financial Charts FW tags

plugins/ag-charts-generate-example-files/src/executors/generate/generator/transformation-scripts/chart-vanilla-to-angular.ts

@@ -1,6 +1,6 @@
 import { convertTemplate, getImport } from './angular-utils';
 import { wrapOptionsUpdateCode } from './chart-utils';
-import { addBindingImports, convertFunctionToProperty, isInstanceMethod } from './parser-utils';
+import { addBindingImports, convertFunctionToProperty, isFinancialCharts, isInstanceMethod } from './parser-utils';
 import { toKebabCase, toTitleCase } from './string-utils';
 
 export function processFunction(code: string): string {
@@ -12,6 +12,7 @@ function getImports(bindings, componentFileNames: string[], { typeParts }): stri
  chartSettings: { enterprise = false },
  } = bindings;
 
+ const type = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
  const bImports = bindings.imports.map((i) => ({
  ...i,
  imports: i.imports.filter((imp) => imp !== 'AgCharts'),
@@ -23,7 +24,7 @@ function getImports(bindings, componentFileNames: string[], { typeParts }): stri
  });
 
  const imports = [`import { Component${bindings.usesChartApi ? ', ViewChild' : ''} } from '@angular/core';`];
- imports.push(`import { AgCharts } from 'ag-charts-angular';`);
+ imports.push(`import { ${type} } from 'ag-charts-angular';`);
 
  addBindingImports([...bImports], imports, true, true);
 
@@ -48,11 +49,12 @@ function getComponentMetadata(bindings: any, property: any) {
  return { propertyAttributes, propertyVars, propertyAssignments };
 }
 
-function getAngularTag(attributes: string[]) {
- return `<ag-charts
+function getAngularTag(bindings: any, attributes: string[]) {
+ const tag = isFinancialCharts(bindings) ? 'ag-financial-charts' : 'ag-charts';
+ return `<${tag}
  ${attributes.join(`
  `)}
- ></ag-charts>`;
+ ></${tag}>`;
 }
 
 function getTemplate(bindings: any, id: string, attributes: string[]): string {
@@ -68,7 +70,7 @@ function getTemplate(bindings: any, id: string, attributes: string[]): string {
  }
  });
 
- const agChartTag = getAngularTag(attributes);
+ const agChartTag = getAngularTag(bindings, attributes);
 
  let template = bindings.template ?? agChartTag;
  Object.values(bindings.placeholders).forEach((placeholder) => {
@@ -80,6 +82,7 @@ function getTemplate(bindings: any, id: string, attributes: string[]): string {
 
 export async function vanillaToAngular(bindings: any, componentFileNames: string[]): Promise<string> {
  const { properties, declarations, optionsTypeInfo } = bindings;
+ const type = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
  const opsTypeInfo = optionsTypeInfo;
  const imports = getImports(bindings, componentFileNames, opsTypeInfo);
  const placeholders = Object.keys(bindings.placeholders);
@@ -101,7 +104,7 @@ export async function vanillaToAngular(bindings: any, componentFileNames: string
  @Component({
  selector: 'my-app',
  standalone: true,
- imports: [AgCharts],
+ imports: [${type}],
  template: \`${template}\`
  })
  export class AppComponent {
@@ -110,8 +113,8 @@ export async function vanillaToAngular(bindings: any, componentFileNames: string
 
  ${
  bindings.usesChartApi
- ? `\n @ViewChild(AgCharts)
- public agCharts!: AgCharts;\n`
+ ? `\n @ViewChild(${type})
+ public agCharts!: ${type};\n`
  : ''
  }
  constructor() {
@@ -159,14 +162,14 @@ export async function vanillaToAngular(bindings: any, componentFileNames: string
  properties.find((p) => p.name === propertyName)
  );
 
- const template = getAngularTag(propertyAttributes);
+ const template = getAngularTag(bindings, propertyAttributes);
 
  indexFile = `${indexFile}
 
  @Component({
  selector: '${selector}',
  standalone: true,
- imports: [AgCharts],
+ imports: [${type}],
  template: \`${template}\`
  })
  class ${className} {

plugins/ag-charts-generate-example-files/src/executors/generate/generator/transformation-scripts/chart-vanilla-to-react-functional-ts.ts

@@ -1,5 +1,10 @@
 import { wrapOptionsUpdateCode } from './chart-utils';
-import { addBindingImports, convertFunctionToConstProperty, convertFunctionToProperty } from './parser-utils';
+import {
+ addBindingImports,
+ convertFunctionToConstProperty,
+ convertFunctionToProperty,
+ isFinancialCharts,
+} from './parser-utils';
 import { convertFunctionalTemplate, getImport, styleAsObject } from './react-utils';
 import { toTitleCase } from './string-utils';
 
@@ -17,14 +22,15 @@ function needsWrappingInFragment(bindings: any) {
 }
 
 function getImports(componentFilenames: string[], bindings: any): string[] {
+ const type = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
  const reactImports = ['useState'];
  if (bindings.usesChartApi) reactImports.push('useRef');
  if (needsWrappingInFragment(bindings)) reactImports.push('Fragment');
 
  const imports = [
  `import React, { ${reactImports.join(', ')} } from 'react';`,
  `import { createRoot } from 'react-dom/client';`,
- `import { AgCharts } from 'ag-charts-react';`,
+ `import { ${type} } from 'ag-charts-react';`,
  ];
  const chartImports = bindings.imports.map((i) => ({
  ...i,
@@ -54,10 +60,11 @@ function getImports(componentFilenames: string[], bindings: any): string[] {
 }
 
 function getAgChartTag(bindings: any, componentAttributes: string[]): string {
- return `<AgCharts
- ${bindings.usesChartApi ? 'ref={chartRef}' : ''}
- ${componentAttributes.join(`
- `)}
+ const tag = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
+ return `<${tag}
+ ${bindings.usesChartApi ? 'ref={chartRef}' : ''}
+ ${componentAttributes.join(`
+ `)}
  />`;
 }
 

plugins/ag-charts-generate-example-files/src/executors/generate/generator/transformation-scripts/chart-vanilla-to-react-functional.ts

@@ -1,5 +1,5 @@
 import { getChartImports, wrapOptionsUpdateCode } from './chart-utils';
-import { convertFunctionToConstProperty, convertFunctionToProperty } from './parser-utils';
+import { convertFunctionToConstProperty, convertFunctionToProperty, isFinancialCharts } from './parser-utils';
 import { convertFunctionalTemplate, getImport, styleAsObject } from './react-utils';
 import { toTitleCase } from './string-utils';
 
@@ -17,14 +17,15 @@ function needsWrappingInFragment(bindings: any) {
 }
 
 function getImports(componentFilenames: string[], bindings): string[] {
+ const type = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
  const reactImports = ['useState'];
  if (bindings.usesChartApi) reactImports.push('useRef');
  if (needsWrappingInFragment(bindings)) reactImports.push('Fragment');
 
  const imports = [
  `import React, { ${reactImports.join(', ')} } from 'react';`,
  `import { createRoot } from 'react-dom/client';`,
- `import { AgCharts } from 'ag-charts-react';`,
+ `import { ${type} } from 'ag-charts-react';`,
  ];
 
  const chartImports = bindings.imports.map((i) => ({
@@ -50,7 +51,8 @@ function getImports(componentFilenames: string[], bindings): string[] {
 }
 
 function getAgChartTag(bindings: any, componentAttributes: string[]): string {
- return `<AgCharts
+ const tag = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
+ return `<${tag}
  ${bindings.usesChartApi ? 'ref={chartRef}' : ''}
  ${componentAttributes.join(`
  `)}

plugins/ag-charts-generate-example-files/src/executors/generate/generator/transformation-scripts/chart-vanilla-to-vue3.ts

@@ -1,5 +1,5 @@
 import { getChartImports, wrapOptionsUpdateCode } from './chart-utils';
-import { getFunctionName, removeFunctionKeyword } from './parser-utils';
+import { getFunctionName, isFinancialCharts, removeFunctionKeyword } from './parser-utils';
 import { toKebabCase, toTitleCase } from './string-utils';
 import { convertTemplate, getImport, indentTemplate } from './vue-utils';
 
@@ -8,7 +8,8 @@ function processFunction(code: string): string {
 }
 
 function getImports(componentFileNames: string[], bindings): string[] {
- const imports = ["import { createApp } from 'vue';", "import { AgCharts } from 'ag-charts-vue3';"];
+ const type = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
+ const imports = ["import { createApp } from 'vue';", `import { ${type} } from 'ag-charts-vue3';`];
 
  const chartImports = bindings.imports.map((i) => ({
  ...i,
@@ -51,13 +52,13 @@ function getPropertyBindings(bindings: any, id: string, property: any) {
  return { propertyAssignments, propertyVars, propertyAttributes };
 }
 
-function getVueTag(bindings: any, attributes: string[]) {
- return `<ag-charts\n` + (bindings.usesChartApi ? `ref="agCharts"\n` : '') + attributes.join('\n') + `\n/>`;
+function getVueTag(tag: string, bindings: any, attributes: string[]) {
+ return `<${tag}\n` + (bindings.usesChartApi ? `ref="agCharts"\n` : '') + attributes.join('\n') + `\n/>`;
 }
 
-function getTemplate(bindings: any, attributes: string[]): string {
+function getTemplate(tag: string, bindings: any, attributes: string[]): string {
  /* prettier-ignore */
- const agChartTag = getVueTag(bindings, attributes)
+ const agChartTag = getVueTag(tag, bindings, attributes)
 
  let template = bindings.template ?? agChartTag;
  Object.values(bindings.placeholders).forEach((placeholder) => {
@@ -87,6 +88,8 @@ function getAllMethods(bindings: any): [string[], string[], string[]] {
 
 export async function vanillaToVue3(bindings: any, componentFileNames: string[]): Promise<string> {
  const { properties } = bindings;
+ const type = isFinancialCharts(bindings) ? 'AgFinancialCharts' : 'AgCharts';
+ const tag = isFinancialCharts(bindings) ? 'ag-financial-charts' : 'ag-charts';
  const imports = getImports(componentFileNames, bindings);
  const [externalEventHandlers, instanceMethods, globalMethods] = getAllMethods(bindings);
  const placeholders = Object.keys(bindings.placeholders);
@@ -102,7 +105,7 @@ export async function vanillaToVue3(bindings: any, componentFileNames: string[])
  placeholders[0],
  options
  );
- const template = getTemplate(bindings, propertyAttributes);
+ const template = getTemplate(tag, bindings, propertyAttributes);
 
  mainFile = `
  ${imports.join('\n')}
@@ -112,7 +115,7 @@ export async function vanillaToVue3(bindings: any, componentFileNames: string[])
  const ChartExample = {
  template: \`\n${template}\n \`,
  components: {
- 'ag-charts': AgCharts
+ '${tag}': ${type}
  },
  data() {
  return {
@@ -178,14 +181,14 @@ export async function vanillaToVue3(bindings: any, componentFileNames: string[])
  id,
  properties.find((p) => p.name === propertyName)
  );
- const template = getVueTag(bindings, propertyAttributes);
+ const template = getVueTag(tag, bindings, propertyAttributes);
 
  mainFile = `${mainFile}
 
  const ${className} = {
  template: \`\n${indentTemplate(template, 2, 2)}\n \`,
  components: {
- 'ag-charts': AgCharts
+ '${tag}': ${type}
  },
  data() {
  return {

plugins/ag-charts-generate-example-files/src/executors/generate/generator/transformation-scripts/parser-utils.ts

@@ -724,3 +724,7 @@ export function addGenericInterfaceImport(imports: string[], tData: string, bind
  imports.push(`import { ${tData} } from './interfaces'`);
  }
 }
+
+export function isFinancialCharts(bindings: any) {
+ return bindings.optionsTypeInfo?.typeStr === 'AgFinancialChartOptions';
+}

plugins/ag-charts-generate-example-files/src/executors/generate/generator/utils/frameworkFilesGenerator.ts

@@ -55,10 +55,10 @@ const createVueFilesGenerator =
  sourceGenerator: (bindings: any, componentFilenames: string[]) => Promise<string>;
  internalFramework: InternalFramework;
  }): ConfigGenerator =>
- async ({ bindings, indexHtml, otherScriptFiles, isDev, ignoreDarkMode }) => {
+ async ({ typedBindings, indexHtml, otherScriptFiles, isDev, ignoreDarkMode }) => {
  const boilerPlateFiles = await getBoilerPlateFiles(isDev, internalFramework);
 
- let mainJs = await sourceGenerator(deepCloneObject(bindings), []);
+ let mainJs = await sourceGenerator(deepCloneObject(typedBindings), []);
 
  // add website dark mode handling code to doc examples - this code is later striped out from the code viewer / plunker
  if (!ignoreDarkMode) {
@@ -170,13 +170,13 @@ export const frameworkFilesGenerator: Record<InternalFramework, ConfigGenerator>
  mainFileName,
  };
  },
- reactFunctional: async ({ bindings, indexHtml, otherScriptFiles, isDev, ignoreDarkMode }) => {
+ reactFunctional: async ({ typedBindings, indexHtml, otherScriptFiles, isDev, ignoreDarkMode }) => {
  const internalFramework = 'reactFunctional';
  const entryFileName = getEntryFileName(internalFramework)!;
  const mainFileName = getMainFileName(internalFramework)!;
  const boilerPlateFiles = await getBoilerPlateFiles(isDev, internalFramework);
 
- let indexJsx = await vanillaToReactFunctional(deepCloneObject(bindings), []);
+ let indexJsx = await vanillaToReactFunctional(deepCloneObject(typedBindings), []);
 
  // add website dark mode handling code to doc examples - this code is later striped out from the code viewer / plunker
  if (!ignoreDarkMode) {