- CMyPopupEdit

- CMyEditor
 - MySkills

.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"

.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

.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

.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

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",

public/images/noimg-user.svg

@@ -0,0 +1 @@
+<svg id="457bf273-24a3-4fd8-a857-e9b918267d6a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="698" height="698" viewBox="0 0 698 698"><defs><linearGradient id="b247946c-c62f-4d08-994a-4c3d64e1e98f" x1="349" y1="698" x2="349" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>profile pic</title><g opacity="0.5"><circle cx="349" cy="349" r="349" fill="url(#b247946c-c62f-4d08-994a-4c3d64e1e98f)"/></g><circle cx="349.68" cy="346.77" r="341.64" fill="#f5f5f5"/><path d="M601,790.76a340,340,0,0,0,187.79-56.2c-12.59-68.8-60.5-72.72-60.5-72.72H464.09s-45.21,3.71-59.33,67A340.07,340.07,0,0,0,601,790.76Z" transform="translate(-251 -101)" fill="#536dfe"/><circle cx="346.37" cy="339.57" r="164.9" fill="#333"/><path d="M293.15,476.92H398.81a0,0,0,0,1,0,0v84.53A52.83,52.83,0,0,1,346,614.28h0a52.83,52.83,0,0,1-52.83-52.83V476.92a0,0,0,0,1,0,0Z" opacity="0.1"/><path d="M296.5,473h99a3.35,3.35,0,0,1,3.35,3.35v81.18A52.83,52.83,0,0,1,346,610.37h0a52.83,52.83,0,0,1-52.83-52.83V476.35A3.35,3.35,0,0,1,296.5,473Z" fill="#fdb797"/><path d="M544.34,617.82a152.07,152.07,0,0,0,105.66.29v-13H544.34Z" transform="translate(-251 -101)" opacity="0.1"/><circle cx="346.37" cy="372.44" r="151.45" fill="#fdb797"/><path d="M489.49,335.68S553.32,465.24,733.37,390l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" opacity="0.1"/><path d="M489.49,333.78s63.83,129.56,243.88,54.3l-41.92-65.73-74.31-26.67Z" transform="translate(-251 -101)" fill="#333"/><path d="M488.93,325a87.49,87.49,0,0,1,21.69-35.27c29.79-29.45,78.63-35.66,103.68-69.24,6,9.32,1.36,23.65-9,27.65,24-.16,51.81-2.26,65.38-22a44.89,44.89,0,0,1-7.57,47.4c21.27,1,44,15.4,45.34,36.65.92,14.16-8,27.56-19.59,35.68s-25.71,11.85-39.56,14.9C608.86,369.7,462.54,407.07,488.93,325Z" transform="translate(-251 -101)" fill="#333"/><ellipse cx="194.86" cy="372.3" rx="14.09" ry="26.42" fill="#fdb797"/><ellipse cx="497.8" cy="372.3" rx="14.09" ry="26.42" fill="#fdb797"/></svg>

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;
+    }
+  }
+}

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,
+    }
+  }
+})

src/components/CChartMap/CChartMap.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="chart">
+
+    <div>{{ title }}</div>
+    <figure style="background-color: #404a59">
+      <v-chart
+        :option="map"
+        :init-options="initOptions"
+        ref="map"
+        autoresize
+      />
+    </figure>
+
+    <aside class="renderer">
+      <button
+        :class="{
+          active: initOptions.renderer === 'canvas'
+        }"
+        @click="initOptions.renderer = 'canvas'"
+      >
+        Canvas
+      </button>
+      <button
+        :class="{
+          active: initOptions.renderer === 'svg'
+        }"
+        @click="initOptions.renderer = 'svg'"
+      >SVG
+      </button>
+    </aside>
+  </div>
+</template>
+
+<script lang="ts" src="./CChartMap.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CChartMap.scss';
+</style>

src/components/CChartMap/assets/Vue-ECharts.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 465 750">
+  <path fill="currentColor" d="M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z"/>
+</svg>

src/components/CChartMap/data/Italy.js

