/*-
*
* * Copyright 2016 Skymind,Inc.
* *
* * Licensed under the Apache License, Version 2.0 (the "License");
* * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* *
* * http://www.apache.org/licenses/LICENSE-2.0
* *
* * Unless required by applicable law or agreed to in writing, software
* * distributed under the License is distributed on an "AS IS" BASIS,
* * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* * See the License for the specific language governing permissions and
* * limitations under the License.
*
*/
package org.deeplearning4j.ui;
import org.nd4j.shade.jackson.databind.ObjectMapper;
import org.apache.commons.io.FileUtils;
import org.deeplearning4j.ui.api.Component;
import org.deeplearning4j.ui.api.LengthUnit;
import org.deeplearning4j.ui.api.Style;
import org.deeplearning4j.ui.components.chart.*;
import org.deeplearning4j.ui.components.chart.style.StyleChart;
import org.deeplearning4j.ui.components.component.ComponentDiv;
import org.deeplearning4j.ui.components.component.style.StyleDiv;
import org.deeplearning4j.ui.components.decorator.DecoratorAccordion;
import org.deeplearning4j.ui.components.decorator.style.StyleAccordion;
import org.deeplearning4j.ui.components.table.ComponentTable;
import org.deeplearning4j.ui.components.table.style.StyleTable;
import org.deeplearning4j.ui.components.text.ComponentText;
import org.deeplearning4j.ui.components.text.style.StyleText;
import org.junit.Ignore;
import org.junit.Test;
import java.awt.*;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/**
* This test: generated a HTML file that you can open to view some example graphs.
* The generated HTML file should appear in the deeplearning4j-ui-components directory (TestRendering.html)
* *** NOTE: Open this in IntelliJ: Right click on file -> Open In Browser ***
*/
public class TestRendering {
@Ignore
@Test
public void test() throws Exception {
List<Component> list = new ArrayList<>();
//Common style for all of the charts
StyleChart s = new StyleChart.Builder().width(640, LengthUnit.Px).height(480, LengthUnit.Px)
.margin(LengthUnit.Px, 100, 40, 40, 20).strokeWidth(2)
.pointSize(4).seriesColors(Color.GREEN, Color.MAGENTA).titleStyle(new StyleText.Builder()
.font("courier").fontSize(16).underline(true).color(Color.GRAY).build())
.build();
//Line chart with vertical grid
Component c1 = new ChartLine.Builder("Line Chart!", s)
.addSeries("series0", new double[] {0, 1, 2, 3}, new double[] {0, 2, 1, 4})
.addSeries("series1", new double[] {0, 1, 2, 3}, new double[] {0, 1, 0.5, 2.5})
.setGridWidth(1.0, null) //Vertical grid lines, no horizontal grid
.build();
list.add(c1);
//Scatter chart
Component c2 = new ChartScatter.Builder("Scatter!", s)
.addSeries("series0", new double[] {0, 1, 2, 3}, new double[] {0, 2, 1, 4}).showLegend(true)
.setGridWidth(0, 0).build();
list.add(c2);
//Histogram with variable sized bins
Component c3 = new ChartHistogram.Builder("Histogram!", s).addBin(-1, -0.5, 0.2).addBin(-0.5, 0, 0.5)
.addBin(0, 1, 2.5).addBin(1, 2, 0.5).build();
list.add(c3);
//Stacked area chart
Component c4 = new ChartStackedArea.Builder("Area Chart!", s).setXValues(new double[] {0, 1, 2, 3, 4, 5})
.addSeries("series0", new double[] {0, 1, 0, 2, 0, 1})
.addSeries("series1", new double[] {2, 1, 2, 0.5, 2, 1}).build();
list.add(c4);
//Table
StyleTable ts = new StyleTable.Builder().backgroundColor(Color.LIGHT_GRAY).headerColor(Color.ORANGE)
.borderWidth(1).columnWidths(LengthUnit.Percent, 20, 40, 40).width(500, LengthUnit.Px)
.height(200, LengthUnit.Px).build();
Component c5 = new ComponentTable.Builder(ts).header("H1", "H2", "H3").content(
new String[][] {{"row0col0", "row0col1", "row0col2"}, {"row1col0", "row1col1", "row1col2"}})
.build();
list.add(c5);
//Accordion decorator, with the same chart
StyleAccordion ac = new StyleAccordion.Builder().height(480, LengthUnit.Px).width(640, LengthUnit.Px).build();
Component c6 = new DecoratorAccordion.Builder(ac).title("Accordion - Collapsed By Default!")
.setDefaultCollapsed(true).addComponents(c5).build();
list.add(c6);
//Text with styling
Component c7 = new ComponentText.Builder("Here's some blue text in a green div!",
new StyleText.Builder().font("courier").fontSize(30).underline(true).color(Color.BLUE).build())
.build();
//Div, with a chart inside
Style divStyle = new StyleDiv.Builder().width(30, LengthUnit.Percent).height(200, LengthUnit.Px)
.backgroundColor(Color.GREEN).floatValue(StyleDiv.FloatValue.right).build();
Component c8 = new ComponentDiv(divStyle, c7,
new ComponentText("(Also: it's float right, 30% width, 200 px high )", null));
list.add(c8);
//Timeline chart:
List<ChartTimeline.TimelineEntry> entries = new ArrayList<>();
for (int i = 0; i < 10; i++) {
entries.add(new ChartTimeline.TimelineEntry("e0-" + i, 10 * i, 10 * i + 5, Color.BLUE));
}
List<ChartTimeline.TimelineEntry> entries2 = new ArrayList<>();
for (int i = 0; i < 10; i++) {
entries2.add(new ChartTimeline.TimelineEntry("e1-" + i, (int) (5 * i + 0.2 * i * i),
(int) (5 * i + 0.2 * i * i) + 3, Color.ORANGE));
}
List<ChartTimeline.TimelineEntry> entries3 = new ArrayList<>();
for (int i = 0; i < 10; i++) {
entries3.add(new ChartTimeline.TimelineEntry("e2-" + i, (int) (2 * i + 0.6 * i * i + 3),
(int) (2 * i + 0.6 * i * i + 3) + 2 * i + 1));
}
Color[] c = new Color[] {Color.CYAN, Color.YELLOW, Color.GREEN, Color.PINK};
List<ChartTimeline.TimelineEntry> entries4 = new ArrayList<>();
Random r = new Random(12345);
for (int i = 0; i < 10; i++) {
entries4.add(new ChartTimeline.TimelineEntry("e3-" + i, (int) (2 * i + 0.6 * i * i + 3),
(int) (2 * i + 0.6 * i * i + 3) + i + 1, c[r.nextInt(c.length)]));
}
Component c9 = new ChartTimeline.Builder("Title", s).addLane("Lane 0", entries).addLane("Lane 1", entries2)
.addLane("Lane 2", entries3).addLane("Lane 3", entries4).build();
list.add(c9);
//Generate HTML
StringBuilder sb = new StringBuilder();
sb.append("<!DOCTYPE html>\n" + "<html lang=\"en\">\n" + "<head>\n" + " <meta charset=\"UTF-8\">\n"
+ " <title>Title</title>\n" + "</head>\n" + "<body>\n" + "\n" + " <div id=\"maindiv\">\n"
+ "\n" + " </div>\n" + "\n" + "\n"
+ " <script src=\"//code.jquery.com/jquery-1.10.2.js\"></script>\n"
+ " <script src=\"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js\"></script>\n"
+ " <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css\">\n"
+ " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js\"></script>\n"
+ " <script src=\"src/main/resources/assets/dl4j-ui.js\"></script>\n" + "\n"
+ " <script>\n");
ObjectMapper om = new ObjectMapper();
for (int i = 0; i < list.size(); i++) {
Component component = list.get(i);
sb.append(" ").append("var str").append(i).append(" = '")
.append(om.writeValueAsString(component).replaceAll("'", "\\\\'")).append("';\n");
sb.append(" ").append("var obj").append(i).append(" = Component.getComponent(str").append(i)
.append(");\n");
sb.append(" ").append("obj").append(i).append(".render($('#maindiv'));\n");
sb.append("\n\n");
}
sb.append(" </script>\n" + "\n" + "</body>\n" + "</html>");
FileUtils.writeStringToFile(new File("TestRendering.html"), sb.toString());
}
}