def test_rendering_components_without_section_loop_index(): header_component_content = RenderedComponentContent(**{ # "component_type": "header", "content_block_type": "header", "header": "Overview", }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper(**{ "content_block": header_component_content, "content_block_loop": {"index": 2}, }) ) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == \ """ <div id="content-block-2" > <div id="content-block-2-header" > <h3> Overview </h3></div> </div>""".replace(" ", "").replace("\t", "").replace("\n", "") rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper(**{ "content_block": header_component_content, }) ) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == \ """ <div id="content-block" > <div id="content-block-header" > <h3> Overview </h3></div> </div>""".replace(" ", "").replace("\t", "").replace("\n", "") rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper(**{ "content_block": header_component_content, "section_loop": {"index": 3}, }) ) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == \ """ <div id="content-block" > <div id="content-block-header" > <h3> Overview </h3></div> </div>""".replace(" ", "").replace("\t", "").replace("\n", "")
def test_render_value_list(): value_list_component_content = RenderedComponentContent(**{ 'content_block_type': 'value_list', 'header': 'Example values', 'value_list': [{ 'content_block_type': 'string_template', 'string_template': { 'template': '$value', 'params': {'value': '0'}, 'styling': {'default': {'classes': ['badge', 'badge-info']}} } }, { 'content_block_type': 'string_template', 'string_template': { 'template': '$value', 'params': {'value': '1'}, 'styling': {'default': {'classes': ['badge', 'badge-info']}} } }], 'styling': { 'classes': ['col-4'], 'styles': {'margin-top': '20px'} } }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper(**{ "content_block": value_list_component_content, "section_loop": {"index": 1}, "content_block_loop": {"index": 2}, }) ) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == """ <div id="section-1-content-block-2" class="col-4" style="margin-top:20px;" > <div id="section-1-content-block-2-header" > <h4> Example values </h4></div> <p id="section-1-content-block-2-body" > <span > <span class="badge badge-info" >0</span> </span> <span > <span class="badge badge-info" >1</span> </span> </p> </div>""".replace(" ", "").replace("\t", "").replace("\n", "")
def test_render_graph(): graph_component_content = RenderedComponentContent( **{ "content_block_type": "graph", "header": "Histogram", "graph": "{\"$schema\": \"https://vega.github.io/schema/vega-lite/v2.6.0.json\", \"autosize\": \"fit\", \"config\": {\"view\": {\"height\": 300, \"width\": 400}}, \"data\": {\"name\": \"data-a681d02fb484e64eadd9721b37015d5b\"}, \"datasets\": {\"data-a681d02fb484e64eadd9721b37015d5b\": [{\"bins\": 3.7, \"weights\": 5.555555555555555}, {\"bins\": 10.8, \"weights\": 3.439153439153439}, {\"bins\": 17.9, \"weights\": 17.857142857142858}, {\"bins\": 25.0, \"weights\": 24.206349206349206}, {\"bins\": 32.0, \"weights\": 16.137566137566136}, {\"bins\": 39.1, \"weights\": 12.3015873015873}, {\"bins\": 46.2, \"weights\": 9.788359788359788}, {\"bins\": 53.3, \"weights\": 5.423280423280423}, {\"bins\": 60.4, \"weights\": 3.439153439153439}, {\"bins\": 67.5, \"weights\": 1.8518518518518516}]}, \"encoding\": {\"x\": {\"field\": \"bins\", \"type\": \"ordinal\"}, \"y\": {\"field\": \"weights\", \"type\": \"quantitative\"}}, \"height\": 200, \"mark\": \"bar\", \"width\": 200}", "styling": { "classes": ["col-4"] } }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper( **{ "content_block": graph_component_content, "section_loop": { "index": 1 }, "content_block_loop": { "index": 2 }, })) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == """ <div id="section-1-content-block-2" class="col-4" > <div id="section-1-content-block-2-header" > <h4> Histogram </h4> </div> <div class="show-scrollbars"> <div id="section-1-content-block-2-graph" ></div> </div> <script> // Assign the specification to a local variable vlSpec. vlSpec = {"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json", "autosize": "fit", "config": {"view": {"height": 300, "width": 400}}, "data": {"name": "data-a681d02fb484e64eadd9721b37015d5b"}, "datasets": {"data-a681d02fb484e64eadd9721b37015d5b": [{"bins": 3.7, "weights": 5.555555555555555}, {"bins": 10.8, "weights": 3.439153439153439}, {"bins": 17.9, "weights": 17.857142857142858}, {"bins": 25.0, "weights": 24.206349206349206}, {"bins": 32.0, "weights": 16.137566137566136}, {"bins": 39.1, "weights": 12.3015873015873}, {"bins": 46.2, "weights": 9.788359788359788}, {"bins": 53.3, "weights": 5.423280423280423}, {"bins": 60.4, "weights": 3.439153439153439}, {"bins": 67.5, "weights": 1.8518518518518516}]}, "encoding": {"x": {"field": "bins", "type": "ordinal"}, "y": {"field": "weights", "type": "quantitative"}}, "height": 200, "mark": "bar", "width": 200}; // Embed the visualization in the container with id `vis` vegaEmbed('#section-1-content-block-2-graph', vlSpec, { actions: false }).then(result=>console.log(result)).catch(console.warn); </script> </div> """.replace(" ", "").replace("\t", "").replace("\n", "")
def test_render_table_component(): table_component_content = RenderedComponentContent( **{ # "component_type": "header", "content_block_type": "table", "header": "Overview", "table": [ ["Mean", "446"], ["Minimum", "1"], ], "styling": { "classes": ["col-4"], } }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper( **{ "content_block": table_component_content, "section_loop": { "index": 1 }, "content_block_loop": { "index": 2 }, })) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == \ """ <div id="section-1-content-block-2" class="col-4" > <div id="section-1-content-block-2-header" > <h4> Overview </h4> </div> <table id="section-1-content-block-2-body" > <tr> <td id="section-1-content-block-2-cell-1-1" ><div class="table-cell-frame"><span>Mean</span></div></td><td id="section-1-content-block-2-cell-1-2" ><div class="table-cell-frame"><span>446</span></div></td></tr><tr> <td id="section-1-content-block-2-cell-2-1" ><div class="table-cell-frame"><span>Minimum</span></div></td><td id="section-1-content-block-2-cell-2-2" ><div class="table-cell-frame"><span>1</span></div></td></tr></table> </div>""".replace(" ", "").replace("\t", "").replace("\n", "")
def test_render_section_page(): section = RenderedSectionContent( **{ "section_name": None, "content_blocks": [ RenderedComponentContent(**{ "content_block_type": "header", "header": "Overview", }), RenderedComponentContent( **{ "content_block_type": "table", "header": "Dataset info", "table": [ ["Number of variables", "12"], ["Number of observations", "891"], ], "styling": { "classes": ["col-6", "table-responsive"], "styles": { "margin-top": "20px" }, "body": { "classes": ["table", "table-sm"] } } }) ] }) rendered_doc = ge.render.view.view.DefaultJinjaSectionView().render( RenderedComponentContentWrapper(**{ "section": section, "section_loop": { "index": 1 }, })) #.replace(" ", "").replace("\t", "").replace("\n", "") print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == """<div id="section-1" class="ge-section container-fluid"> <div class="row"> <div id="content-block-1" > <div id="content-block-1-header" > <h3> Overview </h3></div> </div> <div id="content-block-2" class="col-6 table-responsive" style="margin-top:20px;" > <div id="content-block-2-header" > <h4> Dataset info </h4> </div> <table id="content-block-2-body" class="table table-sm" > <tr> <td id="content-block-2-cell-1-1" ><div class="table-cell-frame"><span>Number of variables</span></div></td><td id="content-block-2-cell-1-2" ><div class="table-cell-frame"><span>12</span></div></td></tr><tr> <td id="content-block-2-cell-2-1" ><div class="table-cell-frame"><span>Number of observations</span></div></td><td id="content-block-2-cell-2-2" ><div class="table-cell-frame"><span>891</span></div></td></tr></table> </div> </div> </div>""".replace(" ", "").replace("\t", "").replace("\n", "")
def test_render_text(): text_component_content = RenderedComponentContent( **{ "content_block_type": "text", "header": "Histogram", "content": ["hello"], "styling": { "classes": ["col-4"] } }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper( **{ "content_block": text_component_content, "section_loop": { "index": 1 }, "content_block_loop": { "index": 2 }, })) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == """ <div id="section-1-content-block-2" class="col-4" > <div id="section-1-content-block-2-header" > <h4> Histogram </h4></div> <div id="section-1-content-block-2-body" > <p>hello</p> </div> </div>""".replace(" ", "").replace("\t", "").replace("\n", "") text_component_content = RenderedComponentContent( **{ "content_block_type": "text", "header": "Histogram", "content": ["hello", "goodbye"], "styling": { "classes": ["col-4"] } }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper( **{ "content_block": text_component_content, "section_loop": { "index": 1 }, "content_block_loop": { "index": 2 }, })) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == """ <div id="section-1-content-block-2" class="col-4" > <div id="section-1-content-block-2-header" > <h4> Histogram </h4></div> <div id="section-1-content-block-2-body" > <p>hello</p> <p>goodbye</p> </div> </div>""".replace(" ", "").replace("\t", "").replace("\n", "")
def test_rendering_components_with_styling(): # Medium-complicated example to verify that all the things are correctly piped to all the places header_component_content = RenderedComponentContent( **{ # "component_type": "table", "content_block_type": "table", "header": { "template": "$var1 $var2 $var3", "params": { "var1": "AAA", "var2": "BBB", "var3": "CCC", }, "styling": { "default": { "classes": ["x"] }, "params": { "var1": { "classes": ["y"] } } } }, "subheader": { "template": "$var1 $var2 $var3", "params": { "var1": "aaa", "var2": "bbb", "var3": "ccc", }, "styling": { "default": { "classes": ["xx"] }, "params": { "var1": { "classes": ["yy"] } } } }, "table": [ ["Mean", "446"], ["Minimum", "1"], ], "styling": { "classes": ["root_foo"], "styles": { "root": "bar" }, "attributes": { "root": "baz" }, "header": { "classes": ["header_foo"], "styles": { "header": "bar" }, "attributes": { "header": "baz" }, }, "subheader": { "classes": ["subheader_foo"], "styles": { "subheader": "bar" }, "attributes": { "subheader": "baz" }, }, "body": { "classes": ["body_foo"], "styles": { "body": "bar" }, "attributes": { "body": "baz" }, } } }) rendered_doc = ge.render.view.view.DefaultJinjaComponentView().render( RenderedComponentContentWrapper( **{ "content_block": header_component_content, "section_loop": { "index": 1 }, "content_block_loop": { "index": 2 }, })) print(rendered_doc) rendered_doc = rendered_doc.replace(" ", "").replace("\t", "").replace("\n", "") assert rendered_doc == \ """ <div id="section-1-content-block-2" class="root_foo" root="baz" style="root:bar;" > <div id="section-1-content-block-2-header" class="header_foo" header="baz" style="header:bar;" > <h4> <span > <span class="y" >AAA</span> <span class="x" >BBB</span> <span class="x" >CCC</span> </span> </h4> <h5 id="section-1-content-block-2-subheader" class="subheader_foo" subheader="baz" style="subheader:bar;" > <span > <span class="yy" >aaa</span> <span class="xx" >bbb</span> <span class="xx" >ccc</span> </span> </h5> </div> <table id="section-1-content-block-2-body" class="body_foo" body="baz" style="body:bar;" > <tr> <td id="section-1-content-block-2-cell-1-1" ><div class="table-cell-frame"><span>Mean</span></div></td><td id="section-1-content-block-2-cell-1-2" ><div class="table-cell-frame"><span>446</span></div></td></tr><tr> <td id="section-1-content-block-2-cell-2-1" ><div class="table-cell-frame"><span>Minimum</span></div></td><td id="section-1-content-block-2-cell-2-2" ><div class="table-cell-frame"><span>1</span></div></td></tr></table> </div>""".replace(" ", "").replace("\t", "").replace("\n", "")