@@ -0,0 +1,310 @@
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['exports', 'echarts'], factory)
+  } else if (typeof exports === 'object' && typeof exports.nodeName !==
+    'string') {factory(exports, require('echarts'))} else {
+    factory({}, root.echarts)
+  }
+}(this, function (exports, echarts) {
+  var log = function (msg) {
+    if (typeof console !== 'undefined') {
+      console && console.error && console.error(msg)
+    }
+  }
+  if (!echarts) {
+    log('ECharts is not Loaded')
+    return
+  }
+  if (!echarts.registerMap) {
+    log('ECharts Map is not loaded')
+    return
+  }
+  echarts.registerMap('ITALY', {
+    'type': 'FeatureCollection',
+    'features': [
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Abruzzo' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@bE\\KRDHJVH^RTOHLGVHXVNXBXE^D^\\Cp`jXJJjR@TWtGLLbApVHQNIzHZPpPDTRVGLhNl@NFhBtNXLJJtNZ@xNZ@VHV@JCR‘@Kd¡VoVaNOj—€•VSd{hsnoZanil_zyrgZORCHM~kxckœmjORSREASXWFS\\Y\\S~ch]AUNQVKpSl[tW„YØojEF_EKJyI]RS^W\\MrSYcGSZCPIEMYS[IQKaGuu@G]ScaEKDOGamceIQICQ]g@S[UKWUWcAW]KEDM‡eQWeD[AEFRXQfOˆITYBGTOHcZkEC`_KFKKQ]FAN]bETWEUBc^KBQQ]QQSeM[ogIS@eIg]deHYBcLKdAPKMSAS]DE`IBQSEQqGYFMQRUISWQGVO\\ALqAGIYYAesBCOQYqXDYEMIQJO\\IX]@S`]KsHONOA_FQXSGK@QKaNW@ALWJ@VOTQJETUF[UYHSZiN]@UQJU]U[CWS_ESU[L[@{XDNSPM\\kDMH[DW\\sNgPUEI]WCWXEpFVOLLTPJVhKPk\\MGYJGPUVaTSKSFc\\wPQT_Jc@aPaLaVQH‡VQKJUOA]BqNIPEXg^C\\MVNjPXHXpHZTHNTJN`@NKXŒCNIŽi\\PZCTOdK\\[XC`PXHRIjHLT^NGJXNXCTFMRhHX@ORgDUPSTTRKJ_PyDSJOPET]V[JOPKTE€K@oXsfePbZhXJPIVgN]PY^UN_Pd^jHrbMNLvSHSXCZVBTVC`dTATlI^@ROTC`VpANWjF^L`IŽLZVGVLhXND^wNW@[`KF@\\PZ'],
+          'encodeOffsets': [[13680, 43721]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Aosta Valley' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@AQJCGSJwNMCQMIEQNIHQWKHeGUVYRMFW^SdK\\CGMTUeoM@M]NK@STGAKNUZKEOmGciAWKEYFaEWJOIUBaK‰k{UYQKAOP_EeDUI}bYDqOGTML}ZWAaKQOQ@qNQ@QI_ACI]WAKmQSCBMiKBE[QYEGLOFQGaAYMwDUG[FKa_IWOKUMISB[T_DYAYJ_QKZLJKj_S@OMW@SUSGDoJyCA\\PDANƒDWFQNJV]\\J^KVBPLJAN]PEHPrEJHNRLLNWP[DKP™MSL@N[JHJGXSKSL]@mRIT[HQ^URRZQLE^BTGXHVNJBVMTTZBJdFPHlSRZNJVIjE`J\\@VZnRd@RNLXEZVNPVnJhY@SZI@If]EER[b@`TDHfNVGEG\\Q`GTJENRTRHBJXFZCNFVGZVLBR`RJPG\\ADIZA^HXGRMdMLBZZRCpXVV\\HbBEXNJbJpHHGj@FJI\\RTz@FULGnCTFdCjNLAZUJQdCVMCY\\W\\BZ`lEPMTENMREhT^Kh@PI'],
+          'encodeOffsets': [[8053, 47019]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Apulia' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@NEpEEt@¨B¶GPO\\IxE¦D¦J€Hü\\NHdCfKV@LKXA’BœD¤JšJxJTCˆJ NZL\\AJHtK`DnKR@ROXI\\WREnGLWTQfKKICoT_LCESLKAiDQKEESDI]OMCIU_IEM]IOBGO]CY[_GQ_UIi[UEMI_EoWkMYKMIWKm]MiAsFcLel“hmVQxe`OxUfIäbG|_xSR@RGn]jUXG`CUhG^I’edG`UlW^G\\BHIfGBGZ@^I\\UTALInSHKRA|WVB^GVDVEVM~UrGbGPG\\@bYbOlG\\HNU\\BPIfMXC|QxUrEVI`GŠIhQ`I\\O–i`KnGTQ^SBMbMhGLIfSbKteDKTEFKNCXW@E\\c`KlK‚w€[fUHStWxS^GTKbEŽWfCbKœWfSFD^QjSBG^KTM^I^CBKPI‚]¨QŒE\\JXeVE@IQMNGZH\\MDJT@dUB]PSjaGIBUMMDUPOh[RELYJGnYHA`_XK`CNIT@^WbATIVUZG^WV[TIJO‚gCIX[†i^YV]RQn_`MNM@[VGNkRMPeM_FOTQRWDYVYHORBHMPKSO\\c[[WKSQMg@SIOUMwWGk_SEUSiA_K]CeGKJIJWEGB[QwGIBSJMCOimOHaKSHMVeLELmReTsC{HICm\\WBON_JMNm`WJWPOBUPOVm\\af@NKPSHgv\\DPNJbEV[boRTD^\\NjGfKHS^ITcRMAGPY\\QDelCRRdCL_V@^ORSD[ZcX[BIIsRg@IFcDSAmFWH{F}D¥GsCm@ÃIYb‰JQXsJc@_DUNKROAWNICSN_B_NAH]N_@STQ@INOAo\\aBKHVTjDTLR^AT[h`BDGbD\\IZAfJLLJVSTm@eSBKMGGRDRYHQC[UIQSAg@MCSHKR[b_WFXGFaPaFu@[CuKyOyW™qm_kaGKcLqb]\\@\\MVSJƒ@oLaZdnARUDSTRXSTQJDZRhIVZRW^G`bœDVWBeZPTHKbP¡n[ZCWYBHLiTqCXQQVYIIQFK`KF_KKMTGFaI@}zORIG_kaYƒgcGYN[rKJƒ`~{`YRIPWPKVQJWbM€GFK^W\\‘VaGOKIYWMylSFqL[P“ZkJMHI\\ZCf@LD^^RXGZ@ZZJET_Z]PQIexFNMLmALNKVcDGGWDg`MG]`SAIKeKWJSYQ@SMOeSIODYK_\\mDGKQG‡E‰F_NYFUEgDOA_O]_KQCSYB§dAH_EaD[VORYB_RW[[MMAWT]@oRaU]HaTCNSHAJsjMAUNCNBXZPNTLBx^_jAZJHTAXDHVWNOVSHWBIISCIVWDMRcAiE]BO^SJH^cBYRaBWHIZBJMPE^VHRVjFW\\J\\XHIZkAWNeFGLBPYAAVKVaTQTcT[\\uJEHBnPZFVCRHTUjKN`^TXtMNSbM^ADZhLH`LH`@jZVAHJ@RXPbH^NKNYNQDITYZ@PZ@ebJbZNDtOLQZH\\VHRRL\\TLAXIHCPLr'],
+            ['@@TBIYOIQRXP']],
+          'encodeOffsets': [[[15502, 42935]], [[15859, 43132]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Basilicata' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@DTLR^``PPBhCVFZE`MŠEˆFRHHLnC`[ZLPCTJPfTNR@TZXIfLJLTB^_NHh_XCHHdCLUKMnBNKEMfwRJ^O`YFSYI@YHYQW]]KCe@YDJ[NGlI”Y\\OrKTEzkXNJZPLbH’UX[L]HENXaRILUXOJOZQ|_€}„_LI\\qZMdH„hbZ`lJHPQ~yJ@EbSHLN`LLEL_REJJUZRR‚WrDjSGKZADX\\Y¢maOGLOSfYXACUa›H_X]YQJUQgCYRITSQWTSVCBQcmbYpK„@TINU@[^[radKUaŸWUksk…YeY…QUW_[_S_SS‰seXMFUGqJYMUHmMSK]VYDOIQB_PeBcOY`C]UOJUCeFUQOI]MOAOJoM_igCMQQDOGKUIS[VWXIIeWDwvWHkC]JcGYMq@JQ@OG[eLOP{XieMLUEcDYGOK{BGEMbIJ]NAVONO`ZfVFHLETOD]BEMuMURaF]LQBc[YKOZYDSMUXYFqEAIUQY_]KSU@SKaSOIVK@SRA`ENQHERMHIPUHBL]HMR@dYVc@AH~XARMT]FpPz„EJL\\CVILAP`RETbPAHTXRELLRHXP`@PPMHEPDN`PKPBVLDQTIP_FQCEPkFa^HLSFahCdNPBPjQK]lMD[VqROLSZOLBTMBKNSBa\\ER\\RSNDbMFFLMNAPRXKJSCQFEVMF]AKPYAOV[HP`NHDXrRTPDP[DENcDYJILmPMROHQV[BUNDXG^HZPJUXHJBZOEUH\\Z[BYZ[HILvJZIHLEPA^KR[@AVlHRSLAZL~IX@PORAXNILAR‚VVLbDPXRlAHJPhbFZATFPIL@NMHCNJNWTCZMH'],
+          'encodeOffsets': [[15916, 42042]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Calabria' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@TPLb@TTV^LZ`VRBJrFZEVWTNZCPYZLd\\RA^KbEVQvNFN^APCFSGKUEYeP_PMBU^MJINaHF|APLZHdCVFNKjf|WPOfKH\\@PIRr@ZNdH^IlDXGxuXCJfWJUXT\\VJHLCPRRDNjhN`IpBPNPJ^RPEVDfIVVPD^Z_dPfA`ORAPJZC^UTLnNVGZNrIVHNEfWoeciG]DSIYTsDiPiVWCMOKMSOGcaaciuSSWaIUIc@mDULUVUnSI©KINS`GlY†]XGpGbA‚BPB’IV@bPfIZWlYTORg\\WnYHIˆ[JIlO`UfMjG€GPENMTmVY\\QzadILIlIf@AMciCSK]aCYBaKoDWHQXYLSXQPOMeS]a…IgCWFWHIPBBMXCIQJcXUtYzMHI_AcaMQI_D]ROWSUIcaWQIMUIMMKTQJOAQJmFUGQUaVO^ULQFoAÃS¹]Ÿ]{Y…aŸu‰aYAkaQ[mmIKSu][Q]DUVUN@JUEmH‹TBcDQAwFoJUHŸWy[]¹§ue‡_K@uO‘YcEUGcU_g[S_g‡‡UU‡‰i_QSEQCqMkEiK_BWk‰@E_qegqmaEUDaCkMQF…DQFWBEH[BEKB­Q_DmGu@_RcFgPc^]HŒSdCThXFVQZHXcTE`AVbVJT@NJNKNJPENWV@ZMHCŒFR„RXPnLVBnA^HRJˆdpl@LXdAZPvZNRRJTCF\\vblZ@CNL\\X\\OJNzTjFbCL]J[TOZKBMRWHSVQJILcNTxVX`PPNTAZNbD\\LpHVP\\`^RjAVHpBLEdEnMjCXLTCdPZ\\\\HRLLP^xVxLtD„@|CjMV]D_PYRSBKJI^MPETOXWPktEhGNIbGjCFG^SlGt@‚EXC†I®M^OŒO\\Orq²WfYZ]XUdo~U@QV[DUJMTMlGJIfMdOVKtMb[PQ‚GHHPEdWˆQ˜SLBTOHZZPBD^QRBPGVo~'],
+          'encodeOffsets': [[16135, 40881]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Campania' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@Hh\\BlGJCZ@NJNI[[OHWAQMKD]EOH'],
+            ['@@RHBPMXXRPbVELIfG\\FRInINSAQJEBOSOm@WMaHUEWBOEo^'],
+            ['@@Rd^AJHtA\\^HRMXNBRNbBVLXEPNALLR_`KVHLQfPbTJUXDL]PCPtTLEXBVPVH€jHLdAzQHMCMMOJKZCRMDO\\_fJnDZS`GDHUXH^MR_^KNPZCRPDPVPJVV@RNDvq\\GD`NJbC\\DXEXB\\APWzB^S@MXEnY`@WP@VKXHRQdIbBVQV@BSVeXEJKdF|K^ZRCZ[EIdOXJ^VHPdTZEDLGL^DVH`CDGZIlNXB^RBPLPDXVNT@^KHK„[VCVFZ^ZLŒJnLNNnHBT\\BVNbSLUBUZBAOHKfEXMlBJYWGI[X[iEQUUGF]NOAIJYXGbAZQdAG]TIP]^AjFdBNQXCJUTDJJXATGPUXMGUWCSBIGBY`iw]KAMSYOAWDMVMNBtiBITGDMbS^GbVpQ^@XSNB\\NX\\`QZAPQ\\UbC`FBG¨cZANGDYXSIMDMNG@MJKEOBSEYgaIOBGQkOWaCUKUBQJKWMQBOPW@}JYKKBQTkGBU\\@LQB]FOGKYJuIJK\\GZY\\A[YVGPFAYGIVWOIGYH]CWVM\\ARUPGNQnOJKZIdCFM\\CCOSOqQCWMGO_\\GPUZBLO^BNEFURETDLIQWBONMEKNECaTM[QFQb[TALMNAASPKTYPKrQ\\UNC^kRLiAOMODcbgTEGKb]lEFORD`EJORSKCAULO_OCMFONGOO_@WOQGKKQFSWBGaOFS_QBOJKDUK[FIyƒoO^ENSBQ}WYNMPJXKHOIcLKAmJMEq@wMSIWWMUSC]KGKskOYqDcJSGUDeNchQLkCEIYCUNbJBPE\\UfORmPYVefMJoD‹ŒUP]LgGY@gQ_NKCeRCLQ^SRIBQTmFOPSHW@IGSFaXCPFLpTVRFrCZGNJb`JLAVT^FNRD^CZI\\Qdk‚q„c„iˆU^q~_`spyl[RuRQ@WMcGMKQ[UYWAyR_NU@OGQS[GWMWWEFEQKODEPoVS@UGWKMD]GGE[A]QAE•YMKYCAKQG[BEdNJH^FBdt\\MVB`PRDLLB^VBZNN\\VPxJLVIZM\\]deNQE[@ePUVuhm`ALe\\WNZQ@UQEKeDUG_gBOiOQH_hKDe@OFSACPSHeAWIKQTI@WJMSK{DORNbD|M~K`Sne|SZkpQNWZe\\S\\IFGZWtYtŸ²W`_`wp{n'],
+            ['@@TXBRvE_O@MaKIF']],
+          'encodeOffsets': [
+            [[14537, 41515]],
+            [[14184, 41689]],
+            [[14094, 42214]],
+            [[14336, 41726]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Emilia-Romagna' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@bEtFS`DVhaBQXC\\BFK^@HPnF_^JJCNVHX^WPOBy\\@^~VR`ZJhVHN]hG|U@[NUCgPJNYLL\\LFDVOJ^PZBPPFVVNAXRZBLNNTALJHVJHKLLjIFLPVJHLVPXBARpAFXtBXD\\J\\BZUJULETDZRBLUdERHR\\BRWN]bGbHXTFdTBRMJSE]M_ZKhD^IXSbIRI^LTTTHHRKXC\\FBfKVa\\O`ARGDOA_NCTPFZKTJXRFXCXMVYR@ZRBXk^IVbTrPTMDMKWOG@O\\A^NLLf\\fNXO^ad[@QIKCQvaN_vNF]XSX@NF|PZTXAJUhGdLš_V[VM^F`CN_~QdQL@f^dF\\GRSPi`QfC^MjMfUjAtCjJ–PBN\\XXdVT\\NJRVUAYbZBVZN\\KH[LSKSBG¬QVKHHhKHH^U`HLQNE`HCOxXrCTLAJbDlbTF„E\\@\\E\\\\nKNBnKJMpWvJnB`JfB\\HvKPZb@JLPGZHTMhKLJ`HlGBMfDT@EaFIˆPpDfAr@ZGdYbEVUBOTSjAVDNL„flFtRZ@VFHRGXRR†Jl\\tC¢AnHZE`@ŠXfClGZI„@PMT@PHXKPHHQ^EH]TIBO\\GbNPLPAJOZMhB`EZX`@JPlCZYCMUWH[AaDS\\[ŒGLIFaN[v_hQIGeFBPONYLKNS@MV_^yAGCgcLK\\AKQmwQcK‹CwBYJSJ@@]Rk\\aJkFKBƒDSGSAgDcHQBYFobHIPeR™L_ZsHkRoTgr‰\\Qhkd[–‰fclcp_ZKZEFJpqni‚sŠmvYlIX@JKKICW_cIGFMEKNaOKGQTMMWqEGK[@I[FQOMwFcKcTANTNYBKJD\\[DHPIXmEGYiKMJGPXZOT[AUVaNHNffERMRL\\CTHROB[QmIoYUQaBGIW@DUJEHSKQHUGMNETgNOW@YHMGU`GKQOMC[DCUg@KcUGU[MaEJOC]GMkKKBOQgPOEWBAOQE@QIKSTWLS^_MmKcHQIUAUM[FETOHg@IHQA[LgG[NgNI^cFY@KLDRIJ[IgDKNaCIKPBHYVQFWZsPCDsNUVUFCTNbEPNTaNK@]TV`GLSFaZO@Q^NTRH@NIN\\JXAFNTPDbZ^xlFVRJJbQLqKaAqFEMwaQZyPYAOIMFHP^DBX\\NEZWAYLcCSNUC@MOK]JOCWRMC[X@LOJSCKT[BMPRTETs\\YCeYO]MKaH[@MDeUEWSSaAFIYIIMQH‹AIG_IeD@SfOLKP@ZITOT@FWW@SM[J]EiLmFUJEgS[IIK]FsC@JuDi\\DVTF@ZMB_EHIaMUSDG]gWS_GU[eDNZCNWPaPQBcEQXSPUKaPOP[F_VKT_L‡C_F[AWGSHUAIHOMGOSKFI@]ISLEPWR]JIJmRMVJN]\\iTIPRXUNWDKLMEQDWGMBcRK\\KBsdiHWEuNSRWBUG]OaGc\\M^QLUC]\\KAwlAR]PYDyGQGKLsVEHcLWNYFq\\KXX\\JPSbaCSNAZOF“JYGQHaEiDeEUB]EE]I@g[SWccUMDSWE@QUA]HcQEKTQ|MVgDoZKJYDUKKLkLKUKEUF}IS@iWCXOBGKkA@TNTXHALTdJHCZZE^HCdPZCLHVMVSNLRSL[H]IGTUGSNYHF^IHY@IQSFO[_PU@YMqbQDQXYBBIQQ[HoBRLAROJaAoICDC„PXM^BV'],
+          'encodeOffsets': [[9422, 45759]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Friuli Venezia Giulia' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@GVcG‹GEH~@LDjFJW'],
+            ['@@KCIOuY@I}JZNDJ^AJNTDdRLK'],
+            ['@@UHGLZJZUUG'],
+            ['@@@J|@\\ANJZ@BISQ[@SJSEGF[HEG'],
+            ['@@\\HJNXF„KRQ^IZFLGGchIZJnEXF„@^MRH~OZFPE^FVK^A`JxB`M´K^MDG\\IbGPDneZPREXHZGXFXKZAnbPEVFTTŠOAUhG`AVFlCNHnJDS\\QxLbCNYXBJJTB€GLI‚SLEfEpDD_YK@aLE_[JWIYYKIDk@KNcIaEc@]QGKG_QUmMIIUDUIcY[@cSiDQECKZgSW]@SOFQW@GKwCJSLDLODaJYNSdQMYOM\\MpHCZZBREbDbGHK˜EbOHSAMPG\\NHEnBDIfPvONSWWBOWcSCUUmWIOaOOQUAcQwaWBOI@S\\KCQWcaIAOLEbiZ@VMFKdCFJhCV`XLxK`JTKS‡JUikQaYGS]NKKEUiCO\\OHWJGAWdIZK€FXANMXGn]rUVObBFKhC^OXc`QNMDSGIDKXKZ_bUfSTE`QWQyYSEEWUGGQWC{C{H…\\kGKV\\JbAtIPK\\L@PcJIfcMMNARTDVNQVObc^kPAP[Rkd…j[\\OCkFiR@KcH]Nk]IOBQKS\\SnMMGY@sWkO[@OLkT[KYTQDcEyVkF@FmJCFyFWCKJWE}HKdmKQNQABSaBCOSBQKMHBL]PCKWIJIUS@KaK@MeSLo\\ATGZ@|RDQq]YYO]MJYJ@L_GCRJJEPS@UNTR[JBlWL@XkUDNLD@N]PPV_`OBG`@PMLHP\\GDJ]HSV@LOXSGAkiGQ\\KMOHOKaF[PPTaPsGDKQKSC@QWIKHARJZU@[T]OMOaYUTIC][OGIO_O[UeTGhaBBPaBQLYGHQQOOTeDKFGTJPQ\\]BCjWJWTRFQTEZMFa@iRFNkNSEOFEPFX@ZD`SXEh]^JBJbVLPXPPLA|ZXPTdJ^EboX_LSTBPIRDVYDuCGHPVONWA[IULUDOPWHEVODE\\P^TD^VCVJJGNbNRLLEvDVZCVRC^PLB^RM`XJZ\\^REVPZ\\V`DEPHPVIx`dC`OnTfENKZDQbob@V\\L@`ZvNRMdRUTFTGHTLGZHNY\\CVJHGLHH']],
+          'encodeOffsets': [
+            [[13567, 46805]],
+            [[13794, 46801]],
+            [[13768, 46801]],
+            [[13572, 46810]],
+            [[13038, 47754]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Lazio' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@RFRVTEMKaKGB'],
+            ['@@L`VNVVN@NLPMYCUMAYMEPUMWUFFVUB'],
+            ['@@\\FDM_H'],
+            ['@@LTILNPhVLPA\\PJV@bKzRTE EfHGZFJILLZEXMJmF@R[NKCMLDThlAlZD\\GLQXXPET@\\XXCdTKThLXTpBPHRTCXPDpINJdNHVOXaDAVFPIPBR^BNPJhLFHRSP{JFROB_^[FPb`Z@JdGPSbM@RHNAPdH\\PZBŒATMFURQPmNMdAdUZEFWOEK]QKUCIOUGMULGbIOYŒO|YfWHOTL^BhNjANNNCTSPAFPZANFBP`TXI\\U^AVUXMAOdM]cbM@OSYLMBMVERMZ@HWIWO@RYHcTHRETSOSdBPLjSLUpPBHXFAPrDdW_O@W^CEQMDKWPYKKRM`JXE\\LHMOIA[NQPNPDVMhLDoLWXEDJbZjBJHt^^XElPbDb^BLK@SPM@G`CPBjPRVn@PPRDk`Q^bRnBDFl@GVFP‚H`@lVLNˆTTBB\\MTERKHDR`PpUZALXbF‚Ef@VL@VPNPCLSlILB^PpN`XCL^H\\[ZNd\\HbIHHN\\`GbDNVBNG~IT@PGJNHVnBTUlKVWZUdKOY@[LE\\_X@xMC]WMKgHUYUK_J]KiEMXoB_USDQP]@kJBScSD_SUUADYTWTGKuNMqaiGc]`OVMZ]^OhMJUIOgWaYfOtepWL@FLSPO\\I^UFSPOTIzC`OLISQTSVOhCPQW@gGNQSEWDWMHI]MKSiGQJWG_OWD[\\cLSPYD[OjMJ‹DLW@MM_SIGMYSoGGWOWMiNUD[h]FWJOrM^APBIVRLˆURGbUbKbOd@`IRSxOd[TETLbSVUHOZINHl[LOUgOIKSPKEUFoXWXDJ^VFhOtMX[\\CNGlCN[TOCM|W\\@\\KTV`FXT\\D^VIVVR^@jMTYZG\\VVEFSRIPS@UXIBKX@bMRLL@THRW`EPBPMtG^LT_^@JWP[RIDGtUNOZS@ONUDY^aEOHUMAOQN[XCPGEcM@KOdQ]UaCIMWKIOdQYkcBGKiUGUOWAKFsSDO^OCKVWSIOaReGKLU`_KQBKOMWFUKaAQMMANWGQ[]sBIG]BQcE@k\\buSYJCHWHkHWAmUYCUMK_FSXIKKeNSIQPkV]@eZ_@s^UHoX“^wN}J}F[CIMSKgDwCKsUkYUG[SEMWQkCmJW\\DROf_vk|[`{ruby`sV_LiFeCeHc@WO_Pm`s\\]LiHwGaOatcbWhoxijyt‡†‹€[R{l‰l“fyVVaDON@TM`HXO^U|iŠapw|_VaLcH_XuT[^QRmVqJKHS\\MBs`aRk@kEOGOBkIERWTAPILM`OT[NQTQJAZWHYdBJQPANHTe`O\\I^Sb[XWZMVifk^kT…ncR‹^Ãn']],
+          'encodeOffsets': [
+            [[13730, 41765]],
+            [[13253, 41879]],
+            [[13359, 41953]],
+            [[11724, 43396]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Lombardy' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@TZfX\\cvUdBLLTGb[hOF[U[SFIICYOQ[EY[KavALEV@RGHKraVI`FFI@YGQ^_N@V[EMTYJamsLOzR\\GVM\\LTGGUnK\\FR^FVVRCPLVVFXRX`YCC\\_HaVYASHFNUNFNATgLKHnZXTDPCb[T@VPL@LZHjRTAbFDXVT@JaxbPVDXNR@\\flRLRfA\\RB`NZbPD\\ZJ\\AFP@bPZDTRFHPZPEXXPLVMRPNIZYDKVDVJJOVNTETSHiZE``FZTAVHRGJPXpLLFvDdCPJVIISPSXKDKhK\\PB\\TRjPPOAYH_KKBkEIEcLKRqO[dGFG^EHQPGJejk`SJH|W`BZENI`C`Hv\\JKlMXDH\\NHBTQDVVIP\\VjMZQR@LLdF`L^V‚HHC`TtNPQ\\EFNfJX_lYPBFSWQGUhS@QQOHWJC~KrUJeMK@KSK^I\\MTNlHjInNJRr^EXQJEZOV[JAJkTM\\ILFflRCb`RZAPLA\\HFQPQEK`aDQGQDOM[@[NOCMHAP]HGJ^dENONHTInRFFTSdpTFP^RMPbFLPGPLdrKvTRBtTxQRZbLHY^WUSMWJ]PGTLpKRW@Q^G^JVO\\LDNXA„WlPf[`MJi`SHIXDCLEb@TUnSfGBKh]IGFQGKRkDQeY@MQC@]SQC@MIIeDGYL@tQfOCYXOHO]QIMbYRqc[FMSYUMESKMZQX[UUAMOMHGAiO]i]GOQMYGeePKB_COWA]W@[GI@]ˆMBMMWRQ@Q`OHSGUai\\SEOJYGoLM`HZGPMMKO]FOdIX@fLDHfT\\Fl@REXhGR|BbRXIbLT@^IHMTVXB^QˆH^GO_ka—­£¯¹³ƒyDaB›PuJÁHIGOe@@KdLFWLMMKTGDNXH^A~MN[COSSAIQCNSTEUQeIDSNGRBXMAWfMDSI[PIžzxeNOpaAMNSlCXEBG^BNU†IIMAO^WlBrWNSIENoGQ`AXN\\KVFHEMO@O]M@I\\URClUL@fIEZLL`QXAPNH\\ND\\M\\EtQoU@QXE@G[M@_hD^ClWVCfRP@HSO[NCLWxAPG`apSYTGR@\\GPQAMS@eCANkH_GKIgLSNYGOHIKa@OYuL[GeA_ImAuIoXINmLMAmL[[[F[@ƒFSEkaaCBISKqDwWDP_GMFKR_G]VGGgLGGUL«RAHLTKTG\\[LYMAUaYBZUVIQ[MUSWc[WAM•OiIsDiBeViN]NeD_ROjQT[HcEe]K@cR}RM`_D]EUNU\\™`cKgHIVWBYS{OMEW@WTE^uMM`ubDRJL@Rc\\]bWPeMe[KK]M[B@PPHLXCNSNqOaSJUl]AWYQQ@UZWNWDQEIWLSEYSOMDB`CPQH_B[PUbeLEAD[LWGQSGSS]KQJaJWT]JgCYLN`F^ITQNSAEcWSaGaHM^QX[AGQFQVcAKYQSCKFIVYV[A[IWCsAEWoBBQWAUOGKUIKOJEKiLKIGGUKISBMMAKQYBWUMEUOOYA]OPICUKEK[ZKIMhOVD\\MV@H{^gGMgUYIQ_}U@]z[PAXOW]UGDMII`]mEGO]@EL[AWDARgbCUT_sEaFPdKfRTDjiJk^Dpe\\c@UGGH[GGPSL[GU`YNQZVPPFDJMJO`qDWZUDY`GZmZFTJHBTejUBKMc@mnAPFZKtY@IHmG[BWKSOyCNQMMcHBUGIwBFVOHi@OZS@GSUCQHSCWQOJJJMPO@G\\PHERKJFTIZ[DBN[TFPEHHPkHI`MLwNQZDVPPTBBLTBCNkIDGkGKLnJEJeVAP`HCLPJULPLUJCTHTkHHTg@T`PJpPWb@NZFDJ`DZIlHFEpLVGF[hSXcFe\\DVAtTV~`@DP^JHJKNSAm^dLNC^LDRzSfJCJ\\FLC\\HKZUDELFd_@A\\WXSJFJAZELYC]ZeB[JONOZNRSZETA^UP@LPJB\\WHK\\OHWAAVMNFJVELMVNOVWVVNBRyEWD@V\\jANOPa@SFcBUPQ`spGPB^TX\\JVNNbEbYpOXAZplnbƤfZfXNNFVQZIjShDRNP'],
+            ['@@RhTAAkcF']],
+          'encodeOffsets': [[[8924, 47205]], [[9174, 47068]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Marche' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@HND^IPbF\\NHVdV@LVhCDD\\PN€RHLV_NHZGX@MPShbDVHPSNCTFjAHRDVbMVU\\BPSWYHONIjLHZnFJWGO\\CC[LIZASMBMdSdLxEPNERJ\\\\@HLrFNXSNHRPLMbFLENJH`dDXLJIL†GXBˆ_¢gZM`Ay`WŒqZKP@ZShU`S†u„mžwzgVIVQŒot[vYŠ]„SLKhQnQpKjCPFLZRIRRhMNQ^QXYJ]LKVGLBdMLKTEDUKIHoEKFM\\elLOTiRmn£bqVKbƒb{TYJ_jPUVuNSb}B[JqRwZ™PkVsd{NaU@UGY@wMY@sMIIWKsMgAMEk@gMHKQUCSoOYOyGMJGRoUaBKKsHSXQ@IiWI_iDo][]CWFWAUMGWHUGKSP]QUGGIQC[LaFcLYVUXkLSVmAGUIMOHS@}JMHUAAHTTG^\\DRPbBFMRDALNbPPJXMROdC\\WbIYSGQQW@YMODgIKHUZITc`S`VWL]^WKGKWMwFB_IGM_Y@EPDRKN@VPnODgD@P_PINgL[LJXNRgrT`L@FV]XCXJfBVUXCfULWBcEIVMN@NhLLTLHDhHRKbYC[PCZKJCfHNKLYDk\\RRF`GhGRYNQRCTYJ@PQLHNMJLLVBXLLZ_ZJTGPVJSRSAUL]CaaEWMQmHIJ]F[IYAMQOBg`_Jqb]^]ZWXITaXgNMUQDOGKVQJIPWIIF]WW_MBINHHiZiY]HS\\QJNTr@FJnlCPKP@NNPWNMQgAKIW@KWOIIPw@GGeFMHYEWdCPOP[NGL\\VX@bFj^P^bKvXJZB\\GLPPJOBgNMI_`GD\\IZBNh@NKZJBJ]V_\\[`SH]@eT'],
+          'encodeOffsets': [[12579, 44816]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Molise' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@NJZF‚CrWRZDPtABfZZHJrBBKP[HUXRJTQVNRZErHFRRTJAF_^CBTNTOLcBKLAdGZcfh^fJT@hJ\\pfNRT^RRRLAd]VAXFFS^aBM^ELREL`LD_lFdYPGHSZAJSP‡ReQWFE\\BfCRXˆfCNLFX^dBVXLX\\V@T^hDRRJfJndHbCPFLdb^T@HvvbHRL\\JZTFNOJYDHTZdZEXQ`O¢erOxMdCzMˆEH[xWLObORS^UXIdK‚IKqDOJGBWSKK[QQUGG[RYPKCsYMIafaY@@OZYJSRCZMLM]MaGWO@QGIUBiY_@KGG_gKCY]BaNMTsNSW_]LMViGSDQEUOYAmFGvI\\[dSRSUM[AASmGMMmK‹IYKY]UEUDƒ\\GL]LS@UMCWKOAO]QWAkMYJCH_DUG]CHKCKYFcSGO]UWIcPFJY\\QD]Y{LcEILWFUfATU@URaAcJQRWGULO@X_@mZWF@N]TyAOX[BWAWF[CaDMIC_[HurMC@QUUOIOUOCDQOYLM`]NQG]VWCG_HYTmCeI[`CPQNYDILNPDNGNyRZlcRJPXLJNbD^VcRLPN@FdOHWDM\\PRNBGVFP]bCZMV@PYTMPsVCH'],
+          'encodeOffsets': [[14276, 42689]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Piemont' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@VT@TNX@P`TLiKILY`RZIZB`C\\STANJLVXP`JLb\\EVHxCZNbBRHPEHKZF\\RAFjLANTDnRBL^XDJ`BRJR@rMR@RPbLXB~YNKHSrPZC~aVJfC`FPOLBZR|VŠlbLVAPJXIbFZELFBXdjnHFPYLMVBLSH@TMLN^N@fpSVHN[DcL]TEXQNUZHVGfXLGRMJFRNJDRMNIxHTIDBRRHJLQVNhLNET`L^dVAtD\\CjHTGLJNXV@ANLLELTRTHShCVNPBPJXf@hJPAxNJJF\\TJjFRTITBP^X@LYPCXORG^]HYVCRkHOJtlNBPVdVTAXIhB`LHA\\PDTVNEF\\V\\@FLZLGRTJXCdTZHHbMR]DIHb`hFt^DHZL`AjHPJxJXELONEHOQOFKCQTQIQPMSSJMHcQQHgSKCMSAK_SKLU`[LSOGISlKJWdE`GRIVBVGDQLWZKFMPALMDSbSZCOWbUFW„DXUXGVBROP@dGMOCQTgJiRYEUMMeWeYÅ£maokBYPWZoFaMaUM[ISWA]HOtoR_VOdATEb@POBM[i@UXCzFAQUMXUPUUMKNUFEINMBUXBPGL[XGA[OI@KVOB]FSTYMQPYPM\\IfA^YZDFKBYEITIXWB[`@EcFKVCLY[GKD[EDIeIyTCQ]KMDcKn]TBLMGI]ICO_@U}sSUB[CEfWdgTE\\UHoKEFkGYJ_CCIYE@MXaoOOIS_h@GSlGGSDSVIOKVKOIDK_GBOfUFImILKlHCHlJDMSAAKSAOOCURYxMNKJ_lGGOFGEO\\SAM\\CJYESLIFQOGH[P@NOIIPIXRTDRGVDHTT@PYj@PGEUxAHJAVdGNNMRzDTPXL\\AnHJGZ@LsEYBOnmd@LNVAfiASIGESnYHYZ_VCXYrCP_NICIOEUORYZMV_\\HTKHO\\HHGVHd@f[Col]jICiQSLeOcAUN]OWDƒDCDUCQgEQGkY[AuPUZD`QJS@SRiCaZ@NILQHGTOLYBUIiDSXSCeDSGBO[cuOFOPMXGDM@iNMCIT_OMgGEIWJINkEcJQEGWLKGIeGWWFcHI_IFOgDJ\\M\\BNUZMHCTQLM^URODcCQDMM]PIEYHOI_LOUaMEU`SMQ[CMWYAAOHKwKWTW@UE…AMFGTWKQc]LOAOT_GGQDMkWMW_KMjuFk^U@iJW`OL]SWEKQGWNUYO[D@W\\YAQTSDQOGKQDOYGUOQJQSOIWADQUIR_GQQO_QWWQ_aJCJSAGKSGLI@OV@XYFOQMaORKJYOMIUPKDM\\CLKEOLSaWMOAUGIuCWVgFu[KQ„WIINMUOOL{JIMmK]Ri@MGYBEP]Jk@¡VmVwGUQOBMMDMSOPEHUNSlDQMMAOQEQ]BJlGL}vSFO`PJJRONDNPHFTJ]GBMYe{@_FgKWCQFOOWCSJ]KgI[KQFeBKeSNSAWPsQU@UjCPuCIFcCOBMGQNS@ELUHKVMNMMO@MNSHAJSLKVUGSLUDYI{doJINaHOKKFcKON[BQFWdDNGlYNSGAT_HJ^OPMBQPUHIVBPePaFBJRREpHNI`RA`NJGVDLREL]LULI`[JaVBLULGRMtFL\\NNZŒLCT\\DPHAdLXPDHN@NNFTEBNOFORK^ZZCLJLPA^V‚BLDZCVKZEbBARUf@JUDYHWTQjHPKfOPUJRTLVJHBXWDEZsNU@u^WFSY_OEHiBIF[@SPYDWPoPWXUDKROJSAWJHhHTUDTNR\\CXUNAJ[VXDBPKPHJoL©CARONLLWXJfQ@SHDRKH[fLP`@VNZFP`VAjL`MZCPHjhVCRGtIdQhY`HPJjBQlRTbElLpTATZJMNJJjHNCTTdILBbTR@`]ZFDVNDVRNDJT^EXZIJHfENWRKdMLNTVANFCTRXVDRJCVJXbTALPLGJgLUTaFiN@P[ZEJLR'],
+          'encodeOffsets': [[7275, 46559]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Sardinia' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@LNjAJICQMEmV'],
+            ['@@TNKJRNANPPJAJSTE`LPE^NJYLChUDcV]_sIaFeUWHSOEMM[@[FBXOFCZKFK`MH]tGvO`'],
+            ['@@VdZANLZDLRRENHZERPHkEIJSEKLMKODcGUQCEKQFQCGJeHMNJHMPJH@NUP_DIJ'],
+            ['@@VHšpVBHQmMuaSLUC'],
+            ['@@RBHSQCGV'],
+            ['@@LfNFPXQBHXAPX@\\LRNBTTPTFD^OPHLRExNFT\\OCQdINQWGEKJOEU[GyHSHmWJGSKU_B[NCLUGWGGsBQHW@'],
+            ['@@hZHQMKUAKF'],
+            ['@@PP^QCM[NMB'],
+            ['@@\\NPABWOA]N'],
+            ['@@tdJZLHERHhRLPbXTBRNX`jEZNJIPBLeXOBCX[P@N\\fLFJVXUbOP@UgR_GKdiLGZYlarY°M„BLCRHbW`OjEbBŽHlH†TvZf\\Pd`TlLjTJLZBl@^LxEjLtdlfvxTVCLJ^VBQTZ@\\P`@@JVDJT`RPTb\\^h\\VNTbF^THBZUl@fLVDXVGPbAdFffIPOFGPBTNXJ`SLSISNNR^EFOXRVH`Er\\VGAK€UZQFYWcLMRfTBFQQO\\IdDXONJKLNTrDBWJYXJJMN@TKbHHCCWWEGK^CRBHOGEVWDWAcRFhfDTMDnP`@RINHGXZBHIAMb[OSDOP@NJTAFMGMFQGSYOUTUeNGKQMGHSESemNEZHFVXPPDbGMQKYNEVLTIFPVL`BJOVMhGZHRSWUeJSLGNSDUWWCKM@MVS]cUQNWYGKJaEIPsKOQJObJLEpNdQNQVEJLRBXZ€@EKsqP@ZIJUZNB_FQTEVRLCRYlEPKQKYBIHSC@MIMPGDOSAQMCMDY`aPGJM^EFGQURSKKFWNS`KX]@sMMAYBQTY@[LOZSN@ZUJu`QHB\\QAWMmSaYu]YUY@eMOBMYWY@iW‰}W]OISagiIQQwLEOHaLYRIDORYAS~uBIbSNCjSJG@YMG@SkwK_@aYaBQE[BW\\[PHPOAOU@SIU[CaBaLUJCFSUQU}IyA_FGJiEmHOMK@IQCCMHSG_OEIYJ_BgJcCSDUCQKQBWOEGMKmC_JMNAASHkMWHIGMMGq¡McG{F[HObWZICMSFQAUMckYqGi@SI]DUZIDOQMC_IWMQMBeIY]JGYQMPJ^KLeJoOMFOIY@@L{\\Y@FTSFAJWLQR[DW^SFUPYBKNcDOCUJ_AUTWD]AeKcQQOIURISOOJIE_\\QTYPeKSKOCUKokUWW_E_IKNgCKDYHA^gTMGcIEUeDGGSFKOGGQMDUGDOQEe_saKM[MSOU[WOYG]SWSWACHWBOZ_@@RYMSFMNJNiL]P_LGJi_WCYQSCEUIEUHKUJGJ[OEOHAZNRIHWAQG]DCPR\\NJGPLTEPQ\\MH_KEVYTA\\ORDZNHFNCRS\\]A_RDJeHyAUBANV`WVGbILQFcGKLEPLPAdqdQEI^@RqT@JOJA^dZbZVV\\JXpCVO^SLFPIJeDMVEXUPXvH@XVRfCb[J]TFN@RJNNFZZx€bvBZT^ARP\\K^YLCbFJG\\RZ[NRlD\\QDF`GDFRIfLFDPLBXWFS`cLO@MREhivFTCDPGLWFOKK@K\\KFYACRLFTXQNnlXnP†FlG\\YLLNM\\UVkN‘GFGSIc_a\\aPSF@`DlB`Qpdh@VFRMTw@@VhNZI^FPNTG^LbZ^\\BXIHJRM`WVYlDjEVTbMTJdbš@^QHSVDTWVaDGP[NYC]HSBHPIHETPDBVJdNRC|EPUdBNIJKpqZWEBRKJARYjIbFXW\\MLCAM]DS_qBYCMRNJLXPDBLS\\WHOCBSKAEO]KJIQKD_QHIRIfDPIdFHbDCJlFRfJb@NPNUNMAYHBNMPYJMVeP'],
+            ['@@DLVPVBBYCISCYJ'],
+            ['@@BTHL^@PQCMUO]P'],
+            ['@@NBJZJHANFXRC@llME‹[U@M\\HFGUG[FCPKDOUQP'],
+            ['@@NPRCDRRP^JBRPHFQRWGiPSgEIFWKWB_NCR']],
+          'encodeOffsets': [
+            [[9944, 41851]],
+            [[8550, 40018]],
+            [[8417, 40088]],
+            [[9905, 41874]],
+            [[8409, 41963]],
+            [[8406, 41974]],
+            [[9586, 42286]],
+            [[9558, 42293]],
+            [[9559, 42274]],
+            [[8326, 41711]],
+            [[9623, 42181]],
+            [[9557, 42227]],
+            [[9660, 42178]],
+            [[9600, 42217]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Sicily' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@TPT@fGP@ŠEJHNGV@NcJGCMiDMNQKIJgJCJ[B_HQA[L'],
+            ['@@ZNd@JecCSDOX'],
+            ['@@PTXAdTLKFWTETFZIZQRGGUWEc^_AIFkI[FGTML'],
+            ['@@XBjEJW`gDOOCiJSJBHYxID'],
+            ['@@FL^Z@LNHPKQMbYRCZSDWJKCMSGSBm\\WHM`KF'],
+            ['@@DPfFDOPOUUSDS\\'],
+            ['@@hPEOLcEKF_KOMnAXQZ'],
+            ['@@DTPNfNnKDMnMTLj_LM`UF]A_OY]OEIeCgFSNUjMHOAEXQTeZDPCL'],
+            ['@@\\TFChLPZEhPDZxIJSHWnPNLV`fThI\\BNXRFXERVNjbNPVNHXdNTIVFJGxN^NHN`TIHAT^LRCNMVATHjdEHXRk‚DTRNPU„DHOIM@OLMNBV_E]DUZYFSXOT[dUNBHM\\DD[PQP@PIfBˆNlLzV„`RN\\Dt`KX@TIV_bZNf\\DNERNRbR`@lOLFZC@W\\G`B|PbPV\\XF^GFJd\\RJ^FJSPEGQLK^KXBNSB[R_IODOSEfonUXCZB\\G€FdH^LFXlQVkEONKQMJUbURQhK`Ol]^C`UXGVDzKLW\\E`@HIbB’JtNT@‚T|Vf^R\\APHPGT@rJRNTAPQZIVOtBfKhFhRrOVDdIX@bIh@LCdH`IxBrTZBPGbBlNzbZBVMvAŒP^D\\LdXpAPB€\\ZE\\RTPVHbZ¼¸P@jQ`C”T^D^L\\CdJXV^T\\QZIRSd_RE`BfE‚FJMPC@UZIHIZCjFv^lJ`P\\R^^`\\V`VpL`IRHbVYFSGYKMBYjKnAfDlLjDvRtLjTJ@pT€nLD†npH\\GfYnKXGZE\\B`GUKwK}UGQOGQg@QGIAUJCCSUSIOY]S[EUKMWsKMEOWSOYWOa_ISYWmm³½EYYMUYe_OYNKSSO@[YEMPKUKOS_YK[BSZeIUUaMgFQ]aUOFMISBiHUAOSIKYUCM[WG_UBKgeIOAOKQD‡JCUBBcLqNWLDxGRQbUPJpUJVTENYrgJWPEBOSCONQDQKEPSBQSO@JUYYDYHSZUA]LURGVDRNHE]KEMB]l]`ERI^HXCJMFkYWUEMMBSP[RCTRbIP]\\]AKkDSXK@]SKDSIGYKamAaSKFOIEK_QSSGQIIUEIKUkK]ISUMOQM]FkESQEEKBiLMBUX]P]AgLYNGJOC[QA[FQYoWUR]HG`QVqZeBSIcIaBqdkZ_L}BaG]KEIgA[Q]EMPeAMPYDKEgFKEiL@F]`oVSROHS@sNGH]DUFeDaCYLo@_^]`GP_šIHGZUPOdQPWh[dotŠohy^ONoRW@WN—dqL[BsNwJ[BGFyA—[YH[GcHgVSFGRUXgVSD@uJ]TMRcFGHUF[TiNK`cfSJMAUV]ZeJ@JWX]PcDSG[N_E_A[P_CMN_JAJQNUZKHWBMNWPO@UR}LY^aXUDSEK`YhSPKBU^QVSLWBKV]TML]JUB[IUJiJoFgA_Oo@CT]lW\\eZ[Z[LuJ[GIF…L]AwB™C[CMME“QU@YNIRMBuˆQnMN_RWBWT[FYCKGcHAHUPMDKXQH[\\HNGTB\\CZSVIZYdUHOT'],
+            ['@@N`BVNL\\JJEb@ZFFYCUDS`UkCAaLOKY[F@LUZ]Dc^CP'],
+            ['@@N^PFPE@QEKcICJ'],
+            ['@@RTfTjMKWmWaHEN'],
+            ['@@FJPF`ZNBnMAKSSIYSIMB]NQV'],
+            ['@@LR`DJECYGMWAKFET'],
+            ['@@TfZD^@\\GlHJEAUHMOYHY]EODeVG@oPOP'],
+            ['@@PR^C`IJo[FYA[ZEN']],
+          'encodeOffsets': [
+            [[12818, 36374]],
+            [[13157, 36730]],
+            [[12566, 38846]],
+            [[12317, 38904]],
+            [[15295, 39326]],
+            [[12616, 38913]],
+            [[12728, 38802]],
+            [[12213, 37700]],
+            [[12723, 38710]],
+            [[15256, 39410]],
+            [[15416, 39557]],
+            [[13467, 39630]],
+            [[15552, 39722]],
+            [[14684, 39469]],
+            [[15151, 39489]],
+            [[14889, 39504]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Trentino-Alto Adige - Südtirol' },
+        'geometry': {
+          'type': 'Polygon',
+          'coordinates': ['@@™Wys[CUFEMTOBIiIQ@qRiDDKQGsEgNEJYKKM}MOUWCJVE\\WASZWHaGKRWF_PGLsRYPB]IMPUKEEaWIAQMCHMCaUMUeG@ioYToA]IGSYC_JaEYM‡IqQKOMAK_FMXEdDHCzCXODU]icBQEQcJGMWIYFacLGKiCeSRQfIDWzOD[LGQYGSX]fBvPJIC_ROTLdQUq^ODMVSp@@U]SFQ_LagEOSYQKGQ‹OK@‡Q‡AIB_QOTƒC_YOHSAE]P_NCPOEQsASKNQPC[ULCJWX[KICOHMWImB_GKPWDGGaJUESŒ[BSJWDqIcDWGKQ]A]YMG{@ODQEoHIUHYLOASoBFSEQYGLO[@IHWDQPUAKKWGQF[ECYUILOgWTEIikWBWaKIOQMHaRUWEaJN[@UI[HUaYaOOOMcOHk@OGcXG@YVMDWSsAANeKBSOKgQJ\\M@MUW@IUOAaNQPNZ‹bQCuFEDN`ZPDdVRPDDLQV@^VNGN{VYL]H‡G]RWASUGN]JS@aKWJaQ{AHQWgQFk@[EeSCGeKW@cJEPP^NLONYH_GKNHpIZFP[TbjHVGT_P@RQRNXAN‡N@^HJ@\\^XXBDPA`OLffZHRNHPj^P^BjGHPNBNVVW\\YRLNFTVNTZENd\\QraZJN^RGPWPDZePsRK@HZfCJJ@NRD^T‚@RD@NfZCRQlHLERJHg^ALeHmTSVa@KFDWCGJ_TIjNTZFAJNRETZnE`NNSPwdYDmASEQDAROR@bOXRLTbXDHNU^OHŠhPPCXOTUJLTfJT`FPGLRJCLRPELtCHKnC€JFU`FPLXFJLTBlNxDRPRGfENIGSZKX@JS^EhCNWWKOWaIFSrGpLRLTKd_XCNPPBZO^CBKnCJLTCZNTC^D~EZGVAdJNKVbLXNNIHjP`PN@K^IjLFJThlIFDRGLDL\\LAPLHpG`N\\VKLD^TEZN`ALIZLj@^JPNNApL`AVPhOLLZ@bUNSTATG`BtVFPRP`F@NRRdCbIFIbOLO^NR@hNPPT@TLfDPStQHErHVEXBZ[HOfEdHPXXPLE^DXCjHRPNAPNjRZ@DHjZ`J`GTTXEVT”EVJZR„CFPjXfKfP^A†ZVG~KVYAIiK@[WeEQIcLOKYKIMHGJ]PIAaIGLKhKVY_kNOTBPEZATSEE^_lHFP€CVOEK^MBUJYXCAOcYKKTYWYHMrDxKLE`AFYLQFYLODUNKtUHI\\CBG^MFD~GDK'],
+          'encodeOffsets': [[12778, 47801]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Tuscany' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@HJ\\HMYRIMIY\\'],
+            ['@@JDARLL`BNMNCAOJSIIiKQDMJCZ'],
+            ['@@LFJ|nbTY\\]MceUW[SNS\\'],
+            ['@@JVbACUUGQJ'],
+            ['@@NLVMXDhELNLAPQ@[mE_S]DAJ[ZJNKJ'],
+            ['@@DL@bp^VJŠCXJ\\ILB\\[ZIbDAR\\APJITNBNRTBLIlDVMYOnOTCXFHfLANTddAJNRNFBNNJTK@M\\GRSYkEQDSNMKIHYAM]AGKcEUM^APMBKXCVUDWEOYIKP]C_BONQjSVBLYLkCICNeOIMnW@QKA]_CyXQACQLIMMgFULMAiB]GMDaCaTMTALWR'],
+            ['@@VNVERLNVVQLcOSWF{HIR'],
+            ['@@JJX@A\\LPPITA`mNGGYRIC[OKeN_dIN]DET'],
+            ['@@€d^GVB@RXFCTVNddTXh\\J@F^^FVAfFjCbFRGZH”IPEBYTMbDTaIOW[LWr[ZEXMdKFGtULKRHzHZC^OBQxkLB^[VDRKN]d[bH^PVHXATQvMXFjGtcLAL[dQNAXHRCNFLKXCVMQWJOjS^[IMNUnQJI^IXQFOTK€J@^EJTLHPPNJGVBTGXH\\B`EˆD`KLS`U\\EPObOVLTORWdFRAbOXODMMYfCV\\`HXT^hCHVTbNGJ`FNA@YSECUj[vC@ItD^EJL\\JhT‚FVInEjK^F\\ITNX@EXS@SPYJO@KLeP@TfC`JJHŒBRGJNZJEJbBTTFXfVNC\\@bGNLP^fZZDt[FSQSNO\\ALSTDPI@K\\WNDXQPD^IPL@NVDTMdDZKXBFY[MAW]CGONEPJZBzORYxbFNrEbBrLRKIaQIEUwkY]CaSOEMWB[IJM@MQGMSR]P@bYTEHKU_^SL@bMMSFOMaDSVEVUtMDCtOXYREZUAG‚OJLbDLMhC\\JJICQLKZ@dEJ]hM\\MhH\\KRBJGh@PGFS\\EVNVBRJdGnL`NT]XKTSJL@RRFBPXAPFhOPRLAlLfS^@TG\\_`[^UAIYIMLg@AMJYC[_HJ`MNAhIPOOHKA[IYuWaLO]i]aEW@[UHK\\MPODOSIOMCUQGIQc]IYFEOYUFmGUB[SGW@OLIZEROZI\\ECS[BKGgMGYYSSGiHUUYEQQN]jEfNNEGSAkLK`DLJhOZ_JiAUWUNW\\O\\ALEZAPXCPTTRCLIdQWIGOoQUAWK_YMCgFWKOQaG[P]FQJ]KP_MUDGMYCWQO[GaDcYqOcQIIIaMEPUDWFCLYQSDMPMHYX@DRNJ`ITYS_@[MWUICA]F[YYBMMiJKRBTEDQAYBQ_B[C]emOFQ‹BYA[OcGBOGM@QaNOTcH@I_YOa\\E`]PAEQ|ITOGQKEIgMO]AAQJOEOBUbCPWGUcMMIoJOCDWQSOGoAWSgKLScSWD[WS@OFWWKR[HYCBkgkCSNKLD\\M@QnENIFWKYJKEIHYeGŸFSFyQaLU@OIB[KOgUMOJKKS‰T{NN™LSEUJANWFsAyOIEHicKWcMJWAWMATq`UHMASJUVFVGHbzNAVWTHJGhA^RVdJXHb@vYrkpcCKOaZUdFHSdOBSTNDEReV•^UJ[nOhYdUTiZePqR­ZJwHOC™rBNXBVTP^FXC^ID@R`dBJYfgZ‹`gN‡N‘F™A_ESWKGE]kDWVUF[l@\\DLIXXLTIXVKLBLVNR~NœDAŠI„MˆIZ_†ILsj[PMT@^MVMJAVS\\MbaNOTBP[TIXm`aFYTBTONOxMHMVGZHBCVIXLHCRMXItA`GfYpTJFVKtDHEZFDcÎKd_~@bYfivkrx~udm\\sPIAaT\\lFCxdRZ[`{RU@aWO]UPVLBVWPGbItMHMEqBOCMHoMKHXVbVLVW@MR_AgYMWOTNTPpYZDZINCVcT]HMJQGm\\gVENORUH[DWvUViA']],
+          'encodeOffsets': [
+            [[11358, 43267]],
+            [[10536, 43350]],
+            [[10027, 44056]],
+            [[10126, 44468]],
+            [[12462, 44857]],
+            [[10345, 43793]],
+            [[10287, 43606]],
+            [[11126, 43380]],
+            [[9920, 45431]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Umbria' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@XcZFNGfEHHx@JOPJLXX@LJhBNRXMMO@MLODOmkEIq@MSRIT[^GjZjYGGJMNAX`^XJEXJJORILUPHRCNVhMbWJSXW^Y^]ra`Ih_PANRZB\\J^EJInGNRFXbb^DVKTBTQUIHOIS`YKYWKUAKKNIGMRK@OZIDSRQZMHQHgE_QQl[ZCLKGMDeLIDY\\OZDLaGQCgKGKSgK@MNMJUdFXAVKDeVWAUIeDW^WEUK@S_hqMQIW\\KhKJM`O@OhCPCOm@ULMCQFOZ@N`JHA`xEXNHLXL^]XK€UT_d_JSVYLGhJPCZNX@RRTHJZXaD[PcNQIWOOMaBKQCENaAQO[CH]SSBGCMHa[_GMJGGac[YM[\\]GDK_WoM]OKAkJKTODOM@UUKe@FaEKWYBoV_OCQLGFQNSA[SA‡SKMkU_@GEOHUk@CEmAaQR]l_QCOOm@QUiOOA_D@HON@TKL]ACaOaFk]Ws]IGiAaYCIWFKXCpgKUNOCOMMRB\\PJGN[KWF_IQNLLOZLXNCFR]D@X`PcXqCBOWEAGoOKViTOKcAPTSTQFSGGdQZP@JXGXY@QNUFANKNTZ@PaN^dcNBPWNUV]B[VWJ_SAOMEYBEOOBSTMDMMiBgM]ASKGPeX{Z‹PPZaJKHNVVHJPVDRLL^PFEXYFcVcBMNOnQREVSNERnP^f\\D`AARBZCRSFQAILNjANZZE\\B^JDV€NX@\\T`SZ_JMICQW@GZONCNRTKZEDCXOVNFJbJJdRrPdZbC\\HRPDXNZCHNVO`^LRI^E\\ObHPRXLhEND`ZXLVBpRHPXJcRKJQDSSDOOWYBKF[B[PMXXVBVIjY`gPKI_CKLBlHTMFeMiFM^RRZFVVjGTHZTHZhNLH\\ADT[FYJQPYFKJ@PHX\\TVAnHVEPZEFJZd^JRRHDVPNTJ'],
+            ['@@`PXUCMOAILYJ']],
+          'encodeOffsets': [[[12507, 44658]], [[12706, 44649]]],
+        },
+      },
+      {
+        'type': 'Feature',
+        'properties': { 'name': 'Veneto' },
+        'geometry': {
+          'type': 'MultiPolygon',
+          'coordinates': [
+            ['@@UOOZQLBZ^C^]EM'],
+            ['@@ZK|UHMUM@]RUCKOCUQCcYOM_FCvERDŒaMYRObMPBJVX@NVN@I[hRPLATfLBMtBXTNCZUH@dWPHl@PGNdPPbPbZGVJ\\@VM\\bIXFQVGbRNJPbLAXlXJjSFhXKPVJDZ\\FREXHLLVBROXCJG\\@KPZHFRETpABTKPGZJVpGRFPC|@NH^Z^BLRXHdCrJXCTI\\AT‹VFbIHHXCLO`HnAXJGNDPLJW\\IXKD\\VODMRTLtBFROPMDO`F^TBPG`Z„DPS`RJAˆBˆRL@ŒPHRRLTZFPbh`KER^T@Vo@UTCN]PVrcRSKQPD`IJuOeAW^HTRZKHC\\yPCXeJQRfTjDHLdKEbJZNXIHRdRFdA^jCVWPyDGDcCWFENL`NBLPrRˆJZNbF`IZDHT^JpBZSjpH@VfVNDbGNNDBRXJFbLFOVJNA^ZOtQHK`OXELQbHXGTYXBF[IUXDPV~NLNZLFIhMtFRHCLjCrQR@jJAJSPFNVE\\DztšXZGVHxMh]XKTANJxA\\L\\@VS`L„ARIbEJMVOGGHKIGDUZ[GMHYSKHGESVScQQNuM_YK@[@UpaRaYCMLeFmS_PcDw_UJGOFO_C[UOYFU]QY[WIN_]QKA]OQDDUUYuCKFQKaMHMIIDU]USCO]F[PCFUXGPOVCVK\\JXBPMOUHGvDZCCUJQAOTS`KpWFaI]ScWO{YKBOOOWUKIaIA^]FgTWC_@YEWFOPETFlMEMjQb@NEFYRSQEXSXIDi^AR[IOHSLEfCPSRPGRZHRKbAAObAHgfS\\V`PJPPH^\\JDVSbZNP^P\\SV@IYBQLGXJ@RTDRLCLtHbOOS\\ObEPLPGLNR[jHBlTHPW@KTU^GCI[HGONK@OH_PA`_OU^O@MKCCMlV@WXKAk\\ISQVMT@FOIIDQ`H@KZINIMOIw@»MµYIFsceQ}Uƒ[Ÿo‹]qKáu‡_{OsQ¡Y]KcQeaYR[FeYmiaqQYIS@WZEMOUDGM]Q‹DO\\GQIIYRsTO^eK{BYTySNeFLVQ@EYSOFKIOZK`BRIBSRBLI^@RUPGFMg[dU`FP\\RDDLqˆe^CVDx_XCHWg[mgw¯GS[eWQk\\P^A|]JsWJG]OEWTGPSWiVWVANIGQeYgRu`M\\EbKJ‹H[\\CTBbG\\VXDNYZkDIO_@YW_FgAYNIPOBOKaM[HAPSJG^]FGROGWLOGS@ONƒ@YJkHeD‰W_@YFmG¡BsDk[…IQQHWGQUEY@sQkEƒeMKUCiBSTAPUVaFcZYHq@eBoC‡OEJFbBNOR[HQ@SHZoT_bOHwBKXMDP\\GTO@eQUDkX]DgC@`\\N@HWF@RpVsR[F[NMCG[OMWB_RKKFYeJK@kVQD[V@J^N@PNPGFUE[LWM_BHRMpJFMTqXkA]XBPJN…JMV]AAHWFkDMTBNobMPwfyOJJ\\CTeNBXWNQAMHCTfJVRSFMTRDBJTTDPM\\}N]BWGCMSHNLKNEXcK@Lf@HPGJIÂOvAœCb„zº´¤°˜®lbP`']],
+          'encodeOffsets': [[[12652, 46148]], [[11102, 46934]]],
+        },
+      }],
+    'UTF8Encoding': true,
+  })
+}))

