From b2840a77a52977a0aaad9144ee63c3948f9e7b8f Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Tue, 5 Sep 2023 11:05:54 -0300 Subject: [PATCH] feat: add custom color to wallet graph (#17149) Signed-off-by: Brian Sztamfater --- .../components/graph/wallet_graph/view.cljs | 17 +++++++++++++---- .../quo_preview/graph/wallet_graph.cljs | 10 ++++++---- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/quo2/components/graph/wallet_graph/view.cljs b/src/quo2/components/graph/wallet_graph/view.cljs index b44c2b0649..d57e51850f 100644 --- a/src/quo2/components/graph/wallet_graph/view.cljs +++ b/src/quo2/components/graph/wallet_graph/view.cljs @@ -18,17 +18,26 @@ :1-year 365 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 - [{: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) data (if (and (not= time-frame :empty) (> (count data) max-data-points)) (utils/downsample-data data max-data-points) data) max-value (when-not (= time-frame :empty) (utils/find-highest-value data)) width (:width (rn/get-window)) - line-color (if (= state :positive) - (colors/theme-colors colors/success-50 colors/success-60 theme) - (colors/theme-colors colors/danger-50 colors/danger-60 theme)) + line-color (get-line-color customization-color state theme) gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)] fill-color (colors/theme-colors colors/white colors/neutral-95)] (if (= time-frame :empty) diff --git a/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs b/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs index c8c318f684..1ba95c6956 100644 --- a/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs +++ b/src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs @@ -30,7 +30,8 @@ {:key :3-months} {:key :1-year} {:key :all-time - :value "All time (500 years data)"}]}]) + :value "All time (500 years data)"}]} + (preview/customization-color-option)]) (defn generate-data [time-frame] @@ -60,6 +61,7 @@ :descriptor descriptor :component-container-style {:padding-horizontal 0 :margin-top 200}} [quo/wallet-graph - {:data (generate-data (:time-frame @state)) - :state (:state @state) - :time-frame (:time-frame @state)}]]))) + {:data (generate-data (:time-frame @state)) + :state (:state @state) + :time-frame (:time-frame @state) + :customization-color (:customization-color @state)}]])))