Here is my ClojureScript code. Please add more charts to it:


(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"])

(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 ["Jan" "Feb" "Mar" "Apr" "May" "Jun" "Jul" "Aug" "Sep" "Oct" "Nov" "Dec"]}}
    :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 find-person-and-total-times [series name]
  (let [person-total-time (->> series
                               (find-person-by-name name)
                               (get-person-total-time))
        total-time-per-task (get-total-time-per-task series)]
    {:person-total-time person-total-time
     :total-time-per-task total-time-per-task}))

(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}])

;; Dummy data for Radar Chart
(def radar-chart-series (r/atom [{:name "Total Time"
                                  :data (vals (get-total-time-per-task @range-bar-series))}]))

(defn radar-chart []
  [chart {:options {:chart {:height 350 :type "radar"}
                    :xaxis {:categories ["Design" "Code" "Test" "UX" "Validation" "Bugfix" "Deployment"]}}
          :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 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"]

   [bar-chart]

      ;; Area Chart - Shows trend analysis over time
   [:h4 "Trend Analysis - Area Chart"]
   [area-chart] ;; Area chart component

[range-bar-chart]

   [heat-map-chart]

   [:h4 "Time spent (minutes)"]
   [radar-chart]
   
   [line-chart]

   [donut-chart]])