Merge branch 'master' into next

.github/workflows/ci.yml

@@ -25,6 +25,7 @@ jobs:
       run: |
         npm config set package-lock false
         npm install --save --legacy-peer-deps
+        npx playwright install
 
     - name: Lint
       run: npm run lint

.gitignore

@@ -2,6 +2,7 @@
 *.log
 *.iml
 package-lock.json
+.yarn/*
 /*.css
 /*.html
 /*.js
@@ -12,3 +13,4 @@ package-lock.json
 /doc
 /monitor
 /node_modules
+/test/**/__screenshots__

.husky/pre-commit

@@ -1,3 +1,2 @@
-
 npm run format
 npm run lint-staged

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

README.md

@@ -74,8 +74,9 @@ You can download the compressed files for production
   - https://naver.github.io/billboard.js/release/[VERSION]/dist/billboard.min.css
 
 ### Packaged version (with D3.js inclusion)
-> Packaged version is not an official distribution.
-> It's to provide an easy way to load 'billboard.js' with dependency.
+
+> ⚠️ Packaged version is not an official distribution.
+> It's to provide an easy way to load 'billboard.js' with dependencies.
 
  - **Latest**
     - https://naver.github.io/billboard.js/release/latest/dist/billboard.pkgd.js
@@ -87,6 +88,7 @@ You can download the compressed files for production
 </details>
 
 ### Themes
+> [!NOTE]
 > If you want apply themes, simply load one of the theme css file provided instead of the default css file.
 > - [Screenshot Preview](https://github.com/naver/billboard.js/wiki/Themes)
 
@@ -123,6 +125,7 @@ With nightly, you can try upcoming changes prior the official release.
 
 - https://github.com/naver/billboard.js/tree/nightly/dist
 
+> [!NOTE]
 > The version info will be given as the build datetime: `x.x.x-nightly-yyyymmddhhmmss`
 
 There're two ways to install from `nightly` branch directly.
@@ -170,6 +173,7 @@ If you want to use 'billboard.js' without installation, load files directly from
 
 ## Supported Browsers
 
+> [!IMPORTANT]
 > - Basically will work on all SVG and ES6+ supported browsers.
 > - <sup>*</sup>Notes for legacy browsers:
 >   - Recommended to use `packaged` build or construct your own build following [`How to bundle for legacy browsers?`](https://github.com/naver/billboard.js/wiki/How-to-bundle-for-legacy-browsers%3F) instruction.
@@ -184,6 +188,8 @@ If you want to use 'billboard.js' without installation, load files directly from
  4.x ~ 5.x | 1.x ~ 2.x
  6.x+ | 3.x+
 
+# Getting Started
+
 Load billboard.js after D3.js.
 
 ```html
@@ -201,6 +207,7 @@ Load billboard.js after D3.js.
 ```
 
 or use importing ESM.
+> [!TIP]
 > 📌 Also check: [How to load as ESM directly from the browser?](https://github.com/naver/billboard.js/wiki/How-to-load-as-ESM-directly-from-the-browser%3F)
 
 ```js
@@ -219,7 +226,7 @@ import "billboard.js/dist/billboard.css";
 import "billboard.js/dist/theme/insight.css"
 ```
 
-> **Note**
+> [!NOTE]
 > - For migration from C3.js, checkout the [migration guide](https://github.com/naver/billboard.js/wiki/How-to-migrate-from-C3.js%3F).
 > - If has an issue bundling for legacy browsers, checkout "[How to bundle for legacy browsers?](https://github.com/naver/billboard.js/wiki/How-to-bundle-for-legacy-browsers%3F)".
 

demo/demo.js

@@ -3517,28 +3517,51 @@ d3.select(".chart_area")
 				}
 			}
 		},
-		LegendFormat: {
-			description: "Stay hovering on each of legend items to see full data name text.",
-			options: {
-				data: {
-					columns: [
-						["SELECT idx, title, date, count from TEST_TABLE WHERE idx=5", 2, 3, 5],
-						["very long long data name needed to be", 1, 2, 2],
-					],
-					type: "line"
-				},
-				legend: {
-					format: function(id) {
-						if (id.length > 5) {
-							id = id.substr(0, 5) + "...";
-						}
-
-						return id;
+		LegendFormat: [
+			{
+				description: "Stay hovering on each of legend items to see full data name text.",
+				options: {
+					data: {
+						columns: [
+							["SELECT idx, title, date, count from TEST_TABLE WHERE idx=5", 2, 3, 5],
+							["very long long data name needed to be", 1, 2, 2],
+						],
+						type: "line"
 					},
-					tooltip: true
+					legend: {
+						format: function(id) {
+							if (id.length > 5) {
+								id = id.substr(0, 5) + "...";
+							}
+
+							return id;
+						},
+						tooltip: true
+					}
+				}
+			}, 
+			{
+				options: {
+					data: {
+						names: {
+							"data1": "Detailed Name",
+							"data2": "Name Detailed"
+						},
+						columns: [
+							["data1", 71.4],
+							["data2", 10],
+						],
+						type: "gauge"
+					},
+					legend: {
+						format: function(id, dataId) {
+						return id === "Name Detailed" ? dataId : id;
+    },
+						tooltip: true
+					}
 				}
 			}
-		},
+		],
 		LegendItemInteraction: [
 			{
 				description: "<b>Single click + AltKey(Win)/optionKey(Mac)</b><br>or <b>Double click</b> legend item to show/hide data series",