-
Notifications
You must be signed in to change notification settings - Fork 984
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
eb3de97
commit 40069b4
Showing
10 changed files
with
299 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| (ns quo2.components.graph.wallet-graph.style) | ||
|
|
||
| (def gradient-background | ||
| {:height 294 | ||
| :justify-content :flex-end}) | ||
|
|
||
| (def x-axis-label-text-style | ||
| {:margin-bottom -3 | ||
| :padding-top -10 | ||
| :height 0}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| (ns quo2.components.graph.wallet-graph.view | ||
| (:require [quo2.theme :as theme] | ||
| [react-native.linear-gradient :as linear-gradient] | ||
| [react-native.charts :as charts] | ||
| [react-native.core :as rn] | ||
| [quo2.components.graph.wallet-graph.style :as style] | ||
| [quo2.foundations.colors :as colors])) | ||
|
|
||
| (defn find-highest-value | ||
| [maps] | ||
| (reduce (fn [max-value map] | ||
| (let [value (:value map)] | ||
| (if (nil? max-value) ; Check if it's the first element | ||
| value | ||
| (if (> value max-value) | ||
| value | ||
| max-value)))) | ||
| nil | ||
| maps)) | ||
|
|
||
| (defn downsample-data | ||
| [data max-array-size] | ||
| (let [data-size (count data) | ||
| aggregation-interval (max (/ data-size max-array-size) 1)] | ||
| (loop [i 0 | ||
| aggregated-data [] | ||
| current-aggregation [] | ||
| num-points 0] | ||
| (if (>= i data-size) | ||
| (vec (reverse aggregated-data)) | ||
| (let [point (nth data i)] | ||
| (if (< num-points aggregation-interval) | ||
| (recur (inc i) aggregated-data (conj current-aggregation point) (inc num-points)) | ||
| (let [aggregated-value (/ (reduce + (map :value current-aggregation)) aggregation-interval)] | ||
| (recur (inc i) (conj aggregated-data {:value aggregated-value}) [point] 1)))))))) | ||
|
|
||
| (defn- wallet-graph-internal | ||
| [{:keys [data state time-frame theme]}] | ||
| (let [max-value (find-highest-value data) | ||
| width (:width (rn/get-screen)) | ||
| 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)) | ||
| gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)] | ||
| fill-color (colors/theme-colors colors/white colors/neutral-95) | ||
| max-data-points (case time-frame | ||
| :empty 0 | ||
| :1-week 7 | ||
| :1-month 30 | ||
| :3-months 90 | ||
| :1-year 365 | ||
| 500) | ||
| data (if (> (count data) max-data-points) | ||
| (downsample-data data max-data-points) | ||
| data)] | ||
| [linear-gradient/linear-gradient | ||
| {:colors gradient-colors | ||
| :start {:x 0 :y 1} | ||
| :end {:x 0 :y 0} | ||
| :style style/gradient-background} | ||
| [charts/line-chart | ||
| {:height 96 | ||
| :width (+ width 1) | ||
| :max-value max-value | ||
| :min-value 0 | ||
| :adjust-to-width true | ||
| :data data | ||
| :area-chart true | ||
| :start-fill-color fill-color | ||
| :end-fill-color fill-color | ||
| :hide-data-points true | ||
| :hide-rules true | ||
| :hide-y-axis-text true | ||
| :x-axis-indices-height 100 | ||
| :thickness 2 | ||
| :color line-color | ||
| :y-axis-thickness 0 | ||
| :x-axis-thickness 0 | ||
| :initial-spacing 0 | ||
| :end-spacing 0 | ||
| :disable-scroll true | ||
| :y-axis-label-width 0.01 | ||
| :labels-extra-height -36 | ||
| :x-axis-label-text-style style/x-axis-label-text-style}]])) | ||
|
|
||
| (def wallet-graph (theme/with-theme wallet-graph-internal)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| (ns react-native.charts | ||
| (:require ["react-native-gifted-charts" :as gifted-charts] | ||
| [reagent.core :as reagent])) | ||
|
|
||
| (def line-chart (reagent/adapt-react-class (.-LineChart gifted-charts))) |
90 changes: 90 additions & 0 deletions
90
src/status_im2/contexts/quo_preview/graph/wallet_graph.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| (ns status-im2.contexts.quo-preview.graph.wallet-graph | ||
| (:require [quo2.core :as quo] | ||
| [quo2.foundations.colors :as colors] | ||
| [react-native.core :as rn] | ||
| [reagent.core :as reagent] | ||
| [status-im2.contexts.quo-preview.preview :as preview])) | ||
|
|
||
| (defn generate-crypto-token-prices | ||
| [num-elements volatility] | ||
| (loop [n num-elements | ||
| prices [] | ||
| prev-price (rand-int 100000) | ||
| volatility volatility] | ||
| (if (zero? n) | ||
| (vec (reverse prices)) | ||
| (let [fluctuation (* prev-price volatility) | ||
| random-delta (- (rand fluctuation) (/ fluctuation 2)) | ||
| new-price (+ prev-price random-delta) | ||
| new-price (if (< new-price 1) 1 new-price) | ||
| new-prices (conj prices {:value new-price})] | ||
| (recur (dec n) new-prices new-price volatility))))) | ||
|
|
||
| (def descriptor | ||
| [{:label "State:" | ||
| :key :state | ||
| :type :select | ||
| :options [{:key :positive | ||
| :value "Positive"} | ||
| {:key :negative | ||
| :value "Negative"}]} | ||
| {:label "Time frame:" | ||
| :key :time-frame | ||
| :type :select | ||
| :options [{:key :empty | ||
| :value "Empty"} | ||
| {:key :1-week | ||
| :value "1 Week"} | ||
| {:key :1-month | ||
| :value "1 Month"} | ||
| {:key :3-months | ||
| :value "3 Months"} | ||
| {:key :1-year | ||
| :value "1 Year"} | ||
| {:key :all-time | ||
| :value "All time (500 years data)"}]}]) | ||
|
|
||
| (defn generate-data | ||
| [time-frame] | ||
| (let [data-points (case time-frame | ||
| :empty 0 | ||
| :1-week 7 | ||
| :1-month 30 | ||
| :3-months 90 | ||
| :1-year 365 | ||
| (* 365 500)) | ||
| volatility (case time-frame | ||
| :empty 0 | ||
| :1-week 2 | ||
| :1-month 1 | ||
| :3-months 0.5 | ||
| :1-year 0.05 | ||
| 0.005)] | ||
| (generate-crypto-token-prices data-points volatility))) | ||
|
|
||
| (defn cool-preview | ||
| [] | ||
| (let [state (reagent/atom {:state :positive | ||
| :time-frame :1-week})] | ||
| (fn [] | ||
| [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} | ||
| [rn/view {:padding-bottom 150} | ||
| [preview/customizer state descriptor] | ||
| [:<> | ||
| [quo/wallet-graph | ||
| {:data (generate-data (:time-frame @state)) | ||
| :state (:state @state) | ||
| :time-frame (:time-frame @state)}]]]]))) | ||
|
|
||
| (defn preview-wallet-graph | ||
| [] | ||
| [rn/view | ||
| {:background-color (colors/theme-colors | ||
| colors/white | ||
| colors/neutral-95) | ||
| :flex 1} | ||
| [rn/flat-list | ||
| {:flex 1 | ||
| :keyboard-should-persist-taps :always | ||
| :header [cool-preview] | ||
| :key-fn str}]]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.