docs(readme): update supported chart types image

naver · Jul 3, 2023 · 294d220 · 294d220
1 parent 64ca6db
commit 294d220
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ If you have any questions, checkout the previous posts or create a new one at:
 - [Issue with 'question' label](https://github.com/naver/billboard.js/issues?utf8=%E2%9C%93&q=label%3Aquestion)
 
 ## Supported chart types
-<img src="https://naver.github.io/billboard.js/img/chart-types.png?v=10" width=800>
+<img src="https://naver.github.io/billboard.js/img/chart-types.png?v=11" width=800>
 
 ## Download and Installation
 

diff --git a/demo/types/index.html b/demo/types/index.html
@@ -6,7 +6,7 @@
 	 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 	 <title>billboard.js - Supported Chart Types</title>
 	 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/theme/datalab.min.css">
-	 <script src="https://unpkg.com/billboard.js@3.7.0/dist/billboard.pkgd.min.js"></script>
+	 <script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
 	 <link rel="stylesheet" href="./types.css">
 </head>
 <body>

diff --git a/demo/types/types.js b/demo/types/types.js
@@ -25,6 +25,8 @@ const Types = {
         "pie-inner-radius",
         "pie-outer-radius",
         "pie-corner-radius",
+        "gauge-needle",
+        "donut-needle",
         "normalized",
         "combination",
         "multi-axes",
@@ -251,7 +253,82 @@ const Types = {
                     ["data5", 15],
                     ["data6", 35]
                 ];
+            } else if (type === "gauge-needle") {
+                type = "gauge";
+
+                options.data.columns = [
+                    ["a", 20],
+                    ["b", 20],
+                    ["c", 20],
+                    ["d", 20],
+                    ["e", 20]
+                ];
+
+                options.arc = {
+                    needle: {
+                        show: true,
+                        length: 80,
+                        value: 83,
+                        top: {
+                            // rx and ry are the two radii of the ellipse;
+                            // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
+                            rx: 1,
+                            ry: 1,
+                            width: 1
+                          },
+                          bottom: {
+                            // rx and ry are the two radii of the ellipse;
+                            // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
+                            rx: 1,
+                            ry: 1,
+                            width: 10,
+                            len: 10
+                        }
+                    }
+                };
+
+                options.gauge = {
+                    width: 10,
+                    title: "{=NEEDLE_VALUE}%\n",
+                    label: {
+                      format: function(value, ratio, id) { return id; }
+                    }
+                };
+
+            } else if (type === "donut-needle") {
+                type = "donut";
+
+                options.data.columns = [
+                   	["data1", 10],
+                    ["data2", 10],
+                    ["data3", 10],
+                    ["data4", 10],
+                    ["data5", 10],
+                    ["data6", 10]
+                ];
 
+                options.arc = {
+                    needle: {
+                        show: true,
+                        length: 80,
+                        value: 35,
+                        color: "grey",
+                        path: function(length) {
+                            const len = length - 20;
+                            const width = 3;
+                            const path = `M 0 -${len + 20}
+                                L -10 -${len}
+                                L -${width} -${len}
+                                L -${width} 0 
+                                A 0 1 0 0 0 ${width} 0
+                                L ${width} -${len}
+                                L 10 -${len} Z`;
+
+                            return path;
+                        }
+                    }
+                };
+
             } else if (type === "combination") {
                 options.data.types = {
                     data0: "bar",