Custom tick values (#713)

* chore(angular): add angular 9 dependency versions to peerDependencies * improvement(core): add functionality for custom tick values being passed in fix #540 * add time series demo * fix label scale * update demo * review changes Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Fei Z <[email protected]>
carbon-design-system · Jul 21, 2020 · 8827f55 · 8827f55
1 parent c1e36c0
commit 8827f55
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 1 deletion.
diff --git a/packages/core/demo/data/bar.ts b/packages/core/demo/data/bar.ts
@@ -93,6 +93,28 @@ export const simpleBarOptions = {
 	}
 };
 
+// Simple bar with custom tick values
+export const simpleBarDataCustomTicks = [
+	{ group: "Group 1", value: 0.5 },
+	{ group: "Group 2", value: 2 }
+];
+
+export const simpleBarOptionsCustomTicks = {
+	title: "Simple bar (custom ticks)",
+	axes: {
+		left: {
+			mapsTo: "value",
+			ticks: {
+				values: [0, 1.2, 1.3, 2]
+			}
+		},
+		bottom: {
+			mapsTo: "group",
+			scaleType: "labels"
+		}
+	}
+};
+
 // Simple bar with long labels
 export const simpleBarLongLabelData = [
 	{
@@ -322,6 +344,26 @@ export const stackedBarTimeSeriesOptions = {
 	}
 };
 
+// demo with custom ticks
+export const stackedBarTimeSeriesDataCustomTicks = stackedBarTimeSeriesData;
+
+export const stackedBarTimeSeriesOptionsCustomTicks = {
+	title: "Stacked bar (time series - custom ticks)",
+	axes: {
+		left: {
+			mapsTo: "value",
+			stacked: true
+		},
+		bottom: {
+			mapsTo: "date",
+			scaleType: "time",
+			ticks: {
+				values: [new Date(2019, 0, 17)]
+			}
+		}
+	}
+};
+
 // Stacked horizontal bar (time series)
 export const stackedHorizontalBarTimeSeriesOptions = {
 	title: "Stacked horizontal bar (time series)",

diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -148,6 +148,12 @@ let allDemoGroups = [
 				data: barDemos.simpleBarData,
 				chartType: chartTypes.SimpleBarChart
 			},
+			{
+				options: barDemos.simpleBarOptionsCustomTicks,
+				data: barDemos.simpleBarDataCustomTicks,
+				chartType: chartTypes.SimpleBarChart,
+				isDemoExample: false
+			},
 			{
 				options: barDemos.simpleBarLongLabelOptions,
 				data: barDemos.simpleBarLongLabelData,
@@ -212,6 +218,12 @@ let allDemoGroups = [
 				data: barDemos.stackedBarTimeSeriesData,
 				chartType: chartTypes.StackedBarChart
 			},
+			{
+				options: barDemos.stackedBarTimeSeriesOptionsCustomTicks,
+				data: barDemos.stackedBarTimeSeriesDataCustomTicks,
+				chartType: chartTypes.StackedBarChart,
+				isDemoExample: false
+			},
 			{
 				options: barDemos.stackedBarEmptyStateOptions,
 				data: barDemos.stackedBarEmptyStateData,

diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts
@@ -51,6 +51,14 @@ export class Axis extends Component {
 			"number"
 		);
 
+		// user can provide custom ticks to be displayed
+		// ticks need to be in the domain of the axis data
+		const userProvidedTickValues = Tools.getProperty(
+			axisOptions,
+			"ticks",
+			"values"
+		);
+
 		// get user provided custom values for truncation
 		const truncationType = Tools.getProperty(
 			axisOptions,
@@ -256,6 +264,12 @@ export class Axis extends Component {
 		// Set ticks formatter
 		axis.tickFormat(formatter);
 
+		// prioritize using a custom array of values rather than number of ticks
+		// if both are provided. custom tick values need to be within the domain
+		if (userProvidedTickValues) {
+			axis.tickValues(userProvidedTickValues);
+		}
+
 		// Position and transition the axis
 		switch (axisPosition) {
 			case AxisPositions.LEFT:
@@ -457,7 +471,8 @@ export class Axis extends Component {
 		// only applies to discrete type
 		if (
 			truncationType !== TruncationTypes.NONE &&
-			axisScaleType === ScaleTypes.LABELS
+			axisScaleType === ScaleTypes.LABELS &&
+			!userProvidedTickValues
 		) {
 			const dataGroups = this.model.getDataValuesGroupedByKeys();
 			if (dataGroups.length > 0) {

diff --git a/packages/core/src/interfaces/axis-scales.ts b/packages/core/src/interfaces/axis-scales.ts
@@ -78,6 +78,10 @@ export interface AxisOptions {
 		 * function to format the ticks
 		 */
 		formatter?: Function;
+		/**
+		 * optional custom array of tick values that is within the domain of data
+		 */
+		values?: any[]
 	};
 	truncation?: TruncationOptions;
 }