udp-react-enterprise-component-library 25.18.1-beta.6 → 25.18.1-beta.60

package/dist/UI/utilityDisplay/utilityHeader/index.js

@@ -1,17 +1,5 @@
-import "../../../FluentIcon-DjE8A5DC.js";
-import "../../../FluentIconButton-CtN4xdO_.js";
-import "../../../shellStore-C8zfPsZ-.js";
-import "../../../PrimaryActionButton-D21P13f_.js";
-import "../../../teleporterStore-CjUFtATo.js";
 import { n as TeleportSource, t as PAHAdditionalRightComponent } from "../../../PAHAdditionalRightComponent-DMOU9Mho.js";
-import "../../../AmbientPopoverMenuItem-BZuX43zJ.js";
-import "../../../LayoutUnit-D4jJvonh.js";
-import "../../../StandardTitle-UHYnVDSe.js";
-import { n as useAllTeleporters, r as PAHExport, t as PrimaryActionHeader } from "../../../PrimaryActionHeader-Csy_2HwQ.js";
-import "../../../StatusChip-DZAN88VU.js";
-import "../../../UdpTabs-CB8ez2EV.js";
-import "../../../FluentSimpleTabs-N5j1mM48.js";
-import { n as UtilityTabHeader, t as PAHAdditionalTitleComponent } from "../../../PAHAdditionalTitleComponent-x8vjiCvq.js";
-import "../../../utilityHeader-CluhKbl1.js";
+import { n as useAllTeleporters, r as PAHExport, t as PrimaryActionHeader } from "../../../PrimaryActionHeader-DBJpROPu.js";
+import { n as UtilityTabHeader, t as PAHAdditionalTitleComponent } from "../../../utilityHeader-XiCwxUED.js";
 
 export { PAHAdditionalRightComponent, PAHAdditionalTitleComponent, PAHExport, PrimaryActionHeader, TeleportSource, UtilityTabHeader, useAllTeleporters };

package/dist/UI/widgets/FluentComponents/atoms/index.js

@@ -1,4 +1 @@
-import "../../../../FluentStatsSnippet-BuDlbH0Q.js";
-import "../../../../FluentDisplayNumbers-0St0jtpd.js";
-
 export {  };

package/dist/UI/widgets/FluentComponents/index.js

@@ -1,6 +1 @@
-import "../../../FluentIcon-DjE8A5DC.js";
-import "../../../FUIMenuItem-BvpTageE.js";
-import "../../../ChartSummaryToggle-XZozMVzu.js";
-import "../../../SimpleTable-qZ0yJQ7F.js";
-
 export {  };

package/dist/UI/widgets/FluentComponents/molecules/index.js

@@ -1,7 +1 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../FluentDisplayNumbers-0St0jtpd.js";
-import "../../../../FluentStatNumber-DOSQBt5f.js";
-import "../../../../FluentSecondaryStatNumber-jvROy309.js";
-import "../../../../FluentTimeline-CiDvNDHN.js";
-
 export {  };

package/dist/UI/widgets/index.js

@@ -1,19 +1,3 @@
-import "../../FluentButton-3xMbN_Vs.js";
-import "../../FluentIcon-DjE8A5DC.js";
-import "../../colors-BONxjrOE.js";
-import "../../colorConverter-x64WSLsF.js";
-import "../../LayoutUnit-D4jJvonh.js";
-import "../../FUICard-BuGJ_WAu.js";
-import "../../FUISquareIconButton-DwTSTnBV.js";
-import "../../FluentCard-DyXAmC_f.js";
-import "../../useId-I-OmRBmB.js";
-import "../../FUIMenuItem-BvpTageE.js";
-import "../../AmbientCardTitle-CvXW2qf0.js";
-import "../../QuickViewCard-odqSWVkJ.js";
-import "../../useItemSubCard-1W60iQe0.js";
-import "../../WidgetCard-DZYTvG7e.js";
-import "../../EmptyStateDisplay-8tzDAwMl.js";
-import { t as ItemsWidgetCard } from "../../ItemsWidgetCard-DLtqNe7Q.js";
-import "../../widgets-BbScraXi.js";
+import { t as ItemsWidgetCard } from "../../widgets-BCHN3J80.js";
 
 export { ItemsWidgetCard };

package/dist/UI/widgets/library/BarChartWidget/index.js

