diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/BigNumber.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/BigNumber.tsx index ac66c70a822..eff8f5a8ea5 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/BigNumber.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/BigNumber.tsx @@ -41,6 +41,7 @@ const CHART_MARGIN = { const PROPORTION = { // text size: proportion of the chart container sans trendline + KICKER: 0.1, HEADER: 0.3, SUBHEADER: 0.125, // trendline size: proportion of the whole chart container @@ -80,11 +81,14 @@ type BigNumberVisProps = { fromDatetime?: number; toDatetime?: number; headerFontSize: number; + kickerFontSize: number; subheader: string; subheaderFontSize: number; + showTimestamp?: boolean; showTrendLine?: boolean; startYAxisAtZero?: boolean; timeRangeFixed?: boolean; + timestamp?: number; trendLineData?: TimeSeriesDatum[]; mainColor: string; }; @@ -97,7 +101,9 @@ class BigNumberVis extends React.PureComponent { formatNumber: defaultNumberFormatter, formatTime: smartDateVerboseFormatter, headerFontSize: PROPORTION.HEADER, + kickerFontSize: PROPORTION.KICKER, mainColor: BRAND_COLOR, + showTimestamp: false, showTrendLine: false, startYAxisAtZero: true, subheader: '', @@ -123,8 +129,8 @@ class BigNumberVis extends React.PureComponent { } renderFallbackWarning() { - const { bigNumberFallback, formatTime } = this.props; - if (!bigNumberFallback) return null; + const { bigNumberFallback, formatTime, showTimestamp } = this.props; + if (!bigNumberFallback || showTimestamp) return null; return ( { ); } + renderKicker(maxHeight: number) { + const { timestamp, showTimestamp, formatTime, width } = this.props; + if (!showTimestamp) return null; + + const text = timestamp === null ? '' : formatTime(timestamp); + + const container = this.createTemporaryContainer(); + document.body.append(container); + const fontSize = computeMaxFontSize({ + text, + maxWidth: width, + maxHeight, + className: 'kicker', + container, + }); + container.remove(); + + return ( +
+ {text} +
+ ); + } + renderHeader(maxHeight: number) { const { bigNumber, formatNumber, width } = this.props; const text = bigNumber === null ? t('No data') : formatNumber(bigNumber); @@ -273,7 +309,7 @@ class BigNumberVis extends React.PureComponent { } render() { - const { showTrendLine, height, headerFontSize, subheaderFontSize } = this.props; + const { showTrendLine, height, kickerFontSize, headerFontSize, subheaderFontSize } = this.props; const className = this.getClassName(); if (showTrendLine) { @@ -284,6 +320,7 @@ class BigNumberVis extends React.PureComponent {
{this.renderFallbackWarning()} + {this.renderKicker(Math.ceil(kickerFontSize * (1 - PROPORTION.TRENDLINE) * height))} {this.renderHeader(Math.ceil(headerFontSize * (1 - PROPORTION.TRENDLINE) * height))} {this.renderSubheader( Math.ceil(subheaderFontSize * (1 - PROPORTION.TRENDLINE) * height), @@ -296,6 +333,8 @@ class BigNumberVis extends React.PureComponent { return (
+ {this.renderFallbackWarning()} + {this.renderKicker(kickerFontSize * height)} {this.renderHeader(Math.ceil(headerFontSize * height))} {this.renderSubheader(Math.ceil(subheaderFontSize * height))}
@@ -328,6 +367,12 @@ export default styled(BigNumberVis)` } } + .kicker { + font-weight: ${({ theme }) => theme.typography.weights.light}; + line-height: 1em; + padding-bottom: 2em; + } + .header-line { font-weight: ${({ theme }) => theme.typography.weights.normal}; position: relative; @@ -345,6 +390,7 @@ export default styled(BigNumberVis)` } &.is-fallback-value { + .kicker, .header-line, .subheader-line { opacity: 0.5; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/controlPanel.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/controlPanel.tsx index 5148ab9aece..62ee65ab622 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/controlPanel.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/controlPanel.tsx @@ -17,7 +17,13 @@ * under the License. */ import { t } from '@superset-ui/core'; -import { ControlPanelConfig, formatSelectOptions, sections } from '@superset-ui/chart-controls'; +import { + ControlPanelConfig, + D3_FORMAT_DOCS, + D3_TIME_FORMAT_OPTIONS, + formatSelectOptions, + sections, +} from '@superset-ui/chart-controls'; import React from 'react'; import { headerFontSize, subheaderFontSize } from '../sharedControls'; @@ -56,6 +62,36 @@ const config: ControlPanelConfig = { }, ], ['y_axis_format'], + [ + { + name: 'show_timestamp', + config: { + type: 'CheckboxControl', + label: t('Show Timestamp'), + renderTrigger: true, + default: false, + description: t('Whether to display the timestamp'), + }, + }, + ], + [ + { + name: 'time_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Timestamp format'), + renderTrigger: true, + choices: D3_TIME_FORMAT_OPTIONS, + default: '%d-%m-%Y %H:%M:%S', + description: D3_FORMAT_DOCS, + visibility(props) { + const { show_timestamp } = props.form_data; + return !!show_timestamp; + }, + }, + }, + ], [ { name: 'show_trend_line', diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/transformProps.ts index f4cf292951d..3fcdf44f000 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/transformProps.ts @@ -19,12 +19,14 @@ import * as color from 'd3-color'; import { extractTimegrain, - getTimeFormatterForGranularity, getNumberFormatter, + getTimeFormatter, + getTimeFormatterForGranularity, NumberFormats, ChartProps, LegacyQueryData, QueryFormData, + smartDateFormatter, } from '@superset-ui/core'; const TIME_COLUMN = '__timestamp'; @@ -63,8 +65,10 @@ export default function transformProps(chartProps: BigNumberChartProps) { colorPicker, compareLag: compareLag_, compareSuffix = '', + timeFormat, headerFontSize, metric = 'value', + showTimestamp, showTrendLine, startYAxisAtZero, subheader = '', @@ -90,6 +94,7 @@ export default function transformProps(chartProps: BigNumberChartProps) { let trendLineData; let percentChange = 0; let bigNumber = data.length === 0 ? null : data[0][metricName]; + let timestamp = data.length === 0 ? null : data[0][TIME_COLUMN]; let bigNumberFallback; if (data.length > 0) { @@ -99,9 +104,12 @@ export default function transformProps(chartProps: BigNumberChartProps) { .sort((a, b) => (a.x !== null && b.x !== null ? b.x - a.x : 0)); bigNumber = sortedData[0].y; + timestamp = sortedData[0].x; + if (bigNumber === null) { bigNumberFallback = sortedData.find(d => d.y !== null); bigNumber = bigNumberFallback ? bigNumberFallback.y : null; + timestamp = bigNumberFallback ? bigNumberFallback.x : null; } if (compareLag > 0) { @@ -139,7 +147,10 @@ export default function transformProps(chartProps: BigNumberChartProps) { } const formatNumber = getNumberFormatter(yAxisFormat); - const formatTime = getTimeFormatterForGranularity(granularity); + const formatTime = + timeFormat === smartDateFormatter.id + ? getTimeFormatterForGranularity(granularity) + : getTimeFormatter(timeFormat); return { width, @@ -152,9 +163,11 @@ export default function transformProps(chartProps: BigNumberChartProps) { headerFontSize, subheaderFontSize, mainColor, + showTimestamp, showTrendLine: supportAndShowTrendLine, startYAxisAtZero, subheader: formattedSubheader, + timestamp, trendLineData, fromDatetime, toDatetime, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/test/transformProps.test.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/test/transformProps.test.ts index 1693dd31d4d..e8f61ef1ce0 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/test/transformProps.test.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/test/transformProps.test.ts @@ -117,7 +117,7 @@ describe('BigNumber', () => { expect(transformed.bigNumberFallback).not.toBeNull(); // should successfully formatTime by ganularity - expect(transformed.formatTime(new Date('2020-01-01'))).toStrictEqual('2020 Q1'); + expect(transformed.formatTime(new Date('2020-01-01'))).toStrictEqual('2020-01-01 00:00:00'); }); it('should respect datasource d3 format', () => {