udp-react-enterprise-component-library 25.14.1-beta.9 → 25.16.1

package/dist/AmbientVisualizer-BFFwonre.js

@@ -0,0 +1,672 @@
+import { getEllipseColor } from "./colorConverter-sleh0lAZ.js";
+import { LayoutUnit } from "./LayoutUnit-fGVQwt6Y.js";
+import React, { useState } from "react";
+import { Avatar, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { MuiVegaLite } from "@material-vega/material-ui";
+import { Vega } from "react-vega";
+
+//#region src/UI/widgets/FluentComponents/atoms/FluentDisplayNumbers.jsx
+const useStyles$1 = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		flexDirection: "row"
+	},
+	regular: {},
+	small: {},
+	number: {
+		"$regular &": { fontSize: "4rem" },
+		"$small &": { fontSize: 30 }
+	},
+	unit: {
+		marginTop: theme.spacing(5),
+		width: 25,
+		height: 25,
+		"$small &": {
+			marginTop: "16px",
+			width: "16px",
+			height: "16px",
+			"& .MuiTypography-subtitle1": { fontSize: "0.7rem" }
+		}
+	},
+	unitValue: { marginTop: -1.75 }
+}), { name: "FluentDisplayNumbers" });
+const FluentDisplayNumbers = (props) => {
+	const classes = useStyles$1();
+	const { small, number: rawNumber } = props;
+	let no = [rawNumber, null];
+	if (rawNumber > 1e6) {
+		let newNumber = rawNumber / 1e6;
+		no = [Math.round(newNumber * 10) / 10, "M"];
+	} else if (rawNumber > 1e3) {
+		let newNumber = rawNumber / 1e3;
+		no = [Math.round(newNumber * 10) / 10, "k"];
+	}
+	const [number, unit] = no;
+	return /* @__PURE__ */ React.createElement("div", { className: clsx(classes.root, small ? classes.small : classes.regular) }, /* @__PURE__ */ React.createElement(Typography, { className: classes.number }, number), unit && /* @__PURE__ */ React.createElement(Avatar, { className: classes.unit }, /* @__PURE__ */ React.createElement(Typography, {
+		variant: "subtitle1",
+		className: classes.unitValue
+	}, unit)));
+};
+var FluentDisplayNumbers_default = FluentDisplayNumbers;
+
+//#endregion
+//#region src/UI/dataDisplay/visualization/RatioVisulization.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {
+		display: "flex",
+		justifyContent: "center"
+	},
+	wrapper: {
+		display: "flex",
+		flexDirection: "row",
+		height: 150,
+		color: theme.palette.secondary.main
+	}
+}), { next: "RadioVisualization" });
+const RatioVisulization = ({ title, n, m }) => {
+	const [val, setVal] = useState();
+	const classes = useStyles();
+	function number_test(n$1) {
+		if (n$1 - Math.floor(n$1) !== 0) return false;
+		else return true;
+	}
+	console.log(number_test(10));
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", null, val && val.map(((item) => {
+		return item;
+	}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " Student to Teature Ratio "), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xs" }), /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(FluentDisplayNumbers_default, {
+		number: n,
+		label: "Teacher"
+	}), /* @__PURE__ */ React.createElement(FluentDisplayNumbers_default, { number: ":" }), /* @__PURE__ */ React.createElement(FluentDisplayNumbers_default, {
+		number: m,
+		label: "Students"
+	}))));
+};
+
+//#endregion
+//#region src/UI/dataDisplay/visualization/GaugeGraph.jsx
+const GaugeGraph = (props) => {
+	const { title = "", unitLabel = "", legend = "", showTicks = false, ticksNumber = 6, backgroundColor, fillColor = "warning", value = 0, minValue = 0, maxValue = 100, width = 350, height = 180 } = props;
+	const theme = useTheme();
+	const specs = {
+		$schema: "https://vega.github.io/schema/vega/v5.json",
+		width,
+		height,
+		padding: {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0
+		},
+		data: [{
+			name: "ticks",
+			transform: [
+				{
+					type: "sequence",
+					as: "data",
+					start: { signal: "0" },
+					stop: { signal: "(maxValue - minValue) + 0.1" },
+					step: { signal: "(maxValue - minValue)/(ticksNumber-1)" }
+				},
+				{
+					type: "formula",
+					expr: "datum.data + minValue",
+					as: "data_2"
+				},
+				{
+					type: "formula",
+					as: "radianRef",
+					expr: "PI * (datum.data/(maxValue - minValue))"
+				},
+				{
+					type: "formula",
+					as: "x",
+					expr: "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))"
+				},
+				{
+					type: "formula",
+					as: "y",
+					expr: "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))"
+				}
+			]
+		}],
+		signals: [
+			{
+				name: "centerX",
+				update: "width/2"
+			},
+			{
+				name: "centerY",
+				update: "height/2 + outerRadius/2"
+			},
+			{
+				name: "outerRadius",
+				update: "targetValue ? radiusRef * 0.9 : radiusRef * 0.95"
+			},
+			{
+				name: "radiusRef",
+				update: "max(width/2, height/2)"
+			},
+			{
+				name: "innerRadius",
+				update: "outerRadius - outerRadius * 0.25"
+			},
+			{
+				name: "targetValue",
+				value
+			},
+			{
+				name: "backgroundColor",
+				value: backgroundColor ? lighten(getEllipseColor(theme, backgroundColor), .6) : lighten(theme.palette.secondary.main, .6)
+			},
+			{
+				name: "ticksNumber",
+				value: ticksNumber
+			},
+			{
+				name: "mainValue",
+				value
+			},
+			{
+				name: "title",
+				value: title
+			},
+			{
+				name: "unit",
+				value: unitLabel
+			},
+			{
+				name: "usedValue",
+				update: "min(max(minValue, mainValue), maxValue)"
+			},
+			{
+				name: "minValue",
+				value: minValue
+			},
+			{
+				name: "maxValue",
+				value: maxValue
+			},
+			{
+				name: "fillColor",
+				value: fillColor ? getEllipseColor(theme, fillColor) : theme.palette.secondary.main
+			},
+			{
+				name: "ticksColor",
+				value: theme.palette.text.primary
+			},
+			{
+				name: "showTicks",
+				value: showTicks
+			},
+			{
+				name: "fontFactor",
+				update: "(radiusRef/5)/25"
+			},
+			{
+				name: "hasTarget",
+				update: "isNumber(targetValue) === true"
+			},
+			{
+				name: "targetRule",
+				update: "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0"
+			},
+			{
+				name: "showTarget",
+				value: true
+			},
+			{
+				name: "targetStatus",
+				update: "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1"
+			},
+			{
+				name: "lowIsGood",
+				value: false
+			},
+			{
+				name: "legend",
+				value: legend
+			}
+		],
+		scales: [
+			{
+				name: "gaugeScale",
+				type: "linear",
+				domain: {
+					data: "ticks",
+					field: "data_2"
+				},
+				zero: false,
+				range: { signal: "[-PI/2, PI/2]" }
+			},
+			{
+				name: "tickScale",
+				type: "linear",
+				domain: {
+					data: "ticks",
+					field: "data"
+				},
+				range: { signal: "[PI/2, -PI/2]" }
+			},
+			{
+				name: "targetStatusColorScale",
+				domain: [
+					-1,
+					0,
+					1
+				],
+				range: [
+					"red",
+					"orange",
+					"green"
+				]
+			}
+		],
+		axes: [],
+		legends: [],
+		marks: [
+			{
+				type: "arc",
+				name: "gauge",
+				encode: { enter: {
+					x: { signal: "centerX" },
+					y: { signal: "centerY" },
+					startAngle: { signal: "-PI/2" },
+					endAngle: { signal: "PI/2" },
+					outerRadius: { signal: "outerRadius" },
+					innerRadius: { signal: "innerRadius" },
+					fill: { signal: "backgroundColor" }
+				} }
+			},
+			{
+				type: "arc",
+				encode: {
+					enter: { startAngle: { signal: "-PI/2" } },
+					update: {
+						x: { signal: "centerX" },
+						y: { signal: "centerY" },
+						innerRadius: { signal: "innerRadius" },
+						outerRadius: { signal: "outerRadius" },
+						endAngle: {
+							scale: "gaugeScale",
+							signal: "usedValue"
+						},
+						fill: { signal: "fillColor" }
+					}
+				}
+			},
+			{
+				type: "arc",
+				description: "ticks on the arc",
+				from: { data: "ticks" },
+				encode: { enter: {
+					x: { signal: "centerX" },
+					y: { signal: "centerY" },
+					outerRadius: { signal: "outerRadius" },
+					innerRadius: { signal: "outerRadius - (radiusRef*0.05)" },
+					startAngle: {
+						scale: "tickScale",
+						field: "data"
+					},
+					endAngle: {
+						scale: "tickScale",
+						field: "data"
+					},
+					stroke: { signal: "ticksColor" },
+					opacity: { signal: "showTicks ? 1 : 0" }
+				} }
+			},
+			{
+				type: "text",
+				from: { data: "ticks" },
+				encode: {
+					enter: {
+						align: { value: "center" },
+						baseline: { value: "alphabetic" }
+					},
+					update: {
+						text: { signal: "format(datum.data_2, '.0f')" },
+						x: { field: "x" },
+						y: { field: "y" },
+						fontSize: { signal: "fontFactor* 11" },
+						fill: { signal: "ticksColor" },
+						opacity: { signal: "showTicks ? 1 : 0" }
+					}
+				}
+			},
+			{
+				type: "text",
+				description: "displayed min value at the bottom left of gauge when showTicks is false",
+				from: { data: "gauge" },
+				encode: {
+					enter: {
+						align: { value: "center" },
+						baseline: { value: "top" }
+					},
+					update: {
+						text: { signal: "minValue" },
+						x: { signal: "centerX - outerRadius + (outerRadius - innerRadius)/2" },
+						y: {
+							signal: "centerY",
+							offset: { signal: "fontFactor*5" }
+						},
+						fontSize: { signal: "fontFactor * 11" },
+						opacity: { signal: "showTicks ? 0 : 1" }
+					}
+				}
+			},
+			{
+				type: "text",
+				description: "displayed max value at the bottom right of gauge when showTicks is false",
+				from: { data: "gauge" },
+				encode: {
+					enter: {
+						align: { value: "center" },
+						baseline: { value: "top" }
+					},
+					update: {
+						text: { signal: "maxValue" },
+						x: { signal: "centerX + innerRadius + (outerRadius - innerRadius)/2" },
+						y: {
+							signal: "centerY",
+							offset: { signal: "fontFactor*5" }
+						},
+						fontSize: { signal: "fontFactor * 11" },
+						opacity: { signal: "showTicks ? 0 : 1" }
+					}
+				}
+			},
+			{
+				type: "text",
+				description: "displayed a title for the chart ",
+				name: "titleLabel",
+				encode: {
+					enter: {
+						x: { signal: "centerX" },
+						baseline: { value: "top" },
+						align: { value: "center" }
+					},
+					update: {
+						text: { signal: "title" },
+						y: {
+							signal: "centerY",
+							offset: { signal: "fontFactor * -50" }
+						},
+						fontSize: { signal: "fontFactor * 14" },
+						fill: { signal: "fillColor" }
+					}
+				}
+			},
+			{
+				type: "text",
+				description: "displayed main value at the bottom center of the gauge ",
+				name: "gaugeValue",
+				encode: {
+					enter: {
+						x: { signal: "centerX" },
+						baseline: { value: "top" },
+						align: { value: "center" }
+					},
+					update: {
+						text: { signal: "format(mainValue, '.1f') + unit " },
+						y: {
+							signal: "centerY",
+							offset: { signal: "fontFactor * -25" }
+						},
+						fontSize: { signal: "fontFactor * 20" }
+					}
+				}
+			},
+			{
+				type: "text",
+				name: "targetDiff",
+				description: "add status with symbol and difference and percentage",
+				from: { data: "gaugeValue" },
+				encode: {
+					enter: {
+						x: { signal: "centerX" },
+						align: { value: "center" },
+						baseline: { value: "top" }
+					},
+					update: {
+						text: { signal: "legend" },
+						y: {
+							signal: "centerY",
+							offset: { signal: "fontFactor * -4" }
+						},
+						fontSize: { signal: "fontFactor * 10" },
+						opacity: { signal: " targetRule ? 1 : 0" }
+					}
+				}
+			}
+		]
+	};
+	return /* @__PURE__ */ React.createElement(Vega, {
+		spec: specs,
+		actions: false
+	});
+};
+
+//#endregion
+//#region src/UI/dataDisplay/visualization/AmbientVisualizer.jsx
+const AmbientVisualizer = ({ values, visualization, verticalBarWidth = 70, verticalBarColor = "primary", verticalBarBand = .9, verticalBarBandThin = .1, styleThin, verticalBarXfield = "category", verticalBarXtype = "nominal", verticalBarYfield = "amount", verticalBarYtype = "quantitative", horizontalBarWidth = 265, horizontalBarHeight = 35, horizontalBarColor = "primary", horizontalBarBand = .7, horizontalBarBandThin = .1, horizontalBarXfield = "amount", horizontalBarXtype = "quantitative", horizontalBarYfield = "category", horizontalBarYtype = "nominal", areaLineHeight = 150, areaLineWidth = 350, areaLineXtimeUnit = "yearmonth", areaLineXfield = "date", areaLineXtype = "temporal", areaLineXaxisFormat = "%Y", areaLineYaggergate = "sum", areaLineYfield = "count", areaLineType = "quantitative", layeredChartLayer, donutChartInnerRadius = 50, pieThetaField, pieThetaType = "quantitative", pieColorField, pieColorType = "nominal", tooltip, encodingTooltip = null, chartWidth, chartHeight, xTitle, yTitle, linePoint, lineXtimeUnit, lineXfield, lineXtype, lineYaggergate, lineYfield, lineYtype, lineColorField, lineColorType = "nominal", vegaLiteSpecProps = {}, gaugeTitle = "", gaugeUnitLabel = "", gaugeLegend = "", gaugeShowTicks = false, gaugeTicksNumber, gaugeBackgroundColor = "secondary", gaugeFillColor = "warning", gaugeValue = 0, gaugeMinValue = 0, gaugeMaxValue = 100 }) => {
+	const theme = useTheme();
+	const verticalBar = /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "verticalBarChart",
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			width: { step: verticalBarWidth },
+			data: { values },
+			mark: "bar",
+			encoding: {
+				color: { value: verticalBarColor === "primary" ? theme.palette.primary.main : theme.palette.secondary.main },
+				x: {
+					field: verticalBarXfield,
+					type: verticalBarXtype,
+					axis: { ticks: false },
+					band: styleThin ? verticalBarBandThin : verticalBarBand
+				},
+				y: {
+					field: verticalBarYfield,
+					type: verticalBarYtype,
+					axis: { format: "" }
+				},
+				tooltip: encodingTooltip
+			},
+			...vegaLiteSpecProps
+		}
+	});
+	const horizontalBar = /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "horizontalBarChart",
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			height: { step: horizontalBarHeight },
+			width: horizontalBarWidth,
+			data: { values },
+			mark: "bar",
+			encoding: {
+				color: { value: theme.palette.secondary.main },
+				x: {
+					field: horizontalBarXfield,
+					type: horizontalBarXtype,
+					axis: { format: "s" }
+				},
+				y: {
+					field: horizontalBarYfield,
+					type: horizontalBarYtype,
+					band: styleThin ? horizontalBarBandThin : horizontalBarBand
+				},
+				tooltip: encodingTooltip
+			},
+			...vegaLiteSpecProps
+		}
+	});
+	const areaLine = /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "areaLineChart",
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v4.json",
+			width: areaLineWidth,
+			height: areaLineHeight,
+			data: { values },
+			mark: "area",
+			encoding: {
+				x: {
+					timeUnit: areaLineXtimeUnit,
+					field: areaLineXfield,
+					type: areaLineXtype,
+					axis: { format: areaLineXaxisFormat }
+				},
+				y: {
+					aggregate: areaLineYaggergate,
+					field: areaLineYfield,
+					type: areaLineType
+				},
+				tooltip: encodingTooltip
+			},
+			...vegaLiteSpecProps
+		}
+	});
+	const numberRatio = /* @__PURE__ */ React.createElement(RatioVisulization, {
+		m: 15,
+		n: 1
+	});
+	const layeredChart = /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "verticalBarChart",
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v5.json",
+			width: chartWidth,
+			height: chartHeight,
+			autosize: "fit",
+			data: values ? { values } : null,
+			layer: layeredChartLayer,
+			config: { legend: {
+				orient: "bottom",
+				layout: { bottom: { anchor: "middle" } }
+			} },
+			...vegaLiteSpecProps
+		}
+	});
+	const pie = /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: visualization === "pie" ? "pieChart" : "donutChart",
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v5.json",
+			width: chartWidth,
+			height: chartHeight,
+			data: { values },
+			config: { legend: {
+				orient: "bottom",
+				layout: { bottom: { anchor: "middle" } }
+			} },
+			mark: {
+				type: "arc",
+				innerRadius: visualization === "pie" ? 0 : donutChartInnerRadius,
+				tooltip
+			},
+			encoding: {
+				theta: {
+					field: pieThetaField,
+					type: pieThetaType
+				},
+				color: {
+					field: pieColorField,
+					type: pieColorType
+				},
+				tooltip: encodingTooltip
+			},
+			...vegaLiteSpecProps
+		}
+	});
+	const line = /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "lineChart",
+		actions: false,
+		spec: {
+			$schema: "https://vega.github.io/schema/vega-lite/v5.json",
+			width: chartWidth,
+			height: chartHeight,
+			autosize: "fit",
+			data: { values },
+			mark: {
+				type: "line",
+				point: linePoint,
+				tooltip
+			},
+			config: { legend: {
+				orient: "bottom",
+				layout: { bottom: { anchor: "middle" } }
+			} },
+			encoding: {
+				x: {
+					field: lineXfield,
+					type: lineXtype,
+					timeUnit: lineXtimeUnit,
+					title: xTitle
+				},
+				y: {
+					field: lineYfield,
+					type: lineYtype,
+					title: yTitle,
+					aggregate: lineYaggergate
+				},
+				color: lineColorField ? {
+					field: lineColorField,
+					type: lineColorType
+				} : null,
+				tooltip: encodingTooltip
+			},
+			...vegaLiteSpecProps
+		}
+	});
+	const gauge = /* @__PURE__ */ React.createElement(GaugeGraph, {
+		title: gaugeTitle,
+		unitLabel: gaugeUnitLabel,
+		legend: gaugeLegend,
+		showTicks: gaugeShowTicks,
+		ticksNumber: gaugeTicksNumber,
+		backgroundColor: gaugeBackgroundColor,
+		fillColor: gaugeFillColor,
+		value: gaugeValue,
+		minValue: gaugeMinValue,
+		maxValue: gaugeMaxValue,
+		width: chartWidth,
+		height: chartHeight
+	});
+	let type = "";
+	switch (visualization) {
+		case "verticalBar":
+			type = verticalBar;
+			break;
+		case "horizontalBar":
+			type = horizontalBar;
+			break;
+		case "areaLine":
+			type = areaLine;
+			break;
+		case "numberRatio":
+			type = numberRatio;
+			break;
+		case "layeredChart":
+			type = layeredChart;
+			break;
+		case "donut":
+			type = pie;
+			break;
+		case "pie":
+			type = pie;
+			break;
+		case "line":
+			type = line;
+			break;
+		case "gauge":
+			type = gauge;
+			break;
+		default:
+	}
+	return type;
+};
+
+//#endregion
+export { AmbientVisualizer, FluentDisplayNumbers_default, GaugeGraph, RatioVisulization };
+//# sourceMappingURL=AmbientVisualizer-BFFwonre.js.map