Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Static viz path for the updated trend chart #37418

Merged

Conversation

alxnddr
Copy link
Member

@alxnddr alxnddr commented Jan 8, 2024

Related to #37038

Description

Creates a static visualization rendering path with a data contract similar to the application's data visualization contract to ensure maximum reuse of settings computation and actual viz rendering code.

In the scope of ECharts migration we did a similar change here which we will rebase on top of the current PR change once it is merged. In the referred commit the rendering method is called isomorphic which was not the most precise name and javascript_visualization makes the code a bit more obvious.

How to verify

  1. Create a Trend chart
  2. Send a test dashboard subscription with it
  3. Ensure it renders the HTML placeholder

Demo

Screenshot 2024-01-08 at 10 49 12 PM

Checklist

  • Tests have been added/updated to cover changes in this PR

@alxnddr alxnddr requested a review from camsaul as a code owner January 8, 2024 23:40
@metabase-bot metabase-bot bot added .Team/DashViz Dashboard and Viz team visual Run Percy visual testing labels Jan 8, 2024
@alxnddr
Copy link
Member Author

alxnddr commented Jan 9, 2024

@markbastian can you please help with BE CI checks?

Comment on lines 7 to 11
export interface StaticChartProps {
rawSeries: RawSeries;
dashcardSettings: VisualizationSettings;
renderingContext: RenderingContext;
}
Copy link
Member

Choose a reason for hiding this comment

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

I belive every static chart component would need that type, right? Would it make sense to pull it up? I was thinking of metabase/static-viz/types or maybe metabase/visualization/types?

Copy link
Member

Choose a reason for hiding this comment

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

Also, it seems like we're missing a proper type for RenderingContext?

Copy link
Member Author

Choose a reason for hiding this comment

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

Good catch, thanks! Fixed in the latest commit

@alxnddr alxnddr requested a review from kulyk January 11, 2024 01:45
Copy link
Member

@kulyk kulyk left a comment

Choose a reason for hiding this comment

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

FE LGTM 👍

Copy link

replay-io bot commented Jan 11, 2024

StatusComplete ↗︎
Commit7a4cf36
Results
⚠️ 1 Flaky
  • should validate approved email domains for a dashboard subscription in the audit app
      Timed out retrying after 4050ms: `cy.click()` failed because the page updated while this command was executing. Cypress tried to locate elements based on this query:
      > cy.findByText(1)
      We initially found matching element(s), but while waiting for them to become actionable, they disappeared from the page. Common situations why this happens:
        - Your JS framework re-rendered asynchronously
        - Your app code reacted to an event firing and removed the element
      You can typically solve this by breaking up a chain. For example, rewrite:
      > `cy.get('button').click().click()`
      to
      > `cy.get('button').as('btn').click()`
      > `cy.get('@btn').click()`
      https://on.cypress.io/element-has-detached-from-dom
2208 Passed

Copy link
Contributor

@markbastian markbastian left a comment

Choose a reason for hiding this comment

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

I fixed a breaking BE issue I found and did a small amount of cleanup so returned :style is a keyword. 🚢 🇮🇹