src/components/CChartMap/data/bar.js

@@ -0,0 +1,45 @@
+function random() {
+  return Math.round(300 + Math.random() * 700) / 10;
+}
+
+export default function getData() {
+  return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+    },
+    dataset: {
+      dimensions: ["Product", "2015", "2016", "2017"],
+      source: [
+        {
+          Product: "Matcha Latte",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Milk Tea",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Cheese Cocoa",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Walnut Brownie",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        }
+      ]
+    },
+    xAxis: { type: "category" },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
+  };
+}

src/components/CChartMap/data/connect.js

@@ -0,0 +1,105 @@
+const data1 = [];
+const symbolCount = 6;
+for (let i = 0; i < 16; i++) {
+  data1.push([
+    Math.random() * 5,
+    Math.random() * 4,
+    Math.random() * 12,
+    Math.round(Math.random() * (symbolCount - 1))
+  ]);
+}
+
+export const c1 = {
+  legend: {
+    top: 20,
+    data: ["scatter"]
+  },
+  tooltip: {
+    formatter: "{c}"
+  },
+  grid: {
+    top: "26%",
+    bottom: "26%"
+  },
+  xAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  visualMap: [
+    {
+      realtime: false,
+      left: "right",
+      selectedMode: "multiple",
+      dimension: 2,
+      selected: [],
+      min: 0,
+      max: 18,
+      precision: 0,
+      splitNumber: 0,
+      calculable: true
+    }
+  ],
+  series: [
+    {
+      name: "scatter",
+      type: "scatter",
+      symbolSize: 30,
+      data: data1
+    }
+  ]
+};
+
+export const c2 = {
+  legend: {
+    top: 20,
+    data: ["scatter"]
+  },
+  tooltip: {
+    formatter: "{c}"
+  },
+  grid: {
+    top: "26%",
+    bottom: "26%"
+  },
+  xAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  visualMap: [
+    {
+      left: "right",
+      selectedMode: "multiple",
+      dimension: 2,
+      selected: [],
+      min: 0,
+      max: 18,
+      precision: 0,
+      splitNumber: 0,
+      calculable: true
+    }
+  ],
+  series: [
+    {
+      name: "scatter",
+      type: "scatter",
+      symbolSize: 30,
+      data: data1
+    }
+  ]
+};

