Commit 955ac80c authored by Esteban Choque's avatar Esteban Choque
Browse files

Se añadió la carpeta geo y la libreria vue-chartjs

parent 156c62c0
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options);
}
};
<template>
<section
class="container page">
<div class="page-header">
<div
class="page-img-main"
:style="{ 'background-image': `url(https://urgente.bo/sites/default/files/Mt-Illimani-La-Paz-Bolivia.jpg)` }">
</div>
<div class="page-title">
<h1 v-html="'Educación'"></h1>
<div class="page-title-details">
<nuxt-link
:to="$i18n.path(pathParent)">
{{ 'Geo' }}
</nuxt-link> /
Publicado el
</div>
</div>
</div>
<div
class="page-content">
<h2>Economía</h2>
<div class="small">
<line-chart :chart-data="datacollection_economia"></line-chart>
</div>
<h2>Educación</h2>
<div class="small">
<line-chart :chart-data="datacollection_educacion"></line-chart>
</div>
<h2>Vivienda y Entorno</h2>
<div class="small">
<line-chart :chart-data="datacollection_vivienda"></line-chart>
</div>
<h2>Demografía</h2>
<div class="small">
<line-chart :chart-data="datacollection_demografia"></line-chart>
</div>
<h2>Salud</h2>
<div class="small">
<line-chart :chart-data="datacollection_salud"></line-chart>
</div>
<h2>Cívica</h2>
<div class="small">
<line-chart :chart-data="datacollection_civica"></line-chart>
</div>
</div>
</section>
<!--<div class="small">
<line-chart :chart-data="datacollection"></line-chart>
<button @click="fillData()">Randomize</button>
</div>-->
</template>
<script>
import LineChart from './LineChart.js';
export default {
components: {
LineChart
},
data () {
return {
datacollection_economia: null,
datacollection_educacion: null,
datacollection_vivienda: null,
datacollection_demografia: null,
datacollection_salud: null,
datacollection_civica: null
};
},
mounted () {
this.$store.commit('CLOSE_MENU');
this.$util.setBackgroundImage();
this.fillData();
this.fillDataEducacion();
this.fillDataVivienda();
this.fillDataDemografia();
this.fillDataSalud();
this.fillDataCivica();
},
methods: {
fillData () {
this.datacollection_economia = {
labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [
{
label: 'Educación Primaria',
backgroundColor: '#4B0082',
data: [25, 30, 40, 30, 25, 20, 20]
}, {
label: 'Educación Secundaria',
backgroundColor: '#9932CC',
data: [25, 40, 50, 40, 35, 25, 30]
}
]
};
},
fillDataEducacion () {
this.datacollection_educacion = {
labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [
{
label: 'Educación Primaria',
backgroundColor: '#1A1AFF',
data: [25, 40, 45, 40, 35, 20, 15]
}, {
label: 'Educación Secundaria',
backgroundColor: '#458B00',
data: [25, 40, 50, 55, 50, 25, 30]
}
]
};
},
fillDataVivienda () {
this.datacollection_vivienda = {
labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [
{
label: 'Educación Primaria',
backgroundColor: '#B0C4DE',
data: [25, 30, 40, 30, 25, 20, 20]
}, {
label: 'Educación Secundaria',
backgroundColor: '#6A5ACD',
data: [25, 40, 50, 40, 35, 25, 30]
}
]
};
},
fillDataDemografia () {
this.datacollection_demografia = {
labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [
{
label: 'Educación Primaria',
backgroundColor: '#DAA520',
data: [25, 30, 40, 30, 25, 20, 20]
}, {
label: 'Educación Secundaria',
backgroundColor: '#A52A2A',
data: [25, 40, 50, 40, 35, 25, 30]
}
]
};
},
fillDataSalud () {
this.datacollection_salud = {
labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [
{
label: 'Educación Primaria',
backgroundColor: '#FFEFD5',
data: [25, 30, 40, 30, 25, 20, 20]
}, {
label: 'Educación Secundaria',
backgroundColor: '#EEE8AA',
data: [25, 40, 50, 40, 35, 25, 30]
}
]
};
},
fillDataCivica () {
this.datacollection_civica = {
labels: [2010, 2011, 2012, 2013, 2014, 2015, 2016],
datasets: [
{
label: 'Educación Primaria',
backgroundColor: '#66CDAA',
data: [25, 30, 40, 30, 25, 20, 20]
}, {
label: 'Educación Secundaria',
backgroundColor: '#008080',
data: [25, 40, 50, 40, 35, 25, 30]
}
]
};
},
getRandomInt () {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
}
}
};
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
}
</style>
<style lang="scss" src="./page.scss"></style>
\ No newline at end of file
@import '~/assets/scss/_variables.scss';
.page {
padding-bottom: 50px;
.el-card {
border-radius: 0;
}
.post {
height: 400px;
position: relative;
}
.post-details {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 10;
color: $colorMenu;
/*color: #333;*/
text-transform: uppercase;
/*background: linear-gradient(0, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
background: #f00;
padding: 370px 15px 12px 15px;
text-decoration: none;
display:block;
&:hover {
text-decoration: underline;
}
}
.post-details-2 {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 10;
color: $colorMenu;
/*color: #333;*/
text-transform: uppercase;
/*background: linear-gradient(0, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
padding: 370px 15px 12px 15px;
text-decoration: none;
display:block;
&:hover {
text-decoration: underline;
}
}
.fondo_degradado
{
position: relative;
top: -50px;
z-index: 0;
height: 50px;
color: #333;
background: linear-gradient(0, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
/*background: #000;*/
}
.post-image {
background-size: cover;
width: 100%;
height: 400px;
background-position: center;
background-color: #323232;
background-repeat: no-repeat;
}
.post-type {
position: absolute;
top: 0;
left: 0;
padding: 10px 12px;
background-color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
color: #333;
font-weight: 300;
}
}
.page-header {
margin-top: 30px;
position: relative;
}
.page-img-main {
height: 400px;
background-size: cover;
background-position: center;
}
.page-title {
color: $colorMenu;
padding: 15px 0 20px;
h1 {
font-weight: 300;
margin: 0;
}
}
.page-img-main + .page-title {
padding: 40px 15px 15px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(0, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
.page-title-details {
font-style: italic;
color: lighten($warning, 20%);
font-size: .8rem;
margin-top: 5px;
a {
color: lighten($warning, 20%);
font-size: .8rem;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.page-content {
border-top: 2px solid white;
background-color: rgba(255, 255, 255, .85);
padding: 25px;
font-size: 1.1rem;
line-height: 1.6rem;
hr {
border: none;
border-top: 1px solid $colorMenu;
margin: 0 0 15px 0;
}
h2 {
font-weight: 300;
margin: 0 0 15px;
}
p {
margin: 0 0 15px;
}
a {
color: $primary;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
iframe {
max-width: 100%;
}
figure {
margin: 10px;
}
.wp-block-image {
margin: 10px;
img {
max-width: 100%;
height: auto;
}
}
.aligncenter {
text-align: center;
}
.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}
}
@media (max-width: 768px) {
.page {
.post, .post-image {
height: 200px;
}
.page-content {
figure,
.wp-block-image {
margin: 10px 0;
}
}
.page-img-main {
height: 300px;
}
.page-title {
h1 {
font-size: 1.5rem;
}
}
}
}
@media (min-width: 768px) {
.page {
.post, .post-image {
height: 250px;
}
}
}
@media (min-width: 992px) {
.page {
.post, .post-image {
height: 320px;
}
}
}
@media (min-width: 1200px) {
.page {
.post, .post-image {
height: 400px;
}
}
}
\ No newline at end of file
Markdown is supported
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