protected override void Write(BlazorRenderer renderer, EmphasisInline emphasis)
{
var elementName = GetDefaultTag(emphasis);
if (elementName != null)
{
renderer.OpenElement(elementName);
renderer.WriteChildren(emphasis);
renderer.CloseElement();
}
else
{
renderer.WriteChildren(emphasis);
}
}
public override void Render(BlazorRenderer renderer)
{
renderer.SetPrimitiveTopology(PrimitiveTopology.Lines);
renderer.SetShader(ShaderType.LineShader);
renderer.SetVertexBuffer(Buffer);
renderer.BufferLayoutBuilder.Create();
renderer.BufferLayoutBuilder.AddFloat3();
renderer.BufferLayoutBuilder.AddFloat4();
renderer.BufferLayoutBuilder.Use();
renderer.SetIndexBuffer(Indices);
renderer.DrawIndexed(Indices.Length);
}
protected override void Write(BlazorRenderer renderer, FootnoteGroup footnotes)
{
renderer.OpenElement("div");
renderer.AddAttribute("class", "footnotes");
renderer.AddMarkupContent("<hr />");
renderer.OpenElement("ol");
for (int i = 0; i < footnotes.Count; i++)
{
var footnote = (Footnote)footnotes[i];
renderer.OpenElement("li");
renderer.AddAttribute("id", $"fn:{footnote.Order}");
renderer.WriteChildren(footnote);
renderer.CloseElement();
}
renderer.CloseElement();
renderer.CloseElement();
}
protected override void Write(BlazorRenderer renderer, FootnoteLink link)
{
renderer.OpenElement("a");
if (link.IsBackLink)
{
renderer.AddAttribute("class", "footnote-back-ref");
renderer.AddAttribute("href", $"#fnref:{link.Index}");
renderer.AddContent("↩");
}
else
{
var order = link.Footnote.Order;
renderer.AddAttribute("id", $"#fnref:{link.Index}");
renderer.AddAttribute("class", "footnote-ref");
renderer.AddAttribute("href", $"#fn:{order}");
renderer.AddMarkupContent($"<sup>{order}</sup>");
}
renderer.CloseElement();
}
protected override void Write(BlazorRenderer renderer, LinkInline link)
{
var url = link.GetDynamicUrl != null?link.GetDynamicUrl() ?? link.Url : link.Url;
if (link.IsImage)
{
renderer.OpenElement("img");
renderer.AddAttribute("src", url);
}
else
{
renderer.OpenElement("a");
renderer.AddAttribute("href", url);
}
if (!string.IsNullOrEmpty(link.Title))
{
renderer.AddAttribute("title", link.Title);
}
renderer.WriteAttributes(link);
renderer.WriteChildren(link);
renderer.CloseElement();
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "piechart-main");
/*
* <svg width="84%" height="84%" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);margin-left:8px;margin-top:20px">
* <path fill="#ce4b99" d="M 1 0 A 1 1 0 0 1 0.8090169943749475 0.5877852522924731 L 0 0" />
* <path fill="#27A844" d="M 0.8090169943749475 0.5877852522924731 A 1 1 0 1 1 -1.8369701987210297e-16 -1 L 0 0" />
* <path fill="#377bbc" d="M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.9510565162951535 -0.3090169943749476 L 0 0" />
* </svg>
* //SVG svg = new SVG() { { "width", "70%" }, { "height", "70%" }, { "viewBox", "-1 -1 2 2" },{ "style", "transform: rotate(-90deg);margin-left:20px;margin-top:10px" } };
* //SVG svg = new SVG() { { "width", "100%" }, { "height", "100%" }, { "viewBox", "0 0 2 2" },{ "style", "transform: rotate(-90deg);" } };
* //Rectangle rect = new Rectangle() { { "width", "100%" }, { "height", "100%" }, { "fill", "cyan" } };
* //Rectangle rect = new Rectangle() { { "width", "50%" }, { "height", "50%" }, { "fill", "cyan" } };
*/
int[] inputData = { 30, 30, 40 };
string[] colors = { "#ce4b99", "#27A844", "#377bbc" };
string[] labels = { "App Store", "Website", "Partners" };
string[] inputDataArr = InputData.Split(',');
SVG svg = new SVG()
{
{ "width", "100%" }, { "height", "100%" }, { "viewBox", "-1 -1 2 2" }, { "style", "transform: rotate(-90deg)" }
};
//Rectangle rect = new Rectangle() { { "width", "100%" }, { "height", "100%" }, { "fill", "cyan" } };
//svg.AddItems(rect);
double x, y;
double px = 0, py = 0;
double totalPercent = 0;
string prStr = pieRadius.ToString();
for (int icounter = 0; icounter < inputDataArr.Length; icounter++)
{
double percent = double.Parse(inputDataArr[icounter]) / 100;
totalPercent = totalPercent + percent;
getCoordinatesForPercent(totalPercent, out x, out y);
Path path = null;
if (icounter == 0)
{
path = new Path()
{
{ "fill", colors[icounter] }, { "d", "M " + prStr + " 0 A " + prStr + " " + prStr + " 0 0 1 " + x + " " + y + " L 0 0" }
}
}
;
else
{
if (percent > 0.5)
{
path = new Path()
{
{ "fill", colors[icounter] }, { "d", "M " + px + " " + py + " A " + prStr + " " + prStr + " 0 1 1 " + x + " " + y + " L 0 0" }
}
}
;
else
{
path = new Path()
{
{ "fill", colors[icounter] }, { "d", "M " + px + " " + py + " A " + prStr + " " + prStr + " 0 0 1 " + x + " " + y + " L 0 0" }
}
};
}
svg.AddItems(path);
px = x; py = y;
}
/*
* Path path1 = new Path() { { "fill", "#ce4b99" }, { "d", "M " + prStr + " 0 A " + prStr + " " + prStr + " 0 0 1 " + x + " " + y + " L 0 0" } };
* getCoordinatesForPercent(0.1 + 0.65, out x, out y);
* Path path2 = new Path() { { "fill", "#27A844" }, { "d", "M " + px + " " + py + " A " + prStr + " " + prStr + " 0 1 1 " + x + " " + y + " L 0 0" } };
* px = x; py = y;
* getCoordinatesForPercent(0.1 + 0.65 + 0.25, out x, out y);
* Path path3 = new Path() { { "fill", "#377bbc" }, { "d", "M " + px + " " + py + " A " + prStr + " " + prStr + " 0 0 1 " + x + " " + y + " L 0 0" } };
* svg.AddItems(path1, path2, path3);
*/
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
/*
* //Path path1 = new Path() { { "fill", "#ce4b99" }, { "d", "M 1 0 A 1 1 0 0 1 0.8090169943749475 0.5877852522924731 L 0 0" } };
* Path path1 = new Path() { { "fill", "#ce4b99" }, { "d", "M 1 0 A 1 1 0 0 1 " + x + " " + y + " L 0 0" } };
* getCoordinatesForPercent(0.1+0.65, out x, out y);
*
* //Path path2 = new Path() { { "fill", "#27A844" }, { "d", "M 0.8090169943749475 0.5877852522924731 A 1 1 0 1 1 -1.8369701987210297e-16 -1 L 0 0" } };
* Path path2 = new Path() { { "fill", "#27A844" }, { "d", "M "+px+" "+py+ " A 1 1 0 1 1 "+x+" "+y+" L 0 0" } };
* px = x; py = y;
* getCoordinatesForPercent(0.1 + 0.65 +0.25, out x, out y);
* //Path path3 = new Path() { { "fill", "#377bbc" }, { "d", "M -1.8369701987210297e-16 -1 A 1 1 0 0 1 0.9510565162951535 -0.3090169943749476 L 0 0" } };
* Path path3 = new Path() { { "fill", "#377bbc" }, { "d", "M " + px + " " + py + " A 1 1 0 0 1 " + x + " " + y + " L 0 0" } };
* svg.AddItems(path1, path2, path3);
* //svg.AddItems(rect);
*/
builder.OpenElement(++seq, "figcaption");
builder.AddAttribute(++seq, "class", "piechart-key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "piechart-key-list");
builder.AddAttribute(++seq, "aria-hidden", "true");
builder.AddAttribute(++seq, "style", "list-style-type: none;");
int counter = 0;
foreach (string dataStr in inputDataArr)
{
int data = int.Parse(dataStr);
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "round-dot");
builder.AddAttribute(++seq, "style", "background-color:" + colors[counter]);
builder.CloseElement();
builder.AddContent(++seq, labels[counter++] + " " + "(" + data.ToString() + ")");
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
}
}
protected override void Write(BlazorRenderer renderer, LiteralInline literalInline)
{
renderer.Write(literalInline.Content);
}
public abstract void Render(BlazorRenderer renderer);
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "vertical-bar-chart");
builder.OpenElement(++seq, "div");
string[] inputDataArr = InputData.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
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);
double[] dAry = new double[inputDataArr.Length];
int i = 0;
double max = 0.0;
foreach (string iData in inputDataArr)
{
double data = 0;
bool isDouble2 = double.TryParse(iData, out data);
dAry[i++] = data;
if (max < data)
{
max = data;
}
}
double gridYUnits = 10;
double gridXUnits = 10;
//1. Determine number of input data values and use it for numVerticalLines
int numVerticalLines = i;
//2. Detemine max bar value and then use it calculate numHorizontalLines
int numHorizontalLines = (int)(max / gridYUnits);
//int numHorizontalLines = 10;
//int numVerticalLines = 10;
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;
//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);
y = y + verticalSpace;
startGridY = startGridY + gridYUnits;
}
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
i = 0;
for (int counter = 0; counter < numVerticalLines; counter++)
{
string xLabels = "";
if (counter < inputLabelsArr.Length)
{
xLabels = inputLabelsArr[counter];
}
Text label = new Text()
{
{ "class", "x-axis-labels" }, { "transform", "translate(" + x.ToString() + "," + (boundHeight - verticalStartSpace + 5).ToString() + ") rotate(-40)" }, { "dx", "+1em" }, { "dy", "0.30em" }, { "content", xLabels }
};
startGridX = startGridX + gridXUnits;
if (i < (inputDataArr.Length))
{
Rectangle rectangle = new Rectangle()
{
{ "class", "bar" }, { "x", (x).ToString() }, { "y", (boundHeight - verticalStartSpace - (dAry[i] / max) * numHorizontalLines * verticalSpace).ToString() }, { "height", (dAry[i] / max) * numHorizontalLines * verticalSpace + "px" }
};
svg.AddItems(label, rectangle);
i++;
}
else
{
svg.AddItems(label);
}
x = x + horizontalSpace;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
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();
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "doughnut-main");
SVG svg = new SVG()
{
{ "width", "100%" }, { "height", "100%" }, { "viewBox", "0 0 42 42" }
};
Rectangle rect = new Rectangle()
{
{ "width", "100%" }, { "height", "100%" }, { "fill", "white" }
};
Circle hole = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "#fff" }
};
Circle ring = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "3" }, { "stroke", "#d2d3d4" }
};
Circle segment1 = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", "#ce4b99" }, { "stroke-dasharray", "40 60" }, { "stroke-dashoffset", "25" }
};
Circle segment2 = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", "#377bbc" }, { "stroke-dasharray", "20 80" }, { "stroke-dashoffset", "85" }
};
Circle segment3 = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", "#27A844" }, { "stroke-dasharray", "40 60" }, { "stroke-dashoffset", "65" }
};
Text numberText = new Text()
{
{ "x", "50%" }, { "y", "50%" }, { "class", "doughnut-number" }, { "content", "100" }
};
Text labelText = new Text()
{
{ "x", "50%" }, { "y", "50%" }, { "class", "doughnut-label" }, { "content", "Sales" }
};
Group grp = new Group()
{
{ "class", "doughnut-text" }
};
grp.AddItems(numberText, labelText);
svg.AddItems(rect, hole, ring, segment1, segment2, segment3, grp);
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.OpenElement(++seq, "figcaption");
builder.AddAttribute(++seq, "class", "doughnut-key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "doughnut-key-list");
builder.AddAttribute(++seq, "aria-hidden", "true");
builder.AddAttribute(++seq, "style", "list-style-type: none;");
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "round-dot dot-red");
builder.CloseElement();
builder.AddContent(++seq, "App Store (40)");
builder.CloseElement();
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "round-dot dot-green");
builder.CloseElement();
builder.AddContent(++seq, "Website (20)");
builder.CloseElement();
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "round-dot dot-blue");
builder.CloseElement();
builder.AddContent(++seq, "Partners (40)");
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
/*
* builder.OpenElement(seq, "figure");
* builder.OpenElement(++seq, "div");
* builder.AddAttribute(++seq, "class", "doughnut-main");
*
* builder.OpenElement(++seq, "svg");
* builder.AddAttribute(++seq, "width", "100%");
* builder.AddAttribute(++seq, "height", "100%");
* builder.AddAttribute(++seq, "viewBox", "0 0 42 42");
*
* builder.OpenElement(++seq, "rect");
* builder.AddAttribute(++seq, "width", "100%");
* builder.AddAttribute(++seq, "height", "100%");
* builder.AddAttribute(++seq, "fill", "white");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "class", "hole");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "#fff");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#d2d3d4");
* builder.AddAttribute(++seq, "stroke-width", "3");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#ce4b99");
* builder.AddAttribute(++seq, "stroke-width", "5");
* builder.AddAttribute(++seq, "stroke-dasharray", "40 60");
* builder.AddAttribute(++seq, "stroke-dashoffset", "25");
* builder.OpenElement(++seq, "title");
* builder.AddContent(++seq, "App Store");
* builder.CloseElement();
* builder.OpenElement(++seq, "desc");
* builder.AddContent(++seq, "40% (40 out of 100)");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#27A844");
* builder.AddAttribute(++seq, "stroke-width", "5");
* builder.AddAttribute(++seq, "stroke-dasharray", "20 80");
* builder.AddAttribute(++seq, "stroke-dashoffset", "85");
* builder.OpenElement(++seq, "title");
* builder.AddContent(++seq, "Website");
* builder.CloseElement();
* builder.OpenElement(++seq, "desc");
* builder.AddContent(++seq, "20% (20 out of 100)");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#377bbc");
* builder.AddAttribute(++seq, "stroke-width", "5");
* builder.AddAttribute(++seq, "stroke-dasharray", "40 60");
* builder.AddAttribute(++seq, "stroke-dashoffset", "65");
* builder.OpenElement(++seq, "title");
* builder.AddContent(++seq, "Partners");
* builder.CloseElement();
* builder.OpenElement(++seq, "desc");
* builder.AddContent(++seq, "40% (40 out of 100)");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "g");
* builder.AddAttribute(++seq, "class", "doughnut-text");
* builder.OpenElement(++seq, "text");
* builder.AddAttribute(++seq, "x", "50%");
* builder.AddAttribute(++seq, "y", "50%");
* builder.AddAttribute(++seq, "class", "doughnut-number");
* builder.AddContent(++seq, "100");
* builder.CloseElement();
* builder.OpenElement(++seq, "text");
* builder.AddAttribute(++seq, "x", "50%");
* builder.AddAttribute(++seq, "y", "50%");
* builder.AddAttribute(++seq, "class", "doughnut-label");
* builder.AddContent(++seq, "Sales");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "figcaption");
* builder.AddAttribute(++seq, "class", "doughnut-key");
* builder.OpenElement(++seq, "ul");
* builder.AddAttribute(++seq, "class", "doughnut-key-list");
* builder.AddAttribute(++seq, "aria-hidden", "true");
* builder.AddAttribute(++seq, "style", "list-style-type: none;");
*
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot dot-red");
* builder.CloseElement();
* builder.AddContent(++seq, "App Store (40)");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot dot-green");
* builder.CloseElement();
* builder.AddContent(++seq, "Website (20)");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot dot-blue");
* builder.CloseElement();
* builder.AddContent(++seq, "Partners (40)");
* builder.CloseElement();
*
* builder.CloseElement();
* builder.CloseElement();
*
* builder.CloseElement();
*/
}
protected override void Write(BlazorRenderer renderer, CodeInline code)
{
renderer.OpenElement("code");
renderer.AddContent(code.Content);
renderer.CloseElement();
}
public BlazorGraphics2D(BlazorRenderer renderer, double width, double height)
{
this.renderer = renderer;
screenSize = new Vector2D(width, height);
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "doughnut-main");
SVG svg = new SVG()
{
{ "width", "100%" }, { "height", "100%" }, { "viewBox", "0 0 42 42" }
};
Rectangle rect = new Rectangle()
{
{ "width", "100%" }, { "height", "100%" }, { "fill", "white" }
};
Circle hole = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "#fff" }
};
Circle ring = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "3" }, { "stroke", "#d2d3d4" }
};
//int[] inputData = { 40, 20, 40 };
int[] inputData = { 30, 30, 40 };
//string[] colors = { "#ce4b99", "#27A844", "#377bbc" };
//string[] colors = { "#ff0000", "#ffff00", "#0000ff", "#fccc1a", "#fefe33", "#b2d732", "#66b032", "#347c98", "#0247fe", "#4424d6","#8601af","#c21460" };
string[] colors = { "#fe2712", "#fc600a", "#fb9902", "#fccc1a", "#fefe33", "#b2d732", "#66b032", "#347c98", "#0247fe", "#4424d6", "#8601af", "#c21460" };
//string[] colors = {"#fe2712", "#fefe33","#0247fe","#fc600a","#b2d732","#4424d6","#fb9902","#66b032","#8601af","#fccc1a","#347c98","#c21460"};
string[] labels = { "App Store", "Website", "Partners", "App Store", "Website", "Partners", "App Store", "Website", "Partners", "App Store", "Website", "Partners" };
/*
* int counterClockwiseDefaultOffset = 25;
* int preceedingTotalPercent = 0;
* int offset = counterClockwiseDefaultOffset;
* List<Circle> segments = new List<Circle>();
* int colorCounter = 0;
* string[] inputDataArr = InputData.Split(',');
* foreach (string dataStr in inputDataArr)
* {
* int data = int.Parse(dataStr);
* int percent = data;
* int reversePercent = 100 - percent;
* offset = 100 - preceedingTotalPercent + counterClockwiseDefaultOffset;
* preceedingTotalPercent = preceedingTotalPercent + percent;
* Circle segment = new Circle() { { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", colors[colorCounter++] }, { "stroke-dasharray", percent + " " + reversePercent }, { "stroke-dashoffset", offset.ToString() } };
* segments.Add(segment);
* }
*/
double counterClockwiseDefaultOffset = 25;
double preceedingTotalPercent = 0;
double offset = counterClockwiseDefaultOffset;
List <Circle> segments = new List <Circle>();
int colorCounter = 0;
string[] inputDataArr = InputData.Split(',');
foreach (string dataStr in inputDataArr)
{
double data = double.Parse(dataStr);
double percent = data;
double reversePercent = 100 - percent;
offset = 100 - preceedingTotalPercent + counterClockwiseDefaultOffset;
preceedingTotalPercent = preceedingTotalPercent + percent;
Circle segment = new Circle()
{
{ "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", colors[colorCounter++] }, { "stroke-dasharray", percent + " " + reversePercent }, { "stroke-dashoffset", offset.ToString() }
};
segments.Add(segment);
}
//Circle segment1 = new Circle() { { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", "#ce4b99" }, { "stroke-dasharray", percent+" "+reversePercent }, { "stroke-dashoffset", offset.ToString() } };
//Circle segment2 = new Circle() { { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", "#27A844" }, { "stroke-dasharray", percent + " " + reversePercent }, { "stroke-dashoffset", offset.ToString() } };
//Circle segment3 = new Circle() { { "cx", "21" }, { "cy", "21" }, { "r", "15.915" }, { "fill", "transparent" }, { "stroke-width", "5" }, { "stroke", "#377bbc" }, { "stroke-dasharray", percent + " " + reversePercent }, { "stroke-dashoffset", offset.ToString() } };
Text numberText = new Text()
{
{ "x", "50%" }, { "y", "50%" }, { "class", "doughnut-number" }, { "content", "100" }
};
Text labelText = new Text()
{
{ "x", "50%" }, { "y", "50%" }, { "id", "dcolor" }, { "class", "doughnut-label" }, { "content", "Sales" }
};
Group grp = new Group()
{
{ "class", "doughnut-text" }
};
grp.AddItems(numberText, labelText);
//svg.AddItems(rect, hole, ring, segment1, segment2, segment3, grp);
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", "doughnut-key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "doughnut-key-list");
builder.AddAttribute(++seq, "aria-hidden", "true");
builder.AddAttribute(++seq, "style", "list-style-type: none;");
int counter = 0;
foreach (string dataStr in inputDataArr)
{
double data = double.Parse(dataStr);
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "round-dot");
builder.AddAttribute(++seq, "style", "background-color:" + colors[counter]);
builder.CloseElement();
builder.AddContent(++seq, labels[counter++] + " " + "(" + data.ToString() + ")");
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
/*
* builder.OpenElement(seq, "figure");
* builder.OpenElement(++seq, "div");
* builder.AddAttribute(++seq, "class", "doughnut-main");
*
* builder.OpenElement(++seq, "svg");
* builder.AddAttribute(++seq, "width", "100%");
* builder.AddAttribute(++seq, "height", "100%");
* builder.AddAttribute(++seq, "viewBox", "0 0 42 42");
*
* builder.OpenElement(++seq, "rect");
* builder.AddAttribute(++seq, "width", "100%");
* builder.AddAttribute(++seq, "height", "100%");
* builder.AddAttribute(++seq, "fill", "white");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "class", "hole");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "#fff");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#d2d3d4");
* builder.AddAttribute(++seq, "stroke-width", "3");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#ce4b99");
* builder.AddAttribute(++seq, "stroke-width", "5");
* builder.AddAttribute(++seq, "stroke-dasharray", "40 60");
* builder.AddAttribute(++seq, "stroke-dashoffset", "25");
* builder.OpenElement(++seq, "title");
* builder.AddContent(++seq, "App Store");
* builder.CloseElement();
* builder.OpenElement(++seq, "desc");
* builder.AddContent(++seq, "40% (40 out of 100)");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#27A844");
* builder.AddAttribute(++seq, "stroke-width", "5");
* builder.AddAttribute(++seq, "stroke-dasharray", "20 80");
* builder.AddAttribute(++seq, "stroke-dashoffset", "85");
* builder.OpenElement(++seq, "title");
* builder.AddContent(++seq, "Website");
* builder.CloseElement();
* builder.OpenElement(++seq, "desc");
* builder.AddContent(++seq, "20% (20 out of 100)");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "circle");
* builder.AddAttribute(++seq, "cx", "21");
* builder.AddAttribute(++seq, "cy", "21");
* builder.AddAttribute(++seq, "r", "15.91549430918954");
* builder.AddAttribute(++seq, "fill", "transparent");
* builder.AddAttribute(++seq, "stroke", "#377bbc");
* builder.AddAttribute(++seq, "stroke-width", "5");
* builder.AddAttribute(++seq, "stroke-dasharray", "40 60");
* builder.AddAttribute(++seq, "stroke-dashoffset", "65");
* builder.OpenElement(++seq, "title");
* builder.AddContent(++seq, "Partners");
* builder.CloseElement();
* builder.OpenElement(++seq, "desc");
* builder.AddContent(++seq, "40% (40 out of 100)");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "g");
* builder.AddAttribute(++seq, "class", "doughnut-text");
* builder.OpenElement(++seq, "text");
* builder.AddAttribute(++seq, "x", "50%");
* builder.AddAttribute(++seq, "y", "50%");
* builder.AddAttribute(++seq, "class", "doughnut-number");
* builder.AddContent(++seq, "100");
* builder.CloseElement();
* builder.OpenElement(++seq, "text");
* builder.AddAttribute(++seq, "x", "50%");
* builder.AddAttribute(++seq, "y", "50%");
* builder.AddAttribute(++seq, "class", "doughnut-label");
* builder.AddContent(++seq, "Sales");
* builder.CloseElement();
* builder.CloseElement();
*
* builder.CloseElement();
* builder.CloseElement();
*
* builder.OpenElement(++seq, "figcaption");
* builder.AddAttribute(++seq, "class", "doughnut-key");
* builder.OpenElement(++seq, "ul");
* builder.AddAttribute(++seq, "class", "doughnut-key-list");
* builder.AddAttribute(++seq, "aria-hidden", "true");
* builder.AddAttribute(++seq, "style", "list-style-type: none;");
*
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot dot-red");
* builder.CloseElement();
* builder.AddContent(++seq, "App Store (40)");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot dot-green");
* builder.CloseElement();
* builder.AddContent(++seq, "Website (20)");
* builder.CloseElement();
*
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot dot-blue");
* builder.CloseElement();
* builder.AddContent(++seq, "Partners (40)");
* builder.CloseElement();
*
* builder.CloseElement();
* builder.CloseElement();
*
* builder.CloseElement();
*/
}
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();
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "linechart-main");
System.Diagnostics.Debug.WriteLine("ID" + InputData);
string[] inputDataArr = InputData.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
/*
* string[] inputDataArrX = InputData.Split(new char[] { '[', ']' }, StringSplitOptions.RemoveEmptyEntries);
* int numLines = 0;
* System.Diagnostics.Debug.WriteLine("Start");
* foreach (string inputLine in inputDataArrX)
* {
* if (inputLine.IndexOfAny(new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }) >= 0)
* {
* numLines++;
* }
* }
* System.Diagnostics.Debug.WriteLine("End");
* string[] inputDataArr = new string[numLines];
* int lineCounter = 0;
* foreach (string inputLine in inputDataArrX)
* {
* if (inputLine.IndexOfAny(new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }) >= 0)
* {
* inputDataArr[lineCounter++] = inputLine;
* System.Diagnostics.Debug.WriteLine("IL:" + inputLine);
* }
* }
*/
int[] inputData = { 30, 70, 42, 50, 3, 55, 35, 22 };
int[] list1 = new int[8] {
30, 70, 42, 50, 3, 55, 35, 22
};
int[] list2 = new int[8] {
40, 50, 32, 70, 55, 15, 15, 12
};
int[] list3 = new int[8] {
0, 10, 10, 10, 10, 20, 70, 70
};
int[][] lists = new int[][] { list1, list2, list3 };
//string[] colors = { "#ce4b99", "#27A844", "#377bbc" };
string[] colors = { "#fe2712", "#fc600a", "#fb9902", "#fccc1a", "#fefe33", "#b2d732", "#66b032", "#347c98", "#0247fe", "#4424d6", "#8601af", "#c21460" };
//string[] labels = { "App Store", "Website", "Partners" };
string[] labels = { "App Store", "Website", "Partners", "App Store", "Website", "Partners", "App Store", "Website", "Partners", "App Store", "Website", "Partners" };
SVG svg = new SVG()
{
{ "width", "100%" }, { "height", "100%" }, { "viewBox", "0 0 100 100" }
};
Rectangle rect = new Rectangle()
{
{ "width", "100%" }, { "height", "100%" }, { "fill", "white" }, { "stroke", "gray" }, { "stroke-width", "0.5" }
};
//Rectangle rect = new Rectangle() { { "width", "100%" }, { "height", "100%" }, { "fill", "cyan" }};
svg.AddItems(rect);
int numHorizontalLines = 10;
int numVerticalLines = 10;
double boundHeight = 100.0;
double boundWidth = 100.0;
double verticalStartSpace = 10.0;
double horizontalStartSpace = 10.0;
double verticalEndSpace = 5.0;
double horizontalEndSpace = 5.0;
double gridYUnits = 10;
double gridXUnits = 10;
bool skipLastVerticalLine = true;
bool skipLastHorizontalLine = true;
double verticalSpace = (boundHeight - verticalStartSpace - verticalEndSpace) / (numHorizontalLines - 1);
double horizontalSpace = (boundWidth - horizontalStartSpace - horizontalEndSpace) / (numVerticalLines - 1);
double totalGridWidth = ((double)(numVerticalLines - 1)) * horizontalSpace;
double totalGridHeight = ((double)(numHorizontalLines - 1)) * verticalSpace;
System.Diagnostics.Debug.WriteLine("TotalGridHeight:" + totalGridHeight + ":" + verticalSpace);
double[] dAry = new double[inputDataArr.Length];
int i = 0;
foreach (string iData in inputDataArr)
{
System.Diagnostics.Debug.WriteLine("iData:" + iData);
dAry[i] = double.Parse(inputDataArr[i++]);
}
System.Diagnostics.Debug.WriteLine("inputDataArr Length:" + inputDataArr.Length);
//Horizontal Lines
double y = verticalStartSpace;
double startGridY = 0;
for (int counter = 0; counter < numHorizontalLines; counter++)
{
if (counter == numHorizontalLines - 1 && skipLastHorizontalLine)
{
continue;
}
Path path = new Path()
{
{ "fill", "none" }, { "stroke", "gray" }, { "stroke-width", "0.2" }, { "d", "M " + horizontalStartSpace.ToString() + " " + (boundHeight - y).ToString() + " L " + (boundWidth - horizontalEndSpace).ToString() + " " + (boundHeight - y).ToString() }
};
Text label = new Text()
{
{ "x", (horizontalStartSpace - 2).ToString() }, { "y", (boundHeight - y).ToString() }, { "font-size", "4px" }, { "text-anchor", "end" }, { "content", (startGridY).ToString() }
};
svg.AddItems(path, label);
System.Diagnostics.Debug.WriteLine("Y:" + y);
y = y + verticalSpace;
startGridY = startGridY + gridYUnits;
}
/*
* double y = verticalStartSpace;
* double startGridY = 0;
* i = 0;
* for (int counter=0;counter< numHorizontalLines; counter++)
* {
* System.Diagnostics.Debug.WriteLine("i:" + i);
* if (counter == numHorizontalLines - 1 && skipLastHorizontalLine)
* {
* continue;
* }
* System.Diagnostics.Debug.WriteLine("y:" + i+":"+ inputDataArr.Length);
*
* Path path = new Path() { { "fill", "none" }, { "stroke", "gray" }, { "stroke-width", "0.2" }, { "d", "M "+horizontalStartSpace.ToString()+" "+(boundHeight - y).ToString() + " L "+(boundWidth-horizontalEndSpace).ToString()+" "+(boundHeight - y).ToString() } };
* Text label = new Text() { { "x", (horizontalStartSpace-2).ToString() }, { "y", (boundHeight - y).ToString() }, { "font-size", "4px" }, { "text-anchor", "end" }, { "content", (startGridY).ToString() } };
* System.Diagnostics.Debug.WriteLine("z:" + i);
* if (counter==0)
* svg.AddItems(path,label);
* else
* {
* if (i< (inputDataArr.Length))
* {
* System.Diagnostics.Debug.WriteLine("i:" + i + ":" + dAry[i].ToString() + "px");
* System.Diagnostics.Debug.WriteLine("labelrect");
* Rectangle rectangle = new Rectangle() { { "fill", "blue" }, { "x", (horizontalStartSpace).ToString() }, { "y", (boundHeight - y - 5).ToString() }, { "width", dAry[i].ToString() + "px" }, { "height", "5px" } };
* svg.AddItems(label, rectangle);
* i++;
* }
* else
* {
* System.Diagnostics.Debug.WriteLine("label");
* svg.AddItems(label);
* }
* }
*
* System.Diagnostics.Debug.WriteLine("Y:" + y);
*
* y = y + verticalSpace;
* startGridY = startGridY + gridYUnits;
* }
*/
/*
* //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(',');
* int[] intAry=new int[inputLineArr.Length];
* for (int i = 0; i < inputLineArr.Length; i++)
* intAry[i] = int.Parse(inputLineArr[i]);
*
* 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;
* double gridValue = ((double)i) * verticalSpace / gridYUnits;
* gridValueY = boundHeight - (gridValueY + gridValue);
* chartLine = chartLine + gridValueX.ToString() + " " + gridValueY.ToString();
* }
* }
* //System.Diagnostics.Debug.WriteLine("CL:" + chartLine);
* Path linepath = new Path() { { "fill", "none" }, { "stroke", colors[colorcounter++] }, { "stroke-width", "1.0" }, { "d", chartLine } };
* svg.AddItems(linepath);
*
* }
*/
System.Diagnostics.Debug.WriteLine("Vertical Lines");
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
i = 0;
for (int counter = 0; counter < numVerticalLines; counter++)
{
if (counter == numVerticalLines - 1 && skipLastVerticalLine)
{
continue;
}
Path path = new Path()
{
{ "fill", "none" }, { "stroke", "gray" }, { "stroke-width", "0.2" }, { "d", "M " + x.ToString() + " " + (boundHeight - verticalStartSpace).ToString() + " L " + x.ToString() + " " + (verticalEndSpace).ToString() }
};
Text label = new Text()
{
{ "x", x.ToString() }, { "y", (boundHeight - verticalStartSpace + 5).ToString() }, { "font-size", "4px" }, { "text-anchor", "middle" }, { "content", (startGridX).ToString() }
};
startGridX = startGridX + gridXUnits;
if (counter == 0)
{
svg.AddItems(path, label);
}
else
{
if (i < (inputDataArr.Length))
{
System.Diagnostics.Debug.WriteLine("i:" + i + ":" + dAry[i].ToString() + "px");
System.Diagnostics.Debug.WriteLine("labelrect");
Rectangle rectangle = new Rectangle()
{
{ "fill", "#27A844" }, { "x", (x - 3).ToString() }, { "y", (boundHeight - verticalStartSpace - dAry[i]).ToString() }, { "width", "5px" }, { "height", dAry[i].ToString() + "px" }
};
svg.AddItems(label, rectangle, path);
i++;
}
else
{
System.Diagnostics.Debug.WriteLine("label");
svg.AddItems(label, path);
}
}
x = x + horizontalSpace;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.OpenElement(++seq, "figcaption");
builder.AddAttribute(++seq, "class", "linechart-key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "linechart-key-list");
builder.AddAttribute(++seq, "aria-hidden", "true");
builder.AddAttribute(++seq, "style", "list-style-type: none;");
int colorcounter = 0;
foreach (string iData in inputDataArr)
{
//int data = int.Parse(dataStr);
System.Diagnostics.Debug.WriteLine("Color:" + iData);
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "round-dot");
builder.AddAttribute(++seq, "style", "background-color:" + colors[colorcounter]);
builder.CloseElement();
builder.AddContent(++seq, labels[colorcounter++]);
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
/*
* <path d="M 30 250 L 130 120
* L 230 150 L 330 80 L 430 200"
* fill="none" stroke="#27A844" stroke-width="2.5" />
*
*
* <path d="M 25 50 L 450 50"
* fill="none" stroke="gray" stroke-width="0.3" />
*
* builder.OpenElement(++seq, "figcaption");
* builder.AddAttribute(++seq, "class", "linechart-key");
* builder.OpenElement(++seq, "ul");
* builder.AddAttribute(++seq, "class", "linechart-key-list");
* builder.AddAttribute(++seq, "aria-hidden", "true");
* builder.AddAttribute(++seq, "style", "list-style-type: none;");
*
* int counter = 0;
* foreach (string dataStr in inputDataArr)
* {
* int data = int.Parse(dataStr);
* builder.OpenElement(++seq, "li");
* builder.OpenElement(++seq, "span");
* builder.AddAttribute(++seq, "class", "round-dot");
* builder.AddAttribute(++seq, "style", "background-color:" + colors[counter]);
*
* builder.CloseElement();
* builder.AddContent(++seq, labels[counter++] + " " + "(" + data.ToString() + ")");
* builder.CloseElement();
* }
*
* builder.CloseElement();
* builder.CloseElement();
*/
builder.CloseElement();
builder.CloseElement();
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
string[] inputDataArr = InputData.Split(',');
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "pie-chart");
builder.OpenElement(++seq, "div");
builder.AddAttribute(++seq, "class", "main");
SVG svg = new SVG()
{
{ "width", "80%" }, { "height", "80%" }, { "viewBox", "-1 -1 2 2" }, { "style", "transform: rotate(-90deg)" }
};
double x, y;
double px = 0, py = 0;
double totalPercent = 0;
string prStr = pieRadius.ToString();
for (int icounter = 0; icounter < inputDataArr.Length; icounter++)
{
double data = 0;
bool isDouble2 = double.TryParse(inputDataArr[icounter], out data);
double percent = data / 100;
totalPercent = totalPercent + percent;
getCoordinatesForPercent(totalPercent, out x, out y);
Path path = null;
if (icounter == 0)
{
path = new Path()
{
{ "class", "segment-" + (icounter + 1).ToString() }, { "d", "M " + prStr + " 0 A " + prStr + " " + prStr + " 0 0 1 " + x + " " + y + " L 0 0" }
}
}
;
else
{
if (percent > 0.5)
{
path = new Path()
{
{ "class", "segment-" + (icounter + 1).ToString() }, { "d", "M " + px + " " + py + " A " + prStr + " " + prStr + " 0 1 1 " + x + " " + y + " L 0 0" }
}
}
;
else
{
path = new Path()
{
{ "class", "segment-" + (icounter + 1).ToString() }, { "d", "M " + px + " " + py + " A " + prStr + " " + prStr + " 0 0 1 " + x + " " + y + " L 0 0" }
}
};
}
svg.AddItems(path);
px = x; py = y;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.OpenElement(++seq, "figcaption");
builder.AddAttribute(++seq, "class", "pie-key");
builder.OpenElement(++seq, "ul");
builder.AddAttribute(++seq, "class", "pie-key-list");
builder.AddAttribute(++seq, "aria-hidden", "true");
builder.AddAttribute(++seq, "style", "list-style-type: none;");
int 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();
}
}
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");
System.Diagnostics.Debug.WriteLine("ID" + InputData);
string[] inputDataArrX = InputData.Split(new char[] { '[', ']' }, StringSplitOptions.RemoveEmptyEntries);
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
int numLines = 0;
System.Diagnostics.Debug.WriteLine("Start");
foreach (string inputLine in inputDataArrX)
{
if (inputLine.IndexOfAny(new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }) >= 0)
{
numLines++;
}
}
System.Diagnostics.Debug.WriteLine("End");
string[] inputDataArr = new string[numLines];
int lineCounter = 0;
foreach (string inputLine in inputDataArrX)
{
if (inputLine.IndexOfAny(new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' }) >= 0)
{
inputDataArr[lineCounter++] = inputLine;
System.Diagnostics.Debug.WriteLine("IL:" + inputLine);
}
}
string[] colors = { "#ce4b99", "#27A844", "#377bbc" };
string[] labels = { "App Store", "Website", "Partners" };
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" }, { "width", "100%" }, { "height", "100%" }, { "fill", "white" }, { "stroke", "gray" }, {"stroke-width", "0.5" } };
//Rectangle rect = new Rectangle() { { "width", "100%" }, { "height", "100%" }, { "fill", "cyan" }};
Rectangle rect = new Rectangle()
{
{ "class", "background-rect" }
};
svg.AddItems(rect);
int numHorizontalLines = 10;
int numVerticalLines = 10;
double verticalStartSpace = 25.0;
double horizontalStartSpace = 25.0;
double verticalEndSpace = 25.0;
double horizontalEndSpace = 25.0;
double gridYUnits = 10;
double gridXUnits = 10;
//bool skipLastVerticalLine = true;
//bool skipLastHorizontalLine = true;
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++)
{
//if (counter == numHorizontalLines - 1 && skipLastHorizontalLine)
// continue;
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;
}
//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(',');
int[] intAry = new int[inputLineArr.Length];
for (int i = 0; i < inputLineArr.Length; i++)
{
intAry[i] = int.Parse(inputLineArr[i]);
}
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;
double gridValue = ((double)i) * verticalSpace / gridYUnits;
gridValueY = boundHeight - (gridValueY + gridValue);
chartLine = chartLine + gridValueX.ToString() + " " + gridValueY.ToString();
}
}
//System.Diagnostics.Debug.WriteLine("CL:" + chartLine);
// Path linepath = new Path() { { "fill", "none" }, { "stroke", colors[colorcounter++] }, { "stroke-width", "1.0" }, { "d", chartLine } };
Path linepath = new Path()
{
{ "class", "line-" + (colorcounter + 1).ToString() }, { "d", chartLine }
};
colorcounter++;
svg.AddItems(linepath);
}
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
for (int counter = 0; counter <= numVerticalLines; counter++)
{
//if (counter == numVerticalLines - 1 && skipLastVerticalLine)
// continue;
Path path = new Path()
{
{ "class", "vertical-grid-lines" }, { "d", "M " + x.ToString() + " " + (boundHeight - verticalStartSpace).ToString() + " L " + x.ToString() + " " + (verticalEndSpace).ToString() }
};
Text label = new Text()
{
{ "class", "x-axis-labels" }, { "x", x.ToString() }, { "y", (boundHeight - verticalStartSpace + 5).ToString() }, { "content", (startGridX).ToString() }
};
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");
//builder.AddAttribute(++seq, "aria-hidden", "true");
//builder.AddAttribute(++seq, "style", "list-style-type: none;");
colorcounter = 0;
foreach (string iData in inputDataArr)
{
//int data = int.Parse(dataStr);
builder.OpenElement(++seq, "li");
builder.OpenElement(++seq, "span");
builder.AddAttribute(++seq, "class", "legend-" + (colorcounter + 1).ToString());
//builder.AddAttribute(++seq, "style", "background-color:" + colors[colorcounter]);
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();
}
protected override void Write(BlazorRenderer renderer, HtmlEntityInline htmlEntityInline)
{
renderer.Write(htmlEntityInline.Transcoded);
}
protected override void Write(BlazorRenderer renderer, Table table)
{
renderer.OpenElement("table");
if (table.ColumnDefinitions.Any(cd => cd.Width > 0 && cd.Width < 1))
{
foreach (var tableColumnDefinition in table.ColumnDefinitions)
{
var width = Math.Round(tableColumnDefinition.Width * 100) / 100;
var widthValue = string.Format(CultureInfo.InvariantCulture, "{0:0.##}", width);
renderer.OpenElement("col");
renderer.AddAttribute("style", $"style=\"width:{widthValue}%\"");
renderer.CloseElement();
}
}
bool bodyWritten = false;
bool headerWritten = false;
foreach (var rowObj in table)
{
var row = (TableRow)rowObj;
if (row.IsHeader)
{
if (!headerWritten)
{
renderer.OpenElement("thead");
headerWritten = true;
}
}
else if (!bodyWritten)
{
if (headerWritten)
{
renderer.CloseElement();
}
renderer.OpenElement("tbody");
bodyWritten = true;
}
renderer.OpenElement("tr");
renderer.WriteAttributes(row);
for (int i = 0; i < row.Count; i++)
{
var cell = (TableCell)row[i];
renderer.OpenElement(row.IsHeader ? "th" : "td");
if (cell.ColumnSpan != 1)
{
renderer.AddAttribute("colspan", cell.ColumnSpan);
}
if (cell.RowSpan != 1)
{
renderer.AddAttribute("rowspan", cell.RowSpan);
}
if (table.ColumnDefinitions.Count > 0)
{
var columnIndex = cell.ColumnIndex < 0 || cell.ColumnIndex >= table.ColumnDefinitions.Count ? i : cell.ColumnIndex;
columnIndex = columnIndex >= table.ColumnDefinitions.Count ? table.ColumnDefinitions.Count - 1 : columnIndex;
var alignment = table.ColumnDefinitions[columnIndex].Alignment;
if (alignment.HasValue)
{
switch (alignment)
{
case TableColumnAlign.Center:
renderer.AddAttribute("style", "text-align:center;");
break;
case TableColumnAlign.Left:
renderer.AddAttribute("style", "text-align:left;");
break;
case TableColumnAlign.Right:
renderer.AddAttribute("style", "text-align:right;");
break;
}
}
renderer.WriteAttributes(cell);
renderer.Write(cell);
}
renderer.CloseElement();
}
renderer.CloseElement();
}
if (bodyWritten)
{
renderer.CloseElement();
}
renderer.CloseElement();
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "vertical-bar-chart");
builder.OpenElement(++seq, "div");
//builder.AddAttribute(++seq, "class", "main");
System.Diagnostics.Debug.WriteLine("ID" + InputData);
string[] inputDataArr = InputData.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
//string[] colors = { "#fe2712", "#fc600a", "#fb9902", "#fccc1a", "#fefe33", "#b2d732", "#66b032", "#347c98", "#0247fe", "#4424d6", "#8601af", "#c21460" };
//string[] labels = { "App Store", "Website", "Partners", "Direct", "Channels", "Retail", "Distributors", "Affiliates", "Phone", "TV" ,"X"};
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" }, { "width", "100%" }, { "height", "100%" }, { "fill", "white" }, { "stroke", "gray" }, {"stroke-width", "0.5" } };
Rectangle rect = new Rectangle()
{
{ "class", "background-rect" }
};
svg.AddItems(rect);
int numHorizontalLines = 10;
int numVerticalLines = 10;
double verticalStartSpace = 25.0;
double horizontalStartSpace = 25.0;
double verticalEndSpace = 25.0;
double horizontalEndSpace = 25.0;
double gridYUnits = 10;
double gridXUnits = 10;
//bool skipLastVerticalLine = true;
//bool skipLastHorizontalLine = true;
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);
double[] dAry = new double[inputDataArr.Length];
int i = 0;
foreach (string iData in inputDataArr)
{
System.Diagnostics.Debug.WriteLine("iData:" + iData);
dAry[i] = double.Parse(inputDataArr[i++]);
}
System.Diagnostics.Debug.WriteLine("inputDataArr Length:" + inputDataArr.Length);
//Horizontal Lines
double y = verticalStartSpace;
double startGridY = 0;
for (int counter = 0; counter <= numHorizontalLines; counter++)
{
//if (counter == numHorizontalLines - 1 && skipLastHorizontalLine)
// continue;
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;
}
System.Diagnostics.Debug.WriteLine("Vertical Lines");
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
i = 0;
for (int counter = 0; counter < numVerticalLines; counter++)
{
//if (counter == numVerticalLines - 1 && skipLastVerticalLine)
// continue;
//Path path = new Path() { { "fill", "none" }, { "stroke", "gray" }, { "stroke-width", "0.2" }, { "d", "M " + x.ToString() +" "+ (boundHeight-verticalStartSpace).ToString() + " L "+ x.ToString() + " " +(verticalEndSpace).ToString() } };
//Text label = new Text() { {"x",x.ToString() }, { "y", (boundHeight - verticalStartSpace + 5).ToString() },{ "font-size", "4px" }, { "text-anchor", "middle" }, { "content", (startGridX).ToString() } };
string xLabels = "";
if (counter < inputLabelsArr.Length)
{
xLabels = inputLabelsArr[counter];
}
Text label = new Text()
{
{ "class", "x-axis-labels" }, { "transform", "translate(" + x.ToString() + "," + (boundHeight - verticalStartSpace + 5).ToString() + ") rotate(-40)" }, { "dx", "+1em" }, { "dy", "0.30em" }, { "content", xLabels }
};
startGridX = startGridX + gridXUnits;
if (i < (inputDataArr.Length))
{
System.Diagnostics.Debug.WriteLine("i:" + i + ":" + dAry[i].ToString() + "px");
System.Diagnostics.Debug.WriteLine("labelrect");
Rectangle rectangle = new Rectangle()
{
{ "class", "bar" }, { "x", (x).ToString() }, { "y", (boundHeight - verticalStartSpace - dAry[i]).ToString() }, { "height", dAry[i].ToString() + "px" }
};
//svg.AddItems(label, rectangle,path);
svg.AddItems(label, rectangle);
i++;
}
else
{
System.Diagnostics.Debug.WriteLine("label");
//svg.AddItems(label,path);
svg.AddItems(label);
}
x = x + horizontalSpace;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.CloseElement();
builder.CloseElement();
}
protected override void Write(BlazorRenderer renderer, JiraLink link)
{
renderer.AddContent(string.Join('-', link.ProjectKey, link.Issue));
}
protected override void Write(BlazorRenderer renderer, HtmlInline inline)
{
renderer.AddMarkupContent(inline.Tag);
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
var seq = 0;
builder.OpenElement(seq, "figure");
builder.AddAttribute(++seq, "class", "horizontal-bar-chart");
builder.OpenElement(++seq, "div");
//System.Diagnostics.Debug.WriteLine("ID"+InputData);
string[] inputDataArr = InputData.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
string[] inputLabelsArr = InputLabels.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
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);
double[] inputDataArrDouble = new double[inputDataArr.Length];
int i = 0;
double max = 0.0;
foreach (string iData in inputDataArr)
{
double data = 0;
bool isDouble2 = double.TryParse(inputDataArr[i], out data);
inputDataArrDouble[i++] = data;
if (max < data)
{
max = data;
}
}
double gridYUnits = 10;
double gridXUnits = 10;
//1. Determine number of input data values and use it for numHorizontalLines
int numHorizontalLines = i;
//2. Detemine max bar value and then use it calculate numVerticalLines
int numVerticalLines = (int)(max / gridYUnits);
//int numHorizontalLines = 10;
//int numVerticalLines = 10;
double verticalStartSpace = 25.0;
double horizontalStartSpace = 30.0;
double verticalEndSpace = 25.0;
double horizontalEndSpace = 20.0;
bool skipLastVerticalLine = false;
bool skipLastHorizontalLine = false;
double verticalSpace = (boundHeight - verticalStartSpace - verticalEndSpace) / (numHorizontalLines);
double horizontalSpace = (boundWidth - horizontalStartSpace - horizontalEndSpace) / (numVerticalLines);
double totalGridWidth = ((double)(numVerticalLines)) * horizontalSpace;
double totalGridHeight = ((double)(numHorizontalLines)) * verticalSpace;
//Vertical Lines
double x = horizontalStartSpace;
double startGridX = 0;
for (int counter = 0; counter <= numVerticalLines; counter++)
{
if (counter == numVerticalLines && skipLastVerticalLine)
{
continue;
}
Path path = new Path()
{
{ "class", "vertical-grid-lines" }, { "d", "M " + x.ToString() + " " + (boundHeight - verticalStartSpace).ToString() + " L " + x.ToString() + " " + (verticalEndSpace).ToString() }
};
Text label = new Text()
{
{ "class", "x-axis-labels" }, { "x", x.ToString() }, { "y", (boundHeight - verticalStartSpace + 5).ToString() }, { "content", (startGridX).ToString() }
};
startGridX = startGridX + gridXUnits;
svg.AddItems(path, label);
x = x + horizontalSpace;
}
//Horizontal Lines
double y = verticalStartSpace;
double startGridY = 0;
i = 0;
for (int counter = 0; counter <= numHorizontalLines; counter++)
{
//System.Diagnostics.Debug.WriteLine("i:" + i);
if (counter == numHorizontalLines && skipLastHorizontalLine)
{
continue;
}
//System.Diagnostics.Debug.WriteLine("y:" + i+":"+ inputDataArr.Length);
//Path path = new Path() { { "class", "horizontal-grid-lines"}, { "d", "M "+(horizontalStartSpace).ToString()+" "+(boundHeight - y).ToString() + " L "+(horizontalStartSpace+numHorizontalLines*horizontalSpace).ToString()+" "+(boundHeight - y).ToString() } };
Path path = new Path()
{
{ "class", "horizontal-grid-lines" }, { "d", "M " + (horizontalStartSpace).ToString() + " " + (boundHeight - y).ToString() + " L " + (horizontalStartSpace + numVerticalLines * horizontalSpace).ToString() + " " + (boundHeight - y).ToString() }
};
string xLabels = "";
if (counter < inputLabelsArr.Length)
{
xLabels = inputLabelsArr[counter];
}
Text label = new Text()
{
{ "class", "y-axis-labels" }, { "x", (horizontalStartSpace - 2).ToString() }, { "y", (boundHeight - y).ToString() }, { "content", xLabels }
};
//System.Diagnostics.Debug.WriteLine("z:" + i);
if (counter == 0)
{
svg.AddItems(path, label);
}
if (i < (inputDataArr.Length))
{
//System.Diagnostics.Debug.WriteLine("i:" + i + ":" + inputDataArrDouble[i].ToString() + "px");
//System.Diagnostics.Debug.WriteLine("labelrect");
//Rectangle bar = new Rectangle() { { "class", "bar" }, { "x", (horizontalStartSpace).ToString() }, { "y", (boundHeight - y - 5).ToString() }, { "width", inputDataArrDouble[i].ToString() + "px" }, { "height", "5px" } };
Rectangle bar = new Rectangle()
{
{ "class", "bar" }, { "x", (horizontalStartSpace).ToString() }, { "y", (boundHeight - y - 5).ToString() }, { "width", (inputDataArrDouble[i] / max) * numVerticalLines * horizontalSpace + "px" }, { "height", "5px" }
};
svg.AddItems(label, bar);
i++;
}
else
{
//System.Diagnostics.Debug.WriteLine("label");
if (counter < numHorizontalLines)
{
svg.AddItems(label);
}
}
//System.Diagnostics.Debug.WriteLine("Y:" + y);
y = y + verticalSpace;
startGridY = startGridY + gridYUnits;
}
BlazorRenderer blazorRenderer = new BlazorRenderer();
blazorRenderer.Draw(seq, builder, svg);
builder.CloseElement();
builder.CloseElement();
}
protected override void Write(BlazorRenderer renderer, TaskList list)
{
renderer.OpenElement("span");
renderer.AddMarkupContent(list.Checked ? "🗹" : "☐");
renderer.CloseElement();
}