status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add custom color to wallet graph (#17149) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-09-05 11:05:54 -03:00 committed by GitHub
parent 7d1098b5b3
commit b2840a77a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/quo2/components/graph/wallet_graph/view.cljs
View File

@ -18,17 +18,26 @@
:1-year 365 :1-year 365
500)) 500))
(defn- get-line-color
[customization-color state theme]
(let [color-keyword (cond
customization-color customization-color
(= state :positive) :success
:else :danger)]
(colors/theme-colors
(colors/custom-color color-keyword 50)
(colors/custom-color color-keyword 60)
theme)))
(defn- view-internal (defn- view-internal
[{:keys [data state time-frame theme]}] [{:keys [data state time-frame customization-color theme]}]
(let [max-data-points (time-frame->max-data-points time-frame) (let [max-data-points (time-frame->max-data-points time-frame)
data (if (and (not= time-frame :empty) (> (count data) max-data-points)) data (if (and (not= time-frame :empty) (> (count data) max-data-points))
(utils/downsample-data data max-data-points) (utils/downsample-data data max-data-points)
data) data)
max-value (when-not (= time-frame :empty) (utils/find-highest-value data)) max-value (when-not (= time-frame :empty) (utils/find-highest-value data))
width (:width (rn/get-window)) width (:width (rn/get-window))
line-color (if (= state :positive) line-color (get-line-color customization-color state theme)
(colors/theme-colors colors/success-50 colors/success-60 theme)
(colors/theme-colors colors/danger-50 colors/danger-60 theme))
gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)] gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
fill-color (colors/theme-colors colors/white colors/neutral-95)] fill-color (colors/theme-colors colors/white colors/neutral-95)]
(if (= time-frame :empty) (if (= time-frame :empty)

10
src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs
View File

@ -30,7 +30,8 @@
{:key :3-months} {:key :3-months}
{:key :1-year} {:key :1-year}
{:key :all-time {:key :all-time
:value "All time (500 years data)"}]}]) :value "All time (500 years data)"}]}
(preview/customization-color-option)])
(defn generate-data (defn generate-data
[time-frame] [time-frame]
@ -60,6 +61,7 @@
:descriptor descriptor :descriptor descriptor
:component-container-style {:padding-horizontal 0 :margin-top 200}} :component-container-style {:padding-horizontal 0 :margin-top 200}}
[quo/wallet-graph [quo/wallet-graph
{:data (generate-data (:time-frame @state)) {:data (generate-data (:time-frame @state))
:state (:state @state) :state (:state @state)
:time-frame (:time-frame @state)}]]))) :time-frame (:time-frame @state)
:customization-color (:customization-color @state)}]])))