From a13ad0508a7daa0be0e9bb9c3f74e74908a30113 Mon Sep 17 00:00:00 2001 From: Riya Jethwa <76566868+RiyaJethwa@users.noreply.github.com> Date: Tue, 19 Dec 2023 21:18:38 +0530 Subject: [PATCH 1/7] feat(modal):customizability of chart modal --- packages/core/src/model/alluvial.ts | 7 +- packages/core/src/model/binned-charts.ts | 15 ++-- packages/core/src/model/boxplot.ts | 10 +-- packages/core/src/model/bullet.ts | 7 +- packages/core/src/model/cartesian-charts.ts | 96 +++++++++------------ packages/core/src/model/choropleth.ts | 13 ++- packages/core/src/model/circle-pack.ts | 9 +- packages/core/src/model/gauge.ts | 7 +- packages/core/src/model/heatmap.ts | 18 ++-- packages/core/src/model/meter.ts | 22 ++--- packages/core/src/model/model.ts | 74 ++++++++++------ packages/core/src/model/pie.ts | 7 +- packages/core/src/model/radar.ts | 9 +- packages/core/src/model/tree.ts | 10 +-- packages/core/src/model/treemap.ts | 10 +-- packages/core/src/model/wordcloud.ts | 7 +- 16 files changed, 156 insertions(+), 165 deletions(-) diff --git a/packages/core/src/model/alluvial.ts b/packages/core/src/model/alluvial.ts index ad317a58ca..4c7fb2225d 100644 --- a/packages/core/src/model/alluvial.ts +++ b/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 headingLabels = ['Source', 'Target', 'Value'] + const tabelData = [ ...displayData.map((datum: any) => [datum['source'], datum['target'], datum['value']]) ] - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/binned-charts.ts b/packages/core/src/model/binned-charts.ts index 09ab191918..0302dd7c5f 100644 --- a/packages/core/src/model/binned-charts.ts +++ b/packages/core/src/model/binned-charts.ts @@ -12,18 +12,17 @@ export class ChartModelBinned extends ChartModelCartesian { const { groupMapsTo } = options.data const binnedStackedData = this.getBinnedStackedData() - - const result = [ - [ - get(options, 'bins.rangeLabel') || 'Range', - ...binnedStackedData.map((datum) => get(datum, `0.${groupMapsTo}`)) - ], + const headingLabels = [ + get(options, 'bins.rangeLabel') || 'Range', + ...binnedStackedData.map(datum => get(datum, `0.${groupMapsTo}`)) + ] + const tabelData = [ ...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)}`)) + ...binnedStackedData.map(datum => get(datum[i], `data.${get(datum[i], groupMapsTo)}`)) ]) ] - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/boxplot.ts b/packages/core/src/model/boxplot.ts index 5840d51f66..718d6ec5ad 100644 --- a/packages/core/src/model/boxplot.ts +++ b/packages/core/src/model/boxplot.ts @@ -83,9 +83,9 @@ export class BoxplotChartModel extends ChartModelCartesian { const boxplotData = this.getBoxplotData() - const result = [ - ['Group', 'Minimum', 'Q1', 'Median', 'Q3', 'Maximum', 'IQR', 'Outlier(s)'], - ...boxplotData.map((datum) => { + const headingLabels = ['Group', 'Minimum', 'Q1', 'Median', 'Q3', 'Maximum', 'IQR', 'Outlier(s)'] + const tabelData = [ + ...boxplotData.map(datum => { let outliers = getProperty(datum, 'outliers') if (outliers === null || outliers.length === 0) { outliers = ['–'] @@ -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(headingLabels, tabelData) } protected setColorClassNames() { diff --git a/packages/core/src/model/bullet.ts b/packages/core/src/model/bullet.ts index d879dca49c..a63267213b 100644 --- a/packages/core/src/model/bullet.ts +++ b/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 headingLabels = ['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance'] + const tabelData = [ ...displayData.map((datum: any) => [ datum['title'], datum[groupMapsTo], @@ -50,6 +49,6 @@ export class BulletChartModel extends ChartModelCartesian { ]) ] - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/cartesian-charts.ts b/packages/core/src/model/cartesian-charts.ts index 018eb9fac3..dec8ceffef 100644 --- a/packages/core/src/model/cartesian-charts.ts +++ b/packages/core/src/model/cartesian-charts.ts @@ -1,4 +1,3 @@ -import { format } from 'date-fns' import { cloneDeep, uniq } from 'lodash-es' import { getProperty } from '@/tools' import { ChartModel } from './model' @@ -32,18 +31,20 @@ export class ChartModelCartesian extends ChartModel { scales.secondaryRange = cartesianScales.secondaryRangeAxisPosition } - Object.keys(scales).forEach((scale: 'primaryDomain' | 'primaryRange' | 'secondaryDomain' | 'secondaryRange') => { - const position = scales[scale] - if (cartesianScales.scales[position]) { - scales[scale] = { - position: position, - label: cartesianScales.getScaleLabel(position), - identifier: getProperty(options, 'axes', position, 'mapsTo') + Object.keys(scales).forEach( + (scale: 'primaryDomain' | 'primaryRange' | 'secondaryDomain' | 'secondaryRange') => { + const position = scales[scale] + if (cartesianScales.scales[position]) { + scales[scale] = { + position: position, + label: cartesianScales.getScaleLabel(position), + identifier: getProperty(options, 'axes', position, 'mapsTo') + } + } else { + scales[scale] = null } - } else { - scales[scale] = null } - }) + ) return scales } @@ -52,53 +53,38 @@ 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 headingLabels = [ + 'Group', + primaryDomain.label, + primaryRange.label, + ...(secondaryDomain ? [secondaryDomain.label] : []), + ...(secondaryRange ? [secondaryRange.label] : []) ] - - return result + const tabelData = 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(headingLabels, tabelData) } setData(newData: any) { diff --git a/packages/core/src/model/choropleth.ts b/packages/core/src/model/choropleth.ts index e7d907e722..161da234a7 100644 --- a/packages/core/src/model/choropleth.ts +++ b/packages/core/src/model/choropleth.ts @@ -45,11 +45,11 @@ export class ChoroplethModel extends ChartModel { * * May need to provide users with the option to pass in keys to create dictionary with */ - options.geoData.objects.countries.geometries.forEach((country) => { + options.geoData.objects.countries.geometries.forEach(country => { this._matrix[country.properties.NAME] = country }) - data.forEach((value) => { + data.forEach(value => { if (this._matrix[value.name]) { this._matrix[value.name]['value'] = value.value || null } else { @@ -68,17 +68,16 @@ export class ChoroplethModel extends ChartModel { */ getTabularDataArray() { const displayData = this.getDisplayData() - - const result = [ - ['Country ID', 'Country Name', 'Value'], - ...displayData.map((datum) => [ + const headingLabels = ['Country ID', 'Country Name', 'Value'] + const tabelData = [ + ...displayData.map(datum => [ datum['id'] === null ? '–' : datum['id'], datum['name'], datum['value'] ]) ] - return result + return super.formatTable(headingLabels, tabelData) } // Uses quantize scale to return class names diff --git a/packages/core/src/model/circle-pack.ts b/packages/core/src/model/circle-pack.ts index 15cc8fb711..059f61f5a3 100644 --- a/packages/core/src/model/circle-pack.ts +++ b/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 headingLabels = ['Child', 'Parent', 'Value'] + const tabelData = [] 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, tabelData, 0) } - result.push(['–', datum.name, value]) + tabelData.push(['–', datum.name, value]) }) - return result + return super.formatTable(headingLabels, tabelData) } /** diff --git a/packages/core/src/model/gauge.ts b/packages/core/src/model/gauge.ts index e82b67689c..2a8ccd802d 100644 --- a/packages/core/src/model/gauge.ts +++ b/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 headingLabels = ['Group', 'Value'] + const tabelData = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'] === null ? '–' : datum['value'].toLocaleString() ]) ] - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/heatmap.ts b/packages/core/src/model/heatmap.ts index 7e7f9a8411..d5c23ba18a 100644 --- a/packages/core/src/model/heatmap.ts +++ b/packages/core/src/model/heatmap.ts @@ -5,7 +5,6 @@ import { AxisFlavor, ScaleTypes } from '@/interfaces/enums' import { getColorScale } from '@/services' import { ChartModelCartesian } from './cartesian-charts' - /** The gauge chart model layer */ export class HeatmapModel extends ChartModelCartesian { axisFlavor = AxisFlavor.HOVERABLE @@ -216,8 +215,8 @@ export class HeatmapModel extends ChartModelCartesian { const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier() const arr: any[] = [] - uniqueDomain.forEach((domain) => { - uniqueRange.forEach((range) => { + uniqueDomain.forEach(domain => { + uniqueRange.forEach(range => { const element: any = { value: this._matrix[domain][range].value, index: this._matrix[domain][range].index @@ -241,15 +240,14 @@ export class HeatmapModel extends ChartModelCartesian { const { primaryDomain, primaryRange } = this.assignRangeAndDomains() let domainValueFormatter: any - - const result = [ - [primaryDomain.label, primaryRange.label, 'Value'], + const headingLabels = [primaryDomain.label, primaryRange.label, 'Value'] + const tabelData = [ ...displayData.map((datum: any) => [ datum[primaryDomain.identifier] === null ? '–' : domainValueFormatter - ? domainValueFormatter(datum[primaryDomain.identifier]) - : datum[primaryDomain.identifier], + ? domainValueFormatter(datum[primaryDomain.identifier]) + : datum[primaryDomain.identifier], datum[primaryRange.identifier] === null ? '–' : datum[primaryRange.identifier].toLocaleString(), @@ -257,11 +255,11 @@ export class HeatmapModel extends ChartModelCartesian { ]) ] - return result + return super.formatTable(headingLabels, tabelData) } // Uses quantize scale to return class names - getColorClassName(configs: { value?: number, originalClassName?: string }) { + getColorClassName(configs: { value?: number; originalClassName?: string }) { return `${configs.originalClassName} ${this._colorScale(configs.value as number)}` } diff --git a/packages/core/src/model/meter.ts b/packages/core/src/model/meter.ts index a99815b772..067b9350eb 100644 --- a/packages/core/src/model/meter.ts +++ b/packages/core/src/model/meter.ts @@ -49,8 +49,8 @@ export class MeterChartModel extends ChartModel { const boundedValue = getProperty(options, 'meter', 'proportional') ? totalValue : totalValue > 100 - ? 100 - : totalValue + ? 100 + : totalValue // user needs to supply ranges const allRanges = getProperty(options, 'meter', 'status', 'ranges') @@ -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 headingLabels = [] + let tabelData: 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] : [])] - ] + headingLabels = ['Group', 'Value', ...(status ? ['Status'] : [])] + tabelData = [[datum[groupMapsTo], datum['value'], ...(status ? [status] : [])]] } else { const total = getProperty(proportional, 'total') domainMax = total ? total : this.getMaximumDomain(displayData) - - result = [ - ['Group', 'Value', 'Percentage of total'], + headingLabels = ['Group', 'Value', 'Percentage of total'] + tabelData = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'], @@ -99,6 +95,6 @@ export class MeterChartModel extends ChartModel { ] } - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts index 246c8ed702..8758515169 100644 --- a/packages/core/src/model/model.ts +++ b/packages/core/src/model/model.ts @@ -1,11 +1,6 @@ +import { format } from 'date-fns' import { bin as d3Bin, scaleOrdinal, stack, stackOffsetDiverging } from 'd3' -import { - cloneDeep, - fromPairs, - groupBy, - merge, - uniq, -} from 'lodash-es' +import { cloneDeep, fromPairs, groupBy, merge, uniq } from 'lodash-es' import { getProperty, updateLegendAdditionalItems } from '@/tools' import { color as colorConfigs, legend as legendConfigs } from '@/configuration' import { histogram as histogramConfigs } from '@/configuration-non-customizable' @@ -46,6 +41,34 @@ export class ChartModel { this.services = services } + formatTable(headingLabels, tabelData) { + const options = this.getOptions() + const headingFormatter = getProperty(options, 'modal', 'headingFormatter') + const valueFormatter = getProperty(options, 'modal', 'valueFormatter') + const tableFormatter = getProperty(options, 'modal', 'tableFormatter') + 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 = [ + headingFormatter && typeof headingFormatter === 'function' + ? headingFormatter(headingLabels) + : headingLabels, + ...tabelData.map((data: (string | number)[]) => { + const dataCopy = [...data] + if (domainValueFormatter) { + dataCopy[1] = domainValueFormatter(dataCopy[1]) as string + } + return valueFormatter && typeof valueFormatter === 'function' + ? valueFormatter(data) + : dataCopy + }) + ] + return tableFormatter && typeof tableFormatter === 'function' ? tableFormatter(result) : result + } + getAllDataFromDomain(groups?: any) { if (!this.getData()) { return null @@ -63,7 +86,7 @@ export class ChartModel { } if (axesOptions) { - Object.keys(axesOptions).forEach((axis) => { + Object.keys(axesOptions).forEach(axis => { const mapsTo = axesOptions[axis].mapsTo const scaleType = axesOptions[axis].scaleType // make sure linear/log values are numbers @@ -216,7 +239,7 @@ export class ChartModel { const histogramData = [] // Group data by bin - bins.forEach((bin) => { + bins.forEach(bin => { const key = `${bin.x0}-${bin.x1}` const aggregateDataByGroup = this.aggregateBinDataByGroup(bin) @@ -278,7 +301,7 @@ export class ChartModel { } }) - return Object.keys(groupedData).map((groupName) => ({ + return Object.keys(groupedData).map(groupName => ({ name: groupName, data: groupedData[groupName] })) @@ -600,7 +623,7 @@ export class ChartModel { const colorPairingTag = this.colorClassNames(configs.dataGroupName) let className = configs.originalClassName configs.classNameTypes.forEach( - (type) => + type => (className = configs.originalClassName ? `${className} ${type}-${colorPairingTag}` : `${type}-${colorPairingTag}`) @@ -669,11 +692,12 @@ export class ChartModel { } getTabularDataArray(): ChartTabularData { + //apply tableFormatter return [] } exportToCSV() { - const data = this.getTabularDataArray().map((row) => + const data = this.getTabularDataArray().map(row => row.map((column: any) => `"${column === '–' ? '–' : column}"`) ) @@ -684,22 +708,18 @@ export class ChartModel { csvString += i < data.length ? csvData + '\n' : csvData }) - const options = this.getOptions(); + const options = this.getOptions() - let fileName = 'myChart'; - const customFilename = getProperty( - options, - 'fileDownload', - 'fileName' - ); + let fileName = 'myChart' + const customFilename = getProperty(options, 'fileDownload', 'fileName') if (typeof customFilename === 'function') { - fileName = customFilename('csv'); + fileName = customFilename('csv') } else if (typeof customFilename === 'string') { - fileName = customFilename; + fileName = customFilename } - this.services.files.downloadCSV(csvString, `${fileName}.csv`); + this.services.files.downloadCSV(csvString, `${fileName}.csv`) } protected getTabularData(data: any) { @@ -766,7 +786,7 @@ export class ChartModel { ? ACTIVE : DISABLED - return uniqueDataGroups.map((groupName) => ({ + return uniqueDataGroups.map(groupName => ({ name: groupName, status: getStatus(groupName) })) @@ -783,7 +803,7 @@ export class ChartModel { const options = this.getOptions() const userProvidedScale = getProperty(options, 'color', 'scale') - Object.keys(userProvidedScale).forEach((dataGroup) => { + Object.keys(userProvidedScale).forEach(dataGroup => { if (!this.allDataGroups.includes(dataGroup)) { console.warn(`"${dataGroup}" does not exist in data groups.`) } @@ -793,12 +813,10 @@ export class ChartModel { * Go through allDataGroups. If a data group has a color value provided * by the user, add that to the color range */ - const providedDataGroups = this.allDataGroups.filter( - (dataGroup) => userProvidedScale[dataGroup] - ) + const providedDataGroups = this.allDataGroups.filter(dataGroup => userProvidedScale[dataGroup]) providedDataGroups.forEach( - (dataGroup) => (this.colorScale[dataGroup] = userProvidedScale[dataGroup]) + dataGroup => (this.colorScale[dataGroup] = userProvidedScale[dataGroup]) ) } diff --git a/packages/core/src/model/pie.ts b/packages/core/src/model/pie.ts index 45b41bb1c6..5584743d54 100644 --- a/packages/core/src/model/pie.ts +++ b/packages/core/src/model/pie.ts @@ -28,16 +28,15 @@ export class PieChartModel extends ChartModel { const displayData = this.getDisplayData() const options = this.getOptions() const { groupMapsTo } = options.data - - const result = [ - ['Group', 'Value'], + const headingLabels = ['Group', 'Value'] + const tabelData = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'] === null ? '–' : datum['value'].toLocaleString() ]) ] - return result + return super.formatTable(headingLabels, tabelData) } sanitize(data: any) { diff --git a/packages/core/src/model/radar.ts b/packages/core/src/model/radar.ts index 866abb503a..f79c931800 100644 --- a/packages/core/src/model/radar.ts +++ b/packages/core/src/model/radar.ts @@ -16,10 +16,9 @@ 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], - ...groupedData.map((datum) => { + const headingLabels = ['Group', ...additionalHeaders] + const tabelData = [ + ...groupedData.map(datum => { return [ datum['name'], ...additionalHeaders.map((_: any, i: number) => @@ -31,6 +30,6 @@ export class RadarChartModel extends ChartModelCartesian { }) ] - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/tree.ts b/packages/core/src/model/tree.ts index 1a05e7a792..ceb6d378bf 100644 --- a/packages/core/src/model/tree.ts +++ b/packages/core/src/model/tree.ts @@ -11,15 +11,15 @@ export class TreeChartModel extends ChartModel { getTabularDataArray() { const displayData = this.getDisplayData() - const result = [['Child', 'Parent']] - + const headingLabels = ['Child', 'Parent'] + const tabelData = [] displayData.forEach((datum: any) => { // Call recurisve function - this.getChildrenDatums(datum, result) - result.push([datum.name, '–']) + this.getChildrenDatums(datum, tabelData) + tabelData.push([datum.name, '–']) }) - return result + return super.formatTable(headingLabels, tabelData) } /** diff --git a/packages/core/src/model/treemap.ts b/packages/core/src/model/treemap.ts index 947e6d90f1..8b3566649c 100644 --- a/packages/core/src/model/treemap.ts +++ b/packages/core/src/model/treemap.ts @@ -12,18 +12,18 @@ export class TreemapChartModel extends ChartModel { getTabularDataArray() { const displayData = this.getDisplayData() - const result = [['Child', 'Group', 'Value']] - + const headingLabels = ['Child', 'Group', 'Value'] + const tabelData = [] displayData.forEach((datum: any) => { if (Array.isArray(datum.children)) { datum.children.forEach((child: any) => { - result.push([child.name, datum.name, child.value]) + tabelData.push([child.name, datum.name, child.value]) }) } else if (getProperty(datum.name) !== null && getProperty(datum.value)) { - result.push(['–', datum.name, datum.value]) + tabelData.push(['–', datum.name, datum.value]) } }) - return result + return super.formatTable(headingLabels, tabelData) } } diff --git a/packages/core/src/model/wordcloud.ts b/packages/core/src/model/wordcloud.ts index de9a78ecac..bbdd363a07 100644 --- a/packages/core/src/model/wordcloud.ts +++ b/packages/core/src/model/wordcloud.ts @@ -13,9 +13,8 @@ export class WordCloudModel extends ChartModel { const options = this.getOptions() const { fontSizeMapsTo, wordMapsTo } = options.wordCloud const { groupMapsTo } = options.data - - const result = [ - [options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel], + const headingLabels = [options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel] + const tabelData = [ ...displayData.map((datum: any) => [ datum[wordMapsTo], datum[groupMapsTo], @@ -23,6 +22,6 @@ export class WordCloudModel extends ChartModel { ]) ] - return result + return super.formatTable(headingLabels, tabelData) } } From 4ab799c534519fc9e986da2c7c8e9e93d185c090 Mon Sep 17 00:00:00 2001 From: Riya Jethwa <76566868+RiyaJethwa@users.noreply.github.com> Date: Thu, 28 Dec 2023 11:54:28 +0530 Subject: [PATCH 2/7] misspell error rectified --- packages/core/src/model/alluvial.ts | 4 ++-- packages/core/src/model/binned-charts.ts | 4 ++-- packages/core/src/model/boxplot.ts | 4 ++-- packages/core/src/model/bullet.ts | 4 ++-- packages/core/src/model/cartesian-charts.ts | 4 ++-- packages/core/src/model/choropleth.ts | 4 ++-- packages/core/src/model/circle-pack.ts | 8 ++++---- packages/core/src/model/gauge.ts | 4 ++-- packages/core/src/model/heatmap.ts | 4 ++-- packages/core/src/model/meter.ts | 8 ++++---- packages/core/src/model/model.ts | 4 ++-- packages/core/src/model/pie.ts | 4 ++-- packages/core/src/model/radar.ts | 4 ++-- packages/core/src/model/tree.ts | 8 ++++---- packages/core/src/model/treemap.ts | 8 ++++---- packages/core/src/model/wordcloud.ts | 4 ++-- 16 files changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/core/src/model/alluvial.ts b/packages/core/src/model/alluvial.ts index 4c7fb2225d..09d16b1de7 100644 --- a/packages/core/src/model/alluvial.ts +++ b/packages/core/src/model/alluvial.ts @@ -15,10 +15,10 @@ 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 headingLabels = ['Source', 'Target', 'Value'] - const tabelData = [ + const tableData = [ ...displayData.map((datum: any) => [datum['source'], datum['target'], datum['value']]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/binned-charts.ts b/packages/core/src/model/binned-charts.ts index 0302dd7c5f..41eb4f5f85 100644 --- a/packages/core/src/model/binned-charts.ts +++ b/packages/core/src/model/binned-charts.ts @@ -16,13 +16,13 @@ export class ChartModelBinned extends ChartModelCartesian { get(options, 'bins.rangeLabel') || 'Range', ...binnedStackedData.map(datum => get(datum, `0.${groupMapsTo}`)) ] - const tabelData = [ + const tableData = [ ...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 super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/boxplot.ts b/packages/core/src/model/boxplot.ts index 718d6ec5ad..e604f64cbe 100644 --- a/packages/core/src/model/boxplot.ts +++ b/packages/core/src/model/boxplot.ts @@ -84,7 +84,7 @@ export class BoxplotChartModel extends ChartModelCartesian { const boxplotData = this.getBoxplotData() const headingLabels = ['Group', 'Minimum', 'Q1', 'Median', 'Q3', 'Maximum', 'IQR', 'Outlier(s)'] - const tabelData = [ + const tableData = [ ...boxplotData.map(datum => { let outliers = getProperty(datum, 'outliers') if (outliers === null || outliers.length === 0) { @@ -118,7 +118,7 @@ export class BoxplotChartModel extends ChartModelCartesian { }) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } protected setColorClassNames() { diff --git a/packages/core/src/model/bullet.ts b/packages/core/src/model/bullet.ts index a63267213b..047fac293b 100644 --- a/packages/core/src/model/bullet.ts +++ b/packages/core/src/model/bullet.ts @@ -36,7 +36,7 @@ export class BulletChartModel extends ChartModelCartesian { const performanceAreaTitles = getProperty(options, 'bullet', 'performanceAreaTitles') const headingLabels = ['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance'] - const tabelData = [ + const tableData = [ ...displayData.map((datum: any) => [ datum['title'], datum[groupMapsTo], @@ -49,6 +49,6 @@ export class BulletChartModel extends ChartModelCartesian { ]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/cartesian-charts.ts b/packages/core/src/model/cartesian-charts.ts index dec8ceffef..4656548665 100644 --- a/packages/core/src/model/cartesian-charts.ts +++ b/packages/core/src/model/cartesian-charts.ts @@ -62,7 +62,7 @@ export class ChartModelCartesian extends ChartModel { ...(secondaryDomain ? [secondaryDomain.label] : []), ...(secondaryRange ? [secondaryRange.label] : []) ] - const tabelData = displayData.map((datum: any) => [ + const tableData = displayData.map((datum: any) => [ datum[groupMapsTo], datum[primaryDomain.identifier] === null ? '–' : datum[primaryDomain.identifier], datum[primaryRange.identifier] === null || isNaN(datum[primaryRange.identifier]) @@ -84,7 +84,7 @@ export class ChartModelCartesian extends ChartModel { : []) ]) - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } setData(newData: any) { diff --git a/packages/core/src/model/choropleth.ts b/packages/core/src/model/choropleth.ts index 161da234a7..cf5ce6617f 100644 --- a/packages/core/src/model/choropleth.ts +++ b/packages/core/src/model/choropleth.ts @@ -69,7 +69,7 @@ export class ChoroplethModel extends ChartModel { getTabularDataArray() { const displayData = this.getDisplayData() const headingLabels = ['Country ID', 'Country Name', 'Value'] - const tabelData = [ + const tableData = [ ...displayData.map(datum => [ datum['id'] === null ? '–' : datum['id'], datum['name'], @@ -77,7 +77,7 @@ export class ChoroplethModel extends ChartModel { ]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } // Uses quantize scale to return class names diff --git a/packages/core/src/model/circle-pack.ts b/packages/core/src/model/circle-pack.ts index 059f61f5a3..d35a29d12e 100644 --- a/packages/core/src/model/circle-pack.ts +++ b/packages/core/src/model/circle-pack.ts @@ -129,18 +129,18 @@ export class CirclePackChartModel extends ChartModel { const displayData = this.getDisplayData() const headingLabels = ['Child', 'Parent', 'Value'] - const tabelData = [] + const tableData = [] displayData.forEach((datum: any) => { let value = datum.value ? datum.value : 0 if (datum.children) { // Call recursive function - value += this.getChildrenDatums(datum.children, datum.name, tabelData, 0) + value += this.getChildrenDatums(datum.children, datum.name, tableData, 0) } - tabelData.push(['–', datum.name, value]) + tableData.push(['–', datum.name, value]) }) - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } /** diff --git a/packages/core/src/model/gauge.ts b/packages/core/src/model/gauge.ts index 2a8ccd802d..89d4c24e71 100644 --- a/packages/core/src/model/gauge.ts +++ b/packages/core/src/model/gauge.ts @@ -17,13 +17,13 @@ export class GaugeChartModel extends ChartModel { const options = this.getOptions() const { groupMapsTo } = options.data const headingLabels = ['Group', 'Value'] - const tabelData = [ + const tableData = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'] === null ? '–' : datum['value'].toLocaleString() ]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/heatmap.ts b/packages/core/src/model/heatmap.ts index d5c23ba18a..44379d38c9 100644 --- a/packages/core/src/model/heatmap.ts +++ b/packages/core/src/model/heatmap.ts @@ -241,7 +241,7 @@ export class HeatmapModel extends ChartModelCartesian { let domainValueFormatter: any const headingLabels = [primaryDomain.label, primaryRange.label, 'Value'] - const tabelData = [ + const tableData = [ ...displayData.map((datum: any) => [ datum[primaryDomain.identifier] === null ? '–' @@ -255,7 +255,7 @@ export class HeatmapModel extends ChartModelCartesian { ]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } // Uses quantize scale to return class names diff --git a/packages/core/src/model/meter.ts b/packages/core/src/model/meter.ts index 067b9350eb..454293d0b6 100644 --- a/packages/core/src/model/meter.ts +++ b/packages/core/src/model/meter.ts @@ -74,19 +74,19 @@ export class MeterChartModel extends ChartModel { const status = this.getStatus() const proportional = getProperty(options, 'meter', 'proportional') let headingLabels = [] - let tabelData: ChartTabularData = [] + let tableData: 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] headingLabels = ['Group', 'Value', ...(status ? ['Status'] : [])] - tabelData = [[datum[groupMapsTo], datum['value'], ...(status ? [status] : [])]] + tableData = [[datum[groupMapsTo], datum['value'], ...(status ? [status] : [])]] } else { const total = getProperty(proportional, 'total') domainMax = total ? total : this.getMaximumDomain(displayData) headingLabels = ['Group', 'Value', 'Percentage of total'] - tabelData = [ + tableData = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'], @@ -95,6 +95,6 @@ export class MeterChartModel extends ChartModel { ] } - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts index 8758515169..d182f4c416 100644 --- a/packages/core/src/model/model.ts +++ b/packages/core/src/model/model.ts @@ -41,7 +41,7 @@ export class ChartModel { this.services = services } - formatTable(headingLabels, tabelData) { + formatTable(headingLabels, tableData) { const options = this.getOptions() const headingFormatter = getProperty(options, 'modal', 'headingFormatter') const valueFormatter = getProperty(options, 'modal', 'valueFormatter') @@ -56,7 +56,7 @@ export class ChartModel { headingFormatter && typeof headingFormatter === 'function' ? headingFormatter(headingLabels) : headingLabels, - ...tabelData.map((data: (string | number)[]) => { + ...tableData.map((data: (string | number)[]) => { const dataCopy = [...data] if (domainValueFormatter) { dataCopy[1] = domainValueFormatter(dataCopy[1]) as string diff --git a/packages/core/src/model/pie.ts b/packages/core/src/model/pie.ts index 5584743d54..8261be7930 100644 --- a/packages/core/src/model/pie.ts +++ b/packages/core/src/model/pie.ts @@ -29,14 +29,14 @@ export class PieChartModel extends ChartModel { const options = this.getOptions() const { groupMapsTo } = options.data const headingLabels = ['Group', 'Value'] - const tabelData = [ + const tableData = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'] === null ? '–' : datum['value'].toLocaleString() ]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } sanitize(data: any) { diff --git a/packages/core/src/model/radar.ts b/packages/core/src/model/radar.ts index f79c931800..0ed5eab3ca 100644 --- a/packages/core/src/model/radar.ts +++ b/packages/core/src/model/radar.ts @@ -17,7 +17,7 @@ export class RadarChartModel extends ChartModelCartesian { const additionalHeaders = getProperty(groupedData, '0', 'data').map((d: any) => d[angle]) const headingLabels = ['Group', ...additionalHeaders] - const tabelData = [ + const tableData = [ ...groupedData.map(datum => { return [ datum['name'], @@ -30,6 +30,6 @@ export class RadarChartModel extends ChartModelCartesian { }) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/tree.ts b/packages/core/src/model/tree.ts index ceb6d378bf..ad4989e382 100644 --- a/packages/core/src/model/tree.ts +++ b/packages/core/src/model/tree.ts @@ -12,14 +12,14 @@ export class TreeChartModel extends ChartModel { const displayData = this.getDisplayData() const headingLabels = ['Child', 'Parent'] - const tabelData = [] + const tableData = [] displayData.forEach((datum: any) => { // Call recurisve function - this.getChildrenDatums(datum, tabelData) - tabelData.push([datum.name, '–']) + this.getChildrenDatums(datum, tableData) + tableData.push([datum.name, '–']) }) - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } /** diff --git a/packages/core/src/model/treemap.ts b/packages/core/src/model/treemap.ts index 8b3566649c..110f69b448 100644 --- a/packages/core/src/model/treemap.ts +++ b/packages/core/src/model/treemap.ts @@ -13,17 +13,17 @@ export class TreemapChartModel extends ChartModel { const displayData = this.getDisplayData() const headingLabels = ['Child', 'Group', 'Value'] - const tabelData = [] + const tableData = [] displayData.forEach((datum: any) => { if (Array.isArray(datum.children)) { datum.children.forEach((child: any) => { - tabelData.push([child.name, datum.name, child.value]) + tableData.push([child.name, datum.name, child.value]) }) } else if (getProperty(datum.name) !== null && getProperty(datum.value)) { - tabelData.push(['–', datum.name, datum.value]) + tableData.push(['–', datum.name, datum.value]) } }) - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } diff --git a/packages/core/src/model/wordcloud.ts b/packages/core/src/model/wordcloud.ts index bbdd363a07..f2c2680ca0 100644 --- a/packages/core/src/model/wordcloud.ts +++ b/packages/core/src/model/wordcloud.ts @@ -14,7 +14,7 @@ export class WordCloudModel extends ChartModel { const { fontSizeMapsTo, wordMapsTo } = options.wordCloud const { groupMapsTo } = options.data const headingLabels = [options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel] - const tabelData = [ + const tableData = [ ...displayData.map((datum: any) => [ datum[wordMapsTo], datum[groupMapsTo], @@ -22,6 +22,6 @@ export class WordCloudModel extends ChartModel { ]) ] - return super.formatTable(headingLabels, tabelData) + return super.formatTable(headingLabels, tableData) } } From ab776a7fc59f53633f7c606e1f640f0c179610cf Mon Sep 17 00:00:00 2001 From: Riya Jethwa <76566868+RiyaJethwa@users.noreply.github.com> Date: Wed, 10 Jan 2024 19:45:29 +0530 Subject: [PATCH 3/7] property name change and formatTable function parameter count changed to one --- packages/core/src/model/alluvial.ts | 6 +++--- packages/core/src/model/binned-charts.ts | 6 +++--- packages/core/src/model/boxplot.ts | 6 +++--- packages/core/src/model/bullet.ts | 6 +++--- packages/core/src/model/cartesian-charts.ts | 6 +++--- packages/core/src/model/choropleth.ts | 6 +++--- packages/core/src/model/circle-pack.ts | 10 +++++----- packages/core/src/model/gauge.ts | 6 +++--- packages/core/src/model/heatmap.ts | 6 +++--- packages/core/src/model/meter.ts | 14 +++++++------- packages/core/src/model/model.ts | 18 +++++++----------- packages/core/src/model/pie.ts | 6 +++--- packages/core/src/model/radar.ts | 6 +++--- packages/core/src/model/tree.ts | 10 +++++----- packages/core/src/model/treemap.ts | 10 +++++----- packages/core/src/model/wordcloud.ts | 6 +++--- 16 files changed, 62 insertions(+), 66 deletions(-) diff --git a/packages/core/src/model/alluvial.ts b/packages/core/src/model/alluvial.ts index 09d16b1de7..0393e5e0c7 100644 --- a/packages/core/src/model/alluvial.ts +++ b/packages/core/src/model/alluvial.ts @@ -14,11 +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 headingLabels = ['Source', 'Target', 'Value'] - const tableData = [ + const headers = ['Source', 'Target', 'Value'] + const cells = [ ...displayData.map((datum: any) => [datum['source'], datum['target'], datum['value']]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/binned-charts.ts b/packages/core/src/model/binned-charts.ts index 41eb4f5f85..37fe70f7e7 100644 --- a/packages/core/src/model/binned-charts.ts +++ b/packages/core/src/model/binned-charts.ts @@ -12,17 +12,17 @@ export class ChartModelBinned extends ChartModelCartesian { const { groupMapsTo } = options.data const binnedStackedData = this.getBinnedStackedData() - const headingLabels = [ + const headers = [ get(options, 'bins.rangeLabel') || 'Range', ...binnedStackedData.map(datum => get(datum, `0.${groupMapsTo}`)) ] - const tableData = [ + 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 super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/boxplot.ts b/packages/core/src/model/boxplot.ts index e604f64cbe..a402d0951b 100644 --- a/packages/core/src/model/boxplot.ts +++ b/packages/core/src/model/boxplot.ts @@ -83,8 +83,8 @@ export class BoxplotChartModel extends ChartModelCartesian { const boxplotData = this.getBoxplotData() - const headingLabels = ['Group', 'Minimum', 'Q1', 'Median', 'Q3', 'Maximum', 'IQR', 'Outlier(s)'] - const tableData = [ + 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) { @@ -118,7 +118,7 @@ export class BoxplotChartModel extends ChartModelCartesian { }) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } protected setColorClassNames() { diff --git a/packages/core/src/model/bullet.ts b/packages/core/src/model/bullet.ts index 047fac293b..7557bc9050 100644 --- a/packages/core/src/model/bullet.ts +++ b/packages/core/src/model/bullet.ts @@ -35,8 +35,8 @@ export class BulletChartModel extends ChartModelCartesian { const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier() const performanceAreaTitles = getProperty(options, 'bullet', 'performanceAreaTitles') - const headingLabels = ['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance'] - const tableData = [ + const headers = ['Title', 'Group', 'Value', 'Target', 'Percentage', 'Performance'] + const cells = [ ...displayData.map((datum: any) => [ datum['title'], datum[groupMapsTo], @@ -49,6 +49,6 @@ export class BulletChartModel extends ChartModelCartesian { ]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/cartesian-charts.ts b/packages/core/src/model/cartesian-charts.ts index 4656548665..280ff94869 100644 --- a/packages/core/src/model/cartesian-charts.ts +++ b/packages/core/src/model/cartesian-charts.ts @@ -55,14 +55,14 @@ export class ChartModelCartesian extends ChartModel { const { groupMapsTo } = options.data const { primaryDomain, primaryRange, secondaryDomain, secondaryRange } = this.assignRangeAndDomains() - const headingLabels = [ + const headers = [ 'Group', primaryDomain.label, primaryRange.label, ...(secondaryDomain ? [secondaryDomain.label] : []), ...(secondaryRange ? [secondaryRange.label] : []) ] - const tableData = displayData.map((datum: any) => [ + const cells = displayData.map((datum: any) => [ datum[groupMapsTo], datum[primaryDomain.identifier] === null ? '–' : datum[primaryDomain.identifier], datum[primaryRange.identifier] === null || isNaN(datum[primaryRange.identifier]) @@ -84,7 +84,7 @@ export class ChartModelCartesian extends ChartModel { : []) ]) - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } setData(newData: any) { diff --git a/packages/core/src/model/choropleth.ts b/packages/core/src/model/choropleth.ts index cf5ce6617f..4485d5a226 100644 --- a/packages/core/src/model/choropleth.ts +++ b/packages/core/src/model/choropleth.ts @@ -68,8 +68,8 @@ export class ChoroplethModel extends ChartModel { */ getTabularDataArray() { const displayData = this.getDisplayData() - const headingLabels = ['Country ID', 'Country Name', 'Value'] - const tableData = [ + const headers = ['Country ID', 'Country Name', 'Value'] + const cells = [ ...displayData.map(datum => [ datum['id'] === null ? '–' : datum['id'], datum['name'], @@ -77,7 +77,7 @@ export class ChoroplethModel extends ChartModel { ]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } // Uses quantize scale to return class names diff --git a/packages/core/src/model/circle-pack.ts b/packages/core/src/model/circle-pack.ts index d35a29d12e..bbc6267781 100644 --- a/packages/core/src/model/circle-pack.ts +++ b/packages/core/src/model/circle-pack.ts @@ -128,19 +128,19 @@ export class CirclePackChartModel extends ChartModel { getTabularDataArray() { const displayData = this.getDisplayData() - const headingLabels = ['Child', 'Parent', 'Value'] - const tableData = [] + 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, tableData, 0) + value += this.getChildrenDatums(datum.children, datum.name, cells, 0) } - tableData.push(['–', datum.name, value]) + cells.push(['–', datum.name, value]) }) - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } /** diff --git a/packages/core/src/model/gauge.ts b/packages/core/src/model/gauge.ts index 89d4c24e71..b82e5d8f44 100644 --- a/packages/core/src/model/gauge.ts +++ b/packages/core/src/model/gauge.ts @@ -16,14 +16,14 @@ export class GaugeChartModel extends ChartModel { const displayData = this.getDisplayData() const options = this.getOptions() const { groupMapsTo } = options.data - const headingLabels = ['Group', 'Value'] - const tableData = [ + const headers = ['Group', 'Value'] + const cells = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'] === null ? '–' : datum['value'].toLocaleString() ]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/heatmap.ts b/packages/core/src/model/heatmap.ts index 44379d38c9..55b59ce8a8 100644 --- a/packages/core/src/model/heatmap.ts +++ b/packages/core/src/model/heatmap.ts @@ -240,8 +240,8 @@ export class HeatmapModel extends ChartModelCartesian { const { primaryDomain, primaryRange } = this.assignRangeAndDomains() let domainValueFormatter: any - const headingLabels = [primaryDomain.label, primaryRange.label, 'Value'] - const tableData = [ + const headers = [primaryDomain.label, primaryRange.label, 'Value'] + const cells = [ ...displayData.map((datum: any) => [ datum[primaryDomain.identifier] === null ? '–' @@ -255,7 +255,7 @@ export class HeatmapModel extends ChartModelCartesian { ]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } // Uses quantize scale to return class names diff --git a/packages/core/src/model/meter.ts b/packages/core/src/model/meter.ts index 454293d0b6..2351756990 100644 --- a/packages/core/src/model/meter.ts +++ b/packages/core/src/model/meter.ts @@ -73,20 +73,20 @@ export class MeterChartModel extends ChartModel { const { groupMapsTo } = options.data const status = this.getStatus() const proportional = getProperty(options, 'meter', 'proportional') - let headingLabels = [] - let tableData: 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] - headingLabels = ['Group', 'Value', ...(status ? ['Status'] : [])] - tableData = [[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) - headingLabels = ['Group', 'Value', 'Percentage of total'] - tableData = [ + headers = ['Group', 'Value', 'Percentage of total'] + cells = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'], @@ -95,6 +95,6 @@ export class MeterChartModel extends ChartModel { ] } - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts index d182f4c416..dca1739edf 100644 --- a/packages/core/src/model/model.ts +++ b/packages/core/src/model/model.ts @@ -41,10 +41,10 @@ export class ChartModel { this.services = services } - formatTable(headingLabels, tableData) { + formatTable({ headers, cells }) { const options = this.getOptions() - const headingFormatter = getProperty(options, 'modal', 'headingFormatter') - const valueFormatter = getProperty(options, 'modal', 'valueFormatter') + const tableHeadingFormatter = getProperty(options, 'modal', 'tableHeadingFormatter') + const tableCellFormatter = getProperty(options, 'modal', 'tableCellFormatter') const tableFormatter = getProperty(options, 'modal', 'tableFormatter') const { cartesianScales } = this.services const domainScaleType = cartesianScales?.getDomainAxisScaleType() @@ -53,20 +53,16 @@ export class ChartModel { domainValueFormatter = (d: any) => format(d, 'MMM d, yyyy') } const result = [ - headingFormatter && typeof headingFormatter === 'function' - ? headingFormatter(headingLabels) - : headingLabels, - ...tableData.map((data: (string | number)[]) => { + typeof tableHeadingFormatter === 'function' ? tableHeadingFormatter(headers) : headers, + ...cells.map((data: (string | number)[]) => { const dataCopy = [...data] if (domainValueFormatter) { dataCopy[1] = domainValueFormatter(dataCopy[1]) as string } - return valueFormatter && typeof valueFormatter === 'function' - ? valueFormatter(data) - : dataCopy + return typeof tableCellFormatter === 'function' ? tableCellFormatter(data) : dataCopy }) ] - return tableFormatter && typeof tableFormatter === 'function' ? tableFormatter(result) : result + return typeof tableFormatter === 'function' ? tableFormatter(result) : result } getAllDataFromDomain(groups?: any) { diff --git a/packages/core/src/model/pie.ts b/packages/core/src/model/pie.ts index 8261be7930..d29a71ce25 100644 --- a/packages/core/src/model/pie.ts +++ b/packages/core/src/model/pie.ts @@ -28,15 +28,15 @@ export class PieChartModel extends ChartModel { const displayData = this.getDisplayData() const options = this.getOptions() const { groupMapsTo } = options.data - const headingLabels = ['Group', 'Value'] - const tableData = [ + const headers = ['Group', 'Value'] + const cells = [ ...displayData.map((datum: any) => [ datum[groupMapsTo], datum['value'] === null ? '–' : datum['value'].toLocaleString() ]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } sanitize(data: any) { diff --git a/packages/core/src/model/radar.ts b/packages/core/src/model/radar.ts index 0ed5eab3ca..2ae2e69687 100644 --- a/packages/core/src/model/radar.ts +++ b/packages/core/src/model/radar.ts @@ -16,8 +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 headingLabels = ['Group', ...additionalHeaders] - const tableData = [ + const headers = ['Group', ...additionalHeaders] + const cells = [ ...groupedData.map(datum => { return [ datum['name'], @@ -30,6 +30,6 @@ export class RadarChartModel extends ChartModelCartesian { }) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/tree.ts b/packages/core/src/model/tree.ts index ad4989e382..1e7a42f7b8 100644 --- a/packages/core/src/model/tree.ts +++ b/packages/core/src/model/tree.ts @@ -11,15 +11,15 @@ export class TreeChartModel extends ChartModel { getTabularDataArray() { const displayData = this.getDisplayData() - const headingLabels = ['Child', 'Parent'] - const tableData = [] + const headers = ['Child', 'Parent'] + const cells = [] displayData.forEach((datum: any) => { // Call recurisve function - this.getChildrenDatums(datum, tableData) - tableData.push([datum.name, '–']) + this.getChildrenDatums(datum, cells) + cells.push([datum.name, '–']) }) - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } /** diff --git a/packages/core/src/model/treemap.ts b/packages/core/src/model/treemap.ts index 110f69b448..b99f678519 100644 --- a/packages/core/src/model/treemap.ts +++ b/packages/core/src/model/treemap.ts @@ -12,18 +12,18 @@ export class TreemapChartModel extends ChartModel { getTabularDataArray() { const displayData = this.getDisplayData() - const headingLabels = ['Child', 'Group', 'Value'] - const tableData = [] + const headers = ['Child', 'Group', 'Value'] + const cells = [] displayData.forEach((datum: any) => { if (Array.isArray(datum.children)) { datum.children.forEach((child: any) => { - tableData.push([child.name, datum.name, child.value]) + cells.push([child.name, datum.name, child.value]) }) } else if (getProperty(datum.name) !== null && getProperty(datum.value)) { - tableData.push(['–', datum.name, datum.value]) + cells.push(['–', datum.name, datum.value]) } }) - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } diff --git a/packages/core/src/model/wordcloud.ts b/packages/core/src/model/wordcloud.ts index f2c2680ca0..e3f984b435 100644 --- a/packages/core/src/model/wordcloud.ts +++ b/packages/core/src/model/wordcloud.ts @@ -13,8 +13,8 @@ export class WordCloudModel extends ChartModel { const options = this.getOptions() const { fontSizeMapsTo, wordMapsTo } = options.wordCloud const { groupMapsTo } = options.data - const headingLabels = [options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel] - const tableData = [ + const headers = [options.tooltip.wordLabel, 'Group', options.tooltip.valueLabel] + const cells = [ ...displayData.map((datum: any) => [ datum[wordMapsTo], datum[groupMapsTo], @@ -22,6 +22,6 @@ export class WordCloudModel extends ChartModel { ]) ] - return super.formatTable(headingLabels, tableData) + return super.formatTable({ headers, cells }) } } From fbeac78457019ca9a2ec70f51c03888f036aa55c Mon Sep 17 00:00:00 2001 From: Riya Jethwa <76566868+RiyaJethwa@users.noreply.github.com> Date: Thu, 11 Jan 2024 12:11:38 +0530 Subject: [PATCH 4/7] modal property name changed to tabularRepModal --- packages/core/src/model/model.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts index dca1739edf..5ed804ccac 100644 --- a/packages/core/src/model/model.ts +++ b/packages/core/src/model/model.ts @@ -43,9 +43,9 @@ export class ChartModel { formatTable({ headers, cells }) { const options = this.getOptions() - const tableHeadingFormatter = getProperty(options, 'modal', 'tableHeadingFormatter') - const tableCellFormatter = getProperty(options, 'modal', 'tableCellFormatter') - const tableFormatter = getProperty(options, 'modal', 'tableFormatter') + const tableHeadingFormatter = getProperty(options, 'tabularRepModal', 'tableHeadingFormatter') + const tableCellFormatter = getProperty(options, 'tabularRepModal', 'tableCellFormatter') + const tableFormatter = getProperty(options, 'tabularRepModal', 'tableFormatter') const { cartesianScales } = this.services const domainScaleType = cartesianScales?.getDomainAxisScaleType() let domainValueFormatter: any From e9cbf3d2a64fcc4660d8e4fd1b796dca2b138d61 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Thu, 11 Jan 2024 12:14:17 -0500 Subject: [PATCH 5/7] Update pie.ts --- packages/core/src/model/pie.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/model/pie.ts b/packages/core/src/model/pie.ts index ac1d65aa7b..425a62249b 100644 --- a/packages/core/src/model/pie.ts +++ b/packages/core/src/model/pie.ts @@ -28,6 +28,8 @@ export class PieChartModel extends ChartModel { const displayData = this.getDisplayData() const options = this.getOptions() const { groupMapsTo } = options.data + const { valueMapsTo } = options.pie + const headers = ['Group', 'Value'] const cells = [ ...displayData.map((datum: any) => [ From b33c4b0c05fd18189a7a801269e0beed8da79228 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Thu, 11 Jan 2024 12:14:43 -0500 Subject: [PATCH 6/7] Update cartesian-charts.ts --- packages/core/src/model/cartesian-charts.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/src/model/cartesian-charts.ts b/packages/core/src/model/cartesian-charts.ts index e232ac0748..d3f4af328b 100644 --- a/packages/core/src/model/cartesian-charts.ts +++ b/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' From b04ce29bd49ffca6459d7311a40bd998eb11f5d3 Mon Sep 17 00:00:00 2001 From: Riya Jethwa <76566868+RiyaJethwa@users.noreply.github.com> Date: Fri, 12 Jan 2024 11:58:23 +0530 Subject: [PATCH 7/7] tableCellFormatter receiving entire cell data and removal of tableFormatter --- packages/core/src/model/model.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts index e09d821c60..50e2855a08 100644 --- a/packages/core/src/model/model.ts +++ b/packages/core/src/model/model.ts @@ -59,24 +59,25 @@ export class ChartModel { const options = this.getOptions() const tableHeadingFormatter = getProperty(options, 'tabularRepModal', 'tableHeadingFormatter') const tableCellFormatter = getProperty(options, 'tabularRepModal', 'tableCellFormatter') - const tableFormatter = getProperty(options, 'tabularRepModal', 'tableFormatter') 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, - ...cells.map((data: (string | number)[]) => { - const dataCopy = [...data] - if (domainValueFormatter) { - dataCopy[1] = domainValueFormatter(dataCopy[1]) as string - } - return typeof tableCellFormatter === 'function' ? tableCellFormatter(data) : dataCopy - }) + ...(typeof tableCellFormatter === 'function' + ? tableCellFormatter(cells) + : cells.map((data: (string | number)[]) => { + if (domainValueFormatter) { + data[1] = domainValueFormatter(data[1]) as string + } + return data + })) ] - return typeof tableFormatter === 'function' ? tableFormatter(result) : result + return result } getAllDataFromDomain(groups?: any) {