@@ -1,12 +1,3 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../FUICard-BuGJ_WAu.js";
-import "../../../../FUISquareIconButton-DwTSTnBV.js";
-import "../../../../FluentCard-DyXAmC_f.js";
-import "../../../../useId-I-OmRBmB.js";
-import "../../../../FUIMenuItem-BvpTageE.js";
-import "../../../../WidgetCard-DZYTvG7e.js";
-import "../../../../FluentStatsSnippet-BuDlbH0Q.js";
-import "../../../../ConvertISODate-TfG2U4Iu.js";
-import { i as params, n as BarChartWidget_default, r as layout } from "../../../../BarChartWidget-C3BA8Z02.js";
+import { i as params, n as BarChartWidget_default, r as layout } from "../../../../BarChartWidget-BYJS3vMQ.js";
 
 export { BarChartWidget_default as default, layout, params };

package/dist/UI/widgets/library/BubbleWidget/index.js

@@ -1,12 +1,3 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../FUICard-BuGJ_WAu.js";
-import "../../../../FUISquareIconButton-DwTSTnBV.js";
-import "../../../../FluentCard-DyXAmC_f.js";
-import "../../../../useId-I-OmRBmB.js";
-import "../../../../FUIMenuItem-BvpTageE.js";
-import "../../../../WidgetCard-DZYTvG7e.js";
-import "../../../../FluentStatsSnippet-BuDlbH0Q.js";
-import "../../../../FluentTimeline-CiDvNDHN.js";
-import { i as params, n as BubbleWidget_default, r as layout } from "../../../../BubbleWidget-DnwPnLnw.js";
+import { i as params, n as BubbleWidget_default, r as layout } from "../../../../BubbleWidget-FNCYe8So.js";
 
 export { BubbleWidget_default as default, layout, params };

package/dist/UI/widgets/library/CircleGaugeWidget/index.js

@@ -1,8 +1,111 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../colors-BONxjrOE.js";
-import "../../../../colorConverter-x64WSLsF.js";
-import "../../../../useSplitDecimal-CsxaeRaU.js";
-import "../../../../SummaryBlock-C--ByR2X.js";
-import { t as CircleGaugeWidget } from "../../../../CircleGaugeWidget-BvGEUXI1.js";
+import { t as SummaryBlock } from "../../../../SummaryBlock-BjUNDl4q.js";
+import React from "react";
+import { Box, Typography, makeStyles } from "@material-ui/core";
+import { PropTypes as PropTypes$1 } from "prop-types";
 
-export { CircleGaugeWidget };
+//#region src/UI/widgets/library/CircleGaugeWidget/CircleGaugeWidget.jsx
+const useStyles = makeStyles((theme) => ({
+	circle: {
+		width: (props) => props.width || "134px",
+		minHeight: (props) => props.height || "134px",
+		borderRadius: "50%",
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "8px 0px",
+		background: (props) => props?.background || theme.palette.background.paper,
+		border: (props) => props?.borderColor ? `2px solid ${props.borderColor}` : `2px solid #BDBDBD`
+	},
+	cardStat: {
+		fontSize: "1.5rem",
+		fontWeight: "700",
+		color: "#000",
+		textAlign: "center",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "0px",
+		width: (props) => props.width || "134px",
+		height: "50%"
+	},
+	primaryText: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "0px",
+		gap: "8px",
+		fontWeight: "400",
+		fontSize: "22px",
+		fontStyle: "normal",
+		width: (props) => props.width || "134px",
+		height: "32px",
+		margin: "-4px 0px"
+	},
+	secondaryText: {
+		fontStyle: "normal",
+		fontWeight: "400",
+		fontSize: "12px",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		padding: "0px",
+		width: (props) => props.width || "134px",
+		height: "20px",
+		color: "rgba(0, 0, 0, 0.6)"
+	},
+	keySummary: {
+		fontSize: "1rem",
+		fontWeight: "700",
+		color: "#000",
+		textAlign: "center",
+		lineHeight: "50px",
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: "0px",
+		width: (props) => props.width || "134px",
+		height: "50%",
+		borderTop: (props) => props?.borderColor ? `2px solid ${props.borderColor}` : `2px solid #BDBDBD`
+	}
+}));
+const DEFAULT_SUMMARY_BLOCK = {
+	border: "none",
+	width: "69px",
+	height: "32px",
+	fontStyle: "normal",
+	fontWeight: 400,
+	fontSize: "22px",
+	label: { color: "#000" }
+};
+const CircleGaugeWidget = (props) => {
+	const { value, label, textVariant = "h5", secondaryValue, secondaryStartLabel, background, style: styleProps } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement(Box, {
+		className: classes.circle,
+		style: styleProps
+	}, /* @__PURE__ */ React.createElement(Box, { className: classes.cardStat }, /* @__PURE__ */ React.createElement(Typography, { className: classes.primaryText }, value), /* @__PURE__ */ React.createElement(Typography, { className: classes.secondaryText }, label)), /* @__PURE__ */ React.createElement(Box, { className: classes.keySummary }, secondaryValue && /* @__PURE__ */ React.createElement(SummaryBlock, {
+		value: secondaryValue,
+		startLabel: secondaryStartLabel || "",
+		textVariant,
+		backgroundColor: background,
+		style: styleProps?.summaryBlock || DEFAULT_SUMMARY_BLOCK
+	})));
+};
+CircleGaugeWidget.propTypes = {
+	value: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]).isRequired,
+	label: PropTypes$1.string,
+	textVariant: PropTypes$1.string,
+	secondaryValue: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]).isRequired,
+	secondaryStartLabel: PropTypes$1.string,
+	background: PropTypes$1.string,
+	style: PropTypes$1.object
+};
+
+//#endregion
+export { CircleGaugeWidget };
+//# sourceMappingURL=index.js.map

