Alpha

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bsts-test",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/printf83/bsts-test.git"
@@ -44,7 +44,7 @@
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"@printf83/bsts": "^0.2.16",
+		"@printf83/bsts": "^0.3.2",
 		"bootstrap": "^5.3.0",
 		"chart.js": "^4.3.0",
 		"chartjs-plugin-datalabels": "^2.2.0",

src/ctl/example/code.ts

@@ -13,7 +13,7 @@ import {
 } from "./_fn.js";
 import hljs from "highlight.js";
 
-const BSTSCDN = "https://cdn.jsdelivr.net/npm/@printf83/bsts@0.3.1/+esm";
+const BSTSCDN = "https://cdn.jsdelivr.net/npm/@printf83/bsts@0.3.2/+esm";
 const BSCDNJS = ["https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"];
 const BSCDNCSS = [
 	"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css",

src/ctl/main/_db.ts

@@ -145,6 +145,7 @@ export const menu: IMenu[] = [
 			{ label: "Badges", value: "docs/example/badges" },
 			{ label: "Breadcrumbs", value: "docs/example/breadcrumbs" },
 			{ label: "Buttons", value: "docs/example/buttons" },
+			{ label: "Jumbotrons", value: "docs/example/jumbotrons" },
 		],
 	},
 	{
@@ -153,7 +154,7 @@ export const menu: IMenu[] = [
 		item: [
 			{ label: "Animation", value: "docs/bsts/animation" },
 			{ label: "Transform", value: "docs/bsts/transform" },
-			{ label: "Extended color", value: "docs/bsts/extended_color" },
+			{ label: "Extended property", value: "docs/bsts/extended_prop" },
 			{ label: "Chart", value: "docs/bsts/chart" },
 			{ label: "Test", value: "docs/bsts/test" },
 		],

src/docs/_index.ts

@@ -23,9 +23,9 @@ export const doc = (value: string, callback: (result: IContent | null) => void)
 				callback(res.transform);
 			});
 			break;
-		case "docs/bsts/extended_color":
-			bsts.extended_color().then((res) => {
-				callback(res.extended_color);
+		case "docs/bsts/extended_prop":
+			bsts.extended_prop().then((res) => {
+				callback(res.extended_prop);
 			});
 			break;
 		case "docs/bsts/chart":
@@ -95,6 +95,11 @@ export const doc = (value: string, callback: (result: IContent | null) => void)
 				callback(res.buttons);
 			});
 			break;
+		case "docs/example/jumbotrons":
+			example.jumbotrons().then((res) => {
+				callback(res.jumbotrons);
+			});
+			break;
 
 		//--------------------------
 		case "docs/customize/color":

src/docs/bsts/_index.ts

@@ -4,8 +4,8 @@ export const animation = () => {
 export const transform = () => {
 	return import("./transform.js");
 };
-export const extended_color = () => {
-	return import("./extended_color.js");
+export const extended_prop = () => {
+	return import("./extended_prop.js");
 };
 export const chart = () => {
 	return import("./chart.js");

src/docs/bsts/chart.ts

@@ -3,7 +3,17 @@ import { IContent, getContentCode, resetContentIndex } from "../../ctl/main/cont
 import * as e from "../../ctl/example/_index.js";
 import Chart from "chart.js/auto";
 
-const drawValuePlugin = (fontFamily: string | undefined, lineColor: string | undefined) => {
+const drawValuePlugin = (arg: {
+	fontFamily?: string;
+	fontSize?: number;
+	fonstSizeAdjustment?: number;
+	lineColor?: string;
+}) => {
+	arg.fonstSizeAdjustment ??= 0.35;
+	arg.fontFamily ??= "Arial";
+	arg.fontSize ??= 40;
+	arg.lineColor ??= core.getCSSVarHexColor("--bs-body");
+
 	return {
 		id: "bsts_draw_value",
 		afterDraw: (chart: Chart) => {
@@ -14,14 +24,14 @@ const drawValuePlugin = (fontFamily: string | undefined, lineColor: string | und
 			const x = w * 0.5;
 			const y = h * 0.5;
 
-			ctx.font = `40px ${fontFamily ? fontFamily : "Arial"}`;
+			ctx.font = `${arg.fontSize}px ${arg.fontFamily}`;
 			const approxFontHeight = parseInt(ctx.font);
-			ctx.fillStyle = lineColor ? lineColor : "";
+			ctx.fillStyle = arg.lineColor ? arg.lineColor : "#000";
 			ctx.textAlign = "center";
 			ctx.fillText(
 				`${chart.data.datasets[0]?.data[0]?.toString()}%`,
 				x,
-				y + approxFontHeight * 0.35
+				y + approxFontHeight * arg.fonstSizeAdjustment!
 			);
 		},
 	};
@@ -191,22 +201,19 @@ export const chart: IContent = {
 									{
 										textColor: "primary",
 										position: "absolute",
-										bottom: 0,
+										top: 50,
 										start: 50,
 										tMiddle: "x",
 										textAlign: "center",
-										marginBottom: 4,
 									},
 									[
-										new b.caption(
-											{
-												icon: new b.icon({
-													id: "device-hdd-fill",
-												}),
-												marginBottom: 4,
-											},
-											"Storage"
-										),
+										new b.caption({
+											icon: new b.icon({
+												id: "device-hdd-fill",
+												fontSize: 3,
+											}),
+											iconPosition: "bottom",
+										}),
 									]
 								),
 
@@ -232,7 +239,13 @@ export const chart: IContent = {
 														},
 													],
 												},
-												plugins: [drawValuePlugin(fontFamily, lineColor)],
+												plugins: [
+													drawValuePlugin({
+														fontFamily,
+														lineColor,
+														fonstSizeAdjustment: -0.15,
+													}),
+												],
 												options: {
 													aspectRatio: 2,
 													cutout: "80%",
@@ -401,7 +414,13 @@ export const chart: IContent = {
 														},
 													],
 												},
-												plugins: [drawValuePlugin(fontFamily, lineColor)],
+												plugins: [
+													drawValuePlugin({
+														fontFamily,
+														lineColor,
+														fontSize: 60,
+													}),
+												],
 												options: {
 													aspectRatio: 1.75,
 													cutout: "90%",
@@ -571,7 +590,9 @@ export const chart: IContent = {
 														},
 													],
 												},
-												plugins: [drawValuePlugin(fontFamily, lineColor)],
+												plugins: [
+													drawValuePlugin({ fontFamily, lineColor }),
+												],
 												options: {
 													aspectRatio: 2,
 													cutout: "80%",