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

This also moves the CLJS output out of `frontend/src/cljs{,_release}` to
`target/cljs_{dev,release}`. If that causes problems for FE tooling I
don't know about, it could be moved back.

Hot reloading:
CLJS changes are hot-reloaded into the running app by Shadow CLJS - no
action is needed. Note that the UI will not refresh; you usually have to
click around so the updated MLv2 code gets executed.

Usage of the CLJS REPL:
- Open the browser (you should see `shadow-cljs: #N ready!` in console)
- Connect to nrepl on 50655
- "Select" the `:app` build;
    - https://shadow-cljs.github.io/docs/UsersGuide.html#_editor_integration
    - Conjure: `:ConjureShadowSelect app`
    - Plain REPL: Eval in CLJ mode `(shadow/repl :app)`
- Consider running `yarn build-hot:cljs` and `yarn build-hot:js` in
  separate terminals; then when `yarn build-hot:js` crashes you don't
  have to reconnect your REPL.
- The REPL works beautifully, even loading files outside the :entries
  of the shadow-cljs build like tests!

"Stale" error in browser:
- This can happen if the webpack bundle is created before the CLJS is
  done building.
- If you ran `yarn build-hot:cljs` and `:js` separately, let `:cljs`
  finish compiling first.
- If you see this otherwise: (a) contact Braden so it can be fixed; and
  (b) either restart `build-hot:js` or force webpack to rebuild by
  hitting http://localhost:8080/webpack-dev-server/invalidate

Yarn commands:
`dev`, `dev-ee`, `build-hot`, and `build-static-viz:watch` all now wait
for the CLJS build to be complete by watching for files to be generated.
They should work the same from a user's POV.

(Since the webpack build no longer watches the CLJS output,
it won't notice the changes and immediately rebuild after the first
build. This avoids errors on the clean build, or "stale build" messages
in the app from Shadow CLJS.)

Fixes #32674.

* output static viz sources, update be workflow and file paths

* build static viz before file check

* extending file check timeout

* fixing mistake

* disable optimization when generating file paths

* prefer offline

* moving workflows to save 89505

* Maybe caching the build?

* removing minification

* upload artifact instead of use cache

* Add workflows back

* reduce files changed timeout

* removing unneeded yarn install

Dev experience:
- CLJS now has source maps
- Devtools extension renders CLJS data in Chrome (et al) Devtools
- Use a debug build of CLJS in the tests
- Fixed line numbers and breakpoints being off-by-one in Devtools

CLJC infra:
- More robust direct approach to JS<->CLJS conversions, powered by
  Malli transformers.
- Powerful `define-getters-and-setters` macro to generate the accessors.

* add static viz build watch command

* reload graalvm context each time in dev mode

* run static viz with yarn:dev

* address comments

* use watch webpack env var

Co-authored-by: Noah Moss <noahbmoss@gmail.com>

* support static row chart on the backend

* update and add types

* update types

* add chart columns helper, dataset grouping

* add viz settings helpers

* fix text measuring

* add generic row chart component for static and dynamic rendering

* update deps

* fix jest config for d3

* allow importing cljs in static viz

* add a hook for getting chart columns and series

* add a static row chart

* build cljs before static viz

* specs

* add stories, moved isomorphic row chart component to the shared folder

* update import

* fix backend merge

* remove an extra line

* one more extra line

* exclude unused props from the row chart

* cleanup

* review

* fix types

* fix log scale

* add visual spec, fix goal label truncate

* review

* fix mock path

* fix specs

* enable esbuild

* update i8n script and unit testing babel config

* split out babel loader for styled components

We have a repo-wide CI run to check ESLint error anyway.
Meanwhile, for day-to-day development of static viz frontend, the main
webpack config is already equipped with ESLint check (along with hot
reload etc).

* add basic typescript configuration

* convert a tiny hook use-debounced-value to typescript

* allow any for now?

* update terser and static viz configs

* adjust config

* change extension of QuestionActivityTimeline from jsx to js to match jest config

* adjust config

* skip failing tests

* Fix missing question method in unit tests (#18314)

* review fix

* fix

Co-authored-by: Anton Kulyk <kuliks.anton@gmail.com>

* yarn add @visx/axis@1.8.0 @visx/grid@1.16.0 @visx/group@1.7.0 @visx/scale@1.7.0 @visx/shape@1.8.0

* Import static viz charting code

* Format code with yarn prettier

* Silence linting violations

* Build static-viz bundle