package/dist/UI/widgets/library/CircleGaugeWidget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["PropTypes"],"sources":["../../../../../src/UI/widgets/library/CircleGaugeWidget/CircleGaugeWidget.jsx"],"sourcesContent":["import React from 'react';\nimport { Box, Typography, makeStyles } from '@material-ui/core';\nimport { SummaryBlock } from '../../../dataDisplay/SummaryBlock';\nimport { PropTypes } from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  circle: {\n    width: (props) => props.width || '134px',\n    minHeight: (props) => props.height || '134px',\n    borderRadius: '50%',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '8px 0px',\n    background: (props) => props?.background || theme.palette.background.paper,\n    border: (props) =>\n      props?.borderColor\n        ? `2px solid ${props.borderColor}`\n        : `2px solid #BDBDBD`\n  },\n  cardStat: {\n    fontSize: '1.5rem',\n    fontWeight: '700',\n    color: '#000',\n    textAlign: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '0px',\n    width: (props) => props.width || '134px',\n    height: '50%'\n  },\n  primaryText: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '0px',\n    gap: '8px',\n    fontWeight: '400',\n    fontSize: '22px',\n    fontStyle: 'normal',\n    width: (props) => props.width || '134px',\n    height: '32px',\n    margin: '-4px 0px'\n  },\n  secondaryText: {\n    fontStyle: 'normal',\n    fontWeight: '400',\n    fontSize: '12px',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    padding: '0px',\n    width: (props) => props.width || '134px',\n    height: '20px',\n    color: 'rgba(0, 0, 0, 0.6)'\n  },\n  keySummary: {\n    fontSize: '1rem',\n    fontWeight: '700',\n    color: '#000',\n    textAlign: 'center',\n    lineHeight: '50px',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: '0px',\n    width: (props) => props.width || '134px',\n    height: '50%',\n    borderTop: (props) =>\n      props?.borderColor\n        ? `2px solid ${props.borderColor}`\n        : `2px solid #BDBDBD`\n  }\n}));\n\nconst DEFAULT_SUMMARY_BLOCK = {\n  border: 'none',\n  width: '69px',\n  height: '32px',\n  fontStyle: 'normal',\n  fontWeight: 400,\n  fontSize: '22px',\n  label: { color: '#000' }\n};\n\nexport const CircleGaugeWidget = (props) => {\n  const {\n    value,\n    label,\n    textVariant = 'h5',\n    secondaryValue,\n    secondaryStartLabel,\n    background,\n    style: styleProps\n  } = props;\n  const classes = useStyles(props);\n\n  return (\n    <Box className={classes.circle} style={styleProps}>\n      <Box className={classes.cardStat}>\n        <Typography className={classes.primaryText}>{value}</Typography>\n        <Typography className={classes.secondaryText}>{label}</Typography>\n      </Box>\n      <Box className={classes.keySummary}>\n        {secondaryValue && (\n          <SummaryBlock\n            value={secondaryValue}\n            startLabel={secondaryStartLabel || ''}\n            textVariant={textVariant}\n            backgroundColor={background}\n            style={styleProps?.summaryBlock || DEFAULT_SUMMARY_BLOCK}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nCircleGaugeWidget.propTypes = {\n  /** @type {string, number} label showed in the bottom part of the circle gauge */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n\n  /** @type {?string} optional label */\n  label: PropTypes.string,\n\n  /** @type {?string} optional icon to display ticks in the graph */\n  textVariant: PropTypes.string,\n\n  /** @type {string, number} optional second value */\n  secondaryValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n    .isRequired,\n\n  /** @type {?string}  optional started label */\n  secondaryStartLabel: PropTypes.string,\n\n  /** @type {?string} custom background color */\n  background: PropTypes.string,\n\n  /** @type {object} optional additional css properties */\n  style: PropTypes.object\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW;CACvC,QAAQ;EACN,QAAQ,UAAU,MAAM,SAAS;EACjC,YAAY,UAAU,MAAM,UAAU;EACtC,cAAc;EACd,WAAW;EACX,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,aAAa,UAAU,OAAO,cAAc,MAAM,QAAQ,WAAW;EACrE,SAAS,UACP,OAAO,cACH,aAAa,MAAM,gBACnB;EACP;CACD,UAAU;EACR,UAAU;EACV,YAAY;EACZ,OAAO;EACP,WAAW;EACX,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACT;CACD,aAAa;EACX,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,UAAU;EACV,WAAW;EACX,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACR,QAAQ;EACT;CACD,eAAe;EACb,WAAW;EACX,YAAY;EACZ,UAAU;EACV,SAAS;EACT,eAAe;EACf,YAAY;EACZ,SAAS;EACT,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACR,OAAO;EACR;CACD,YAAY;EACV,UAAU;EACV,YAAY;EACZ,OAAO;EACP,WAAW;EACX,YAAY;EACZ,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,QAAQ,UAAU,MAAM,SAAS;EACjC,QAAQ;EACR,YAAY,UACV,OAAO,cACH,aAAa,MAAM,gBACnB;EACP;CACF,EAAE;AAEH,MAAM,wBAAwB;CAC5B,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,UAAU;CACV,OAAO,EAAE,OAAO,QAAQ;CACzB;AAED,MAAa,qBAAqB,UAAU;CAC1C,MAAM,EACJ,OACA,OACA,cAAc,MACd,gBACA,qBACA,YACA,OAAO,eACL;CACJ,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC;EAAI,WAAW,QAAQ;EAAQ,OAAO;IACrC,oCAAC,OAAI,WAAW,QAAQ,YACtB,oCAAC,cAAW,WAAW,QAAQ,eAAc,MAAmB,EAChE,oCAAC,cAAW,WAAW,QAAQ,iBAAgB,MAAmB,CAC9D,EACN,oCAAC,OAAI,WAAW,QAAQ,cACrB,kBACC,oCAAC;EACC,OAAO;EACP,YAAY,uBAAuB;EACtB;EACb,iBAAiB;EACjB,OAAO,YAAY,gBAAgB;GACnC,CAEA,CACF;;AAIV,kBAAkB,YAAY;CAE5B,OAAOA,YAAU,UAAU,CAACA,YAAU,QAAQA,YAAU,OAAO,CAAC,CAAC;CAGjE,OAAOA,YAAU;CAGjB,aAAaA,YAAU;CAGvB,gBAAgBA,YAAU,UAAU,CAACA,YAAU,QAAQA,YAAU,OAAO,CAAC,CACtE;CAGH,qBAAqBA,YAAU;CAG/B,YAAYA,YAAU;CAGtB,OAAOA,YAAU;CAClB"}

