本文整理匯總了TypeScript中@hpcc-js/test-data.render函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript render函數的具體用法？TypeScript render怎麽用？TypeScript render使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。
在下文中一共展示了render函數的8個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: describe
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;
});
}
}
});示例2: describe
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;
});
}
}
});示例3: describe
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;
});
}
}
});示例4: describe
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)
//.........這裏部分代碼省略.........
示例5: describe
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),
//.........這裏部分代碼省略.........
示例6: describe
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;
//.........這裏部分代碼省略.........
示例7: describe
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)
//.........這裏部分代碼省略.........
示例8: describe
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;
});
}
}
});