Merge pull request carbon-design-system#609 from accurat/time-series-…

…labels-bug * Time series: add example to show the bug about labels * Time series: fix bug about labels * Revert "Time series: fix bug about labels" This reverts commit 7c055fe. * Fix linter problems * Fix logic computing timeIntervalName * Rename variables inside closestTimeIntervalName function * Time series axis: use scale nice * Remove useless demo example * fix scatter interface * v0.30.18 * Ruler interaction replacing Grid mouse listeners for comparative tooltips (carbon-design-system#499) * add ruler and axis tooltip * move ruler logic to it's own graphFrameComponent * refactor, add axis tooltip dynamic width, add matching elements hovering * use getDomainValue instead of hardcoded accessor * add snap to nearest point * use getSVGElementSize to get backdrop height * remove useless code * add trigger mouseout in hideRuler to only highlight single hovered element * WIP * fix categorical scale elements mouseover trigger * fix close points mouseover/out trigger * fix import order and package version * add more test data * add crosshair cursor when ruler is active to better select data points * refactor, more docs * fix axis tooltip baseline * minor refactor Co-Authored-By: Zvonimir Fras <[email protected]> * change ruler color * a11y bubble * only show ruler for continuous domain - wip * add support for top axis * no need to support discrete scales anymore * make sure tooltip does not go out of axis bbox * remove axis tooltip * only show ruler if there's match with data points * only show ruler on timescale linechart * add filter for items getting null values at times, breaking tooltip * refactor * fix(core): update import path carbon-components fix carbon-design-system#546 * v0.30.7 * Merge pull request carbon-design-system#529 from theiliad/tabular-data-format * add basic tabular data format support * string updates * finalize line graph implementation with tabular data support * cleanup * finalize scatter graph with support for tabular data * commented out ideas for the data format * time-series support for tabular data within line graph * scatter support * optimize logic to find main vertical & horizontal axes * remove primary & secondary labels * bubble chart support * grouped bar support * horizontal grouped bar * fix legend filtering * fix bubble and scatter * fix bar hover errors * simple bar support * simple bar time-series support * horizontal simple bar support * more graph support * fix pie tooltip * fix donut center value * fix line & scatter demo ranges * fix bar demos * stacked data supprot * backwards data format compatibility * fix plotting of datums with a value of 0 * fixed stacked bar tooltip * remove primary, secondary, useAsGraphDomain/Range * Update packages/core/src/model.ts Co-Authored-By: natashadecoste <[email protected]> * apply suggested PR changes * fix group bar positioning issues * apply PR suggested changes * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * Update packages/core/demo/data/bar.ts Co-Authored-By: natashadecoste <[email protected]> * rename "identifier" to "mapsTo" * add tutorials section to core storybook * add links to errors * remove unnecessary comment * add custom color scale support * apply PR suggested changes * fix tests Co-authored-by: natashadecoste <[email protected]> * v0.30.8 * Apply suggestions from code review Co-Authored-By: Eliad Moosavi <[email protected]> * applied suggestions from review * fix ruler css * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/styles/components/_ruler.scss Co-Authored-By: Eliad Moosavi <[email protected]> * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * add suggestions from review * Update packages/core/demo/data/line.ts Co-Authored-By: natashadecoste <[email protected]> * Apply suggestions from code review Co-Authored-By: natashadecoste <[email protected]> * enable ruler on bubble and scatter * disable mouse listeners on grid * enable ruler for every scale type * fix ruler on linear scales, refactor matches logic Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> * Ruler fix (carbon-design-system#598) * fix elements highlighting * fix multiple matching points * refactor * dead code * fix type * refactor reducer logic * more dead code * Update packages/core/src/components/axes/ruler.ts Co-Authored-By: Eliad Moosavi <[email protected]> * apply suggestion from review * rename * add orientation support * fix wrong y offset in mouse coords * better typing Co-authored-by: Eliad Moosavi <[email protected]> * fix vue type check for charting data * Add Svelte wrappers (carbon-design-system#569) * feat: add svelte wrappers * chore(svelte): format babelrc, rollup config * chore(deps-dev): lock @storybook/svelte version Co-Authored-By: Eliad Moosavi <[email protected]> * chore(deps-dev): lock svelte version Co-Authored-By: Eliad Moosavi <[email protected]> * chore(deps-dev): lock svelte-loader version Co-Authored-By: Eliad Moosavi <[email protected]> * docs(svelte): fill in Codesandbox section * chore(svelte): define maintainers, contributors in package.json * docs(svelte): add codesandbox * chore(svelte): update package version to 0.30.18 Co-Authored-By: Eliad Moosavi <[email protected]> * chore(yarn): rebuild lockfile to fix errored ci Co-authored-by: Eliad Moosavi <[email protected]> * Update README.md * v0.30.19 * Merge pull request carbon-design-system#581 from accurat/radar * Radar setup * Radar: create center and spokes * Radar refactor * Radar: Do not render anything if width or height are 0 * Radar: create blobs (wip) * Radar: set colors * Radar: refactor * Radar: create x axes * Radar: refactor * Radar: fix color opacity * Radar: Compute ticks with a minimum value * Radar: draw y axis * Radar: y axes start from the min tick value * Radar: add exit for x axes * Radar: blob creation refactor * Radar: rename classes * Radar: fix class name * Radar: mini refactor * Radar: fix blobs bind * Radar: style changes * Radar: fix min radius logic * Radar: bind displayData to x axes not data * Radar: add transitions * Radar: add key labels (wip) * Radar: change margin value * Radar: fix labels position * fix(core): fix backwards compatibility for pie/donut (carbon-design-system#576) * fix(core): fix pie model to ignore dataset name when converting to tabular * apply review changes * provide all datapoint info to stacked bar tooltips (carbon-design-system#573) * Merge pull request carbon-design-system#574 from theiliad/axis-formatters * optimize axis tick formatting * Update packages/core/src/components/axes/axis.ts Co-Authored-By: natashadecoste <[email protected]> * optimize axis formatter for time-scale when user has already provided one Co-authored-by: natashadecoste <[email protected]> * v0.30.12 * fix(core): Support for Horizontal Line and Scatter Chart * fix line graph update issues * v0.30.13 * Change method name * v0.30.14 * Fix linting problem about methods order * v0.30.15 * Radar: fix y axes transitions * Code comments for tools.ts (carbon-design-system#416) * update documentation for tools.ts * docs(tools.ts): api documentation Co-authored-by: Eliad Moosavi <[email protected]> * remove bbox dependency on pie labels * Merge pull request carbon-design-system#588 from accurat/invalid-time-value-bug * Fix bug `RangeError Invalid time value` * Extends domain refactor * Time series: add example with addSpaceOnEdge = 0 * Rename functions * Change method order * v0.30.16 * v0.30.17 * Radar: use the new .join d3 method * Use join to manage enter, update, exit logic * Radar: fill missing data * Radar: fix animations but need a refactor * Radar: add events * Radar: add tooltip * Radar: miss an import * Radar: use groupMapsTo * Radar: number of spokes doesn't change * Radar: use groupMapsTo for data mapping * Radar: show NA when data are missing * Radar: add y labels * Radar: remove events on blobs * Radar: left align * Radar: create rectangles over x axis * Radar: make x axis dashed on mouse over * Radar: add dots * Radar: move utility functions in another file * Radar: fix radial label placement for negative angles * Radar: refactor * Radar: radialLabelPlacement refactor * Radar: better logic to center chart * Radar: fix x axis style when overed * Radar: change blobs opacity * Radar: create y axes transition * Radar: create x axes transition * Radar: create blobs transition * Radar: x and y labels transition * Radar: fix transitions * Radar: more left space for y labels * Radar: remove unused imports * Radar: use the right transitions * Radar: remove logs * Radar: remove debug stuff * Radar: update y labels * Radar: fix Firefox bug * Radar: move constants to configuration * Radar: rename variables * Radar: fix typo * Radar: update comments * Radar: move lodash methods inside Tools * Radar: add examples and make radar more generic * Radar: fix tooltip value * Radar: fix tooltip data order * Radar: fix radar default formatter * Radar: fix showing dots * Radar: use variable instead of recompute value * Radar: create enums from textAnchor and dominantBaseline values * Radar: put dots radius to radar configuration * Radar: use tabs instead of spaces * Radar: use helper function for accesing properties * Radar: get property from options Co-authored-by: natashadecoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Serena Girardi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> * v0.30.20 Co-authored-by: Fei <[email protected]> Co-authored-by: carbon-bot <[email protected]> Co-authored-by: Luca Falasco <[email protected]> Co-authored-by: Zvonimir Fras <[email protected]> Co-authored-by: Natasha DeCoste <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eliad Moosavi <[email protected]> Co-authored-by: Eric Liu <[email protected]> Co-authored-by: Serena Girardi <[email protected]>
theiliad · May 13, 2020 · 87dbdc8 · 87dbdc8
1 parent f1ce6a2
commit 87dbdc8
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 26 deletions.
diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
@@ -488,6 +488,36 @@ let allDemoGroups = [
 				data: timeSeriesAxisDemos.lineTimeSeriesNoExtendedDomainData,
 				options: timeSeriesAxisDemos.lineTimeSeriesNoExtendedDomainOptions,
 				chartType: chartTypes.LineChart
+			},
+			{
+				data: timeSeriesAxisDemos.lineTimeSeriesDataTwoIdenticalLabels,
+				options: timeSeriesAxisDemos.lineTimeSeriesTwoIdenticalLabelsOptions,
+				chartType: chartTypes.LineChart
+			},
+			{
+				data: timeSeriesAxisDemos.lineTimeSeriesDataAllLabelsInPrimaryFormat,
+				options: timeSeriesAxisDemos.lineTimeSeriesAllLabelsInPrimaryFormatOptions,
+				chartType: chartTypes.LineChart
+			}
+		]
+	},
+	{
+		title: "Radar",
+		demos: [
+			{
+				data: radarDemos.radarData,
+				options: radarDemos.radarOptions,
+				chartType: chartTypes.RadarChart
+			},
+			{
+				data: radarDemos.radarWithMissingDataData,
+				options: radarDemos.radarWithMissingDataOptions,
+				chartType: chartTypes.RadarChart
+			},
+			{
+				data: radarDemos.radarDenseData,
+				options: radarDemos.radarDenseOptions,
+				chartType: chartTypes.RadarChart
 			}
 		]
 	},

