udp-react-enterprise-component-library 25.18.1-beta.36 → 25.18.1-beta.38

package/dist/AmbientVisualizationCard-Ci615JQM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AmbientVisualizationCard-Ci615JQM.js","names":["useStyles"],"sources":["../src/UI/surfaces/cards/chartDisplayCards/AmbientSplitStatCard.jsx","../src/UI/surfaces/cards/chartDisplayCards/AmbientVisualizationCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography, Divider, Box } from '@material-ui/core';\nimport { SummaryBlock } from '../../../dataDisplay/SummaryBlock';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { LayoutUnit } from '../../../../layout/LayoutUnit';\n\nconst useStyles = makeStyles((theme) => ({\n  rootContainer: {\n    background: '#FFFFFF',\n    boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.08)',\n    borderRadius: '6px',\n    display: 'flex',\n    justifyContent: 'center',\n    flexDirection: 'column'\n  },\n  infoContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    paddingLeft: theme.spacing(3)\n  },\n  divider: {\n    width: '100%',\n    height: '1px'\n  },\n  subContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    width: '100%'\n  },\n  subContainerGraph: {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'flex-start',\n    alignItems: 'start',\n    width: '100%'\n  },\n  graphContainer: {\n    display: 'flex',\n    paddingLeft: theme.spacing(3)\n  }\n}));\n\nconst defaultBlockSpecs = {\n  alertType: 'default',\n  value: '0',\n  startLabel: '$',\n  label: '',\n  labelVariant: 'subtitle2',\n  width: '100%',\n  style: { border: 'none' }\n};\n\n/**\n * `AmbientSplitStatCard` component\n */\nexport const AmbientSplitStatCard = (props) => {\n  const {\n    title,\n    subtitle,\n    cardsSpecs,\n    graphTitle,\n    graphVariant,\n    graphSpec,\n    style\n  } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div className={classes.rootContainer} style={style}>\n      <div className={classes.infoContainer}>\n        <div className={classes.subContainerGraph}>\n          <LayoutUnit unit='xxs' />\n          <Typography\n            variant='h6'\n            style={{\n              fontStyle: 'normal',\n              fontWeight: 500,\n              fontSize: '19px'\n            }}\n          >\n            {title}\n          </Typography>\n          <LayoutUnit unit='nudge' />\n          <SummaryBlock\n            {...(cardsSpecs?.SummaryBlockOne || defaultBlockSpecs)}\n          />\n          <LayoutUnit unit='xxs' />\n          <Typography variant='subtitle2' style={{ fontWeight: 400 }}>\n            {subtitle}\n          </Typography>\n          <LayoutUnit unit='xxs' />\n        </div>\n        <Divider orientation='vertical' />\n        <div className={classes.subContainer}>\n          <SummaryBlock\n            {...(cardsSpecs?.SummaryBlockTwo || defaultBlockSpecs)}\n          />\n          <Divider orientation='horizontal' className={classes.divider} />\n          <SummaryBlock\n            {...(cardsSpecs?.SummaryBlockThree || defaultBlockSpecs)}\n          />\n        </div>\n      </div>\n      <Divider orientation='horizontal' className={classes.divider} />\n      <LayoutUnit unit='nudge' />\n      <div className={classes.graphContainer}>\n        <Typography variant='subtitle1'>{graphTitle}</Typography>\n        <LayoutUnit unit='nudge' />\n      </div>\n      <Box\n        clone\n        overflow='hidden'\n        sx={{\n          width: '100%',\n          minWidth: '100%',\n          '& svg': {\n            width: '100%'\n          }\n        }}\n      >\n        <MuiVegaLite\n          variant={graphVariant || 'verticalBarChart'}\n          background='paper'\n          autoResize\n          actions={false}\n          spec={graphSpec}\n        />\n      </Box>\n      <LayoutUnit unit='xxs' />\n    </div>\n  );\n};\n","import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { AmbientToggleButton } from '../../../inputs/buttons/AmbientToggleButton';\nimport { AmbientToggleButtonGroup } from '../../../inputs/buttons/AmbientToggleButtonGroup';\nimport { TokenGroupItem } from '../../../templates/ui/TokenGroupItem';\nimport { FluentTabPanel } from '../../../navigation/tabs/defaultTabs/FluentTabPanel';\nimport { FluentSimpleTab } from '../../../navigation/tabs/defaultTabs/FluentSimpleTab';\nimport { FluentSimpleTabs } from '../../../navigation/tabs/defaultTabs/FluentSimpleTabs';\nimport { AmbientVisualizer } from '../../../dataDisplay/visualization/AmbientVisualizer';\nimport { AmbientCard } from '../AmbientCard';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    position: 'relative'\n  },\n  item: {\n    marginRight: theme.spacing(2)\n  },\n  tabPanelContents: {\n    marginLeft: theme.spacing(2)\n  },\n  togglePadding: {\n    padding: theme.spacing(2)\n  }\n}));\n\nexport const AmbientVisualizationCard = ({\n  title,\n  toggleList1,\n  toggleList2,\n  toggleList3,\n  tabList,\n  tabContent1,\n  tabContent2,\n  tabContent3\n}) => {\n  const classes = useStyles();\n\n  const [value, setValue] = useState(0);\n  const [toggleValue, setToggleValue] = useState('month');\n\n  const handleChange = (event, newValue) => {\n    setValue(newValue);\n  };\n\n  const selectToggle = (event, nextView) => {\n    setToggleValue(nextView);\n  };\n\n  return (\n    <AmbientCard\n      title={title}\n      customAdornment=' '\n      visualization={\n        <div>\n          <FluentTabPanel value={value} index={0}>\n            <div className={classes.tabPanelContents}>\n              {tabContent1 &&\n                tabContent1.map((item) => {\n                  return (\n                    toggleValue === item.value && (\n                      <div>\n                        <AmbientVisualizer\n                          values={item.values}\n                          visualization={item.chartType}\n                          verticalBarColor={item.verticalBarColor}\n                          verticalBarBand={item.verticalBarBand}\n                          verticalBarXfield={item.verticalBarXfield}\n                          verticalBarXtype={item.verticalBarXtype}\n                          verticalBarYfield={item.verticalBarYfield}\n                          verticalBarYtype={item.verticalBarYtype}\n                          styleThin={item.styleThin}\n                        />\n                      </div>\n                    )\n                  );\n                })}\n            </div>\n          </FluentTabPanel>\n          <FluentTabPanel value={value} index={1}>\n            <div className={classes.tabPanelContents}>\n              {tabContent2 &&\n                tabContent2.map((item) => {\n                  return (\n                    toggleValue === item.value && (\n                      <div>\n                        <AmbientVisualizer\n                          values={item.values}\n                          visualization={item.chartType}\n                          verticalBarColor={item.verticalBarColor}\n                          verticalBarBand={item.verticalBarBand}\n                          verticalBarXfield={item.verticalBarXfield}\n                          verticalBarXtype={item.verticalBarXtype}\n                          verticalBarYfield={item.verticalBarYfield}\n                          verticalBarYtype={item.verticalBarYtype}\n                          styleThin={item.styleThin}\n                        />\n                      </div>\n                    )\n                  );\n                })}\n            </div>\n          </FluentTabPanel>\n          <FluentTabPanel value={value} index={2}>\n            <div className={classes.tabPanelContents}>\n              {tabContent3 &&\n                tabContent3.map((item) => {\n                  return (\n                    toggleValue === item.value && (\n                      <div>\n                        <AmbientVisualizer\n                          values={item.values}\n                          visualization={item.chartType}\n                          verticalBarColor={item.verticalBarColor}\n                          verticalBarBand={item.verticalBarBand}\n                          verticalBarXfield={item.verticalBarXfield}\n                          verticalBarXtype={item.verticalBarXtype}\n                          verticalBarYfield={item.verticalBarYfield}\n                          verticalBarYtype={item.verticalBarYtype}\n                          styleThin={item.styleThin}\n                        />\n                      </div>\n                    )\n                  );\n                })}\n            </div>\n          </FluentTabPanel>\n          <div>\n            <FluentSimpleTabs\n              value={value}\n              onChange={handleChange}\n              aria-label='simple tabs example'\n            >\n              {tabList &&\n                tabList.map((item) => {\n                  return <FluentSimpleTab label={item.label} />;\n                })}\n            </FluentSimpleTabs>\n\n            <FluentTabPanel value={value} index={0}>\n              <div className={classes.togglePadding}>\n                <AmbientToggleButtonGroup\n                  orientation='horizontal'\n                  value={toggleValue}\n                >\n                  {toggleList1 &&\n                    toggleList1.map((item) => {\n                      return (\n                        <AmbientToggleButton\n                          value={item.value}\n                          aria-label={item.ariaLabel}\n                          onMouseUp={item.onClick}\n                          onClick={selectToggle}\n                          className={classes.item}\n                        >\n                          <TokenGroupItem label={item.label} icon={item.icon} />\n                        </AmbientToggleButton>\n                      );\n                    })}\n                </AmbientToggleButtonGroup>\n              </div>\n            </FluentTabPanel>\n            <FluentTabPanel value={value} index={1}>\n              <div className={classes.togglePadding}>\n                <AmbientToggleButtonGroup\n                  orientation='horizontal'\n                  value={toggleValue}\n                >\n                  {toggleList2 &&\n                    toggleList2.map((item) => {\n                      return (\n                        <AmbientToggleButton\n                          value={item.value}\n                          aria-label={item.ariaLabel}\n                          onMouseUp={item.onClick}\n                          onClick={selectToggle}\n                          className={classes.item}\n                        >\n                          <TokenGroupItem label={item.label} icon={item.icon} />\n                        </AmbientToggleButton>\n                      );\n                    })}\n                </AmbientToggleButtonGroup>\n              </div>\n            </FluentTabPanel>\n            <FluentTabPanel value={value} index={2}>\n              <div className={classes.togglePadding}>\n                <AmbientToggleButtonGroup\n                  orientation='horizontal'\n                  value={toggleValue}\n                >\n                  {toggleList3 &&\n                    toggleList3.map((item) => {\n                      return (\n                        <AmbientToggleButton\n                          value={item.value}\n                          aria-label={item.ariaLabel}\n                          onMouseUp={item.onClick}\n                          onClick={selectToggle}\n                          className={classes.item}\n                        >\n                          <TokenGroupItem label={item.label} icon={item.icon} />\n                        </AmbientToggleButton>\n                      );\n                    })}\n                </AmbientToggleButtonGroup>\n              </div>\n            </FluentTabPanel>\n          </div>\n        </div>\n      }\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/AmbientVisualizer-B6kX3oPX.js

@@ -1,627 +0,0 @@
-import { r as getEllipseColor } from "./colorConverter-x64WSLsF.js";
-import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
-import { t as FluentDisplayNumbers_default } from "./FluentDisplayNumbers-0St0jtpd.js";
-import React, { useState } from "react";
-import { Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
-import { MuiVegaLite } from "@material-vega/material-ui";
-import { Vega } from "react-vega";
-
-//#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 { GaugeGraph as n, RatioVisulization as r, AmbientVisualizer as t };
-//# sourceMappingURL=AmbientVisualizer-B6kX3oPX.js.map