Vue Transition not working when attempting to toggle between svgs. Working with vue transitions - vue.js

Simple as the title suggests, I'm not sure why the transition is not working to toggle between both svgs.
What am I missing here? I wrapped the svgs in divs, but that didn't help at all.
Any advise would be greatly appreciated.
Cheers!
CodePen:
https://codepen.io/LovelyAndy/pen/MWmyzmm
Html
<div id="icon">
<transition name="fade" mode="out-in"><div v-if="show"
#click="show = !show">
<svg width="41" height="58" viewBox="0 0 41 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" width="40" height="40" rx="20" fill="#F9F9FF"/>
<path d="M14.9916 56.146C14.8796 56.2393 14.6696 56.3653 14.3616 56.524C14.0629 56.6827 13.6943 56.8227 13.2556 56.944C12.8169 57.0653 12.3316 57.1213 11.7996 57.112C10.9876 57.0933 10.2596 56.9487 9.61559 56.678C8.98093 56.398 8.43959 56.02 7.99159 55.544C7.55293 55.068 7.21693 54.522 6.98359 53.906C6.75026 53.29 6.63359 52.632 6.63359 51.932C6.63359 50.8867 6.84359 49.9627 7.26359 49.16C7.68359 48.3573 8.26693 47.7273 9.01359 47.27C9.76959 46.8127 10.6469 46.584 11.6456 46.584C12.3363 46.584 12.9476 46.6773 13.4796 46.864C14.0116 47.0507 14.4456 47.2513 14.7816 47.466L13.9836 49.384C13.7503 49.2067 13.4376 49.0247 13.0456 48.838C12.6629 48.642 12.2196 48.544 11.7156 48.544C11.1929 48.544 10.7029 48.6887 10.2456 48.978C9.79759 49.2673 9.43359 49.6593 9.15359 50.154C8.88293 50.6393 8.74759 51.1947 8.74759 51.82C8.74759 52.4827 8.87359 53.066 9.12559 53.57C9.37759 54.0647 9.73693 54.452 10.2036 54.732C10.6703 55.012 11.2163 55.152 11.8416 55.152C12.3923 55.152 12.8636 55.0633 13.2556 54.886C13.6476 54.7087 13.9463 54.522 14.1516 54.326L14.9916 56.146ZM19.2793 57.168C18.71 57.168 18.192 57.056 17.7253 56.832C17.268 56.5987 16.904 56.244 16.6333 55.768C16.3626 55.292 16.2273 54.6853 16.2273 53.948C16.2273 53.2573 16.3673 52.66 16.6473 52.156C16.9273 51.652 17.296 51.2647 17.7533 50.994C18.2106 50.714 18.696 50.574 19.2093 50.574C19.816 50.574 20.2733 50.672 20.5813 50.868C20.8986 51.064 21.1506 51.2787 21.3373 51.512L21.4633 50.882H23.2833V57H21.3233V56.244C21.23 56.3373 21.09 56.4587 20.9033 56.608C20.726 56.7573 20.502 56.888 20.2313 57C19.9606 57.112 19.6433 57.168 19.2793 57.168ZM19.8393 55.572C20.5206 55.572 21.0153 55.264 21.3233 54.648V53.15C21.2113 52.8513 21.0153 52.6133 20.7353 52.436C20.4646 52.2587 20.1426 52.17 19.7693 52.17C19.3493 52.17 18.9853 52.3287 18.6773 52.646C18.3693 52.954 18.2153 53.3553 18.2153 53.85C18.2153 54.1767 18.29 54.4707 18.4393 54.732C18.5886 54.9933 18.7846 55.1987 19.0273 55.348C19.2793 55.4973 19.55 55.572 19.8393 55.572ZM27.2909 57.126C26.7869 57.126 26.3156 57.0373 25.8769 56.86C25.4476 56.6827 25.0836 56.4353 24.7849 56.118L25.5969 55.04C25.8956 55.3107 26.1709 55.5067 26.4229 55.628C26.6843 55.74 26.9176 55.796 27.1229 55.796C27.3656 55.796 27.5663 55.7587 27.7249 55.684C27.8836 55.6093 27.9629 55.488 27.9629 55.32C27.9629 55.1613 27.8976 55.0353 27.7669 54.942C27.6456 54.8487 27.4869 54.774 27.2909 54.718C27.0949 54.6527 26.8849 54.5873 26.6609 54.522C26.1009 54.3447 25.6949 54.088 25.4429 53.752C25.2003 53.4067 25.0789 53.0333 25.0789 52.632C25.0789 52.324 25.1583 52.016 25.3169 51.708C25.4849 51.3907 25.7463 51.1293 26.1009 50.924C26.4649 50.7093 26.9316 50.602 27.5009 50.602C28.0143 50.602 28.4483 50.6533 28.8029 50.756C29.1576 50.8587 29.4936 51.0267 29.8109 51.26L29.0689 52.408C28.8916 52.268 28.6909 52.1513 28.4669 52.058C28.2523 51.9553 28.0516 51.8993 27.8649 51.89C27.6129 51.8807 27.4169 51.9273 27.2769 52.03C27.1369 52.1233 27.0669 52.2353 27.0669 52.366C27.0576 52.5433 27.1229 52.6833 27.2629 52.786C27.4123 52.8887 27.5989 52.968 27.8229 53.024C28.0469 53.08 28.2663 53.1453 28.4809 53.22C28.9196 53.3693 29.2696 53.584 29.5309 53.864C29.7923 54.1347 29.9229 54.4987 29.9229 54.956C29.9229 55.3293 29.8249 55.684 29.6289 56.02C29.4423 56.3467 29.1529 56.6127 28.7609 56.818C28.3783 57.0233 27.8883 57.126 27.2909 57.126ZM32.1386 48.194H34.0986V50.854H35.5826V52.38H34.0986V57H32.1386V52.38H31.1866V50.854H32.1386V48.194Z" fill="#1A0050"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 17.9C16.2627 17.9 16.8 17.3627 16.8 16.7C16.8 16.0373 16.2627 15.5 15.6 15.5C14.9373 15.5 14.4 16.0373 14.4 16.7C14.4 17.3627 14.9373 17.9 15.6 17.9ZM15.6 20.3C17.5882 20.3 19.2 18.6882 19.2 16.7C19.2 14.7118 17.5882 13.1 15.6 13.1C13.6118 13.1 12 14.7118 12 16.7C12 18.6882 13.6118 20.3 15.6 20.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.66 21.2C14.6659 21.2 13.86 22.0059 13.86 23L13.86 24.8C13.86 25.4628 13.3227 26 12.6599 26C11.9972 26 11.46 25.4628 11.46 24.8L11.46 23C11.46 20.6804 13.3404 18.8 15.66 18.8C17.9796 18.8 19.86 20.6804 19.86 23V23.6C19.86 24.2628 19.3227 24.8 18.66 24.8C17.9972 24.8 17.46 24.2628 17.46 23.6V23C17.46 22.0059 16.6541 21.2 15.66 21.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3998 17.9C25.737 17.9 25.1998 17.3627 25.1998 16.7C25.1998 16.0373 25.737 15.5 26.3998 15.5C27.0624 15.5 27.5998 16.0373 27.5998 16.7C27.5998 17.3627 27.0624 17.9 26.3998 17.9ZM26.3998 20.3C24.4115 20.3 22.7998 18.6882 22.7998 16.7C22.7998 14.7118 24.4115 13.1 26.3998 13.1C28.388 13.1 29.9998 14.7118 29.9998 16.7C29.9998 18.6882 28.388 20.3 26.3998 20.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3396 21.2C27.3337 21.2 28.1396 22.0059 28.1396 23V24.8C28.1396 25.4628 28.6769 26 29.3396 26C30.0024 26 30.5396 25.4628 30.5396 24.8V23C30.5396 20.6804 28.6592 18.8 26.3396 18.8C24.02 18.8 22.1396 20.6804 22.1396 23V23.6C22.1396 24.2628 22.6769 24.8 23.3396 24.8C24.0024 24.8 24.5396 24.2628 24.5396 23.6V23C24.5396 22.0059 25.3456 21.2 26.3396 21.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0604 24.5C20.0663 24.5 19.2604 25.3059 19.2604 26.3L19.2604 28.1C19.2604 28.7628 18.7231 29.3 18.0603 29.3C17.3976 29.3 16.8604 28.7628 16.8604 28.1L16.8604 26.3C16.8604 23.9804 18.7408 22.1 21.0604 22.1C23.38 22.1 25.2604 23.9804 25.2604 26.3V28.1C25.2604 28.7628 24.7232 29.3 24.0604 29.3C23.3977 29.3 22.8604 28.7628 22.8604 28.1V26.3C22.8604 25.3059 22.0545 24.5 21.0604 24.5Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0004 21.2C21.6632 21.2 22.2004 20.6628 22.2004 20C22.2004 19.3373 21.6632 18.8 21.0004 18.8C20.3377 18.8 19.8004 19.3373 19.8004 20C19.8004 20.6628 20.3377 21.2 21.0004 21.2ZM21.0004 23.6C22.9887 23.6 24.6004 21.9883 24.6004 20C24.6004 18.0118 22.9887 16.4 21.0004 16.4C19.0122 16.4 17.4004 18.0118 17.4004 20C17.4004 21.9883 19.0122 23.6 21.0004 23.6Z" fill="#712EFF"/>
</svg>
</div> <div v-else
#click="show = !show" >
<svg width="24" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.6 9.9C7.26274 9.9 7.8 9.36274 7.8 8.7C7.8 8.03726 7.26274 7.5 6.6 7.5C5.93726 7.5 5.4 8.03726 5.4 8.7C5.4 9.36274 5.93726 9.9 6.6 9.9ZM6.6 12.3C8.58822 12.3 10.2 10.6882 10.2 8.7C10.2 6.71178 8.58822 5.1 6.6 5.1C4.61178 5.1 3 6.71178 3 8.7C3 10.6882 4.61178 12.3 6.6 12.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66002 13.2C5.66588 13.2 4.85997 14.0059 4.85997 15L4.85996 16.8C4.85996 17.4628 4.3227 18 3.65995 18C2.99721 18 2.45996 17.4628 2.45996 16.8L2.45997 15C2.45998 12.6804 4.34041 10.8 6.66002 10.8C8.9796 10.8 10.86 12.6804 10.86 15V15.6C10.86 16.2628 10.3227 16.8 9.65998 16.8C8.99725 16.8 8.45998 16.2628 8.45998 15.6V15C8.45998 14.0059 7.65411 13.2 6.66002 13.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4003 9.9C16.7375 9.9 16.2003 9.36274 16.2003 8.7C16.2003 8.03726 16.7375 7.5 17.4003 7.5C18.0629 7.5 18.6003 8.03726 18.6003 8.7C18.6003 9.36274 18.0629 9.9 17.4003 9.9ZM17.4003 12.3C15.412 12.3 13.8003 10.6882 13.8003 8.7C13.8003 6.71178 15.412 5.1 17.4003 5.1C19.3885 5.1 21.0003 6.71178 21.0003 8.7C21.0003 10.6882 19.3885 12.3 17.4003 12.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3401 13.2C18.3342 13.2 19.1401 14.0059 19.1401 15V16.8C19.1401 17.4628 19.6774 18 20.3401 18C21.0029 18 21.5401 17.4628 21.5401 16.8V15C21.5401 12.6804 19.6597 10.8 17.3401 10.8C15.0205 10.8 13.1401 12.6804 13.1401 15V15.6C13.1401 16.2628 13.6774 16.8 14.3401 16.8C15.0029 16.8 15.5401 16.2628 15.5401 15.6V15C15.5401 14.0059 16.3461 13.2 17.3401 13.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0599 16.5C11.0658 16.5 10.2599 17.3059 10.2599 18.3L10.2599 20.1C10.2599 20.7628 9.7226 21.3 9.05985 21.3C8.39712 21.3 7.85986 20.7628 7.85986 20.1L7.85988 18.3C7.85989 15.9804 9.74031 14.1 12.0599 14.1C14.3795 14.1 16.2599 15.9804 16.2599 18.3V20.1C16.2599 20.7628 15.7227 21.3 15.0599 21.3C14.3972 21.3 13.8599 20.7628 13.8599 20.1V18.3C13.8599 17.3059 13.054 16.5 12.0599 16.5Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 13.2C12.6627 13.2 13.1999 12.6628 13.1999 12C13.1999 11.3373 12.6627 10.8 11.9999 10.8C11.3372 10.8 10.7999 11.3373 10.7999 12C10.7999 12.6628 11.3372 13.2 11.9999 13.2ZM11.9999 15.6C13.9882 15.6 15.5999 13.9883 15.5999 12C15.5999 10.0118 13.9882 8.4 11.9999 8.4C10.0117 8.4 8.3999 10.0118 8.3999 12C8.3999 13.9883 10.0117 15.6 11.9999 15.6Z" fill="#712EFF"/>
</svg>
</div>
</transition>
</div>
CSS
body {
align-items: center;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}