package/dist/UI/widgets/library/DateTrendWidget/index.js

@@ -1,13 +1,3 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../FUICard-BuGJ_WAu.js";
-import "../../../../FUISquareIconButton-DwTSTnBV.js";
-import "../../../../FluentCard-DyXAmC_f.js";
-import "../../../../useId-I-OmRBmB.js";
-import "../../../../FUIMenuItem-BvpTageE.js";
-import "../../../../WidgetCard-DZYTvG7e.js";
-import "../../../../FluentDisplayNumbers-0St0jtpd.js";
-import "../../../../FluentStatNumber-DOSQBt5f.js";
-import "../../../../FluentSecondaryStatNumber-jvROy309.js";
-import { n as DateTrendWidget_default, r as layout } from "../../../../DateTrendWidget-BvTavBHE.js";
+import { n as DateTrendWidget_default, r as layout } from "../../../../DateTrendWidget-CbhpScrj.js";
 
 export { DateTrendWidget_default as default, layout };

package/dist/UI/widgets/library/DensePlotWidget/index.js

@@ -1,10 +1,3 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../FUICard-BuGJ_WAu.js";
-import "../../../../FUISquareIconButton-DwTSTnBV.js";
-import "../../../../FluentCard-DyXAmC_f.js";
-import "../../../../useId-I-OmRBmB.js";
-import "../../../../FUIMenuItem-BvpTageE.js";
-import "../../../../WidgetCard-DZYTvG7e.js";
-import { i as params, n as DensePlotWidget_default, r as layout } from "../../../../DensePlotWidget-B_9k0DfX.js";
+import { i as params, n as DensePlotWidget_default, r as layout } from "../../../../DensePlotWidget-CsrA6oiC.js";
 
 export { DensePlotWidget_default as default, layout, params };