src/components/CChartMap/data/italia.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[7.5311279296875,43.78695837311561],[8.3935546875,43.08493742707592],[7.8662109375,42.27730877423709],[7.734374999999999,39.16414104768742],[12.41455078125,37.63163475580643],[14.501953124999998,36.79169061907076],[15.27099609375,37.31775185163688],[15.556640624999998,38.06539235133249],[16.2158203125,37.96152331396614],[17.07275390625,38.75408327579141],[16.50146484375,39.70718665682654],[16.8310546875,40.29628651711716],[18.720703125,39.554883059924016],[18.984375,39.977120098439634],[17.55615234375,41.04621681452063],[14.52392578125,41.983994270935625],[13.0078125,43.67581809328341],[12.3046875,44.38669150215206],[12.32666015625,44.96479793033101],[12.37060546875,45.413876460821086],[13.7548828125,45.644768217751924],[13.77685546875,46.118941506107056],[11.2060546875,46.28622391806706],[9.228515625,46.164614496897094],[7.00927734375,46.042735653846506],[6.734619140625,45.023067895446175],[6.96533203125,44.77793589631623],[6.9927978515625,44.268804788566165],[7.3773193359375,44.1151978766043],[7.673950195312499,44.18614312298759],[7.690429687499999,44.134913443750726],[7.706909179687499,44.07574700247845],[7.673950195312499,44.000717834282774],[7.569580078124999,43.949327348785225],[7.4871826171875,43.854335770789575],[7.5311279296875,43.78695837311561]]]}}]}

src/components/CChartMap/data/logo.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import logo from '../assets/Vue-ECharts.svg'
+/* eslint-enable */
+
+const d = logo.match(/\bd="([^"]+)"/)[1];
+
+export default {
+  series: [
+    {
+      type: "liquidFill",
+      data: [0.7, 0.6, 0.55, 0.45],
+      amplitude: 6,
+      outline: {
+        show: false
+      },
+      radius: "60%",
+      color: ["#4fc08d", "#44d64a", "#33c762", "#4acc80"],
+      backgroundStyle: {
+        color: "#fff",
+        borderColor: "#2c3e50",
+        borderWidth: 1
+      },
+      shape: `path://${d}`,
+      label: {
+        normal: {
+          formatter() {
+            return "";
+          }
+        }
+      }
+    }
+  ]
+};

src/components/CChartMap/data/pie.js

@@ -0,0 +1,40 @@
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
+};

src/components/CChartMap/data/polar.js

@@ -0,0 +1,45 @@
+const data = [];
+
+for (let i = 0; i <= 360; i++) {
+  const t = (i / 180) * Math.PI;
+  const r = Math.sin(2 * t) * Math.cos(2 * t);
+  data.push([r, i]);
+}
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Dual Numeric Axis"
+  },
+  legend: {
+    data: ["line"]
+  },
+  polar: {
+    center: ["50%", "54%"]
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross"
+    }
+  },
+  angleAxis: {
+    type: "value",
+    startAngle: 0
+  },
+  radiusAxis: {
+    min: 0
+  },
+  series: [
+    {
+      coordinateSystem: "polar",
+      name: "line",
+      type: "line",
+      showSymbol: false,
+      data: data
+    }
+  ],
+  animationDuration: 2000
+};

src/components/CChartMap/data/scatter.js

@@ -0,0 +1,140 @@
+import { graphic } from "echarts/core";
+
+const data = [
+  [
+    [28604, 77, 17096869, "Australia", 1990],
+    [31163, 77.4, 27662440, "Canada", 1990],
+    [1516, 68, 1154605773, "China", 1990],
+    [13670, 74.7, 10582082, "Cuba", 1990],
+    [28599, 75, 4986705, "Finland", 1990],
+    [29476, 77.1, 56943299, "France", 1990],
+    [31476, 75.4, 78958237, "Germany", 1990],
+    [28666, 78.1, 254830, "Iceland", 1990],
+    [1777, 57.7, 870601776, "India", 1990],
+    [29550, 79.1, 122249285, "Japan", 1990],
+    [2076, 67.9, 20194354, "North Korea", 1990],
+    [12087, 72, 42972254, "South Korea", 1990],
+    [24021, 75.4, 3397534, "New Zealand", 1990],
+    [43296, 76.8, 4240375, "Norway", 1990],
+    [10088, 70.8, 38195258, "Poland", 1990],
+    [19349, 69.6, 147568552, "Russia", 1990],
+    [10670, 67.3, 53994605, "Turkey", 1990],
+    [26424, 75.7, 57110117, "United Kingdom", 1990],
+    [37062, 75.4, 252847810, "United States", 1990]
+  ],
+  [
+    [44056, 81.8, 23968973, "Australia", 2015],
+    [43294, 81.7, 35939927, "Canada", 2015],
+    [13334, 76.9, 1376048943, "China", 2015],
+    [21291, 78.5, 11389562, "Cuba", 2015],
+    [38923, 80.8, 5503457, "Finland", 2015],
+    [37599, 81.9, 64395345, "France", 2015],
+    [44053, 81.1, 80688545, "Germany", 2015],
+    [42182, 82.8, 329425, "Iceland", 2015],
+    [5903, 66.8, 1311050527, "India", 2015],
+    [36162, 83.5, 126573481, "Japan", 2015],
+    [1390, 71.4, 25155317, "North Korea", 2015],
+    [34644, 80.7, 50293439, "South Korea", 2015],
+    [34186, 80.6, 4528526, "New Zealand", 2015],
+    [64304, 81.6, 5210967, "Norway", 2015],
+    [24787, 77.3, 38611794, "Poland", 2015],
+    [23038, 73.13, 143456918, "Russia", 2015],
+    [19360, 76.5, 78665830, "Turkey", 2015],
+    [38225, 81.4, 64715810, "United Kingdom", 2015],
+    [53354, 79.1, 321773631, "United States", 2015]
+  ]
+];
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Life Expectancy vs. GDP by country"
+  },
+  legend: {
+    right: 10,
+    data: ["1990", "2015"]
+  },
+  xAxis: {
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
+  yAxis: {
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    },
+    scale: true
+  },
+  series: [
+    {
+      name: "1990",
+      data: data[0],
+      type: "scatter",
+      symbolSize(data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data }) {
+            return data[3];
+          },
+          position: "top"
+        }
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(120, 36, 50, 0.5)",
+        shadowOffsetY: 5,
+        color: new graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: "rgb(251, 118, 123)"
+          },
+          {
+            offset: 1,
+            color: "rgb(204, 46, 72)"
+          }
+        ])
+      }
+    },
+    {
+      name: "2015",
+      data: data[1],
+      type: "scatter",
+      symbolSize(data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data }) {
+            return data[3];
+          },
+          position: "top"
+        }
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(25, 100, 150, 0.5)",
+        shadowOffsetY: 5,
+        color: new graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: "rgb(129, 227, 238)"
+          },
+          {
+            offset: 1,
+            color: "rgb(25, 183, 207)"
+          }
+        ])
+      }
+    }
+  ]
+};

src/components/CChartMap/index.ts

@@ -0,0 +1 @@
+export {default as CChartMap} from './CChartMap.vue'

src/components/CChartMap/theme.json

@@ -0,0 +1,394 @@
+{
+  "color": ["#4ea397", "#22c3aa", "#7bd9a5"],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#666666"
+    },
+    "subtextStyle": {
+      "color": "#999999"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": "0",
+      "barBorderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "barBorderWidth": "0",
+        "barBorderColor": "#444444"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#d0648a",
+      "color0": "#ffffff",
+      "borderColor": "#d0648a",
+      "borderColor0": "#22c3aa",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "lineStyle": {
+      "width": 1,
+      "color": "#aaa"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": ["#4ea397", "#22c3aa", "#7bd9a5"],
+    "label": {
+      "color": "#ffffff"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#eeeeee",
+      "borderColor": "#999999",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(34,195,170,0.25)",
+        "borderColor": "#22c3aa",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "rgb(52,158,142)"
+      }
+    },
+    "label": {
+      "color": "#28544e"
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#eeeeee",
+      "borderColor": "#999999",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(34,195,170,0.25)",
+        "borderColor": "#22c3aa",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "rgb(52,158,142)"
+      }
+    },
+    "label": {
+      "color": "#28544e"
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#aaaaaa"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#999999"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#349e8e",
+      "width": 1
+    },
+    "itemStyle": {
+      "color": "#349e8e",
+      "borderWidth": "1"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#57e8d2"
+      }
+    },
+    "controlStyle": {
+      "color": "#349e8e",
+      "borderColor": "#349e8e",
+      "borderWidth": "0"
+    },
+    "checkpointStyle": {
+      "color": "#22c3aa",
+      "borderColor": "rgba(34,195,170,0.25)"
+    },
+    "label": {
+      "color": "#349e8e"
+    }
+  },
+  "visualMap": {
+    "color": ["#d0648a", "#22c3aa", "rgba(123,217,165,0.2)"]
+  },
+  "dataZoom": {
+    "backgroundColor": "#fff",
+    "dataBackgroundColor": "#dedede",
+    "fillerColor": "rgba(34,195,170,0.25)",
+    "handleColor": "#dddddd",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#999"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#ffffff",
+      "emphasis": {
+        "textStyle": {
+          "color": "#ffffff"
+        }
+      }
+    }
+  }
+}

src/components/CGallery/CGallery.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref, PropType, watch } from 'vue'
+import { defineComponent, ref, PropType, watch, onMounted } from 'vue'
 import { useI18n } from '@src/boot/i18n'
 import { useUserStore } from '@store/UserStore'
 import { useQuasar } from 'quasar'
