* 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 9ab1db5a84cbcb58ec2d044f4d6cf7ffb341f62b.

* 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>