Skip to content
This repository was archived by the owner on Jun 25, 2020. It is now read-only.

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

Merged
ktmud merged 1 commit into from
Mar 16, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
Expand Down Expand Up @@ -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 {
Expand Down
41 changes: 39 additions & 2 deletions packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Copy Markdown
Collaborator

@kristw kristw Mar 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems useful to extract into its own file, in case we move this to @superset-ui/time-format later

// 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 {
Expand All @@ -36,6 +71,7 @@ export default function transformProps(chartProps) {
subheader = '',
vizType,
} = formData;
const granularity = formData.timeGrainSqla;
Copy link
Copy Markdown
Collaborator

@kristw kristw Mar 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could be part of the destructuring above

let { yAxisFormat } = formData;
const { data } = queryData;

Expand All @@ -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;
Expand Down Expand Up @@ -92,6 +128,7 @@ export default function transformProps(chartProps) {
});
}

const formatDate = getTimeFormatterForGranularity(granularity);
const formatValue = getNumberFormatter(yAxisFormat);

return {
Expand All @@ -103,7 +140,7 @@ export default function transformProps(chartProps) {
headerFontSize,
subheaderFontSize,
mainColor,
renderTooltip: renderTooltipFactory(formatValue),
renderTooltip: renderTooltipFactory(formatDate, formatValue),
showTrendLine: supportAndShowTrendLine,
startYAxisAtZero,
subheader: formattedSubheader,
Expand Down
51 changes: 46 additions & 5 deletions ...et-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/Stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 [
{
Expand All @@ -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,
Expand All @@ -28,7 +68,7 @@ export default [
}}
/>
),
storyName: 'Basic',
storyName: 'Null in the middle',
storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
},
{
Expand All @@ -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',
Expand All @@ -55,7 +96,7 @@ export default [
}}
/>
),
storyName: 'No Data',
storyName: 'Missing head',
storyPath: 'legacy-|preset-chart-big-number|BigNumberChartPlugin',
},
];
2 changes: 1 addition & 1 deletion ...perset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,6 @@ export default [
},
{
__timestamp: 978307200000.0,
sum__SP_POP_TOTL: 6173339411.0,
sum__SP_POP_TOTL: 617333941.0,
},
];
2 changes: 1 addition & 1 deletion ...erset-ui-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumber/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

Expand Down
2 changes: 1 addition & 1 deletion ...-plugins-demo/storybook/stories/legacy-preset-chart-big-number/BigNumberTotal/Stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default [
}}
/>
),
storyName: 'No Data',
storyName: 'Basic No Data',
storyPath: 'legacy-|preset-chart-big-number|BigNumberTotalChartPlugin',
},
];