Merge pull request #245 from adobe/mif/issue-217-datetime-data

Issue-217 Support datetime data properly for Line & Bar & Area charts

Author: marshallpete

src/specBuilder/area/areaSpecBuilder.test.ts

@@ -57,6 +57,11 @@ const defaultSpec = initializeSpec({
 			name: TABLE,
 			transform: [
 				{ as: MARK_ID, type: 'identifier' },
+				{
+					type: 'formula',
+					expr: `toDate(datum[\"${DEFAULT_TIME_DIMENSION}\"])`,
+					as: DEFAULT_TIME_DIMENSION,
+				},
 				{
 					as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 					field: DEFAULT_TIME_DIMENSION,

src/specBuilder/data/dataUtils.test.ts

@@ -9,9 +9,28 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import { TABLE } from '@constants';
+import { DEFAULT_TIME_DIMENSION, DEFAULT_TRANSFORMED_TIME_DIMENSION, TABLE } from '@constants';
 
-import { getTableData } from './dataUtils';
+import { addTimeTransform, getTableData } from './dataUtils';
+
+describe('addTimeTransform()', () => {
+	test('should return the time transforms', () => {
+		const inputTransforms = [];
+		const dimension = 'datetime';
+		const outputTransforms = [{
+			type: 'formula',
+			expr: `toDate(datum[\"${dimension}\"])`,
+			as: dimension
+		},
+		{
+			type: 'timeunit',
+			field: dimension,
+			units: ['year', 'month', 'date', 'hours', 'minutes'],
+			as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
+		}];
+		expect(addTimeTransform(inputTransforms, dimension)).toEqual(outputTransforms);
+	});
+});
 
 describe('getTableData()', () => {
 	test('should return the table data', () => {

src/specBuilder/data/dataUtils.ts

@@ -23,6 +23,11 @@ import { Compare, Data, FormulaTransform, SourceData, Transforms, ValuesData } f
 
 export const addTimeTransform = produce<Transforms[], [string]>((transforms, dimension) => {
 	if (transforms.findIndex((transform) => transform.type === 'timeunit') === -1) {
+		transforms.push({
+			type: 'formula',
+			expr: `toDate(datum["${dimension}"])`,
+			as: dimension
+		});
 		transforms.push({
 			type: 'timeunit',
 			field: dimension,

src/specBuilder/line/lineSpecBuilder.test.ts

@@ -70,6 +70,11 @@ const defaultSpec = initializeSpec({
 			name: TABLE,
 			transform: [
 				{ as: MARK_ID, type: 'identifier' },
+				{
+					type: 'formula',
+					expr: `toDate(datum[\"${DEFAULT_TIME_DIMENSION}\"])`,
+					as: DEFAULT_TIME_DIMENSION,
+				},
 				{
 					as: [DEFAULT_TRANSFORMED_TIME_DIMENSION, `${DEFAULT_TIME_DIMENSION}1`],
 					field: DEFAULT_TIME_DIMENSION,
@@ -387,7 +392,7 @@ describe('lineSpecBuilder', () => {
 					...defaultLineProps,
 					children: [createElement(Trendline, { method: 'movingAverage-7' })],
 				})[0].transform
-			).toHaveLength(2);
+			).toHaveLength(3);
 		});
 
 		test('adds point data if displayPointMark is not undefined', () => {

src/specBuilder/scatter/scatterSpecBuilder.test.ts

@@ -34,8 +34,8 @@ describe('addData()', () => {
 	test('should add time transform is dimensionScaleType === "time"', () => {
 		const data = addData(initializeSpec().data ?? [], { ...defaultScatterProps, dimensionScaleType: 'time' });
 		expect(data).toHaveLength(2);
-		expect(data[0].transform).toHaveLength(2);
-		expect(data[0].transform?.[1].type).toBe('timeunit');
+		expect(data[0].transform).toHaveLength(3);
+		expect(data[0].transform?.[2].type).toBe('timeunit');
 	});
 	test('should add additional filteredData if tooltip exists', () => {
 		const data = addData(initializeSpec().data ?? [], {

src/stories/components/Line/Line.story.tsx

@@ -93,6 +93,18 @@ const LineStory: StoryFn<typeof Line> = (args): ReactElement => {
 	);
 };
 
+const LineStoryWithUTCData: StoryFn<typeof Line> = (args): ReactElement => {
+	const chartProps = useChartProps({ ...defaultChartProps, data: workspaceTrendsData.map(d => ({ ...d, datetime: new Date(d.datetime).toISOString() })) });
+	return (
+		<Chart {...chartProps}>
+			<Axis position="left" grid title="Users" />
+			<Axis position="bottom" labelFormat="time" baseline ticks />
+			<Line {...args} />
+			<Legend highlight />
+		</Chart>
+	);
+};
+
 const ComboStory: StoryFn<typeof Line> = (args): ReactElement => {
 	const chartProps = useChartProps(defaultChartProps);
 	return (
@@ -154,6 +166,15 @@ LineWithAxisAndLegend.args = {
 	scaleType: 'time',
 };
 
+const LineWithUTCDatetimeFormat = bindWithProps(LineStoryWithUTCData);
+LineWithUTCDatetimeFormat.args = {
+	color: 'series',
+	dimension: 'datetime',
+	metric: 'users',
+	name: 'line0',
+	scaleType: 'time',
+};
+
 const LineType = bindWithProps(BasicLineStory);
 LineType.args = {
 	color: 'series',
@@ -251,6 +272,7 @@ WithStaticPointsAndDialogs.args = {
 export {
 	Basic,
 	LineWithAxisAndLegend,
+	LineWithUTCDatetimeFormat,
 	LineType,
 	Opacity,
 	TrendScale,

src/stories/components/Line/Line.test.tsx

@@ -34,6 +34,7 @@ import {
 	HistoricalCompare,
 	LineType,
 	LineWithAxisAndLegend,
+	LineWithUTCDatetimeFormat,
 	LinearTrendScale,
 	Opacity,
 	Tooltip,
@@ -71,6 +72,12 @@ describe('Line', () => {
 		expect(lines[0]).toBeInTheDocument();
 	});
 
+	test('Line with UTC datetime format renders', async () => {
+		render(<LineWithUTCDatetimeFormat {...LineWithAxisAndLegend.args} />);
+		expect(await screen.findByText('Nov')).toBeInTheDocument();
+		expect(await screen.findByText('11')).toBeInTheDocument();
+	});
+
 	test('LineType renders', async () => {
 		render(<LineType {...LineType.args} />);
 		const chart = await findChart();