@@ -14,15 +14,17 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
-    gall: {
-      type: Object as PropType<IGallery>,
+    title: String,
+    directory: {
+      type: String,
       required: true,
     },
-    listimages: {
-      type: Object as PropType<IImgGallery[] | null>,
+    imgGall: {
+      type: Object as PropType<IImgGallery | string | undefined>,
       required: true,
     },
   },
+  emits: ['showandsave'],
   components: { CMyPage },
   setup(props, { emit }) {
     const $q = useQuasar()
@@ -30,27 +32,55 @@ export default defineComponent({
     const userStore = useUserStore()
     const globalStore = useGlobalStore()
 
-    const mygall = ref(<IGallery>{})
-    const mylistimages = ref(<IImgGallery[] | null>[])
+    const displayGall = ref(false)
 
-    watch(() => props.gall, (newval, oldval) => {
-      mygall.value = props.gall
-    })
+    const gallerylist = ref(<IImgGallery[]>[])
+    const maximizedToggle = ref(true)
 
-    watch(() => props.listimages, (newval, oldval) => {
-      if (props.listimages) {
-        mylistimages.value = props.listimages
+
+    function isValid(myobj: any): boolean {
+      return (myobj && typeof myobj !== 'string' && typeof myobj !== 'undefined')
+    }
+
+    watch(() => props.imgGall, (newval, oldval) => {
+      if (isValid(props.imgGall)) {
+        // @ts-ignore
+        gallerylist.value = props.imgGall
       }
     })
 
     function created() {
-      mygall.value = props.gall
-      mylistimages.value = props.listimages
+      console.log('created cgallery')
+      if (isValid(props.imgGall)) {
+        // @ts-ignore
+        gallerylist.value = props.imgGall
+      } else {
+        gallerylist.value = [
+            {
+              _id: '',
+              imagefile: 'noimg.png',
+              order: 0,
+              alt: '',
+              description: '(nessuna foto)'
+            }]
+      }
+    }
+
+    function showandsave(value: any) {
+      console.log('EMIT: showandsave')
+      emit('showandsave', value)
+    }
+
+    function getnumimages() {
+      if (gallerylist.value && gallerylist.value)
+        return gallerylist.value.length
+      else
+        return 0
     }
 
     function getlistimages() {
-      if (mylistimages.value)
-        return mylistimages.value.slice().sort((a, b) => a.order! - b.order!)
+      if (gallerylist.value && gallerylist.value)
+        return gallerylist.value.slice().sort((a: any, b: any) => a.order! - b.order!)
       else
         return null
     }
@@ -85,7 +115,7 @@ export default defineComponent({
         return
       }
 
-      if (mylistimages.value) {
+      if (gallerylist.value) {
 
         const draggedId = e.dataTransfer.getData('text')
         let dragout = ''
@@ -104,13 +134,13 @@ export default defineComponent({
           return
         }
 
-        const myindex = mylistimages.value.findIndex((rec) => rec._id === draggedId)
-        const myrec: IImgGallery = mylistimages.value[myindex]
+        const myindex = gallerylist.value.findIndex((rec: any) => rec._id === draggedId)
+        const myrec: IImgGallery = gallerylist.value[myindex]
 
         let myrecprec: IImgGallery
         let myrecout: IImgGallery
-        const myindexout = mylistimages.value.findIndex((rec) => rec._id === dragout)
-        myrecout = mylistimages.value[myindexout]
+        const myindexout = gallerylist.value.findIndex((rec: any) => rec._id === dragout)
+        myrecout = gallerylist.value[myindexout]
         let myindexprec = myindexout - 1
 
         if (myindexprec < 0)
@@ -119,7 +149,7 @@ export default defineComponent({
         if (myindex === myindexout)
           return
 
-        myrecprec = mylistimages.value[myindexprec]
+        myrecprec = gallerylist.value[myindexprec]
 
         console.log('myrec', myrec, 'myrecprec', myrecout)
 
@@ -154,17 +184,17 @@ export default defineComponent({
     }
 
     function getclass() {
-      return (props.edit) ? 'my-card-gallery' : 'my-card-gallery-view' + ' text-center'
+      return (props.edit || displayGall.value) ? 'my-card-gallery' : 'my-card-gallery-view' + ' text-center'
     }
 
     function getclimg() {
-      return (props.edit) ? 'myimg' : 'myimg-view'
+      return (props.edit || displayGall.value) ? 'myimg' : 'myimg-view'
     }
 
     function getlastord() {
-      if (mylistimages.value) {
+      if (gallerylist.value) {
         let myord = 0
-        for (const file of mylistimages.value) {
+        for (const file of gallerylist.value) {
           if (file.order! > myord)
             myord = file.order!
         }
@@ -175,22 +205,26 @@ export default defineComponent({
 
     function uploaded(info: any) {
       console.log(info)
-      if (mylistimages.value) {
+      if (gallerylist.value) {
         for (const file of info.files) {
-          mylistimages.value.push({ imagefile: file.name, order: getlastord() })
+          gallerylist.value.push({ imagefile: file.name, order: getlastord() })
         }
 
         save()
       }
     }
 
+    function apri() {
+      displayGall.value = true
+    }
+
     function deleted(rec: any) {
       // console.table(mylistimages)
 
-      if (mylistimages.value) {
-        const index = mylistimages.value.findIndex((elem) => elem.imagefile === rec.imagefile)
+      if (gallerylist.value) {
+        const index = gallerylist.value.findIndex((elem: any) => elem.imagefile === rec.imagefile)
         if (index > -1) {
-          mylistimages.value.splice(index, 1)
+          gallerylist.value.splice(index, 1)
         }
 
         // mylistimages = mylistimages.pop((elem) => elem.imagefile !== rec.imagefile)
@@ -202,7 +236,7 @@ export default defineComponent({
     }
 
     function getfullname(rec: any) {
-      return 'upload/' + mygall.value.directory + '/' + rec.imagefile
+      return 'upload/' + props.directory + '/' + rec.imagefile
     }
 
     function copytoclipboard(rec: any) {
@@ -222,18 +256,28 @@ export default defineComponent({
     }
 
     function save() {
-      emit('showandsave', mylistimages.value)
+      emit('showandsave', gallerylist.value)
     }
 
-    function getsrcimg(mygallery: any) {
+    function getsrcimg(gallerylistery: any) {
 
-      if (tools.getextfile(mygallery.imagefile) === 'pdf')
+      if (tools.getextfile(gallerylistery.imagefile) === 'pdf')
         return 'images/images/pdf.jpg'
       else
-        return 'upload/' + mygall.value.directory + '/' + mygallery.imagefile
+        return 'upload/' + props.directory + '/' + gallerylistery.imagefile
     }
 
-    created()
+    function getParamDir() {
+      return tools.escapeslash(props.directory)
+    }
+
+    function getUrl() {
+      const myurl = tools.geturlupload() + getParamDir()
+      console.log('myurl', myurl)
+      return myurl
+    }
+
+    onMounted(created)
 
     return {
       getlistimages,
@@ -250,6 +294,13 @@ export default defineComponent({
       getsrcimg,
       tools,
       uploaded,
+      gallerylist,
+      getnumimages,
+      apri,
+      displayGall,
+      save,
+      maximizedToggle,
+      getUrl,
     }
   }
 })

src/components/CGallery/CGallery.vue

@@ -1,131 +1,209 @@
 <template>
   <!--<div class="q-pa-md items-start " style="display: inline-flex; width: 800px;"> -->
-  <div>
-    <div v-if="!edit">
-      <div v-for="(mygallery, index) in getlistimages()" :key="index">
-        <div v-if="index === 0">
-          <div class="q-pa-md q-gutter-md">
-            <q-card :class="getclass()">
-              <q-img
-                :src="getsrcimg(mygallery)" :class="getclimg()"
-                :alt="mygallery.alt">
-                <div class="absolute-bottom text-shadow">
-                  {{ listimages.length }} files
-                </div>
-              </q-img>
-            </q-card>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div v-else>
-      <div class=" row">
-        <!--<q-draggable-rows
-                v-model="order">-->
+  <div v-if="!edit">
+
+    <div class="q-pa-md q-gutter-md">
+      <q-card :class="getclass()" @click="apri">
         <div v-for="(mygallery, index) in getlistimages()" :key="index">
-          <div
-            class="q-pa-sm q-gutter-sm"
-            @dragenter="onDragEnter"
-            @dragleave="onDragLeave"
+          <div v-if="index === 0">
+            <q-img
+              :src="getsrcimg(mygallery)" :class="getclimg()"
+              :alt="mygallery.alt">
+              <div class="absolute-bottom text-shadow">
+                {{ getnumimages() }} files
+              </div>
+            </q-img>
 
-            @dragover="onDragOver">
-            <q-card
-              :id="mygallery._id" :class="getclass()"
-              draggable="true"
-              @dragstart="onDragStart"
-              @drop="onDrop"
-            >
-
-              <q-img
-                :src="getsrcimg(mygallery)"
-                :class="getclimg()"
-                :alt="mygallery.alt">
-                <div class="absolute-bottom text-shadow">
-                  <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
-                  <div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
-                </div>
-              </q-img>
-
-
-              <!--
-                            <q-input v-model="mygallery._id"
-                                     label="Id"
-                                     dense
-                                     @keyup.enter.stop
-                                     @update:model-value="save"
-                                     debounce="1000"
-                                     autofocus>
-                            </q-input>
-              -->
-              <q-field
-                stack-label
-                dense
-                label="FileName">
-                <template v-slot:control>
-                  <div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
-                </template>
-
-              </q-field>
-
-              <!--<q-input v-model="mygallery.order"
-                       :label="$t('disc.order')"
-                       dense
-                       @keyup.enter.stop
-                       @update:model-value="save"
-                       debounce="1000"
-                       autofocus>
-              </q-input>-->
-              <!--<q-input v-model="mygallery.alt"
-                       label="Alt"
-                       dense
-                       @keyup.enter.stop
-                       @update:model-value="save"
-                       debounce="1000"
-                       autofocus>
-              </q-input>-->
-
-              <q-input
-                v-model="mygallery.description"
-                dense
-                :label="$t('proj.longdescr')"
-                @keyup.enter.stop
-                @update:model-value="save"
-                debounce="1000"
-                autofocus>
-              </q-input>
-
-              <q-card-actions align="center">
-                <q-btn
-                  flat round color="blue" icon="fas fa-copy" size="sm"
-                  @click="copytoclipboard(mygallery)"></q-btn>
-                <q-btn
-                  flat round color="red" icon="fas fa-trash-alt" size="sm"
-                  @click="deleteFile(mygallery)"></q-btn>
-              </q-card-actions>
-            </q-card>
           </div>
         </div>
-        <div class="q-pa-sm">
-          <div v-if="edit" class="q-gutter-sm " style="max-height: 200px; width: 208px;">
-            <q-uploader
-              label="Aggiungi Immagine o PDF"
-              accept=".jpg, image/*, .pdf"
-              :url="tools.geturlupload()+`/` + gall.directory + '/' + tools.getvers()"
-              :headers="tools.getheaders()"
-              :max-file-size="2000000"
-              multiple
-              auto-upload
-              hide-upload-btn
-              no-thumbnails
-              @uploaded="uploaded"
-              style="width: 208px"
-            ></q-uploader>
-          </div>
-        </div>
-      </div>
-
+      </q-card>
     </div>
   </div>
+  <div v-else>
+    <div class=" row">
+      <!--<q-draggable-rows
+              v-model="order">-->
+      <div v-for="(mygallery, index) in getlistimages()" :key="index">
+        <div
+          class="q-pa-sm q-gutter-sm"
+          @dragenter="onDragEnter"
+          @dragleave="onDragLeave"
+
+          @dragover="onDragOver">
+          <q-card
+            :id="mygallery._id" :class="getclass()"
+            draggable="true"
+            @dragstart="onDragStart"
+            @drop="onDrop"
+          >
+
+            <q-img
+              :src="getsrcimg(mygallery)"
+              :class="getclimg()"
+              :alt="mygallery.alt">
+              <div class="absolute-bottom text-shadow">
+                <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
+                <div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
+              </div>
+            </q-img>
+
+
+            <q-field
+              stack-label
+              dense
+              label="FileName">
+              <template v-slot:control>
+                <div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
+              </template>
+
+            </q-field>
+
+            <q-input
+              v-model="mygallery.description"
+              dense
+              :label="$t('proj.longdescr')"
+              @keyup.enter.stop
+              @update:model-value="save"
+              debounce="1000"
+              autofocus>
+            </q-input>
+
+            <q-card-actions align="center">
+              <q-btn
+                flat round color="blue" icon="fas fa-copy" size="sm"
+                @click="copytoclipboard(mygallery)"></q-btn>
+              <q-btn
+                flat round color="red" icon="fas fa-trash-alt" size="sm"
+                @click="deleteFile(mygallery)"></q-btn>
+            </q-card-actions>
+          </q-card>
+        </div>
+      </div>
+      <div class="q-pa-sm">
+        <div v-if="edit" class="q-gutter-sm " style="max-height: 200px; width: 208px;">
+          <q-uploader
+            label="Aggiungi Immagine o PDF"
+            accept=".jpg, image/*, .pdf"
+            :url="getUrl()"
+            :headers="tools.getheaders()"
+            :max-file-size="2000000"
+            multiple
+            auto-upload
+            hide-upload-btn
+            no-thumbnails
+            @uploaded="uploaded"
+            style="width: 208px"
+          ></q-uploader>
+        </div>
+      </div>
+    </div>
+  </div>
+  <q-dialog
+    v-model="displayGall"
+    persistent
+    :maximized="maximizedToggle"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card>
+      <q-bar class="bg-primary text-white">
+        <q-space />
+
+        <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
+          <q-tooltip v-if="maximizedToggle" class="bg-white text-primary">Minimize</q-tooltip>
+        </q-btn>
+        <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
+          <q-tooltip v-if="!maximizedToggle" class="bg-white text-primary">Maximize</q-tooltip>
+        </q-btn>
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+
+      <q-card-section>
+        <div class="text-h6">{{ title }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <div class=" row">
+          <div v-for="(mygallery, index) in getlistimages()" :key="index">
+            <div
+              class="q-pa-sm q-gutter-sm"
+              @dragenter="onDragEnter"
+              @dragleave="onDragLeave"
+
+              @dragover="onDragOver">
+              <q-card
+                :id="mygallery._id" :class="getclass()"
+                draggable="true"
+                @dragstart="onDragStart"
+                @drop="onDrop"
+              >
+                <q-img
+                  :src="getsrcimg(mygallery)"
+                  :class="getclimg()"
+                  :alt="mygallery.alt">
+                  <div class="absolute-bottom text-shadow">
+                    <!-- <div class="text-h6 text-trans">{{ mygallery.description }} </div> -->
+                    <div class="text-subtitle-carica text-trans">{{ mygallery.description }}</div>
+                  </div>
+                </q-img>
+                <q-card-section>
+                  <q-field
+                    stack-label
+                    dense
+                    label="FileName">
+                    <template v-slot:control>
+                      <div class="self-center full-width no-outline" tabindex="0">{{ mygallery.imagefile }}</div>
+                    </template>
+
+                  </q-field>
+                  <q-input
+                    v-model="mygallery.description"
+                    dense
+                    :label="$t('proj.longdescr')"
+                    @keyup.enter.stop
+                    @update:model-value="save"
+                    debounce="1000"
+                    autofocus>
+                  </q-input>
+
+                <q-card-actions align="center">
+                  <q-btn
+                    flat round color="blue" icon="fas fa-copy" size="sm"
+                    @click="copytoclipboard(mygallery)"></q-btn>
+                  <q-btn
+                    flat round color="red" icon="fas fa-trash-alt" size="sm"
+                    @click="deleteFile(mygallery)"></q-btn>
+                </q-card-actions>
+                </q-card-section>
+
+              </q-card>
+            </div>
+          </div>
+          <div class="q-pa-sm">
+            <div class="q-gutter-sm " style="max-height: 200px; width: 208px;">
+              <q-uploader
+                label="Aggiungi Immagine o PDF"
+                accept=".jpg, image/*, .pdf"
+                :url="getUrl()"
+                :headers="tools.getheaders()"
+                :max-file-size="2000000"
+                multiple
+                auto-upload
+                hide-upload-btn
+                no-thumbnails
+                @uploaded="uploaded"
+                style="width: 208px"
+              ></q-uploader>
+            </div>
+          </div>
+        </div>
+
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
 </template>
 
 <script lang="ts" src="./CGallery.ts">

src/components/CGridTableRec/CGridTableRec.ts

@@ -328,7 +328,7 @@ export default defineComponent({
     }
 
     function selItem(item: any, col: IColGridTable) {
-      // console.log('selItem', item)
+      console.log('selItem', item)
       rowsel = item
       idsel = item._id
       colsel.value = col
@@ -381,41 +381,59 @@ export default defineComponent({
     }
 
     function SaveValue(newVal: any, valinitial: any) {
-      // console.log('SaveValue', newVal, 'rowsel', rowsel, 'colsel', colsel.value)
-
+      // console.log('SaveValue', newVal)
+      // console.log('rowsel', rowsel, 'colsel', colsel.value)
+      let myfield = ''
+      let subf = ''
       if (colsel.value) {
-        // Update value in table memory
-        if (colsel.value.subfield !== '') {
-          if (rowsel[colsel.value.field!] === undefined)
-            rowsel[colsel.value.field!] = {}
-          rowsel[colsel.value.field!][colsel.value.subfield!] = newVal
-        } else {
-          rowsel[colsel.value.field!] = newVal
+        myfield = colsel.value.field!
+        subf = colsel.value.subfield!
+      }
+
+      if (myfield) {
+        if (colsel.value) {
+          // console.log('rowsel[myfield]', rowsel[myfield], 'field', myfield)
+          // console.log('subf', subf)
         }
-      }
 
-      const mydata = <any>{
-        id: idsel,
-        table: mytable.value,
-        fieldsvalue: {}
-      }
-
-
-      if (colsel.value) {
-        if (colsel.value.subfield !== '') {
-          if (mydata.fieldsvalue[colsel.value.field!] === undefined) {
-            mydata.fieldsvalue[colsel.value.field! + '.' + colsel.value.subfield!] = newVal
+        if (colsel.value) {
+          // Update value in table memory
+          if (subf !== '') {
+            if (rowsel[myfield] === undefined)
+              rowsel[myfield] = {}
+            rowsel[myfield][subf] = newVal
+          } else {
+            rowsel[myfield] = newVal
           }
-          // mydata.fieldsvalue[colsel.value.field][colsel.subfield] = newVal
-        } else {
-          mydata.fieldsvalue[colsel.value.field!] = newVal
         }
+
+        const mydata = <any>{
+          id: idsel,
+          table: mytable.value,
+          fieldsvalue: {}
+        }
+
+
+        if (colsel.value) {
+          if (subf !== '') {
+            if (mydata.fieldsvalue[myfield] === undefined) {
+              mydata.fieldsvalue[myfield + '.' + subf] = newVal
+            }
+            // mydata.fieldsvalue[colsel.value.field][colsel.subfield] = newVal
+          } else {
+            mydata.fieldsvalue[myfield] = newVal
+          }
+        }
+
+        // if (colsel.value)
+        //   console.log(' -> rowsel[myfield]', rowsel[myfield])
+
+        valPrec = valinitial
+
+        // console.log('rowsel FINALE', rowsel)
+
+        saveFieldValue(mydata)
       }
-
-      valPrec = valinitial
-
-      saveFieldValue(mydata)
-
     }
 
     function updatedcol() {

src/components/CGridTableRec/CGridTableRec.vue

@@ -137,6 +137,7 @@
               <div :class="getclrow(props.row)">
 
                 <CMyPopupEdit
+                  :table="prop_mytable"
                   :canEdit="canEdit"
                   :disable="disabilita()"
                   :col="col"
@@ -200,6 +201,7 @@
               @click="colclicksel = mycol">
 
               <CMyPopupEdit
+                :table="prop_mytable"
                 :canEdit="true"
                 :disable="disabilita()"
                 view="field"
@@ -235,6 +237,7 @@
               <div>
 
                 <CMyPopupEdit
+                  :table="prop_mytable"
                   :canEdit="true"
                   :col="col"
                   v-model:row="newRecord"

src/components/CMapsEsempio/CMapsEsempio.scss

@@ -0,0 +1,366 @@
+*,
+*::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;
+    }
+  }
+}

src/components/CMapsEsempio/CMapsEsempio.ts

@@ -0,0 +1,304 @@
+/* eslint-disable no-console */
+import qs from 'qs'
+// import VChart from '../ECharts'
+import VChart, { THEME_KEY } from 'vue-echarts';
+import { ref, defineComponent } from 'vue';
+
+import {
+  use,
+  registerMap,
+  registerTheme,
+  connect,
+  disconnect
+} from 'echarts/core'
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+} from 'echarts/charts'
+import {
+  GridComponent,
+  PolarComponent,
+  GeoComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  VisualMapComponent,
+  DatasetComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from 'echarts/components'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+// import "echarts-liquidfill";
+// import logo from "./data/logo";
+import getBar from './data/bar'
+import pie from './data/pie'
+import polar from './data/polar'
+import scatter from './data/scatter'
+import map from './data/map'
+import { c1, c2 } from './data/connect'
+
+// custom theme
+import theme from './theme.json'
+
+// Map of China
+import chinaMap from './china.json'
+import worldMap from './world.json'
+import { watch } from 'vue'
+
+use([
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart,
+  GridComponent,
+  PolarComponent,
+  GeoComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  VisualMapComponent,
+  DatasetComponent,
+  CanvasRenderer,
+  SVGRenderer,
+  ToolboxComponent,
+  DataZoomComponent
+])
+
+// registering map data
+// @ts-ignore
+registerMap('china', chinaMap)
+// @ts-ignore
+registerMap('world', worldMap)
+
+// registering custom theme
+registerTheme('ovilia-green', theme)
+
+export default defineComponent({
+  name: 'CMapsEsempio',
+  components: {
+    VChart
+  },
+  setup() {
+    const options = qs.parse(location.search, { ignoreQueryPrefix: true })
+    const initOptions = {
+      renderer: options.renderer || 'canvas'
+    }
+
+    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 handleClick(...args: any) {
+      console.log('click from echarts', ...args)
+    }
+
+    function handleZrClick(...args: any) {
+      console.log('click from zrender', ...args)
+    }
+
+    function refresh() {
+      // simulating async data from server
+      let seconds = 3
+      let barLoading = true
+      const timer = setInterval(() => {
+        seconds--
+        if (seconds === 0) {
+          clearTimeout(timer)
+          barLoading = false
+          let bar = getBar()
+        }
+      }, 1000)
+    }
+
+    function toggleRenderer() {
+      if (initOptions.renderer === 'canvas') {
+        initOptions.renderer = 'svg'
+      } else {
+        initOptions.renderer = 'canvas'
+      }
+    }
+
+    function convert() {
+      /*
+      const map = $refs.map;
+      img = {
+        src: map.getDataURL({
+          pixelRatio: window.devicePixelRatio || 1
+        }),
+        width: map.getWidth(),
+        height: map.getHeight()
+      };
+      open = true;
+
+       */
+    }
+
+    function loadFlights() {
+      let flightLoaded = true
+      let flightLoading = true
+
+      import('./data/flight.json').then(({ default: data }) => {
+        flightLoading = false
+
+        function getAirportCoord(idx: any) {
+          return [data.airports[idx][3], data.airports[idx][4]]
+        }
+
+        const routes = data.routes.map(airline => {
+          return [getAirportCoord(airline[1]), getAirportCoord(airline[2])]
+        })
+
+        let flight = {
+          textStyle: {
+            fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+          },
+          title: {
+            text: 'World Flights',
+            left: 'center',
+            textStyle: {
+              color: '#eee'
+            }
+          },
+          backgroundColor: '#003',
+          tooltip: {
+            formatter(param: any) {
+              const route = data.routes[param.dataIndex]
+              return (
+                data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1]
+              )
+            }
+          },
+          geo: {
+            map: 'world',
+            left: 0,
+            right: 0,
+            silent: true,
+            itemStyle: {
+              borderColor: '#003',
+              color: '#005'
+            }
+          },
+          series: [
+            {
+              type: 'lines',
+              coordinateSystem: 'geo',
+              data: routes,
+              large: true,
+              largeThreshold: 100,
+              lineStyle: {
+                opacity: 0.05,
+                width: 0.5,
+                curveness: 0.3
+              },
+              blendMode: 'lighter'
+            }
+          ]
+        }
+      })
+    }
+
+    function startActions() {
+      /*
+      let dataIndex = -1;
+      const pie = $refs.pie;
+
+      if (!pie) {
+        return;
+      }
+
+      const dataLen = pie.option.series[0].data.length;
+
+      actionTimer = setInterval(() => {
+        pie.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex
+        });
+        dataIndex = (dataIndex + 1) % dataLen;
+        pie.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex
+        });
+        // 显示 tooltip
+        pie.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex
+        });
+      }, 1000);
+
+       */
+    }
+
+    function stopActions() {
+      /*
+      clearInterval(actionTimer);
+
+       */
+    }
+
+
+    return {
+      options,
+      bar: getBar(),
+      pie,
+      polar,
+      scatter,
+      map,
+      c1,
+      c2,
+      expand: {
+        bar: true,
+        pie: true,
+        polar: true,
+        scatter: true,
+        map: true,
+        radar: true,
+        connect: true,
+        flight: true
+      },
+      polarTheme: 'dark',
+      seconds: -1,
+      asyncCount: false,
+      connected: true,
+      metricIndex: 0,
+      open: false,
+      img: {},
+      barLoading: false,
+      barLoadingOptions: {
+        text: 'Loading…',
+        color: '#4ea397',
+        maskColor: 'rgba(255, 255, 255, 0.4)'
+      },
+      flight: null,
+      flightLoaded: false,
+      flightLoading: false,
+      flightLoadingOptions: {
+        text: '',
+        color: '#c23531',
+        textColor: 'rgba(255, 255, 255, 0.5)',
+        maskColor: '#003',
+        zlevel: 0
+      },
+      initOptions,
+    }
+  }
+})

src/components/CMapsEsempio/CMapsEsempio.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    Esempio:
+    <!-- <v-chart
+    class="echarts" id="logo" :option="logo" :init-options="initOptions" autoresize /> -->
+    <h1><a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a></h1>
+    <p class="desc">
+      Vue.js component for Apache ECharts. (<a
+        href="https://github.com/ecomfe/vue-echarts#readme"
+        >docs</a
+      >)
+    </p>
+
+    <h2 id="bar">
+      <a href="">Bar chart <small>(with async data &amp; custom theme)</small></a
+      >
+      <button
+        :class="{
+          round: true,
+          expand: expand.bar
+        }"
+        @click="expand.bar = !expand.bar"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.bar">
+      <figure>
+        <v-chart
+          :option="bar"
+          :init-options="initOptions"
+          ref="bar"
+          theme="ovilia-green"
+          autoresize
+          :loading="barLoading"
+          :loadingOptions="barLoadingOptions"
+          @zr:click="handleZrClick"
+          @click="handleClick"
+        />
+      </figure>
+      <p v-if="seconds <= 0"><small>Loaded.</small></p>
+      <p v-else>
+        <small
+          >Data coming in <b>{{ seconds }}</b> second{{
+            seconds > 1 ? "s" : ""
+          }}...</small
+        >
+      </p>
+      <p><button @click="refresh" :disabled="seconds > 0">Refresh</button></p>
+    </section>
+
+    <h2 id="pie">
+      <a href="#pie">Pie chart <small>(with action dispatch)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.pie
+        }"
+        @click="expand.pie = !expand.pie"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.pie">
+      <figure>
+        <v-chart
+          :option="pie"
+          :init-options="initOptions"
+          ref="pie"
+          autoresize
+        />
+      </figure>
+    </section>
+
+    <h2 id="polar">
+      <a href="#polar">Polar plot <small>(with built-in theme)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.polar
+        }"
+        @click="expand.polar = !expand.polar"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.polar">
+      <figure :style="polarTheme === 'dark' ? 'background-color: #100c2a' : ''">
+        <v-chart
+          :option="polar"
+          :init-options="initOptions"
+          :theme="polarTheme"
+          autoresize
+        />
+      </figure>
+      <p>
+        Theme
+        <select v-model="polarTheme">
+          <option :value="null">Default</option>
+          <option value="dark">Dark</option>
+        </select>
+      </p>
+    </section>
+
+    <h2 id="scatter">
+      <a href="#scatter">Scatter plot <small>(with gradient)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.scatter
+        }"
+        @click="expand.scatter = !expand.scatter"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.scatter">
+      <figure>
+        <v-chart :option="scatter" :init-options="initOptions" autoresize />
+      </figure>
+    </section>
+
+    <h2 id="map">
+      <a href="#map">Map <small>(with GeoJSON &amp; image converter)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.map
+        }"
+        @click="expand.map = !expand.map"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.map">
+      <figure style="background-color: #404a59">
+        <v-chart
+          :option="map"
+          :init-options="initOptions"
+          ref="map"
+          autoresize
+        />
+      </figure>
+      <p><button @click="convert">Convert to image</button></p>
+    </section>
+
+    <!-- <h2 id="radar">
+      <a href="#radar">Radar chart <small>(with Vuex integration)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.radar
+        }"
+        @click="expand.radar = !expand.radar"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.radar">
+      <figure>
+        <v-chart
+        class="echarts" :option="scoreRadar" :init-options="initOptions" autoresize />
+      </figure>
+      <p>
+        <select v-model="metricIndex">
+          <option v-for="(metric, index) in metrics" :value="index" :key="index"
+            >{{ metric }}
+          </option>
+        </select>
+        <button @click="increase(1)" :disabled="isMax">Increase</button>
+        <button @click="increase(-1)" :disabled="isMin">Decrease</button>
+        <input id="async" type="checkbox" v-model="asyncCount" />
+        <label for="async">Async</label>
+      </p>
+    </section> -->
+
+    <h2 id="connect">
+      <a href="#connect">Connectable charts</a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.connect
+        }"
+        @click="expand.connect = !expand.connect"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.connect">
+      <figure class="half">
+        <v-chart
+          :option="c1"
+          :init-options="initOptions"
+          group="radiance"
+          ref="c1"
+          autoresize
+        />
+      </figure>
+      <figure class="half">
+        <v-chart
+          :option="c2"
+          :init-options="initOptions"
+          group="radiance"
+          ref="c2"
+          autoresize
+        />
+      </figure>
+      <p>
+        <label>
+          <input type="checkbox" v-model="connected" />
+          Connected
+        </label>
+      </p>
+    </section>
+
+    <h2 id="flight">
+      <a href="#flight">Manual updates</a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.flight
+        }"
+        @click="expand.flight = !expand.flight"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.flight">
+      <p>
+        <small
+          >You may use <code>manual-update</code> prop for performance critical
+          use cases.</small
+        >
+      </p>
+      <p><button :disabled="flightLoaded" @click="loadFlights">Load</button></p>
+      <figure style="background-color: #003">
+        <v-chart
+          ref="flight"
+          :init-options="initOptions"
+          :option="flight"
+          autoresize
+          :loading="flightLoading"
+          :loading-options="flightLoadingOptions"
+        />
+      </figure>
+    </section>
+
+    <footer>
+      <a href="//github.com/Justineo">@Justineo</a>|<a
+        href="//github.com/ecomfe/vue-echarts/blob/master/LICENSE"
+        >MIT License</a
+      >|<a href="//github.com/ecomfe/vue-echarts">View on GitHub</a>
+    </footer>
+
+    <aside :class="{ modal: true, open }" @click="open = false">
+      <img v-if="img.src" :src="img.src" :width="img.width" />
+    </aside>
+
+    <aside class="renderer">
+      <button
+        :class="{
+          active: initOptions.renderer === 'canvas'
+        }"
+        @click="initOptions.renderer = 'canvas'"
+      >
+        Canvas
+      </button>
+      <button
+        :class="{
+          active: initOptions.renderer === 'svg'
+        }"
+        @click="initOptions.renderer = 'svg'"
+      >
+        SVG
+      </button>
+    </aside>
+  </div>
+</template>
+
+<script lang="ts" src="./CMapsEsempio.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMapsEsempio.scss';
+</style>

src/components/CMapsEsempio/assets/Vue-ECharts.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 465 750">
+  <path fill="currentColor" d="M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z"/>
+</svg>

src/components/CMapsEsempio/data/bar.js

@@ -0,0 +1,45 @@
+function random() {
+  return Math.round(300 + Math.random() * 700) / 10;
+}
+
+export default function getData() {
+  return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+    },
+    dataset: {
+      dimensions: ["Product", "2015", "2016", "2017"],
+      source: [
+        {
+          Product: "Matcha Latte",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Milk Tea",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Cheese Cocoa",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Walnut Brownie",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        }
+      ]
+    },
+    xAxis: { type: "category" },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
+  };
+}

src/components/CMapsEsempio/data/connect.js

@@ -0,0 +1,105 @@
+const data1 = [];
+const symbolCount = 6;
+for (let i = 0; i < 16; i++) {
+  data1.push([
+    Math.random() * 5,
+    Math.random() * 4,
+    Math.random() * 12,
+    Math.round(Math.random() * (symbolCount - 1))
+  ]);
+}
+
+export const c1 = {
+  legend: {
+    top: 20,
+    data: ["scatter"]
+  },
+  tooltip: {
+    formatter: "{c}"
+  },
+  grid: {
+    top: "26%",
+    bottom: "26%"
+  },
+  xAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  visualMap: [
+    {
+      realtime: false,
+      left: "right",
+      selectedMode: "multiple",
+      dimension: 2,
+      selected: [],
+      min: 0,
+      max: 18,
+      precision: 0,
+      splitNumber: 0,
+      calculable: true
+    }
+  ],
+  series: [
+    {
+      name: "scatter",
+      type: "scatter",
+      symbolSize: 30,
+      data: data1
+    }
+  ]
+};
+
+export const c2 = {
+  legend: {
+    top: 20,
+    data: ["scatter"]
+  },
+  tooltip: {
+    formatter: "{c}"
+  },
+  grid: {
+    top: "26%",
+    bottom: "26%"
+  },
+  xAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  visualMap: [
+    {
+      left: "right",
+      selectedMode: "multiple",
+      dimension: 2,
+      selected: [],
+      min: 0,
+      max: 18,
+      precision: 0,
+      splitNumber: 0,
+      calculable: true
+    }
+  ],
+  series: [
+    {
+      name: "scatter",
+      type: "scatter",
+      symbolSize: 30,
+      data: data1
+    }
+  ]
+};

src/components/CMapsEsempio/data/logo.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import logo from '../assets/Vue-ECharts.svg'
+/* eslint-enable */
+
+const d = logo.match(/\bd="([^"]+)"/)[1];
+
+export default {
+  series: [
+    {
+      type: "liquidFill",
+      data: [0.7, 0.6, 0.55, 0.45],
+      amplitude: 6,
+      outline: {
+        show: false
+      },
+      radius: "60%",
+      color: ["#4fc08d", "#44d64a", "#33c762", "#4acc80"],
+      backgroundStyle: {
+        color: "#fff",
+        borderColor: "#2c3e50",
+        borderWidth: 1
+      },
+      shape: `path://${d}`,
+      label: {
+        normal: {
+          formatter() {
+            return "";
+          }
+        }
+      }
+    }
+  ]
+};

src/components/CMapsEsempio/data/map.js

@@ -0,0 +1,488 @@
+const data = [
+  { name: "海门", value: 9 },
+  { name: "鄂尔多斯", value: 12 },
+  { name: "招远", value: 12 },
+  { name: "舟山", value: 12 },
+  { name: "齐齐哈尔", value: 14 },
+  { name: "盐城", value: 15 },
+  { name: "赤峰", value: 16 },
+  { name: "青岛", value: 18 },
+  { name: "乳山", value: 18 },
+  { name: "金昌", value: 19 },
+  { name: "泉州", value: 21 },
+  { name: "莱西", value: 21 },
+  { name: "日照", value: 21 },
+  { name: "胶南", value: 22 },
+  { name: "南通", value: 23 },
+  { name: "拉萨", value: 24 },
+  { name: "云浮", value: 24 },
+  { name: "梅州", value: 25 },
+  { name: "文登", value: 25 },
+  { name: "上海", value: 25 },
+  { name: "攀枝花", value: 25 },
+  { name: "威海", value: 25 },
+  { name: "承德", value: 25 },
+  { name: "厦门", value: 26 },
+  { name: "汕尾", value: 26 },
+  { name: "潮州", value: 26 },
+  { name: "丹东", value: 27 },
+  { name: "太仓", value: 27 },
+  { name: "曲靖", value: 27 },
+  { name: "烟台", value: 28 },
+  { name: "福州", value: 29 },
+  { name: "瓦房店", value: 30 },
+  { name: "即墨", value: 30 },
+  { name: "抚顺", value: 31 },
+  { name: "玉溪", value: 31 },
+  { name: "张家口", value: 31 },
+  { name: "阳泉", value: 31 },
+  { name: "莱州", value: 32 },
+  { name: "湖州", value: 32 },
+  { name: "汕头", value: 32 },
+  { name: "昆山", value: 33 },
+  { name: "宁波", value: 33 },
+  { name: "湛江", value: 33 },
+  { name: "揭阳", value: 34 },
+  { name: "荣成", value: 34 },
+  { name: "连云港", value: 35 },
+  { name: "葫芦岛", value: 35 },
+  { name: "常熟", value: 36 },
+  { name: "东莞", value: 36 },
+  { name: "河源", value: 36 },
+  { name: "淮安", value: 36 },
+  { name: "泰州", value: 36 },
+  { name: "南宁", value: 37 },
+  { name: "营口", value: 37 },
+  { name: "惠州", value: 37 },
+  { name: "江阴", value: 37 },
+  { name: "蓬莱", value: 37 },
+  { name: "韶关", value: 38 },
+  { name: "嘉峪关", value: 38 },
+  { name: "广州", value: 38 },
+  { name: "延安", value: 38 },
+  { name: "太原", value: 39 },
+  { name: "清远", value: 39 },
+  { name: "中山", value: 39 },
+  { name: "昆明", value: 39 },
+  { name: "寿光", value: 40 },
+  { name: "盘锦", value: 40 },
+  { name: "长治", value: 41 },
+  { name: "深圳", value: 41 },
+  { name: "珠海", value: 42 },
+  { name: "宿迁", value: 43 },
+  { name: "咸阳", value: 43 },
+  { name: "铜川", value: 44 },
+  { name: "平度", value: 44 },
+  { name: "佛山", value: 44 },
+  { name: "海口", value: 44 },
+  { name: "江门", value: 45 },
+  { name: "章丘", value: 45 },
+  { name: "肇庆", value: 46 },
+  { name: "大连", value: 47 },
+  { name: "临汾", value: 47 },
+  { name: "吴江", value: 47 },
+  { name: "石嘴山", value: 49 },
+  { name: "沈阳", value: 50 },
+  { name: "苏州", value: 50 },
+  { name: "茂名", value: 50 },
+  { name: "嘉兴", value: 51 },
+  { name: "长春", value: 51 },
+  { name: "胶州", value: 52 },
+  { name: "银川", value: 52 },
+  { name: "张家港", value: 52 },
+  { name: "三门峡", value: 53 },
+  { name: "锦州", value: 54 },
+  { name: "南昌", value: 54 },
+  { name: "柳州", value: 54 },
+  { name: "三亚", value: 54 },
+  { name: "自贡", value: 56 },
+  { name: "吉林", value: 56 },
+  { name: "阳江", value: 57 },
+  { name: "泸州", value: 57 },
+  { name: "西宁", value: 57 },
+  { name: "宜宾", value: 58 },
+  { name: "呼和浩特", value: 58 },
+  { name: "成都", value: 58 },
+  { name: "大同", value: 58 },
+  { name: "镇江", value: 59 },
+  { name: "桂林", value: 59 },
+  { name: "张家界", value: 59 },
+  { name: "宜兴", value: 59 },
+  { name: "北海", value: 60 },
+  { name: "西安", value: 61 },
+  { name: "金坛", value: 62 },
+  { name: "东营", value: 62 },
+  { name: "牡丹江", value: 63 },
+  { name: "遵义", value: 63 },
+  { name: "绍兴", value: 63 },
+  { name: "扬州", value: 64 },
+  { name: "常州", value: 64 },
+  { name: "潍坊", value: 65 },
+  { name: "重庆", value: 66 },
+  { name: "台州", value: 67 },
+  { name: "南京", value: 67 },
+  { name: "滨州", value: 70 },
+  { name: "贵阳", value: 71 },
+  { name: "无锡", value: 71 },
+  { name: "本溪", value: 71 },
+  { name: "克拉玛依", value: 72 },
+  { name: "渭南", value: 72 },
+  { name: "马鞍山", value: 72 },
+  { name: "宝鸡", value: 72 },
+  { name: "焦作", value: 75 },
+  { name: "句容", value: 75 },
+  { name: "北京", value: 79 },
+  { name: "徐州", value: 79 },
+  { name: "衡水", value: 80 },
+  { name: "包头", value: 80 },
+  { name: "绵阳", value: 80 },
+  { name: "乌鲁木齐", value: 84 },
+  { name: "枣庄", value: 84 },
+  { name: "杭州", value: 84 },
+  { name: "淄博", value: 85 },
+  { name: "鞍山", value: 86 },
+  { name: "溧阳", value: 86 },
+  { name: "库尔勒", value: 86 },
+  { name: "安阳", value: 90 },
+  { name: "开封", value: 90 },
+  { name: "济南", value: 92 },
+  { name: "德阳", value: 93 },
+  { name: "温州", value: 95 },
+  { name: "九江", value: 96 },
+  { name: "邯郸", value: 98 },
+  { name: "临安", value: 99 },
+  { name: "兰州", value: 99 },
+  { name: "沧州", value: 100 },
+  { name: "临沂", value: 103 },
+  { name: "南充", value: 104 },
+  { name: "天津", value: 105 },
+  { name: "富阳", value: 106 },
+  { name: "泰安", value: 112 },
+  { name: "诸暨", value: 112 },
+  { name: "郑州", value: 113 },
+  { name: "哈尔滨", value: 114 },
+  { name: "聊城", value: 116 },
+  { name: "芜湖", value: 117 },
+  { name: "唐山", value: 119 },
+  { name: "平顶山", value: 119 },
+  { name: "邢台", value: 119 },
+  { name: "德州", value: 120 },
+  { name: "济宁", value: 120 },
+  { name: "荆州", value: 127 },
+  { name: "宜昌", value: 130 },
+  { name: "义乌", value: 132 },
+  { name: "丽水", value: 133 },
+  { name: "洛阳", value: 134 },
+  { name: "秦皇岛", value: 136 },
+  { name: "株洲", value: 143 },
+  { name: "石家庄", value: 147 },
+  { name: "莱芜", value: 148 },
+  { name: "常德", value: 152 },
+  { name: "保定", value: 153 },
+  { name: "湘潭", value: 154 },
+  { name: "金华", value: 157 },
+  { name: "岳阳", value: 169 },
+  { name: "长沙", value: 175 },
+  { name: "衢州", value: 177 },
+  { name: "廊坊", value: 193 },
+  { name: "菏泽", value: 194 },
+  { name: "合肥", value: 229 },
+  { name: "武汉", value: 273 },
+  { name: "大庆", value: 279 }
+];
+const geoCoordMap = {
+  海门: [121.15, 31.89],
+  鄂尔多斯: [109.781327, 39.608266],
+  招远: [120.38, 37.35],
+  舟山: [122.207216, 29.985295],
+  齐齐哈尔: [123.97, 47.33],
+  盐城: [120.13, 33.38],
+  赤峰: [118.87, 42.28],
+  青岛: [120.33, 36.07],
+  乳山: [121.52, 36.89],
+  金昌: [102.188043, 38.520089],
+  泉州: [118.58, 24.93],
+  莱西: [120.53, 36.86],
+  日照: [119.46, 35.42],
+  胶南: [119.97, 35.88],
+  南通: [121.05, 32.08],
+  拉萨: [91.11, 29.97],
+  云浮: [112.02, 22.93],
+  梅州: [116.1, 24.55],
+  文登: [122.05, 37.2],
+  上海: [121.48, 31.22],
+  攀枝花: [101.718637, 26.582347],
+  威海: [122.1, 37.5],
+  承德: [117.93, 40.97],
+  厦门: [118.1, 24.46],
+  汕尾: [115.375279, 22.786211],
+  潮州: [116.63, 23.68],
+  丹东: [124.37, 40.13],
+  太仓: [121.1, 31.45],
+  曲靖: [103.79, 25.51],
+  烟台: [121.39, 37.52],
+  福州: [119.3, 26.08],
+  瓦房店: [121.979603, 39.627114],
+  即墨: [120.45, 36.38],
+  抚顺: [123.97, 41.97],
+  玉溪: [102.52, 24.35],
+  张家口: [114.87, 40.82],
+  阳泉: [113.57, 37.85],
+  莱州: [119.942327, 37.177017],
+  湖州: [120.1, 30.86],
+  汕头: [116.69, 23.39],
+  昆山: [120.95, 31.39],
+  宁波: [121.56, 29.86],
+  湛江: [110.359377, 21.270708],
+  揭阳: [116.35, 23.55],
+  荣成: [122.41, 37.16],
+  连云港: [119.16, 34.59],
+  葫芦岛: [120.836932, 40.711052],
+  常熟: [120.74, 31.64],
+  东莞: [113.75, 23.04],
+  河源: [114.68, 23.73],
+  淮安: [119.15, 33.5],
+  泰州: [119.9, 32.49],
+  南宁: [108.33, 22.84],
+  营口: [122.18, 40.65],
+  惠州: [114.4, 23.09],
+  江阴: [120.26, 31.91],
+  蓬莱: [120.75, 37.8],
+  韶关: [113.62, 24.84],
+  嘉峪关: [98.289152, 39.77313],
+  广州: [113.23, 23.16],
+  延安: [109.47, 36.6],
+  太原: [112.53, 37.87],
+  清远: [113.01, 23.7],
+  中山: [113.38, 22.52],
+  昆明: [102.73, 25.04],
+  寿光: [118.73, 36.86],
+  盘锦: [122.070714, 41.119997],
+  长治: [113.08, 36.18],
+  深圳: [114.07, 22.62],
+  珠海: [113.52, 22.3],
+  宿迁: [118.3, 33.96],
+  咸阳: [108.72, 34.36],
+  铜川: [109.11, 35.09],
+  平度: [119.97, 36.77],
+  佛山: [113.11, 23.05],
+  海口: [110.35, 20.02],
+  江门: [113.06, 22.61],
+  章丘: [117.53, 36.72],
+  肇庆: [112.44, 23.05],
+  大连: [121.62, 38.92],
+  临汾: [111.5, 36.08],
+  吴江: [120.63, 31.16],
+  石嘴山: [106.39, 39.04],
+  沈阳: [123.38, 41.8],
+  苏州: [120.62, 31.32],
+  茂名: [110.88, 21.68],
+  嘉兴: [120.76, 30.77],
+  长春: [125.35, 43.88],
+  胶州: [120.03336, 36.264622],
+  银川: [106.27, 38.47],
+  张家港: [120.555821, 31.875428],
+  三门峡: [111.19, 34.76],
+  锦州: [121.15, 41.13],
+  南昌: [115.89, 28.68],
+  柳州: [109.4, 24.33],
+  三亚: [109.511909, 18.252847],
+  自贡: [104.778442, 29.33903],
+  吉林: [126.57, 43.87],
+  阳江: [111.95, 21.85],
+  泸州: [105.39, 28.91],
+  西宁: [101.74, 36.56],
+  宜宾: [104.56, 29.77],
+  呼和浩特: [111.65, 40.82],
+  成都: [104.06, 30.67],
+  大同: [113.3, 40.12],
+  镇江: [119.44, 32.2],
+  桂林: [110.28, 25.29],
+  张家界: [110.479191, 29.117096],
+  宜兴: [119.82, 31.36],
+  北海: [109.12, 21.49],
+  西安: [108.95, 34.27],
+  金坛: [119.56, 31.74],
+  东营: [118.49, 37.46],
+  牡丹江: [129.58, 44.6],
+  遵义: [106.9, 27.7],
+  绍兴: [120.58, 30.01],
+  扬州: [119.42, 32.39],
+  常州: [119.95, 31.79],
+  潍坊: [119.1, 36.62],
+  重庆: [106.54, 29.59],
+  台州: [121.420757, 28.656386],
+  南京: [118.78, 32.04],
+  滨州: [118.03, 37.36],
+  贵阳: [106.71, 26.57],
+  无锡: [120.29, 31.59],
+  本溪: [123.73, 41.3],
+  克拉玛依: [84.77, 45.59],
+  渭南: [109.5, 34.52],
+  马鞍山: [118.48, 31.56],
+  宝鸡: [107.15, 34.38],
+  焦作: [113.21, 35.24],
+  句容: [119.16, 31.95],
+  北京: [116.46, 39.92],
+  徐州: [117.2, 34.26],
+  衡水: [115.72, 37.72],
+  包头: [110, 40.58],
+  绵阳: [104.73, 31.48],
+  乌鲁木齐: [87.68, 43.77],
+  枣庄: [117.57, 34.86],
+  杭州: [120.19, 30.26],
+  淄博: [118.05, 36.78],
+  鞍山: [122.85, 41.12],
+  溧阳: [119.48, 31.43],
+  库尔勒: [86.06, 41.68],
+  安阳: [114.35, 36.1],
+  开封: [114.35, 34.79],
+  济南: [117, 36.65],
+  德阳: [104.37, 31.13],
+  温州: [120.65, 28.01],
+  九江: [115.97, 29.71],
+  邯郸: [114.47, 36.6],
+  临安: [119.72, 30.23],
+  兰州: [103.73, 36.03],
+  沧州: [116.83, 38.33],
+  临沂: [118.35, 35.05],
+  南充: [106.110698, 30.837793],
+  天津: [117.2, 39.13],
+  富阳: [119.95, 30.07],
+  泰安: [117.13, 36.18],
+  诸暨: [120.23, 29.71],
+  郑州: [113.65, 34.76],
+  哈尔滨: [126.63, 45.75],
+  聊城: [115.97, 36.45],
+  芜湖: [118.38, 31.33],
+  唐山: [118.02, 39.63],
+  平顶山: [113.29, 33.75],
+  邢台: [114.48, 37.05],
+  德州: [116.29, 37.45],
+  济宁: [116.59, 35.38],
+  荆州: [112.239741, 30.335165],
+  宜昌: [111.3, 30.7],
+  义乌: [120.06, 29.32],
+  丽水: [119.92, 28.45],
+  洛阳: [112.44, 34.7],
+  秦皇岛: [119.57, 39.95],
+  株洲: [113.16, 27.83],
+  石家庄: [114.48, 38.03],
+  莱芜: [117.67, 36.19],
+  常德: [111.69, 29.05],
+  保定: [115.48, 38.85],
+  湘潭: [112.91, 27.87],
+  金华: [119.64, 29.12],
+  岳阳: [113.09, 29.37],
+  长沙: [113, 28.21],
+  衢州: [118.88, 28.97],
+  廊坊: [116.7, 39.53],
+  菏泽: [115.480656, 35.23375],
+  合肥: [117.27, 31.86],
+  武汉: [114.31, 30.52],
+  大庆: [125.03, 46.58]
+};
+
+function convertData(data) {
+  const res = [];
+  for (let i = 0; i < data.length; i++) {
+    const geoCoord = geoCoordMap[data[i].name];
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      });
+    }
+  }
+  return res;
+}
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  backgroundColor: "#404a59",
+  title: {
+    text: "Air quality of major cities in China",
+    subtext: "data from PM25.in",
+    sublink: "http://www.pm25.in",
+    left: "center",
+    textStyle: {
+      color: "#fff"
+    }
+  },
+  tooltip: {
+    trigger: "item"
+  },
+  legend: {
+    orient: "vertical",
+    y: "bottom",
+    x: "right",
+    data: ["pm2.5"],
+    textStyle: {
+      color: "#fff"
+    }
+  },
+  geo: {
+    map: "china",
+    emphasis: {
+      label: {
+        show: false
+      },
+      itemStyle: {
+        areaColor: "#2a333d"
+      }
+    },
+    itemStyle: {
+      areaColor: "#323c48",
+      borderColor: "#111"
+    }
+  },
+  series: [
+    {
+      name: "pm2.5",
+      type: "scatter",
+      coordinateSystem: "geo",
+      data: convertData(data),
+      symbolSize: val => val[2] / 10,
+      tooltip: {
+        formatter: function (val) {
+          return val.name + ": " + val.value[2];
+        }
+      },
+      itemStyle: {
+        color: "#ddb926"
+      }
+    },
+    {
+      name: "Top 5",
+      type: "effectScatter",
+      coordinateSystem: "geo",
+      data: convertData(data.sort((a, b) => b.value - a.value).slice(0, 6)),
+      symbolSize: val => val[2] / 10,
+      showEffectOn: "render",
+      rippleEffect: {
+        brushType: "stroke"
+      },
+      emphasis: {
+        scale: true
+      },
+      tooltip: {
+        formatter: function (val) {
+          return val.name + ": " + val.value[2];
+        }
+      },
+      label: {
+        formatter: "{b}",
+        position: "right",
+        show: true
+      },
+      itemStyle: {
+        color: "#f4e925",
+        shadowBlur: 10,
+        shadowColor: "#333"
+      },
+      zlevel: 1
+    }
+  ]
+};

src/components/CMapsEsempio/data/pie.js

@@ -0,0 +1,40 @@
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
+};

src/components/CMapsEsempio/data/polar.js

@@ -0,0 +1,45 @@
+const data = [];
+
+for (let i = 0; i <= 360; i++) {
+  const t = (i / 180) * Math.PI;
+  const r = Math.sin(2 * t) * Math.cos(2 * t);
+  data.push([r, i]);
+}
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Dual Numeric Axis"
+  },
+  legend: {
+    data: ["line"]
+  },
+  polar: {
+    center: ["50%", "54%"]
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross"
+    }
+  },
+  angleAxis: {
+    type: "value",
+    startAngle: 0
+  },
+  radiusAxis: {
+    min: 0
+  },
+  series: [
+    {
+      coordinateSystem: "polar",
+      name: "line",
+      type: "line",
+      showSymbol: false,
+      data: data
+    }
+  ],
+  animationDuration: 2000
+};

src/components/CMapsEsempio/data/scatter.js

@@ -0,0 +1,140 @@
+import { graphic } from "echarts/core";
+
+const data = [
+  [
+    [28604, 77, 17096869, "Australia", 1990],
+    [31163, 77.4, 27662440, "Canada", 1990],
+    [1516, 68, 1154605773, "China", 1990],
+    [13670, 74.7, 10582082, "Cuba", 1990],
+    [28599, 75, 4986705, "Finland", 1990],
+    [29476, 77.1, 56943299, "France", 1990],
+    [31476, 75.4, 78958237, "Germany", 1990],
+    [28666, 78.1, 254830, "Iceland", 1990],
+    [1777, 57.7, 870601776, "India", 1990],
+    [29550, 79.1, 122249285, "Japan", 1990],
+    [2076, 67.9, 20194354, "North Korea", 1990],
+    [12087, 72, 42972254, "South Korea", 1990],
+    [24021, 75.4, 3397534, "New Zealand", 1990],
+    [43296, 76.8, 4240375, "Norway", 1990],
+    [10088, 70.8, 38195258, "Poland", 1990],
+    [19349, 69.6, 147568552, "Russia", 1990],
+    [10670, 67.3, 53994605, "Turkey", 1990],
+    [26424, 75.7, 57110117, "United Kingdom", 1990],
+    [37062, 75.4, 252847810, "United States", 1990]
+  ],
+  [
+    [44056, 81.8, 23968973, "Australia", 2015],
+    [43294, 81.7, 35939927, "Canada", 2015],
+    [13334, 76.9, 1376048943, "China", 2015],
+    [21291, 78.5, 11389562, "Cuba", 2015],
+    [38923, 80.8, 5503457, "Finland", 2015],
+    [37599, 81.9, 64395345, "France", 2015],
+    [44053, 81.1, 80688545, "Germany", 2015],
+    [42182, 82.8, 329425, "Iceland", 2015],
+    [5903, 66.8, 1311050527, "India", 2015],
+    [36162, 83.5, 126573481, "Japan", 2015],
+    [1390, 71.4, 25155317, "North Korea", 2015],
+    [34644, 80.7, 50293439, "South Korea", 2015],
+    [34186, 80.6, 4528526, "New Zealand", 2015],
+    [64304, 81.6, 5210967, "Norway", 2015],
+    [24787, 77.3, 38611794, "Poland", 2015],
+    [23038, 73.13, 143456918, "Russia", 2015],
+    [19360, 76.5, 78665830, "Turkey", 2015],
+    [38225, 81.4, 64715810, "United Kingdom", 2015],
+    [53354, 79.1, 321773631, "United States", 2015]
+  ]
+];
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Life Expectancy vs. GDP by country"
+  },
+  legend: {
+    right: 10,
+    data: ["1990", "2015"]
+  },
+  xAxis: {
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
+  yAxis: {
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    },
+    scale: true
+  },
+  series: [
+    {
+      name: "1990",
+      data: data[0],
+      type: "scatter",
+      symbolSize(data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data }) {
+            return data[3];
+          },
+          position: "top"
+        }
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(120, 36, 50, 0.5)",
+        shadowOffsetY: 5,
+        color: new graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: "rgb(251, 118, 123)"
+          },
+          {
+            offset: 1,
+            color: "rgb(204, 46, 72)"
+          }
+        ])
+      }
+    },
+    {
+      name: "2015",
+      data: data[1],
+      type: "scatter",
+      symbolSize(data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data }) {
+            return data[3];
+          },
+          position: "top"
+        }
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(25, 100, 150, 0.5)",
+        shadowOffsetY: 5,
+        color: new graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: "rgb(129, 227, 238)"
+          },
+          {
+            offset: 1,
+            color: "rgb(25, 183, 207)"
+          }
+        ])
+      }
+    }
+  ]
+};

