create a cljs lib for echarts

kimim · Feb 24, 2021 · 50f3673 · 50f3673
commit 50f3673
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+target
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "shadow-cljs": "^2.3.22"
+  }
+}
diff --git a/example/public/css/main.css b/example/public/css/main.css
@@ -0,0 +1,3 @@
+body {
+  color: green;
+}
diff --git a/example/public/index.html b/example/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head><title>Browser Starter</title></head>
+<link rel="stylesheet" href="/css/main.css">
+<body>
+<h1>shadow-cljs - Browser</h1>
+<div id="app"></div>
+
+<script src="/js/main.js"></script>
+<script>starter.browser.init();</script>
+</body>
+</html>
diff --git a/example/shadow-cljs.edn b/example/shadow-cljs.edn
@@ -0,0 +1,19 @@
+{:source-paths
+ ["src"]
+
+ :dependencies
+ [[reagent "1.0.0"]
+  [re-echarts "5.0.2"]]
+
+ :builds
+ {:app {:target :browser
+        :output-dir "public/js"
+        :asset-path "/js"
+
+        :modules
+        {:main
+         {:entries [starter.browser]}}
+
+        :devtools
+        {:http-root "public"
+         :http-port 8020}}}}
diff --git a/example/src/starter/browser.cljs b/example/src/starter/browser.cljs
@@ -0,0 +1,35 @@
+(ns starter.browser
+  (:require
+   [reagent.dom :as rdom]
+   [re-echarts.core :refer [ECharts]]))
+
+(defn myechart []
+  [:> ECharts
+      {:style {:width "800px" :height "600px"}
+       :theme "dark"
+       :option
+       {:title {:text "Echarts is here"}
+        :dataset {:dimention [:Week :Value]
+                  :source [{:Week "Mon" :Value 820} {:Week "Tue" :Value 932} {:Week "Wed" :Value 901}
+                           {:Week "Thu" :Value 934} {:Week "Fri" :Value 1220} {:Week "Sat" :Value 820}
+                           {:Week "Sun" :Value 990}]}
+        :xAxis {:type "category"}
+        :yAxis {:type "value"}
+        :series [{:type "line"
+                  :smooth true}]}}])
+
+;; start is called by init and after code reloading finishes
+(defn ^:dev/after-load start []
+  (js/console.log "start")
+  (rdom/render [#'myechart] (.getElementById js/document "app")))
+
+(defn ^:export init []
+  ;; init is called ONCE when the page loads
+  ;; this is called in the index.html and must be exported
+  ;; so it is available even in :advanced release builds
+  (js/console.log "init")
+  (start))
+
+;; this is called before any code is reloaded
+(defn ^:dev/before-load stop []
+  (js/console.log "stop"))
diff --git a/localrepo.sh b/localrepo.sh
@@ -0,0 +1,8 @@
+#!/bin/sh
+# move jar to local repo for testing purpose
+export version=5.0.2
+lein jar
+lein pom
+lein localrepo install target/re-echarts-$version.jar re-echarts $version
+mkdir -p ~/.m2/repository/re-echarts/re-echarts/$version/
+mv pom.xml ~/.m2/repository/re-echarts/re-echarts/$version/re-echarts-$version.pom
diff --git a/project.clj b/project.clj
@@ -0,0 +1,14 @@
+(defproject re-echarts/re-echarts "5.0.2"
+  :description "React ECharts wrapper in ClojureScript"
+  :url "https://github.com/kimim/re-echarts"
+
+  :license {:name "Eclipse Public License"
+            :url "http://www.eclipse.org/legal/epl-v10.html"}
+
+  :dependencies
+  ;; always use "provided" for Clojure(Script)
+  [[org.clojure/clojurescript "1.10.520" :scope "provided"]
+   [reagent "1.0.0"]]
+
+  :source-paths
+  ["src"])
diff --git a/src/deps.cljs b/src/deps.cljs
@@ -0,0 +1 @@
+{:npm-deps {"echarts" "5.0.2"}}
diff --git a/src/re_echarts/core.cljs b/src/re_echarts/core.cljs
@@ -0,0 +1,16 @@
+(ns re-echarts.core
+  (:require
+   [react :as react]
+   [reagent.core :as r]
+   [echarts :as echarts]))
+
+(defn ECharts [options]
+  (r/as-element
+   (let [mychart (react/useRef nil)]
+     (react/useEffect (fn []
+                        (set! (.-chart js/document)
+                              (echarts/init (.-current mychart) (.-theme options)))
+                        (.setOption (.-chart js/document) (.-option options)))
+                      (clj->js [options js/ResizeObserver]))
+     [:div {:ref mychart
+            :style (.-style options)}])))