Added line chart support.

square · Nov 27, 2024 · 98f673c · 98f673c
1 parent 1aa2f11
commit 98f673c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/invert-gradle-plugin/src/main/resources/META-INF/invert.js b/invert-gradle-plugin/src/main/resources/META-INF/invert.js
@@ -111,7 +111,11 @@ window.highlightJsHighlightAll = function () {
     hljs.highlightAll();
 }
 
-/** Render a Plotly treemap chart from a list of file paths */
+/**
+ * Render a Plotly treemap chart from a list of file paths
+ *
+ * https://plotly.com/javascript/treemaps/
+ */
 window.renderPlotlyTreeMap = function (domElementId, filePaths, onClick) {
     loadJsFileAsync("https://cdn.plot.ly/plotly-2.35.2.min.js", function (obj) {
         function generateCsvFromPaths(input) {
@@ -194,6 +198,20 @@ window.renderPlotlyTreeMap = function (domElementId, filePaths, onClick) {
     });
 }
 
+/** Render Line Charts with Chart.js */
+window.renderLineChartJs = function (domElementId, graphDataJson, onClick) {
+    if (window.Chart === undefined) {
+        loadJsFileAsync("https://cdn.jsdelivr.net/npm/chart.js", function (obj) {
+            renderLineChartJs(domElementId, graphDataJson, onClick)
+        });
+    } else {
+        const chartJsData = JSON.parse(graphDataJson)
+        console.log(chartJsData)
+        const ctx = document.getElementById(domElementId).getContext('2d');
+        new Chart(ctx, chartJsData);
+    }
+}
+
 /**
  * Allows someone to define a "customizeInvert" function to be called before it is loaded.
  */

diff --git a/invert-report/src/jsMain/kotlin/External.kt b/invert-report/src/jsMain/kotlin/External.kt
@@ -2,7 +2,6 @@
 
 external fun externalLoadJavaScriptFile(key: String, callback: (json: String) -> Unit)
 
-
 external fun loadJsFileAsync(url: String, callback: () -> Unit)
 
 external fun markdownToHtml(markdown: String): String
@@ -13,13 +12,19 @@ external fun callDecodeURIComponent(str: String): String
 
 external fun highlightJsHighlightAll()
 
-
 /**
+ * Render Directed Graph with force-graph library.
+ *
  * @param domElementId Dom Element id to render the graph in
  * @param graphDataJson Graph Data serialized to JSON
  */
 external fun render3dGraph(domElementId: String, graphDataJson: String, width: Int, height: Int)
 
+/** Render Pie and Bar Charts with Chart.js */
 external fun renderChartJs(domElementId: String, graphDataJson: String, onClick: (label: String, value: Int) -> Unit)
+
+/** Render Line Charts with Chart.js */
 external fun renderLineChartJs(domElementId: String, graphDataJson: String, onClick: (label: String, value: Int) -> Unit)
+
+/** Render Tree Map with Plotly */
 external fun renderPlotlyTreeMap(domElementId: String, graphDataJson: String, onClick: (label: String, value: Int) -> Unit)