fix(Explore): Force different color for same metrics in Mixed Time-Series

[geido]

SUMMARY

This PR forces the colorScale to return a different color when the same metrics are found across the two queries in order to apply contrasting colors. It appends a (1) to the name of the metric in series B when found in series A so that the colorScale will treat it as a different value and it behaves consistently with how the chart renames these labels.

BEFORE

DEV.Mixed.Time-Series.series.color.1.mp4

AFTER

DEV.Mixed.Time-Series.series.color.2.mp4

TESTING INSTRUCTIONS

1. Choose a mixed time-series chart
2. Date added in Time with a Grain: Month
3. Add the same metrics A and B
4. Customize -> Create 1 metric as a Line and the other as a Bar
5. Make sure different colors applied

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #18603 (6b0f3c7) into master (aa21a96) will decrease coverage by 0.01%.
The diff coverage is 50.00%.

@@            Coverage Diff             @@
##           master   #18603      +/-   ##
==========================================
- Coverage   66.30%   66.29%   -0.02%     
==========================================
  Files        1595     1595              
  Lines       62630    62596      -34     
  Branches     6308     6304       -4     
==========================================
- Hits        41528    41499      -29     
+ Misses      19453    19452       -1     
+ Partials     1649     1645       -4     

Flag	Coverage Δ
javascript	51.33% <50.00%> (-0.04%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...hart-echarts/src/MixedTimeseries/transformProps.ts	0.00% <0.00%> (ø)
...lugin-chart-echarts/src/Timeseries/transformers.ts	51.23% <100.00%> (+0.40%)	⬆️
...tend/src/SqlLab/components/ColumnElement/index.tsx	93.33% <0.00%> (-0.42%)	⬇️
...frontend/src/SqlLab/components/ResultSet/index.tsx	50.73% <0.00%> (ø)
...RUD/data/database/DatabaseModal/SqlAlchemyForm.tsx	66.66% <0.00%> (ø)
.../src/explore/components/controls/BoundsControl.jsx
...c/SqlLab/components/ExploreResultsButton/index.jsx
.../src/explore/components/controls/BoundsControl.tsx	88.88% <0.00%> (ø)
...c/SqlLab/components/ExploreResultsButton/index.tsx	100.00% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update aa21a96...6b0f3c7. Read the comment docs.

[geido]

@stephenLYZ @zhaoyongjie I updated the PR in a way that conforms with the way the chart labels behave, by adding a suffix (1) to the end of the label name, as you can see in the screenshot. That's standard behaviour.

With this update the user can now customize the label colors fully and it should still guarantee that same metrics across different queries, use different colors by default. Please watch the video below that shows the new behaviour.

DEV.Mixed.Time-Series.series.color.2.mp4