extends ../../../layouts/LayoutComponent

block append variables           
  - 
    var pageHeader = {
      title: 'Echarts',
      description: 'A powerful, interactive charting and visualization library for browser.',
      url: `https://echarts.apache.org/en/option.html#title`,
      linkText: 'Documentation for EChart'
    }

block prepend scripts
  script(src=`${CWD}vendors/lodash/lodash.min.js`)
  script(src=`${CWD}vendors/echarts/echarts.min.js`)
  script(src=`${CWD}vendors/dayjs/dayjs.min.js`)
  script(src=`${CWD}assets/js/echarts-example.js`)

block append content

  .row.g-3.mb-3

    .col-lg-6
      +ComponentCard({
        title:'Basic gauge chart',
        anchor:true
      }).h-100
        .echart-basic-gauge-chart-example(style="min-height: 300px;" data-echart-responsive="true")

    .col-lg-6
      +ComponentCard({
        title:'Gauge progress chart',
        anchor:true
      }).h-100
        .echart-gauge-progress-chart-example(style="min-height: 300px;" data-echart-responsive="true")

  .row.g-3.mb-3

    .col-lg-6
      +ComponentCard({
        title:'Gauge ring chart',
        anchor:true
      }).h-100
        .echart-gauge-ring-chart-example(style="min-height: 300px;" data-echart-responsive="true")

    .col-lg-6
      +ComponentCard({
        title:'Gauge multi ring chart',
        anchor:true
      }).h-100
        .echart-gauge-multi-ring-chart-example(style="min-height: 300px;" data-echart-responsive="true")

  .row.g-3

    .col-lg-6
      +ComponentCard({
        title:'Gauge multi title chart',
        anchor:true
      }).h-100
        .echart-gauge-multi-title-chart-example(style="min-height: 300px;" data-echart-responsive="true")

    .col-lg-6
      +ComponentCard({
        title:'Gauge grade chart',
        anchor:true
      }).h-100
        .echart-gauge-grade-chart-example(style="min-height: 300px;" data-echart-responsive="true")