feat(big-number): allow fallback to last available value and fix time…

… range for trend lines (#403)

* feat(big-number): add option to align time range

In Superset, when a timeseries query has no data at the beginning period
or end period of the filtered time range, there will not no data records
at those periods, hence the trendline in Big Number chart would not
render those periods. This often causes confusion and misinterpretaiton
in dashboards, especially for those with multiple trendline charts
aligned with each other. They could all be a very smooth line, but
actually showing very different time ranges.

This PR adds an option "alignTimeRange" to apply the filtered time
range on the xAxis. Date periods for empty data will be rendered, but
there will be no connected lines, dots, or tooltips for them.

It's possible to still show tooltips for those periods, but I decided
not to do that as: 1) it makes things much more complicated; 2) I don't
want to confuse zero or nulls with empty data.

* fix(big-number): disable alignRange by default

* refactor(big-number): migrate to Typescript

* fix(big-number): typescript build

* fix(big-number): change tooltip trigger; fix storybook

* fix(big-number): move @types to dependencies

* fix(big-number): move all files to ts

* build(big-number): add @types/d3-color as dependency

* refactor(big-number): remove renderTooltip as prop

* feat(big-number): add timeRangeUseFallback options and some refactor

* fix(big-number): update formatting functions

* fix(big-number): update copy for no data

* fix(big-number): address PR feedbacks

* feat(big-number): replace timeRangeUseFallback with bigNumberFallback

* fix: upgrade @types/react-bootstrap

* build(big-number): move react-bootstrap to dependencies

* refactor(big-number): more coherent types

* feat(big-number): use alert box for fallback values

* build(big-number): remove react-bootstrap

* build: upgrade nimbus and fix versions

Keep running into building errors locally, so upgrade nimbus and
fix all related packages to the working latest version.

* feat(big-number): adjust fallback warning alignment

* build: use a non-fixed version for @types/shortid

* build: revert package versions in main

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/package.json

@@ -29,8 +29,9 @@
   },
   "dependencies": {
     "@data-ui/xy-chart": "^0.0.84",
+    "@types/d3-color": "^1.2.2",
+    "@types/shortid": "^0.0.29",
     "d3-color": "^1.2.3",
-    "prop-types": "^15.6.2",
     "shortid": "^2.2.14"
   },
   "peerDependencies": {

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/BigNumber.css

@@ -20,7 +20,6 @@
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
     Open Sans, Helvetica Neue, sans-serif;
   position: relative;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -31,10 +30,18 @@
 }
 
 .superset-legacy-chart-big-number .text-container {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: flex-start;
+}
+
+.superset-legacy-chart-big-number .text-container .alert {
+  font-size: 11px;
+  margin: -0.5em 0 0.4em;
+  line-height: 1;
+  padding: 2px 4px 3px;
+  border-radius: 3px;
 }
 
 .superset-legacy-chart-big-number .header-line {
@@ -46,12 +53,20 @@
 .superset-legacy-chart-big-number .header-line span {
   position: absolute;
   bottom: 0;
-  left: 0;
-  right: 0;
 }
 
 .superset-legacy-chart-big-number .subheader-line {
   line-height: 1em;
   padding-bottom: 0;
   font-weight: 200;
 }
+
+.superset-legacy-chart-big-number.is-fallback-value .header-line,
+.superset-legacy-chart-big-number.is-fallback-value .subheader-line {
+  opacity: 0.5;
+}
+
+.superset-data-ui-tooltip {
+  z-index: 1000;
+  background: #000;
+}