feat(big-number): format datetime according to granularity (apache#402)

This adds support for "Time Grain" in Superset for Big Number with Trendline chart.
zhaoyongjie · Nov 24, 2021 · eeb21f9 · eeb21f9
1 parent ddafce3
commit eeb21f9
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 14 deletions.
diff --git a/...i-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx b/...i-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx
@@ -24,7 +24,6 @@ import PropTypes from 'prop-types';
 import shortid from 'shortid';
 import { XYChart, AreaSeries, CrossHair, LinearGradient } from '@data-ui/xy-chart';
 import { BRAND_COLOR } from '@superset-ui/color';
-import { smartDateVerboseFormatter } from '@superset-ui/time-format';
 import { computeMaxFontSize } from '@superset-ui/dimension';
 
 import './BigNumber.css';
@@ -42,10 +41,10 @@ const PROPORTION = {
   TRENDLINE: 0.3,
 };
 
-export function renderTooltipFactory(formatValue) {
+export function renderTooltipFactory(formatDate, formatValue) {
   function renderTooltip({ datum }) {
     const { x: rawDate, y: rawValue } = datum;
-    const formattedDate = smartDateVerboseFormatter(rawDate);
+    const formattedDate = formatDate(rawDate);
     const value = formatValue(rawValue);
 
     return (
@@ -96,7 +95,7 @@ const defaultProps = {
   startYAxisAtZero: true,
   trendLineData: null,
   mainColor: BRAND_COLOR,
-  renderTooltip: renderTooltipFactory(identity),
+  renderTooltip: renderTooltipFactory(identity, identity),
 };
 
 class BigNumberVis extends React.PureComponent {

diff --git a/...ugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js b/...ugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js
@@ -18,10 +18,45 @@
  */
 import * as color from 'd3-color';
 import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
+import { getTimeFormatter, TimeFormats, smartDateVerboseFormatter } from '@superset-ui/time-format';
 import { renderTooltipFactory } from './BigNumber';
 
 const TIME_COLUMN = '__timestamp';
 
+function getTimeFormatterForGranularity(granularity) {
+  // 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 { DATABASE_DATE, DATABASE_DATETIME } = TimeFormats;
+
+  // search for `builtin_time_grains` in incubator-superset/superset/db_engine_specs/base.py
+  const formats = {
+    date: DATABASE_DATE,
+    PT1S: DATABASE_DATETIME, // second
+    PT1M: MINUTE, // minute
+    PT5M: MINUTE, // 5 minute
+    PT10M: MINUTE, // 10 minute
+    PT15M: MINUTE, // 15 minute
+    'PT0.5H': MINUTE, // half hour
+    PT1H: '%Y-%m-%d %H:00', // hour
+    P1D: DATABASE_DATE, // day
+    P1W: SUNDAY_BASED_WEEK, // week
+    P1M: 'smart_date_verbose', // 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'
+  };
+
+  return granularity in formats
+    ? getTimeFormatter(formats[granularity])
+    : smartDateVerboseFormatter;
+}
+
 export default function transformProps(chartProps) {
   const { width, height, formData, queryData } = chartProps;
   const {
@@ -36,6 +71,7 @@ export default function transformProps(chartProps) {
     subheader = '',
     vizType,
   } = formData;
+  const granularity = formData.timeGrainSqla;
   let { yAxisFormat } = formData;
   const { data } = queryData;
 
@@ -47,7 +83,7 @@ export default function transformProps(chartProps) {
 
   let bigNumber;
   let trendLineData;
-  const metricName = metric && metric.label ? metric.label : metric;
+  const metricName = metric?.label ? metric.label : metric;
   const compareLag = Number(compareLagInput) || 0;
   const supportTrendLine = vizType === 'big_number';
   const supportAndShowTrendLine = supportTrendLine && showTrendLine;
@@ -92,6 +128,7 @@ export default function transformProps(chartProps) {
     });
   }
 
+  const formatDate = getTimeFormatterForGranularity(granularity);
   const formatValue = getNumberFormatter(yAxisFormat);
 
   return {
@@ -103,7 +140,7 @@ export default function transformProps(chartProps) {
     headerFontSize,
     subheaderFontSize,
     mainColor,
-    renderTooltip: renderTooltipFactory(formatValue),
+    renderTooltip: renderTooltipFactory(formatDate, formatValue),
     showTrendLine: supportAndShowTrendLine,
     startYAxisAtZero,
     subheader: formattedSubheader,

diff --git a/...et-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx b/...et-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx
@@ -1,7 +1,20 @@
 /* eslint-disable no-magic-numbers, sort-keys */
 import React from 'react';
 import { SuperChart } from '@superset-ui/chart';
-import data from './data';
+import testData from './data';
+
+/**
+ * Add null values to trendline data
+ * @param data input data
+ */
+function withNulls(origData: object[], nullPosition: number = 3) {
+  const data = [...origData];
+  data[nullPosition] = {
+    ...data[nullPosition],
+    sum__SP_POP_TOTL: null,
+  };
+  return data;
+}
 
 export default [
   {
@@ -10,7 +23,34 @@ export default [
         chartType="big-number"
         width={400}
         height={400}
-        queryData={{ data }}
+        queryData={{ data: testData }}
+        formData={{
+          colorPicker: {
+            r: 0,
+            g: 122,
+            b: 135,
+            a: 1,
+          },
+          compareLag: 1,
+          compareSuffix: 'over 10Y',
+          metric: 'sum__SP_POP_TOTL',
+          showTrendLine: true,
+          startYAxisAtZero: true,
+          vizType: 'big_number',
+          yAxisFormat: '.3s',
+        }}
+      />
+    ),
+    storyName: 'Basic with Trendline',
+    storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="big-number"
+        width={400}
+        height={400}
+        queryData={{ data: withNulls(testData, 3) }}
         formData={{
           colorPicker: {
             r: 0,
@@ -28,7 +68,7 @@ export default [
         }}
       />
     ),
-    storyName: 'Basic',
+    storyName: 'Null in the middle',
     storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
   },
   {
@@ -37,14 +77,15 @@ export default [
         chartType="big-number"
         width={400}
         height={400}
-        queryData={{ data: [] }}
+        queryData={{ data: testData.slice(0, 9) }}
         formData={{
           colorPicker: {
             r: 0,
             g: 122,
             b: 135,
             a: 1,
           },
+          timeGrainSqla: 'P0.25Y',
           compareLag: 1,
           compareSuffix: 'over 10Y',
           metric: 'sum__SP_POP_TOTL',
@@ -55,7 +96,7 @@ export default [
         }}
       />
     ),
-    storyName: 'No Data',
+    storyName: 'Missing head',
     storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
   },
 ];
diff --git a/...perset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/data.js b/...perset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/data.js
@@ -54,6 +54,6 @@ export default [
   },
   {
     __timestamp: 978307200000.0,
-    sum__SP_POP_TOTL: 6173339411.0,
+    sum__SP_POP_TOTL: 617333941.0,
   },
 ];
diff --git a/...erset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/index.js b/...erset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/index.js
@@ -1,5 +1,5 @@
 import { BigNumberChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-big-number';
-import Stories from './Stories';
+import Stories from './Stories.tsx';
 
 new BigNumberChartPlugin().configure({ key: 'big-number' }).register();
 

diff --git a/...-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx b/...-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx
@@ -37,7 +37,7 @@ export default [
         }}
       />
     ),
-    storyName: 'No Data',
+    storyName: 'Basic No Data',
     storyPath: 'legacy-|preset-chart-big-number|BigNumberTotalChartPlugin',
   },
 ];