package/dist/UI/widgets/library/DonutChartWidget/index.js

@@ -1,13 +1,3 @@
-import "../../../../FluentIcon-DjE8A5DC.js";
-import "../../../../FUICard-BuGJ_WAu.js";
-import "../../../../FUISquareIconButton-DwTSTnBV.js";
-import "../../../../FluentCard-DyXAmC_f.js";
-import "../../../../useId-I-OmRBmB.js";
-import "../../../../FUIMenuItem-BvpTageE.js";
-import "../../../../WidgetCard-DZYTvG7e.js";
-import "../../../../FluentStatsSnippet-BuDlbH0Q.js";
-import "../../../../ChartSummaryToggle-XZozMVzu.js";
-import "../../../../ConvertISODate-TfG2U4Iu.js";
-import { n as DonutChartWidget_default, r as layout } from "../../../../DonutChartWidget-COa5Dycy.js";
+import { n as DonutChartWidget_default, r as layout } from "../../../../DonutChartWidget-C0XsTjF9.js";
 
 export { DonutChartWidget_default as default, layout };

package/dist/UI/widgets/library/GaugeWidget/index.js

@@ -1,3 +1,382 @@
-import { t as GaugeWidget } from "../../../../GaugeWidget-BsJZcZAU.js";
+import React from "react";
+import PropTypes from "prop-types";
+import { Vega } from "react-vega";
 
-export { GaugeWidget };
+//#region src/UI/widgets/library/GaugeWidget/GaugeWidget.jsx
+const GaugeWidget = (props) => {
+	const { title = "", unitLabel = "", legend = "", showTicks = false, ticksNumber = 6, backgroundColor = "#cbd1d6", fillColor = "#FF9800", value = 0, minValue = 0, maxValue = 100, handleHover = () => {} } = props;
+	const specs = {
+		$schema: "https://vega.github.io/schema/vega/v5.json",
+		width: 350,
+		height: 180,
+		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
+			},
+			{
+				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
+			},
+			{
+				name: "ticksColor",
+				value: "#000000"
+			},
+			{
+				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" }
+					}
+				}
+			}
+		]
+	};
+	const signalListeners = { hover: handleHover };
+	return /* @__PURE__ */ React.createElement(Vega, {
+		spec: specs,
+		actions: false,
+		signalListeners
+	});
+};
+GaugeWidget.propTypes = {
+	title: PropTypes.string.isRequired,
+	legend: PropTypes.string,
+	showTicks: PropTypes.bool,
+	unitLabel: PropTypes.string,
+	ticksNumber: PropTypes.number,
+	backgroundColor: PropTypes.string,
+	value: PropTypes.number.isRequired,
+	minValue: PropTypes.number,
+	maxValue: PropTypes.number
+};
+
+//#endregion
+export { GaugeWidget };
+//# sourceMappingURL=index.js.map