describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("timeline", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case MiniGantt:
render(new MiniGantt()
.timePattern("%Y-%m-%dT%H:%M:%S.%LZ")
.tickFormat("%H:%M")
.data([
["Start", "2016-07-01T09:12:15.0Z"],
["item-1", "2016-07-01T09:10:00.0Z", "2016-07-01T09:45:00.0Z"],
["item-2", "2016-07-01T11:00:00.0Z", "2016-07-01T12:00:00.0Z"],
["item-3", "2016-07-01T09:20:00.0Z", "2016-07-01T12:20:00.0Z"],
["item-3a", "2016-07-01T09:21:00.0Z", "2016-07-01T12:11:00.0Z"],
["item-3b", "2016-07-01T09:22:00.0Z", "2016-07-01T12:12:00.0Z"],
["item-3c", "2016-07-01T09:23:00.0Z", "2016-07-01T12:13:00.0Z"],
["item-3d", "2016-07-01T09:24:00.0Z", "2016-07-01T12:14:00.0Z"],
["item-3e", "2016-07-01T09:25:00.0Z", "2016-07-01T12:15:00.0Z"],
["item-4", "2016-07-01T09:15:00.0Z", "2016-07-01T12:20:00.0Z"],
["item-6", "2016-07-01T10:00:00.0Z", "2016-07-01T10:50:00.0Z"],
["item-7", "2016-07-01T10:30:01.0Z", "2016-07-01T10:40:00.0Z"],
["10 O'Clock", "2016-07-01T10:00:00.0Z"],
["Finish", "2016-07-01T12:30:45.0Z"]
])
);
break;
default:
it("Has render test", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("tree", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case CirclePacking:
render(new CirclePacking()
.data(flare.data)
);
break;
case Dendrogram:
render(new Dendrogram()
.data(flare.data)
);
break;
case Indented:
render(new Indented()
.columns(["label", "size"])
.data(flare.data)
);
break;
case SunburstPartition:
render(new SunburstPartition()
.data(flare.data)
);
break;
case Treemap:
render(new Treemap()
.columns(["label", "size"])
.data(flare.data)
);
break;
default:
it("Has render test", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("composite", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case MultiChart:
render(new MultiChart()
.columns(data.Pivot.subjects.columns)
.data(data.Pivot.subjects.data)
.chartType("COLUMN")
);
case Dermatology:
case MegaChart:
case MultiChartPanel:
break;
default:
it("Missing test", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("graph", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case Edge:
const graph = new Graph();
const vertices: any[] = [];
const edges: any[] = [];
const palette = Palette.ordinal("dark2");
const rawData = data.simple;
rawData.nodes.forEach(function (node) {
vertices.push(
new Vertex()
.text(node.name)
.textbox_shape_colorStroke(palette(node.icon))
.textbox_shape_colorFill("whitesmoke")
.icon_diameter(60)
.icon_shape_colorStroke("transparent")
.icon_shape_colorFill("transparent")
.icon_image_colorFill("#333333")
.textbox_shape_colorStroke("transparent")
.textbox_shape_colorFill("transparent")
.textbox_text_colorFill("#333333")
.iconAnchor("middle")
.faChar(node.icon)
)
;
}, graph);
rawData.links.forEach(function (link, idx) {
edges.push(
new Edge()
.sourceVertex(vertices[link.source])
.targetVertex(vertices[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("Hello!")
.strokeDasharray(idx === 0 ? "15, 10, 5, 10, 15" : "")
.strokeColor(idx === 0 ? "cyan" : "")
.weight(50)
)
;
}, graph);
graph.data({ vertices, edges });
render(graph);
break;
case AdjacencyGraph:
render(new AdjacencyGraph()
.columns(["uid", "label", "links"])
.data([
[1, "AdjacencyGraph 1", [[2], [3], [4]]],
[2, "AdjacencyGraph 2", []],
[3, "AdjacencyGraph 3", []],
[4, "AdjacencyGraph 4", []]
] as any)
);
break;
case Graph:
const graph2 = new Graph();
const vertices2: any[] = [];
const edges2: any[] = [];
const palette2 = Palette.ordinal("dark2");
const rawData2 = data.simple;
rawData2.nodes.forEach(function (node) {
vertices2.push(
new Vertex()
.text(node.name)
.textbox_shape_colorStroke(palette2(node.icon))
.textbox_shape_colorFill("whitesmoke")
.icon_diameter(30)
.icon_shape_colorStroke(palette2(node.icon))
.icon_shape_colorFill(palette2(node.icon))
.faChar(node.icon)
);
}, graph2);
rawData2.links.forEach(function (link, idx) {
edges2.push(
new Edge()
.sourceVertex(vertices2[link.source])
.targetVertex(vertices2[link.target])
.sourceMarker("circle")
.targetMarker("arrow")
.text("")
.weight(50)
);
}, graph2);
graph2.data({ vertices: vertices2, edges: edges2 });
render(graph2);
break;
case Sankey:
render(new Sankey()
.columns(dataBreach.columns)
.data(dataBreach.data)
.mappings([new SankeyColumn().column("Covered Entity Type"), new SankeyColumn().column("Type of Breach")])
);
break;
case Subgraph:
render(new Subgraph()
.title("Hello and Welcome!")
);
break;
case Vertex:
render(new Vertex()
.faChar("\uf007")
.text("Hello and Welcome!")
.annotationIcons([
{ faChar: "\uf188", tooltip: "Test A", shape_colorFill: "white", image_colorFill: "red" },
{ faChar: "\uf0ad", tooltip: "Test B", shape_colorFill: "green", shape_colorStroke: "green", image_colorFill: "white" },
{ faChar: "\uf193", tooltip: "Test C", shape_colorFill: "navy", shape_colorStroke: "navy", image_colorFill: "white" }
])
);
break;
default:
it("Has render test", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("map", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case ChoroplethContinents:
render(new ChoroplethContinents());
break;
case ChoroplethCountries:
render(new ChoroplethCountries()
.columns(geo.Countries.simple.columns)
.data(geo.Countries.simple.rawData)
);
break;
case ChoroplethStates:
render(new ChoroplethStates()
.columns(geo.States.simple.columns)
.data(geo.States.simple.data));
break;
case ChoroplethCounties:
render(new ChoroplethCounties()
.columns(geo.Counties.simple.columns)
.data(geo.Counties.simple.rawData)
);
break;
case GeoHash:
render(new GeoHash()
.columns(["geohash", "weight"])
.data(geo.GeoHash.map(function (row) { return [row.term, row.count]; }))
);
break;
case GMap:
render(new GMap()
.columns(geo.GMap.simple.columns)
.data(geo.GMap.simple.data)
);
break;
case GMapCounties:
render(new GMapCounties()
.columns(geo.Counties.simple.columns)
.data(geo.Counties.simple.rawData));
break;
case GMapGraph:
render(new GMapGraph()
.columns(geo.GMap.graph.columns)
.data(geo.GMap.graph.data)
);
break;
case GMapPin:
render(new GMapPin()
.columns(flightPath.columns)
.data(flightPath.data)
.latitudeColumn("dest_lat")
.longtitudeColumn("dest_long")
);
break;
case GMapPinLine:
const gmapLayered = new GMapLayered()
.layers([
new Graticule(),
new ChoroplethContinents(),
new ChoroplethStates()
.columns(geo.States.simple.columns)
.data(geo.States.simple.data),
new Lines()
.opacity(0.75)
.columns(["fromLatitude", "fromLongtitude", "toLatitude", "toLongtitude"])
.data([[51.897969, -8.475438, 35.652930, 139.687128],
[35.652930, 139.687128, 37.665074, -122.384375],
[37.665074, -122.384375, 32.690680, -117.178540],
[32.690680, -117.178540, 39.709455, -104.969859],
[39.709455, -104.969859, 41.244123, -95.961610],
[41.244123, -95.961610, 32.688980, -117.192040],
[32.688980, -117.192040, 45.786490, -108.526600],
[45.786490, -108.526600, 45.796180, -108.535652],
[45.796180, -108.535652, 45.774320, -108.494370],
[45.774320, -108.494370, 45.777062, -108.549835],
[45.777062, -108.549835, 51.897969, -8.475438]]),
new Pins()
.opacity(0.75)
.columns(geo.GMap.simple.columns)
.data(geo.GMap.simple.data)
]);
render(gmapLayered);
break;
case Graticule:
render(new Graticule());
break;
case OpenStreet:
render(new OpenStreet());
break;
case Layered:
const layered = new Layered()
.layers([
new Graticule(),
new ChoroplethContinents(),
new ChoroplethStates()
.columns(geo.States.simple.columns)
.data(geo.States.simple.data),
new Lines()
.opacity(0.75)
.columns(["fromLatitude", "fromLongtitude", "toLatitude", "toLongtitude"])
.data([[51.897969, -8.475438, 35.652930, 139.687128],
[35.652930, 139.687128, 37.665074, -122.384375],
[37.665074, -122.384375, 32.690680, -117.178540],
[32.690680, -117.178540, 39.709455, -104.969859],
[39.709455, -104.969859, 41.244123, -95.961610],
[41.244123, -95.961610, 32.688980, -117.192040],
[32.688980, -117.192040, 45.786490, -108.526600],
[45.786490, -108.526600, 45.796180, -108.535652],
[45.796180, -108.535652, 45.774320, -108.494370],
[45.774320, -108.494370, 45.777062, -108.549835],
[45.777062, -108.549835, 51.897969, -8.475438]]),
new Pins()
.opacity(0.75)
.columns(geo.GMap.simple.columns)
.data(geo.GMap.simple.data)
]);
render(layered);
break;
case CanvasPinLayer:
case Graph:
break;
case Leaflet.ClusterPins:
render(new Leaflet.ClusterPins()
.columns(flightPath.columns)
.data(flightPath.data)
.latitudeColumn("dest_lat")
.longtitudeColumn("dest_long")
);
break;
default:
it.skip("Has test", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("form", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case Button:
render(new Button()
.name("button-test")
.value("Button Test")
);
break;
case ColorInput:
break;
case Radio:
break;
case CheckBox:
break;
case FieldForm:
render(new FieldForm()
.fields([
new Database.Field().id("fname").label("First Name"),
new Database.Field().id("lname").label("Last Name"),
new Database.Field().id("age").label("Age")
])
.data([["Joe", "Bloggs", 42]])
);
break;
case Form:
render(new Form()
.inputs([
new Input()
.name("textbox-test")
.label("Alphanumeric")
.type("text")
.validate("^[A-Za-z0-9]+$")
.value("SomeString123"),
new InputRange()
.name("textbox-range-test")
.label("Range")
.value(["SomeString001", "SomeString100"]),
new Input()
.name("number-test")
.label("Number Test")
.type("number")
.validate("\\d+")
.value(123),
new Select()
.name("select-test")
.label("Select Test")
.selectOptions(["A", "B", "C"])
.value("B"),
new WidgetArray()
.content([
new Input()
.name("textbox-test")
.label("Only Alpha")
.type("text")
.validate("^[A-Za-z]+$")
.value("SomeString"),
new CheckBox()
.name("checkbox-test")
.label("Checkbox Test")
.value(true),
new Radio()
.name("radio-test")
.label("Radio Test")
.value(true),
new Button()
.name("button-test")
.value("Button Test")
]),
new TextArea()
.minHeight(64)
.rows(10)
.name("textarea-test")
.label("Textarea Test")
.value("Textarea Text")
,
new ColorInput()
.name("color-input-test")
.label("Color Input Test"),
new Slider()
.columns(data.Slider.simple.columns)
.data(data.Slider.simple.data)
]
));
break;
case Input:
break;
case InputRange:
break;
case OnOff:
break;
case Range:
break;
case Select:
break;
case TextArea:
break;
case Slider:
break;
default:
it("Has render test", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("layout", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case AbsoluteSurface:
const col = new Bar()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
;
render(new AbsoluteSurface()
.widget(col)
.widgetY(data.AbsoluteSurface.simple.widgetY)
.widgetWidth(data.AbsoluteSurface.simple.widgetWidth)
.widgetHeight(data.AbsoluteSurface.simple.widgetHeight)
.widgetX(data.AbsoluteSurface.simple.widgetX)
);
break;
case Accordion:
render(
new Accordion()
.pushListItem(new Accordion()
.pushListItem(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
.pushListItem(new Accordion()
.pushListItem(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
.pushListItem(new Accordion()
.pushListItem(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.pushListItem(
new Surface()
.size({ height: 200, width: 200 })
.title("Hello and Welcome!")
.widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
)
);
break;
case Border:
render(new Border()
.setContent("top", new Pie()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.setContent("right", new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.setContent("bottom", new Column()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.setContent("left", new Step()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.setContent("center", new Pie()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
));
break;
case Border2:
render(new Border2()
.top(new Pie()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
).right(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
).bottom(new Column()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
).left(new Step()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
).center(new Pie()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
));
break;
case Carousel:
render(new Carousel()
.widgets([
new Pie().columns(data.ND.subjects.columns).data(data.ND.subjects.data),
new Line().columns(data.ND.subjects.columns).data(data.ND.subjects.data),
new Column().columns(data.ND.subjects.columns).data(data.ND.subjects.data),
new Step().columns(data.ND.subjects.columns).data(data.ND.subjects.data)
]));
break;
case Cell:
render(new Cell()
.title("Hello and Welcome!")
.widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.buttonAnnotations(data.Surface.simple.buttonAnnotations)
);
break;
case Grid:
render(new Grid()
.setContent(0, 0, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data), "", 2, 2
)
.setContent(0, 2, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
.paletteID("Dark2"), "", 2, 2
)
.setContent(2, 0, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
.paletteID("Paired"), "", 2, 2
)
.setContent(2, 2, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
.paletteID("Pastel2"), "", 2, 2
)
.setContent(0, 4, new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
, "Title AAA", 4, 4
)
.setContent(4, 0, new Bar()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
, "Title BBB", 4, 8
)
);
// Hover indicators ---
const pie1 = new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
;
const pie2 = new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
;
const step1 = new Step()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
;
const step2 = new Step()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
;
const grid = new Grid()
.setContent(0, 0, pie1, "Updates Step1")
.setContent(0, 1, pie2, "Updates Step1 & Step2")
.setContent(1, 0, step1, "Step1")
.setContent(1, 1, step2, "Step2")
;
grid.content()[0].indicateTheseIds([grid.content()[2].id()]);
grid.content()[1].indicateTheseIds([grid.content()[2].id(), grid.content()[3].id()]);
render(grid);
break;
case Layered:
render(new Layered()
.addLayer(new AbsoluteSurface().widgetX(0).widgetY(0).widgetWidth("100").widgetHeight("100").widget(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
)
)
.addLayer(new AbsoluteSurface().widgetX(40).widgetY(40).widgetWidth("50").widgetHeight("50").opacity(0.66).widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
.addLayer(new AbsoluteSurface().widgetX(30).widgetY(10).widgetWidth("40").widgetHeight("60").widget(new Column()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
));
break;
case Modal:
render(new Modal()
.widget(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
)
);
break;
case Popup:
render(new Popup()
.widget(new Surface()
.widget(new Icon()
.faChar("\uF007")
)
)
);
break;
case Tabbed:
render(new Tabbed()
.addTab(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
, "Pie Chart", true)
.addTab(
new Line()
.columns(data.ND.subjects.columns)
.data(data.TwoD.subjects.data)
, "Line Chart")
.addTab(
new Column()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
, "Column Chart"
)
.addTab(new Tabbed()
.addTab(new Step()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
, "Step Chart"
)
.addTab(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
, "Pie Chart", true), "Nested Example"
)
);
break;
case Surface:
case Toolbar:
break;
case ChartPanel:
render(new ChartPanel()
.widget(new Column())
.title("Hello and Welcome!")
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
);
break;
case Legend:
break;
case HorizontalList:
const hlData: Array<[string, number, number]> = [
["A", 34, 21],
["B", 55, 34],
["C", 54, 90],
["D", 80, 153],
["E", 86, 92],
["F", 144, 233]
];
render(new HorizontalList()
.itemMinWidth(85)
.itemMinHeight(68)
.widgets(hlData.map(function (row) {
return new EntityCard()
.icon("")
.title(row[0])
.description("sum: " + (row[1] + row[2]))
.iconColor("#000")
.backgroundShape("rect")
.backgroundColorFill("#c8d6e5")
.backgroundColorStroke("#576574")
;
}))
);
break;
case VerticalList:
const vlData: Array<[string, number, number]> = [
["A", 34, 21],
["B", 55, 34],
["C", 54, 90],
["D", 80, 153],
["E", 86, 92],
["F", 144, 233]
];
render(new VerticalList()
.itemMinWidth(85)
.itemMinHeight(68)
.widgets(vlData.map(function (row) {
return new EntityCard()
.icon("")
.title(row[0])
.description("sum: " + (row[1] + row[2]))
.iconColor("#000")
.backgroundShape("rect")
.backgroundColorFill("#c8d6e5")
.backgroundColorStroke("#576574")
;
}))
);
break;
case FlexGrid:
break;
default:
it("Missing tests", () => {
expect(false).to.be.true;
});
}
}
});
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("other", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget || item.prototype instanceof CanvasWidget) {
switch (item.prototype.constructor) {
case HeatMap:
render(new HeatMap()
.columns(data.HeatMap.simple.columns)
.data(data.HeatMap.simple.data)
);
break;
case Table:
const table = new Table()
.columns(["Subject", "Year 1", "Year 2", "Year 3", "Year 4"])
.data([
["Width 2 undefined", , 83, , 72],
["English II", 17, 43, 83, 93],
["English III", 6, 43, 64, 93],
["Width Blank", 7, "", 52, 83],
["Geography II", 16, 73, 52, 83],
["Width 2 undefined", , 83, , 72],
["Science", 66, 60, 85, 6],
["Science II", 46, 20, 53, 7],
["With 2 NULL", null, 20, null, 7],
["Math", 98, 30, 23, 13],
["Math II", 76, 30, 34, 6],
["Math III", 80, 30, 27, 8]
])
;
render(table);
break;
case Html:
render(new Html()
.html('<div style="border:1px solid red;padding:10px;margin:20px;font-size:24px;">Text in a div!</div>')
);
break;
case IconList:
case AutoCompleteText:
/*
render(new AutoCompleteText()
.columns(["Col Label", "Col Value"])
.data([
["Math", 0],
["Science", 1],
["Geography", 3],
["Irish", 5],
["English", 7],
["Spanish", 2],
["Physics", 4],
["Astrology", 6]
])
.label("Label: ")
.valueColumn("Col Value")
.textColumn("Col Label")
);
*/
break;
case Select:
render(new Select()
.columns(["Col Label", "Col Value"])
.data([
["Math", 0],
["Science", 1],
["Geography", 3],
["Irish", 5],
["English", 7],
["Spanish", 2],
["Physics", 4],
["Astrology", 6]
])
.label("Label: ")
.valueColumn("Col Value")
.textColumn("Col Label")
);
break;
case Legend:
const line = new Line()
.columns(data.ND.ampolar.columns)
.data(data.ND.ampolar.data)
;
const legend = new Legend()
.targetWidget(line)
;
render(new Border()
.setContent("center", line)
.setContent("right", legend)
);
break;
default:
it.skip("Missing Test", () => {
expect(false).to.be.true;
});
}
}
});