src/components/CMapsEsempio/index.ts

@@ -0,0 +1 @@
+export {default as CMapsEsempio} from './CMapsEsempio.vue'

src/components/CMapsEsempio/theme.json

@@ -0,0 +1,394 @@
+{
+  "color": ["#4ea397", "#22c3aa", "#7bd9a5"],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#666666"
+    },
+    "subtextStyle": {
+      "color": "#999999"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": "0",
+      "barBorderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "barBorderWidth": "0",
+        "barBorderColor": "#444444"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#d0648a",
+      "color0": "#ffffff",
+      "borderColor": "#d0648a",
+      "borderColor0": "#22c3aa",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "lineStyle": {
+      "width": 1,
+      "color": "#aaa"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": ["#4ea397", "#22c3aa", "#7bd9a5"],
+    "label": {
+      "color": "#ffffff"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#eeeeee",
+      "borderColor": "#999999",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(34,195,170,0.25)",
+        "borderColor": "#22c3aa",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "rgb(52,158,142)"
+      }
+    },
+    "label": {
+      "color": "#28544e"
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#eeeeee",
+      "borderColor": "#999999",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(34,195,170,0.25)",
+        "borderColor": "#22c3aa",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "rgb(52,158,142)"
+      }
+    },
+    "label": {
+      "color": "#28544e"
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#aaaaaa"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#999999"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#349e8e",
+      "width": 1
+    },
+    "itemStyle": {
+      "color": "#349e8e",
+      "borderWidth": "1"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#57e8d2"
+      }
+    },
+    "controlStyle": {
+      "color": "#349e8e",
+      "borderColor": "#349e8e",
+      "borderWidth": "0"
+    },
+    "checkpointStyle": {
+      "color": "#22c3aa",
+      "borderColor": "rgba(34,195,170,0.25)"
+    },
+    "label": {
+      "color": "#349e8e"
+    }
+  },
+  "visualMap": {
+    "color": ["#d0648a", "#22c3aa", "rgba(123,217,165,0.2)"]
+  },
+  "dataZoom": {
+    "backgroundColor": "#fff",
+    "dataBackgroundColor": "#dedede",
+    "fillerColor": "rgba(34,195,170,0.25)",
+    "handleColor": "#dddddd",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#999"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#ffffff",
+      "emphasis": {
+        "textStyle": {
+          "color": "#ffffff"
+        }
+      }
+    }
+  }
+}

