Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

disable vector maps on development

Browse Source
This commit is contained in:
codecalm
2022-09-11 16:40:36 +02:00
parent ffde2b5bae
commit 54b4aa2267
2 changed files with 96 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/pages/_includes/ui/map-vector.html
View File

@@ -3,6 +3,11 @@
{% assign color = include.color | default: data.color | default: 'green' %} {% assign color = include.color | default: data.color | default: 'green' %}
{% if data %} {% if data %}
{% if jekyll.environment == 'development' %}
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
{% include ui/svg.html width="590" height="252" ratio=true border=true %}
</div>
{% else %}
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}"> <div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
<div> <div>
<div id="map-{{ id }}" class="w-100 h-100"></div> <div id="map-{{ id }}" class="w-100 h-100"></div>
@@ -10,104 +15,105 @@
</div> </div>
{% capture script %} {% capture script %}
<script> <script>
// @formatter:on // @formatter:on
{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %} {% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({ const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
selector: '#map-{{ id }}', selector: '#map-{{ id }}',
map: '{{ data.map }}', map: '{{ data.map }}',
backgroundColor: 'transparent', backgroundColor: 'transparent',
regionStyle: { regionStyle: {
initial: { initial: {
{% unless data.filled %} {% unless data.filled %}
fill: tabler.getColor('body-bg'), fill: tabler.getColor('body-bg'),
stroke: 'rgba(98, 105, 118, .16)', stroke: 'rgba(98, 105, 118, .16)',
strokeWidth: 1, strokeWidth: 1,
{% else %} {% else %}
fill: tabler.getColor('body-bg'), fill: tabler.getColor('body-bg'),
stroke: '#fff', stroke: '#fff',
strokeWidth: 1, strokeWidth: 1,
{% endunless %} {% endunless %}
} }
},
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
{% if data.values %}
// -------- Series --------
visualizeData: {
scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
values: {{ data.values }},
},
{% endif %}
{% if data.markers %}
markers: [
{% for marker in data.markers %}
{
coords: [{{ marker.coords }}],
name: "{{ marker.name }}",
}, },
{% endfor %} zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
], zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
markerStyle: { {% if data.values %}
initial: { // -------- Series --------
r: 4, visualizeData: {
stroke: '#fff', scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
opacity: 1, values: {{ data.values }},
strokeWidth: 3,
stokeOpacity: .5,
fill: tabler.getColor('{{ color }}')
}, },
hover: { {% endif %}
fill: tabler.getColor('{{ color }}'), {% if data.markers %}
stroke: tabler.getColor('{{ color }}') markers: [
} {% for marker in data.markers %}
}, {
markerLabelStyle: { coords: [{{ marker.coords }}],
initial: { name: "{{ marker.name }}",
fontSize: 10 },
{% endfor %}
],
markerStyle: {
initial: {
r: 4,
stroke: '#fff',
opacity: 1,
strokeWidth: 3,
stokeOpacity: .5,
fill: tabler.getColor('{{ color }}')
},
hover: {
fill: tabler.getColor('{{ color }}'),
stroke: tabler.getColor('{{ color }}')
}
}, },
}, markerLabelStyle: {
labels: { initial: {
markers: { fontSize: 10
render: function(marker) {
return marker.name
}, },
}, },
}, labels: {
{% endif %} markers: {
{% if data.lines %} render: function(marker) {
lines: [ return marker.name
{% for line in data.lines %} },
{ },
from: "{{ line.from }}",
to: "{{ line.to }}"
}, },
{% endfor %} {% endif %}
], {% if data.lines %}
lineStyle: { lines: [
strokeDasharray:"4 4", {% for line in data.lines %}
animation: true, {
stroke: "rgba(98, 105, 118, .75)", from: "{{ line.from }}",
strokeWidth: .5, to: "{{ line.to }}"
}, },
{% endif %} {% endfor %}
}); ],
lineStyle: {
strokeDasharray:"4 4",
animation: true,
stroke: "rgba(98, 105, 118, .75)",
strokeWidth: .5,
},
{% endif %}
});
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
map.updateSize(); map.updateSize();
});
}); });
}); // @formatter:off
// @formatter:off </script>
</script> {% endcapture %}
{% endcapture %}
{% if include.show-scripts %} {% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }} {{ script }}
{% endcapture_global %} {% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}

4
src/pages/_includes/ui/svg.html
View File

@@ -1,7 +1,7 @@
{% assign width = include.width | default: include.size | default: 20 %} {% assign width = include.width | default: include.size | default: 20 %}
{% assign height = include.height | default: include.size | default: 20 %} {% assign height = include.height | default: include.size | default: 20 %}
<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{% if include.ratio %}auto{% else %}{{ height }}{% endif %}" viewBox="0 0 {{ width }} {{ height }}" stroke="var(--tblr-border-color, #b8cef1)"> <svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)"{% if include.border %} style="width: 100%; height: auto"{% endif %}>
<!-- <rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" fill="#fff" rx="2"></rect>--> {% if include.border %}<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" rx="2"></rect>{% endif %}
<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line> <line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line> <line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
</svg> </svg>