udp-react-enterprise-component-library 25.18.1-beta.24 → 25.18.1-beta.26

package/dist/GaugeWidget-CWLWh2EV.js

@@ -0,0 +1,382 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Vega } from "react-vega";
+
+//#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 as t };
+//# sourceMappingURL=GaugeWidget-CWLWh2EV.js.map

package/dist/GaugeWidget-CWLWh2EV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeWidget-CWLWh2EV.js","names":[],"sources":["../src/UI/widgets/library/GaugeWidget/GaugeWidget.jsx"],"sourcesContent":["import React from 'react';\nimport { Vega } from 'react-vega';\nimport PropTypes from 'prop-types';\n\nexport const GaugeWidget = (props) => {\n  const {\n    title = '',\n    unitLabel = '',\n    legend = '',\n    showTicks = false,\n    ticksNumber = 6,\n    backgroundColor = '#cbd1d6',\n    fillColor = '#FF9800',\n    value = 0,\n    minValue = 0,\n    maxValue = 100,\n    handleHover = () => {}\n  } = props;\n\n  const specs = {\n    $schema: 'https://vega.github.io/schema/vega/v5.json',\n    width: 350,\n    height: 180,\n    padding: { left: 0, right: 0, top: 0, bottom: 0 },\n\n    data: [\n      {\n        name: 'ticks',\n        transform: [\n          {\n            type: 'sequence',\n            as: 'data',\n            start: {\n              signal: '0'\n            },\n            stop: {\n              signal: '(maxValue - minValue) + 0.1'\n            },\n            step: {\n              signal: '(maxValue - minValue)/(ticksNumber-1)'\n            }\n          },\n          {\n            type: 'formula',\n            expr: 'datum.data + minValue',\n            as: 'data_2'\n          },\n          {\n            type: 'formula',\n            as: 'radianRef',\n            expr: 'PI * (datum.data/(maxValue - minValue))'\n          },\n          {\n            type: 'formula',\n            as: 'x',\n            expr: 'centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))'\n          },\n          {\n            type: 'formula',\n            as: 'y',\n            expr: 'centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))'\n          }\n        ]\n      }\n    ],\n    signals: [\n      {\n        name: 'centerX',\n        update: 'width/2'\n      },\n      {\n        name: 'centerY',\n        update: 'height/2 + outerRadius/2'\n      },\n      {\n        name: 'outerRadius',\n        update: 'targetValue ? radiusRef * 0.9 : radiusRef * 0.95'\n      },\n      {\n        name: 'radiusRef',\n        update: 'max(width/2, height/2)' // TODO: Important max or min functions are allowed\n      },\n      {\n        name: 'innerRadius',\n        update: 'outerRadius - outerRadius * 0.25'\n      },\n      {\n        name: 'targetValue',\n        value: value\n      },\n      {\n        name: 'backgroundColor',\n        value: backgroundColor\n      },\n      {\n        name: 'ticksNumber',\n        value: ticksNumber\n      },\n      {\n        name: 'mainValue',\n        value: value\n      },\n      {\n        name: 'title',\n        value: title\n      },\n      {\n        name: 'unit',\n        value: unitLabel\n      },\n      {\n        name: 'usedValue',\n        update: 'min(max(minValue, mainValue), maxValue)'\n      },\n      {\n        name: 'minValue',\n        value: minValue\n      },\n      {\n        name: 'maxValue',\n        value: maxValue\n      },\n      {\n        name: 'fillColor',\n        value: fillColor\n      },\n      {\n        name: 'ticksColor',\n        value: '#000000'\n      },\n      {\n        name: 'showTicks',\n        value: showTicks\n      },\n      {\n        name: 'fontFactor',\n        update: '(radiusRef/5)/25'\n      },\n      {\n        name: 'hasTarget',\n        update: 'isNumber(targetValue) === true'\n      },\n      {\n        name: 'targetRule',\n        update:\n          '(showTarget && hasTarget && (minValue <= targetValue) && (targetValue <= maxValue)) ? 1 : 0'\n      },\n      {\n        name: 'showTarget',\n        value: true\n      },\n      {\n        name: 'targetStatus',\n        update:\n          'mainValue === targetValue ? 0 : mainValue > targetValue ? lowIsGood ? -1 : 1 : lowIsGood ? 1 : -1'\n      },\n      {\n        name: 'lowIsGood',\n        value: false\n      },\n      {\n        name: 'legend',\n        value: legend\n      }\n    ],\n    scales: [\n      {\n        name: 'gaugeScale',\n        type: 'linear',\n        domain: { data: 'ticks', field: 'data_2' },\n        zero: false,\n        range: { signal: '[-PI/2, PI/2]' }\n      },\n      {\n        name: 'tickScale',\n        type: 'linear',\n        domain: { data: 'ticks', field: 'data' },\n        range: { signal: '[PI/2, -PI/2]' }\n      },\n      {\n        name: 'targetStatusColorScale',\n        domain: [-1, 0, 1],\n        range: ['red', 'orange', 'green']\n      }\n    ],\n\n    axes: [],\n    legends: [],\n\n    marks: [\n      {\n        type: 'arc',\n        name: 'gauge',\n        encode: {\n          enter: {\n            x: { signal: 'centerX' },\n            y: { signal: 'centerY' },\n            startAngle: { signal: '-PI/2' },\n            endAngle: { signal: 'PI/2' },\n            outerRadius: { signal: 'outerRadius' },\n            innerRadius: { signal: 'innerRadius' },\n            fill: { signal: 'backgroundColor' }\n          }\n        }\n      },\n      {\n        type: 'arc',\n        encode: {\n          enter: {\n            startAngle: { signal: '-PI/2' }\n          },\n          update: {\n            x: { signal: 'centerX' },\n            y: { signal: 'centerY' },\n            innerRadius: { signal: 'innerRadius' },\n            outerRadius: { signal: 'outerRadius' },\n            endAngle: { scale: 'gaugeScale', signal: 'usedValue' },\n            fill: { signal: 'fillColor' }\n          }\n        }\n      },\n      {\n        type: 'arc',\n        description: 'ticks on the arc',\n        from: { data: 'ticks' },\n        encode: {\n          enter: {\n            x: { signal: 'centerX' },\n            y: { signal: 'centerY' },\n            outerRadius: { signal: 'outerRadius' },\n            innerRadius: { signal: 'outerRadius - (radiusRef*0.05)' },\n            startAngle: {\n              scale: 'tickScale',\n              field: 'data'\n            },\n            endAngle: {\n              scale: 'tickScale',\n              field: 'data'\n            },\n            stroke: { signal: 'ticksColor' },\n            opacity: { signal: 'showTicks ? 1 : 0' }\n          }\n        }\n      },\n      {\n        type: 'text',\n        from: { data: 'ticks' },\n        encode: {\n          enter: {\n            align: { value: 'center' },\n            baseline: { value: 'alphabetic' }\n          },\n          update: {\n            text: { signal: \"format(datum.data_2, '.0f')\" },\n            x: { field: 'x' },\n            y: { field: 'y' },\n            fontSize: { signal: 'fontFactor* 11' },\n            fill: { signal: 'ticksColor' },\n            opacity: { signal: 'showTicks ? 1 : 0' }\n          }\n        }\n      },\n      {\n        type: 'text',\n        description:\n          'displayed min value at the bottom left of gauge when showTicks is false',\n        from: { data: 'gauge' },\n        encode: {\n          enter: {\n            align: { value: 'center' },\n            baseline: { value: 'top' }\n          },\n          update: {\n            text: { signal: 'minValue' },\n            x: {\n              signal: 'centerX - outerRadius + (outerRadius - innerRadius)/2'\n            },\n            y: { signal: 'centerY', offset: { signal: 'fontFactor*5' } },\n            fontSize: { signal: 'fontFactor * 11' },\n            opacity: { signal: 'showTicks ? 0 : 1' }\n          }\n        }\n      },\n      {\n        type: 'text',\n        description:\n          'displayed max value at the bottom right of gauge when showTicks is false',\n        from: { data: 'gauge' },\n        encode: {\n          enter: {\n            align: { value: 'center' },\n            baseline: { value: 'top' }\n          },\n          update: {\n            text: { signal: 'maxValue' },\n            x: {\n              signal: 'centerX + innerRadius + (outerRadius - innerRadius)/2'\n            },\n            y: { signal: 'centerY', offset: { signal: 'fontFactor*5' } },\n            fontSize: { signal: 'fontFactor * 11' },\n            opacity: { signal: 'showTicks ? 0 : 1' }\n          }\n        }\n      },\n      {\n        type: 'text',\n        description: 'displayed a title for the chart ',\n        name: 'titleLabel',\n        encode: {\n          enter: {\n            x: { signal: 'centerX' },\n            baseline: { value: 'top' },\n            align: { value: 'center' }\n          },\n          update: {\n            text: { signal: 'title' },\n            y: { signal: 'centerY', offset: { signal: 'fontFactor * -50' } },\n            fontSize: { signal: 'fontFactor * 14' },\n            fill: { signal: 'fillColor' }\n          }\n        }\n      },\n      {\n        type: 'text',\n        description: 'displayed main value at the bottom center of the gauge ',\n        name: 'gaugeValue',\n        encode: {\n          enter: {\n            x: { signal: 'centerX' },\n            baseline: { value: 'top' },\n            align: { value: 'center' }\n          },\n          update: {\n            text: { signal: \"format(mainValue, '.1f') + unit \" },\n            y: { signal: 'centerY', offset: { signal: 'fontFactor * -25' } },\n            fontSize: { signal: 'fontFactor * 20' }\n          }\n        }\n      },\n      {\n        type: 'text',\n        name: 'targetDiff',\n        description: 'add status with symbol and difference and percentage',\n        from: { data: 'gaugeValue' },\n        encode: {\n          enter: {\n            x: { signal: 'centerX' },\n            align: { value: 'center' },\n            baseline: { value: 'top' }\n          },\n          update: {\n            // text: { \"signal\": \"format((mainValue - targetValue), '.2f') + ' (' + format(mainValue/targetValue, '.0%') + ')'\" },\n            // fill: { \"signal\": \"targetStatus\", \"scale\": \"targetStatusColorScale\" },\n            // x: { \"signal\": \"centerX + (fontFactor * 12)\" },\n            text: { signal: 'legend' },\n            y: { signal: 'centerY', offset: { signal: 'fontFactor * -4' } },\n            fontSize: { signal: 'fontFactor * 10' },\n            opacity: { signal: ' targetRule ? 1 : 0' }\n          }\n        }\n      }\n    ]\n  };\n\n  const signalListeners = { hover: handleHover };\n\n  return (\n    <Vega spec={specs} actions={false} signalListeners={signalListeners} />\n  );\n};\n\nGaugeWidget.propTypes = {\n  /** @type {?string} label showed in the bottom part of the graph */\n  title: PropTypes.string.isRequired,\n\n  /** @type {?string} optional symbol to put at the right side of the value */\n  legend: PropTypes.string,\n\n  /** @type {?bool} optional icon to display ticks in the graph */\n  showTicks: PropTypes.bool,\n\n  /** @type {?string} optional additional css properties */\n  unitLabel: PropTypes.string,\n\n  /** @type {?number}  number of ticks in the graph */\n  ticksNumber: PropTypes.number,\n\n  /** @type {?string} render prop if you want to pass a custom react element instead of the predefined label*/\n  backgroundColor: PropTypes.string,\n\n  /** @type {?number} main value for the graph element*/\n  value: PropTypes.number.isRequired,\n\n  /** @type {?number} range min value for the graph element*/\n  minValue: PropTypes.number,\n\n  /** @type {?number} range max value for the graph element*/\n  maxValue: PropTypes.number\n};\n"],"mappings":";;;;;AAIA,MAAa,eAAe,UAAU;CACpC,MAAM,EACJ,QAAQ,IACR,YAAY,IACZ,SAAS,IACT,YAAY,OACZ,cAAc,GACd,kBAAkB,WAClB,YAAY,WACZ,QAAQ,GACR,WAAW,GACX,WAAW,KACX,oBAAoB,OAClB;CAEJ,MAAM,QAAQ;EACZ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;GAAE,MAAM;GAAG,OAAO;GAAG,KAAK;GAAG,QAAQ;GAAG;EAEjD,MAAM,CACJ;GACE,MAAM;GACN,WAAW;IACT;KACE,MAAM;KACN,IAAI;KACJ,OAAO,EACL,QAAQ,KACT;KACD,MAAM,EACJ,QAAQ,+BACT;KACD,MAAM,EACJ,QAAQ,yCACT;KACF;IACD;KACE,MAAM;KACN,MAAM;KACN,IAAI;KACL;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACD;KACE,MAAM;KACN,IAAI;KACJ,MAAM;KACP;IACF;GACF,CACF;EACD,SAAS;GACP;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACC;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACC;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QAAQ;IACT;GACD;IACE,MAAM;IACN,QACE;IACH;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,QACE;IACH;GACD;IACE,MAAM;IACN,OAAO;IACR;GACD;IACE,MAAM;IACN,OAAO;IACR;GACF;EACD,QAAQ;GACN;IACE,MAAM;IACN,MAAM;IACN,QAAQ;KAAE,MAAM;KAAS,OAAO;KAAU;IAC1C,MAAM;IACN,OAAO,EAAE,QAAQ,iBAAiB;IACnC;GACD;IACE,MAAM;IACN,MAAM;IACN,QAAQ;KAAE,MAAM;KAAS,OAAO;KAAQ;IACxC,OAAO,EAAE,QAAQ,iBAAiB;IACnC;GACD;IACE,MAAM;IACN,QAAQ;KAAC;KAAI;KAAG;KAAE;IAClB,OAAO;KAAC;KAAO;KAAU;KAAQ;IAClC;GACF;EAED,MAAM,EAAE;EACR,SAAS,EAAE;EAEX,OAAO;GACL;IACE,MAAM;IACN,MAAM;IACN,QAAQ,EACN,OAAO;KACL,GAAG,EAAE,QAAQ,WAAW;KACxB,GAAG,EAAE,QAAQ,WAAW;KACxB,YAAY,EAAE,QAAQ,SAAS;KAC/B,UAAU,EAAE,QAAQ,QAAQ;KAC5B,aAAa,EAAE,QAAQ,eAAe;KACtC,aAAa,EAAE,QAAQ,eAAe;KACtC,MAAM,EAAE,QAAQ,mBAAmB;KACpC,EACF;IACF;GACD;IACE,MAAM;IACN,QAAQ;KACN,OAAO,EACL,YAAY,EAAE,QAAQ,SAAS,EAChC;KACD,QAAQ;MACN,GAAG,EAAE,QAAQ,WAAW;MACxB,GAAG,EAAE,QAAQ,WAAW;MACxB,aAAa,EAAE,QAAQ,eAAe;MACtC,aAAa,EAAE,QAAQ,eAAe;MACtC,UAAU;OAAE,OAAO;OAAc,QAAQ;OAAa;MACtD,MAAM,EAAE,QAAQ,aAAa;MAC9B;KACF;IACF;GACD;IACE,MAAM;IACN,aAAa;IACb,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ,EACN,OAAO;KACL,GAAG,EAAE,QAAQ,WAAW;KACxB,GAAG,EAAE,QAAQ,WAAW;KACxB,aAAa,EAAE,QAAQ,eAAe;KACtC,aAAa,EAAE,QAAQ,kCAAkC;KACzD,YAAY;MACV,OAAO;MACP,OAAO;MACR;KACD,UAAU;MACR,OAAO;MACP,OAAO;MACR;KACD,QAAQ,EAAE,QAAQ,cAAc;KAChC,SAAS,EAAE,QAAQ,qBAAqB;KACzC,EACF;IACF;GACD;IACE,MAAM;IACN,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,cAAc;MAClC;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,+BAA+B;MAC/C,GAAG,EAAE,OAAO,KAAK;MACjB,GAAG,EAAE,OAAO,KAAK;MACjB,UAAU,EAAE,QAAQ,kBAAkB;MACtC,MAAM,EAAE,QAAQ,cAAc;MAC9B,SAAS,EAAE,QAAQ,qBAAqB;MACzC;KACF;IACF;GACD;IACE,MAAM;IACN,aACE;IACF,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,OAAO;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,YAAY;MAC5B,GAAG,EACD,QAAQ,yDACT;MACD,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,gBAAgB;OAAE;MAC5D,UAAU,EAAE,QAAQ,mBAAmB;MACvC,SAAS,EAAE,QAAQ,qBAAqB;MACzC;KACF;IACF;GACD;IACE,MAAM;IACN,aACE;IACF,MAAM,EAAE,MAAM,SAAS;IACvB,QAAQ;KACN,OAAO;MACL,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,OAAO;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,YAAY;MAC5B,GAAG,EACD,QAAQ,yDACT;MACD,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,gBAAgB;OAAE;MAC5D,UAAU,EAAE,QAAQ,mBAAmB;MACvC,SAAS,EAAE,QAAQ,qBAAqB;MACzC;KACF;IACF;GACD;IACE,MAAM;IACN,aAAa;IACb,MAAM;IACN,QAAQ;KACN,OAAO;MACL,GAAG,EAAE,QAAQ,WAAW;MACxB,UAAU,EAAE,OAAO,OAAO;MAC1B,OAAO,EAAE,OAAO,UAAU;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,SAAS;MACzB,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,oBAAoB;OAAE;MAChE,UAAU,EAAE,QAAQ,mBAAmB;MACvC,MAAM,EAAE,QAAQ,aAAa;MAC9B;KACF;IACF;GACD;IACE,MAAM;IACN,aAAa;IACb,MAAM;IACN,QAAQ;KACN,OAAO;MACL,GAAG,EAAE,QAAQ,WAAW;MACxB,UAAU,EAAE,OAAO,OAAO;MAC1B,OAAO,EAAE,OAAO,UAAU;MAC3B;KACD,QAAQ;MACN,MAAM,EAAE,QAAQ,oCAAoC;MACpD,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,oBAAoB;OAAE;MAChE,UAAU,EAAE,QAAQ,mBAAmB;MACxC;KACF;IACF;GACD;IACE,MAAM;IACN,MAAM;IACN,aAAa;IACb,MAAM,EAAE,MAAM,cAAc;IAC5B,QAAQ;KACN,OAAO;MACL,GAAG,EAAE,QAAQ,WAAW;MACxB,OAAO,EAAE,OAAO,UAAU;MAC1B,UAAU,EAAE,OAAO,OAAO;MAC3B;KACD,QAAQ;MAIN,MAAM,EAAE,QAAQ,UAAU;MAC1B,GAAG;OAAE,QAAQ;OAAW,QAAQ,EAAE,QAAQ,mBAAmB;OAAE;MAC/D,UAAU,EAAE,QAAQ,mBAAmB;MACvC,SAAS,EAAE,QAAQ,uBAAuB;MAC3C;KACF;IACF;GACF;EACF;CAED,MAAM,kBAAkB,EAAE,OAAO,aAAa;AAE9C,QACE,oCAAC;EAAK,MAAM;EAAO,SAAS;EAAwB;GAAmB;;AAI3E,YAAY,YAAY;CAEtB,OAAO,UAAU,OAAO;CAGxB,QAAQ,UAAU;CAGlB,WAAW,UAAU;CAGrB,WAAW,UAAU;CAGrB,aAAa,UAAU;CAGvB,iBAAiB,UAAU;CAG3B,OAAO,UAAU,OAAO;CAGxB,UAAU,UAAU;CAGpB,UAAU,UAAU;CACrB"}

package/dist/GraphCard-pKYdmcBy.js

@@ -0,0 +1,75 @@
+import { t as AmbientCard } from "./AmbientCard-DK9abODq.js";
+import { t as EmptyStateDisplay } from "./EmptyStateDisplay-CVeCBelv.js";
+import React from "react";
+import { makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { PropTypes as PropTypes$1 } from "prop-types";
+import { useTranslation } from "react-i18next";
+import { MuiVegaLite } from "@material-vega/material-ui";
+
+//#region src/UI/dataDisplay/GraphCard/GraphCard.jsx
+const useStyles = makeStyles((theme) => ({
+	infoPanel: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-around",
+		alignItems: "center",
+		alignSelf: "stretch",
+		padding: "10px 32px"
+	},
+	graphSection: {
+		overflow: "hidden",
+		"& svg": {
+			width: "100%",
+			height: "100%"
+		},
+		"& .vega-embed": {
+			width: "100%",
+			height: "100%"
+		},
+		paddingTop: theme.spacing(1),
+		margin: 0,
+		height: (props) => props?.graphHeight ?? "255px"
+	},
+	emptyStateDisplay: {
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	}
+}));
+/**
+* `GraphCard` component
+*/
+const GraphCard = (props) => {
+	const { title, showInfoPanel = true, graphSpecs, children, headerColor, className, noData = false, emptyStatePrimaryText, emptyStateImageSrc, emptyStateIconSize, emptyStateImageWidth, emptyStateClassName, emptyStateIcon, ...otherProps } = props;
+	const classes = useStyles(props);
+	const { t } = useTranslation();
+	return /* @__PURE__ */ React.createElement(AmbientCard, {
+		fullWidth: true,
+		title,
+		headerColor,
+		...otherProps
+	}, !noData ? /* @__PURE__ */ React.createElement("div", null, showInfoPanel && /* @__PURE__ */ React.createElement("div", { className: classes.infoPanel }, children), /* @__PURE__ */ React.createElement("div", { className: classes.graphSection }, /* @__PURE__ */ React.createElement(MuiVegaLite, {
+		variant: "verticalBarChart",
+		background: "paper",
+		autoResize: true,
+		actions: false,
+		spec: graphSpecs || {}
+	}))) : /* @__PURE__ */ React.createElement("div", { className: clsx(classes.emptyStateDisplay, emptyStateClassName) }, /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
+		primaryText: emptyStatePrimaryText ?? t("No results found"),
+		icon: emptyStateIcon,
+		iconSize: emptyStateIconSize,
+		imageSrc: emptyStateImageSrc,
+		imageWidth: emptyStateImageWidth
+	})));
+};
+GraphCard.propTypes = {
+	title: PropTypes$1.string,
+	graphSpecs: PropTypes$1.object.isRequired,
+	showInfoPanel: PropTypes$1.bool,
+	children: PropTypes$1.node,
+	style: PropTypes$1.object
+};
+
+//#endregion
+export { GraphCard as t };
+//# sourceMappingURL=GraphCard-pKYdmcBy.js.map

package/dist/GraphCard-pKYdmcBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphCard-pKYdmcBy.js","names":["PropTypes"],"sources":["../src/UI/dataDisplay/GraphCard/GraphCard.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles } from '@material-ui/core';\nimport { MuiVegaLite } from '@material-vega/material-ui';\nimport { PropTypes } from 'prop-types';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { EmptyStateDisplay } from '../EmptyStateDisplay';\nimport { useTranslation } from 'react-i18next';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  infoPanel: {\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'space-around',\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    padding: '10px 32px'\n  },\n  graphSection: {\n    overflow: 'hidden',\n    '& svg': {\n      width: '100%',\n      height: '100%'\n    },\n    '& .vega-embed': {\n      width: '100%',\n      height: '100%'\n    },\n    paddingTop: theme.spacing(1),\n    margin: 0,\n    height: (props) => props?.graphHeight ?? '255px'\n  },\n  emptyStateDisplay: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n  }\n}));\n\n/**\n * `GraphCard` component\n */\nexport const GraphCard = (props) => {\n  const {\n    title,\n    showInfoPanel = true,\n    graphSpecs,\n    children,\n    headerColor,\n    className,\n    noData = false,\n    emptyStatePrimaryText,\n    emptyStateImageSrc,\n    emptyStateIconSize,\n    emptyStateImageWidth,\n    emptyStateClassName,\n    emptyStateIcon,\n    ...otherProps\n  } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslation();\n\n  return (\n    <AmbientCard\n      fullWidth\n      title={title}\n      headerColor={headerColor}\n      {...otherProps}\n    >\n      {!noData ? (\n        <div>\n          {showInfoPanel && <div className={classes.infoPanel}>{children}</div>}\n          <div className={classes.graphSection}>\n            <MuiVegaLite\n              variant='verticalBarChart'\n              background='paper'\n              autoResize\n              actions={false}\n              spec={graphSpecs || {}}\n            />\n          </div>\n        </div>\n      ) : (\n        <div className={clsx(classes.emptyStateDisplay, emptyStateClassName)}>\n          <EmptyStateDisplay\n            primaryText={emptyStatePrimaryText ?? t('No results found')}\n            icon={emptyStateIcon}\n            iconSize={emptyStateIconSize}\n            imageSrc={emptyStateImageSrc}\n            imageWidth={emptyStateImageWidth}\n          />\n        </div>\n      )}\n    </AmbientCard>\n  );\n};\n\nGraphCard.propTypes = {\n  /**\n   * Optional, card title\n   */\n  title: PropTypes.string,\n\n  /**\n   * @type {?object}\n   {\n     graphSpecs: {} object see an example structure in https://vega.github.io/vega-lite/usage/typescript.html\n    }\n   */\n  graphSpecs: PropTypes.object.isRequired,\n\n  /**\n   * Optional, hide or show the top panel\n   */\n  showInfoPanel: PropTypes.bool,\n\n  /**\n   * Optional, content for the info panel behind the graph\n   */\n  children: PropTypes.node,\n\n  /**\n   * Optional, additional properties to apply some styles over the main container\n   */\n  style: PropTypes.object\n};\n"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,SAAS;EACT,eAAe;EACf,gBAAgB;EAChB,YAAY;EACZ,WAAW;EACX,SAAS;EACV;CACD,cAAc;EACZ,UAAU;EACV,SAAS;GACP,OAAO;GACP,QAAQ;GACT;EACD,iBAAiB;GACf,OAAO;GACP,QAAQ;GACT;EACD,YAAY,MAAM,QAAQ,EAAE;EAC5B,QAAQ;EACR,SAAS,UAAU,OAAO,eAAe;EAC1C;CACD,mBAAmB;EACjB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACF,EAAE;;;;AAKH,MAAa,aAAa,UAAU;CAClC,MAAM,EACJ,OACA,gBAAgB,MAChB,YACA,UACA,aACA,WACA,SAAS,OACT,uBACA,oBACA,oBACA,sBACA,qBACA,gBACA,GAAG,eACD;CACJ,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oCAAC;EACC;EACO;EACM;EACb,GAAI;IAEH,CAAC,SACA,oCAAC,aACE,iBAAiB,oCAAC,SAAI,WAAW,QAAQ,aAAY,SAAe,EACrE,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC;EACC,SAAQ;EACR,YAAW;EACX;EACA,SAAS;EACT,MAAM,cAAc,EAAE;GACtB,CACE,CACF,GAEN,oCAAC,SAAI,WAAW,KAAK,QAAQ,mBAAmB,oBAAoB,IAClE,oCAAC;EACC,aAAa,yBAAyB,EAAE,mBAAmB;EAC3D,MAAM;EACN,UAAU;EACV,UAAU;EACV,YAAY;GACZ,CACE,CAEI;;AAIlB,UAAU,YAAY;CAIpB,OAAOA,YAAU;CAQjB,YAAYA,YAAU,OAAO;CAK7B,eAAeA,YAAU;CAKzB,UAAUA,YAAU;CAKpB,OAAOA,YAAU;CAClB"}