src/components/CMyEditor/CMyEditor.vue

@@ -9,11 +9,12 @@
       </q-toolbar>
       <q-card-section class="inset-shadow" style="padding: 4px !important;">
 
-        <CTitleBanner :title="title"></CTitleBanner>
+        <CTitleBanner v-if="title" :title="title"></CTitleBanner>
         <form
           autocapitalize="off"
           autocomplete="off"
-          spellcheck="false">
+          spellcheck="false"
+          >
 
           <q-btn rounded size="sm" color="primary">
             <q-icon name="colorize" class="cursor-pointer">

src/components/CMyFieldDb/CMyFieldDb.scss

@@ -15,3 +15,10 @@
 .cldisable{
   color: gray !important;
 }
+
+.clinput{
+  @media (max-width: 500px) {
+    display: flex;
+    flex-grow: 1;
+  }
+}

src/components/CMyFieldDb/CMyFieldDb.ts

@@ -9,11 +9,13 @@ import { tools } from '@store/Modules/tools'
 import { toolsext } from '@store/Modules/toolsext'
 import { costanti } from '@costanti'
 import MixinBase from '../../mixins/mixin-base'
+import MixinUsers from '../../mixins/mixin-users'
 import { CMyEditor } from '@/components/CMyEditor'
 import { CMySelect } from '@/components/CMySelect'
 import { CMyChipList } from '@/components/CMyChipList'
 import { CMyToggleList } from '@/components/CMyToggleList'
 import { CDateTime } from '@/components/CDateTime'
