fix(model-scalesCartesian):Histogram unable to show negative values o…

…n x-axis
carbon-design-system · Dec 5, 2023 · eccea52 · eccea52
1 parent 0eabcc4
commit eccea52
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 40 deletions.
diff --git a/packages/core/src/model/model.ts b/packages/core/src/model/model.ts
@@ -1,11 +1,5 @@
 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'
@@ -63,7 +57,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 +210,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 +272,7 @@ export class ChartModel {
 			}
 		})
 
-		return Object.keys(groupedData).map((groupName) => ({
+		return Object.keys(groupedData).map(groupName => ({
 			name: groupName,
 			data: groupedData[groupName]
 		}))
@@ -291,7 +285,7 @@ export class ChartModel {
 
 		let stackKeys: any
 		if (bins) {
-			stackKeys = bins.map((bin: any) => `${bin.x0}-${bin.x1}`)
+			stackKeys = bins.map((bin: any) => `${bin.x0}:${bin.x1}`)
 		} else {
 			stackKeys = uniq(
 				displayData.map((datum: any) => {
@@ -337,11 +331,10 @@ export class ChartModel {
 		const stackKeys = this.getStackKeys({ bins, groups })
 		if (bins) {
 			return stackKeys.map((key: any) => {
-				const [binStart, binEnd] = key.split('-')
+				const [binStart, binEnd] = key.split(':')
 
 				const correspondingValues: any = { x0: binStart, x1: binEnd }
 				const correspondingBin = bins.find((bin: any) => bin.x0.toString() === binStart.toString())
-
 				dataGroupNames.forEach((dataGroupName: any) => {
 					correspondingValues[dataGroupName] = correspondingBin.filter(
 						(binItem: any) => binItem[groupMapsTo] === dataGroupName
@@ -600,7 +593,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}`)
@@ -673,7 +666,7 @@ export class ChartModel {
 	}
 
 	exportToCSV() {
-		const data = this.getTabularDataArray().map((row) =>
+		const data = this.getTabularDataArray().map(row =>
 			row.map((column: any) => `"${column === '&ndash;' ? '–' : column}"`)
 		)
 
@@ -684,22 +677,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 +755,7 @@ export class ChartModel {
 				? ACTIVE
 				: DISABLED
 
-		return uniqueDataGroups.map((groupName) => ({
+		return uniqueDataGroups.map(groupName => ({
 			name: groupName,
 			status: getStatus(groupName)
 		}))
@@ -783,7 +772,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 +782,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/services/scales-cartesian.ts b/packages/core/src/services/scales-cartesian.ts
@@ -1,4 +1,14 @@
-import { extent, max, scaleBand, scaleLinear, scaleTime, scaleLog, type ScaleTime, type ScaleBand, type ScaleLinear } from 'd3'
+import {
+	extent,
+	max,
+	scaleBand,
+	scaleLinear,
+	scaleTime,
+	scaleLog,
+	type ScaleTime,
+	type ScaleBand,
+	type ScaleLinear
+} from 'd3'
 import {
 	differenceInYears,
 	addYears,
@@ -26,7 +36,10 @@ import { Service } from './service'
 import { AxisPositions, CartesianOrientations, ScaleTypes } from '@/interfaces/enums'
 import { ThresholdOptions } from '@/interfaces/components'
 
-export type ScaleFunction = ScaleTime<number, number, never> | ScaleBand<string> | ScaleLinear<number, number, never>
+export type ScaleFunction =
+	| ScaleTime<number, number, never>
+	| ScaleBand<string>
+	| ScaleLinear<number, number, never>
 
 export class CartesianScales extends Service {
 	protected scaleTypes = {
@@ -36,7 +49,8 @@ export class CartesianScales extends Service {
 		left: null as ScaleTypes
 	}
 
-	protected scales = { // null or function
+	protected scales = {
+		// null or function
 		top: null as ScaleLinear<number, number, never>,
 		right: null as ScaleLinear<number, number, never>,
 		bottom: null as ScaleLinear<number, number, never>,
@@ -68,7 +82,7 @@ export class CartesianScales extends Service {
 		return this.domainAxisPosition
 	}
 
-	getRangeAxisPosition({ datum = null, groups = null }: { datum?: any, groups?: any } = {}) {
+	getRangeAxisPosition({ datum = null, groups = null }: { datum?: any; groups?: any } = {}) {
 		if (this.dualAxes) {
 			const options = this.model.getOptions()
 			const { groupMapsTo } = options.data
@@ -130,8 +144,12 @@ export class CartesianScales extends Service {
 		const axisPositions: AxisPositions[] = Object.keys(AxisPositions).map(
 			(axisPositionKey: string) => AxisPositions[axisPositionKey as keyof typeof AxisPositions]
 		)
-		axisPositions.forEach((axisPosition) => {
-			this.scales[axisPosition] = this.createScale(axisPosition) as ScaleLinear<number, number, never>
+		axisPositions.forEach(axisPosition => {
+			this.scales[axisPosition] = this.createScale(axisPosition) as ScaleLinear<
+				number,
+				number,
+				never
+			>
 		})
 	}
 
@@ -250,7 +268,7 @@ export class CartesianScales extends Service {
 		const possibleXAxisPositions = [AxisPositions.BOTTOM, AxisPositions.TOP]
 
 		return [this.domainAxisPosition, this.rangeAxisPosition].find(
-			(position) => possibleXAxisPositions.indexOf(position) > -1
+			position => possibleXAxisPositions.indexOf(position) > -1
 		)
 	}
 
@@ -259,7 +277,7 @@ export class CartesianScales extends Service {
 		const possibleYAxisPositions = [AxisPositions.LEFT, AxisPositions.RIGHT]
 
 		return [this.domainAxisPosition, this.rangeAxisPosition].find(
-			(position) => possibleYAxisPositions.indexOf(position) > -1
+			position => possibleYAxisPositions.indexOf(position) > -1
 		)
 	}
 
@@ -470,7 +488,7 @@ export class CartesianScales extends Service {
 			const { bins } = this.model.getBinConfigurations()
 			const stackKeys = this.model.getStackKeys({ bins })
 
-			return [stackKeys[0].split('-')[0], stackKeys[stackKeys.length - 1].split('-')[1]]
+			return [stackKeys[0].split(':')[0], stackKeys[stackKeys.length - 1].split(':')[1]]
 		}
 
 		const displayData = this.model.getDisplayData()