Sixth code snapshot from https://www.tenderisthebyte.com/blog/2019/10/09/clojurescript-reagent-react-vis/
(ns cljs_reagent_proj.core | |
(:require | |
[reagent.core :as r] | |
[cljsjs.react-vis :as rvis])) | |
(def chart-data [{:x 1 :y 1} | |
{:x 2 :y 2} | |
{:x 3 :y 4} | |
{:x 4 :y 5} | |
{:x 5 :y 4} | |
{:x 6 :y 6} | |
{:x 7 :y 8} | |
{:x 8 :y 6} | |
{:x 9 :y 5} | |
{:x 10 :y 5}]) | |
(def axis-style {:line {:stroke "#333"} | |
:ticks {:stroke "#999"} | |
:text {:stroke "none" | |
:fill "#333"}}) | |
(defn line-chart [data] | |
[:> rvis/XYPlot | |
{:width 800 | |
:height 225 | |
:margin {:left 50 :right 50}} | |
[:> rvis/XAxis {:style axis-style}] | |
[:> rvis/YAxis {:style axis-style}] | |
[:> rvis/LineSeries | |
{:data data | |
:style {:fill "none"}}]]) | |
(defn app-scaffold [] | |
[:div | |
[line-chart chart-data]]) | |
(defn render-app [] | |
(r/render [app-scaffold] | |
(.getElementById js/document "app"))) | |
(render-app) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment