Merge pull request #91 from adham-omran/highcharts

Add Highcharts Core support

.gitignore

@@ -28,4 +28,6 @@
 /classes
 /target
 .clerk
-.clay.html
+.clay.html
+/.clj-kondo/
+/temp/

deps.edn

@@ -7,7 +7,7 @@
         io.github.nextjournal/markdown {:mvn/version "0.5.148"}
         hiccup/hiccup {:mvn/version "2.0.0-RC2"}
         clj-commons/clj-yaml {:mvn/version "1.0.27"}
-        org.scicloj/kindly {:mvn/version "4-alpha18"}
+        org.scicloj/kindly {:mvn/version "4-alpha19"}
         org.scicloj/kindly-advice {:mvn/version "1-alpha6"}
         org.scicloj/tempfiles {:mvn/version "1-alpha2"}
         org.scicloj/kind-portal {:mvn/version "1-alpha10"}

docs/index_files/libs/quarto-ojs/quarto-ojs-runtime.js

@@ -5428,7 +5428,6 @@ class QuartoInspector extends Inspector {
     this._cellAst = cellAst;
   }
   rejected(error) {
-    console.error(`Error evaluating OJS cell\n${this._cellAst.input}\n${String(error)}`);
     return super.rejected(error);
   }
 }
@@ -5505,8 +5504,8 @@ function extendObservableStdlib(lib) {
 }
 
 class ShinyInspector extends QuartoInspector {
-  constructor(node, cellAst) {
-    super(node, cellAst);
+  constructor(node) {
+    super(node);
   }
   fulfilled(value, name) {
     if (shinyInputVars.has(name) && window.Shiny) {

docs/notebooks/custom.scss

@@ -4,3 +4,5 @@
 .table {width:auto}
 
 code {font-family: 'Fira Code Medium', monospace;}
+
+.clay-image img {max-width: 100%}

notebooks/custom.scss

@@ -4,3 +4,5 @@
 .table {width:auto}
 
 code {font-family: 'Fira Code Medium', monospace;}
+
+.clay-image img {max-width: 100%}

notebooks/index.clj

@@ -760,6 +760,46 @@ nested-structure-1
                   {:width "300px"
                    :height "300px"}}))
 
+;; ### Highcharts
+
+(kind/highcharts
+ {:title {:text "Line chart"}
+  :subtitle {:text "By Job Category"}
+  :yAxis {:title {:text "Number of Employees"}}
+  :series [{:name "Installation & Developers"
+            :data [43934, 48656, 65165, 81827, 112143, 142383,
+                   171533, 165174, 155157, 161454, 154610]}
+
+           {:name "Manufacturing",
+            :data [24916, 37941, 29742, 29851, 32490, 30282,
+                   38121, 36885, 33726, 34243, 31050]}
+
+           {:name "Sales & Distribution",
+            :data [11744, 30000, 16005, 19771, 20185, 24377,
+                   32147, 30912, 29243, 29213, 25663]}
+
+           {:name "Operations & Maintenance",
+            :data [nil, nil, nil, nil, nil, nil, nil,
+                   nil, 11164, 11218, 10077]}
+
+           {:name "Other",
+            :data [21908, 5548, 8105, 11248, 8989, 11816, 18274,
+                   17300, 13053, 11906, 10073]}]
+
+  :xAxis {:accessibility {:rangeDescription "Range: 2010 to 2020"}}
+
+  :legend {:layout "vertical",
+           :align "right",
+           :verticalAlign "middle"}
+
+  :plotOptions {:series {:label {:connectorAllowed false},
+                         :pointStart 2010}}
+
+  :responsive {:rules [{:condition {:maxWidth 500},
+                        :chartOptions {:legend {:layout "horizontal",
+                                                :align "center",
+                                                :verticalAlign "bottom"}}}]}})
+
 ;; ### Observable
 
 ;; [Observable](https://observablehq.com/) visualizations are supported

src/scicloj/clay/v2/item.clj

@@ -313,3 +313,13 @@
   ;; avoid favicon.ico request: https://stackoverflow.com/a/38917888
   (hiccup/html
    [:link {:rel "icon" :href "data:,"}]))
+
+(defn highcharts
+  "Prepare Highcharts JSON data for plotting."
+  [value]
+  {:hiccup [:div
+            [:script
+             (format
+              "Highcharts.chart(document.currentScript.parentElement, %s);"
+              (charred/write-json-str value))]]
+   :deps [:highcharts]})

src/scicloj/clay/v2/page.clj

@@ -81,7 +81,8 @@
                                 [{:gh-repo "scicloj/ggplotly-deps"
                                   :relative-path "lib"
                                   :paths ["crosstalk-1.2.1/css/crosstalk.min.css"
-                                          "plotly-htmlwidgets-css-2.11.1/plotly-htmlwidgets.css"]}]}}})
+                                          "plotly-htmlwidgets-css-2.11.1/plotly-htmlwidgets.css"]}]}}
+   :highcharts {:js {:from-the-web ["https://code.highcharts.com/highcharts.js"]}}})
 
 (def include
   {:js hiccup.page/include-js

src/scicloj/clay/v2/prepare.clj

@@ -451,3 +451,7 @@
 (add-preparer-from-value-fn!
  :kind/htmlwidgets-ggplotly
  #'item/ggplotly)
+
+(add-preparer-from-value-fn!
+ :kind/highcharts
+ #'item/highcharts)