@alxnddr alxnddr merged commit c6e2a93 into feature/trend-chart-improvements Jan 11, 2024
105 checks passed
@alxnddr alxnddr deleted the trend-chart-improvements-static-viz branch January 11, 2024 23:16
kulyk added a commit that referenced this pull request Jan 17, 2024
* Update Trend chart copy for special cases (on frontend) (#35184)

* add computeTrend

* fix unit test

* fix e2e test

* explicitly fallback to day unit if backend doesn’t provide one

* fix empty data cases

* rename function parameters

* correct and simplify computeChange function

- when prevVal < 0 and nextVal < 0, it would return the wrong percentChange. (nextVal - prevVal) / Math.abs(prevVal) fixes this issue.
  - i.e. prevVal = -5, nextVal = -10 -> computeChange(-5, -10) -> computeChange(--10, --5) -> -50% but we should it expect to be -100% since it dropped by a factor of Math.abs(prevVal)

* refactor PREVIOUS_VALUE options

* correct and simplify computeChange further

(-) -> (0) should be + increase (our end case already accounts for this behavior)

* update unit tests to reflect correctness changes to computeChange

* refactor for readability

* refactor to use isEmpty instead of ==/!= null

* refactor variable names for readability

* refactor nested ternaries into function

* refactor for readability

* refactor variable names

* re-use end of array index variable

* re-word comments

* refactor consumers based on return variable re-naming

* add missing test cases

* nit refactor

* re-arrange functions for readability

* truncate prevDate based on nextDate

- if prevDate is same day as nextDate, remove the day, month, and year from the comparisonPeriodStr
- if prevDate is same year as nextDate, remove the year from the comparisonPeriodStr

* fix comment

* fix test

* instead of ↓ and ↑ symbols, use icon names

* fix night mode hack

* refactor formatDateTimeRangeWithUnit behavior

- refactor how options.removeDay and options.removeYear work
- reorganize the layout to make the conditional branches easier to see

* fix tooltip styles

* Add tests to cover new options

- options.removeDay
- options.removeYear

* add option descriptors to test string

---------

Co-authored-by: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>

* Trend Charts: Support arbitrary date comparison (#36666)

* add computeTrend

* fix unit test

* fix e2e test

* explicitly fallback to day unit if backend doesn’t provide one

* fix empty data cases

* rename function parameters

* correct and simplify computeChange function

- when prevVal < 0 and nextVal < 0, it would return the wrong percentChange. (nextVal - prevVal) / Math.abs(prevVal) fixes this issue.
  - i.e. prevVal = -5, nextVal = -10 -> computeChange(-5, -10) -> computeChange(--10, --5) -> -50% but we should it expect to be -100% since it dropped by a factor of Math.abs(prevVal)

* refactor PREVIOUS_VALUE options

* correct and simplify computeChange further

(-) -> (0) should be + increase (our end case already accounts for this behavior)

* update unit tests to reflect correctness changes to computeChange

* refactor for readability

* refactor to use isEmpty instead of ==/!= null

* refactor variable names for readability

* refactor nested ternaries into function

* refactor for readability

* refactor variable names

* re-use end of array index variable

* re-word comments

* refactor consumers based on return variable re-naming

* add missing test cases

* nit refactor

* re-arrange functions for readability

* truncate prevDate based on nextDate

- if prevDate is same day as nextDate, remove the day, month, and year from the comparisonPeriodStr
- if prevDate is same year as nextDate, remove the year from the comparisonPeriodStr

* fix comment

* fix test

* instead of ↓ and ↑ symbols, use icon names

* fix night mode hack

* refactor formatDateTimeRangeWithUnit behavior

- refactor how options.removeDay and options.removeYear work
- reorganize the layout to make the conditional branches easier to see

* fix tooltip styles

* Add tests to cover new options

- options.removeDay
- options.removeYear

* add option descriptors to test string

* add support for different trend comparisons

- compare to previous value
- compare to previous period (minute, hour, day, ...)
- compare to X previous periods ago (30 minutes, 6 hours, 3 days, ...)

* refactor + add comments

* only show periodsAgo comparison option if # of selectable periods ago is >= 2

* auto select all text on click in periodsAgo field input

* fix bug caused by upstream date change

- this caused the parser to try to parse an already existing date object when it expected a string timestamp

* prevent accidental button click

-  Since the input field is small, when mouseDown in child and dragged across (to highlight the input text) and outside the input field, it accidentally mouseUps on the button. This causes the button to be considered clicked since the child element is within the parent element.

* fix searching outside of array bounds

* validate scalar.comparisons setting after any query changes

* add ttag for new copy

* clamp search to start of array incase rows contain missing periods

* rename styled components

* fix SmartScalarSettingsWidgets type errors

* change default comparison to previous period (if dateUnit is supplied)

- default to "compare to previous" if no dateUnit is supplied

* leave "X periods ago" setting even if filtered data reduces date range of dataset

* change copy for no comparable value using `compare to previous` comparison

* rename comparison `compare to previous` to `previous value`

* fix type errors

* fix bug if dateUnit is null

* fix bug and move option down

* fix type error

* remove comment

* refactor names

* fix wrong date display

* add tests

* add tests for "compare to previous"

* fix "previous period" tests

* rename COMPARE_TO_PREVIOUS to PREVIOUS_VALUE

- because copy changed, lets change this const name to match it

* default return null if no comparison selected

* remove unused export

* remove unused export on types

* do not hide primary number selector

* fix dateUnit null

* refactor computeTrend

* fix test b/c of refactor

* update computeChange unit tests

* refactor

* improve tests

* refactor tests based on functionality

* fix timezones bug

* reformat tests

* add test cases for invalid settings

* handle invalid comparison types

* fix type errors and rename variables

* hit "Enter" to submit periodsAgo comparison value

* fix timezone bug when comparisons dates are in different time-zones

- different time-zones in this case in daylight savings time
- this was causing two dates to not be the same ONLY b/c there timezone offset was different

* refactor tests

* reorganize SmartScalar file

* rename comparison option name

* fix type

* add unit tests for comparison option functions and comparison validation

* add component tests for SmartScalar

* re-organize tests

* add E2E tests

* use more direct variable

* refactor variable names

* fix translations error

* fix type errors

* update translation strings

* fix dateTime diffing

- see comment in function and tests for more info

* refactor test assertions

* move comparison types to metabase-types/api/visualization-settings

* drop any type

* update native_form type

* remove todo comment

* remove optionality on types

* remove console.error mock

- used for creating tests to sift out repetitive test errors. forgot to remove

* refactor icon check

* Remove CSS class targeting

* relocate props type object

* Remove CSS class targeting

* group smartscalar settings components into their own directory

* refactor component

* refactor tests to use it.each

* use createMockSingleSeries

* use createMockVisualizationSettings

* use createMockColumn

* reorganize code and files

* fix type

* fix i18n translations

* update periods ago value on blur if selected

* fix type error

* Trend Charts: Address Milestone 2 Feedback (#37062)

* add computeTrend

* fix unit test

* fix e2e test

* explicitly fallback to day unit if backend doesn’t provide one

* fix empty data cases

* rename function parameters

* correct and simplify computeChange function

- when prevVal < 0 and nextVal < 0, it would return the wrong percentChange. (nextVal - prevVal) / Math.abs(prevVal) fixes this issue.
  - i.e. prevVal = -5, nextVal = -10 -> computeChange(-5, -10) -> computeChange(--10, --5) -> -50% but we should it expect to be -100% since it dropped by a factor of Math.abs(prevVal)

* refactor PREVIOUS_VALUE options

* correct and simplify computeChange further

(-) -> (0) should be + increase (our end case already accounts for this behavior)

* update unit tests to reflect correctness changes to computeChange

* refactor for readability

* refactor to use isEmpty instead of ==/!= null

* refactor variable names for readability

* refactor nested ternaries into function

* refactor for readability

* refactor variable names

* re-use end of array index variable

* re-word comments

* refactor consumers based on return variable re-naming

* add missing test cases

* nit refactor

* re-arrange functions for readability

* truncate prevDate based on nextDate

- if prevDate is same day as nextDate, remove the day, month, and year from the comparisonPeriodStr
- if prevDate is same year as nextDate, remove the year from the comparisonPeriodStr

* fix comment

* fix test

* instead of ↓ and ↑ symbols, use icon names

* fix night mode hack

* refactor formatDateTimeRangeWithUnit behavior

- refactor how options.removeDay and options.removeYear work
- reorganize the layout to make the conditional branches easier to see

* fix tooltip styles

* Add tests to cover new options

- options.removeDay
- options.removeYear

* add option descriptors to test string

* add support for different trend comparisons

- compare to previous value
- compare to previous period (minute, hour, day, ...)
- compare to X previous periods ago (30 minutes, 6 hours, 3 days, ...)

* refactor + add comments

* only show periodsAgo comparison option if # of selectable periods ago is >= 2

* auto select all text on click in periodsAgo field input

* fix bug caused by upstream date change

- this caused the parser to try to parse an already existing date object when it expected a string timestamp

* prevent accidental button click

-  Since the input field is small, when mouseDown in child and dragged across (to highlight the input text) and outside the input field, it accidentally mouseUps on the button. This causes the button to be considered clicked since the child element is within the parent element.

* fix searching outside of array bounds

* validate scalar.comparisons setting after any query changes

* add ttag for new copy

* clamp search to start of array incase rows contain missing periods

* rename styled components

* fix SmartScalarSettingsWidgets type errors

* change default comparison to previous period (if dateUnit is supplied)

- default to "compare to previous" if no dateUnit is supplied

* leave "X periods ago" setting even if filtered data reduces date range of dataset

* change copy for no comparable value using `compare to previous` comparison

* rename comparison `compare to previous` to `previous value`

* fix type errors

* fix bug if dateUnit is null

* fix bug and move option down

* fix type error

* remove comment

* refactor names

* fix wrong date display

* add tests

* add tests for "compare to previous"

* fix "previous period" tests

* rename COMPARE_TO_PREVIOUS to PREVIOUS_VALUE

- because copy changed, lets change this const name to match it

* default return null if no comparison selected

* remove unused export

* remove unused export on types

* do not hide primary number selector

* fix dateUnit null

* refactor computeTrend

* fix test b/c of refactor

* update computeChange unit tests

* refactor

* improve tests

* refactor tests based on functionality

* fix timezones bug

* reformat tests

* add test cases for invalid settings

* handle invalid comparison types

* fix type errors and rename variables

* hit "Enter" to submit periodsAgo comparison value

* fix timezone bug when comparisons dates are in different time-zones

- different time-zones in this case in daylight savings time
- this was causing two dates to not be the same ONLY b/c there timezone offset was different

* refactor tests

* reorganize SmartScalar file

* rename comparison option name

* fix type

* add unit tests for comparison option functions and comparison validation

* add component tests for SmartScalar

* re-organize tests

* add E2E tests

* use more direct variable

* refactor variable names

* fix translations error

* fix type errors

* update translation strings

* fix dateTime diffing

- see comment in function and tests for more info

* refactor test assertions

* move comparison types to metabase-types/api/visualization-settings

* drop any type

* update native_form type

* remove todo comment

* remove optionality on types

* remove console.error mock

- used for creating tests to sift out repetitive test errors. forgot to remove

* refactor icon check

* Remove CSS class targeting

* relocate props type object

* Remove CSS class targeting

* group smartscalar settings components into their own directory

* refactor component

* refactor tests to use it.each

* use createMockSingleSeries

* use createMockVisualizationSettings

* use createMockColumn

* reorganize code and files

* fix type

* fix i18n translations

* update periods ago value on blur if selected

* fix type error

* rename types

* improve types

* rename function

* improve button styles

* rename component

* remove comments

* use rightIcon prop

* rename style

* refactor click hacks for periodsAgo menu component

* refactor menu change handling

- if menu is closed, submit onChange with the latest edited value.
- if item is simple, submit value itself
- it item is complex, set edited value state as input changes and submit value when committed

* disable invalid typescript error

- error is coming from using typescript 4.7.2 when .findLast was first introduced in 5.0.0
- code functions properly. IDE recognizes correct type

* if selectedValue and editedValue are equal, we do not need to submit a new value

* update file names to reflect component name changes

* refactor type export

* remove prop type covered by other type

* remove unused file

* remove unnecessary {}

* fix broken test b/c of functionality changes

* remove typescript ignore and replace with type safe function

* rename handleChange to onChange

* rename input validation function

* Trend Charts — Add static number comparison (#36951)

* Fix `MenuItemStyled` props type

* Implement static number comparison

* Fix `utils` unit tests

* Add unit tests for `getTrend`

* Add e2e test coverage

* Fix type

* Fix `compute` tests

* Rename `SmartScalarComparisonStaticNumber` type

* Replace `Flex` with `Stack`

* Fix `StaticNumberForm's` `value` type

* Fix options calc

* Simplify block

* Validate static number comparison

* Remove test

* Replace `Flex` with `Group`

* Minor `DoneButton` tweak

* Minor fix

* Fix value state

* Trend charts — Compact formatting viz setting (#36992)

* Refactor `compactifyValue`

* Add setting to `VisualizationSettings` type

* Respect `compact` option in `compactifyValue`

* Add viz setting

* Add e2e coverage

* Fix `onChange` for `StaticNumberForm`

* Move compact setting to `computeTrend`

* Add `formatOptions` tests for `computeTrend`

* Extend e2e tests

* Test formatting done by `computeTrend`

* Trend charts — Compare to another column (#37087)

* Add viz setting type

* Implement comparison

* Extract `renderMenuDropdownContent`

* Align `Select` label style with other inputs

* Use `column.name`

* Show opt only if there're cols to choose from

* Extend comparison validation check

* Handle missing column

* Fix type error

* Add tests for `getComparisonOptions`

* Extract test `describe` group

* Add tests for `isComparisonValid`

* Add tests for `computeTrend`

* Add basic e2e test

* Ensure comparison column exists in query results

* Fix onChange callback

* Trend charts — multiple comparisons (#37176)

* Turn `scalar.comparisons` into an array

* Implement adding new comparisons

* Implement removing comparison

* Use HTML list for comparisons

* Add `id` to comparison objects

* Implement sorting

* Extract `ComparisonPicker` component

* Trend charts — Misc fixes and polish (#37269)

* Use vertical layout for `StaticNumberForm`

* Update comparison picker display name

* Make smart scalar utils easier to use in static viz

* Fix height

* Fix `Icon` import

* Fix deprecated color reference

* Fix deprecated color reference

* Static viz path for the updated trend chart (#37418)

* Returning map-based response from js-svg/isomorphic.

* add common static viz code path which will be used for the trend chart

* review feedback

* update formatter type

* Fixed detect-pulse-chart-type test response to `:javascript_visualization` for `:smartscalar` case.

* Fixed TODO WRT keywordizing type value of `javascript-visualization` result.

* Better clj formatting

---------

Co-authored-by: Mark Bastian <markbastian@gmail.com>

* Fix merge conflict

* Trend charts — Static viz (#37602)

* Make `computeTrend` independent of "lib/formatting"

* Refactor `getArrowColor`

* Make `computeTrend` independent of "lib/colors"

* Make `computeTrend` independent `formatChange`

* Add `SmartScalar` placeholder

* Add basic static `SmartScalar` viz

* Fix `findLast` not available for static viz

* Clean up `SmartScalar`

* Enable PNG export

* static trend settings computation

* Fix `getDefaultComparison` return type

* Add `VIZ_SETTINGS_DEFAULTS` const for trend charts

* Add `getDefaultColumn` helper for `scalar.field`

* Fix `getDefaultComparison` tests

* Revert "Make `computeTrend` independent `formatChange`"

This reverts commit 9ab1db5.

* Fix `formatChange`

* Remove custom `formatChange`

* Add `scalar.comparisons` to `computeSmartScalarSettings`

* Fix `measureText` type

* Fix bad default value for `scalar.field`

* Use `getColor` instead of `color`

* Add stories

* Visual tweaks

* Add `getValue` for `scalar.comparisons`

* Extend e2e test

---------

Co-authored-by: Aleksandr Lesnenko <alxnddr@gmail.com>

* Fix flaky test

* Hide drag handle when there's only one comparison

* Update the "periods ago" control

* Inform people when "periodsAgo" value is clamped

---------

Co-authored-by: shaun <shaun@metabase.com>
Co-authored-by: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>
Co-authored-by: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>
Co-authored-by: Mark Bastian <markbastian@gmail.com>
Co-authored-by: Aleksandr Lesnenko <alxnddr@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
.Team/DashViz Dashboard and Viz team visual Run Percy visual testing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants