


<MudPaper Class="flex-grow-1 w-100 h-100 ma-auto">
	<MudGrid Class="w-100 h-100">
		<MudItem xs="12" sm="4">
			<MudPaper Style="background-color:transparent" Class="w-100 justify-content-center">
				<MudChart ChartType="ChartType.Donut" Width="200px" Height="200px" InputData="@data" InputLabels="@labels" Class="ma-auto">
					<CustomGraphics>
						<text class="donut-inner-text" x="50%" y="35%" dominant-baseline="middle" text-anchor="middle" fill="black" font-family="Helvetica" font-size="20">Total</text>
						<text class="donut-inner-text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" font-family="Helvetica" font-size="50">@data.Sum().ToString()</text>
					</CustomGraphics>
				</MudChart>
			</MudPaper>

			<MudPaper Style="background-color:transparent" Class="w-100 pa-5">
				<TechHelper.Client.Pages.Common.SimpleCard Style="background-color:#ff4081">
					<BodyContent>
						<MudText>BodyContent</MudText>
					</BodyContent>
					<TitleContent>
						<MudText>TitleContent</MudText>
					</TitleContent>
					<FooterContent>
						<MudText>FooterContent</MudText>
					</FooterContent>
				</TechHelper.Client.Pages.Common.SimpleCard>

				<TechHelper.Client.Pages.Common.SimpleCard Style="background-color:#1ec8a5">
					<BodyContent>
						<MudText>BodyContent</MudText>
					</BodyContent>
					<TitleContent>
						<MudText>TitleContent</MudText>
					</TitleContent>
					<FooterContent>
						<MudText>FooterContent</MudText>
					</FooterContent>
				</TechHelper.Client.Pages.Common.SimpleCard>

				<TechHelper.Client.Pages.Common.SimpleCard Style="background-color:#4680ff">
					<TitleContent>
						<MudText Typo="Typo.body1">TitleContent</MudText>
					</TitleContent>
					<BodyContent>
						<MudText Typo="Typo.button"><b>BodyContent</b></MudText>
					</BodyContent>
					<FooterContent>
						<MudText Typo="Typo.body2">leran about this curson</MudText>
					</FooterContent>
				</TechHelper.Client.Pages.Common.SimpleCard>
			</MudPaper>
		</MudItem>

		<MudItem xs="12" sm="8">
			<MudPaper Style="background-color:transparent" Class="w-100 h-100">

				<TechHelper.Client.Pages.Common.SimpleCard Style="background-color:#c2bef8" Height="350px">
					<TitleContent>
						<MudText Typo="Typo.button"><b>Visits Summary:</b></MudText>
					</TitleContent>
					<BodyContent>
						<MudChart ChartType="ChartType.Line" LegendPosition="Position.Left" Class="pt-55" ChartSeries="@Series" XAxisLabels="@XAxisLabels" Height="110%" Width="100%" AxisChartOptions="_axisChartOptions" ChartOptions="options"></MudChart>
					</BodyContent>
					<FooterContent>
						<MudText Typo="Typo.body2">leran about this curson</MudText>
					</FooterContent>
				</TechHelper.Client.Pages.Common.SimpleCard>


@* 				<TechHelper.Client.Pages.Common.SimpleCard Style="background-color:#c2bef8" Height="100%">
					<TitleContent>
						<MudText Typo="Typo.button"><b>Visits Summary:</b></MudText>
					</TitleContent>
					<BodyContent>
						<MudDataGrid Items="@Elements" Filterable="true" FilterMode="@_filterMode" FilterCaseSensitivity="@_caseSensitivity">
							<Columns>
								<PropertyColumn Property="x => x.Number" Title="Nr" Filterable="false" />
								<PropertyColumn Property="x => x.Sign" />
								<PropertyColumn Property="x => x.Name" />
								<PropertyColumn Property="x => x.Position" Filterable="false" />
								<PropertyColumn Property="x => x.Molar" Title="Molar mass" />
								<PropertyColumn Property="x => x.Group" Title="Category" />
							</Columns>
							<PagerContent>
								<MudDataGridPager T="Element" />
							</PagerContent>
						</MudDataGrid>
					</BodyContent>
					<FooterContent>
						<MudText Typo="Typo.body2">leran about this curson</MudText>
					</FooterContent>
				</TechHelper.Client.Pages.Common.SimpleCard> *@
			</MudPaper>
		</MudItem>
	</MudGrid>
</MudPaper>




@code {
	public double[] data = { 25, 77, 28, 5 };
	public string[] labels = { "Oil", "Coal", "Gas", "Biomass" };
	private AxisChartOptions _axisChartOptions = new AxisChartOptions();
	private ChartOptions options = new ChartOptions();
	public List<ChartSeries> Series = new List<ChartSeries>()
	{
		new ChartSeries() { Name = "Series 1", Data = new double[] { 90, 79, 72, 69, 62, 62, 55, 65, 70 } },
		new ChartSeries() { Name = "Series 2", Data = new double[] { 35, 41, 35, 51, 49, 62, 69, 91, 148 } },
	};
	public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };

	Random random = new Random();
	protected override void OnInitialized()
	{
		options.InterpolationOption = InterpolationOption.NaturalSpline;
		options.YAxisFormat = "c2";
		_axisChartOptions.MatchBoundsToSize = true;
	}

	public void RandomizeData()
	{
		foreach (var series in Series)
		{
			for (int i = 0; i < series.Data.Length - 1; i++)
			{
				series.Data[i] = random.NextDouble() * 100 + 10;
			}
		}

		StateHasChanged();
	}

	void OnClickMenu(InterpolationOption interpolationOption)
	{
		options.InterpolationOption = interpolationOption;
		StateHasChanged();
	}

}