protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "donut-chart");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "main");
SVG svg = new SVG()
{
{ "width", "80%" }, { "height", "80%" }, { "viewBox", "0 0 42 42" }
};
Rectangle rect = new Rectangle()
{
{ "class", "background-rect" }
};
Circle hole = new Circle()
{
{ "class", "hole" }, { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }
};
Circle ring = new Circle()
{
{ "class", "ring" }, { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }
};
double counterClockwiseDefaultOffset = 25;
double preceedingTotalPercent = 0;
double offset = counterClockwiseDefaultOffset;
List <Circle> segments = new List <Circle>();
string[] inputDataArr = InputData.Split(',');
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
int counter = 0;
foreach (string dataStr in inputDataArr)
{
double data = 0;
bool isDouble2 = double.TryParse(dataStr, out data);
double percent = data;
double reversePercent = 100 - percent;
offset = 100 - preceedingTotalPercent + counterClockwiseDefaultOffset;
preceedingTotalPercent = preceedingTotalPercent + percent;
Circle segment = new Circle()
{
{ "class", "segment-" + (1 + counter++).ToString() }, { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "stroke-dasharray", percent + " " + reversePercent }, { "stroke-dashoffset", offset.ToString() }
};
segments.Add(segment);
}
Text numberText = new Text()
{
{ "class", "donut-number" }, { "content", PrimaryText }
};
Text labelText = new Text()
{
{ "class", "donut-label" }, { "content", SecondaryText }
};
Group grp = new Group()
{
{ "class", "donut-text" }
};
grp.AddItems(numberText, labelText);
svg.AddItems(rect, hole, ring);
foreach (Circle segment in segments)
{
svg.AddItems(segment);
}
svg.AddItems(grp);
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.OpenElement(++seq, "figcaption");
builder.AddAttribute(++seq, "class", "donut-key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "donut-key-list");
builder.AddAttribute(++seq, "aria-hidden", "true");
builder.AddAttribute(++seq, "style", "list-style-type: none;");
counter = 0;
foreach (string dataStr in inputDataArr)
{
double data = double.Parse(dataStr);
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "legend-dot-" + (counter + 1).ToString());
builder.CloseElement();
string labels = "";
if (counter < inputLabelsArr.Length)
{
labels = inputLabelsArr[counter];
counter++;
}
builder.AddContent(++seq, labels + " " + "(" + data.ToString() + "%)");
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
}
//1. xaxis text labels dx dy
//2. expose gridyunits
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "line-chart");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "main");
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
string[] xAxisLabelsArr = XAxisLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
int numLines = 0;
if (InputSeries1 != null)
{
numLines++;
}
if (InputSeries2 != null)
{
numLines++;
}
if (InputSeries3 != null)
{
numLines++;
}
if (InputSeries4 != null)
{
numLines++;
}
if (InputSeries5 != null)
{
numLines++;
}
if (InputSeries6 != null)
{
numLines++;
}
if (InputSeries7 != null)
{
numLines++;
}
if (InputSeries8 != null)
{
numLines++;
}
if (InputSeries9 != null)
{
numLines++;
}
if (InputSeries10 != null)
{
numLines++;
}
string[] inputDataArr = new string[numLines];
if (InputSeries1 != null)
{
inputDataArr[0] = InputSeries1;
}
if (InputSeries2 != null)
{
inputDataArr[1] = InputSeries2;
}
if (InputSeries3 != null)
{
inputDataArr[2] = InputSeries3;
}
if (InputSeries4 != null)
{
inputDataArr[3] = InputSeries4;
}
if (InputSeries5 != null)
{
inputDataArr[4] = InputSeries5;
}
if (InputSeries6 != null)
{
inputDataArr[5] = InputSeries6;
}
if (InputSeries7 != null)
{
inputDataArr[6] = InputSeries7;
}
if (InputSeries8 != null)
{
inputDataArr[7] = InputSeries8;
}
if (InputSeries9 != null)
{
inputDataArr[8] = InputSeries9;
}
if (InputSeries10 != null)
{
inputDataArr[9] = InputSeries10;
}
double maxY = 0.0;
int numValues = 0;
int numXLabels = xAxisLabelsArr.Length;
foreach (string iData in inputDataArr)
{
string[] inputLineArr = iData.Split(',');
double[] doubleAry = new double[inputLineArr.Length];
if (numValues < inputLineArr.Length)
{
numValues = inputLineArr.Length;
}
for (int i = 0; i < inputLineArr.Length; i++)
{
double data = 0;
bool isDouble2 = double.TryParse(inputLineArr[i], out data);
doubleAry[i] = data;
if (maxY < data)
{
maxY = data;
}
}
}
double boundHeight = 150.0;
double boundWidth = 150.0;
SVG svg = new SVG()
{
{ "width", "100%" }, { "height", "100%" }, { "viewBox", "0 0 150 150" }
};
Rectangle rect = new Rectangle()
{
{ "class", "background-rect" }
};
svg.AddItems(rect);
/*
* int numHorizontalLines = 10;
* int numVerticalLines = 10;
*/
double gridYUnits = 10;
double gridXUnits = 10; //not required
//1. Determine number of input values in xaxis and use it for numVerticalLines
int numVerticalLines = numValues;
//2. Detemine max value in yaxis and then use it calculate numHorizontalLines
int numHorizontalLines = ((int)(maxY / gridYUnits)) + 1;
double verticalStartSpace = 25.0;
double horizontalStartSpace = 25.0;
double verticalEndSpace = 25.0;
double horizontalEndSpace = 25.0;
double verticalSpace = (boundHeight - verticalStartSpace - verticalEndSpace) / (numHorizontalLines);
double horizontalSpace = (boundWidth - horizontalStartSpace - horizontalEndSpace) / (numVerticalLines);
double totalGridWidth = ((double)(numVerticalLines - 1)) * horizontalSpace;
double totalGridHeight = ((double)(numHorizontalLines - 1)) * verticalSpace;
System.Diagnostics.Debug.WriteLine("TotalGridHeight:" + totalGridHeight + ":" + verticalSpace);
//Horizontal Lines
double y = verticalStartSpace;
double startGridY = 0;
for (int counter = 0; counter <= numHorizontalLines; counter++)
{
Path path = new Path()
{
{ "class", "horizontal-grid-lines" }, { "d", "M " + horizontalStartSpace.ToString() + " " + (boundHeight - y).ToString() + " L " + (boundWidth - horizontalEndSpace).ToString() + " " + (boundHeight - y).ToString() }
};
Text label = new Text()
{
{ "class", "y-axis-labels" }, { "x", (horizontalStartSpace - 2).ToString() }, { "y", (boundHeight - y).ToString() }, { "content", (startGridY).ToString() }
};
svg.AddItems(path, label);
//System.Diagnostics.Debug.WriteLine("Y:" + y);
y = y + verticalSpace;
startGridY = startGridY + gridYUnits;
//note : gridYUnits is the value the user see
//verticalSpace is the internal/actual value used to represent gridYUnits on the chart.
}
//Chart Line
double gridx = 0, gridy = 0;
gridx = horizontalStartSpace;
gridy = boundHeight - verticalStartSpace;
int colorcounter = 0;
foreach (string iData in inputDataArr)
{
string chartLine = "";
double gridValueX = 0;
double gridValueY = 0;
bool firstTime = true;
string[] inputLineArr = iData.Split(',');
double[] intAry = new double[inputLineArr.Length];
for (int i = 0; i < inputLineArr.Length; i++)
{
double data = 0;
bool isDouble2 = double.TryParse(inputLineArr[i], out data);
intAry[i] = data;
}
foreach (int i in intAry)
{
if (firstTime)
{
chartLine = chartLine + "M ";
firstTime = false;
gridValueX = horizontalStartSpace;
gridValueY = verticalStartSpace;
double gridValue = ((double)i) * verticalSpace / gridYUnits;
gridValueY = boundHeight - (gridValueY + gridValue);
chartLine = chartLine + gridValueX.ToString() + " " + gridValueY.ToString();
}
else
{
chartLine = chartLine + " L ";
gridValueX = gridValueX + horizontalSpace;
gridValueY = verticalStartSpace;
//if 5 verticalSapce represents 10 gridYUnits
//when you have 10 it becomes 10*5/10=5
double gridValue = ((double)i) * verticalSpace / gridYUnits;
gridValueY = boundHeight - (gridValueY + gridValue);
chartLine = chartLine + gridValueX.ToString() + " " + gridValueY.ToString();
}
}
Path linepath = new Path()
{
{ "class", "line-" + (colorcounter + 1).ToString() }, { "d", chartLine }
};
colorcounter++;
svg.AddItems(linepath);
}
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
int xLabelsCounter = 0;
for (int counter = 0; counter <= numVerticalLines; counter++)
{
Path path = new Path()
{
{ "class", "vertical-grid-lines" }, { "d", "M " + x.ToString() + " " + (boundHeight - verticalStartSpace).ToString() + " L " + x.ToString() + " " + (verticalEndSpace).ToString() }
};
string xLabels = "";
if (xLabelsCounter < numXLabels)
{
xLabels = xAxisLabelsArr[xLabelsCounter++];
}
Text label = new Text()
{
{ "class", "x-axis-labels" }, { "transform", "translate(" + x.ToString() + "," + (boundHeight - verticalStartSpace + 5).ToString() + ")" }, { "dx", "+1em" }, { "dy", "0.30em" }, { "content", xLabels }
};
//not required. just need number of grid lines
startGridX = startGridX + gridXUnits;
svg.AddItems(path, label);
x = x + horizontalSpace;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.OpenElement(++seq, "figcaption");
builder.AddAttribute(++seq, "class", "key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "key-list");
colorcounter = 0;
foreach (string iData in inputDataArr)
{
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "legend-" + (colorcounter + 1).ToString());
builder.CloseElement();
string label = "";
if (colorcounter < inputLabelsArr.Length)
{
label = inputLabelsArr[colorcounter];
}
builder.AddContent(++seq, label);
builder.CloseElement();
colorcounter++;
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
}