parent
c796fa1cae
commit
8a05d39ccd
@ -0,0 +1,195 @@
|
||||
{%- macro render_chart_content(c) -%}
|
||||
<div id="{{ c.chart_id }}" class="chart-container" style="width:{{ c.width }}; height:{{ c.height }};"></div>
|
||||
<script>
|
||||
var chart_{{ c.chart_id }} = echarts.init(
|
||||
document.getElementById('{{ c.chart_id }}'), '{{ c.theme }}', {renderer: '{{ c.renderer }}'});
|
||||
{% for js in c.js_functions.items %}
|
||||
{{ js }}
|
||||
{% endfor %}
|
||||
var option_{{ c.chart_id }} = {{ c.json_contents }};
|
||||
chart_{{ c.chart_id }}.setOption(option_{{ c.chart_id }});
|
||||
{% if c._is_geo_chart %}
|
||||
var bmap = chart_{{ c.chart_id }}.getModel().getComponent('bmap').getBMap();
|
||||
{% if c.bmap_js_functions %}
|
||||
{% for fn in c.bmap_js_functions.items %}
|
||||
{{ fn }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if c.width.endswith('%') %}
|
||||
window.addEventListener('resize', function(){
|
||||
chart_{{ c.chart_id }}.resize();
|
||||
})
|
||||
{% endif %}
|
||||
</script>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro render_notebook_charts(charts, libraries) -%}
|
||||
<script>
|
||||
require([{{ libraries | join(', ') }}], function(echarts) {
|
||||
{% for c in charts %}
|
||||
{% if c._component_type not in ("table", "image") %}
|
||||
var chart_{{ c.chart_id }} = echarts.init(
|
||||
document.getElementById('{{ c.chart_id }}'), '{{ c.theme }}', {renderer: '{{ c.renderer }}'});
|
||||
{% for js in c.js_functions.items %}
|
||||
{{ js }}
|
||||
{% endfor %}
|
||||
var option_{{ c.chart_id }} = {{ c.json_contents }};
|
||||
chart_{{ c.chart_id }}.setOption(option_{{ c.chart_id }});
|
||||
{% if c._is_geo_chart %}
|
||||
var bmap = chart_{{ c.chart_id }}.getModel().getComponent('bmap').getBMap();
|
||||
bmap.addControl(new BMap.MapTypeControl());
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
});
|
||||
</script>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro render_chart_dependencies(c) -%}
|
||||
{% for dep in c.dependencies %}
|
||||
<script type="text/javascript" src="{{ dep }}"></script>
|
||||
{% endfor %}
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro render_chart_css(c) -%}
|
||||
{% for dep in c.css_libs %}
|
||||
<link rel="stylesheet" href="{{ dep }}">
|
||||
{% endfor %}
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro display_tablinks(chart) -%}
|
||||
<div class="tab">
|
||||
{% for c in chart %}
|
||||
<button class="tablinks" onclick="showChart(event, '{{ c.chart_id }}')">{{ c.tab_name }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro switch_tabs() -%}
|
||||
<script>
|
||||
(function() {
|
||||
containers = document.getElementsByClassName("chart-container");
|
||||
if(containers.length > 0) {
|
||||
containers[0].style.display = "block";
|
||||
}
|
||||
})()
|
||||
|
||||
function showChart(evt, chartID) {
|
||||
let containers = document.getElementsByClassName("chart-container");
|
||||
for (let i = 0; i < containers.length; i++) {
|
||||
containers[i].style.display = "none";
|
||||
}
|
||||
|
||||
let tablinks = document.getElementsByClassName("tablinks");
|
||||
for (let i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = "tablinks";
|
||||
}
|
||||
|
||||
document.getElementById(chartID).style.display = "block";
|
||||
evt.currentTarget.className += " active";
|
||||
}
|
||||
</script>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro generate_tab_css() %}
|
||||
<style>
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 12px 16px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.tab button:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.tab button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: none;
|
||||
padding: 6px 12px;
|
||||
border-top: none;
|
||||
}
|
||||
</style>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro gen_components_content(chart) %}
|
||||
{% if chart._component_type == "table" %}
|
||||
<style>
|
||||
.fl-table {
|
||||
margin: 20px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.fl-table th {
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.fl-table tr {
|
||||
display: table-row;
|
||||
vertical-align: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.fl-table tr:hover td {
|
||||
background: #00d1b2;
|
||||
color: #F8F8F8;
|
||||
}
|
||||
|
||||
.fl-table td, .fl-table th {
|
||||
border-style: none;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
border-left: 1px solid #dbdbdb;
|
||||
border-bottom: 3px solid #dbdbdb;
|
||||
border-right: 1px solid #dbdbdb;
|
||||
padding: .5em .55em;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.fl-table td {
|
||||
border-style: none;
|
||||
font-size: 15px;
|
||||
vertical-align: center;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
border-left: 1px solid #dbdbdb;
|
||||
border-right: 1px solid #dbdbdb;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.fl-table tr:nth-child(even) {
|
||||
background: #F8F8F8;
|
||||
}
|
||||
</style>
|
||||
<div id="{{ chart.chart_id }}" class="chart-container" style="">
|
||||
<p class="title" {{ chart.title_opts.title_style }}> {{ chart.title_opts.title }}</p>
|
||||
<p class="subtitle" {{ chart.title_opts.subtitle_style }}> {{ chart.title_opts.subtitle }}</p>
|
||||
{{ chart.html_content }}
|
||||
</div>
|
||||
{% elif chart._component_type == "image" %}
|
||||
<div id="{{ chart.chart_id }}" class="chart-container" style="">
|
||||
<p class="title" {{ chart.title_opts.title_style }}> {{ chart.title_opts.title }}</p>
|
||||
<p class="subtitle" {{ chart.title_opts.subtitle_style }}> {{ chart.title_opts.subtitle }}</p>
|
||||
<img {{ chart.html_content }}/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
Loading…
Reference in new issue