Here is my code.

(defn random-team-profit []
  (map #(+ 10000 %)
       (repeatedly 5 (fn [] (rand-int 70000)))))


(def teams ["Team A", "Team B", "Team C", "Team D", "Team E"])


;; Year/time generation stuff
(def quarters ["Q1" "Q2" "Q3" "Q4"])
(def months ["Jan" "Feb" "Mar" "Apr" "May" "Jun" "Jul" "Aug" "Sep" "Oct" "Nov" "Dec"])

(defn current-year []
  (let [current-date (js/Date.)]
    (.getFullYear current-date)))

(defn generate-years 
  "Generates a number of years. 
   Can take a specific number of years or a specific start and end. 
   Returns a vector."
  ([]
   (generate-years 10))
  ([num-years]
   (vec (reverse (take num-years (iterate dec (- (current-year) 1))))))
  ([start-year end-year]
   (vec (range start-year (inc end-year)))))

(def years (generate-years 3))

(defn generate-quarters [years]
  (vec (for [year years
             quarter quarters]
         (str quarter " " year))))

(def year-quarters (r/atom (generate-quarters years)))

(defn get-time [date-string]
  (.getTime (js/Date. date-string)))


;; Data storage, generation, etc
(defn generate-year-map [num-years]
  (into {} (map #(hash-map % (random-team-profit)) (generate-years num-years))))

(def profit-series (r/atom (generate-year-map 6)))

(defn totals-per-year [profit-series-atom] 
       (map #(reduce + %) (vals profit-series-atom)))
(defn profit-of-year [profit-series-atom year]
  (reduce + (profit-series-atom year)))
(defn team-contribution [profit-series-atom year]
  (profit-series-atom year))

(def line-chart-series-1 (r/atom [10 41 35 51 49 62 69 91 148]))

;; atoms and etc
(def my-reagent-atom (r/atom 123))
(def year-val      (r/atom 2023))

(defn slider-on-change-handler [js-event]
  (reset! year-val (-> js-event .-target .-value)))



;; Charts

(defn pie-chart []
  [chart {:options {:chart {:width 380 :type "pie"}
                    :labels teams
                    :responsive [{:breakpoint 480
                                  :options {:chart {:width 200}
                                            :legend {:position "bottom"}}}]}
          :series (team-contribution @profit-series (int @year-val))
          :type "pie"
          :width 380}])

(defn line-chart []
  [chart
   {:options {:chart {:zoom {:enabled false}}
              :dataLabels {:enabled false}
              :stroke {:curve "straight"}
              :title {:text "Monthly Revenue Breakdown"
                      :align "left"}
              :grid {:row {:colors ["#f3f3f3" "transparent"]
                           :opacity 0.5}}
              :xaxis {:categories months}}
    :series [{:name "2018"
              :data (vals (inv/monthly-revenue-breakdown 2018))}
             {:name "2019"
              :data (vals (inv/monthly-revenue-breakdown 2019))}
             {:name "2020"
              :data (vals (inv/monthly-revenue-breakdown 2020))}
             {:name "2021"
              :data (vals (inv/monthly-revenue-breakdown 2021))}
             {:name "2022"
              :data (vals (inv/monthly-revenue-breakdown 2022))}
             {:name "2023"
              :data (vals (inv/monthly-revenue-breakdown 2023))}]

    :height 350
    :type "line"}])

(def area-chart-series (r/atom [{:name "Foot Traffic"
                                 :data [31, 40, 28, 51, 42, 109, 100, 47, 20, 6]}]))

(defn area-chart []
  [chart {:options {:chart {:height 350 :type "area"}
                    :dataLabels {:enabled false}
                    :stroke {:curve "smooth"}
                    :xaxis {:type "datetime"
                            :categories ["2018-09-19T00:00:00", "2018-09-19T01:30:00", "2018-09-19T02:30:00",
                                         "2018-09-19T03:30:00", "2018-09-19T04:30:00", "2018-09-19T05:30:00",
                                         "2018-09-19T06:30:00", "2018-09-19T07:30:00", "2018-09-19T08:30:00", 
                                         "2018-09-19T09:30:00"]}}
          :series @area-chart-series
          :type "area"
          :height 350}])

(defn bar-chart [] 
  [chart {:options {:chart {:id "basic-bar"}
                    :xaxis {:categories  (keys @profit-series)}
                    :stacked true
                    :title {:text "Yearly Total Profit"
                            :align "left"}}
  
          :series  [{:name "Total Profit"
                     :data (totals-per-year @profit-series)}]
          :type    "bar"
          :height 350}
   ])


(defn calculate-difference [val]
  (let [a (js/moment val 0)
        b (js/moment val 1)
        diff (.diff b a " days")]
    (str diff (if (> diff 1) " days" " day"))))



(defn get-time-difference [start-time end-time]
  (- end-time start-time))
(defn get-series-durations [series]
  (map (fn [person]
         {:name (:name person)
          :data (map (fn [activity]
                       (let [start-time (get-time (first (:y activity)))
                             end-time   (get-time (second (:y activity)))]
                         {:x (:x activity)
                          :duration (get-time-difference start-time end-time)}))
                     (:data person))})
       series))

(defn get-person-total-time [person-data]
  (reduce
    (fn [total-time {:keys [y]}]
      (let [[start-time end-time] y]
        (+ total-time (- end-time start-time))))
    0
    (:data person-data)))

;; (defn get-total-time-per-task [series]
;;   (reduce
;;     (fn [task-times {task-name :x, :keys [y]}]
;;       (let [duration (/ (- (second y) (first y)) 8000000)]
;;         (update task-times task-name (fnil + 0) duration)))
;;     {}
;;     (mapcat :data series)))

(defn find-person-by-name [series name]
  (first (filter #(= (:name %) name) series)))

(defn get-total-time-per-task
  ([series]
   (let [sorted-task-names (into (sorted-map) {"Design" 0 "Code" 0 "Test" 0 "UX" 0 "Validation" 0 "Bugfix" 0 "Deployment" 0})]
     (reduce
      (fn [task-times {task-name :x, :keys [y]}]
        (let [duration (/ (- (second y) (first y)) 8000000)]
          (update task-times task-name (fnil + 0) duration)))
      sorted-task-names
      (mapcat :data series))))
  ([series name]
   (let [person (find-person-by-name series name)
         person-total-time (get-person-total-time person)
         total-time-per-task (get-total-time-per-task (list person))]
     {:person-total-time person-total-time
      :total-time-per-task total-time-per-task})))

(defn get-individual-times-per-task [series name]
  (vals (second (vals (get-total-time-per-task series name)))))


(def range-bar-series (r/atom [{:name "Amy Harris"
                                :data [{:x "Design"                 :y [(get-time "2022-10-05") (get-time "2022-10-08")]}
                                       {:x "Code"                   :y [(get-time "2022-10-02") (get-time "2022-10-05")]}
                                       {:x "Code"                   :y [(get-time "2022-10-05") (get-time "2022-10-07")]}
                                       {:x "Test"                   :y [(get-time "2022-10-03") (get-time "2022-10-09")]}
                                       {:x "UX"                     :y [(get-time "2022-10-08") (get-time "2022-10-11")]}
                                       {:x "Validation"             :y [(get-time "2022-10-11") (get-time "2022-10-16")]}
                                       {:x "Design"                 :y [(get-time "2022-10-01") (get-time "2022-10-03")]}]}
                               {:name "Jarel Jones"
                                :data [{:x "Design"                 :y [(get-time "2022-10-05") (get-time "2022-10-08")]}
                                       {:x "UX"                     :y [(get-time "2022-10-08") (get-time "2022-10-11")]}
                                       {:x "Bugfix"                 :y [(get-time "2022-10-11") (get-time "2022-10-16")]}
                                       {:x "Code"                   :y [(get-time "2022-10-02")  (get-time "2022-10-05")]}
                                       {:x "Bugfix"                 :y [(get-time "2022-10-06")  (get-time "2022-10-09")]}
                                       {:x "Test"                :y [(get-time "2022-10-10")  (get-time "2022-10-19")]}]}
                               {:name "Sun Tzu"
                                :data [{:x "Design"                 :y [(get-time "2022-10-02") (get-time "2022-10-05")]}
                                       {:x "Test"                   :y [(get-time "2022-10-06") (get-time "2022-10-16")]
                                        :goals [{:name "Break" :value (get-time "2022-10-10") :strokeColor "#CD2F2A"}]}
                                       {:x "Code"                   :y [(get-time "2022-10-03") (get-time "2022-10-07")]}
                                       {:x "Deployment"             :y [(get-time "2022-10-20") (get-time "2022-10-22")]}
                                       {:x "Design"                 :y [(get-time "2022-10-10") (get-time "2022-10-16")]}]}
                               {:name "Charles S. Sr."
                                :data [{:x "Code"                   :y [(get-time "2022-10-01") (get-time "2022-10-03")]}
                                       {:x "UX"                     :y [(get-time "2022-10-04") (get-time "2022-10-06")]}
                                       {:x "Code"                   :y [(get-time "2022-10-07") (get-time "2022-10-10")]}
                                       {:x "Test"                   :y [(get-time "2022-10-11") (get-time "2022-10-14")]}
                                       {:x "Test"                   :y [(get-time "2022-10-15") (get-time "2022-10-17")]}]}
                               {:name "John Egbert"
                                :data [{:x "Design"                 :y [(get-time "2022-10-02") (get-time "2022-10-05")]}
                                       {:x "Bugfix"                 :y [(get-time "2022-10-06") (get-time "2022-10-08")]}
                                       {:x "Test"                   :y [(get-time "2022-10-09") (get-time "2022-10-12")]}
                                       {:x "Bugfix"                 :y [(get-time "2022-10-13") (get-time "2022-10-15")]}
                                       {:x "Test"                   :y [(get-time "2022-10-16") (get-time "2022-10-18")]}]}
                               {:name "Justin Wong"
                                :data [{:x "Code"                   :y [(get-time "2022-10-10") (get-time "2022-10-17")]}
                                       {:x "Validation"             :y [(get-time "2022-10-05") (get-time "2022-10-09")]
                                        :goals [{:name "Break" :value (get-time "2022-10-07") :strokeColor "#CD2F2A"}]}]}]))

(defn range-bar-chart []
  [chart ;; Assuming chart is your Reagent-compatible ApexCharts component
   {:options {:chart {:height 450
                      :type "rangeBar"}
              :plotOptions {:bar {:horizontal true
                                  :barHeight "80%"}}
              :xaxis {:type "datetime"}
              :stroke {:width 1}
              :fill {:type "solid"
                     :opacity 0.6}
              :legend {:position "top"
                       :horizontalAlign "left"}}
    :series @range-bar-series
    :type "rangeBar"
    :height 450}])


(def radar-chart-series (r/atom [{:name "Amy Harris"
                                  :data (get-individual-times-per-task @range-bar-series "Amy Harris")}
                                 {:name "Jarel Jones"
                                  :data (get-individual-times-per-task @range-bar-series "Jarel Jones")}
                                 {:name "Sun Tzu"
                                  :data (get-individual-times-per-task @range-bar-series "Sun Tzu")}
                                 {:name "Charles S. Sr."
                                  :data (get-individual-times-per-task @range-bar-series "Charles S. Sr.")}
                                 {:name "John Egbert"
                                  :data (get-individual-times-per-task @range-bar-series "John Egbert")}
                                 {:name "Justin Wong"
                                  :data (get-individual-times-per-task @range-bar-series "Justin Wong")}]))

(defn radar-chart []
  [chart {:options {:chart {:height 350 :type "radar"}
                    :xaxis {:categories ["Bugfix" "Code" "Deployment" "Design" "Testing" "UX" "Validation"]}}
          :series @radar-chart-series
          :type "radar"
          :height 500}])




     

;; Dummy data for Heat Map Chart
(def heat-map-chart-series
  (atom [{:name "Electronics"
          :data [[0, 15000, 0] [1, 21000, 0] [2, 18000, 0] [3, 22000, 0]
                 [0, 25000, 1] [1, 29000, 1] [2, 23000, 1] [3, 30000, 1]
                 [0, 20000, 2] [1, 19000, 2] [2, 22000, 2] [3, 25000, 2]
                 [0, 24000, 3] [1, 30000, 3] [2, 28000, 3] [3, 32000, 3]]}
         {:name "Clothing"
          :data [[0, 9000,  "S"] [1, 12000, "M"] [2, 11000, "L"] [3, 15000, "XL"]
                 [0, 13000, "S"] [1, 14000, "M"] [2, 12000, "L"] [3, 16000, "XL"]
                 [0, 12500, "S"] [1, 11000, "M"] [2, 11500, "L"] [3, 13000, "XL"]
                 [0, 10500, "S"] [1, 12500, "M"] [2, 9500,  "L"] [3, 14500, "XL"]]}
         {:name "Furniture"
          :data [[0, 8000,  0] [1, 10000, 0] [2, 9500,  0] [3, 12000, 0]
                 [0, 11000, 1] [1, 11500, 1] [2, 9000,  1] [3, 12500, 1]
                 [0, 9500,  2] [1, 9500,  2] [2, 10000, 2] [3, 11000, 2]
                 [0, 12000, 3] [1, 13000, 3] [2, 14000, 3] [3, 15000, 3]]}]))

(defn heat-map-chart []
  [chart {:options {:chart {:height 350 :type "heatmap"}
                    :title {:text "Quarterly Sales by Product Category"} 
                    :plot-options {:heatmap {:radius 0}}
                    :tooltip {:valuePrefix "$"}}
          :series @heat-map-chart-series
          :type "heatmap"
          :height 350}])



;; Reuse the pie-chart data for a Donut Chart
(defn donut-chart []
  [chart {:options {:chart {:width 500 :type "donut"}
                    :labels (keys (inv/service-revenue))
                    :responsive [{:breakpoint 480
                                  :options {:chart {:width 200}
                                            :legend {:position "bottom"}}}]}
          :series (vals (inv/service-revenue))
          :type "donut"
          :width 500}])


(defn generate-scatter-data [profit-series]
  (mapv (fn [team-name team-profits]
          {:name team-name
           :data (mapv (fn [profit] [(+ 4 (rand-int 6)) profit]) team-profits)})
        teams
        (vals profit-series)))

(def scatter-chart-series (r/atom (generate-scatter-data @profit-series)))

(defn scatter-chart []
  [chart {:options {:chart {:height 350 :type "scatter"}
                    :xaxis {:title {:text "Team Synergy Rating"}}
                    :yaxis {:title {:text "Team Profit"}}}
          :series @scatter-chart-series
          :type "scatter"
          :height 350
          :width 500}])


;; Dummy data for Polar Area Chart
(def polar-area-chart-series (r/atom [{:name "Product Revenue"
                                       :data [21000, 32000, 18000, 27000, 13000, 22000]}]))

(defn polar-area-chart []
  [chart {:options {:chart {:height 350 :type "polarArea"} ;; Make sure you have polarArea chart type
                    :labels teams ;; Use the team names as labels
                    :stroke {:colors ["#E91E63"]}
                    :fill {:opacity 0.8}}
          :series (team-contribution @profit-series (int @year-val)) ;; Use team contribution for the current year
          :type "polarArea"
          :height 350}])



(defn candlestick-data []
  (mapv (fn [month]
          {:x month
           :y [(rand-int 10000) ; Opening profit
               (+ (rand-int 10000) 10000) ; High profit
               (rand-int 10000) ; Low profit
               (+ (rand-int 10000) 5000)]}) ; Closing profit
        months))

(defn candlestick-chart []
  [chart {:options {:chart {:type "candlestick"}
                    :title {:text "Monthly Profit Overview"}}
          :series [{:name "Monthly Profit"
                    :data (candlestick-data)}]
          :type "candlestick"
          :height 350}])


(defn generate-bubble-data [team-profits]
  (mapv (fn [team-name team-profit]
          {:name team-name
           :data (mapv (fn [value] [(rand-int 52) value (+ 50 (rand-int 50))]) team-profit)})
        teams team-profits))

(def bubble-chart-series (r/atom (generate-bubble-data (vals @profit-series))))

(defn bubble-chart []
  [chart {:options {:chart {:height 350 :type "bubble"}
                    :xaxis {:title {:text "Week"}}
                    :yaxis {:title {:text "Signed Deal Value"}}}
          :series @bubble-chart-series
          :type "bubble"
          :height 350}])




(defn generate-treemap-data [years]
  (mapv (fn [year]
          { :data (mapv (fn [team profits]
                         {:x team
                          :y (reduce + profits)})
                       teams
                       (vals (generate-year-map years)))})
        (generate-years 1)))

(defn treemap-chart []
  [chart {:options {:chart {:type "treemap"}
                    :title {:text "Annual Profit Distribution per Team"}}
          :series [ {:data (vec (map #(hash-map :y %1 :x %2) (vals (inv/total-amount-per-client)) (keys (inv/total-amount-per-client))))}] ;; Assume current year
          :type "treemap"
   :height 500}])



(defn generate-box-plot-data [team-profits]
  (mapv (fn [team-name] {:name team-name :type "boxPlot"})
        teams))

(def box-plot-chart-series (r/atom (generate-box-plot-data (vals @profit-series))))

(defn box-plot-chart []
  [chart {:options {:chart {:height 350 :type "boxPlot"}
                    :xaxis {:categories quarters}}
          :series @box-plot-chart-series
          :type "boxPlot"
          :height 350}])



(defn home-page []
  [:section.section>div.container>div.content
   [:h1 {:style {:display "flex"
                 :justify-content "center"
                 :align-items "center"}}
    "ApexCharts.js"] ;; you MUST remember to dereference
   [:h4 "ApexCharts Basics"]
   [:p  {:style {:display "flex"
                 :justify-content "center"
                 :align-items "center"}}
    "ApexCharts is a modern charting library that works with the React framework. It provides 
         a wide range of chart types and features such as animations, zooming, panning, and updating series dynamically. 
         It is also responsive, making it suitable for creating interactive data visualizations for both desktop and mobile devices.
     It is open-source and provided under the MIT licence, so it is entirely viable for commercial projects."]


   [:h4 "Profit Breakdown by Team - Pie Chart"]
   [:div {:class "slidecontainer"}
    [:input {:type  "range"
             :id    "MyRange1"
             :min   (first (sort (keys @profit-series)))
             :max   (last  (sort (keys @profit-series)))
             :value @year-val
             :on-change slider-on-change-handler}]]
   [:p "Data for year: " @year-val]
   [pie-chart] ;; Pie chart component
   [:button {:on-click #(reset! profit-series (generate-year-map (+ (rand-int 6) 3)))}
    "Generate new data"]
   [:h4 "Correlation For Analysis - Scatter Plot"]
   [scatter-chart]
   [:h4 "Profit At A Glance - Bar Graph"]
   [bar-chart]

      ;; Area Chart - Shows trend analysis over time
   [:h4 "Trend Analysis - Area Chart"]
   [area-chart] ;; Area chart component
   [:h4 "Schedules and Work Division - Range Bar Chart"]
   [range-bar-chart]

   [:h4 "Quarterly Product Sales and Impact - Heat Map"]
   [heat-map-chart]

   [:h4 "Time and Statistic Comparison - Radar Chart"]
   [radar-chart]

   [:h4 "Comparing Sales Trends - Line Chart"]
   [line-chart]

   [:h4 "Comparing Sales Trends - Line Chart"]
   [donut-chart]

   [:h4 "Comparing Impact - Polar Area Chart"]
   [polar-area-chart]

   [:h4 "Monthly Revenue - Candlestick Chart"]
   [candlestick-chart]
   [:h4 "Team Performance Metrics - Bubble Chart"]
   [bubble-chart]
   [:h4 "Client Size at a Glance - Treemap Chart"]
   [treemap-chart]
   [:h4 "Quarterly Team Earnings - Box Plot"]
   [box-plot-chart]])