+import { CGallery } from '@/components/CGallery'
 
 
 export default defineComponent({
@@ -82,7 +84,7 @@ export default defineComponent({
       default: '',
     },
   },
-  components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList, CDateTime },
+  components: { CMyEditor, CMySelect, CMyChipList, CMyToggleList, CDateTime, CGallery },
   setup(props, { emit }) {
     const $q = useQuasar()
     const { t } = useI18n()
@@ -97,6 +99,7 @@ export default defineComponent({
     const countryname = ref('')
 
     const { setValDb, getValDb } = MixinBase()
+    const { getMyUsername } = MixinUsers()
 
     function crea() {
 
@@ -221,6 +224,21 @@ export default defineComponent({
       }
     }
 
+    function uploaded(info: any) {
+
+      if (info.files) {
+        myvalue.value = tools.geturlrelativeprofile()+ '/' + getMyUsername() + '/' + info.files[0].name
+        console.log('uploaded', myvalue.value)
+        savefield(myvalue.value, '', $q)
+      }
+      // info.files[0].name
+    }
+
+    function removephoto() {
+      myvalue.value = ''
+      savefield(myvalue.value, '', $q)
+    }
+
     crea()
 
     return {
@@ -241,6 +259,9 @@ export default defineComponent({
       myq: $q,
       fieldsTable,
       globalStore,
+      uploaded,
+      getMyUsername,
+      removephoto,
     }
   },
 })

src/components/CMyFieldDb/CMyFieldDb.vue

@@ -19,9 +19,8 @@
           </template>
         </q-field>
       </div>
-      <div :class="getclassCol(col) + ` q-ma-sm q-pa-sm col-grow rounded-borders`" style="border: 1px solid #bbb">
+      <div :class="getclassCol(col) + ` q-ma-sm q-pa-sm col-grow rounded-borders `" style="border: 1px solid #bbb">
         <div v-if="type === costanti.FieldType.date">
-          Date10:
           <CDateTime
             :label="col.label"
             class="cursor-pointer"
@@ -33,7 +32,6 @@
           </CDateTime>
         </div>
         <div v-else-if="type === costanti.FieldType.onlydate">
-          Date11:
           <CDateTime
             :label="col.label"
             class="cursor-pointer"
@@ -103,6 +101,25 @@
               :optlab="fieldsTable.getLabelByTable(col.jointable)"
               :opticon="fieldsTable.getIconByTable(col.jointable)"></CMyChipList>
           </div>
+          <div v-else-if="type === costanti.FieldType.image">
+
+            <div v-if="myvalue" class="text-center">
+              <q-img
+                :src="myvalue"
+                class="text-center"
+                style="height: 100px; width: 100px;"
+                alt="foto del profilo">
+              </q-img>
+            </div>
+            <div v-else class="text-center">
+              <q-img
+                src="images/noimg-user.svg"
+                class="text-center"
+                style="height: 100px; width: 100px;"
+                alt="nessuna immagine">
+              </q-img>
+            </div>
+          </div>
           <div v-else-if="type === costanti.FieldType.html">
             <div v-html="myvalprinted()">
 
@@ -125,6 +142,7 @@
             @save="(val, initialValue) => savefield(val, initialValue, myq)"
             buttons
             v-slot="scope"
+            class="clinput"
           >
 
             <div v-if="type === costanti.FieldType.boolean">
@@ -135,8 +153,9 @@
             </div>
             <div v-else-if="type === costanti.FieldType.string">
               <q-input
+                :label="title"
                 v-model="scope.value"
-                autogrow
+                :autogrow="$q.screen.gt.md"
                 @keyup.enter.stop
                 autofocus>
 
@@ -271,10 +290,33 @@
             </div>
             <div v-else-if="col.fieldtype === costanti.FieldType.multioption">
             </div>
+            <div v-else-if="col.fieldtype === costanti.FieldType.image">
+              <q-uploader
+                label="Aggiungi Foto"
+                accept=".jpg, image/*"
+                :url="tools.geturlupload()+ tools.escapeslash(`profile/` + getMyUsername())"
+                :headers="tools.getheaders()"
+                :max-file-size="2000000"
+                auto-upload
+                hide-upload-btn
+                @uploaded="uploaded"
+                style="width: 208px"
+              ></q-uploader>
+
+            </div>
 
           </q-popup-edit>
         </div>
       </div>
+      <div>
+        <div v-if="type === costanti.FieldType.image">
+          <q-btn
+            v-if="myvalue"
+            label="Rimuovi Foto"
+            color="blue" icon="fas fa-trash-alt" size="sm"
+            @click="removephoto"></q-btn>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/components/CMyPopupEdit/CMyPopupEdit.ts

@@ -67,7 +67,11 @@ export default defineComponent({
       required: false,
       default: false,
     },
-
+    table: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   components: { CMyChipList, CDateTime, CDate, CMyToggleList, CMySelect, CMyEditor, CGallery },
   setup(props, { emit }) {
@@ -76,11 +80,11 @@ export default defineComponent({
     const userStore = useUserStore()
     const globalStore = useGlobalStore()
 
-    const myvalue = ref('')
+    const myvalue = ref(<any>'')
     const myvalueprec = ref('false')
     const countryname = ref('')
     const visueditor = ref(false)
-    const showeditor = ref(true)
+    const showeditor = ref(false)
 
     const myrow = toRef(props, 'row')
 
@@ -89,8 +93,8 @@ export default defineComponent({
     }
 
     function changeval(newval: any) {
-      console.log('changeval update:row', newval)
-      emit('update:row', newval)
+      // console.log('changeval update:row', newval)
+      emit('update:row', props.row)
     }
 
     function getrealval(newval: any) {
@@ -100,10 +104,10 @@ export default defineComponent({
     }
 
     function changevalRec(newval: any) {
-      console.log('row', props.row, 'col', props.col, 'newval', newval)
-      console.log('row[col.name]', props.row[props.col.name])
+      // console.log('row', props.row, 'col', props.col, 'newval', newval)
+      // console.log('row[col.name]', props.row[props.col.name])
       myrow.value[props.col.name] = newval
-      console.log('changevalRec update:row', newval)
+      // console.log('changevalRec update:row', newval)
       emit('update:row', props.row)
     }
 
@@ -138,6 +142,25 @@ export default defineComponent({
         }
       }
 
+      if (props.col.fieldtype === costanti.FieldType.listimages) {
+        if (myvalue.value === '' || myvalue.value === undefined) {
+          console.log('set default myvalue.value ')
+          myvalue.value = {
+            title: 'Galleria',
+            directory: 'none',
+            list: [
+              {
+                _id: '',
+                imagefile: 'noimg.png',
+                order: 0,
+                alt: '',
+                description: '(nessuna foto)'
+              }]
+          }
+        }
+      }
+
+      // console.log('myvalue.value', myvalue.value)
       myvalueprec.value = myvalue.value
 
       // console.log('myvalueprec', myvalueprec)
@@ -309,6 +332,18 @@ export default defineComponent({
       }
     }
 
+    function getTitleGall() {
+      return fieldsTable.getTitleImgByTable(props.table);
+    }
+    function getDirectoryGall() {
+      if (fieldsTable.tableForUsers.includes(props.table)) {
+        return 'profile/' + userStore.my.username + '/' + props.table
+      } else {
+        return props.table
+      }
+
+    }
+
     onMounted(mounted)
 
     return {
@@ -336,6 +371,8 @@ export default defineComponent({
       fieldsTable,
       onInput,
       globalStore,
+      getTitleGall,
+      getDirectoryGall,
     }
   }
 })

src/components/CMyPopupEdit/CMyPopupEdit.vue

@@ -83,8 +83,12 @@
 
         </div>
         <div v-else-if="col.fieldtype === costanti.FieldType.listimages">
+          Galleria:
           <CGallery
-            :gall="row" :listimages="myvalue" :edit="isviewfield()"
+            v-if="myvalue"
+            :title="getTitleGall()"
+            :directory="getDirectoryGall()"
+            :imgGall="myvalue" :edit="isviewfield()"
             @showandsave="Savedb"
             @update:model-value="changevalRec"
           >
@@ -92,8 +96,12 @@
           </CGallery>
         </div>
         <div v-else-if="col.fieldtype === costanti.FieldType.image">
+
           <CGallery
-            :gall="row" :listimages="myvalue" :edit="isviewfield()"
+            v-if="myvalue"
+            :title="getTitleGall()"
+            :directory="getDirectoryGall()"
+            :imgGall="myvalue" :edit="isviewfield()"
             @update:model-value="changevalRec"
             @showandsave="Savedb">
 
@@ -149,14 +157,20 @@
     <div v-else>
       <div v-if="col.fieldtype === costanti.FieldType.listimages">
         <CGallery
-          :gall="row" :listimages="myvalue" :edit="isviewfield()"
+          v-if="myvalue"
+          :title="getTitleGall()"
+          :directory="getDirectoryGall()"
+          :imgGall="myvalue" :edit="isviewfield()"
           @showandsave="Savedb">
 
         </CGallery>
       </div>
       <div v-else-if="col.fieldtype === costanti.FieldType.image">
         <CGallery
-          :gall="row" :listimages="myvalue" :edit="isviewfield()"
+          v-if="myvalue"
+          :title="getTitleGall()"
+          :directory="getDirectoryGall()"
+          :imgGall="myvalue" :edit="isviewfield()"
           @showandsave="Savedb">
 
         </CGallery>
@@ -252,13 +266,17 @@
 
             <div v-if="col.fieldtype === costanti.FieldType.html">
 
-              <!--<q-dialog v-model="showeditor">-->
-              <CMyEditor
-                v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
-                @showandsave="Savedb" @annulla="visueditor=false">
+              <q-dialog v-model="visueditor" no-backdrop-dismiss persistent full-height full-width>
+                <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+                  <q-card-section>
+                    <CMyEditor
+                      v-if="visueditor" v-model:value="myvalue" :title="col.title" @keyup.enter.stop
+                      @showandsave="Savedb" @annulla="visueditor=false">
 
-              </CMyEditor>
-              <!--</q-dialog>-->
+                    </CMyEditor>
+                  </q-card-section>
+                </q-card>
+              </q-dialog>
             </div>
 
             <q-popup-edit
@@ -383,11 +401,22 @@
                   emit-value
                   map-options
                   :options="globalStore.getTableJoinByName(col.jointable)"
-                  :option-label="fieldsTable.getLabelByTable(col.jointable)"
-                  :option-value="fieldsTable.getKeyByTable(col.jointable)"
                   style="min-width: 150px"
+                  :option-value="fieldsTable.getKeyByTable(col.jointable)"
                   @update:model-value="changeval">
 
+                  <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+                    <q-item v-bind="itemProps">
+
+                      <q-item-section>
+                        <q-item-label>{{ opt[fieldsTable.getLabelByTable(col.jointable)] }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section side>
+                        <q-toggle :model-value="selected" @update:model-value="toggleOption(opt)" />
+                      </q-item-section>
+                    </q-item>
+                  </template>
+
                 </q-select>
               </div>
             </q-popup-edit>

src/mixins/mixin-base.ts

@@ -23,6 +23,7 @@ export default function () {
     tools.showNotif($q, t(msg))
   }
 
+
   function db_fieldsTable() {
     return fieldsTable
   }

src/model/GlobalStore.ts

@@ -242,6 +242,7 @@ export interface IGlobalState {
   skills: ISkill[],
   statusSkills: IStatusSkill[],
   sectors: ISector[],
+  cities: ICity[],
 }
 
 export interface IMenuList {
@@ -566,12 +567,22 @@ export interface ILevel {
   years_of_exp: number
 }
 
+export interface ICity {
+  _id: number
+  istat: string
+  comune: string
+  prov: string
+}
+
 export interface IMySkill {
   _id: number
   idSkill: number
   idStatusSkill: number[]
+  idCity: number[]
+  photos: IGallery[]
   NumLevel: number
   note: string
+  subTitle: string
   date_created?: Date,
   date_updated?: Date,
 }

src/model/signup-option.ts

@@ -40,6 +40,7 @@ export interface ISignupIscrizioneConacreisOptions {
   codiceConacreis?: string
   annoTesseramento?: number
   numTesseraInterna?: number
+  biografia?: string
   motivazioni?: string
   competenze_professionalita?: string
   cosa_potrei_offrire?: string

src/root/home/home.ts

@@ -5,11 +5,13 @@ import {
 
 import { tools } from '@src/store/Modules/tools'
 import { CSkill } from '@/components/CSkill'
+import { CChartMap } from '@src/components/CChartMap'
+import { CMapsEsempio } from '@src/components/CMapsEsempio'
 
 
 export default defineComponent({
   name: 'Home',
-  components: { CSkill },
+  components: { CSkill, CChartMap, CMapsEsempio },
   setup() {
 
     return {

src/root/home/home.vue

@@ -6,6 +6,16 @@
 
     </CSkill>
 
+    <!--<CChartMap
+      title="Mappa"
+      subtitle="cartina..."
+      serie1="Serie 1"
+    >
+
+    </CChartMap>-->
+
+    <!--<CMapsEsempio></CMapsEsempio>-->
+
   </q-page>
 
 </template>

src/rootgen/admin/uploader/uploader.vue

@@ -4,7 +4,7 @@
             <q-uploader
                     label="Galleria Home"
                     accept=".jpg, image/*"
-                    :url="tools.geturlupload()+`/gallery_home/${tools.getvers()}`"
+                    :url="tools.geturlupload()+`gallery_home`"
                     :headers="tools.getheaders()"
                     :max-file-size="2000000"
                     multiple
@@ -14,7 +14,7 @@
             <q-uploader
                     label="Immagini"
                     accept=".jpg, image/*"
-                    :url="tools.geturlupload()+`/img/${tools.getvers()}`"
+                    :url="tools.geturlupload()+`img`"
                     :headers="tools.getheaders()"
                     :max-file-size="1000000"
                     multiple
@@ -24,7 +24,7 @@
             <q-uploader
                     label="Invia PDF"
                     accept=".pdf"
-                    :url="tools.geturlupload()+`/pdf/${tools.getvers()}`"
+                    :url="tools.geturlupload()+`pdf`"
                     :headers="tools.getheaders()"
                     multiple
                     style="max-width: 300px"

src/statics/lang/it.js

@@ -451,12 +451,13 @@ const msg_it = {
       accetta_carta_costituzionale_on: 'Ho letto ed Approvo il Progetto',
       iscriviti: 'Iscriviti',
       motivazioni: 'Motivazioni sul perchè intendi iscriverti alla CNM:',
+      biografia: 'Biografia',
       competenze_professionalita: 'Descrivi le tue competenze e professionalità',
       cosa_potrei_offrire: 'Cosa potresti offrire?',
       cosa_vorrei_ricevere: 'Cosa vorresti ricevere? (cosa ti aspetti?)',
       altre_comunicazioni: 'Scrivi altre eventuali informazioni o comunicazioni:',
       come_ci_hai_conosciuto: 'Come ci hai conosciuto?',
-
+      photo: 'Foto',
       err: {
         required: 'è richiesto',
         email: 'inserire una email valida',
@@ -764,6 +765,8 @@ const msg_it = {
     },
     skill: {
       name: 'Competenza',
+      city: 'Città',
+      photos: 'Foto',
     },
     level: {
       name: 'Livello',

src/store/Modules/fieldsTable.ts

@@ -347,6 +347,19 @@ export const colmySkills = [
     fieldtype: costanti.FieldType.multiselect,
     jointable: 'statusSkills',
   }),
+  AddCol({
+    name: 'idCity',
+    label_trans: 'skill.city',
+    fieldtype: costanti.FieldType.multiselect,
+    jointable: 'cities',
+  }),
+  AddCol({
+    name: 'photos',
+    label_trans: 'skill.photos',
+    fieldtype: costanti.FieldType.listimages,
+    jointable: '',
+  }),
+  AddCol({ name: 'subTitle', label_trans: 'event.title' }),
   AddCol({ name: 'note', label_trans: 'proj.longdescr', fieldtype: costanti.FieldType.html }),
   AddCol(DeleteRec),
   AddCol(DuplicateRec),
@@ -760,6 +773,11 @@ export const fieldsTable = {
     if (myrec) return myrec.label
     return ''
   },
+  getTitleImgByTable(mytable: string): string {
+    const myrec = this.getrecTableList(mytable)
+    if (myrec) return myrec.label
+    return ''
+  },
   getIconByTable(mytable: string): string {
     const myrec: any = this.getrecTableList(mytable)
     if (myrec) return ((myrec.icon) ? myrec.icon : '')
@@ -1102,9 +1120,8 @@ export const fieldsTable = {
       label_trans: 'reg.consiglio',
       fieldtype: costanti.FieldType.boolean,
     }),
-    AddCol({
-      name: 'profile.motivazioni', field: 'profile', subfield: 'motivazioni', label_trans: 'reg.motivazioni',
-    }),
+    AddCol({ name: 'profile.motivazioni', field: 'profile', subfield: 'motivazioni', label_trans: 'reg.motivazioni', }),
+    AddCol({ name: 'profile.biografia', field: 'profile', subfield: 'biografia', label_trans: 'reg.biografia', }),
     AddCol({
       name: 'profile.competenze_professionalita',
       field: 'profile',
@@ -1216,6 +1233,10 @@ export const fieldsTable = {
     AddCol({ name: 'notes', label_trans: 'reg.note' }),
   ],
 
+  tableForUsers: [
+    'myskills'
+  ],
+
   tablesList: [
     {
       value: 'operators',
@@ -1454,7 +1475,7 @@ export const fieldsTable = {
       collabel: 'descr',
     },
     {
-      value: 'citys',
+      value: 'cities',
       label: 'Città',
       columns: colCitys,
       colkey: '_id',

src/store/Modules/tools.ts

@@ -2645,8 +2645,7 @@ export const tools = {
       maxh2 = 500
 
     return maxh2
-  }
-  ,
+  },
 
   myheight_imgtitle(myheight?: number, myheightmobile?: number) {
     let maxheight = 0
@@ -3357,7 +3356,13 @@ export const tools = {
     }
   },
   geturlupload() {
-    return process.env.MONGODB_HOST + '/upload'
+    return process.env.MONGODB_HOST + `/uploadnew/${this.getvers()}/`
+  },
+  escapeslash(mystr: string) {
+    return mystr.replace(/\//g, '-');
+  },
+  geturlrelativeprofile() {
+    return 'upload/profile'
   },
   getvers() {
     return process.env.APP_VERSION

src/store/globalStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import {
-  ICfgServer,
+  ICfgServer, ICity,
   IColGridTable,
   IConfig,
   IDataToSet,
@@ -120,6 +120,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
     skills: [],
     statusSkills: [],
     sectors: [],
+    cities: [],
   }),
 
   getters: {
@@ -181,7 +182,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
     },
 
     getListByTable: (state: IGlobalState) => (table: string): any => {
-      let ris = null
+      let ris: any = []
 
       const calendarStore = useCalendarStore()
       const userStore = useUserStore()
@@ -229,6 +230,8 @@ export const useGlobalStore = defineStore('GlobalStore', {
         return state.statusSkills
       else if (table === 'sectors')
         return state.sectors
+      else if (table === 'cities')
+        return state.cities
       else return ris
 
       return ris
@@ -1128,6 +1131,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
             this.skills = (res.data.skills) ? [...res.data.skills] : []
             this.statusSkills = (res.data.statusSkills) ? [...res.data.statusSkills] : []
             this.sectors = (res.data.sectors) ? [...res.data.sectors] : []
+            this.cities = (res.data.cities) ? [...res.data.cities] : []
 
             // console.log('res.data.cart', res.data.cart)
 

src/views/user/profile/profile.scss

@@ -3,3 +3,10 @@
   margin: 0 auto;
   max-width: 450px;
 }
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}

src/views/user/profile/profile.vue

@@ -5,9 +5,8 @@
       class="q-pa-xs" :title="$t('pages.profile')" bgcolor="bg-primary" clcolor="text-white"
       myclass="myshad" :canopen="true">
 
-
       <div class="column">
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             :title="$t('reg.name')"
             table="users"
@@ -21,7 +20,16 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
+          <CMyFieldDb
+            :title="$t('reg.photo')"
+            table="users"
+            mykey="profile"
+            mysubkey="img"
+            :type="costanti.FieldType.image">
+          </CMyFieldDb>
+        </div>
+        <div class="myrow">
           <CMyFieldDb
             :title="$t('reg.username')"
             table="users"
@@ -44,7 +52,7 @@
           mysubkey="nationality"
           :type="costanti.FieldType.nationality">
         </CMyFieldDb>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             :title="$t('reg.intcode_cell')"
             table="users"
@@ -62,7 +70,7 @@
         </div>
 
         <br/>
-        <div class="row justify-center">
+        <div class="myrow justify-center">
           <q-btn
             push
             rounded
@@ -80,9 +88,21 @@
       class="q-pa-xs" title="Informazioni su di te" bgcolor="bg-primary" clcolor="text-white"
       myclass="myshad" :canopen="true">
 
-
       <div class="column">
-        <div class="row">
+        <div class="myrow">
+          <CMyFieldDb
+            title="Biografia"
+            table="users"
+            mykey="profile"
+            mysubkey="biografia"
+            :type="costanti.FieldType.string">
+          </CMyFieldDb>
+        </div>
+      </div>
+
+      <!--
+      <div class="column">
+        <div class="myrow">
           <CMyFieldDb
             title="Motivazioni"
             table="users"
@@ -91,7 +111,7 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             title="Competenze e Professionalità"
             table="users"
@@ -100,7 +120,7 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             title="Cosa potrei offrire?"
             table="users"
@@ -109,7 +129,7 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             title="Cosa vorrei ricevere?"
             table="users"
@@ -118,7 +138,7 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             title="Altre Comunicazioni"
             table="users"
@@ -127,7 +147,7 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="row">
+        <div class="myrow">
           <CMyFieldDb
             title="Come ci hai conosciuto?"
             table="users"
@@ -137,12 +157,14 @@
           </CMyFieldDb>
         </div>
       </div>
+      -->
+
     </CTitleBanner>
 
     <!--
     <CTitleBanner class="q-pa-xs" :title="$t('pages.payment')" bgcolor="bg-primary" clcolor="text-white"
                    myclass="myshad" :canopen="true">
-      <div class="row fa-border justify-center items-center">
+      <div class="myrow fa-border justify-center items-center">
 
         <CMyFieldDb v-if="costanti.isselectPayeer()"
                     :title="$t('reg.payeer_id')"

yarn.lock

@@ -4786,6 +4786,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.2.1.tgz#bd58ec011cd82def4a714e4038ef4b73b8417bc3"
+  integrity sha512-OJ79b22eqRfbSV8vYmDKmA+XWfNbr0Uk/OafWcFNIGDWti2Uw9A6eVCiJLmqPa9Sk+EWL+t5v26aak0z3gxiZw==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.2.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -10607,6 +10615,11 @@ reselect@^4.0.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
   integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
 
+resize-detector@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.3.0.tgz#fe495112e184695500a8f51e0389f15774cb1cfc"
+  integrity sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -11891,6 +11904,11 @@ tslib@1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.0.tgz#e37a86fda8cbbaf23a057f473c9f4dc64e5fc2e8"
   integrity sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.13.0, tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -12336,11 +12354,19 @@ vue-country-code@^1.1.2:
   resolved "https://registry.yarnpkg.com/vue-country-code/-/vue-country-code-1.1.2.tgz#80884c2a6c026867902be7472a974eb266108401"
   integrity sha512-vNPpwZXg5UtOHVhBJS57QNr4t9Pixr5piBazgrSRYDz6GvoJF5kNf6+GMHR4HnaWPOO4vSPDzy1UKL4eqk7rUA==
 
-vue-demi@*, vue-demi@^0.11.3:
+vue-demi@*, vue-demi@^0.11.2, vue-demi@^0.11.3:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
   integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==
 
+vue-echarts@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-6.0.0.tgz#480263fc6ed2125b886bb1b7f05bf9273edee552"
+  integrity sha512-eB3fnnu8Oc+kwVTlBz95o/rliTbWIiUdxTG7vRQIIgRpINWW07WLSPm+UhlD6FZ/P8IqCoVG87pJeLRKsaHeMw==
+  dependencies:
+    resize-detector "^0.3.0"
+    vue-demi "^0.11.2"
+
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -13181,3 +13207,10 @@ zip-stream@^4.1.0:
     archiver-utils "^2.1.0"
     compress-commons "^4.1.0"
     readable-stream "^3.6.0"
+
+zrender@5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
+  integrity sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==
+  dependencies:
+    tslib "2.3.0"