udp-react-enterprise-component-library 25.16.1 → 25.16.2-beta.2

package/dist/AmbientVisualizer-BFFwonre.js

@@ -1,672 +0,0 @@
-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