feat(exports): custom fileDownload.fileName function (#1661)

* chore(yarn): remove yarn cache from gitignore * feat(exports): custom fileDownload.fileName function * also account for string type in `fileDownload.fileName` * update type
carbon-design-system · Sep 15, 2023 · 1dc22cc · 1dc22cc
1 parent 5ae03ad
commit 1dc22cc
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts
@@ -153,6 +153,15 @@ export interface BaseChartOptions {
 			colors?: Array<string>
 		}
 	}
+	/*
+	 * options related to (CSV|PNG|JPG) file downloads
+	 */
+	fileDownload?: {
+		/**
+		 * the number of color variants in the palette (defaults to using the number of data groups in the given data)
+		 */
+		fileName?: string | ((type: 'png' | 'jpg' | 'csv') => string)
+	}
 	/**
 	 * whether this type of chart is experimental
 	 */

diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts
@@ -684,7 +684,22 @@ export class ChartModel {
 			csvString += i < data.length ? csvData + '\n' : csvData
 		})
 
-		this.services.files.downloadCSV(csvString, 'myChart.csv')
+		const options = this.getOptions();
+
+		let fileName = 'myChart';
+		const customFilename = getProperty(
+			options,
+			'fileDownload',
+			'fileName'
+		);
+
+		if (typeof customFilename === 'function') {
+			fileName = customFilename('csv');
+		} else if (typeof customFilename === 'string') {
+			fileName = customFilename;
+		}
+
+		this.services.files.downloadCSV(csvString, `${fileName}.csv`);
 	}
 
 	protected getTabularData(data: any) {

diff --git a/packages/core/src/services/essentials/dom-utils.ts b/packages/core/src/services/essentials/dom-utils.ts
@@ -288,6 +288,7 @@ export class DOMUtils extends Service {
 
 	exportToJPG() {
 		const self = this
+		const options = this.model.getOptions()
 
 		const holder = this.getHolder()
 		const holderSelection = select(holder)
@@ -305,13 +306,28 @@ export class DOMUtils extends Service {
 				}
 			})
 			.then(function (dataUrl: string) {
-				self.services.files?.downloadImage(dataUrl, 'myChart.jpg')
+				let fileName = 'myChart'
+				const customFilename = getProperty(
+					options,
+					'fileDownload',
+					'fileName'
+				)
+
+				if (typeof customFilename === 'function') {
+					fileName = customFilename('jpg')
+				} else if (typeof customFilename === 'string') {
+					fileName = customFilename;
+				}
+
+				self.services.files?.downloadImage(dataUrl, `${fileName}.jpg`)
+
 				holderSelection.classed('filled', false)
 			})
 	}
 
 	exportToPNG() {
 		const self = this
+		const options = this.model.getOptions()
 
 		const holder = this.getHolder()
 		const holderSelection = select(holder)
@@ -329,7 +345,21 @@ export class DOMUtils extends Service {
 				}
 			})
 			.then(function (dataUrl: string) {
-				self.services.files?.downloadImage(dataUrl, 'myChart.png')
+				let fileName = 'myChart'
+				const customFilename = getProperty(
+					options,
+					'fileDownload',
+					'fileName'
+				)
+
+				if (typeof customFilename === 'function') {
+					fileName = customFilename('png')
+				} else if (typeof customFilename === 'string') {
+					fileName = customFilename;
+				}
+
+				self.services.files?.downloadImage(dataUrl, `${fileName}.png`)
+
 				holderSelection.classed('filled', false)
 			})
 			.catch(function (error: Error) {