mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
disable vector maps on development
This commit is contained in:
codecalm
@@ -3,6 +3,11 @@
|
||||
{% assign color = include.color | default: data.color | default: 'green' %}
|
||||
|
||||
{% 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>
|
||||
<div id="map-{{ id }}" class="w-100 h-100"></div>
|
||||
@@ -10,104 +15,105 @@
|
||||
</div>
|
||||
|
||||
{% capture script %}
|
||||
<script>
|
||||
// @formatter:on
|
||||
{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
|
||||
<script>
|
||||
// @formatter:on
|
||||
{% if jekyll.environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
|
||||
selector: '#map-{{ id }}',
|
||||
map: '{{ data.map }}',
|
||||
backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
{% unless data.filled %}
|
||||
fill: tabler.getColor('body-bg'),
|
||||
stroke: 'rgba(98, 105, 118, .16)',
|
||||
strokeWidth: 1,
|
||||
{% else %}
|
||||
fill: tabler.getColor('body-bg'),
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
{% 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 }}",
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const map = {% if jekyll.environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
|
||||
selector: '#map-{{ id }}',
|
||||
map: '{{ data.map }}',
|
||||
backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
{% unless data.filled %}
|
||||
fill: tabler.getColor('body-bg'),
|
||||
stroke: 'rgba(98, 105, 118, .16)',
|
||||
strokeWidth: 1,
|
||||
{% else %}
|
||||
fill: tabler.getColor('body-bg'),
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
{% endunless %}
|
||||
}
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 4,
|
||||
stroke: '#fff',
|
||||
opacity: 1,
|
||||
strokeWidth: 3,
|
||||
stokeOpacity: .5,
|
||||
fill: tabler.getColor('{{ color }}')
|
||||
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 }},
|
||||
},
|
||||
hover: {
|
||||
fill: tabler.getColor('{{ color }}'),
|
||||
stroke: tabler.getColor('{{ color }}')
|
||||
}
|
||||
},
|
||||
markerLabelStyle: {
|
||||
initial: {
|
||||
fontSize: 10
|
||||
{% endif %}
|
||||
{% if data.markers %}
|
||||
markers: [
|
||||
{% for marker in data.markers %}
|
||||
{
|
||||
coords: [{{ marker.coords }}],
|
||||
name: "{{ marker.name }}",
|
||||
},
|
||||
{% 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 }}')
|
||||
}
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function(marker) {
|
||||
return marker.name
|
||||
markerLabelStyle: {
|
||||
initial: {
|
||||
fontSize: 10
|
||||
},
|
||||
},
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.lines %}
|
||||
lines: [
|
||||
{% for line in data.lines %}
|
||||
{
|
||||
from: "{{ line.from }}",
|
||||
to: "{{ line.to }}"
|
||||
labels: {
|
||||
markers: {
|
||||
render: function(marker) {
|
||||
return marker.name
|
||||
},
|
||||
},
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
lineStyle: {
|
||||
strokeDasharray:"4 4",
|
||||
animation: true,
|
||||
stroke: "rgba(98, 105, 118, .75)",
|
||||
strokeWidth: .5,
|
||||
},
|
||||
{% endif %}
|
||||
});
|
||||
{% endif %}
|
||||
{% if data.lines %}
|
||||
lines: [
|
||||
{% for line in data.lines %}
|
||||
{
|
||||
from: "{{ line.from }}",
|
||||
to: "{{ line.to }}"
|
||||
},
|
||||
{% endfor %}
|
||||
],
|
||||
lineStyle: {
|
||||
strokeDasharray:"4 4",
|
||||
animation: true,
|
||||
stroke: "rgba(98, 105, 118, .75)",
|
||||
strokeWidth: .5,
|
||||
},
|
||||
{% endif %}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
window.addEventListener("resize", () => {
|
||||
map.updateSize();
|
||||
});
|
||||
});
|
||||
});
|
||||
// @formatter:off
|
||||
</script>
|
||||
{% endcapture %}
|
||||
// @formatter:off
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
{% if include.show-scripts %}
|
||||
{{ script }}
|
||||
{% else %}
|
||||
{% capture_global scripts %}
|
||||
{% if include.show-scripts %}
|
||||
{{ script }}
|
||||
{% endcapture_global %}
|
||||
{% else %}
|
||||
{% capture_global scripts %}
|
||||
{{ script }}
|
||||
{% endcapture_global %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% assign width = include.width | 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)">
|
||||
<!-- <rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" fill="#fff" rx="2"></rect>-->
|
||||
<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 %}>
|
||||
{% 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="{{ height }}" x2="{{ width }}" y2="0"></line>
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user