feat(time-format): add full-date to weekly time formatter (#486)

packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber/BigNumberStories.tsx

@@ -37,6 +37,7 @@ const formData = {
   metric: 'sum__SP_POP_TOTL',
   showTrendLine: true,
   startYAxisAtZero: true,
+  timeGrainSqla: 'P1Y',
   vizType: 'big_number',
   yAxisFormat: '.3s',
 };
@@ -68,6 +69,19 @@ export const basicWithTrendline = () => (
   />
 );
 
+export const weeklyTimeGranularity = () => (
+  <SuperChart
+    chartType="big-number"
+    width={400}
+    height={400}
+    queryData={{ data: testData }}
+    formData={{
+      ...formData,
+      timeGrainSqla: 'P1W',
+    }}
+  />
+);
+
 export const nullInTheMiddle = () => (
   <SuperChart
     chartType="big-number"
@@ -90,7 +104,6 @@ export const fixedRange = () => (
     }}
     formData={{
       ...formData,
-      timeGrainSqla: 'P1Y',
       timeRangeFixed: true,
     }}
   />

plugins/legacy-preset-chart-big-number/src/utils/getTimeFormatterForGranularity.ts → packages/superset-ui-time-format/src/factories/getTimeFormatterForGranularity.ts

@@ -16,12 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { getTimeFormatter, TimeFormats, smartDateVerboseFormatter } from '@superset-ui/time-format';
+import TimeFormats from '../TimeFormats';
+import { getTimeFormatter } from '../TimeFormatterRegistrySingleton';
+import smartDateVerboseFormatter from '../formatters/smartDateVerbose';
+import { TimeGranularity } from '../types';
 
 // Translate time granularity to d3-format
 const MINUTE = '%Y-%m-%d %H:%M';
-const SUNDAY_BASED_WEEK = '%Y W%U';
-const MONDAY_BASED_WEEK = '%Y W%W';
+const SUNDAY_BASED_WEEK = '%Y-%m-%d W%U';
+const MONDAY_BASED_WEEK = '%Y-%m-%d W%W';
 const { DATABASE_DATE, DATABASE_DATETIME } = TimeFormats;
 
 // search for `builtin_time_grains` in incubator-superset/superset/db_engine_specs/base.py
@@ -39,16 +42,13 @@ const formats = {
   P1M: '%Y-%m', // month
   'P0.25Y': '%Y Q%q', // quarter
   P1Y: '%Y', // year
-  // d3-time-format weeks does not support weeks start on Sunday
   '1969-12-28T00:00:00Z/P1W': SUNDAY_BASED_WEEK, // 'week_start_sunday'
   '1969-12-29T00:00:00Z/P1W': MONDAY_BASED_WEEK, // 'week_start_monday'
   'P1W/1970-01-03T00:00:00Z': SUNDAY_BASED_WEEK, // 'week_ending_saturday'
   'P1W/1970-01-04T00:00:00Z': MONDAY_BASED_WEEK, // 'week_ending_sunday'
 };
 
-export type TimeGranularity = keyof typeof formats;
-
-export default function getTimeFormatterForGranularity(granularity: TimeGranularity | undefined) {
+export default function getTimeFormatterForGranularity(granularity?: TimeGranularity) {
   return granularity && granularity in formats
     ? getTimeFormatter(formats[granularity])
     : smartDateVerboseFormatter;

packages/superset-ui-time-format/src/index.ts

@@ -9,6 +9,9 @@ export {
 
 export { default as createD3TimeFormatter } from './factories/createD3TimeFormatter';
 export { default as createMultiFormatter } from './factories/createMultiFormatter';
+export { default as getTimeFormatterForGranularity } from './factories/getTimeFormatterForGranularity';
 
 export { default as smartDateFormatter } from './formatters/smartDate';
 export { default as smartDateVerboseFormatter } from './formatters/smartDateVerbose';
+
+export * from './types';

packages/superset-ui-time-format/src/types.ts

@@ -1 +1,20 @@
 export type TimeFormatFunction = (value: Date) => string;
+
+export type TimeGranularity =
+  | 'date'
+  | 'PT1S'
+  | 'PT1M'
+  | 'PT5M'
+  | 'PT10M'
+  | 'PT15M'
+  | 'PT0.5H'
+  | 'PT1H'
+  | 'P1D'
+  | 'P1W'
+  | 'P1M'
+  | 'P0.25Y'
+  | 'P1Y'
+  | '1969-12-28T00:00:00Z/P1W'
+  | '1969-12-29T00:00:00Z/P1W'
+  | 'P1W/1970-01-03T00:00:00Z'
+  | 'P1W/1970-01-04T00:00:00Z';

packages/superset-ui-time-format/test/factories/getTimeFormatterForGranularity.test.ts

@@ -0,0 +1,34 @@
+import getFormatter from '../../src/factories/getTimeFormatterForGranularity';
+import smartDateVerbose from '../../src/formatters/smartDateVerbose';
+
+describe('getTimeFormatterForGranularity()', () => {
+  it('use smartDate when granularity unknown or undefined', () => {
+    expect(getFormatter(undefined)).toBe(smartDateVerbose);
+    // @ts-ignore
+    expect(getFormatter('random-string')).toBe(smartDateVerbose);
+  });
+
+  it('format time for known granularities', () => {
+    // JS Date constructor month is zero-based
+    const date = new Date(2020, 4, 10, 11, 10, 1); // May 10, 2020 is Sunday
+    expect(getFormatter('date')(date)).toBe('2020-05-10');
+    expect(getFormatter('PT1S')(date)).toBe('2020-05-10 11:10:01');
+    expect(getFormatter('PT1M')(date)).toBe('2020-05-10 11:10');
+    expect(getFormatter('PT5M')(date)).toBe('2020-05-10 11:10');
+    expect(getFormatter('PT10M')(date)).toBe('2020-05-10 11:10');
+    expect(getFormatter('PT15M')(date)).toBe('2020-05-10 11:10');
+    expect(getFormatter('PT0.5H')(date)).toBe('2020-05-10 11:10');
+    expect(getFormatter('PT1H')(date)).toBe('2020-05-10 11:00');
+    expect(getFormatter('P1D')(date)).toBe('2020-05-10');
+    expect(getFormatter('P1W')(date)).toBe('2020-05-10 W19');
+    expect(getFormatter('P1M')(date)).toBe('2020-05');
+    expect(getFormatter('P0.25Y')(date)).toBe('2020 Q2');
+    expect(getFormatter('P1Y')(date)).toBe('2020');
+    // sunday based week
+    expect(getFormatter('1969-12-28T00:00:00Z/P1W')(date)).toBe('2020-05-10 W19');
+    expect(getFormatter('P1W/1970-01-03T00:00:00Z')(date)).toBe('2020-05-10 W19');
+    // monday based week
+    expect(getFormatter('1969-12-29T00:00:00Z/P1W')(date)).toBe('2020-05-10 W18');
+    expect(getFormatter('P1W/1970-01-04T00:00:00Z')(date)).toBe('2020-05-10 W18');
+  });
+});

plugins/legacy-preset-chart-big-number/src/BigNumber/transformProps.ts

@@ -19,9 +19,7 @@
 import * as color from 'd3-color';
 import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
 import { ChartProps } from '@superset-ui/chart';
-import getTimeFormatterForGranularity, {
-  TimeGranularity,
-} from '../utils/getTimeFormatterForGranularity';
+import { TimeGranularity, getTimeFormatterForGranularity } from '@superset-ui/time-format';
 
 const TIME_COLUMN = '__timestamp';
 const formatPercentChange = getNumberFormatter(NumberFormats.PERCENT_SIGNED_1_POINT);

plugins/legacy-preset-chart-big-number/test/transformProps.test.ts

@@ -17,11 +17,11 @@
  * under the License.
  */
 import { DatasourceType } from '@superset-ui/query';
+import { TimeGranularity } from '@superset-ui/time-format';
 import transformProps, {
   BignumberChartProps,
   BigNumberDatum,
 } from '../src/BigNumber/transformProps';
-import { TimeGranularity } from '../src/utils/getTimeFormatterForGranularity';
 
 const formData = {
   metric: 'value',