* 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
* fix(legacy-table): avoid React DOM
`jquery.datatables` will manipulate DOMs, sometimes remove them. In case
of component being reloaded with updated props, React will not be able
to find those removed nodes, causing a `cannot removeChild` error.
Because of the the way to assign row keys, if table shape changes (add
or remove columns), React may also have difficulty match the cached
nodes via keys.
In general it's a bad idea to directly manipulate React rendered DOM
nodes, so we better just let `jquery.datatables` handle everything.
In the future, once we removed `jquery.datatables`, a pure React
component will not have such issues.
* fix(legacy-table): handle the case when percentMetrics is null
* fix(legacy-table): linting errors
* refactor: use nimbus build
* test(legacy-table): add React component tests
* test(legacy-table): more sophisticated cases
* fix: address PR #392 comments
* chore(legacy-table): clean up tests case setups
Not seeing the console.warn errors anymore. So cleaning it up.
Previously it was from `<SuperChart />` component, but since we have
updated the test case to not use <SuperChart>, we are good now.
* fix(legacy-table): misleading comment
* feat: faster legacy table chart
This commit tries to optimize the performance of the legacy data table.
1. Converting everything to Typescript.
2. Create a native React component instead of `reactify` (although all
DOM operaions still happen in the jQuery.DataTables plugin.
3. Remove dependency on d3, optimize how bars are rendered.
Plus some minor changes to fix linting and building.
Also added a script to build only specific plugin for faster
development.
* feat(legacy-table-chart): use React to render DOM
Unfortunately jquery.datatables uses innerHTML to create cell content,
and all rows are created even with pagination.
83657a29e3/media/js/jquery.dataTables.js (L3113-L3117)
This is slow and insecure. We are reverting to DOM data source as in
previous implementation, but instead of using D3 to create the table rows,
we use React. This also renders `dompurify.sanitize` unnecessary since
React will take care of it.
* feat(legacy-table-chart): support html in data cells
Also
1. improve height adjustment
2. add page size control to storybook
3. hide rows from later pages at initial rendering
* fix(legacy-data-table): minor formatting fixes
* chore(legacy-table): add xss dependency
Plus minor variable name and comment update
* fix(legacy-table): linting errors
* refactor(legacy-table): more predictable metric labels
* feat(legacy-table): also display title for percent metric
* fix(legacy-table): typos, var names, etc
* docs: update notes for metric.label
* refactor(legacy-table): upgrade number-format
* fix(legacy-table): upgrade dependency for storybook and yarn