diff --git a/packages/core/demo/data/time-series-axis.ts b/packages/core/demo/data/time-series-axis.ts
@@ -351,3 +351,70 @@ export const lineTimeSeriesNoExtendedDomainOptions = {
 		addSpaceOnEdges: 0
 	}
 };
+
+// bug two identical labels
+export const lineTimeSeriesDataTwoIdenticalLabels = {
+	labels: ["Qty"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			data: [
+				{ date: new Date(2020, 0, 23, 23, 0), value: 10 },
+				{ date: new Date(2020, 1, 9, 23, 0), value: 10 }
+			]
+		}
+	]
+};
+
+export const lineTimeSeriesTwoIdenticalLabelsOptions = {
+	title: "Line (time series) - Two identical labels",
+	axes: {
+		left: {},
+		bottom: {
+			scaleType: "time"
+		}
+	},
+	timeScale: {
+		addSpaceOnEdges: 0
+	}
+};
+
+export const lineTimeSeriesTwoIdenticalLabels2Options = {
+	title: "Line (time series) - Two identical labels 2",
+	axes: {
+		left: {},
+		bottom: {
+			scaleType: "time"
+		}
+	},
+	timeScale: {
+		addSpaceOnEdges: 0
+	}
+};
+
+// bug all labels in primary format
+export const lineTimeSeriesDataAllLabelsInPrimaryFormat = {
+	labels: ["Qty"],
+	datasets: [
+		{
+			label: "Dataset 1",
+			data: [
+				{ date: new Date(2020, 0, 23, 1, 0), value: 10 },
+				{ date: new Date(2020, 0, 29, 1, 0), value: 10 }
+			]
+		}
+	]
+};
+
+export const lineTimeSeriesAllLabelsInPrimaryFormatOptions = {
+	title: "Line (time series) - All labels in primary format",
+	axes: {
+		left: {},
+		bottom: {
+			scaleType: "time"
+		}
+	},
+	timeScale: {
+		addSpaceOnEdges: 0
+	}
+};
diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts
@@ -133,17 +133,16 @@ export class Axis extends Component {
 				if (!scale.ticks(numberOfTicks).length) {
 					axis.tickValues([]);
 				} else {
-					let tickValues = scale.ticks(numberOfTicks).concat(scale.domain()).map(date => +date).sort();
-					tickValues = Tools.removeArrayDuplicates(tickValues);
+					const tickValues = scale.nice(numberOfTicks).ticks(numberOfTicks);
 
-					// Remove labels on the edges
-					// If there are more than 2 labels to show
-					if (Tools.getProperty(options, "timeScale", "addSpaceOnEdges") && tickValues.length > 2) {
-						tickValues.splice(tickValues.length - 1, 1);
-						tickValues.splice(0, 1);
-					}
+          // Remove labels on the edges
+          // If there are more than 2 labels to show
+          if (Tools.getProperty(options, "timeScale", "addSpaceOnEdges") && tickValues.length > 2) {
+            tickValues.splice(tickValues.length - 1, 1);
+            tickValues.splice(0, 1);
+          }
 
-					axis.tickValues(tickValues);
+          axis.tickValues(tickValues);
 				}
 			}
 		}