package/dist/Grid-BHKvVKV6.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Grid } from "@material-ui/core";
+
+//#region src/UI/Grid.jsx
+const Grid$1 = (props) => {
+	const { container, item, spacing, ...otherProps } = props;
+	return /* @__PURE__ */ React.createElement(Grid, {
+		container,
+		item,
+		spacing,
+		...otherProps
+	});
+};
+
+//#endregion
+export { Grid$1 as t };
+//# sourceMappingURL=Grid-BHKvVKV6.js.map

package/dist/Grid-BHKvVKV6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-BHKvVKV6.js","names":["Grid","MuiGrid"],"sources":["../src/UI/Grid.jsx"],"sourcesContent":["import React from 'react';\nimport { Grid as MuiGrid } from '@material-ui/core';\n\nexport const Grid = props => {\n  const { container, item, spacing, ...otherProps } = props;\n\n  return (\n    <MuiGrid\n      container={container}\n      item={item}\n      spacing={spacing}\n      {...otherProps}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,MAAaA,UAAO,UAAS;CAC3B,MAAM,EAAE,WAAW,MAAM,SAAS,GAAG,eAAe;AAEpD,QACE,oCAACC;EACY;EACL;EACG;EACT,GAAI;GACJ"}

package/dist/GridFunctions-Cw1f6eYk.js

@@ -0,0 +1,150 @@
+import { c as GridStateTypeEnums } from "./unitySystemEnums-DtVX3A-I.js";
+
+//#region src/utilities/aggrid/GridFunctions.js
+const useGridFormat = () => {
+	const gridFormat = (gridApi, type) => {
+		type === "expand" && gridApi.expandAll();
+		type === "collapse" && gridApi.collapseAll();
+		type === "resize" && gridApi.sizeColumnsToFit();
+	};
+	return [gridFormat];
+};
+const useGridClear = () => {
+	const gridClear = (gridApi, gridColumnApi) => {
+		gridColumnApi.setRowGroupColumns([]);
+		gridApi.setFilterModel(null);
+		gridApi.setQuickFilter("");
+		gridApi.sizeColumnsToFit();
+		gridColumnApi.resetColumnState();
+	};
+	return [gridClear];
+};
+const useQuickFilter = () => {
+	const quickFilter = (gridApi, event) => {
+		gridApi.setQuickFilter(event?.target.value);
+	};
+	return [quickFilter];
+};
+const useExport = () => {
+	const gridExport = (gridApi, type) => {
+		type === "excel" && gridApi.exportDataAsExcel();
+		type === "csv" && gridApi.exportDataAsCsv();
+	};
+	return [gridExport];
+};
+const saveGridState = async (gridId, gridApi, gridColumnApi, execute) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return await execute({ data: gridState });
+};
+const getGridState = (gridApi, gridColumnApi, gridId) => {
+	const columnState = gridColumnApi?.getColumnState();
+	const columnGroupState = gridColumnApi?.getColumnGroupState();
+	const sortModel = gridApi.getSortModel();
+	const filterModel = gridApi.getFilterModel();
+	const isPivotMode = gridColumnApi.isPivotMode();
+	const gridState = [];
+	const columnGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column,
+		gridId,
+		values: JSON.stringify(columnState)
+	};
+	const columnGroupGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Group,
+		gridId,
+		values: JSON.stringify(columnGroupState)
+	};
+	const columnSortGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Sort,
+		gridId,
+		values: JSON.stringify(sortModel)
+	};
+	const columnFilterGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Column_Filter,
+		gridId,
+		values: JSON.stringify(filterModel)
+	};
+	const pivotGridConfiguration = {
+		gridStateTypeId: GridStateTypeEnums.Pivot_Mode,
+		gridId,
+		values: JSON.stringify(isPivotMode)
+	};
+	gridState.push(columnGridConfiguration);
+	gridState.push(columnGroupGridConfiguration);
+	gridState.push(columnSortGridConfiguration);
+	gridState.push(columnFilterGridConfiguration);
+	gridState.push(pivotGridConfiguration);
+	return gridState;
+};
+const deleteGridState = async (gridApi, gridColumnApi, deleteGridState$1) => {
+	clearGridState(gridApi, gridColumnApi);
+	return await deleteGridState$1();
+};
+const clearGridState = (gridApi, gridColumnApi) => {
+	gridColumnApi.resetColumnState();
+	gridColumnApi.resetColumnGroupState();
+	gridApi.setFilterModel({});
+	gridApi.setSortModel([]);
+	gridColumnApi.setPivotMode(false);
+	gridApi.sizeColumnsToFit();
+};
+const onFirstDataRendered = (gridApi, gridColumnApi, gridStates) => {
+	if (gridStates && gridStates.length) gridStates.forEach((state) => {
+		switch (state.gridStateTypeId) {
+			case GridStateTypeEnums.Column:
+				gridColumnApi.setColumnState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Group:
+				gridColumnApi.setColumnGroupState(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Pivot_Mode:
+				gridColumnApi.setPivotMode(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Sort:
+				gridApi.setSortModel(JSON.parse(state.values));
+				break;
+			case GridStateTypeEnums.Column_Filter:
+				gridApi.setFilterModel(JSON.parse(state.values));
+				break;
+			default: break;
+		}
+	});
+};
+
+//#endregion
+export { saveGridState as a, useGridFormat as c, onFirstDataRendered as i, useQuickFilter as l, deleteGridState as n, useExport as o, getGridState as r, useGridClear as s, clearGridState as t };
+//# sourceMappingURL=GridFunctions-Cw1f6eYk.js.map