diff --git a/.env.development b/.env.development
index e4534a2c..2c98da46 100755
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
-APP_VERSION="0.1.4"
+APP_VERSION="0.1.5"
SERVICE_WORKER_FILE="service-worker.js"
APP_ID="1"
DIRECTORY_LOCAL="newfreeplanet"
diff --git a/.env.prod.bak b/.env.prod.bak
index 4731db75..b7997ae0 100755
--- a/.env.prod.bak
+++ b/.env.prod.bak
@@ -1,4 +1,4 @@
-APP_VERSION="0.1.4"
+APP_VERSION="0.1.5"
SERVICE_WORKER_FILE="service-worker.js"
APP_ID="1"
DIRECTORY_LOCAL=newfreeplanet
diff --git a/.env.production b/.env.production
index 4731db75..b7997ae0 100755
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,4 @@
-APP_VERSION="0.1.4"
+APP_VERSION="0.1.5"
SERVICE_WORKER_FILE="service-worker.js"
APP_ID="1"
DIRECTORY_LOCAL=newfreeplanet
diff --git a/.env.test b/.env.test
index 080b64d8..e9d588ba 100755
--- a/.env.test
+++ b/.env.test
@@ -1,4 +1,4 @@
-APP_VERSION="0.1.4"
+APP_VERSION="0.1.5"
SERVICE_WORKER_FILE="service-worker.js"
APP_ID="1"
DIRECTORY_LOCAL=newfreeplanet
diff --git a/package.json b/package.json
index 07e95c6f..b9a42596 100755
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"crypto": "^1.0.1",
"date-fns": "^2.25.0",
"dotenv": "^10.0.0",
+ "echarts": "^5.2.1",
"eslint-plugin-quasar": "^1.0.0",
"graphql": "^15.6.1",
"graphql-tag": "^2.12.5",
@@ -58,6 +59,7 @@
"vue": "^3.2.12",
"vue-class-component": "^8.0.0-rc.1",
"vue-country-code": "^1.1.2",
+ "vue-echarts": "^6.0.0",
"vue-i18n": "^9.1.8",
"vue-idb": "^0.2.0",
"vue-loader": "^16.5.0",
diff --git a/public/images/noimg-user.jpg b/public/images/noimg-user.jpg
new file mode 100644
index 00000000..af5c34a7
Binary files /dev/null and b/public/images/noimg-user.jpg differ
diff --git a/public/images/noimg-user.svg b/public/images/noimg-user.svg
new file mode 100644
index 00000000..10ea11c8
--- /dev/null
+++ b/public/images/noimg-user.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/CChartMap/CChartMap.scss b/src/components/CChartMap/CChartMap.scss
new file mode 100644
index 00000000..07413bd0
--- /dev/null
+++ b/src/components/CChartMap/CChartMap.scss
@@ -0,0 +1,371 @@
+.chart {
+ height: 400px;
+ min-width: 360px;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: 0;
+ padding: 3em 0 0;
+ font-family: Inter, "Helvetica Neue", Arial, sans-serif;
+ font-weight: 300;
+ color: #666;
+ text-align: center;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+h1 {
+ margin-bottom: 1em;
+ font-family: Inter, "Helvetica Neue", Arial, sans-serif;
+}
+
+h1,
+h2 {
+ color: #2c3e50;
+ font-weight: 400;
+}
+
+h2 {
+ margin-top: 2em;
+ padding-top: 1em;
+ font-size: 1.2em;
+
+ button {
+ margin-left: 1em;
+ vertical-align: middle;
+ }
+}
+
+.desc {
+ margin-bottom: 3em;
+ color: #7f8c8d;
+
+ a {
+ color: #42b983;
+ }
+}
+
+h2 small {
+ opacity: 0.7;
+}
+
+p small {
+ font-size: 0.8em;
+ color: #7f8c8d;
+}
+
+p {
+ line-height: 1.5;
+}
+
+pre {
+ display: inline-block;
+ padding: 0.8em;
+ background-color: #f9f9f9;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+ line-height: 1.1;
+ color: #2973b7;
+}
+
+pre,
+code {
+ font-family: "Roboto Mono", Monaco, courier, monospace;
+}
+
+pre code {
+ font-size: 0.8em;
+}
+
+.attr {
+ color: #e96900;
+}
+
+.val {
+ color: #42b983;
+}
+
+footer {
+ margin: 5em 0 3em;
+ font-size: 0.5em;
+ vertical-align: middle;
+
+ a {
+ display: inline-block;
+ margin: 0 5px;
+ padding: 3px 0 6px;
+ color: #7f8c8d;
+ font-size: 2em;
+ text-decoration: none;
+ }
+
+ a:hover {
+ padding-bottom: 3px;
+ border-bottom: 3px solid #42b983;
+ }
+}
+
+button,
+select {
+ border: 1px solid #4fc08d;
+ border-radius: 2em;
+ background-color: #fff;
+ color: #42b983;
+ cursor: pointer;
+ font: inherit;
+ padding: 0 0.5em;
+ transition: opacity 0.3s;
+ -webkit-appearance: none;
+ transition: all 0.2s;
+
+ &:focus {
+ outline: none;
+ }
+
+ &:focus-visible {
+ box-shadow: 0 0 1px #4fc08d;
+ }
+
+ &:active {
+ background: rgba(79, 192, 141, 0.2);
+ }
+
+ &[disabled] {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &.round {
+ width: 1.6em;
+ height: 1.6em;
+ position: relative;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 9px;
+ height: 1px;
+ background-color: #42b983;
+ }
+
+ &::after {
+ width: 1px;
+ height: 9px;
+ }
+
+ &.expand::after {
+ display: none;
+ }
+ }
+}
+
+label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+p {
+ button + button,
+ button + select,
+ select + button,
+ select + select {
+ margin-left: 0.5em;
+ }
+}
+
+button,
+label,
+select {
+ font-size: 0.75em;
+ height: 2.4em;
+}
+
+figure {
+ display: inline-block;
+ position: relative;
+ margin: 2em auto;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
+ padding: 1.5em 2em;
+ min-width: calc(40vw + 4em);
+
+ .echarts {
+ width: 100%;
+ width: 40vw;
+ min-width: 400px;
+ height: 300px;
+ }
+}
+
+#logo {
+ display: inline-block;
+ width: 128px;
+ height: 128px;
+ pointer-events: none;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.2);
+ z-index: 1;
+
+ &.open {
+ display: block;
+ }
+
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #404a59;
+ max-width: 80vw;
+ border: 2px solid #fff;
+ border-radius: 3px;
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+ }
+}
+
+@media (min-width: 980px) {
+ figure.half {
+ padding: 1em 1.5em;
+ min-width: calc(240px + 3em);
+
+ .echarts {
+ width: 28vw;
+ min-width: 240px;
+ height: 180px;
+ }
+
+ &:not(:last-child) {
+ margin-right: 15px;
+ }
+ }
+}
+
+@media (max-width: 980px) {
+ p {
+ display: flex;
+ justify-content: center;
+
+ select {
+ text-indent: calc(50% - 1em);
+ }
+
+ select,
+ label {
+ border: 1px solid #4fc08d;
+ border-radius: 2em;
+ background-color: #fff;
+ color: #42b983;
+ cursor: pointer;
+ transition: opacity 0.3s;
+ }
+
+ button,
+ input,
+ select,
+ label {
+ flex: 1 0;
+ margin: 0 0.5em;
+ padding: 0;
+ line-height: 2.4em;
+ max-width: 40vw;
+ border-radius: 2px;
+ font-size: 0.8em;
+ }
+
+ select {
+ -webkit-appearance: none;
+ }
+
+ input[type="checkbox"] {
+ display: none;
+
+ &:checked + label {
+ background: #42b983;
+ color: #fff;
+ }
+ }
+ }
+ figure {
+ width: 100vw;
+ margin: 1em auto;
+ padding: 1em 0;
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+
+ .echarts {
+ width: 100%;
+ min-width: 0;
+ height: 75vw;
+ }
+ }
+}
+
+.renderer {
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ font-size: 16px;
+ text-align: center;
+
+ button {
+ float: left;
+ position: relative;
+ width: 64px;
+ border-radius: 6px;
+ border-color: #36485e;
+ color: rgba(54, 72, 94, 0.8);
+ font-weight: 500;
+
+ &:focus-visible {
+ box-shadow: 0 0 1px #36485e;
+ }
+
+ &:active {
+ background: rgba(54, 72, 94, 0.2);
+ }
+
+ &.active {
+ z-index: 1;
+ background-color: #36485e;
+ color: #fff;
+ }
+
+ &:first-child {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ &:last-child {
+ left: -1px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+}
diff --git a/src/components/CChartMap/CChartMap.ts b/src/components/CChartMap/CChartMap.ts
new file mode 100644
index 00000000..3e1fa0e5
--- /dev/null
+++ b/src/components/CChartMap/CChartMap.ts
@@ -0,0 +1,269 @@
+/* eslint-disable no-console */
+import qs from 'qs'
+// import VChart from '../ECharts'
+import VChart, { THEME_KEY } from 'vue-echarts'
+import { ref, defineComponent, onMounted } from 'vue'
+
+import {
+ use,
+ registerMap,
+ registerTheme,
+ connect,
+ disconnect
+} from 'echarts/core'
+import {
+ MapChart,
+} from 'echarts/charts'
+import {
+ GeoComponent,
+ TooltipComponent,
+ LegendComponent,
+ TitleComponent,
+ VisualMapComponent,
+ DatasetComponent,
+ ToolboxComponent,
+ DataZoomComponent
+} from 'echarts/components'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+
+// custom theme
+import theme from './theme.json'
+
+// Map of China
+// import italyMap from './italy.json'
+// import italiaMap from './data/italia.json'
+import italiaMap from './data/limits_IT_provinces.json'
+import worldMap from './world.json'
+import { watch } from 'vue'
+
+use([
+ MapChart,
+ GeoComponent,
+ TooltipComponent,
+ LegendComponent,
+ TitleComponent,
+ VisualMapComponent,
+ DatasetComponent,
+ CanvasRenderer,
+ SVGRenderer,
+ ToolboxComponent,
+ DataZoomComponent
+])
+
+// registering map data
+// @ts-ignore
+registerMap('italia', italiaMap)
+// registerMap('italy', italyMap)
+// @ts-ignore
+registerMap('world', worldMap)
+
+require ('./data/Italy.js')
+
+// registering custom theme
+registerTheme('ovilia-green', theme)
+
+export default defineComponent({
+ name: 'CChartMap',
+ props: {
+ title: {
+ type: String,
+ required: true
+ },
+ subtitle: {
+ type: String,
+ required: true
+ },
+ sublink: {
+ type: String,
+ required: false,
+ default: ''
+ },
+ serie1: {
+ type: String,
+ required: false,
+ default: ''
+ },
+ },
+ components: {
+ VChart
+ },
+ setup(props) {
+ const options = qs.parse(location.search, { ignoreQueryPrefix: true })
+ const initOptions = {
+ renderer: options.renderer || 'canvas'
+ }
+
+ const data = ref([
+ { name: '海门', value: 9 },
+ { name: '鄂尔多斯', value: 12 },
+ { name: '招远', value: 12 },
+ ])
+
+ const geoCoordMap = {
+ 海门: [121.15, 31.89],
+ 鄂尔多斯: [109.781327, 39.608266],
+ 招远: [120.38, 37.35],
+ }
+
+ const textStyle = {
+ fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+ }
+ const backgroundColor = '#404a59'
+ const title = {
+ text: '',
+ subtext: 'data from PM25.in',
+ sublink: 'http://www.pm25.in',
+ left: 'center',
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ const tooltip = {
+ trigger: 'item'
+ }
+
+ const legend = {
+ orient: 'vertical',
+ y: 'bottom',
+ x: 'right',
+ data: ['aaa'],
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ const geo = {
+ map: 'italia',
+ emphasis: {
+ label: {
+ show: false
+ },
+ itemStyle: {
+ areaColor: '#2a333d'
+ }
+ },
+ itemStyle: {
+ areaColor: '#323c48',
+ borderColor: '#111'
+ }
+ }
+ const series = [
+ {
+ name: 'aaa',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ data: convertData(data.value),
+ symbolSize: (val: any) => {
+ return val[2] / 10
+ },
+ tooltip: {
+ formatter: function (val: any) {
+ return val.name + ': ' + val.value[2]
+ }
+ },
+ itemStyle: {
+ color: '#ddb926'
+ }
+ },
+ {
+ name: 'Top 5',
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ data: convertData(data.value.sort((a: any, b: any) => b.value - a.value).slice(0, 6)),
+ symbolSize: (val:any) => val[2] / 10,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ emphasis: {
+ scale: true
+ },
+ tooltip: {
+ formatter: function (val: any) {
+ return val.name + ': ' + val.value[2]
+ }
+ },
+ label: {
+ formatter: '{b}',
+ position: 'right',
+ show: true
+ },
+ itemStyle: {
+ color: '#f4e925',
+ shadowBlur: 10,
+ shadowColor: '#333'
+ },
+ zlevel: 1
+ }
+ ]
+
+ watch(() => initOptions.renderer, (value, oldval) => {
+ options.renderer = value === 'svg' ? value : undefined
+ let query = qs.stringify(options)
+ query = query ? '?' + query : ''
+ history.pushState(
+ {},
+ document.title,
+ `${location.origin}${location.pathname}${query}${location.hash}`
+ )
+ })
+
+ function convert() {
+ /*
+ const map = $refs.map;
+ img = {
+ src: map.getDataURL({
+ pixelRatio: window.devicePixelRatio || 1
+ }),
+ width: map.getWidth(),
+ height: map.getHeight()
+ };
+ open = true;
+
+ */
+ }
+
+ function mounted() {
+ title.text = props.title
+ title.subtext = props.subtitle
+ title.sublink = props.sublink
+ series[0].name = props.serie1
+ legend.data[0] = props.serie1
+
+ }
+
+ function convertData(data: any[]) {
+ const res = []
+ for (let i = 0; i < data.length; i++) {
+ // @ts-ignore
+ const geoCoord: any = geoCoordMap[data[i].name]
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ })
+ }
+ }
+ return res
+ }
+
+ onMounted(mounted)
+
+ return {
+ options,
+ map: {
+ series,
+ textStyle,
+ backgroundColor,
+ title,
+ tooltip,
+ legend,
+ geo,
+ },
+ expand: {
+ map: true,
+ },
+ initOptions,
+ }
+ }
+})
diff --git a/src/components/CChartMap/CChartMap.vue b/src/components/CChartMap/CChartMap.vue
new file mode 100644
index 00000000..029a66ca
--- /dev/null
+++ b/src/components/CChartMap/CChartMap.vue
@@ -0,0 +1,39 @@
+
+
+
+
{{ title }}
+
+
+
+
+
+