You are missing a key.
When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it’s considered good practice to always key multiple items within a component.
Enter/Leave & List Transitions
Example:
<script>
export default {
data() {
return {
show: false,
}
},
}
</script>
body {
align-items: center;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
<div id="icon">
<transition name="fade" mode="out-in">
<div v-if="show" key="one" #click="show = !show">
svg...
</div>
<div v-else key="two" #click="show = !show">
svg...
</div>
</transition>
</div>

Related

Vue - After build pages don't load

I've a Vue project buit with vite.
While debbuging the app, everything works ok.
But when i build it to production, and try to open it with preview, the chrome windows hangs loading forever.
Nothing is show on console. Is there anyway to capture the error?
Looks like it's stuck in a forever loop.
Edit
package.json
{
"name": "vue-project",
"version": "0.0.0",
"scripts": {
"dev": "npm run build:icons && vite --host --port 5050",
"build": "npm run build:icons && vue-tsc --noEmit && vite build",
"preview": "vite preview --port 5050",
"typecheck": "vue-tsc --noEmit",
"lint": "eslint src -c .eslintrc.js --fix --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue,.tsx,.jsx",
"build:icons": "tsc -b src/#iconify && node src/#iconify/build-icons.js"
},
"dependencies": {
"#casl/ability": "^6.2.0",
"#casl/vue": "^2.2.0",
"#codemirror/highlight": "^0.19.8",
"#codemirror/lang-html": "^6.1.2",
"#codemirror/lang-javascript": "^6.1.0",
"#codemirror/lang-json": "^6.0.0",
"#codemirror/lint": "^6.0.0",
"#codemirror/theme-one-dark": "^6.1.0",
"#floating-ui/dom": "1.0.0",
"#formkit/auto-animate": "^1.0.0-beta.3",
"#mdi/font": "^7.0.96",
"#vueuse/core": "^8.9.4",
"apexcharts-clevision": "^3.28.5",
"axios": "^0.27.2",
"axios-mock-adapter": "^1.21.2",
"buffer": "^6.0.3",
"chart.js": "^3.9.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"pinia": "^2.0.22",
"prismjs": "^1.29.0",
"sass": "^1.54.9",
"unplugin-vue-define-options": "^0.6.2",
"uuid": "^9.0.0",
"vue": "3.2.41",
"vue-chartjs": "^4.1.1",
"vue-codemirror": "^6.1.1",
"vue-flatpickr-component": "^10.0.0",
"vue-i18n": "^9.2.2",
"vue-prism-component": "^2.0.0",
"vue-router": "^4.1.6",
"vue3-apexcharts": "^1.4.1",
"vue3-perfect-scrollbar": "^1.6.0",
"vuetify": "^3.0.0",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"#antfu/eslint-config-vue": "^0.25.2",
"#fullcalendar/core": "^5.11.3",
"#fullcalendar/daygrid": "^5.11.3",
"#fullcalendar/interaction": "^5.11.3",
"#fullcalendar/list": "^5.11.3",
"#fullcalendar/timegrid": "^5.11.3",
"#fullcalendar/vue3": "^5.11.2",
"#iconify-json/mdi": "^1.1.33",
"#iconify/tools": "^2.1.0",
"#iconify/vue": "^3.2.1",
"#intlify/vite-plugin-vue-i18n": "^5.0.1",
"#types/lodash": "^4.14.186",
"#types/node": "^18.7.18",
"#types/uuid": "^8.3.4",
"#types/webfontloader": "^1.6.34",
"#typescript-eslint/eslint-plugin": "^5.38.0",
"#typescript-eslint/parser": "^5.38.0",
"#vitejs/plugin-vue": "^3.1.0",
"#vitejs/plugin-vue-jsx": "^2.0.1",
"eslint": "^8.23.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-import-resolver-typescript": "^3.5.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-sonarjs": "^0.14.0",
"eslint-plugin-vue": "^9.5.1",
"postcss-html": "^1.5.0",
"stylelint": "^14.12.0",
"stylelint-config-idiomatic-order": "^8.1.0",
"stylelint-config-standard-scss": "^5.0.0",
"stylelint-use-logical-spec": "^4.1.0",
"type-fest": "^2.19.0",
"typescript": "^4.8.3",
"unplugin-auto-import": "^0.10.3",
"unplugin-vue-components": "^0.21.2",
"vite": "^3.2.2",
"vite-plugin-pages": "^0.27.1",
"vite-plugin-vue-layouts": "^0.7.0",
"vite-plugin-vuetify": "1.0.0",
"vue-tsc": "^1.0.9"
},
"packageManager": "yarn#1.22.18",
"resolutions": {
"postcss": "8",
"stylelint-order": "5",
"postcss-sorting": "^7.0.1"
}
}
output of build
╭─ ♥ 22:14 |  E:            code
╰─ npm run build
> vue-project#0.0.0 build
> npm run build:icons && vue-tsc --noEmit && vite build
> vue-project#0.0.0 build:icons
> tsc -b src/#iconify && node src/#iconify/build-icons.js
Bundled icons from E:\_Development\_repos\hiperstream\hiperstreamCloudPlatform\cloud-platform\code\node_modules\#iconify-json\mdi\icons.json
Saved src/#iconify/icons-bundle.js (2848016 bytes)
vite v3.2.2 building for production...
transforming (253) node_modules\vuetify\lib\composables\ssrBoot.mjs[plugin:vite:esbuild] Duplicate key "key" in object literal
50 | ? _withDirectives((_openBlock(), _createBlock(_resolveDynamicComponent(_unref(config).app.enableI18n ? 'i18n-t' : 'span'), _mergeProps({
51 | key: 0,
52 | key: "badge",
| ^
53 | class: ["nav-item-badge", __props.item.badgeClass]
54 | }, _unref(dynamicI18nProps)(__props.item.badgeContent, 'span')), {
✓ 1193 modules transformed.
dist/assets/avatar-1.aac046b6.png 15.96 KiB
dist/assets/avatar-2.0ae005f8.png 22.59 KiB
dist/assets/pose-f-28.a182fba0.png 9.21 KiB
dist/assets/pose-f-3.a3617bf1.png 8.31 KiB
dist/assets/mac-pc.4e376c3f.png 140.24 KiB
dist/assets/pose-f-39.43496c42.png 6.65 KiB
dist/assets/pose-m-14.a95cbb6a.png 5.87 KiB
dist/assets/pose-m-5.d7160542.png 6.80 KiB
dist/assets/pose-m-34.cb61966e.png 7.35 KiB
dist/assets/avatar-3.3ef9169b.png 11.57 KiB
dist/assets/avatar-4.406ee6ab.png 20.73 KiB
dist/assets/avatar-5.bad78850.png 18.35 KiB
dist/assets/avatar-6.3bc22d4b.png 18.22 KiB
dist/assets/avatar-7.8807e18e.png 18.07 KiB
dist/assets/avatar-8.942ae414.png 16.39 KiB
dist/assets/auth-v2-login-illustration-bordered-dark.1621a082.png 67.92 KiB
dist/assets/auth-v2-login-illustration-bordered-light.5efb7928.png 64.49 KiB
dist/assets/auth-v2-login-illustration-dark.c163247b.png 67.13 KiB
dist/assets/auth-v2-login-illustration-light.c910569c.png 68.40 KiB
dist/assets/paypal.8c1354c3.svg 2.24 KiB
dist/assets/illustration-1.20d12d31.png 12.84 KiB
dist/assets/illustration-2.042b082c.png 11.76 KiB
dist/assets/pose-fs-9.c6abbba4.png 28.74 KiB
dist/assets/sitting-girl-with-laptop-dark.aa688fe5.png 9.07 KiB
dist/assets/sitting-girl-with-laptop-light.bd520dbb.png 9.82 KiB
dist/assets/card-meetup.c5ffac4a.png 195.24 KiB
dist/assets/html5.ff3e7cf8.png 4.78 KiB
dist/assets/python.1d56c267.png 4.16 KiB
dist/assets/react.52bd27c0.png 5.31 KiB
dist/assets/vue.33fa8801.png 4.07 KiB
dist/assets/xamarin.d2086975.png 4.08 KiB
dist/assets/chrome.391a2294.png 7.47 KiB
dist/assets/american-express.2c04e485.png 8.14 KiB
dist/assets/knowledge-base-bg-dark.9e1eb36c.png 29.65 KiB
dist/assets/pricing-tree-1.61561baa.png 4.86 KiB
dist/assets/pricing-tree-3.7c67f762.png 5.59 KiB
dist/index.html 1.07 KiB
dist/assets/useGenerateImageVariant.ec010ed6.js 0.58 KiB / gzip: 0.27 KiB
dist/assets/VCard.b6709399.js 9.07 KiB / gzip: 2.06 KiB
dist/assets/VAlert.c1a0a22c.js 5.83 KiB / gzip: 1.70 KiB
dist/assets/webfontloader.b777d690.js 19.47 KiB / gzip: 5.78 KiB
dist/assets/VForm.45e996af.js 1.47 KiB / gzip: 0.61 KiB
dist/assets/VCheckbox.e52cedcf.js 1.67 KiB / gzip: 0.64 KiB
dist/assets/login.e1da9684.js 23.87 KiB / gzip: 8.25 KiB
dist/assets/blank.c23886c7.js 0.36 KiB / gzip: 0.24 KiB
dist/assets/VWindow.74c52ec5.js 9.08 KiB / gzip: 2.56 KiB
dist/assets/VWindowItem.f856cfbe.js 3.54 KiB / gzip: 1.11 KiB
dist/assets/VTabs.dffdacbb.js 20.22 KiB / gzip: 4.81 KiB
dist/assets/VTable.d527e358.js 1.56 KiB / gzip: 0.62 KiB
dist/assets/AppPricing.63e41703.js 14.20 KiB / gzip: 6.06 KiB
dist/assets/useInvoiceStore.3f404cbb.js 0.75 KiB / gzip: 0.36 KiB
dist/assets/sitting-girl-with-laptop-light.2ab0b492.js 0.25 KiB / gzip: 0.14 KiB
dist/assets/useLayoutsStore.7257820e.js 1.61 KiB / gzip: 0.62 KiB
dist/assets/VContainer.cf5a234e.js 0.52 KiB / gzip: 0.30 KiB
dist/assets/VTimelineItem.c57c8a72.js 7.16 KiB / gzip: 1.81 KiB
dist/assets/vue.runtime.esm-bundler.e5a66098.js 5.45 KiB / gzip: 1.89 KiB
dist/assets/index.21f4736b.js 42.20 KiB / gzip: 7.63 KiB
dist/assets/VTextarea.51d5864e.js 9.17 KiB / gzip: 2.56 KiB
dist/assets/_id_.30711c66.js 31.52 KiB / gzip: 4.48 KiB
dist/assets/index.aac33ec4.js 0.89 KiB / gzip: 0.46 KiB
dist/assets/index.9ba56bbe.js 28.73 KiB / gzip: 4.65 KiB
dist/assets/DefaultTabCrudLayout.vue_vue_type_script_setup_true_lang.c9f21d22.js 2.76 KiB / gzip: 0.97 KiB
dist/assets/DefaultCrudTabCardAccordionContentLayout.vue_vue_type_script_setup_true_lang.4411eb1b.js 5.70 KiB / gzip: 1.18 KiB
dist/assets/index.93a7da00.js 0.91 KiB / gzip: 0.47 KiB
dist/assets/VExpansionPanel.a3e74888.js 8.09 KiB / gzip: 2.00 KiB
dist/assets/pricing.3cf2db40.js 17.59 KiB / gzip: 2.80 KiB
dist/assets/Layout.vue_vue_type_script_setup_true_lang.59dd5321.js 39.91 KiB / gzip: 7.26 KiB
dist/assets/DefaultCrudTabCardAccordionContentLayout.a1cdd194.js 0.42 KiB / gzip: 0.23 KiB
dist/assets/faq.76ac9c5f.js 12.59 KiB / gzip: 2.88 KiB
dist/assets/DefaultCrudTabContentVCardLayout.ee966228.js 1.09 KiB / gzip: 0.51 KiB
dist/assets/DefaultVCardLayout.vue_vue_type_script_setup_true_lang.c0c59562.js 2.17 KiB / gzip: 0.78 KiB
dist/assets/DefaultLayoutWithHorizontalNav.fd6f082f.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/DefaultLayoutWithVerticalNav.e139d247.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/DefaultTabCrudLayout.df749d43.js 0.31 KiB / gzip: 0.18 KiB
dist/assets/NavBarI18n.8a521c1b.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/DefaultVCardLayout.dfa4f164.js 0.31 KiB / gzip: 0.17 KiB
dist/assets/NavBarNotifications.d9e7daac.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/NavbarThemeSwitcher.c87d20bf.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/UserProfile.8b5cee81.js 0.12 KiB / gzip: 0.10 KiB
dist/assets/login.21c684c6.css 0.62 KiB / gzip: 0.26 KiB
dist/assets/VCardCrudTabContentLayout.abe161c0.js 1.66 KiB / gzip: 0.63 KiB
dist/assets/VAlert.12d954e1.css 4.68 KiB / gzip: 1.17 KiB
dist/assets/VCard.782c479c.css 6.74 KiB / gzip: 1.52 KiB
dist/assets/blank.21020790.css 0.06 KiB / gzip: 0.07 KiB
dist/assets/VCheckbox.de0921d5.css 0.13 KiB / gzip: 0.12 KiB
dist/assets/_tab_.960e3200.css 0.43 KiB / gzip: 0.24 KiB
dist/assets/VTabs.a70cd9cf.css 3.04 KiB / gzip: 0.82 KiB
dist/assets/VWindow.1bd1bd93.css 2.15 KiB / gzip: 0.51 KiB
dist/assets/EnableOneTimePasswordDialog.a42d412e.css 2.25 KiB / gzip: 0.63 KiB
dist/assets/AppPricing.61deeeed.css 0.06 KiB / gzip: 0.07 KiB
dist/assets/index.6b7aa9ad.css 0.46 KiB / gzip: 0.17 KiB
dist/assets/crm.95f00275.css 0.51 KiB / gzip: 0.31 KiB
dist/assets/VTable.4c8b70a0.css 5.63 KiB / gzip: 0.86 KiB
dist/assets/_id_.43495c33.css 0.43 KiB / gzip: 0.23 KiB
dist/assets/VTextarea.5dc8269a.css 1.36 KiB / gzip: 0.46 KiB
dist/assets/VTimelineItem.07999e79.css 16.35 KiB / gzip: 1.70 KiB
dist/assets/VExpansionPanel.da2668ed.css 6.40 KiB / gzip: 1.21 KiB
dist/assets/pricing.56987cf6.css 0.43 KiB / gzip: 0.25 KiB
dist/assets/faq.c2655a3e.css 0.37 KiB / gzip: 0.23 KiB
dist/assets/_id_.85426b33.css 0.53 KiB / gzip: 0.28 KiB
dist/assets/AppDateTimePicker.2e517c19.css 24.49 KiB / gzip: 3.87 KiB
dist/assets/_tab_.85a982d6.js 114.32 KiB / gzip: 17.83 KiB
dist/assets/EnableOneTimePasswordDialog.vue_vue_type_script_setup_true_lang.e28f045b.js 54.21 KiB / gzip: 26.72 KiB
dist/assets/AppDateTimePicker.vue_vue_type_style_index_0_lang.7a89fa00.js 102.95 KiB / gzip: 22.96 KiB
dist/assets/_id_.0d3c91dd.js 131.99 KiB / gzip: 24.15 KiB
dist/assets/index.60024895.css 440.04 KiB / gzip: 56.52 KiB
dist/assets/crm.b882faf7.js 723.03 KiB / gzip: 157.73 KiB
dist/assets/index.fc5e085d.js 4054.75 KiB / gzip: 978.41 KiB
output of preview
╰─ npm run preview
> vue-project#0.0.0 preview
> vite preview --port 5050
➜ Local: http://127.0.0.1:5050/
➜ Network: use --host to expose
The page on browser after build and preview

You can't serve your vue build with live Server
This question is already Answered here How to run production site after build vue cli

The problem was happening because, as I expected, the application was in a infinite loop.
The application firstly was using dynamic routes created using vite-plugin-pages
This was generating some problems during build, then I manually wrote the routes. Unfortunally I did forget to add the basic permissions to vue #casl
meta: {action:'read', subject:'Auth'},

missing observation panel data, bring forward value 20 periods

Here's to read in a DataFrame like the one I'm looking at
pd.DataFrame({
'period' : [1, 2, 3, 4, 5, 8, 9, 10, 11, 13, 14, 15, 16, 19, 20, 21, 22,
23, 25, 26],
'id' : [1285, 1285, 1285, 1285, 1285, 1285, 1285, 1285, 1285, 1285, 1285,
1285, 1285, 1285, 1285, 1285, 1285, 1285, 1285, 1285],
'pred': [-1.6534775, -1.6534775, -1.6534775, -1.6534775, -1.6534775,
-1.6534775, -1.6534775, -1.6534775, -1.6534775, -1.6534775,
-1.6534775, -1.6534775, -1.6534775, -1.6534775, -1.6534775,
-1.6534775, -1.6534775, -1.6534775, -1.6534775, -1.6534775],
'ret' : [ None, -0.02222222, -0.01363636, 0. , -0.02764977,
None, -0.00909091, -0.01376147, 0.00465116, None,
0.01869159, 0. , 0. , None , -0.00460829,
0.00462963, 0.02304147, 0. , None, -0.00050756]})
Which will look like this when read in.
period id pred ret
0 1 1285 -1.653477 NaN
1 2 1285 -1.653477 -0.022222
2 3 1285 -1.653477 -0.013636
3 4 1285 -1.653477 0.000000
4 5 1285 -1.653477 -0.027650
5 8 1285 -1.653477 NaN
6 9 1285 -1.653477 -0.009091
7 10 1285 -1.653477 -0.013761
8 11 1285 -1.653477 0.004651
9 13 1285 -1.653477 NaN
10 14 1285 -1.653477 0.018692
11 15 1285 -1.653477 0.000000
12 16 1285 -1.653477 0.000000
13 19 1285 -1.653477 NaN
14 20 1285 -1.653477 -0.004608
15 21 1285 -1.653477 0.004630
16 22 1285 -1.653477 0.023041
17 23 1285 -1.653477 0.000000
18 25 1285 -1.653477 NaN
19 26 1285 -1.653477 -0.000508
pred is 20 period prediction and consequently I want to do is bring the returns back 20 days. (but do it in a flexible way.)
Here's the lag function I have presently
def lag(df, col, lag_dist=1, ref='period', group='id'):
df = df.copy()
new_col = 'lag'+str(lag_dist)+'_'+col
df[new_col] = df.groupby(group)[col].shift(lag_dist)
# set NaN values that differ from specified
df[new_col] = (df.groupby(group)[ref]
.shift(lag_dist)
.sub(df[ref])
.eq(-lag_dist)
.mul(1)
.replace(0,np.nan)*df[new_col])
return df[new_col]
but when I run
df['fut20_ret'] = lag(df, 'ret', -20, 'period')
df.head(20)
I get
period id pred gain fee prc ret fut20_ret
0 1 1285 -1.653478 0.000000 0.87 1.000000 NaN NaN
1 2 1285 -1.653478 -0.022222 0.87 0.977778 -0.022222 NaN
2 3 1285 -1.653478 -0.035556 0.87 0.964444 -0.013636 NaN
3 4 1285 -1.653478 -0.035556 0.87 0.964444 0.000000 NaN
4 5 1285 -1.653478 -0.062222 0.87 0.937778 -0.027650 NaN
6 8 1285 -1.653478 -0.022222 0.87 0.977778 NaN NaN
7 9 1285 -1.653478 -0.031111 0.87 0.968889 -0.009091 NaN
8 10 1285 -1.653478 -0.044444 0.87 0.955556 -0.013761 NaN
9 11 1285 -1.653478 -0.040000 0.87 0.960000 0.004651 NaN
10 13 1285 -1.653478 -0.048889 0.87 0.951111 NaN NaN
11 14 1285 -1.653478 -0.031111 0.87 0.968889 0.018692 NaN
12 15 1285 -1.653478 -0.031111 0.87 0.968889 0.000000 NaN
13 16 1285 -1.653478 -0.031111 0.87 0.968889 0.000000 NaN
15 19 1285 -1.653478 -0.035556 0.87 0.964444 NaN NaN
16 20 1285 -1.653478 -0.040000 0.87 0.960000 -0.004608 NaN
17 21 1285 -1.653478 -0.035556 0.87 0.964444 0.004630 NaN
18 22 1285 -1.653478 -0.013333 0.87 0.986667 0.023041 NaN
19 23 1285 -1.653478 -0.013333 0.87 0.986667 0.000000 NaN
How can I modify my lag function so that it works properly? It's close but I'm struggling on the last little bit.

Can't get Svg to show up in react-native with react-native-svg or Svg/expo

I am not sure exactly why this is not showing up. I suspect maybe it has to do with the transform?
<Svg.G id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(135.000000, 76.000000)">
But I really don't know... I'm seeing "invalid prop transform"
As I copied SVG code form sketch, suspect I'm having similar trouble to this issue:
https://github.com/react-native-community/react-native-svg/issues/205
Code is below. Any ideas?
import React from 'react';
import { Svg } from 'expo';
const RocketSvg = () => {
return (
<Svg width="108px" height="128px" viewBox="135 76 108 128" version="1.1">
<Svg.G id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(135.000000, 76.000000)">
<Svg.Ellipse id="Oval" fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></Svg.Ellipse>
<Svg.Path d="M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Path d="M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Path d="M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z" id="Shape" fill="#FFFFFF"></Svg.Path>
<Svg.Polygon id="Shape" fill="#FFFFFF" points="46 84 46 80 62 80 62 84 60 84 48 84"></Svg.Polygon>
<Svg.Path d="M70,78 L70,42 C70,18 54,2 54,2 L54,78 L70,78 Z" id="Shape" fill="#DCDDDE"></Svg.Path>
<Svg.Circle id="Oval" fill="#53B7E8" cx="54" cy="42" r="6"></Svg.Circle>
<Svg.Path d="M98.8,100.76 C96.66,104.34 94.04,107.7 90.96,110.78 C88.58,113.16 86.02,115.26 83.32,117.08 C65.74,129.02 42.46,128.98 24.92,116.96 C22.28,115.18 19.78,113.12 17.44,110.78 C14.26,107.6 11.56,104.1 9.38,100.4 C11.4,96.6 15.4,94 20,94 C25.48,94 30.1,97.7 31.54,102.74 C33.3,99.9 36.42,98 40,98 C44.84,98 48.88,101.44 49.8,106 L50,106 L50,86 L58,86 L58,106 L58.2,106 C59.12,101.44 63.16,98 68,98 C71.58,98 74.7,99.9 76.46,102.74 C77.88,97.7 82.5,94 88,94 C92.74,94 96.84,96.76 98.8,100.76 Z" id="Shape" fill="#FFD768"></Svg.Path>
<Svg.Rect id="Rectangle-path" fill="#DCDDDE" x="54" y="80" width="8" height="4"></Svg.Rect>
<Svg.Path d="M91.414,36.586 L90,35.172 L87.172,38 L88.586,39.414 C98.67,49.5 104,61.458 104,74 C104,82.056 102.096,89.812 98.522,96.778 C95.9,93.776 92.12,92 88,92 C82.948,92 78.354,94.752 75.894,98.988 C73.742,97.08 70.96,96 68,96 C64.966,96 62.144,97.148 60,99.062 L60,88 L66,88 L66,80 L72,80 L72,77.844 C77.584,78.546 82.886,81.664 82.966,81.714 L86,83.538 L86,80 C86,70.238 80.864,60.222 72,57.052 L72,42 C72,17.454 56.092,2.09 55.414,1.414 L54,0 L52.586,1.414 C51.908,2.09 36,17.454 36,42 L36,57.052 C27.136,60.222 22,70.238 22,80 L22.002,83.538 L25.034,81.714 C25.116,81.664 30.418,78.542 36,77.842 L36,80 L42,80 L42,88 L48,88 L48,99.062 C45.856,97.148 43.034,96 40,96 C37.036,96 34.252,97.082 32.1,98.994 C29.628,94.754 25.036,92 20,92 C15.91,92 12.116,93.794 9.486,96.794 C5.906,89.824 4,82.06 4,73.998 C4,61.458 9.33,49.5 19.414,39.414 L20.828,38 L18,35.172 L16.586,36.586 C5.736,47.438 0,60.376 0,73.998 C0,88.424 5.618,101.984 15.816,112.184 C26.344,122.71 40.172,128 54,128 C67.828,128 81.656,122.71 92.184,112.184 C102.382,101.984 108,88.424 108,74 C108,60.376 102.264,47.438 91.414,36.586 Z M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z M46,84 L46,80 L62,80 L62,84 L60,84 L48,84 L46,84 Z M89.356,109.356 C69.86,128.85 38.14,128.85 18.646,109.356 C15.952,106.662 13.616,103.706 11.634,100.558 C13.48,97.732 16.598,96 20,96 C24.436,96 28.39,98.998 29.618,103.29 L30.86,107.638 L33.24,103.794 C34.712,101.418 37.24,100 40,100 C43.794,100 47.092,102.69 47.838,106.394 L48.164,108 L52,108 L52,88 L56,88 L56,108 L59.836,108 L60.16,106.394 C60.908,102.69 64.206,100 68,100 C70.76,100 73.288,101.418 74.76,103.792 L77.154,107.656 L78.386,103.282 C79.592,98.994 83.546,96 88,96 C91.426,96 94.528,97.718 96.372,100.55 C94.39,103.7 92.052,106.658 89.356,109.356 Z" id="Shape" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54,34 C49.588,34 46,37.588 46,42 C46,46.412 49.588,50 54,50 C58.412,50 62,46.412 62,42 C62,37.588 58.412,34 54,34 Z M54,46 C51.794,46 50,44.206 50,42 C50,39.794 51.794,38 54,38 C56.206,38 58,39.794 58,42 C58,44.206 56.206,46 54,46 Z" id="Shape" fill="#0C3847"></Svg.Path>
<Svg.Polygon id="Shape" fill="#0C3847" points="78 16 82 16 82 12 86 12 86 8 82 8 82 4 78 4 78 8 74 8 74 12 78 12"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="14 26 18 26 18 22 22 22 22 18 18 18 18 14 14 14 14 18 10 18 10 22 14 22"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="96 32 100 32 100 28 104 28 104 24 100 24 100 20 96 20 96 24 92 24 92 28 96 28"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="84 46 84 48 82 48 82 52 84 52 84 54 88 54 88 52 90 52 90 48 88 48 88 46"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="26 44 30 44 30 42 32 42 32 38 30 38 30 36 26 36 26 38 24 38 24 42 26 42"></Svg.Polygon>
<Svg.Polygon id="Shape" fill="#0C3847" points="26 8 30 8 30 6 32 6 32 2 30 2 30 0 26 0 26 2 24 2 24 6 26 6"></Svg.Polygon>
<Svg.Path d="M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z" id="Shape" fill="#F37053"></Svg.Path>*/}
</Svg.G>
</Svg>
);
}

Answer Regards Tranform
transform propType is not currently support as part of react-native-svg (4th June 2017)
However you can use x and y props instead:
<Svg.G x="135.000000" y="76.000000" id="startup" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
Fix for SVG
However the SVG you pasted does still not seem to render.
I first converted it back to SVG and re-exported with Sketch.
// logo.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="108px" height="128px" viewBox="0 0 108 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="so" fill-rule="nonzero">
<ellipse id="Oval" fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></ellipse>
<path d="M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z" id="Shape" fill="#FFFFFF"></path>
<polygon id="Shape" fill="#FFFFFF" points="46 84 46 80 62 80 62 84 60 84 48 84"></polygon>
<path d="M70,78 L70,42 C70,18 54,2 54,2 L54,78 L70,78 Z" id="Shape" fill="#DCDDDE"></path>
<circle id="Oval" fill="#53B7E8" cx="54" cy="42" r="6"></circle>
<path d="M98.8,100.76 C96.66,104.34 94.04,107.7 90.96,110.78 C88.58,113.16 86.02,115.26 83.32,117.08 C65.74,129.02 42.46,128.98 24.92,116.96 C22.28,115.18 19.78,113.12 17.44,110.78 C14.26,107.6 11.56,104.1 9.38,100.4 C11.4,96.6 15.4,94 20,94 C25.48,94 30.1,97.7 31.54,102.74 C33.3,99.9 36.42,98 40,98 C44.84,98 48.88,101.44 49.8,106 L50,106 L50,86 L58,86 L58,106 L58.2,106 C59.12,101.44 63.16,98 68,98 C71.58,98 74.7,99.9 76.46,102.74 C77.88,97.7 82.5,94 88,94 C92.74,94 96.84,96.76 98.8,100.76 Z" id="Shape" fill="#FFD768"></path>
<rect id="Rectangle-path" fill="#DCDDDE" x="54" y="80" width="8" height="4"></rect>
<path d="M91.414,36.586 L90,35.172 L87.172,38 L88.586,39.414 C98.67,49.5 104,61.458 104,74 C104,82.056 102.096,89.812 98.522,96.778 C95.9,93.776 92.12,92 88,92 C82.948,92 78.354,94.752 75.894,98.988 C73.742,97.08 70.96,96 68,96 C64.966,96 62.144,97.148 60,99.062 L60,88 L66,88 L66,80 L72,80 L72,77.844 C77.584,78.546 82.886,81.664 82.966,81.714 L86,83.538 L86,80 C86,70.238 80.864,60.222 72,57.052 L72,42 C72,17.454 56.092,2.09 55.414,1.414 L54,0 L52.586,1.414 C51.908,2.09 36,17.454 36,42 L36,57.052 C27.136,60.222 22,70.238 22,80 L22.002,83.538 L25.034,81.714 C25.116,81.664 30.418,78.542 36,77.842 L36,80 L42,80 L42,88 L48,88 L48,99.062 C45.856,97.148 43.034,96 40,96 C37.036,96 34.252,97.082 32.1,98.994 C29.628,94.754 25.036,92 20,92 C15.91,92 12.116,93.794 9.486,96.794 C5.906,89.824 4,82.06 4,73.998 C4,61.458 9.33,49.5 19.414,39.414 L20.828,38 L18,35.172 L16.586,36.586 C5.736,47.438 0,60.376 0,73.998 C0,88.424 5.618,101.984 15.816,112.184 C26.344,122.71 40.172,128 54,128 C67.828,128 81.656,122.71 92.184,112.184 C102.382,101.984 108,88.424 108,74 C108,60.376 102.264,47.438 91.414,36.586 Z M81.764,76.608 C79.316,75.5 75.758,74.198 72,73.81 L72,61.414 C77.408,64.05 80.866,70.118 81.764,76.608 Z M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z M26.236,76.608 C27.134,70.118 30.592,64.052 36,61.412 L36,73.804 C32.242,74.194 28.682,75.498 26.236,76.608 Z M40,76 L40,42 C40,37.68 40.562,33.678 41.448,30 L66.556,30 C67.44,33.676 68,37.676 68,42 L68,76 L66,76 L42,76 L40,76 Z M46,84 L46,80 L62,80 L62,84 L60,84 L48,84 L46,84 Z M89.356,109.356 C69.86,128.85 38.14,128.85 18.646,109.356 C15.952,106.662 13.616,103.706 11.634,100.558 C13.48,97.732 16.598,96 20,96 C24.436,96 28.39,98.998 29.618,103.29 L30.86,107.638 L33.24,103.794 C34.712,101.418 37.24,100 40,100 C43.794,100 47.092,102.69 47.838,106.394 L48.164,108 L52,108 L52,88 L56,88 L56,108 L59.836,108 L60.16,106.394 C60.908,102.69 64.206,100 68,100 C70.76,100 73.288,101.418 74.76,103.792 L77.154,107.656 L78.386,103.282 C79.592,98.994 83.546,96 88,96 C91.426,96 94.528,97.718 96.372,100.55 C94.39,103.7 92.052,106.658 89.356,109.356 Z" id="Shape" fill="#0C3847"></path>
<path d="M54,34 C49.588,34 46,37.588 46,42 C46,46.412 49.588,50 54,50 C58.412,50 62,46.412 62,42 C62,37.588 58.412,34 54,34 Z M54,46 C51.794,46 50,44.206 50,42 C50,39.794 51.794,38 54,38 C56.206,38 58,39.794 58,42 C58,44.206 56.206,46 54,46 Z" id="Shape" fill="#0C3847"></path>
<polygon id="Shape" fill="#0C3847" points="78 16 82 16 82 12 86 12 86 8 82 8 82 4 78 4 78 8 74 8 74 12 78 12"></polygon>
<polygon id="Shape" fill="#0C3847" points="14 26 18 26 18 22 22 22 22 18 18 18 18 14 14 14 14 18 10 18 10 22 14 22"></polygon>
<polygon id="Shape" fill="#0C3847" points="96 32 100 32 100 28 104 28 104 24 100 24 100 20 96 20 96 24 92 24 92 28 96 28"></polygon>
<polygon id="Shape" fill="#0C3847" points="84 46 84 48 82 48 82 52 84 52 84 54 88 54 88 52 90 52 90 48 88 48 88 46"></polygon>
<polygon id="Shape" fill="#0C3847" points="26 44 30 44 30 42 32 42 32 38 30 38 30 36 26 36 26 38 24 38 24 42 26 42"></polygon>
<polygon id="Shape" fill="#0C3847" points="26 8 30 8 30 6 32 6 32 2 30 2 30 0 26 0 26 2 24 2 24 6 26 6"></polygon>
<path d="M54.002,5.824 C56.604,8.896 62.168,15.912 65.444,26 L42.566,26 C45.844,15.928 51.404,8.902 54.002,5.824 Z" id="Shape" fill="#F37053"></path>
</g>
</g>
</svg>
Then I used msvgc to convert it to a react-native-svg compatible component. Lastly made changes so with works with import { Svg } from 'expo'. You'll notice that there is no longer a transform anyway so your original question is not needed.
// Logo.js
import React from 'react'
import { Svg } from 'expo'
const logo = props => (
<Svg width={props.width || 108} height={props.height || 128} viewBox="0 0 108 128">
<Svg.G fillRule="nonzero" fill="none">
<Svg.Ellipse fill="#DCDDDE" cx="54" cy="75" rx="52" ry="51"></Svg.Ellipse>
<Svg.Path d="M81.764 76.608C79.316 75.5 75.758 74.198 72 73.81V61.414c5.408 2.636 8.866 8.704 9.764 15.194zM26.236 76.608c.898-6.49 4.356-12.556 9.764-15.196v12.392c-3.758.39-7.318 1.694-9.764 2.804zM40 76V42c0-4.32.562-8.322 1.448-12h25.108A51.108 51.108 0 0 1 68 42v34H40zM46 84v-4h16v4H48z" fill="#FFF"></Svg.Path>
<Svg.Path d="M70 78V42C70 18 54 2 54 2v76h16z" fill="#DCDDDE"></Svg.Path>
<Svg.Circle fill="#53B7E8" cx="54" cy="42" r="6"></Svg.Circle>
<Svg.Path d="M98.8 100.76a51.654 51.654 0 0 1-7.84 10.02 51.539 51.539 0 0 1-7.64 6.3c-17.58 11.94-40.86 11.9-58.4-.12a50.5 50.5 0 0 1-7.48-6.18 52.123 52.123 0 0 1-8.06-10.38C11.4 96.6 15.4 94 20 94c5.48 0 10.1 3.7 11.54 8.74C33.3 99.9 36.42 98 40 98a10 10 0 0 1 9.8 8h.2V86h8v20h.2a10 10 0 0 1 9.8-8c3.58 0 6.7 1.9 8.46 4.74C77.88 97.7 82.5 94 88 94c4.74 0 8.84 2.76 10.8 6.76z" fill="#FFD768"></Svg.Path>
<Svg.Path fill="#DCDDDE" d="M54 80h8v4h-8z"></Svg.Path>
<Svg.Path d="M91.414 36.586L90 35.172 87.172 38l1.414 1.414C98.67 49.5 104 61.458 104 74c0 8.056-1.904 15.812-5.478 22.778A13.905 13.905 0 0 0 88 92c-5.052 0-9.646 2.752-12.106 6.988A11.857 11.857 0 0 0 68 96a12.009 12.009 0 0 0-8 3.062V88h6v-8h6v-2.156c5.584.702 10.886 3.82 10.966 3.87L86 83.538V80c0-9.762-5.136-19.778-14-22.948V42C72 17.454 56.092 2.09 55.414 1.414L54 0l-1.414 1.414C51.908 2.09 36 17.454 36 42v15.052C27.136 60.222 22 70.238 22 80l.002 3.538 3.032-1.824c.082-.05 5.384-3.172 10.966-3.872V80h6v8h6v11.062A12.009 12.009 0 0 0 40 96a11.85 11.85 0 0 0-7.9 2.994C29.628 94.754 25.036 92 20 92c-4.09 0-7.884 1.794-10.514 4.794C5.906 89.824 4 82.06 4 73.998 4 61.458 9.33 49.5 19.414 39.414L20.828 38 18 35.172l-1.414 1.414C5.736 47.438 0 60.376 0 73.998c0 14.426 5.618 27.986 15.816 38.186C26.344 122.71 40.172 128 54 128c13.828 0 27.656-5.29 38.184-15.816C102.382 101.984 108 88.424 108 74c0-13.624-5.736-26.562-16.586-37.414zm-9.65 40.022C79.316 75.5 75.758 74.198 72 73.81V61.414c5.408 2.636 8.866 8.704 9.764 15.194zM54.002 5.824C56.604 8.896 62.168 15.912 65.444 26H42.566c3.278-10.072 8.838-17.098 11.436-20.176zM26.236 76.608c.898-6.49 4.356-12.556 9.764-15.196v12.392c-3.758.39-7.318 1.694-9.764 2.804zM40 76V42c0-4.32.562-8.322 1.448-12h25.108A51.108 51.108 0 0 1 68 42v34H40zm6 8v-4h16v4H46zm43.356 25.356c-19.496 19.494-51.216 19.494-70.71 0a50.398 50.398 0 0 1-7.012-8.798C13.48 97.732 16.598 96 20 96c4.436 0 8.39 2.998 9.618 7.29l1.242 4.348 2.38-3.844c1.472-2.376 4-3.794 6.76-3.794 3.794 0 7.092 2.69 7.838 6.394l.326 1.606H52V88h4v20h3.836l.324-1.606C60.908 102.69 64.206 100 68 100c2.76 0 5.288 1.418 6.76 3.792l2.394 3.864 1.232-4.374C79.592 98.994 83.546 96 88 96c3.426 0 6.528 1.718 8.372 4.55a50.456 50.456 0 0 1-7.016 8.806z" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54 34c-4.412 0-8 3.588-8 8s3.588 8 8 8 8-3.588 8-8-3.588-8-8-8zm0 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zM78 16h4v-4h4V8h-4V4h-4v4h-4v4h4zM14 26h4v-4h4v-4h-4v-4h-4v4h-4v4h4zM96 32h4v-4h4v-4h-4v-4h-4v4h-4v4h4zM84 46v2h-2v4h2v2h4v-2h2v-4h-2v-2zM26 44h4v-2h2v-4h-2v-2h-4v2h-2v4h2zM26 8h4V6h2V2h-2V0h-4v2h-2v4h2z" fill="#0C3847"></Svg.Path>
<Svg.Path d="M54.002 5.824C56.604 8.896 62.168 15.912 65.444 26H42.566c3.278-10.072 8.838-17.098 11.436-20.176z" fill="#F37053"></Svg.Path>
</Svg.G>
</Svg>
)
export default logo

Protractor - find element in iframe

in very top of my page I have call of iframe:
<iframe ng-if="webpadUrl" id="webPadIframe" ng-src="http://Path/To/iFrame?sessionId=9bc9989441c8c9cfb9ff5bdc381a72ea" seamless="seamless" class="fullscreen ng-scope" src="http://Path/To/iFrame?sessionId=9bc9989441c8c9cfb9ff5bdc381a72ea">
</iframe>
Inside of iframe I have something like:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 5845 3897">
and below that multiple <g> with different ID and so on..
<g id="30_0_80" transform="translate(420,754)" class="">
<path class="fp x80 xab active" d="M307 0 L293 15 L155 120 L87 181 L47 220 L0 277 L0 282 L14 341 L27 379 L32 386 L32 386 L74 425 L123 461 L153 480 L188 500 L238 525 L303 551 L337 563 L340 563 L381 561 L490 560 L492 557 L522 526 L591 473 L662 430 L745 383 L770 368 L785 358 L796 350 L802 343 L806 335 L809 321 L809 318 L810 295 L808 293 L806 293 L763 292 L680 277 L643 269 L590 253 L555 239 L555 239 L508 214 L452 179 L397 138 L369 115 L339 79 L325 56 L310 28 L308 23 L308 19 L310 1 L307 0 Z"></path>
<path class="p x88 xc7" d="M796 296 L792 300 L736 324 L595 391 L486 455 L413 505 L349 559"></path>
<path class="p x88 xc7" d="M33 372 L57 324 L82 284 L128 228 L133 222 L134 221 L164 188 L222 131 L252 102 L281 69"></path><path class="p x88 xc7" d="M9 283 L24 261 L52 221 L79 190 L88 182"></path><path class="p x88 xc7" d="M169 175 L251 97 L284 60 L295 40 L303 25"></path><path class="p x88 xc7" d="M132 214 L119 229 L88 266"></path>
<path class="p x88 xc7" d="M72 287 L54 315"></path><path class="p x88 xc7" d="M47 326 L44 331 L29 360"></path>
</g>
What I do is trying to click <g>
As it is in iframe I try something like:
browser.driver.switchTo().frame(element(by.id('30_0_80')));
Unfortunately doesn't work, is there any other way how to work with this iframes?
Error: NoSuchElementError: No element found using locator: By.id("30_0_80")

After sometime I find a solution how to switch to right frame, hope it help someone.
browser.switchTo().frame('webPadIframe');
browser.findElement(by.id('30_0_80')).click();

How to deal with non-angular iframes using control-flow.
let flow = protractor.promise.controlFlow();
flow.execute(function(){
browser.ignoreSynchronization = true; //allows you to handle non angular page
browser.switchTo().frame('webPadIframe'); //switches to iframe
browser.findElement(by.id('30_0_80')).click(); //action within iframe
browser.switchTo().defaultContent(); //switches back to main page
browser.ignoreSynchronization = false; //lets you resume handling angular
)};

Convert matrix into value pairs with awk

I have a matrix of data with latitude longitude and temperature on the following format:
15W 14.5W 14W 13.5W 13W
30N 19.3 19.3 19.2 18.9 18.6
30.5N 19.1 19 19 18.9 18.4
31N 18.9 18.8 18.7 18.6 18.3
31.5N 18.9 18.7 18.7 18.6 18.1
32N 18.6 18.5 18.6 18.5 17.5
I would like to use awk to convert it into lines with latitude longitude and temperature.
The output should look like this:
15W 30N 19.3
15W 30.5N 19.1
15W 31N 18.9
15W 31.5N 18.9
15W 32N 18.6
14.5W 30N 19.3
14.5W 30.5N 19
14.5W 31N 18.8
I guess you get the idea. I thought about awk because I have done some other things with it and it was very powerful. But maybe some other tools are to be used here.
The number of rows and columns is not always the same.
I will also need to convert the latitude and longitude to decimal minutes, but I'm taking one step at a time.

awk one-liner (well a bit long maybe):
awk 'NR==1{for(i=1;i<=NF;i++)t[i]=$i}{ r[NR]=$1; for(i=2;i<=NF;i++) v[t[i-1],$1]=$i}END{for(i=1;i<=length(t);i++) for(j=2;j<=NR;j++) print t[i], r[j], v[t[i],r[j]]
} ' file
I would like to format above one-liner into "three-liners" :) :
awk 'NR==1{for(i=1;i<=NF;i++)t[i]=$i}
{ r[NR]=$1; for(i=2;i<=NF;i++) v[t[i-1],$1]=$i}
END{for(i=1;i<=length(t);i++)for(j=2;j<=NR;j++)print t[i], r[j], v[t[i],r[j]]} ' file
test:
kent$ cat t
15W 14.5W 14W 13.5W 13W
30N 19.3 19.3 19.2 18.9 18.6
30.5N 19.1 19 19 18.9 18.4
31N 18.9 18.8 18.7 18.6 18.3
31.5N 18.9 18.7 18.7 18.6 18.1
32N 18.6 18.5 18.6 18.5 17.5
kent$ awk 'NR==1{for(i=1;i<=NF;i++)t[i]=$i}
{ r[NR]=$1; for(i=2;i<=NF;i++) v[t[i-1],$1]=$i}
END{for(i=1;i<=length(t);i++)for(j=2;j<=NR;j++)print t[i], r[j], v[t[i],r[j]]} ' t
15W 30N 19.3
15W 30.5N 19.1
15W 31N 18.9
15W 31.5N 18.9
15W 32N 18.6
14.5W 30N 19.3
14.5W 30.5N 19
14.5W 31N 18.8
14.5W 31.5N 18.7
14.5W 32N 18.5
14W 30N 19.2
14W 30.5N 19
14W 31N 18.7
14W 31.5N 18.7
14W 32N 18.6
13.5W 30N 18.9
13.5W 30.5N 18.9
13.5W 31N 18.6
13.5W 31.5N 18.6
13.5W 32N 18.5
13W 30N 18.6
13W 30.5N 18.4
13W 31N 18.3
13W 31.5N 18.1
13W 32N 17.5

The solution doesn't need to be complicated. It's actually fairly straightforward once you've chosen the right data structure. Simply use GNU awk to employ a true multidimensional array. Run like:
awk -f script.awk file
Contents of script.awk:
NR==1 {
for (i=1;i<=NF;i++) {
a[i]=$i
}
next
}
{
for (j=2;j<=NF;j++) {
b[j-1][NR]["rec"] = a[j-1] FS $1 FS $j
b[j-1][NR]["val"] = $j
}
}
END {
for (x=1;x<=length(b);x++) {
for (y=2;y<=NR;y++) {
if (b[x][y]["val"] != "999.9") {
print b[x][y]["rec"] | "column -t"
}
}
}
}
Results:
15W 30N 19.3
15W 30.5N 19.1
15W 31N 18.9
15W 31.5N 18.9
15W 32N 18.6
14.5W 30N 19.3
14.5W 30.5N 19
14.5W 31N 18.8
14.5W 31.5N 18.7
14.5W 32N 18.5
14W 30N 19.2
14W 30.5N 19
14W 31N 18.7
14W 31.5N 18.7
14W 32N 18.6
13.5W 30N 18.9
13.5W 30.5N 18.9
13.5W 31N 18.6
13.5W 31.5N 18.6
13.5W 32N 18.5
13W 30N 18.6
13W 30.5N 18.4
13W 31N 18.3
13W 31.5N 18.1
13W 32N 17.5
Alternatively, here's the one-liner:
awk 'NR==1 { for (i=1;i<=NF;i++) a[i]=$i; next } { for (j=2;j<=NF;j++) { b[j-1][NR]["rec"] = a[j-1] FS $1 FS $j; b[j-1][NR]["val"] = $j } } END { for (x=1;x<=length(b);x++) for (y=2;y<=NR;y++) if (b[x][y]["val"] != "999.9") print b[x][y]["rec"] | "column -t" }' file

awk 'NR==1{n=split($0,a," ")}NR!=1{for(i=1;i<=n;i++)x[a[i]" "$1]=$(i+1);}END{for(i in x){print i,x[i]}}' temp | sort
tested below:
> cat temp
15W 14.5W 14W 13.5W 13W
30N 19.3 19.3 19.2 18.9 18.6
30.5N 19.1 19 19 18.9 18.4
31N 18.9 18.8 18.7 18.6 18.3
31.5N 18.9 18.7 18.7 18.6 18.1
32N 18.6 18.5 18.6 18.5 17.5
phoenix.250> nawk 'NR==1{n=split($0,a," ")}NR!=1{for(i=1;i<=n;i++)x[a[i]" "$1]=$(i+1);}END{for(i in x){print i,x[i]}}' temp | sort
13.5W 30.5N 18.9
13.5W 30N 18.9
13.5W 31.5N 18.6
13.5W 31N 18.6
13.5W 32N 18.5
13W 30.5N 18.4
13W 30N 18.6
13W 31.5N 18.1
13W 31N 18.3
13W 32N 17.5
14.5W 30.5N 19
14.5W 30N 19.3
14.5W 31.5N 18.7
14.5W 31N 18.8
14.5W 32N 18.5
14W 30.5N 19
14W 30N 19.2
14W 31.5N 18.7
14W 31N 18.7
14W 32N 18.6
15W 30.5N 19.1
15W 30N 19.3
15W 31.5N 18.9
15W 31N 18.9
15W 32N 18.6
>