Initial commit
This commit is contained in:
zhongjin
+48
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="datasetcard u-width--100">
|
||||
<div class="u-flex u-flex__align--center">
|
||||
<div class="datasetcard-icon"></div>
|
||||
<div class="title-container">
|
||||
<h3 class="text is-caption is-txtGrey u-ellipsis" title="Populated places simple">{{content.title}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-flex__align--center">
|
||||
<span class="text is-small is-txtSoftGrey u-mr--24" :title="content.rows">{{content.rows}}</span>
|
||||
<span class="text is-small is-txtSoftGrey u-mr--48">{{content.size}}</span>
|
||||
<a download :href="content.link" class="button button--ghost button--outline">{{content.button}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DatasetCard_21',
|
||||
props: {
|
||||
content: Object
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.datasetcard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 16px;
|
||||
background-color: $white;
|
||||
|
||||
.datasetcard-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
border-radius: 2px;
|
||||
background-color: #F2F6F9;
|
||||
background-image: url(../../../../assets/icons/datasets/data-types/dots.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.step1.title`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<img class="u-width--100" src="../../../../assets/images/onboarding/builder_step1@2x.png"/>
|
||||
<p v-html="$t(`Wizards.builder.step1.text1`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.builder.step1.text2`)" class="text is-body u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Intro',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step2.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction1`)" class="text is-caption u-mb--16 u-inlineflex"></p>
|
||||
<DatasetCard :content="$t(`Wizards.builder.step2.cards.dataset1`)"></DatasetCard>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction2`)" class="text is-caption u-mt--24 u-mb--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction3`)" class="text is-caption u-mb--16 u-inlineflex"></p>
|
||||
<img class="u-width--100" src="../../../../assets/images/onboarding/builder_step2@2x.png" alt="Screenshot connect dataset modal in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step2.extras.resource1`)" class="text is-caption u-mb--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import DatasetCard from './DatasetCard_21.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
stepName: 'Import your data',
|
||||
components: {
|
||||
StepTitle,
|
||||
DatasetCard
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step3.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction1`)" class="text is-caption u-mt--24 u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step3@2x.png" alt="Screenshot dataset preview in builder">
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction2`)" class="text is-caption u-mb--24 u-mt--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction3`)" class="text is-caption u-mb--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction4`)" class="text is-caption u-inlineflex"></p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="'Extras'" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step3.extras.resource1`)" class="text is-caption u-mb--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
stepName: 'Explore the dataset',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step4.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step4@2x.png" alt="Screenshot map in builder">
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction3`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction4`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step4b@2x.png" alt="Screenshot styled map in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step4.extras.resource1`)" class="text is-caption"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step4',
|
||||
stepName: 'Create a map',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step5.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction3`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction4`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step5@2x.png" alt="Screenshot publish map page in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step5.extras.resource1`)" class="text is-caption"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step5',
|
||||
stepName: 'Publish your map',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="congrats">
|
||||
<div class="congrats__hero">
|
||||
<Confetti></Confetti>
|
||||
<div class="congrats__hero-content">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/congrats.svg" alt="">
|
||||
<h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.builder.step6.congrats.title`) }}</h2>
|
||||
<p v-html="$t(`Wizards.builder.step6.congrats.message1`)" class="text is-caption"></p>
|
||||
<p v-html="$t(`Wizards.builder.step6.congrats.message2`, { url: downloadUrl })" class="text is-caption"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container u-mt--64 u-pb--80">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.learnmore`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/learn.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step6.extras.resource1`)" class="text is-caption u-mt--16 u-mb--24"></p>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card1`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/builder_card1.png" width="240" height="130" alt="Style features by category sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card2`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/builder_card2.png" width="240" height="130" alt="Add hover popups sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card3`)">
|
||||
<img src="../../../../assets/images/onboarding/builder_card3.png" width="240" height="130" alt="Animate the features sample image"/>
|
||||
</TutorialCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import TutorialCard from 'new-dashboard/components/Onboarding/components/TutorialCard.vue';
|
||||
import Confetti from 'new-dashboard/components/Onboarding/components/Confetti.vue';
|
||||
import { getAssetsBaseUrl } from 'new-dashboard/utils/assets-version';
|
||||
|
||||
export default {
|
||||
name: 'Step6',
|
||||
stepName: 'Download',
|
||||
components: {
|
||||
StepTitle,
|
||||
TutorialCard,
|
||||
Confetti
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
downloadUrl: getAssetsBaseUrl() + 'unversioned/onboarding/Myfirstmap.carto'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.congrats {
|
||||
background-color: $white;
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $onboarding-congrats__height;
|
||||
background-color: $onboarding-congrats__bg-color;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardBuilder';
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, wizardName };
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.step1.title`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
|
||||
<InjectableIframe :content="map" width="940" height="416"></InjectableIframe>
|
||||
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text1`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text2`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text3`)" class="text is-body u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
|
||||
import map from 'new-dashboard/assets/resources/onboarding/cartovl.html';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Intro',
|
||||
components: {
|
||||
InjectableIframe,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
map
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.howto.instruction1`)" class="text is-caption u-inlineflex"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.extras.resource1`)" class="text is-caption u-mb--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.extras.resource2`)" class="text is-caption u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
stepName: 'Load CARTO VL',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`<html>
|
||||
<head>
|
||||
<title>CARTO VL Example</title>
|
||||
<!-- Load CARTO VL JS -->
|
||||
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"><\/script>
|
||||
<!-- Load Mapbox GL -->
|
||||
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"><\/script>
|
||||
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
|
||||
|
||||
<!-- Your style will go here -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Your map will go here -->
|
||||
</body>
|
||||
</html>`;
|
||||
</script>
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step3.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step3.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed" class="u-mt--16"></CodeBlock>
|
||||
</li>
|
||||
<li class="u-mt--36">
|
||||
<p v-html="$t(`Wizards.cartovl.step3.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock2" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
stepName: 'Define container',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
codeBlock2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 = `<div id="map"><\/div>`;
|
||||
|
||||
const codeBlock2 =
|
||||
`<style>
|
||||
#map {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
<\/style>`;
|
||||
</script>
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.extras.resource1`)" class="text is-caption u-mb--16"></p>
|
||||
<div class="u-flex u-flex__justify--between u-mb--16 u-mb--64">
|
||||
<img src="../../../../assets/images/onboarding/voyager@2x.png" width="306" height="140" alt="Voyager basemap sample"/>
|
||||
<img src="../../../../assets/images/onboarding/positron@2x.png" width="306" height="140" alt="Positron basemap sample"/>
|
||||
<img src="../../../../assets/images/onboarding/darkmatter@2x.png" width="306" height="140" alt="Dark Matter basemap sample"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step4',
|
||||
stepName: 'Create map',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`<script>
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: carto.basemaps.voyager,
|
||||
center: [0, 30],
|
||||
zoom: 2
|
||||
})
|
||||
<\/script>`;
|
||||
</script>
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1"></CodeBlock>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock2"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step5',
|
||||
stepName: 'Add data layer',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
codeBlock2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Code Blocks to be rendered in steps
|
||||
const codeBlock1 =
|
||||
`carto.setDefaultAuth({
|
||||
username: 'public',
|
||||
apiKey: 'default_public'
|
||||
})`;
|
||||
|
||||
const codeBlock2 =
|
||||
`const viz = new carto.Viz();
|
||||
const source = new carto.source.Dataset('world_ports')
|
||||
const layer = new carto.Layer('layer', source, viz);
|
||||
layer.addTo(map);`;
|
||||
</script>
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step6',
|
||||
stepName: 'Style features',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Code Blocks to be rendered in steps
|
||||
const codeBlock1 =
|
||||
`const viz= new carto.Viz(\`
|
||||
width: 4
|
||||
strokeWidth: 0.5
|
||||
strokeColor: black
|
||||
color: rgb(10,185,107)
|
||||
\`);`;
|
||||
</script>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="congrats">
|
||||
<div class="congrats__hero">
|
||||
<Confetti></Confetti>
|
||||
<div class="congrats__hero-content">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/congrats.svg" alt="">
|
||||
<h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.cartovl.step7.congrats.title`) }}</h2>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.congrats.message1`)" class="text is-caption"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.congrats.message2`, { url: downloadUrl })" class="text is-caption"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container u-mt--64 u-pb--80">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.learnmore`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/learn.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card1`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/stylefeatures.png" width="240" height="130" alt="Style features by category sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card2`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/hoverpopups.png" width="240" height="130" alt="Add hover popups sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card3`)">
|
||||
<img src="../../../../assets/images/onboarding/animatefeatures.png" width="240" height="130" alt="Animate the features sample image"/>
|
||||
</TutorialCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import TutorialCard from 'new-dashboard/components/Onboarding/components/TutorialCard.vue';
|
||||
import Confetti from 'new-dashboard/components/Onboarding/components/Confetti.vue';
|
||||
import { getAssetsBaseUrl } from 'new-dashboard/utils/assets-version';
|
||||
|
||||
export default {
|
||||
name: 'Step7',
|
||||
stepName: 'Download',
|
||||
components: {
|
||||
StepTitle,
|
||||
TutorialCard,
|
||||
Confetti
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
downloadUrl: getAssetsBaseUrl() + 'unversioned/onboarding/cartovl.zip'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.congrats {
|
||||
background-color: $white;
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $onboarding-congrats__height;
|
||||
background-color: $onboarding-congrats__bg-color;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardCARTOVL';
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, wizardName };
|
||||
+203
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pt--32 u-pr--10 u-pb--80 u-pl--10">
|
||||
<div class="circle"></div>
|
||||
<div class="placeholder">
|
||||
<div class="placeholder__img"></div>
|
||||
<div class="placeholder__shadow"></div>
|
||||
</div>
|
||||
|
||||
<ul class="tag__list">
|
||||
<li class="tag__item title">Python</li>
|
||||
<li class="tag__item title">CARTOframes</li>
|
||||
</ul>
|
||||
<h1 v-html="$t(`Wizards.cartoframes.step1.title`)" class="heading title is-subheader"></h1>
|
||||
|
||||
<div class="block">
|
||||
<StepTitle :title="$t(`Wizards.cartoframes.step1.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ul class="list">
|
||||
<li class="list__item text">
|
||||
<span>{{ $t(`Wizards.cartoframes.step1.text1`) }}</span>
|
||||
</li>
|
||||
<li class="list__item text">
|
||||
<span>{{ $t(`Wizards.cartoframes.step1.text2`) }}</span>
|
||||
</li>
|
||||
<li class="list__item text">
|
||||
<span>{{ $t(`Wizards.cartoframes.step1.text3`) }}</span><span class="u-ml--4 is-italic">{{ $t(`Wizards.cartoframes.step1.text4`) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<StepTitle :title="$t(`Wizards.cartoframes.step1.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<CodeBlock :code="codeBlock1" language="python" :lineNumbers="false" theme="default"></CodeBlock>
|
||||
<InjectableIframe :content="map" width="100%" height="436"></InjectableIframe>
|
||||
</div>
|
||||
|
||||
<div class="footer hangar">
|
||||
<button class="underlined-link title is-caption is-txtCartoframes" @click="goToDashboard">
|
||||
<span>{{ $t('Wizards.cartoframes.step1.footer.returnToDashboard') }}</span>
|
||||
</button>
|
||||
<a href="https://carto.com/developers/cartoframes/" class="button button--arrow is-cartoframes" target="_blank" @click="goToDashboard">
|
||||
<span>{{ $t('Wizards.cartoframes.step1.footer.learnMore') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
|
||||
import map from 'new-dashboard/assets/resources/onboarding/cartoframes.html';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Add spatial data to your data science workflow',
|
||||
components: {
|
||||
StepTitle,
|
||||
CodeBlock,
|
||||
InjectableIframe
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
map
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goToDashboard () {
|
||||
this.$router.push({ name: 'home' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`from cartoframes.auth import set_default_credentials
|
||||
from cartoframes.viz import Map
|
||||
from cartoframes.viz.helpers import color_bins_layer
|
||||
|
||||
set_default_credentials('johnsmith', '1a2b3c4d5e6f7g8h9i0j')
|
||||
|
||||
masters_map = Map(color_bins_layer(
|
||||
'higher_edu_by_county',
|
||||
'pct_higher_ed',
|
||||
'% Population with Masters degree')
|
||||
)
|
||||
|
||||
masters_map.publish('higher_edu_by_county_map')`;
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
@import 'new-dashboard/styles/hangar/_variables';
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 120vw;
|
||||
height: 120vw;
|
||||
transform: translate(44vw, -71.5vw);
|
||||
border-radius: 50%;
|
||||
background-color: $cartoframes;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-70px, -10px);
|
||||
|
||||
&__img {
|
||||
width: 460px;
|
||||
height: 330px;
|
||||
border-radius: 4px;
|
||||
background-image: url('../../../../assets/images/onboarding/cartoframes@2x.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__shadow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
width: 412px;
|
||||
height: 326px;
|
||||
opacity: 0.24;
|
||||
background: $neutral--800;
|
||||
filter: blur(24px);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
&__list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
padding: 7px 16px;
|
||||
border-radius: 18px;
|
||||
background-color: rgba($cartoframes, 0.08);
|
||||
color: $cartoframes;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
max-width: 300px;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-left: 16px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
|
||||
&::before {
|
||||
content: '\00b7';
|
||||
margin-right: 8px;
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardCARTOframes';
|
||||
const showFooter = false;
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, showFooter, wizardName };
|
||||
@@ -0,0 +1,75 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
step: 1,
|
||||
isModalOpen: true
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.setStepNumber();
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
this.setStepNumber();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalStepCount () {
|
||||
return this.stepNames.length;
|
||||
},
|
||||
stepComponent () {
|
||||
return `Step${this.step}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToStep (stepNum) {
|
||||
this.$router.push({
|
||||
hash: `#step-${stepNum}`
|
||||
});
|
||||
},
|
||||
isCurrentStep (stepNum) {
|
||||
return this.step === stepNum;
|
||||
},
|
||||
openModal () {
|
||||
this.isModalOpen = true;
|
||||
},
|
||||
closeModal () {
|
||||
this.isModalOpen = false;
|
||||
this.step = 1;
|
||||
this.$emit('closeModal');
|
||||
},
|
||||
setStepNumber () {
|
||||
const {stepNumber, isValid} = parseHashParameterWithNumber(this.$route.hash);
|
||||
|
||||
if (stepNumber > this.totalStepCount || !isValid) {
|
||||
return this.$router.push({ hash: '#step-1' });
|
||||
}
|
||||
|
||||
this.step = stepNumber;
|
||||
},
|
||||
getStepGTMString (stepNumber) {
|
||||
return `gtm-${this.wizardName}-step${stepNumber}`;
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
if (this.$refs.wizard) {
|
||||
this.$refs.wizard.scrollTo({ top: 0, left: 0 });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function parseHashParameterWithNumber (hash, token = 'step-') {
|
||||
const stepIndex = hash.indexOf(token);
|
||||
const includesStep = stepIndex > -1;
|
||||
|
||||
if (!includesStep) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stepNumber = +hash.substring(stepIndex + token.length);
|
||||
|
||||
return {
|
||||
isValid: Number.isInteger(stepNumber),
|
||||
stepNumber: stepNumber
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user