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

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 scatter chart',
        anchor:true
      }).h-100
        // Find the JS file for the following chart at: src/js/charts/echarts/examples/scatter-basic-chart.js
        // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js
        .echart-basic-scatter-chart-example(style="min-height: 300px;" data-echart-responsive="true")

    .col-lg-6
      +ComponentCard({
        title:'Bubble chart',
        anchor:true
      }).h-100
        // Find the JS file for the following chart at: src/js/charts/echarts/examples/bubble-chart.js
        // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js
        .echart-bubble-chart-example(style="min-height: 300px;" data-echart-responsive="true")

  .row.g-3.mb-3

    .col
      +ComponentCard({
        title:'Quartet scatter chart',
        anchor:true
      }).h-100
        // Find the JS file for the following chart at: src/js/charts/echarts/examples/scatter-quartet.js
        // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js
        .echart-scatter-quartet-chart-example(data-echart-responsive="true")

  .row.g-3
    .col
      +ComponentCard({
        title:'Single axis scatter chart',
        anchor:true
      }).h-100
        // Find the JS file for the following chart at: src/js/charts/echarts/examples/scatter-single-axis-chart.js
        // If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/echarts-example.js
        .echart-scatter-single-axis-chart-example(style="min-height: 500px;" data-echart-responsive="true")