diff --git a/packages/core/src/services/time-series.spec.ts b/packages/core/src/services/time-series.spec.ts
@@ -26,7 +26,7 @@ it("should format ticks with timeInterval 15seconds", () => {
 		[new Date(2020, 11, 11, 0, 0, 0), "Dec 11, 12:00:00 AM"],
 		[new Date(2020, 11, 11, 0, 0, 15), "12:00:15 AM"],
 		[new Date(2020, 11, 11, 0, 0, 30), "12:00:30 AM"],
-		[new Date(2020, 11, 11, 0, 0, 45), "12:00:45 AM"],
+		[new Date(2020, 11, 11, 0, 0, 45), "12:00:45 AM"]
 	];
 	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(dataset);
 	const timeInterval = computeTimeIntervalName(timestamps);
@@ -47,7 +47,7 @@ it("should format ticks with timeInterval minute", () => {
 		[new Date(2020, 4, 22, 11, 59, 0), "11:59 AM"],
 		[new Date(2020, 4, 22, 12, 0, 0), "12:00 PM"],
 		[new Date(2020, 4, 22, 12, 1, 0, 0), "12:01 PM"],
-		[new Date(2020, 4, 22, 12, 2, 0), "12:02 PM"],
+		[new Date(2020, 4, 22, 12, 2, 0), "12:02 PM"]
 	];
 	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(dataset);
 	const timeInterval = computeTimeIntervalName(timestamps);
@@ -63,7 +63,7 @@ it("should format ticks with timeInterval 30minutes", () => {
 		[new Date(2020, 11, 11, 0, 0), "Dec 11, 12:00 AM"],
 		[new Date(2020, 11, 11, 0, 30), "12:30 AM"],
 		[new Date(2020, 11, 11, 1, 0), "1:00 AM"],
-		[new Date(2020, 11, 11, 1, 30), "1:30 AM"],
+		[new Date(2020, 11, 11, 1, 30), "1:30 AM"]
 	];
 	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(dataset);
 	const timeInterval = computeTimeIntervalName(timestamps);
@@ -85,7 +85,7 @@ it("should format ticks with timeInterval hourly", () => {
 		[new Date(2020, 11, 11, 12, 0), "12 PM"],
 		[new Date(2020, 11, 11, 13, 0), "01 PM"],
 		[new Date(2020, 11, 11, 14, 0), "02 PM"],
-		[new Date(2020, 11, 11, 15, 0), "03 PM"],
+		[new Date(2020, 11, 11, 15, 0), "03 PM"]
 	];
 	const { timestamps: timestampsDefaultFormats, formattedTicks: formattedTicksDefaultFormats } =
 		getTimestampsAndFormattedTicks(datasetDefaultFormats);
@@ -106,7 +106,7 @@ it("should format ticks with timeInterval hourly", () => {
 		[new Date(2020, 11, 11, 12, 0), "12:00"],
 		[new Date(2020, 11, 11, 13, 0), "13:00"],
 		[new Date(2020, 11, 11, 14, 0), "14:00"],
-		[new Date(2020, 11, 11, 15, 0), "15:00"],
+		[new Date(2020, 11, 11, 15, 0), "15:00"]
 	];
 	const { timestamps: timestampsCustomFormats, formattedTicks: formattedTicksCustomFormats } =
 		getTimestampsAndFormattedTicks(datasetCustomFormats);
@@ -115,7 +115,7 @@ it("should format ticks with timeInterval hourly", () => {
 	const timeScaleCustomOptions = {
 		...timeScaleDefaultOptions,
 		timeIntervalFormats: {
-			"hourly": { primary: "MMM d, HH:mm", secondary: "HH:mm" },
+			"hourly": { primary: "MMM d, HH:mm", secondary: "HH:mm" }
 		}
 	};
 	expect(format(timestampsCustomFormats, timeIntervalCustomFormats, timeScaleCustomOptions)).toEqual(formattedTicksCustomFormats);
@@ -134,7 +134,7 @@ it("should format ticks with timeInterval daily", () => {
 		[new Date(2020, 0, 31), "31"],
 		[new Date(2020, 1, 1), "Feb 1"],
 		[new Date(2020, 1, 2), "2"],
-		[new Date(2020, 1, 3), "3"],
+		[new Date(2020, 1, 3), "3"]
 	];
 	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(dataset);
 	const timeInterval = computeTimeIntervalName(timestamps);
@@ -155,7 +155,7 @@ it("should format ticks with timeInterval weekly", () => {
 		[new Date(2020, 1, 4), "Tue"],
 		[new Date(2020, 1, 5), "Wed"],
 		[new Date(2020, 1, 6), "Thu"],
-		[new Date(2020, 1, 7), "Fri"],
+		[new Date(2020, 1, 7), "Fri"]
 	];
 	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(dataset);
 	const timeInterval = computeTimeIntervalName(timestamps);
@@ -178,7 +178,7 @@ it("should format ticks with timeInterval monthly", () => {
 		[new Date(2019, 11), "Dec"],
 		[new Date(2020, 0), "Jan 2020"],
 		[new Date(2020, 1), "Feb"],
-		[new Date(2020, 2), "Mar"],
+		[new Date(2020, 2), "Mar"]
 	];
 	const { timestamps: timestampsdefaultFormats, formattedTicks: formattedTicksdefaultFormats } =
 		getTimestampsAndFormattedTicks(datasetdefaultFormats);
@@ -199,7 +199,7 @@ it("should format ticks with timeInterval monthly", () => {
 		[new Date(2019, 11), "déc."],
 		[new Date(2020, 0), "janv. 2020"],
 		[new Date(2020, 1), "févr."],
-		[new Date(2020, 2), "mars"],
+		[new Date(2020, 2), "mars"]
 	];
 	const { timestamps: timestampsCustomFormats, formattedTicks: formattedTicksCustomFormats } =
 		getTimestampsAndFormattedTicks(datasetCustomFormats);
@@ -222,7 +222,7 @@ it("should format ticks with timeInterval quarterly", () => {
 		[new Date(2019, 5), `Q2`],
 		[new Date(2019, 7), `Q3`],
 		[new Date(2019, 10), `Q4`],
-		[new Date(2020, 0), `Q1 '20`],
+		[new Date(2020, 0), `Q1 '20`]
 	];
 	const { timestamps, formattedTicks } = getTimestampsAndFormattedTicks(dataset);
 	const timeInterval = computeTimeIntervalName(timestamps);

diff --git a/packages/core/src/services/time-series.ts b/packages/core/src/services/time-series.ts
@@ -83,12 +83,13 @@ function getConsecutiveDifferences(elements: number[]): number[] {
 	return elements.slice(1).map((elem, i) => elem - elements[i]);
 }
 
-// Given a number, return the closest TIME_INTERVAL name
-function closestTimeIntervalName(ms: number): string {
-	const index = TIME_INTERVALS.reduce((acc, [key, value]: [string, number], i) => {
-		const previousSpan = Math.abs(acc - ms);
-		const currentSpan = Math.abs(value - ms);
-		return previousSpan < currentSpan ? acc : i;
+// Given a duration in ms, return the closest TIME_INTERVAL name
+function closestTimeIntervalName(duration: number): string {
+	const index = TIME_INTERVALS.reduce((nearestIndex, [intervalName, delta]: [string, number], i) => {
+		const deltaNearest = TIME_INTERVALS[nearestIndex][1] as number;
+		const oldNearestSpan = Math.abs(deltaNearest - duration);
+		const currentSpan = Math.abs(delta - duration);
+		return oldNearestSpan < currentSpan ? nearestIndex : i;
 	}, 0);
 	return TIME_INTERVALS[index][0] as string;
 }