Skip to content
Snippets Groups Projects
Commit 62f1e3b3 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

what is goinf on here ugh

parent fd8f1324
No related branches found
No related tags found
No related merge requests found
Pipeline #389862 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 1112 additions and 58 deletions
assets/mapscript.js
+ 2
− 25
View file @ 62f1e3b3
......@@ -19,8 +19,7 @@
theme: String,
transparent: Boolean
};
function n(n) {
function n(n) {
return function(n) {
let r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e;
return Object.fromEntries(Object.entries(r).map((e => {
......@@ -366,29 +365,7 @@ window.datawrapper.render({
"keys": "Austria",
"values": "928"
},
"publish": {
"embed-width": 600,
"embed-height": 374,
"blocks": {
"logo": {
"enabled": false
},
"embed": false,
"download-pdf": false,
"download-svg": false,
"get-the-data": true,
"download-image": false
},
"export-pdf": {},
"autoDarkMode": false,
"chart-height": 340,
"force-attribution": false,
"embed-codes": {
"embed-method-responsive": "<iframe title=\"\" aria-label=\"Map\" id=\"datawrapper-chart-llngz\" src=\"https://datawrapper.dwcdn.net/llngz/1/\" scrolling=\"no\" frameborder=\"0\" style=\"width: 0; min-width: 100% !important; border: none;\" height=\"374\" data-external=\"1\"></iframe><script type=\"text/javascript\">!function(){\"use strict\";window.addEventListener(\"message\",(function(a){if(void 0!==a.data[\"datawrapper-height\"]){var e=document.querySelectorAll(\"iframe\");for(var t in a.data[\"datawrapper-height\"])for(var r=0;r<e.length;r++)if(e[r].contentWindow===a.source){var i=a.data[\"datawrapper-height\"][t]+\"px\";e[r].style.height=i}}}))}();\n</script>",
"embed-method-iframe": "<iframe title=\"\" aria-label=\"Map\" id=\"datawrapper-chart-llngz\" src=\"https://datawrapper.dwcdn.net/llngz/1/\" scrolling=\"no\" frameborder=\"0\" style=\"border: none;\" width=\"600\" height=\"374\" data-external=\"1\"></iframe>",
"embed-method-web-component": "<div style=\"min-height:374px\"><script type=\"text/javascript\" defer src=\"https://datawrapper.dwcdn.net/llngz/embed.js?v=1\" charset=\"utf-8\"></script><noscript><img src=\"https://datawrapper.dwcdn.net/llngz/full.png\" alt=\"\" /></noscript></div>"
}
},
"annotate": {
"notes": ""
},
......
index.html
+ 1
− 0
View file @ 62f1e3b3
......@@ -14,6 +14,7 @@
</head>
<body>
<div id="root"></div>
<script src="src/components/data/callablemapscr.js"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
......
src/App/App.css
+ 481
− 1
View file @ 62f1e3b3
......@@ -1282,4 +1282,484 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
width: 66% !important;
max-width: 66% !important;
}
\ No newline at end of file
}
/* datawrapper */
.chart.vis-d3-maps-choropleth {
overflow: hidden;
position: relative
}
.chart.vis-d3-maps-choropleth .label-buffer.svelte-u5v6p6,
.chart.vis-d3-maps-choropleth .label.svelte-u5v6p6 {
text-anchor: end
}
.chart.vis-d3-maps-choropleth .rtl .label-buffer.svelte-u5v6p6,
.chart.vis-d3-maps-choropleth .rtl .label.svelte-u5v6p6 {
text-anchor: start
}
.chart.vis-d3-maps-choropleth .inset-map-container svg {
overflow: visible
}
.chart.vis-d3-maps-choropleth .inset-map-container path.view {
fill: none
}
.chart.vis-d3-maps-choropleth .inset-map-container circle.view {
stroke: none
}
.chart.vis-d3-maps-choropleth .inset-map-container .graticule {
fill: none
}
.chart.vis-d3-maps-choropleth .inset-map-container div.label {
position: absolute;
text-align: center
}
.chart.vis-d3-maps-choropleth .inset-map-container div.label.outline {
opacity: .5
}
.chart.vis-d3-maps-choropleth .inset-map-container div.label:not(.outline) span {
text-shadow: none
}
.chart.vis-d3-maps-choropleth .legend-container {
display: flex;
justify-content: start;
z-index: 1
}
.chart.vis-d3-maps-choropleth .legend-container.align-center {
justify-content: center
}
.chart.vis-d3-maps-choropleth .legend-container[data-position*=inside] {
justify-content: start
}
.chart.vis-d3-maps-choropleth .legend-container.align-center .legend-title {
text-align: center
}
.chart.vis-d3-maps-choropleth .legend-container.align-center .category-legend.horizontal {
display: grid;
justify-items: center
}
.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=above],
.chart.vis-d3-maps-choropleth .legend-container.align-center .size-legend[data-title-position=below] {
align-items: center
}
.chart.vis-d3-maps-choropleth .legend-combined {
gap: 10px
}
@media (max-width:449px) {
.chart.vis-d3-maps-choropleth .legend-container {
display: block
}
}
.chart.vis-d3-maps-choropleth .map-key.mobile {
background: #0000;
position: static!important
}
.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories {
display: inline-block!important
}
.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal {
height: auto!important;
width: auto!important
}
.chart.vis-d3-maps-choropleth .map-key.mobile .title br {
display: none
}
.chart.vis-d3-maps-choropleth .map-key.map-key-mb,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt,
.chart.vis-d3-maps-choropleth .map-key.mobile {
background: #0000;
padding: 0;
position: static!important
}
.chart.vis-d3-maps-choropleth .map-key.map-key-mb .legend-categories,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt .legend-categories,
.chart.vis-d3-maps-choropleth .map-key.mobile .legend-categories {
display: inline-block!important
}
.chart.vis-d3-maps-choropleth .map-key.map-key-mb .category-legend.horizontal,
.chart.vis-d3-maps-choropleth .map-key.map-key-mt .category-legend.horizontal,
.chart.vis-d3-maps-choropleth .map-key.mobile .category-legend.horizontal {
height: auto!important;
width: auto!important
}
.chart.vis-d3-maps-choropleth .map-key svg {
display: block
}
.chart.vis-d3-maps-choropleth .category-legend {
border-radius: 4px
}
.chart.vis-d3-maps-choropleth .color-legend {
border-radius: 0
}
.chart.vis-d3-maps-choropleth .dw-tooltip {
background: #fff;
border: 1px solid #f5f5f5;
box-shadow: 3px 3px 3px #0000001a;
font-size: 11px;
max-width: 200px;
padding: 10px;
position: absolute;
visibility: hidden;
z-index: 100
}
.chart.vis-d3-maps-choropleth .dw-tooltip h2 {
font-size: 13px;
margin-top: 0
}
.chart.vis-d3-maps-choropleth .dw-tooltip table {
border-spacing: 0;
color: inherit;
font-size: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
white-space: inherit
}
.chart.vis-d3-maps-choropleth .dw-tooltip td,
.chart.vis-d3-maps-choropleth .dw-tooltip th {
padding: 0 5px 3px 0;
text-align: left
}
.chart.vis-d3-maps-choropleth .dw-tooltip ol,
.chart.vis-d3-maps-choropleth .dw-tooltip ul {
padding-left: 15px
}
.chart.vis-d3-maps-choropleth .dw-tooltip ol li,
.chart.vis-d3-maps-choropleth .dw-tooltip ul li {
margin-bottom: 2px
}
.chart.vis-d3-maps-choropleth .dw-tooltip hr {
border: 0;
border-top: 1px solid #777
}
.chart.vis-d3-maps-choropleth .dw-tooltip big {
font-size: 120%
}
.chart.vis-d3-maps-choropleth .dw-tooltip small {
font-size: 95%
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning {
background-color: #f2dede;
border: 1px solid #eed3d7;
border-radius: 4px;
color: #b94a48;
font-family: roboto;
font-weight: 700;
padding: 8px 35px 8px 14px;
position: relative;
text-shadow: 0 1px 0 #ffffff80
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table {
background: #fff;
border-radius: 1px;
display: block;
font-weight: 400;
margin-top: 10px;
padding: 1px 4px
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td {
padding: 0;
vertical-align: top
}
.chart.vis-d3-maps-choropleth .dw-tooltip .tooltip-warning table td.arrow {
padding-right: 2px
}
.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
color: #a7a7a7;
float: right;
font-size: 17px;
height: 17px;
line-height: 17px;
transform: translate(7px, -5px);
width: 17px
}
.chart.vis-d3-maps-choropleth .dw-tooltip {
left: 0;
padding-right: 20px;
pointer-events: none;
top: 0
}
.chart.vis-d3-maps-choropleth .dw-tooltip.sticky {
pointer-events: all
}
.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
color: #d8d8d8;
cursor: pointer;
font-size: 14px;
height: 14px;
line-height: 14px;
position: absolute;
right: 2px;
text-align: center;
top: 2px;
transform: none;
width: 14px
}
@media (max-device-width:600px) {
.chart.vis-d3-maps-choropleth .dw-tooltip .dw-tooltip-close {
font-size: 17px;
height: 17px;
line-height: 17px;
padding: 4px;
width: 17px
}
}
.chart.vis-d3-maps-choropleth rect.background {
fill: none;
pointer-events: all
}
.chart.vis-d3-maps-choropleth svg.svg-main {
display: block
}
.chart.vis-d3-maps-choropleth .label {
pointer-events: none
}
.chart.vis-d3-maps-choropleth .map-outer {
position: relative
}
.chart.vis-d3-maps-choropleth .annotations,
.chart.vis-d3-maps-choropleth .map-outer canvas {
left: 0;
pointer-events: none;
position: absolute;
top: 0
}
.chart.vis-d3-maps-choropleth .annotations {
height: 99%;
width: 100%
}
.chart.vis-d3-maps-choropleth .d3-maps-zoomed-in .annotations {
overflow: hidden
}
.chart.vis-d3-maps-choropleth .editing-annotations .zoom-buttons,
.chart.vis-d3-maps-choropleth .editing-annotations svg {
pointer-events: none
}
.chart.vis-d3-maps-choropleth .legend-container {
min-height: 10px
}
.chart.vis-d3-maps-choropleth .inset-map-container {
opacity: 1;
pointer-events: none;
position: absolute;
transition: opacity .1s ease-in-out
}
.chart.vis-d3-maps-choropleth .dw-chart-body-content.inset-map-zoom-only:not(.inset-map-show) .inset-map-container {
opacity: 0
}
.chart.vis-d3-maps-choropleth path.region {
fill: #bebcba
}
.chart.vis-d3-maps-choropleth .lbl-hidden {
pointer-events: none;
visibility: hidden
}
.chart.vis-d3-maps-choropleth path.borders {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none
}
.static .zoom-buttons {
display: none
}
.d3-maps-zoomed-in .annotations {
overflow: hidden
}
body.in-editor,
.web-component-body.in-editor {
padding-bottom: 10px
}
.dw-chart.vis-height-fit {
overflow: hidden
}
.chart.dir-rtl .dw-chart-body.svelte-9ysojt {
direction: rtl
}
.chart.is-dark-mode .hide-in-dark {
display: none
}
.chart:not(.is-dark-mode) .hide-in-light {
display: none
}
.chart .sr-only {
position: absolute;
left: -9999px;
height: 1px
}
.chart.js.svelte-9ysojt .noscript {
display: none
}
.chart .hidden,
.chart .hide {
display: none
}
a img {
border: 0px
}
b,
strong {
font-weight: bold
}
svg rect {
shape-rendering: crispEdges
}
.error {
background-color: #fbeff2;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
margin: 2em
}
.error p {
color: #b63057;
font-size: 14px;
padding: 1.25em 1.5em;
line-height: 1.5;
border-color: #cf4870;
border-style: solid;
border-width: 0 0 0 4px;
border-radius: 4px
}
.dw-chart-body-content.svelte-9ysojt {
position: relative;
z-index: 0
}
.is-static.svelte-ej8jdi a {
color: unset;
pointer-events: none;
text-decoration: inherit
}
.dir-rtl .outer-container.svelte-ej8jdi {
direction: rtl
}
.outer-container.svelte-ej8jdi {
position: relative
}
.container-afterChart.svelte-ej8jdi {
position: absolute;
pointer-events: none;
top: 0;
left: 0;
right: 0;
bottom: 0
}
/* Additional bc missing? */
.datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
dominant-baseline: hanging;
}
.datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.min, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.min {
text-anchor: start;
}
.datawrapper-llngz-1j8h2cc text:not(.buffer) {
fill: currentcolor;
}
.datawrapper-llngz-umw1i2 {
color: rgb(24, 24, 24) !important;
font-family: Roboto, sans-serif;
font-size: 12px;
}
.datawrapper-llngz-1tjke6r.horizontal g.labels text, .datawrapper-llngz-1tjke6r.horizontal g.labels text tspan {
dominant-baseline: hanging;
}
.datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text.max, .datawrapper-llngz-zuu2r2.horizontal:not(.dir-rtl) g.labels text tspan.max {
text-anchor: end;
}
.chart.vis-d3-maps-choropleth .map-outer {
position: relative;
}
.chart.vis-d3-maps-choropleth .annotations, .chart.vis-d3-maps-choropleth .map-outer canvas {
left: 0;
pointer-events: none;
position: absolute;
top: 0;
}
.chart.vis-d3-maps-choropleth rect.background {
fill: none;
pointer-events: all;
}
svg rect {
shape-rendering: crispEdges;
}
.datawrapper-llngz-mbp9a6 path.region-outline.has-data:hover, .datawrapper-llngz-mbp9a6 path.region-outline.hover-outline, .datawrapper-llngz-mbp9a6 path.region-outline.sticky {
stroke: rgb(0, 0, 0);
}
\ No newline at end of file
src/Ideas.sx
+ 3
− 1
View file @ 62f1e3b3
......@@ -25,4 +25,6 @@ componentDidMount() {
<div style="min-height:374px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/llngz/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/llngz/full.png" alt="" /></noscript></div>
\ No newline at end of file
<div style="min-height:374px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/llngz/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/llngz/full.png" alt="" /></noscript></div>
src/components/AOSs.tsx
+ 0
− 1
View file @ 62f1e3b3
//AOSs.tsx
import AOS from "aos";
import "./aos.css";
import { useEffect } from "react";
......
src/components/Map1.tsx
+ 96
− 3
View file @ 62f1e3b3
import InnerHTML from 'dangerously-set-html-content'
/* import { useEffect } from 'react' */
export function Map1(){
const htmlFile = `<div style="min-height: 374px">
<script type="text/javascript" defer src="https://datawrapper.dwcdn.net/llngz/embed.js?v=1" charset="utf-8">
<script type="text/javascript" defer src="assets/mapscript.js" charset="utf-8">
</script>
<noscript>
<img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
......@@ -29,8 +30,100 @@ return(
/* min-height: "374px" */
import { renderDatawrapper } from './seclarations'
export function Map4(){
console.log("Map 4 startet")
/* window.addEventListener('DOMContentLoaded', () => {
renderDatawrapper();
}); */
renderDatawrapper();
return(
<>
<div className="datawrapper-script-embed vis-height-fixed vis-d3-maps-choropleth" id="datawrapper-vis-llngz" style={{all: "initial"}}>
/* export function Map4(){
<div className="web-component-body" style={{position: "relative"}}>
<div className="chart dw-chart vis-d3-maps-choropleth">
<div className="outer-container svelte-ej8jdi">
<div className="container container-body datawrapper-llngz-umw1i2">
<div className="container container-bodyTop datawrapper-llngz-1g865o2">
<div className="container container-bodyCenter datawrapper-llngz-cca7ux">
<div slot="visBody" id="chart" className="dw-chart-body vis-height-fixed datawrapper-llngz-1omm849 svelte-9ysojt">
<div className="dw-chart-body-content svelte-9ysojt datawrapper-llngz-mbp9a6" aria-hidden="false">
{/* hier funktioniert alles... */}
<div className="map-key export-rect map-key-mt">
<div className="color-legend continuous horizontal dir-ltr datawrapper-llngz-1j8h2cc datawrapper-llngz-1tjke6r datawrapper-llngz-zuu2r2" role="graphics-legend" aria-label="Continuous color legend, ranging from 0 to 2,542." style={{width: "170px", height: "auto"}}>
<svg width="170.5" height="28.483322143554688">
<g>
<rect width="170" height="13" style={{fill: "url(#g-bca9)"}}>
</rect>
<g className="labels" aria-hidden="true" transform="translate(0,16)">
<text className="min" transform="translate(0,0)">
<tspan x="0" dy="0">0</tspan>
</text>
<text className="max" transform="translate(170,0)">
<tspan x="0" dy="0">2,542</tspan>
</text>
</g>
<g className="highlight" aria-hidden="true">
<g className="text" transform="translate(0,25)">
<text>
</text>
</g>
</g>
</g>
<defs>
<linearGradient id="g-bca9" x2="1" y2="0">
<stop offset="0%" stopColor="rgb(250, 233, 158)"></stop>
<stop offset="6.25%" stopColor="rgb(249, 222, 118)"></stop>
<stop offset="12.5%" stopColor="rgb(247, 211, 73)"></stop>
<stop offset="18.75%" stopColor="rgb(246, 198, 37)"></stop>
<stop offset="25%" stopColor="rgb(250, 181, 53)"></stop>
<stop offset="31.25%" stopColor="rgb(254, 163, 64)"></stop>
<stop offset="37.5%" stopColor="rgb(253, 149, 59)"></stop>
<stop offset="43.75%" stopColor="rgb(249, 137, 47)"></stop>
<stop offset="50%" stopColor="rgb(245, 125, 34)"></stop>
<stop offset="56.25%" stopColor="rgb(228, 93, 95)"></stop>
<stop offset="62.5%" stopColor="rgb(206, 57, 141)"></stop>
<stop offset="68.75%" stopColor="rgb(181, 20, 164)"></stop>
<stop offset="75%" stopColor="rgb(160, 18, 145)"></stop>
<stop offset="81.25%" stopColor="rgb(140, 16, 126)"></stop>
<stop offset="87.5%" stopColor="rgb(112, 28, 100)"></stop>
<stop offset="93.75%" stopColor="rgb(80, 35, 71)"></stop>
<stop offset="100%" stopColor="rgb(50, 35, 44)"></stop>
</linearGradient>
</defs>
</svg>
</div>
</div>
{/* ...bis hier */}
{/* MAP BEGIN */}
<div className="map-outer">
<canvas width="2235.34" height="1006" style={{width: "1117.67px", height: "503px"}}></canvas>
<svg className="svg-main world-2019" style={{width: "100%", overflow: "hidden", position: "relative"}} width="1117.67" height="503">
<g className="map" transform="translate(0,0) scale(1)">
<rect className="background" width="1117.67" height="503"></rect>
<path className="region-outline hover-outline has-data" style={{vectorEffect: "non-scaling-stroke", strokeWidth: "0.9px", strokeLinejoin: "round", fill: "none"}} d="M0,0"></path>
</g>
</svg>
<div className="annotations"></div>
</div>
{/* MAP END */}
<div className="dw-tooltip" style={{maxHeight: "220px", overflowY: "auto"}}></div>
</div>
</div>
</div>
</div>
<div className="container-afterChart svelte-ej8jdi"></div>
</div>
</div>
</div>
</div>
</div>
</>
)
} */
\ No newline at end of file
}
src/components/data/callablemapscr.js 0 → 100644
+ 224
− 0
View file @ 62f1e3b3
"use strict";
const t = new Set(["0", "false", "null"]),
e = {
allowEditing: Boolean,
dark: function(e) {
return "auto" === e ? e : !!e && !t.has(e)
},
dev: Boolean,
fitchart: Boolean,
logo: String,
logoId: String,
map2svg: Boolean,
plain: Boolean,
previewId: String,
search: String,
static: Boolean,
svgonly: Boolean,
theme: String,
transparent: Boolean
};
function n(n) {
return function(n) {
let r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e;
return Object.fromEntries(Object.entries(r).map((e => {
let [r, o] = e;
const i = n(r);
return o === Boolean ? [r, !!i && !t.has(i)] : [r, i && o(i)]
})))
}((t => n.getAttribute("data-".concat(t))), arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e)
}
function r() {}
const o = {};
const i = {},
a = "undefined" != typeof Symbol ? Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator")) : "@@iterator";
function c(t, e, n) {
if (!t.s) {
if (n instanceof s) {
if (!n.s) return void(n.o = c.bind(null, t, e));
1 & e && (e = n.s), n = n.v
}
if (n && n.then) return void n.then(c.bind(null, t, e), c.bind(null, t, 2));
t.s = e, t.v = n;
const r = t.o;
r && r(t)
}
}
const s = function() {
function t() {}
return t.prototype.then = function(e, n) {
const r = new t,
o = this.s;
if (o) {
const t = 1 & o ? e : n;
if (t) {
try {
c(r, 1, t(this.v))
} catch (t) {
c(r, 2, t)
}
return r
}
return this
}
return this.o = function(t) {
try {
const o = t.v;
1 & t.s ? c(r, 1, e ? e(o) : o) : n ? c(r, 1, n(o)) : c(r, 2, o)
} catch (t) {
c(r, 2, t)
}
}, r
}, t
}();
function u(t) {
return t instanceof s && 1 & t.s
}
function l(t, e, n) {
if ("function" == typeof t[a]) {
var r, o, i, l = t[a]();
function f(t) {
try {
for (; !((r = l.next()).done || n && n());)
if ((t = e(r.value)) && t.then) {
if (!u(t)) return void t.then(f, i || (i = c.bind(null, o = new s, 2)));
t = t.v
} o ? c(o, 1, t) : o = t
} catch (t) {
c(o || (o = new s), 2, t)
}
}
if (f(), l.return) {
var d = function(t) {
try {
r.done || l.return()
} catch (t) {}
return t
};
if (o && o.then) return o.then(d, (function(t) {
throw d(t)
}));
d()
}
return o
}
if (!("length" in t)) throw new TypeError("Object is not iterable");
for (var h = [], p = 0; p < t.length; p++) h.push(t[p]);
return function(t, e, n) {
var r, o, i = -1;
return function a(l) {
try {
for (; ++i < t.length && (!n || !n());)
if ((l = e(i)) && l.then) {
if (!u(l)) return void l.then(a, o || (o = c.bind(null, r = new s, 2)));
l = l.v
} r ? c(r, 1, l) : r = l
} catch (t) {
c(r || (r = new s), 2, t)
}
}(), r
}(h, (function(t) {
return e(h[t])
}), n)
}
function d(t) {
return function() {
for (var e = [], n = 0; n < arguments.length; n++) e[n] = arguments[n];
try {
return Promise.resolve(t.apply(this, e))
} catch (t) {
return Promise.reject(t)
}
}
}
function renderFunction() {
if (window.datawrapper && window.datawrapper.render) return;
window.datawrapper = {
...window.datawrapper || {},
chartData: o,
libraries: {},
WebComponent: {},
render: d((function(t) {
let e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
t.script = document.currentScript, !t.chart.publicUrl && t.script && (t.chart.publicUrl = t.script.src.replace(/\/(embed\.js)?$/, "/"));
const o = t.origin = e.origin || (t.chart.publicUrl || "").replace(/\/(index\.html)?$/, "");
window.datawrapper.chartData[t.chart.id] = Promise.resolve(t);
const a = "datawrapper-vis-".concat(t.chart.id),
c = e.target || document.createElement("div");
c.classList.add("datawrapper-script-embed"), c.setAttribute("id", a), e.target || t.script.parentNode.insertBefore(c, t.script), c.style.all = "initial";
const s = e.flags || n(t.script),
u = "auto" === s.dark || null === s.dark && t.chartAutoDark;
if (u && (s.dark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches), !("customElements" in window) || !("ResizeObserver" in window)) {
const e = document.createElement("iframe");
return e.src = t.chart.publicUrl, e.setAttribute("title", t.chart.title), e.setAttribute("scrolling", "no"), e.setAttribute("frameborder", "0"), e.setAttribute("style", "width: 0; min-width: 100% !important; border: none;"), e.setAttribute("height", t.chart.metadata.publish["embed-height"]), e.setAttribute("data-external", 1), c.appendChild(e), void window.addEventListener("message", (function(t) {
if (void 0 !== t.data["datawrapper-height"]) {
var e = document.querySelectorAll("iframe");
for (var n in t.data["datawrapper-height"])
for (var r = 0; r < e.length; r++)
if (e[r].contentWindow === t.source) {
var o = t.data["datawrapper-height"][n] + "px";
e[r].style.height = o
}
}
}))
}
let h = null;
const p = {
target: c,
props: {
outerContainer: c,
dependencyPromises: window.datawrapper.dependencyPromises,
renderFlags: s,
isAutoDark: u,
...t,
selfDestruct() {
h && h.$destroy ? h.$destroy() : c.innerHTML = ""
}
},
hydrate: !1
},
f = d((function(t) {
return i[t] || (i[t] = function(t) {
let e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
return new Promise(((n, r) => {
const o = document.createElement("script");
o.src = t, o.charset = "utf-8", o.onload = () => {
e && e(), n()
}, o.onerror = r, document.body.appendChild(o)
}))
}(t.startsWith("http") ? t : "".concat(o, "/").concat(t))), i[t]
})),
[m, w, ...v] = t.dependencies;
return b = Promise.all([f(m), f(w)]), g = function() {
return e = l(v, (function(t) {
return function(t, e) {
if (!e) return t && t.then ? t.then(r) : Promise.resolve()
}(f(t))
})), n = function() {
const {
webComponentJsHash: e
} = t, n = window.datawrapper.WebComponent[e] || window.datawrapper.VisualizationWebComponent, r = "datawrapper-visualization", o = customElements.get(r) && customElements.get(r) !== n ? "".concat(r, "-").concat(null != e ? e : "1") : r;
customElements.get(o) || customElements.define(o, n);
const i = customElements.get(o);
h = new i(p)
}, e && e.then ? e.then(n) : n(e);
var e, n
}, y ? g ? g(b) : b : (b && b.then || (b = Promise.resolve(b)), g ? b.then(g) : b);
var b, g, y
}))
};
}
// Export the function so it can be called explicitly
window.renderDatawrapper = renderFunction;
src/components/data/legend.html 0 → 100644
+ 41
− 0
View file @ 62f1e3b3
<svg width="170.5" height="28.483322143554688" style="display: block; overflow: visible;">
<g>
<rect width="170" height="13" style="fill: url(&quot;#g-gdqp&quot;); shape-rendering: crispEdges;">
</rect>
<g class="labels" aria-hidden="true" transform="translate(0,16)">
<text class="min" transform="translate(0,0)" style="text-anchor: start; dominant-baseline: hanging; fill: black; ">
<tspan x="0" dy="0">0</tspan>
</text>
<text class="max" transform="translate(170,0)">
<tspan x="0" dy="0">2,542</tspan>
</text>
</g>
<g class="highlight" aria-hidden="true">
<path class="triangle" d="M-5,0 L 5,0 L 0,-7 Z" transform="translate(0,20)"></path>
<g class="text" transform="translate(0,25)">
<text></text>
</g>
</g>
</g>
<defs>
<linearGradient id="g-gdqp" x2="1" y2="0">
<stop offset="0%" stop-color="rgb(250, 233, 158)"></stop>
<stop offset="6.25%" stop-color="rgb(249, 222, 118)"></stop>
<stop offset="12.5%" stop-color="rgb(247, 211, 73)"></stop>
<stop offset="18.75%" stop-color="rgb(246, 198, 37)"></stop>
<stop offset="25%" stop-color="rgb(250, 181, 53)"></stop>
<stop offset="31.25%" stop-color="rgb(254, 163, 64)"></stop>
<stop offset="37.5%" stop-color="rgb(253, 149, 59)"></stop>
<stop offset="43.75%" stop-color="rgb(249, 137, 47)"></stop>
<stop offset="50%" stop-color="rgb(245, 125, 34)"></stop>
<stop offset="56.25%" stop-color="rgb(228, 93, 95)"></stop>
<stop offset="62.5%" stop-color="rgb(206, 57, 141)"></stop>
<stop offset="68.75%" stop-color="rgb(181, 20, 164)"></stop>
<stop offset="75%" stop-color="rgb(160, 18, 145)"></stop>
<stop offset="81.25%" stop-color="rgb(140, 16, 126)"></stop>
<stop offset="87.5%" stop-color="rgb(112, 28, 100)"></stop>
<stop offset="93.75%" stop-color="rgb(80, 35, 71)"></stop>
<stop offset="100%" stop-color="rgb(50, 35, 44)"></stop>
</linearGradient>
</defs>
</svg>
\ No newline at end of file
src/components/data/map.svg 0 → 100644
+ 6
− 0
View file @ 62f1e3b3
<svg className="svg-main world-2019" style={{width: "100%", overflow: "hidden", position: "relative"}} width="1117.67" height="503">
<g className="map" transform="translate(0,0) scale(1)">
<rect className="background" width="1117.67" height="503"></rect>
<path className="region-outline hover-outline has-data" style={{vectorEffect: "non-scaling-stroke", strokeWidth: "0.9px", strokeLinejoin: "round", fill: "none"}} d="M0,0"></path>
</g>
</svg>
\ No newline at end of file
src/components/data/mapscr.ts 0 → 100644
+ 224
− 0
View file @ 62f1e3b3
// Define the Chart interface with the necessary properties
interface Chart {
publicUrl: string;
id: string;
metadata: {
publish: {
"embed-height": string;
};
};
title: string;
}
// Define the configuration interface
interface DataWrapperConfig {
allowEditing: boolean;
dark: (e: string) => boolean | string;
dev: boolean;
fitchart: boolean;
logo: string;
logoId: string;
map2svg: boolean;
plain: boolean;
previewId: string;
search: string;
static: boolean;
svgonly: boolean;
theme: string;
transparent: boolean;
webComponentJsHash?: string;
}
// Set of falsy values
const t = new Set(["0", "false", "null"]);
// Default configuration object
const e: DataWrapperConfig = {
allowEditing: false,
dark: function (e: string): boolean | string {
return "auto" === e ? e : !!e && !t.has(e);
},
dev: false,
fitchart: false,
logo: "",
logoId: "",
map2svg: false,
plain: false,
previewId: "",
search: "",
static: false,
svgonly: false,
theme: "",
transparent: false,
};
// Function to parse data attributes
function parseDataAttributes(element: Element): DataWrapperConfig {
return (function (getAttribute: (attr: string) => string | null): DataWrapperConfig {
return Object.fromEntries(
Object.entries(e).map(([key, val]) => {
const attrVal = getAttribute(`data-${key}`);
return val === Boolean
? [key, !!attrVal && !t.has(attrVal)]
: [key, val(attrVal)];
})
) as DataWrapperConfig;
})(attr => element.getAttribute(attr));
}
// Function to render the datawrapper
export function renderDatawrapper(): void{
console.log("Attempting to run renderDatawrapper");
if (typeof window === 'undefined') {
console.warn('renderDatawrapper is running in a non-browser environment.');
return;
}
console.log("Running renderDatawrapper in a browser environment");
console.log("Called function renderDatawrapper")
if (window.datawrapper && window.datawrapper.render) {
console.log("true: (window.datawrapper && window.datawrapper.render) ");
}
if (window.datawrapper && window.datawrapper.render) return;
window.datawrapper = {
chartData: {},
libraries: {},
WebComponent: {},
render: async function (t: {
origin: any;
chart: Chart;
dependencies: string[];
chartAutoDark: boolean;
script?: HTMLScriptElement | undefined;
webComponentJsHash?: string;
}, e: { [key: string]: any } = {}): Promise<void> {
t.script = document.currentScript as HTMLScriptElement;
if (!t.chart.publicUrl && t.script) {
t.chart.publicUrl = t.script.src.replace(/\/(embed\.js)?$/, "/");
console.log("(!t.chart.publicUrl && t.script) true");
}
const origin = e.origin || (t.chart.publicUrl || "").replace(/\/(index\.html)?$/, "");
t.origin = origin;
window.datawrapper.chartData[t.chart.id] = Promise.resolve(t);
const targetId = `datawrapper-vis-${t.chart.id}`;
const target = e.target || document.createElement("div");
target.classList.add("datawrapper-script-embed");
target.setAttribute("id", targetId);
if (!e.target) {
console.log("true: (!e.target)")
t.script.parentNode?.insertBefore(target, t.script);
}
target.style.all = "initial";
const renderFlags = e.flags || parseDataAttributes(t.script);
const isAutoDark = renderFlags.dark === "auto" || (renderFlags.dark === null && t.chartAutoDark);
if (isAutoDark) {
console.log("true: (isAutoDark) ")
renderFlags.dark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
}
if (!("customElements" in window) || !("ResizeObserver" in window)) {
console.log("true: (!(\"customElements\" in window)");
const iframe = document.createElement("iframe");
iframe.src = t.chart.publicUrl;
iframe.setAttribute("title", t.chart.title);
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("style", "width: 0; min-width: 100% !important; border: none;");
iframe.setAttribute("height", t.chart.metadata.publish["embed-height"]);
iframe.setAttribute("data-external", "1");
target.appendChild(iframe);
// Cast window to any to access addEventListener
(window as any).addEventListener("message", function (event: MessageEvent) {
if (event.data["datawrapper-height"] !== undefined) {
console.log("true (event.data[\"datawrapper-height\"] !== undefined)");
const iframes = document.querySelectorAll("iframe");
for (const key in event.data["datawrapper-height"]) {
for (let i = 0; i < iframes.length; i++) {
if (iframes[i].contentWindow === event.source) {
console.log("rrue: (iframes[i].contentWindow === event.source)");
const height = event.data["datawrapper-height"][key] + "px";
iframes[i].style.height = height;
}
}
}
}
});
return;
}
let componentInstance: any = null;
const componentProps = {
target: target,
props: {
outerContainer: target,
dependencyPromises: window.datawrapper.dependencyPromises,
renderFlags: renderFlags,
isAutoDark: isAutoDark,
...t,
selfDestruct() {
componentInstance && componentInstance.$destroy ? componentInstance.$destroy() : target.innerHTML = "";
}
},
hydrate: false
};
const loadScript = (url: string): Promise<void> => {
return new Promise<void>((resolve, reject) => {
const script = document.createElement("script");
script.src = url;
script.charset = "utf-8";
script.onload = () => resolve();
script.onerror = reject;
document.body.appendChild(script);
});
};
const loadDependency = (dep: string): Promise<void> => {
const scriptUrl = dep.startsWith("http") ? dep : `${origin}/${dep}`;
return window.datawrapper.libraries[scriptUrl] || (window.datawrapper.libraries[scriptUrl] = loadScript(scriptUrl));
};
const [mainDep, visDep, ...otherDeps] = t.dependencies;
const mainVisLoaded = Promise.all([loadDependency(mainDep), loadDependency(visDep)]);
const loadComponents = async (): Promise<void> => {
for (const dep of otherDeps) {
await loadDependency(dep);
}
const webComponentJsHash = t.webComponentJsHash ?? "";
const WebComponent = window.datawrapper.WebComponent[webComponentJsHash] || window.datawrapper.VisualizationWebComponent;
const customElementTag = customElements.get("datawrapper-visualization") && customElements.get("datawrapper-visualization") !== WebComponent ? `datawrapper-visualization-${webComponentJsHash}` : "datawrapper-visualization";
if (!customElements.get(customElementTag)) {
customElements.define(customElementTag, WebComponent);
}
const WebComponentClass = customElements.get(customElementTag);
if (WebComponentClass) {
componentInstance = new WebComponentClass(componentProps);
} else {
console.error(`Web component class '${customElementTag}' not found.`);
}
};
await mainVisLoaded;
await loadComponents();
}
};
}
// Export the function so it can be called explicitly
window.renderDatawrapper = renderDatawrapper;
// Call the render function when the window loads
window.onload = function () {
renderDatawrapper();
console.log("Datawrapper deployed")
};
src/components/seclarations.d.ts deleted 100644 → 0
+ 0
− 21
View file @ fd8f1324
export * from './Villagebuttons.tsx';
export * from './headings.tsx';
export * from './Sidebar.tsx';
export * from './Videoboxes.tsx';
export * from './Timeline.tsx';
export * from '../Button.js';
export * from '../UrlButton.js';
export * from '../Events.js';
export * from './components/Timeline.js';
export * from './themes/index.js';
export * from './constants/layouts';
export * from './utils/themes/defaultTheme';
export * from '../Card.js';
export * from './AOSs.tsx'
export * from './My-Timeline.tsx'
src/components/seclarations.ts 0 → 100644
+ 25
− 0
View file @ 62f1e3b3
export * from './Villagebuttons.tsx';
export * from './headings.tsx';
export * from './Sidebar.tsx';
export * from './AOSs.tsx'
export * from './My-Timeline.tsx'
export * from './data/mapscr.ts'
declare global{
interface Window {
datawrapper: Datawrapper;
renderDatawrapper: () => void;
}
}
interface Datawrapper {
chartData: { [key: string]: Promise<any> };
libraries: { [key: string]: Promise<void> };
WebComponent: { [key: string]: any };
render?: (t: any, e?: { [key: string]: any }) => void;
VisualizationWebComponent?: any;
dependencyPromises?: any;
}
src/contents/Home.tsx
+ 4
− 3
View file @ 62f1e3b3
//import { Inspirations, InspirationLink } from "../components";
/* import { Sidebar } from "react-pro-sidebar"; */
import { Map1 } from "../components/Map1";
import { Map4 } from "../components/Map1";
export function Home() {
return (
......@@ -8,9 +8,10 @@ export function Home() {
<div className="row">
<div className="col">
<h2>Wiki under construction!</h2>
{/* <hr />
<Map1></Map1> */}
<hr />
<Map1></Map1>
<hr />
<Map4/>
</div>
</div>
<div className="row">
......
src/main.tsx
+ 1
− 0
View file @ 62f1e3b3
......@@ -10,3 +10,4 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
</BrowserRouter>
</React.StrictMode>,
);
src/vite-env.d.ts
+ 1
− 1
View file @ 62f1e3b3
......@@ -9,5 +9,5 @@ interface ImportMetaEnv {
interface ImportMeta {
readonly env: ImportMetaEnv;
}
\ No newline at end of file
tsconfig.json
+ 1
− 1
View file @ 62f1e3b3
......@@ -20,7 +20,7 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
"include": ["src", "code/mapsc.ts", "assets/mapscript.js"]
}
\ No newline at end of file
tsconfig.node.json
+ 1
− 1
View file @ 62f1e3b3
......@@ -7,6 +7,6 @@
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts", "src/utils/index.ts"]
"include": ["vite.config.ts", "src/utils/index.ts", "src/components/seclarations.ts"]
}
\ No newline at end of file
vite.config.js
+ 1
− 0
View file @ 62f1e3b3
......@@ -9,4 +9,5 @@ export default () => {
base: `/${stringToSlug(env.VITE_TEAM_NAME)}/`,
plugins: [react()],
});
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment