feat(modal):customizability of chart modal (#1704)

* feat(modal):customizability of chart modal

* misspell error rectified

* property name change and formatTable function parameter count changed to one

* modal property name changed to tabularRepModal

* Update pie.ts

* Update cartesian-charts.ts

* tableCellFormatter receiving entire cell data and removal of tableFormatter

---------

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

packages/core/src/model/alluvial.ts

@@ -14,12 +14,11 @@ export class AlluvialChartModel extends ChartModelCartesian {
 
 		// Sort array by source to get a close depiction of the alluvial chart
 		displayData.sort((a: any, b: any) => a['source'].localeCompare(b['source']))
-
-		const result = [
-			['Source', 'Target', 'Value'],
+		const headers = ['Source', 'Target', 'Value']
+		const cells = [
 			...displayData.map((datum: any) => [datum['source'], datum['target'], datum['value']])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 }

packages/core/src/model/binned-charts.ts

@@ -13,17 +13,17 @@ export class ChartModelBinned extends ChartModelCartesian {
 
 		const binnedStackedData = this.getBinnedStackedData()
 
-		const result = [
-			[
-				get(options, 'bins.rangeLabel') || 'Range',
-				...binnedStackedData.map(datum => get(datum, `0.${groupMapsTo}`))
-			],
+    const headers = [
+			get(options, 'bins.rangeLabel') || 'Range',
+			...binnedStackedData.map(datum => get(datum, `0.${groupMapsTo}`))
+		]
+		const cells = [
 			...get(binnedStackedData, 0).map((d, i) => [
 				`${get(d, 'data.x0')} – ${get(d, 'data.x1')}`,
 				...binnedStackedData.map(datum => get(datum[i], `data.${get(datum[i], groupMapsTo)}`))
 			])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 }

packages/core/src/model/boxplot.ts

@@ -83,8 +83,8 @@ export class BoxplotChartModel extends ChartModelCartesian {
 
 		const boxplotData = this.getBoxplotData()
 
-		const result = [
-			['Group', 'Minimum', 'Q1', 'Median', 'Q3', 'Maximum', 'IQR', 'Outlier(s)'],
+		const headers = ['Group', 'Minimum', 'Q1', 'Median', 'Q3', 'Maximum', 'IQR', 'Outlier(s)']
+		const cells = [
 			...boxplotData.map(datum => {
 				let outliers = getProperty(datum, 'outliers')
 				if (outliers === null || outliers.length === 0) {
@@ -111,14 +111,14 @@ export class BoxplotChartModel extends ChartModelCartesian {
 					getProperty(datum, 'quartiles', 'q_25') !== null
 						? (
 								getProperty(datum, 'quartiles', 'q_75') - getProperty(datum, 'quartiles', 'q_25')
-							).toLocaleString()
+						  ).toLocaleString()
 						: '–',
 					outliers.map((d: any) => d.toLocaleString()).join(',')
 				]
 			})
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 
 	protected setColorClassNames() {

packages/core/src/model/bullet.ts

@@ -35,9 +35,8 @@ export class BulletChartModel extends ChartModelCartesian {
 		const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier()
 
 		const performanceAreaTitles = getProperty(options, 'bullet', 'performanceAreaTitles')
-
-		const result = [
-			['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance'],
+		const headers = ['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance']
+		const cells = [
 			...displayData.map((datum: any) => [
 				datum['title'],
 				datum[groupMapsTo],
@@ -50,6 +49,6 @@ export class BulletChartModel extends ChartModelCartesian {
 			])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 }

packages/core/src/model/cartesian-charts.ts

@@ -1,4 +1,3 @@
-import { format } from 'date-fns/format'
 import { cloneDeep, uniq } from 'lodash-es'
 import { getProperty } from '@/tools'
 import { ChartModel } from './model'
@@ -54,53 +53,39 @@ export class ChartModelCartesian extends ChartModel {
 		const displayData = this.getDisplayData()
 		const options = this.getOptions()
 		const { groupMapsTo } = options.data
-
-		const { cartesianScales } = this.services
 		const { primaryDomain, primaryRange, secondaryDomain, secondaryRange } =
 			this.assignRangeAndDomains()
 
-		const domainScaleType = cartesianScales.getDomainAxisScaleType()
-		let domainValueFormatter: any
-		if (domainScaleType === ScaleTypes.TIME) {
-			domainValueFormatter = (d: any) => format(d, 'MMM d, yyyy')
-		}
-
-		const result = [
-			[
-				'Group',
-				primaryDomain.label,
-				primaryRange.label,
-				...(secondaryDomain ? [secondaryDomain.label] : []),
-				...(secondaryRange ? [secondaryRange.label] : [])
-			],
-			...displayData.map((datum: any) => [
-				datum[groupMapsTo],
-				datum[primaryDomain.identifier] === null
-					? '–'
-					: domainValueFormatter
-						? domainValueFormatter(datum[primaryDomain.identifier])
-						: datum[primaryDomain.identifier],
-				datum[primaryRange.identifier] === null || isNaN(datum[primaryRange.identifier])
-					? '–'
-					: datum[primaryRange.identifier].toLocaleString(),
-				...(secondaryDomain
-					? [
-							datum[secondaryDomain.identifier] === null
-								? '–'
-								: datum[secondaryDomain.identifier]
-						]
-					: []),
-				...(secondaryRange
-					? [
-							datum[secondaryRange.identifier] === null || isNaN(datum[secondaryRange.identifier])
-								? '–'
-								: datum[secondaryRange.identifier]
-						]
-					: [])
-			])
+    const headers = [
+			'Group',
+			primaryDomain.label,
+			primaryRange.label,
+			...(secondaryDomain ? [secondaryDomain.label] : []),
+			...(secondaryRange ? [secondaryRange.label] : [])
 		]
-
-		return result
+		const cells = displayData.map((datum: any) => [
+			datum[groupMapsTo],
+			datum[primaryDomain.identifier] === null ? '–' : datum[primaryDomain.identifier],
+			datum[primaryRange.identifier] === null || isNaN(datum[primaryRange.identifier])
+				? '–'
+				: datum[primaryRange.identifier].toLocaleString(),
+			...(secondaryDomain
+				? [
+						datum[secondaryDomain.identifier] === null
+							? '–'
+							: datum[secondaryDomain.identifier]
+				  ]
+				: []),
+			...(secondaryRange
+				? [
+						datum[secondaryRange.identifier] === null || isNaN(datum[secondaryRange.identifier])
+							? '–'
+							: datum[secondaryRange.identifier]
+				  ]
+				: [])
+		])
+
+		return super.formatTable({ headers, cells })
 	}
 
 	setData(newData: any) {

packages/core/src/model/choropleth.ts

@@ -68,17 +68,16 @@ export class ChoroplethModel extends ChartModel {
 	 */
 	getTabularDataArray() {
 		const displayData = this.getDisplayData()
-
-		const result = [
-			['Country ID', 'Country Name', 'Value'],
+		const headers = ['Country ID', 'Country Name', 'Value']
+		const cells = [
 			...displayData.map(datum => [
 				datum['id'] === null ? '–' : datum['id'],
 				datum['name'],
 				datum['value']
 			])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 
 	// Uses quantize scale to return class names

packages/core/src/model/circle-pack.ts

@@ -128,18 +128,19 @@ export class CirclePackChartModel extends ChartModel {
 	getTabularDataArray() {
 		const displayData = this.getDisplayData()
 
-		const result = [['Child', 'Parent', 'Value']]
+		const headers = ['Child', 'Parent', 'Value']
+		const cells = []
 
 		displayData.forEach((datum: any) => {
 			let value = datum.value ? datum.value : 0
 			if (datum.children) {
 				// Call recursive function
-				value += this.getChildrenDatums(datum.children, datum.name, result, 0)
+				value += this.getChildrenDatums(datum.children, datum.name, cells, 0)
 			}
-			result.push(['–', datum.name, value])
+			cells.push(['–', datum.name, value])
 		})
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 
 	/**

packages/core/src/model/gauge.ts

@@ -16,15 +16,14 @@ export class GaugeChartModel extends ChartModel {
 		const displayData = this.getDisplayData()
 		const options = this.getOptions()
 		const { groupMapsTo } = options.data
-
-		const result = [
-			['Group', 'Value'],
+		const headers = ['Group', 'Value']
+		const cells = [
 			...displayData.map((datum: any) => [
 				datum[groupMapsTo],
 				datum['value'] === null ? '–' : datum['value'].toLocaleString()
 			])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 }

packages/core/src/model/heatmap.ts

@@ -240,23 +240,23 @@ export class HeatmapModel extends ChartModelCartesian {
 		const { primaryDomain, primaryRange } = this.assignRangeAndDomains()
 
 		let domainValueFormatter: any
-
-		const result = [
-			[primaryDomain.label, primaryRange.label, 'Value'],
+		const headers = [primaryDomain.label, primaryRange.label, 'Value']
+		const cells = [
 			...displayData.map((datum: any) => [
 				datum[primaryDomain.identifier] === null
 					? '–'
 					: domainValueFormatter
 						? domainValueFormatter(datum[primaryDomain.identifier])
 						: datum[primaryDomain.identifier],
+
 				datum[primaryRange.identifier] === null
 					? '–'
 					: datum[primaryRange.identifier].toLocaleString(),
 				datum['value']
 			])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 
 	// Uses quantize scale to return class names

packages/core/src/model/meter.ts

@@ -73,24 +73,20 @@ export class MeterChartModel extends ChartModel {
 		const { groupMapsTo } = options.data
 		const status = this.getStatus()
 		const proportional = getProperty(options, 'meter', 'proportional')
-
-		let result: ChartTabularData = []
+		let headers = []
+		let cells: ChartTabularData = []
 		let domainMax: number
 		// Display the appropriate columns and fields depending on the type of meter
 		if (proportional === null) {
 			domainMax = 100
 			const datum = displayData[0]
-
-			result = [
-				['Group', 'Value', ...(status ? ['Status'] : [])],
-				[datum[groupMapsTo], datum['value'], ...(status ? [status] : [])]
-			]
+			headers = ['Group', 'Value', ...(status ? ['Status'] : [])]
+			cells = [[datum[groupMapsTo], datum['value'], ...(status ? [status] : [])]]
 		} else {
 			const total = getProperty(proportional, 'total')
 			domainMax = total ? total : this.getMaximumDomain(displayData)
-
-			result = [
-				['Group', 'Value', 'Percentage of total'],
+			headers = ['Group', 'Value', 'Percentage of total']
+			cells = [
 				...displayData.map((datum: any) => [
 					datum[groupMapsTo],
 					datum['value'],
@@ -99,6 +95,6 @@ export class MeterChartModel extends ChartModel {
 			]
 		}
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 }

packages/core/src/model/model.ts

@@ -1,3 +1,4 @@
+import { format } from 'date-fns'
 import { bin as d3Bin, scaleOrdinal, stack, stackOffsetDiverging } from 'd3'
 import { cloneDeep, fromPairs, groupBy, merge, uniq } from 'lodash-es'
 import { getProperty, updateLegendAdditionalItems } from '@/tools'
@@ -54,6 +55,31 @@ export class ChartModel {
 		this.services = services
 	}
 
+	formatTable({ headers, cells }) {
+		const options = this.getOptions()
+		const tableHeadingFormatter = getProperty(options, 'tabularRepModal', 'tableHeadingFormatter')
+		const tableCellFormatter = getProperty(options, 'tabularRepModal', 'tableCellFormatter')
+		const { cartesianScales } = this.services
+		const domainScaleType = cartesianScales?.getDomainAxisScaleType()
+		let domainValueFormatter: any
+
+		if (domainScaleType === ScaleTypes.TIME) {
+			domainValueFormatter = (d: any) => format(d, 'MMM d, yyyy')
+		}
+		const result = [
+			typeof tableHeadingFormatter === 'function' ? tableHeadingFormatter(headers) : headers,
+			...(typeof tableCellFormatter === 'function'
+				? tableCellFormatter(cells)
+				: cells.map((data: (string | number)[]) => {
+						if (domainValueFormatter) {
+							data[1] = domainValueFormatter(data[1]) as string
+						}
+						return data
+					}))
+		]
+		return result
+	}
+
 	getAllDataFromDomain(groups?: any) {
 		if (!this.getData()) {
 			return null
@@ -676,6 +702,7 @@ export class ChartModel {
 	}
 
 	getTabularDataArray(): ChartTabularData {
+		//apply tableFormatter
 		return []
 	}
 

packages/core/src/model/pie.ts

@@ -30,15 +30,15 @@ export class PieChartModel extends ChartModel {
 		const { groupMapsTo } = options.data
 		const { valueMapsTo } = options.pie
 
-		const result = [
-			['Group', 'Value'],
+		const headers = ['Group', 'Value']
+		const cells = [
 			...displayData.map((datum: any) => [
 				datum[groupMapsTo],
 				datum[valueMapsTo] === null ? '–' : datum[valueMapsTo].toLocaleString()
 			])
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 
 	sanitize(data: any) {

packages/core/src/model/radar.ts

@@ -16,9 +16,8 @@ export class RadarChartModel extends ChartModelCartesian {
 		const { angle, value } = getProperty(options, 'radar', 'axes')
 
 		const additionalHeaders = getProperty(groupedData, '0', 'data').map((d: any) => d[angle])
-
-		const result = [
-			['Group', ...additionalHeaders],
+		const headers = ['Group', ...additionalHeaders]
+		const cells = [
 			...groupedData.map(datum => {
 				return [
 					datum['name'],
@@ -31,6 +30,6 @@ export class RadarChartModel extends ChartModelCartesian {
 			})
 		]
 
-		return result
+		return super.formatTable({ headers, cells })
 	}
 }