extends ../../layouts/LayoutComponent

append variables

  -
    var pageHeader = {
      title: 'Getting Started',
      description: `ECharts can uses geoJSON format as map outline. You can use third-party <a href="https://geojson.org/" target="_blank">geoJSON</a> data (like maps) and register them into ECharts. You can get the JSON data from this <a href="https://github.com/pissang/starbucks/tree/gh-pages/json">Starbuck\'s Github repository</a>.`,
      url: `https://echarts.apache.org/en/option.html#series-map.type`,
      linkText: 'Echart\'s map documentation',
    }

prepend scripts
  script(src=`${CWD}vendors/echarts/echarts.min.js`)
  script(src=`${CWD}assets/data/world.js`)
  script(src=`${CWD}assets/data/usa.js`)

append scripts
  script(src=`${CWD}assets/js/echarts-example.js`)

block component
  .row.g-4.mb-9.mt-2
    .col-xl-6
      +ComponentCard({title:'World map'})
        .position-absolute.z-2(style='right:16px')
          button.btn.btn-phoenix-secondary.btn-sm.session-by-country-map-reset
            span.fas.fa-sync-alt.fs-9
        // Find the JS file for the following chart at: src/js/charts/echarts/session-by-country-map.js
        // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/theme.js
        .echart-session-by-country-map(style="min-height: 400px;")

        h5.mt-3.mb-2 JavaScript 
        +ComponentCardLib 
          script(src="assets/data/world.js") 
    .col-xl-6
      +ComponentCard({title:'Usa map'})
        .position-absolute.z-2(style='right:16px')
          button.btn.btn-phoenix-secondary.btn-sm.usa-map-reset
            span.fas.fa-sync-alt.fs-9
        // Find the JS file for the following chart at: src/js/charts/echarts/examples/map-usa.js
        // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js
        .echart-map-usa-example(style="min-height: 400px;")

        h5.mt-3.mb-2 JavaScript 
        +ComponentCardLib 
          script(src="assets/data/usa.js")