import { getEllipseColor } from "../../../utilities/style/colorConverter.mjs";
import { c } from "react-compiler-runtime";
import React from "react";
import { lighten, useTheme } from "@material-ui/core";
import { Vega } from "react-vega";
//#region src/UI/dataDisplay/visualization/GaugeGraph.jsx
const GaugeGraph = (props) => {
	const $ = c(91);
	const { title: t0, unitLabel: t1, legend: t2, showTicks: t3, ticksNumber: t4, backgroundColor, fillColor: t5, value: t6, minValue: t7, maxValue: t8, width: t9, height: t10 } = props;
	const title = t0 === void 0 ? "" : t0;
	const unitLabel = t1 === void 0 ? "" : t1;
	const legend = t2 === void 0 ? "" : t2;
	const showTicks = t3 === void 0 ? false : t3;
	const ticksNumber = t4 === void 0 ? 6 : t4;
	const fillColor = t5 === void 0 ? "warning" : t5;
	const value = t6 === void 0 ? 0 : t6;
	const minValue = t7 === void 0 ? 0 : t7;
	const maxValue = t8 === void 0 ? 100 : t8;
	const width = t9 === void 0 ? 350 : t9;
	const height = t10 === void 0 ? 180 : t10;
	const theme = useTheme();
	let t11;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t11 = {
			left: 0,
			right: 0,
			top: 0,
			bottom: 0
		};
		$[0] = t11;
	} else t11 = $[0];
	let t12;
	let t13;
	let t14;
	let t15;
	let t16;
	let t17;
	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
		t12 = [{
			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))"
				}
			]
		}];
		t13 = {
			name: "centerX",
			update: "width/2"
		};
		t14 = {
			name: "centerY",
			update: "height/2 + outerRadius/2"
		};
		t15 = {
			name: "outerRadius",
			update: "targetValue ? radiusRef * 0.9 : radiusRef * 0.95"
		};
		t16 = {
			name: "radiusRef",
			update: "max(width/2, height/2)"
		};
		t17 = {
			name: "innerRadius",
			update: "outerRadius - outerRadius * 0.25"
		};
		$[1] = t12;
		$[2] = t13;
		$[3] = t14;
		$[4] = t15;
		$[5] = t16;
		$[6] = t17;
	} else {
		t12 = $[1];
		t13 = $[2];
		t14 = $[3];
		t15 = $[4];
		t16 = $[5];
		t17 = $[6];
	}
	let t18;
	if ($[7] !== value) {
		t18 = {
			name: "targetValue",
			value
		};
		$[7] = value;
		$[8] = t18;
	} else t18 = $[8];
	let t19;
	if ($[9] !== backgroundColor || $[10] !== theme) {
		t19 = backgroundColor ? lighten(getEllipseColor(theme, backgroundColor), .6) : lighten(theme.palette.secondary.main, .6);
		$[9] = backgroundColor;
		$[10] = theme;
		$[11] = t19;
	} else t19 = $[11];
	let t20;
	if ($[12] !== t19) {
		t20 = {
			name: "backgroundColor",
			value: t19
		};
		$[12] = t19;
		$[13] = t20;
	} else t20 = $[13];
	let t21;
	if ($[14] !== ticksNumber) {
		t21 = {
			name: "ticksNumber",
			value: ticksNumber
		};
		$[14] = ticksNumber;
		$[15] = t21;
	} else t21 = $[15];
	let t22;
	if ($[16] !== value) {
		t22 = {
			name: "mainValue",
			value
		};
		$[16] = value;
		$[17] = t22;
	} else t22 = $[17];
	let t23;
	if ($[18] !== title) {
		t23 = {
			name: "title",
			value: title
		};
		$[18] = title;
		$[19] = t23;
	} else t23 = $[19];
	let t24;
	if ($[20] !== unitLabel) {
		t24 = {
			name: "unit",
			value: unitLabel
		};
		$[20] = unitLabel;
		$[21] = t24;
	} else t24 = $[21];
	let t25;
	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
		t25 = {
			name: "usedValue",
			update: "min(max(minValue, mainValue), maxValue)"
		};
		$[22] = t25;
	} else t25 = $[22];
	let t26;
	if ($[23] !== minValue) {
		t26 = {
			name: "minValue",
			value: minValue
		};
		$[23] = minValue;
		$[24] = t26;
	} else t26 = $[24];
	let t27;
	if ($[25] !== maxValue) {
		t27 = {
			name: "maxValue",
			value: maxValue
		};
		$[25] = maxValue;
		$[26] = t27;
	} else t27 = $[26];
	let t28;
	if ($[27] !== fillColor || $[28] !== theme) {
		t28 = fillColor ? getEllipseColor(theme, fillColor) : theme.palette.secondary.main;
		$[27] = fillColor;
		$[28] = theme;
		$[29] = t28;
	} else t28 = $[29];
	let t29;
	if ($[30] !== t28) {
		t29 = {
			name: "fillColor",
			value: t28
		};
		$[30] = t28;
		$[31] = t29;
	} else t29 = $[31];
	let t30;
	if ($[32] !== theme.palette.text.primary) {
		t30 = {
			name: "ticksColor",
			value: theme.palette.text.primary
		};
		$[32] = theme.palette.text.primary;
		$[33] = t30;
	} else t30 = $[33];
	let t31;
	if ($[34] !== showTicks) {
		t31 = {
			name: "showTicks",
			value: showTicks
		};
		$[34] = showTicks;
		$[35] = t31;
	} else t31 = $[35];
	let t32;
	let t33;
	let t34;
	let t35;
	let t36;
	let t37;
	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
		t32 = {
			name: "fontFactor",
			update: "(radiusRef/5)/25"
		};
		t33 = {
			name: "hasTarget",
			update: "isNumber(targetValue) === true"
		};
		t34 = {
			name: "targetRule",
			update: "(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0"
		};
		t35 = {
			name: "showTarget",
			value: true
		};
		t36 = {
			name: "targetStatus",
			update: "mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1"
		};
		t37 = {
			name: "lowIsGood",
			value: false
		};
		$[36] = t32;
		$[37] = t33;
		$[38] = t34;
		$[39] = t35;
		$[40] = t36;
		$[41] = t37;
	} else {
		t32 = $[36];
		t33 = $[37];
		t34 = $[38];
		t35 = $[39];
		t36 = $[40];
		t37 = $[41];
	}
	let t38;
	if ($[42] !== legend) {
		t38 = {
			name: "legend",
			value: legend
		};
		$[42] = legend;
		$[43] = t38;
	} else t38 = $[43];
	let t39;
	if ($[44] !== t18 || $[45] !== t20 || $[46] !== t21 || $[47] !== t22 || $[48] !== t23 || $[49] !== t24 || $[50] !== t26 || $[51] !== t27 || $[52] !== t29 || $[53] !== t30 || $[54] !== t31 || $[55] !== t38) {
		t39 = [
			t13,
			t14,
			t15,
			t16,
			t17,
			t18,
			t20,
			t21,
			t22,
			t23,
			t24,
			t25,
			t26,
			t27,
			t29,
			t30,
			t31,
			t32,
			t33,
			t34,
			t35,
			t36,
			t37,
			t38
		];
		$[44] = t18;
		$[45] = t20;
		$[46] = t21;
		$[47] = t22;
		$[48] = t23;
		$[49] = t24;
		$[50] = t26;
		$[51] = t27;
		$[52] = t29;
		$[53] = t30;
		$[54] = t31;
		$[55] = t38;
		$[56] = t39;
	} else t39 = $[56];
	let t40;
	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
		t40 = {
			data: "ticks",
			field: "data_2"
		};
		$[57] = t40;
	} else t40 = $[57];
	let t41;
	if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
		t41 = {
			name: "gaugeScale",
			type: "linear",
			domain: t40,
			zero: false,
			range: { signal: "[-PI/2, PI/2]" }
		};
		$[58] = t41;
	} else t41 = $[58];
	let t42;
	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
		t42 = {
			name: "tickScale",
			type: "linear",
			domain: {
				data: "ticks",
				field: "data"
			},
			range: { signal: "[PI/2, -PI/2]" }
		};
		$[59] = t42;
	} else t42 = $[59];
	let t43;
	let t44;
	let t45;
	if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
		t43 = [
			t41,
			t42,
			{
				name: "targetStatusColorScale",
				domain: [
					-1,
					0,
					1
				],
				range: [
					"red",
					"orange",
					"green"
				]
			}
		];
		t44 = [];
		t45 = [];
		$[60] = t43;
		$[61] = t44;
		$[62] = t45;
	} else {
		t43 = $[60];
		t44 = $[61];
		t45 = $[62];
	}
	let t46;
	if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
		t46 = {
			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" }
			} }
		};
		$[63] = t46;
	} else t46 = $[63];
	let t47;
	if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
		t47 = {
			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" }
				}
			}
		};
		$[64] = t47;
	} else t47 = $[64];
	let t48;
	if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
		t48 = {
			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" }
			} }
		};
		$[65] = t48;
	} else t48 = $[65];
	let t49;
	if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
		t49 = {
			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" }
				}
			}
		};
		$[66] = t49;
	} else t49 = $[66];
	let t50;
	let t51;
	let t52;
	let t53;
	if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
		t50 = { data: "gauge" };
		t51 = {
			align: { value: "center" },
			baseline: { value: "top" }
		};
		t52 = { signal: "minValue" };
		t53 = { signal: "centerX - outerRadius + (outerRadius - innerRadius)/2" };
		$[67] = t50;
		$[68] = t51;
		$[69] = t52;
		$[70] = t53;
	} else {
		t50 = $[67];
		t51 = $[68];
		t52 = $[69];
		t53 = $[70];
	}
	let t54;
	if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
		t54 = {
			type: "text",
			description: "displayed min value at the bottom left of gauge when showTicks is false",
			from: t50,
			encode: {
				enter: t51,
				update: {
					text: t52,
					x: t53,
					y: {
						signal: "centerY",
						offset: { signal: "fontFactor*5" }
					},
					fontSize: { signal: "fontFactor * 11" },
					opacity: { signal: "showTicks ? 0 : 1" }
				}
			}
		};
		$[71] = t54;
	} else t54 = $[71];
	let t55;
	let t56;
	let t57;
	let t58;
	if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
		t55 = { data: "gauge" };
		t56 = {
			align: { value: "center" },
			baseline: { value: "top" }
		};
		t57 = { signal: "maxValue" };
		t58 = { signal: "centerX + innerRadius + (outerRadius - innerRadius)/2" };
		$[72] = t55;
		$[73] = t56;
		$[74] = t57;
		$[75] = t58;
	} else {
		t55 = $[72];
		t56 = $[73];
		t57 = $[74];
		t58 = $[75];
	}
	let t59;
	if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
		t59 = {
			type: "text",
			description: "displayed max value at the bottom right of gauge when showTicks is false",
			from: t55,
			encode: {
				enter: t56,
				update: {
					text: t57,
					x: t58,
					y: {
						signal: "centerY",
						offset: { signal: "fontFactor*5" }
					},
					fontSize: { signal: "fontFactor * 11" },
					opacity: { signal: "showTicks ? 0 : 1" }
				}
			}
		};
		$[76] = t59;
	} else t59 = $[76];
	let t60;
	let t61;
	if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
		t60 = {
			x: { signal: "centerX" },
			baseline: { value: "top" },
			align: { value: "center" }
		};
		t61 = { signal: "title" };
		$[77] = t60;
		$[78] = t61;
	} else {
		t60 = $[77];
		t61 = $[78];
	}
	let t62;
	if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
		t62 = {
			type: "text",
			description: "displayed a title for the chart ",
			name: "titleLabel",
			encode: {
				enter: t60,
				update: {
					text: t61,
					y: {
						signal: "centerY",
						offset: { signal: "fontFactor * -50" }
					},
					fontSize: { signal: "fontFactor * 14" },
					fill: { signal: "fillColor" }
				}
			}
		};
		$[79] = t62;
	} else t62 = $[79];
	let t63;
	let t64;
	if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
		t63 = {
			x: { signal: "centerX" },
			baseline: { value: "top" },
			align: { value: "center" }
		};
		t64 = { signal: "format(mainValue, '.1f') + unit " };
		$[80] = t63;
		$[81] = t64;
	} else {
		t63 = $[80];
		t64 = $[81];
	}
	let t65;
	if ($[82] === Symbol.for("react.memo_cache_sentinel")) {
		t65 = {
			type: "text",
			description: "displayed main value at the bottom center of the gauge ",
			name: "gaugeValue",
			encode: {
				enter: t63,
				update: {
					text: t64,
					y: {
						signal: "centerY",
						offset: { signal: "fontFactor * -25" }
					},
					fontSize: { signal: "fontFactor * 20" }
				}
			}
		};
		$[82] = t65;
	} else t65 = $[82];
	let t66;
	let t67;
	let t68;
	if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
		t66 = { data: "gaugeValue" };
		t67 = {
			x: { signal: "centerX" },
			align: { value: "center" },
			baseline: { value: "top" }
		};
		t68 = { signal: "legend" };
		$[83] = t66;
		$[84] = t67;
		$[85] = t68;
	} else {
		t66 = $[83];
		t67 = $[84];
		t68 = $[85];
	}
	let t69;
	if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
		t69 = [
			t46,
			t47,
			t48,
			t49,
			t54,
			t59,
			t62,
			t65,
			{
				type: "text",
				name: "targetDiff",
				description: "add status with symbol and difference and percentage",
				from: t66,
				encode: {
					enter: t67,
					update: {
						text: t68,
						y: {
							signal: "centerY",
							offset: { signal: "fontFactor * -4" }
						},
						fontSize: { signal: "fontFactor * 10" },
						opacity: { signal: " targetRule ? 1 : 0" }
					}
				}
			}
		];
		$[86] = t69;
	} else t69 = $[86];
	let t70;
	if ($[87] !== height || $[88] !== t39 || $[89] !== width) {
		const specs = {
			$schema: "https://vega.github.io/schema/vega/v5.json",
			width,
			height,
			padding: t11,
			data: t12,
			signals: t39,
			scales: t43,
			axes: t44,
			legends: t45,
			marks: t69
		};
		t70 = /* @__PURE__ */ React.createElement(Vega, {
			spec: specs,
			actions: false
		});
		$[87] = height;
		$[88] = t39;
		$[89] = width;
		$[90] = t70;
	} else t70 = $[90];
	return t70;
};
//#endregion
export { GaugeGraph };

//# sourceMappingURL=GaugeGraph.mjs.map