chore(demo): add new demos

naver · May 27, 2024 · 6846999 · 6846999
1 parent 8b1a5f1
commit 6846999
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 2 deletions.
diff --git a/demo/chart.js b/demo/chart.js
@@ -160,7 +160,6 @@ var billboardDemo = {
 		}
 
 		this.$description.innerHTML = desc.description || (Array.isArray(desc) && desc[0].description) || "";
-
 		this.$codeArea.style.display = "block";
 
 		// remove selected class
@@ -237,7 +236,7 @@ var billboardDemo = {
 
 		// UMD
 		code.data = code.data.join("")
-			.replace(/"(area|area-line-range|area-spline|area-spline-range|area-step|bar|bubble|candlestick|donut|gauge|line|pie|polar|radar|scatter|spline|step|treemap|selection|subchart|zoom)(\(\))?",?/g, function(match, p1, p2, p3, offset, string) {
+			.replace(/"(area|area-line-range|area-spline|area-spline-range|area-step|bar|bubble|candlestick|donut|funnel|gauge|line|pie|polar|radar|scatter|spline|step|treemap|selection|subchart|zoom)(\(\))?",?/g, function(match, p1, p2, p3, offset, string) {
 				var module = camelize(p1);
 
 				code.esm.indexOf(module) === -1 &&

diff --git a/demo/demo.js b/demo/demo.js
@@ -414,6 +414,79 @@ var demos = {
 				];
 			}
 		},
+		FunnelChart: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30],
+							["data2", 45],
+							["data3", 25],
+							["data4", 55]
+						],
+						type: "funnel",
+						order: null,
+						labels: {
+							format: function(v, id, i, texts) {
+						return id;
+							}
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 11300],
+							["data2", 12245],
+							["data3", 11125],
+							["data4", 13355],
+							["data5", 18562]
+						],
+						type: "funnel",
+						labels: true,
+						order: "asc"
+					},
+					funnel: {
+						neck: {
+							width: 200,
+							height: 50
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 130],
+							["data2", 245],
+							["data3", 425],
+							["data4", 325],
+							["data5", 555]
+						],
+						type: "funnel",
+						order: "desc",
+						labels: {
+							format: function(v, id, i, texts) {
+						return `${id} ${v}`;
+							}
+						}
+					},
+					funnel: {
+						neck: {
+							width: {
+								ratio: 0.3
+							},
+							height: {
+								ratio: 0.5
+							}
+						}
+					}
+				}
+			},
+		],
 		GaugeChart: {
 			options: {
 				data: {
@@ -1177,6 +1250,99 @@ var demos = {
 				}
 			}
 		},
+		AxisTooltip: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 300, 350, 300, 120, 220, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "line",
+						axes: {
+							data1: "y",
+							data2: "y2"		
+						}
+					},
+					axis: {
+						tooltip: {
+							backgroundColor: {
+								x: "red",
+								y: "blue",
+								y2: "green"
+							}
+						},
+						y2: {
+							show: true
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 300, 350, 300, 120, 220, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "line"
+					},
+					axis: {
+						rotated: true,
+						tooltip: {
+							backgroundColor: {
+								x: "red",
+								y: "blue"
+							}
+						},
+						y2: {
+							show: true
+						}
+					}
+				}
+			}		
+		],
+		ForceAsSingle: [
+			{
+				description: "Force the x axis to interact as single rather than multiple x axes.",
+				options: {
+					data: {
+						columns: [
+							["data1", 300, 350, 300, 120, 220, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "scatter"
+					},
+					axis: {
+						x: {
+							forceAsSingle: true
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["x1", 1, 3, 6, 7, 9],
+							["x2", 2, 4, 6, 8, 10],
+							["data1", 300, 350, 300, 120, 220, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "line",
+						xs: {
+							data1: "x1",
+							data2: "x2"
+						}
+					},
+					axis: {
+						x: {
+							forceAsSingle: true
+						}
+					}
+				}
+			},
+		],
 		CategoryAxis: {
 			options: {
 				data: {

diff --git a/demo/index.html b/demo/index.html
@@ -141,6 +141,7 @@ <h4>Supported chart types</h4>
                                     <li><a href="#Chart.CandlestickChart">Candlestick</a></li>
                                     <li><a href="#Chart.CombinationChart">Combination</a></li>
                                     <li><a href="#Chart.DonutChart">Donut</a></li>
+                                    <li><a href="#Chart.FunnelChart">Funnel</a></li>
                                     <li><a href="#Chart.GaugeChart">Gauge</a></li>
                                     <li><a href="#Chart.LineChart">Line</a></li>
                                     <li><a href="#Chart.PieChart">Pie</a></li>