var AllInOneWidget = React.createClass({
	getInitialState: function () {
		return {
			PowerNow: "Processing...", TotalEnergy: "Processing...", MonthlyEnergy: "Processing...", YearlyEnergy: "Processing...", TreePlanted: "Processing...", Co2Offset: "Processing...", TodayEnergy: "Processing...", ActiveSites: "Processing...", TotalSites: "Processing...",
			TotalSaving: "Processing...", DailyRevenue: "Processing...", MonthlyRevenue: "Processing...", YearlyRevenue: "Processing..."
		};
	},
	componentDidMount: function () {
		this.bindData();
		var that = this;
		$("#livepowerdata").click(function (event) {
			blockUI("#powerdata");
			var WidgetUrl = "iot/api/v1/widgets?siteId=" + siteId;
			var url = host_url + WidgetUrl;
			directAjax(url, sessionData.access_token, "GET", null, function (data) {
				var widgetData;
				UpdateWidgetDataInLocalStorage(null, function (data) {
					widgetData = data;
				});
				var index = widgetData.findIndex(x => x.siteId == siteId);
				widgetData[index] = data.data[0];
				setLocalStorage("Widget_Data", widgetData);
				unBlockDignosticUI("#powerdata");
				that.bindData();
			});
		});
	},
	bindData: function () {
		var widgetData;
		UpdateWidgetDataInLocalStorage(siteId, function (data) {
			widgetData = data;
		});
		var siteList = JSON.parse(getLocalStorage("siteList"));
		activeSites = 0;
		totalSites = 0;
		totalCapacity = 0;
		$.each(siteList, function (siteKey, siteValue) {
			if (getSiteStatus(siteValue.gateways) == true) {
				activeSites = activeSites + 1;
			}
			totalSites = totalSites + 1;
			totalCapacity += siteValue.installationCapacity;
		});

		this.setState({ ActiveSites: activeSites });
		this.setState({ TotalSites: totalSites });

		var TotalCapacity = totalCapacity.toFixed(2) + " kW";
		if (totalCapacity > 999) {
			TotalCapacity = (totalCapacity / 1000.0).toFixed(2) + " MW";
		}
		this.setState({ TotalCapacity: TotalCapacity });
		var totalPower = 0;
		var totalEnergy = 0;
		var monthlyEnergy = 0;
		var yearlyEnergy = 0;
		var todayEnergy = 0;
		var Parameters = [];
		var totalMoneySaving = 0;
		var dailyRevenue = 0;
		var monthlyRevenue = 0;
		var yearlyRevenue = 0;
		var totalSaving = 0;

		d_PR = 0;
		var wSiteId;
		var siteDetails;
		d_CUF = 0;
		d_PLF = 0;
		if (window.location.pathname !== "/Home/Dashboard") {
			Parameters = window.location.search.split('&');
			Parameters = Parameters[1].split('=');
		}

		if (Parameters.length > 0 && parseInt(Parameters[1]) === 3) {
			this.setState({ TreePlanted: "N/A trees" });
			this.setState({ Co2Offset: "N/A" });
			this.setState({ TotalEnergy: "N/A" });
			this.setState({ MonthlyEnergy: "N/A" });
			this.setState({ YearlyEnergy: "N/A" });
			this.setState({ TodayEnergy: "N/A" });
			this.setState({ PowerNow: "N/A" });
			this.setState({ ActiveSites: "N/A" });
			this.setState({ TotalSites: "N/A" });
			this.setState({ TotalCapacity: "N/A" });
			this.setState({ TotalMoneySaving: "N/A" });
			this.setState({ TotalSaving: "N/A" });
			this.setState({ DailyRevenue: "N/A" });
			this.setState({ MonthlyRevenue: "N/A" });
			this.setState({ YearlyRevenue: "N/A" });
		}
		else {
			if (widgetData != undefined && widgetData != null) {
				$.each(widgetData, function (key, value) {
					totalPower += (value.siteInstallationType == SiteTypeList.RoofTopWithStringInverter) ? value.powerNow : value.powerNow / 16;
					totalEnergy += (value.siteInstallationType != SiteTypeList.RoofTopWithStringInverter) ? value.totalEnergy / UNIT_HIGHEST : value.totalEnergy;
					monthlyEnergy += value.thisMonthEnergy;
					yearlyEnergy += value.thisYearEnergy;
					todayEnergy += value.eToday;
					dailyRevenue += value.eToday;
					monthlyRevenue += value.thisMonthEnergy;
					wSiteId = value.siteId;

					if (siteId != undefined) {
						dailyRevenue = value.eToday;
						monthlyRevenue = value.thisMonthEnergy;
						yearlyRevenue = value.thisYearEnergy;
						totalSaving = (value.siteInstallationType != SiteTypeList.RoofTopWithStringInverter) ? value.totalEnergy / UNIT_HIGHEST : value.totalEnergy;
					}
				});
				monthlyEnergy = monthlyEnergy / UNIT_HIGHEST;
				yearlyEnergy = yearlyEnergy / UNIT_HIGHEST;
				todayEnergy = todayEnergy / UNIT_HIGHEST;
				totalMoneySaving = (totalEnergy * defaultRevenueRate).toFixed(2);// Updated formula: replaced defaultCostRate with defaultRevenueRate (as provided by Sagarbhai on 03-09-2025)
											

				//totalMoneySaving = new Intl.NumberFormat('en-IN', { minimumFractionDigits: 2 }).format(totalMoneySaving);
				var co2, trees;
				co2 = totalEnergy * 0.36;
				//trees = co2 / 100;
				trees = Math.round((totalEnergy * 0.82) / 20); // change as per discuss with sagarbhai 07-2025				
				if (co2 > UNIT_CONVERSION) {
					co2 = (co2 / UNIT_HIGHEST).toFixed(2) + " tonne";
				}
				else {
					co2 = co2.toFixed(2) + " kg";
				}
							
				let totalEnergyResult = getEnergyUnitsKey(totalEnergy, true);
				var TotalEnergy = totalEnergyResult.energy;
				var TotalEnergyUnit = totalEnergyResult.units;
			
				let monthlyEnergyResult = getEnergyUnitsKey(monthlyEnergy);
				var MonthlyEnergy = monthlyEnergyResult.energy;
				var MonthlyEnergyUnit = monthlyEnergyResult.units;

				let YearlyEnergy = getEnergyUnitsKey(yearlyEnergy, false, true);
			
				let todayEnergyResult = getEnergyUnitsKey(todayEnergy);
				let TodayEnergy = todayEnergyResult.energy;
				let TodayEnergyUnit = todayEnergyResult.units;
				siteDetails = getSpecificSiteDetails(wSiteId);

				d_PR = ((totalPower / UNIT_HIGHEST) / siteDetails.currentInstallation) * 100;
				var PowerNow;
				var PowerNowUnit;
				let powerValues = getFinalPowerUnit(totalPower,UNIT_CONVERSION, UNIT_HIGHEST);
				totalPower = powerValues.power;
				PowerNow = totalPower;
				PowerNowUnit = powerValues.unit;
				if (siteDetails.currentInstallation != 0 && siteDetails.currentInstallation != null) {
					d_CUF = (todayEnergy / 24 * siteDetails.currentInstallation) * 100;
				}
				if (d_CUF > 100) {
					d_CUF = 100 - ((new Date().getHours() * 3) / 10);
				}

				if (siteId != undefined) {
					var costData = JSON.parse(getLocalStorage("siteId_" + siteId + "_CostData"));
					if (costData == null) {
						getCostData(new Date().getFullYear());
						costData = JSON.parse(getLocalStorage("siteId_" + siteId + "_CostData"));
					}

					if (costData !== null) {
						$("#ratePerUnit").val(costData.unitCost);
						$("#revenuePerUnit").val(costData.revenueCost);

						this.setState({ TotalSaving: Math.round((totalSaving) * costData.unitCost) });
						this.setState({ DailyRevenue: Math.round((dailyRevenue / UNIT_HIGHEST) * costData.revenueCost) });
						this.setState({ MonthlyRevenue: Math.round((monthlyRevenue / UNIT_HIGHEST) * costData.revenueCost) });
						this.setState({ YearlyRevenue: Math.round((yearlyRevenue / UNIT_HIGHEST) * costData.revenueCost) });
					} else {
						$("#ratePerUnit").val(defaultCostRate);
						$("#revenuePerUnit").val(defaultRevenueRate);

						this.setState({ TotalSaving: Math.round((totalSaving) * defaultCostRate) });
						this.setState({ DailyRevenue: Math.round((dailyRevenue / UNIT_HIGHEST) * defaultRevenueRate) });
						this.setState({ MonthlyRevenue: Math.round((monthlyRevenue / UNIT_HIGHEST) * defaultRevenueRate) });
						this.setState({ YearlyRevenue: Math.round((yearlyRevenue / UNIT_HIGHEST) * defaultRevenueRate) });
					}
				}
				else {					
					this.setState({ MonthlyRevenue: Math.round((monthlyRevenue / UNIT_HIGHEST) * defaultRevenueRate)});
					this.setState({ DailyRevenue: Math.round((dailyRevenue / UNIT_HIGHEST) * defaultRevenueRate) });
					this.setState({ TotalMoneySaving: totalMoneySaving });
				}
				this.setState({ TreePlanted: trees.toFixed(2) + " trees" });
				this.setState({ Co2Offset: co2 });
				this.setState({ TotalEnergy: TotalEnergy });				
				this.setState({ TotalEnergyUnit: TotalEnergyUnit });
				this.setState({ MonthlyEnergy: MonthlyEnergy });
				this.setState({ MonthlyEnergyUnit: MonthlyEnergyUnit });
				this.setState({ YearlyEnergy: YearlyEnergy });
				this.setState({ TodayEnergy: TodayEnergy });
				this.setState({ TodayEnergyUnit: TodayEnergyUnit });
				this.setState({ PowerNow: PowerNow });
				this.setState({ PowerNowUnit: PowerNowUnit });
				this.setState({ PerformanceRatio: d_PR.toFixed(2) });				
			}
		}
	},
	render: function () {
		if (window.location.pathname !== "/Home/Dashboard") {
			var Parameters = window.location.search.split('&');
			Parameters = Parameters[1].split('=');
			if (Parameters.length > 0 && parseInt(Parameters[1]) !== 3) {
				return (
					<div>
						<div className="card-group">
							<div className="card notForGuest">
								<div className="card-body">
									<div className="row">
										<div className="col-5 weather-seperator">
											<div className="d-flex">
												<div className="m-r-20 m-l-20 align-self-center">
													<h1 className="text-megna"><i className="mdi mdi-buffer text-megna"></i></h1>
												</div>
												<h3 className="text-megna">Total Saving</h3>
											</div>
											<div className="d-flex">
												<div className="m-r-20 m-l-20 align-self-center">
													<h2 className="m-l-20 text-megna" id="totalSaving">{this.state.TotalSaving}</h2>
												</div>
												<h1 className="text-megna"><i className="fa fa-inr"></i></h1>
											</div>
										</div>
										<div className="col-6 pl-0 pr-0 text-center">
											<div className="col-12 pl-0 pr-0 text-center">
												<h3 className="text-weather2">Revenue</h3>
											</div>
											<div className="row ml-1 mr-1">
												<div className="col-4 pr-1 pl-1">
													<h5 className="text-weather2">Daily</h5>
													<h3 className="text-weather2 mb-1"><i className="fa fa-inr"></i></h3>
													<div className="text-center">
														<h4 id="dailyRevenue">{this.state.DailyRevenue}</h4>
													</div>
												</div>
												<div className="col-4 pr-1 pl-1">
													<h5 className="text-weather2">Monthly</h5>
													<h3 className="text-weather2 mb-1"><i className="fa fa-inr"></i></h3>
													<div className="text-center">
														<h4 id="monthlyRevenue">{this.state.MonthlyRevenue}</h4>
													</div>
												</div>
												<div className="col-4 pr-1 pl-1">
													<h5 className="text-weather2">Yearly</h5>
													<h3 className="text-weather2 mb-1"><i className="fa fa-inr"></i></h3>
													<div className="text-center">
														<h4 id="yearlyRevenue">{this.state.YearlyRevenue}</h4>
													</div>
												</div>
											</div>
										</div>
										<div className="col-1 pl-2 moreSavingDetails">
											<a id="saveCostPerUnit" className="text-megna" href="#" onClick={setYear} data-name={{ siteId }} title="Save Cost per Unit" data-toggle="modal" data-target="#saveCostPerUnitModel">
												<span>
													<i className="fa fa-edit" aria-hidden="true"></i>
												</span>
											</a>
										</div>
									</div>
								</div>
							</div>

							<div className="card">
								<div className="card-body">
									<div id="myCarouse2" className="carousel slide" data-ride="carousel">

										<div className="weatherError">
											<h4 className="text-weather1">Weather service is not available</h4>
										</div>
										<div className="carousel-inner weatherSuccess">
											<div className="carousel-item flex-column active">

												<div className="d-flex">
													<div className="m-r-20 align-self-center">
														<h1 className="text-weather1"><i className="wi wi-hot faa-shake animated faa-slow"></i></h1>
													</div>
													<div>
														<h3 className="text-weather1">Sun</h3>
														<h6 className="card-subtitle text-weather1 cityName"></h6>
													</div>
												</div>
												<div className="row">
													<div className="col-lg-12 align-self-center">
														<h2 className="font-light text-sun" id="sunTime">Processing...</h2>

													</div>

												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="card">
								<div className="card-body">
									<div id="myCarouse2" className="carousel slide" data-ride="carousel">

										<div className="weatherError">
											<h4 className="text-weather2">Weather service is not available</h4>
										</div>
										<div className="carousel-inner weatherSuccess">
											<div className="carousel-item flex-column active">
												<div className="row">
													<div className="col-5 pr-0 weather-seperator">
														<div className="d-flex">
															<div className="align-self-center">
																<div id="weatherIcon" className="fa-2x text-weather2">

																</div>

															</div>
															<div>
																<h3 className="text-weather2">Weather</h3>
																<h6 className="card-subtitle text-weather2 cityName"></h6>
															</div>
														</div>
														<div>
															<div className="align-self-center pl-3">

																<h4 className="weather"><span id="curTemprature">Processing...</span></h4>
															</div>

														</div>
													</div>
													<div className="col-7 pl-0">
														<div className="carousel-inner weatherForecastSuccess text-center text-weather2">
															<div className="row ml-1 mr-1">
																<div className="col-4 pr-1 pl-1">
																	<div>
																		<span className="nextDay1 font-weight-bold"></span>
																	</div>
																	<div>
																		<img id="imgDay1" src="" alt="" />
																	</div>
																	<h6>
																		<small className="text-weather2">
																			<span className="temperatureDay1"></span>
																			<span className="degreeCelsius"> &#8451;</span>
																		</small>
																	</h6>
																	<div className="weatherDay1">
																	</div>
																</div>
																<div className="col-4 pr-1 pl-1">
																	<div>
																		<span className="nextDay2 font-weight-bold"></span>
																	</div>
																	<div>
																		<img id="imgDay2" src="" alt="" />
																	</div>
																	<h6>
																		<small className="text-weather2">
																			<span className="temperatureDay2"></span>
																			<span className="degreeCelsius"> &#8451;</span>
																		</small>
																	</h6>
																	<div className="weatherDay2">
																	</div>
																</div>
																<div className="col-4 pr-1 pl-1">
																	<div>
																		<span className="nextDay3 font-weight-bold"></span>
																	</div>
																	<div>
																		<img id="imgDay3" src="" alt="" />
																	</div>
																	<h6>
																		<small className="text-weather2">
																			<span className="temperatureDay3"></span>
																			<span className="degreeCelsius"> &#8451;</span>
																		</small>
																	</h6>
																	<div className="weatherDay3">
																	</div>
																</div>

															</div>
														</div>
													</div>
												</div>
											</div>
											<div className="carousel-item flex-column" style={{ paddingTop: "2px" }} >
												<div className="d-flex">
													<div className="m-r-20 align-self-center">
														<h1 className="text-weather2"><i className="wi wi-humidity"></i></h1>
													</div>
													<div>
														<h3 className="text-weather2">Humidity</h3>
														<h6 className="card-subtitle text-weather2 cityName"></h6>
													</div>
												</div>
												<div className="row">
													<div className="col-lg-12 align-self-center">
														<h2 className="font-light text-weather2" id="curHumidity">Processing...</h2>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div className="card-group notForGuest">
							<div className="card">
								<div className="card-body">
									<div className="row">
										<div className="col-xlg-5 col-md-12 smallTextH3" id="powerdata">
											<h4 className="card-title">Inverter Generation
												<button className="btn btn-sm btn-refresh btn-refresh-enable float-right" id="livepowerdata" title="Refresh">
													<i className="fa fa-refresh"></i>
												</button>
											</h4>

											<div className="row">
												<div className="col-6">
													<div className="card">
														<div className="card-body">
															<div className="d-flex">
																<div className="m-r-20 align-self-center">
																	<h1 className="text-weather1"><i className="wi wi-day-sunny faa-spin animated faa-slow"></i></h1>
																</div>
																<div>
																	<h3 className="text-carbon">Power Now</h3>
																	<h6 className="card-subtitle">&nbsp;</h6>
																</div>
															</div>
															<div className="row">
																<div className="col-lg-12 align-self-center">
																	<h2 className="font-light text-carbon" id="currentPower">{this.state.PowerNow}{this.state.PowerNowUnit}</h2>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div className="col-6">
													<div className="card">
														<div className="card-body">
															<div className="d-flex">
																<div className="m-r-20 align-self-center">
																	<h1 className="text-energy"><i className="wi wi-earthquake faa-passing animated"></i></h1>
																</div>
																<div className="w-100">
																	<h3 className="text-carbon float-left">Lifetime Energy</h3> {/* <span className="small ml-1" style={{ lineHeight:3 }}>(inverter)</span> */}
																	<h6 className="card-subtitle">&nbsp;</h6>
																</div>
															</div>
															<div className="row">
																<div className="col-lg-12 align-self-center">
																	<h2 className="font-light text-carbon" id="totalEnergy">{this.state.TotalEnergy}{this.state.TotalEnergyUnit}</h2>																	
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div className="row">
												<div className="col-6">
													<div className="card">
														<div className="card-body">
															<div className="d-flex">
																<div className="m-r-20 align-self-center">
																	<h1 className="text-energy"><i className="wi wi-earthquake faa-passing animated"></i></h1>
																</div>
																<div>
																	<h3 className="text-carbon">This Month Energy</h3>
																	<h6 className="card-subtitle">&nbsp;</h6>
																</div>
															</div>
															<div className="row">
																<div className="col-lg-12 align-self-center">
																	<h2 className="font-light text-carbon" id="monthlyEnergy">{this.state.MonthlyEnergy}{this.state.MonthlyEnergyUnit}</h2>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div className="col-6">
													<div className="card">

														<div className="card-body">
															<div className="d-flex">
																<div className="m-r-20 align-self-center">
																	<h1 className="text-energy"><i className="wi wi-earthquake faa-passing animated"></i></h1>
																</div>
																<div>
																	<h3 className="text-carbon">This Year Energy</h3>
																	<h6 className="card-subtitle">&nbsp;</h6>
																</div>
															</div>
															<div className="row">
																<div className="col-lg-12 align-self-center">
																	<h2 className="font-light text-carbon" id="yearlyEnergy">{this.state.YearlyEnergy}</h2>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div className="col-xlg-4 col-md-12 ">
											<h4 className="card-title">Today's Performance</h4>
											<div className="card">
												<div className="card-body">
													<div className="">
														<div id="prChart"></div>
													</div>
												</div>
											</div>
										</div>

										<div className="col-xlg-3 col-md-12 ">
											<h4 className="card-title">Environmental profit</h4>
											<div className="card">
												<div className="card-body">
													<div className="d-flex">
														<div className="m-r-20 align-self-center">
															<h1 className="text-megna"><i className="fa fa-tree faa-pulse animated"></i></h1>
														</div>
														<div>
															<h3 className="text-megna">Tree Planted</h3>
															<h6 className="card-subtitle">&nbsp;</h6>
														</div>
													</div>
													<div className="row">
														<div className="col-lg-12 align-self-center">
															<h2 className="font-light text-megna" id="treePlanted">{this.state.TreePlanted}</h2>
														</div>

													</div>
												</div>
											</div>
											<div className="card">
												<div className="card-body">
													<div className="d-flex">
														<div className="m-r-20 align-self-center">
															<h1 className="text-carbon"><i className="fa fa-bar-chart faa-pulse animated"></i></h1>
														</div>
														<div>
															<h3 className="text-carbon">Save Standard Coal</h3>
															<h6 className="card-subtitle">&nbsp;</h6>
														</div>
													</div>
													<div className="row">
														<div className="col-lg-12 align-self-center">
															<h2 className="font-light text-carbon" id="Co2Offset">{this.state.Co2Offset}</h2>
														</div>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div >
				);
			}
			else {
				return (
					<div>
						<div className="card-group">
							<div className="card">
								<div className="card-body">
									<div id="myCarouse2" className="carousel slide" data-ride="carousel">

										<div className="weatherError">
											<h4 className="text-weather1">Weather service is not available</h4>
										</div>
										<div className="carousel-inner weatherSuccess">
											<div className="carousel-item flex-column active">

												<div className="d-flex">
													<div className="m-r-20 align-self-center">
														<h1 className="text-weather1"><i className="wi wi-hot faa-shake animated faa-slow" /></h1>
													</div>
													<div>
														<h3 className="text-weather1">Sun</h3>
														<h6 className="card-subtitle text-weather1 cityName" />
													</div>
												</div>
												<div className="row">
													<div className="col-lg-12 align-self-center">
														<h2 className="font-light text-sun" id="sunTime">Processing...</h2>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="card">
								<div className="card-body">
									<div id="myCarouse3" className="carousel slide" data-ride="carousel">
										<div className="weatherError">
											<h4 className="text-weather2">Weather service is not available</h4>
										</div>
										<div className="carousel-inner weatherSuccess">
											<div className="carousel-item flex-column active">

												<div className="d-flex">
													<div className="m-r-20 align-self-center">
														<h1 className="text-weather3"><i className="wi wi-barometer faa-shake animated faa-slow" /></h1>
													</div>
													<div>
														<h3 className="text-weather3">Wind Speed</h3>
														<h6 className="card-subtitle text-weather3 cityName" />
													</div>
												</div>
												<div className="row">
													<div className="col-lg-12 align-self-center">
														<h2 className="font-light text-weather3" id="curWind">Processing...</h2>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div className="card">
								<div className="card-body">
									<div id="myCarouse2" className="carousel slide" data-ride="carousel">

										<div className="weatherError">
											<h4 className="text-weather2">Weather service is not available</h4>
										</div>
										<div className="carousel-inner weatherSuccess">
											<div className="carousel-item flex-column active">
												<div className="d-flex">
													<div className="m-r-20 align-self-center">
														<div id="weatherIcon" className="fa-2x text-weather2" />
													</div>
													<div>
														<h3 className="text-weather2">Weather</h3>
														<h6 className="card-subtitle text-weather2 cityName" />
													</div>
												</div>
												<div className="row">
													<div className="col-lg-12 align-self-center">
														<h2 className="font-light text-weather2"><span id="curTemprature">Processing...</span></h2>
													</div>
												</div>
											</div>
											<div className="carousel-item flex-column" style={{ paddingTop: "2px" }} >
												<div className="d-flex">
													<div className="m-r-20 align-self-center">
														<h1 className="text-weather2"><i className="wi wi-humidity" /></h1>
													</div>
													<div>
														<h3 className="text-weather2">Humidity</h3>
														<h6 className="card-subtitle text-weather2 cityName" />
													</div>
												</div>
												<div className="row">
													<div className="col-lg-12 align-self-center">
														<h2 className="font-light text-weather2" id="curHumidity">Processing...</h2>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				);
			}
		}
		else {
			return (
				<div className="card-container">
					<div className="row">
						<div className="col-12 col-sm-12 col-md-6 col-lg-3">
							<div className="card dashboard-card  card-stats border-0">
								<div className="card-header card-header-icon">
									<div className="card-icon card-w-warning">
										<h3 className="text-white box m-b-0">
											<i className="wi wi-day-sunny"></i>
										</h3>
									</div>
									<div className="text-warning text-start mb-1 mt-2 card-title-font">{this.state.PowerNow}<span className="energy-unit">{this.state.PowerNowUnit}</span></div>
								</div>
								<div className="value-pair">
									<div>
										<div className="text-warning value-text">Power Now</div>
									</div>
									<div className="text-end">
									</div>
								</div>
							</div>
						</div>
						<div className="col-12 col-sm-12 col-md-6 col-lg-3">
							<div className="card dashboard-card  card-stats border-0">
								<div className="card-header card-header-icon">
									<div className="card-icon card-w-success">
										<h3 className="text-white box m-b-0">
											<i className="wi wi-earthquake"></i>
										</h3>
									</div>
									<div className="text-success text-start mb-1 mt-2 card-title-font">{this.state.MonthlyEnergy}<span className="energy-unit">{this.state.MonthlyEnergyUnit}</span></div>
								</div>
								<div className="value-pair mt-1">
									<div>
										<div className="text-success value-text">This Month Energy</div>
									</div>
									<div className="text-end">
										<div className="value-title">Earnings:
											<span className="h6 mt-1"> ₹ </span><span className="value-text">{formatRevenue(this.state.MonthlyRevenue)}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div className="col-12 col-sm-12 col-md-6 col-lg-3">
							<div className="card dashboard-card  card-stats border-0">
								<div className="card-header card-header-icon">
									<div className="card-icon card-w-danger">
										<h3 className="text-white box m-b-0">
											<i className="wi wi-earthquake"></i>
										</h3>
									</div>
									<div className="card-todays-text-color text-start mb-1 mt-2 card-title-font">{this.state.TodayEnergy}<span className="energy-unit">{this.state.TodayEnergyUnit}</span></div>
								</div>
								<div className="value-pair mt-1">
									<div>
										<div className="card-todays-text-color value-text">Today's Energy</div>
									</div>
									<div className="text-end">
										<div className="value-title">Earnings:
											<span className="h6 mt-1"> ₹ </span><span className="value-text">{formatRevenue(this.state.DailyRevenue)}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div className="col-12 col-sm-12 col-md-6 col-lg-3">
							<div className="card dashboard-card  card-stats border-0">
								<div className="card-header card-header-icon">
									<div className="card-icon card-w-info">
										<h3 className="text-white box m-b-0"><i className="mdi mdi-dice-6 single"></i></h3>
									</div>
									<div className="card-lifetime-text-color text-start mb-1 mt-2 card-title-font">{this.state.TotalEnergy}<span className="energy-unit">{this.state.TotalEnergyUnit}</span></div>																		
								</div>
								<div className="value-pair mt-1">
									<div>
										<div className="card-lifetime-text-color value-text">Lifetime Energy</div>
									</div>
									<div className="text-end">
										<div className="value-title">Earnings:											
											<span className="h6 mt-1"> ₹ </span><span className="value-text">{formatRevenue(this.state.TotalMoneySaving)}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		}
	}	
});

var PowerWidget = React.createClass({
	render: function () {
		this.access_token = sessionData.access_token;
		this.WidgetUrl = siteId == undefined ? "iot/api/v1/widgets" : "iot/api/v1/widgets?siteId=" + siteId + "";
		return (<AllInOneWidget url={host_url + this.WidgetUrl} access_token={this.access_token} />);
	}
});

function formatRevenue(revenue) {	
	if (revenue != undefined) {
		if (revenue >= UNIT_HIGHEST_gWh) {
			return (revenue / UNIT_HIGHEST_gWh).toFixed(2) + " M";
		}
		else if (revenue >= UNIT_HIGHEST) {
			return (revenue / UNIT_HIGHEST).toFixed(2) + " K";
		}
		else {
			return revenue.toString();
		}
	}
}
ReactDOM.render(<PowerWidget />, document.getElementById('widgetDataDiv'));