feat: add test of new chart library

spcl · Dec 7, 2024 · 45575e2 · 45575e2
1 parent 236aba1
commit 45575e2
Show file tree

Hide file tree

Showing 3 changed files with 657 additions and 0 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -97,6 +97,8 @@
     <link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
   {% endif %}
 
+  <script src="{{ '/assets/js/dist/apexcharts.min.js' | relative_url }}"></script>
+
   <!-- JavaScript -->
 
   {% unless site.theme_mode %}

diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
@@ -7,6 +7,88 @@ tags: [writing]
 render_with_liquid: false
 ---
 
+
+<div id="chart"></div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var options = {
+        series: [
+            {
+                name: "High - 2013",
+                data: [28, 29, 33, 36, 32, 32, 33]
+            },
+            {
+                name: "Low - 2013",
+                data: [12, 11, 14, 18, 17, 13, 13]
+            }
+        ],
+        chart: {
+            height: 350,
+            type: 'line',
+            dropShadow: {
+                enabled: true,
+                color: '#000',
+                top: 18,
+                left: 7,
+                blur: 10,
+                opacity: 0.2
+            },
+            zoom: {
+                enabled: false
+            },
+            toolbar: {
+                show: false
+            }
+        },
+        colors: ['#77B6EA', '#545454'],
+        dataLabels: {
+            enabled: true,
+        },
+        stroke: {
+            curve: 'smooth'
+        },
+        title: {
+            text: 'Average High & Low Temperature',
+            align: 'left'
+        },
+        grid: {
+            borderColor: '#e7e7e7',
+            row: {
+                colors: ['#f3f3f3', 'transparent'],
+                opacity: 0.5
+            },
+        },
+        markers: {
+            size: 1
+        },
+        xaxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+            title: {
+                text: 'Month'
+            }
+        },
+        yaxis: {
+            title: {
+                text: 'Temperature'
+            },
+            min: 5,
+            max: 40
+        },
+        legend: {
+            position: 'top',
+            horizontalAlign: 'right',
+            floating: true,
+            offsetY: -25,
+            offsetX: -5
+        }
+    };
+
+    var chart = new ApexCharts(document.querySelector("#chart"), options);
+    chart.render();
+});
+</script>
+
 This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.
 
 ## Naming and Path