(function (factory) {
  typeof define === 'function' && define.amd ? define(factory) :
  factory();
})((function () { 'use strict';

  // import * as echarts from 'echarts';
  const { merge } = window._;

  // form config.js
  const echartSetOption = (
    chart,
    userOptions,
    getDefaultOptions,
    responsiveOptions
  ) => {
    const { breakpoints, resize } = window.phoenix.utils;
    const handleResize = options => {
      Object.keys(options).forEach(item => {
        if (window.innerWidth > breakpoints[item]) {
          chart.setOption(options[item]);
        }
      });
    };

    const themeController = document.body;
    // Merge user options with lodash
    chart.setOption(merge(getDefaultOptions(), userOptions));

    const navbarVerticalToggle = document.querySelector(
      '.navbar-vertical-toggle'
    );
    if (navbarVerticalToggle) {
      navbarVerticalToggle.addEventListener('navbar.vertical.toggle', () => {
        chart.resize();
        if (responsiveOptions) {
          handleResize(responsiveOptions);
        }
      });
    }

    resize(() => {
      chart.resize();
      if (responsiveOptions) {
        handleResize(responsiveOptions);
      }
    });
    if (responsiveOptions) {
      handleResize(responsiveOptions);
    }

    themeController.addEventListener(
      'clickControl',
      ({ detail: { control } }) => {
        if (control === 'phoenixTheme') {
          chart.setOption(window._.merge(getDefaultOptions(), userOptions));
        }
      }
    );
  };
  // -------------------end config.js--------------------

  const echartTabs = document.querySelectorAll('[data-tab-has-echarts]');
  if (echartTabs) {
    echartTabs.forEach(tab => {
      tab.addEventListener('shown.bs.tab', e => {
        const el = e.target;
        const { hash } = el;
        const id = hash || el.dataset.bsTarget;
        const content = document.getElementById(id.substring(1));
        const chart = content?.querySelector('[data-echart-tab]');
        if (chart) {
          window.echarts.init(chart).resize();
        }
      });
    });
  }

  const tooltipFormatter = (params, dateFormatter = 'MMM DD') => {
    let tooltipItem = ``;
    params.forEach(el => {
      tooltipItem += `<div class='ms-1'>
        <h6 class="text-body-tertiary"><span class="fas fa-circle me-1 fs-10" style="color:${
          el.borderColor ? el.borderColor : el.color
        }"></span>
          ${el.seriesName} : ${
      typeof el.value === 'object' ? el.value[1] : el.value
    }
        </h6>
      </div>`;
    });
    return `<div>
            <p class='mb-2 text-body-tertiary'>
              ${
                window.dayjs(params[0].axisValue).isValid()
                  ? window.dayjs(params[0].axisValue).format(dateFormatter)
                  : params[0].axisValue
              }
            </p>
            ${tooltipItem}
          </div>`;
  };

  const handleTooltipPosition = ([pos, , dom, , size]) => {
    // only for mobile device
    if (window.innerWidth <= 540) {
      const tooltipHeight = dom.offsetHeight;
      const obj = { top: pos[1] - tooltipHeight - 20 };
      obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
      return obj;
    }
    return null; // else default behaviour
  };

  const basicLineChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-line-chart-example');
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];

    const data = [
      1000, 1500, 1250, 1010, 1045, 2000, 1200, 1330, 1000, 1200, 1410, 1200
    ];

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs-9 text-body-tertiary mb-0">
          <span class="fas fa-circle me-1" style='color:${params[0].borderColor}'></span>
          ${params[0].name} : ${params[0].value}
        </h6>
    </div>
    `;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: tooltipFormatter,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value => value.substring(0, 3),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: getColor('secondary-bg')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false },
          min: 600
        },
        series: [
          {
            type: 'line',
            data,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 10,
            smooth: false,
            hoverAnimation: true
          }
        ],
        grid: { right: '3%', left: '10%', bottom: '10%', top: '5%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const basicAreaLineChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-area-line-chart-example');
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];
    const data = [
      1020, 1160, 1300, 958, 1240, 1020, 1409, 1200, 1051, 1120, 1240, 1054
    ];

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs-9 text-body-tertiary mb-0">
          <span class="fas fa-circle me-1" style='color:${params[0].borderColor}'></span>
          ${params[0].name} : ${params[0].value}
        </h6>
    </div>
    `;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value => value.substring(0, 3),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false },
          min: 600
        },
        series: [
          {
            type: 'line',
            data,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            showSymbol: false,
            symbolSize: 10,
            symbol: 'circle',
            smooth: false,
            hoverAnimation: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: rgbaColor(getColor('primary'), 0.5)
                  },
                  {
                    offset: 1,
                    color: rgbaColor(getColor('primary'), 0)
                  }
                ]
              }
            }
          }
        ],
        grid: { right: '3%', left: '10%', bottom: '10%', top: '5%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const stackedLineChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-stacked-line-chart-example');
    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position: (...params) => handleTooltipPosition(params),
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          data: days,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            margin: 15,
            formatter: value => value.substring(0, 3)
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg'),
              type: 'dashed'
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: 'Matcha Latte',
            type: 'line',
            symbolSize: 6,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('info'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('info')
            },
            symbol: 'circle',
            stack: 'product',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Milk Tea',
            type: 'line',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('success'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('success')
            },
            symbol: 'circle',
            stack: 'product',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Cheese Cocoa',
            type: 'line',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('danger'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('danger')
            },
            symbol: 'circle',
            stack: 'product',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Cheese Brownie',
            type: 'line',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('warning'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('warning')
            },
            symbol: 'circle',
            stack: 'product',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Matcha Cocoa',
            type: 'line',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            symbol: 'circle',
            stack: 'product',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ],
        grid: { right: 10, left: 5, bottom: 5, top: 8, containLabel: true }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const stackedAreaChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-stacked-area-chart-example');
    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position: (...params) => handleTooltipPosition(params),
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          data: days,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            margin: 15,
            formatter: value => value.substring(0, 3)
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: 'Matcha Latte',
            type: 'line',
            symbolSize: 10,
            stack: 'product',
            data: [120, 132, 101, 134, 90, 230, 210],
            areaStyle: {
              color: rgbaColor(getColor('info'), 0.3)
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('info'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('info')
            },
            symbol: 'circle'
          },
          {
            name: 'Milk Tea',
            type: 'line',
            symbolSize: 10,
            stack: 'product',
            data: [220, 182, 191, 234, 290, 330, 310],
            areaStyle: {
              color: rgbaColor(getColor('success'), 0.3)
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('success'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('success')
            },
            symbol: 'circle'
          },
          {
            name: 'Cheese Cocoa',
            type: 'line',
            symbolSize: 10,
            stack: 'product',
            data: [150, 232, 201, 154, 190, 330, 410],
            areaStyle: {
              color: rgbaColor(getColor('danger'), 0.3)
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('danger'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('danger')
            },
            symbol: 'circle'
          },
          {
            name: 'Cheese Brownie',
            type: 'line',
            symbolSize: 10,
            stack: 'product',
            data: [320, 332, 301, 334, 390, 330, 320],
            areaStyle: {
              color: rgbaColor(getColor('warning'), 0.3)
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('warning'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('warning')
            },
            symbol: 'circle'
          },
          {
            name: 'Matcha Cocoa',
            type: 'line',
            symbolSize: 10,
            stack: 'product',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            areaStyle: {
              color: rgbaColor(getColor('primary'), 0.3)
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            symbol: 'circle'
          }
        ],
        grid: { right: 10, left: 5, bottom: 5, top: 8, containLabel: true }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const lineMarkerChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-line-marker-chart-example');
    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [
          getColor('primary'),
          getColor('warning')
          // getColor('danger')
        ],
        legend: {
          data: [
            {
              name: 'Max',
              textStyle: {
                color: getColor('quaternary-color')
              }
            },
            {
              name: 'Min',
              textStyle: {
                color: getColor('quaternary-color')
              }
            }
          ]
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: tooltipFormatter
        },
        xAxis: {
          type: 'category',
          data: days,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('quaternary-color'),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: 'Max',
            type: 'line',
            data: [10, 11, 13, 11, 12, 9, 12],
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            symbol: 'circle',
            markPoint: {
              itemStyle: {
                color: getColor('primary')
              },
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              lineStyle: {
                color: getColor('primary')
              },
              label: {
                color: getColor('quaternary-color')
              },
              data: [{ type: 'average', name: 'average' }]
            }
          },
          {
            name: 'Min',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('danger'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('danger')
            },
            symbol: 'circle',
            markPoint: {
              itemStyle: {
                color: getColor('danger')
              },
              label: {
                color: '#fff'
              },
              data: [{ name: 'Weekly lowest', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              lineStyle: {
                color: getColor('danger')
              },
              label: {
                color: getColor('quaternary-color')
              },
              data: [
                { type: 'average', name: 'average' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: 'Highest point'
                  }
                ]
              ]
            }
          }
        ],
        grid: { right: '5%', left: '5%', bottom: '10%', top: '15%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const areaPiecesChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-area-pieces-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            margin: 15,
            formatter: value => window.dayjs(value).format('MMM DD')
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        visualMap: {
          type: 'piecewise',
          show: false,
          dimension: 0,
          seriesIndex: 0,
          pieces: [
            {
              gt: 1,
              lt: 3,
              color: rgbaColor(getColor('primary'), 0.4)
            },
            {
              gt: 5,
              lt: 7,
              color: rgbaColor(getColor('primary'), 0.4)
            }
          ]
        },
        series: [
          {
            type: 'line',
            name: 'Total',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
              color: getColor('primary'),
              width: 5
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
            },
            areaStyle: {},
            data: [
              ['2019-10-10', 100],
              ['2019-10-11', 300],
              ['2019-10-12', 450],
              ['2019-10-13', 300],
              ['2019-10-14', 250],
              ['2019-10-15', 750],
              ['2019-10-16', 650],
              ['2019-10-17', 550],
              ['2019-10-18', 200]
            ]
          }
        ],
        grid: { right: 20, left: 5, bottom: 5, top: 8, containLabel: true }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const stepLineChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-step-line-chart-example');

    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [getColor('danger'), getColor('warning'), getColor('primary')],

        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          data: days,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('quaternary-color'),
            margin: 15
          },
          splitLine: {
            show: false
          },
          axisPointer: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: 'Step Start',
            type: 'line',
            step: 'start',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            symbol: 'circle',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Step Middle',
            type: 'line',
            step: 'middle',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('warning'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('warning')
            },
            symbol: 'circle',
            data: [220, 282, 201, 234, 290, 430, 410]
          },
          {
            name: 'Step End',
            type: 'line',
            step: 'end',
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('danger'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('danger')
            },
            symbol: 'circle',
            data: [450, 432, 401, 454, 590, 530, 510]
          }
        ],
        grid: { right: '3%', left: '8%', bottom: '10%', top: '5%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const lineGradientChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-line-gradient-chart-example'
    );

    const data = [
      ['2021-06-05', 116],
      ['2021-06-06', 129],
      ['2021-06-07', 135],
      ['2021-06-08', 86],
      ['2021-06-09', 73],
      ['2021-06-10', 85],
      ['2021-06-11', 73],
      ['2021-06-12', 68],
      ['2021-06-13', 92],
      ['2021-06-14', 130],
      ['2021-06-15', 245],
      ['2021-06-16', 139],
      ['2021-06-17', 115],
      ['2021-06-18', 111],
      ['2021-06-19', 309],
      ['2021-06-20', 206],
      ['2021-06-21', 137],
      ['2021-06-22', 128],
      ['2021-06-23', 85],
      ['2021-06-24', 94],
      ['2021-06-25', 71],
      ['2021-06-26', 106],
      ['2021-06-27', 84],
      ['2021-06-28', 93],
      ['2021-06-29', 85],
      ['2021-06-30', 73],
      ['2021-07-01', 83],
      ['2021-07-02', 125],
      ['2021-07-03', 107],
      ['2021-07-04', 82],
      ['2021-07-05', 44],
      ['2021-07-06', 72],
      ['2021-07-07', 106],
      ['2021-07-08', 107],
      ['2021-07-09', 66],
      ['2021-07-10', 91],
      ['2021-07-11', 92],
      ['2021-07-12', 113],
      ['2021-07-13', 107],
      ['2021-07-14', 250],
      ['2021-07-15', 111],
      ['2021-07-16', 350],
      ['2021-07-17', 150],
      ['2021-07-18', 420],
      ['2021-07-19', 77],
      ['2021-07-20', 83],
      ['2021-07-21', 111],
      ['2021-07-22', 57],
      ['2021-07-23', 55],
      ['2021-07-24', 60]
    ];

    const dateList = data.map(item => {
      return item[0];
    });
    const valueList = data.map(item => {
      return item[1];
    });

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        visualMap: {
          show: false,
          type: 'continuous',
          dimension: 0,
          min: 0,
          max: dateList.length - 1,
          color: [getColor('danger'), getColor('warning')]
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          data: dateList,
          axisLabel: {
            formatter: value => window.dayjs(value).format('MMM DD'),
            color: getColor('quaternary-color'),
            margin: 15
          },
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisPointer: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg'),
              type: 'dashed'
            }
          }
        },
        grid: { right: '3%', left: '8%', bottom: '10%', top: '5%' },
        series: {
          name: 'Total',
          type: 'line',
          showSymbol: false,
          symbolSize: 10,
          symbol: 'circle',
          data: valueList,
          itemStyle: {
            borderWidth: 2
          }
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const dynamicLineChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-dynamic-line-chart-example');

    const data = [];
    let now = +new Date(1997, 9, 3);
    const oneDay = 24 * 3600 * 1000;
    let value = Math.random() * 1000;

    const randomData = () => {
      now = new Date(+now + oneDay);
      value = value + Math.random() * 21 - 10;
      return {
        name: now.toString(),
        value: [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
          Math.round(value)
        ]
      };
    };

    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < 1000; i++) {
      data.push(randomData());
    }

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: getColor('quaternary-color')
          },

          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisPointer: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          },
          axisLabel: {
            color: getColor('quaternary-color')
          }
        },
        series: [
          {
            name: 'Total',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data,
            lineStyle: {
              color: getColor('primary')
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            symbol: 'circle',
            symbolSize: 10
          }
        ],
        grid: { right: 5, left: '7%', bottom: '10%', top: '5%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);

      setInterval(() => {
        // eslint-disable-next-line no-plusplus
        for (let i = 0; i < 5; i++) {
          data.shift();
          data.push(randomData());
        }

        chart.setOption({
          series: [
            {
              data
            }
          ]
        });
      }, 1000);
    }
  };

  const lineLogChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-line-log-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: { show: false },
          data: Array.from(Array(10).keys()).map(item => item + 1)
        },
        yAxis: {
          type: 'log',
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          }
        },
        series: [
          {
            name: 'Index Of 3',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
            symbolSize: 7,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('danger'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('danger')
            },
            symbol: 'circle'
          },
          {
            name: 'Index of 2',
            type: 'line',
            data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
            symbolSize: 7,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('success'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('success')
            },
            symbol: 'circle'
          },
          {
            name: 'Index of 1/2',
            type: 'line',
            data: [
              1 / 2,
              1 / 4,
              1 / 8,
              1 / 16,
              1 / 32,
              1 / 64,
              1 / 128,
              1 / 256,
              1 / 512
            ],
            symbolSize: 7,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('info'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('info')
            },
            symbol: 'circle'
          }
        ],
        grid: {
          right: 10,
          left: 5,
          bottom: 5,
          top: 10,
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const shareDatasetChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-share-dataset-chart-example'
    );

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [
          getColor('danger'),
          getColor('warning'),
          getColor('info'),
          getColor('primary')
        ],
        legend: {
          top: 0,
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        tooltip: {
          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          axisPointer: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        yAxis: {
          gridIndex: 0,
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          }
        },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('danger'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('danger')
            },
            symbol: 'circle'
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('info'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('info')
            },
            symbol: 'circle'
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('warning'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('warning')
            },
            symbol: 'circle'
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            symbolSize: 10,
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('primary'),
              borderWidth: 2
            },
            lineStyle: {
              color: getColor('primary')
            },
            symbol: 'circle'
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '28%'],
            emphasis: { focus: 'data' },
            label: {
              formatter: '{b}: {@2012} ({d}%)',
              color: getColor('tertiary-color')
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ],
        grid: {
          right: 10,
          left: 5,
          bottom: 5,
          top: '55%',
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const basicBarChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-basic-bar-chart-example');
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];
    const data = [
      1020, 1160, 1300, 958, 1240, 1020, 1409, 1200, 1051, 1120, 1240, 1054
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value => value.substring(0, 3),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisTick: { show: false },
          axisLine: { show: false },
          min: 600
        },
        series: [
          {
            type: 'bar',
            name: 'Total',
            data,
            lineStyle: { color: getColor('primary') },
            itemStyle: {
              color: getColor('primary'),
              barBorderRadius: [3, 3, 0, 0]
            },
            showSymbol: false,
            symbol: 'circle',
            smooth: false,
            hoverAnimation: true
          }
        ],
        grid: { right: '3%', left: '10%', bottom: '10%', top: '5%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const horizontalBarChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-horizontal-bar-chart-example'
    );
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];
    const data = [
      1020, 1160, 1300, 958, 1240, 1020, 1409, 1200, 1051, 1120, 1240, 1054
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: tooltipFormatter,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'value',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: { show: true },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: {
            show: false
          },
          min: 600
        },
        yAxis: {
          type: 'category',
          data: months,
          boundaryGap: true,
          axisLabel: {
            formatter: value => value.substring(0, 3),
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: 'Total',
            data,
            lineStyle: { color: getColor('primary') },
            itemStyle: {
              color: getColor('primary'),
              barBorderRadius: [0, 3, 3, 0]
            },
            showSymbol: false,
            symbol: 'circle',
            smooth: false,
            hoverAnimation: true
          }
        ],
        grid: { right: '3%', left: '10%', bottom: '10%', top: '0%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const barNegativeChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-bar-negative-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        grid: {
          top: 5,
          bottom: 5,
          left: 5,
          right: 5
        },
        xAxis: {
          type: 'value',
          position: 'top',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: getColor('secondary-bg')
            }
          }
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: [
            'Ten',
            'Nine',
            'Eight',
            'Seven',
            'Six',
            'Five',
            'Four',
            'Three',
            'Two',
            'One'
          ]
        },
        series: [
          {
            name: 'Cost',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              formatter: '{b}',
              color: '#fff'
            },
            itemStyle: {
              color: getColor('primary')
            },
            data: [-0.15, -0.45, 0.3, 0.55, -0.23, 0.09, -0.56, 0.47, -0.36, 0.32]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const seriesBarChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-series-bar-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [getColor('primary'), getColor('info')],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: value => `${value / 1000}k`,
            color: getColor('quaternary-color')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: getColor('secondary-bg')
            }
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          axisTick: { show: false },
          splitLine: { show: false },
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [131744, 104970, 29034, 235481, 132541],
            itemStyle: {
              barBorderRadius: [0, 3, 3, 0]
            }
          },
          {
            name: '2012',
            type: 'bar',
            data: [134141, 121594, 31000, 141201, 124115],
            itemStyle: {
              barBorderRadius: [0, 3, 3, 0]
            }
          }
        ],
        grid: { right: 15, left: '12%', bottom: '10%', top: 5 }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const stackedBarChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-stacked-bar-chart-example');

    const xAxisData = [];
    const data1 = [];
    const data2 = [];
    const data3 = [];
    const data4 = [];

    for (let i = 0; i < 10; i += 1) {
      xAxisData.push('Class'.concat(i + 1));
      data1.push((Math.random() * 2).toFixed(2));
      data2.push((Math.random() * 5).toFixed(2));
      data3.push((Math.random() + 0.3).toFixed(2));
      data4.push(-Math.random().toFixed(2));
    }

    const emphasisStyle = {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: rgbaColor(getColor('light-text-emphasis'), 0.3)
      }
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [
          getColor('primary'),
          getColor('info'),
          getColor('warning'),
          getColor('danger')
        ],
        legend: {
          data: ['Bar1', 'Bar2', 'Bar3', 'Bar4'],
          textStyle: {
            color: getColor('tertiary-color')
          },
          left: 0
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            }
          },
          iconStyle: {
            borderColor: getColor('tertiary-color'),
            borderWidth: 1
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          data: xAxisData,
          splitLine: { show: false },
          splitArea: { show: false },

          axisLabel: {
            color: getColor('quaternary-color')
          },

          axisLine: {
            lineStyle: {
              color: getColor('quaternary-color')
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisLabel: {
            color: getColor('quaternary-color')
          }
        },
        series: [
          {
            name: 'Bar1',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: data1
          },
          {
            name: 'Bar2',
            type: 'bar',
            stack: 'one',
            emphasis: emphasisStyle,
            data: data2
          },
          {
            name: 'Bar3',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            data: data3
          },
          {
            name: 'Bar4',
            type: 'bar',
            stack: 'two',
            emphasis: emphasisStyle,
            data: data4
          }
        ],
        grid: {
          top: '10%',
          bottom: 10,
          left: 5,
          right: 7,
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const stackedHorizontalBarChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-stacked-horizontal-bar-chart-example'
    );

    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [
          getColor('info'),
          getColor('danger'),
          getColor('warning'),
          getColor('success'),
          getColor('primary')
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          position: (...params) => handleTooltipPosition(params),
          formatter: tooltipFormatter
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            }
          },
          right: 0
        },
        legend: {
          data: [
            'Direct',
            'Mail Ad',
            'Affiliate Ad',
            'Video Ad',
            'Search Engine'
          ],
          textStyle: {
            color: getColor('tertiary-color')
          },
          left: 0
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: {
            lineStyle: {
              show: true,
              color: getColor('secondary-bg')
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLine: {
            lineStyle: {
              show: true,
              color: getColor('tertiary-bg')
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value => value.substring(0, 3)
          }
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [400, 241, 451, 150, 321, 330, 142]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [250, 200, 222, 240, 230, 230, 211]
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [190, 182, 170, 195, 260, 333, 124]
          },
          {
            name: 'Video Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: 'Search Engine',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [1000, 900, 700, 1100, 1200, 1300, 1350]
          }
        ],
        grid: {
          right: 15,
          left: 5,
          bottom: 5,
          top: '15%',
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const barRaceChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-bar-race-chart-example');

    let data = Array.from(Array(7).keys()).map(() =>
      Math.round(Math.random() * 200)
    );

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        xAxis: {
          max: 'dataMax',
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisLabel: {
            color: getColor('quaternary-color')
          }
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
          inverse: true,
          axisLabel: {
            color: getColor('quaternary-color')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: {
            show: false
          },
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 // only the largest 5 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data,
            label: {
              show: true,
              position: 'right',
              color: getColor('tertiary-color'),
              fontWeight: 500,
              valueAnimation: true
            },
            itemStyle: {
              color: getColor('primary'),
              barBorderRadius: [0, 3, 3, 0]
            }
          }
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        grid: {
          right: '10%',
          left: 5,
          bottom: 5,
          top: 5,
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);

      const run = () => {
        data = data.map(item =>
          Math.random() > 0.9
            ? item + Math.round(Math.random() * 2000)
            : item + Math.round(Math.random() * 200)
        );

        chart.setOption({
          series: [
            {
              data
            }
          ]
        });
      };

      setTimeout(() => {
        run();
      }, 0);
      setInterval(() => {
        run();
      }, 3000);
    }
  };

  const barGradientChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-bar-gradient-chart-example');

    const tooltipFormatter = params => {
      return `<div> 
        <h6 class="fs-9 text-body-tertiary mb-0">
        <span class="fas fa-circle me-1 text-primary"></span> ${params[0].name} : ${params[0].value} 
         </h6>
      </div> `;
    };

    const dataAxis = [
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
      'O',
      'P',
      'Q',
      'R',
      'S',
      'T'
    ];
    const data = [
      320, 190, 200, 210, 256, 451, 111, 150, 442, 321, 100, 451, 201, 232, 140,
      124, 444, 333, 222, 111
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        title: {
          text: 'Gradient and Clickable bar chart',
          textStyle: {
            color: getColor('tertiary-color')
          },
          left: 'center'
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: getColor('quaternary-color')
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            name: 'Total',
            showBackground: true,
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: getColor('info') },
                { offset: 0.5, color: getColor('primary') },
                { offset: 1, color: getColor('primary') }
              ]),
              barBorderRadius: [3, 3, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: getColor('primary') },
                  { offset: 0.7, color: getColor('primary') },
                  { offset: 1, color: getColor('info') }
                ])
              }
            },
            data
          }
        ],
        grid: {
          right: 5,
          left: 5,
          bottom: 5,
          top: '10%',
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);

      const zoomSize = 6;
      chart.on('click', params => {
        chart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
    }
  };

  const barLineMixedChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-bar-line-mixed-chart-example'
    );
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: getColor('quaternary-color')
            },
            label: {
              show: true,
              backgroundColor: getColor('tertiary-color'),
              color: getColor('body-highlight-bg')
            }
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          position: (...params) => handleTooltipPosition(params),
          formatter: params => tooltipFormatter(params)
        },
        toolbox: {
          top: 0,
          feature: {
            dataView: { show: false },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          iconStyle: {
            borderColor: getColor('tertiary-color'),
            borderWidth: 1
          },

          emphasis: {
            iconStyle: {
              textFill: getColor('tertiary-color')
            }
          }
        },
        legend: {
          top: 40,
          data: ['Evaporation', 'Precipitation', 'Average temperature'],
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        xAxis: [
          {
            type: 'category',
            data: months,
            axisLabel: {
              color: getColor('quaternary-color'),
              formatter: value => value.slice(0, 3)
            },
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: getColor('tertiary-bg')
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              color: getColor('quaternary-color'),
              formatter: '{value} ml'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: getColor('secondary-bg')
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              color: getColor('quaternary-color'),
              formatter: '{value} °C'
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: getColor('secondary-bg')
              }
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ],
            itemStyle: {
              color: getColor('primary'),
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          {
            name: 'Precipitation',
            type: 'bar',
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ],
            itemStyle: {
              color: getColor('info'),
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          {
            name: 'Average temperature',
            type: 'line',
            yAxisIndex: 1,
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
            ],
            lineStyle: {
              color: getColor('warning')
            },
            itemStyle: {
              color: getColor('body-highlight-bg'),
              borderColor: getColor('warning'),
              borderWidth: 2
            },
            symbol: 'circle',
            symbolSize: 10
          }
        ],
        grid: {
          right: 5,
          left: 5,
          bottom: 5,
          top: '23%',
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const barWaterFallChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-bar-waterfall-chart-example'
    );
    const days = [
      '2021-06-05',
      '2021-06-06',
      '2021-06-07',
      '2021-06-08',
      '2021-06-09',
      '2021-06-10',
      '2021-06-11',
      '2021-06-12',
      '2021-06-13',
      '2021-06-14',
      '2021-06-15'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          data: ['Expenditure', 'Income'],
          textStyle: {
            color: getColor('quaternary-color')
          }
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          /* eslint-disable prefer-destructuring */
          formatter: params => {
            let tar;
            if (params[1].value !== '-') {
              tar = params[1];
            } else {
              tar = params[2];
            }
            return `${window.dayjs(tar.name).format('MMM DD')}<br/>${
            tar.seriesName
          } : ${tar.value}`;
          },
          transitionDuration: 0,
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: days,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value => window.dayjs(value).format('MMM DD'),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisTick: { show: false },
          axisLine: { show: false },
          min: 600
        },
        series: [
          {
            name: 'Assist',
            type: 'bar',
            stack: 'Total',
            itemStyle: {
              barBorderColor: 'transparent',
              color: 'transparent'
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'transparent',
                color: 'transparent'
              }
            },
            data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
          },
          {
            name: 'Income',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'top',
              color: getColor('quaternary-color')
            },
            data: [1000, 400, 350, '-', '-', 320, 180, 190, '-', '-', '-'],
            itemStyle: {
              color: getColor('primary'),
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          {
            name: 'Expenditure',
            type: 'bar',
            stack: 'Total',
            label: {
              show: true,
              position: 'bottom',
              color: getColor('quaternary-color')
            },
            data: ['-', '-', '-', 100, 140, '-', '-', '-', 120, 345, 190],
            itemStyle: {
              color: getColor('success'),
              barBorderRadius: [3, 3, 0, 0]
            }
          }
        ],
        grid: { right: '3%', left: '10%', bottom: '10%', top: '10%' }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const barTimelineChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-bar-timeline-chart-example');
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];
    const dataMap = {};

    const dataFormatter = obj => {
      return Object.keys(obj).reduce((acc, val) => {
        return {
          ...acc,
          [val]: obj[val].map((value, index) => ({
            name: months[index],
            value
          }))
        };
      }, {});
    };

    dataMap.dataTI = dataFormatter({
      2016: [
        88.68, 112.38, 1400, 262.42, 589.56, 882.41, 625.61, 684.6, 90.26,
        1461.51, 892.83, 966.5
      ],
      2017: [
        88.8, 103.35, 1461.81, 276.77, 634.94, 939.43, 672.76, 750.14, 93.81,
        1545.05, 925.1, 1011.03
      ],
      2018: [
        101.26, 110.19, 1804.72, 311.97, 762.1, 1133.42, 783.8, 915.38, 101.84,
        1816.31, 986.02, 1200.18
      ],
      2019: [
        112.83, 122.58, 2034.59, 313.58, 907.95, 1302.02, 916.72, 1088.94, 111.8,
        2100.11, 1095.96, 1418.09
      ],
      2020: [
        118.29, 128.85, 2207.34, 477.59, 929.6, 1414.9, 980.57, 1154.33, 113.82,
        2261.86, 1163.08, 1495.45
      ],
      2021: [
        124.36, 145.58, 2562.81, 554.48, 1095.28, 1631.08, 1050.15, 1302.9,
        114.15, 2540.1, 1360.56, 1729.02
      ],
      2022: [
        136.27, 159.72, 2905.73, 641.42, 1306.3, 1915.57, 1277.44, 1701.5, 124.94,
        3064.78, 1583.04, 2015.31
      ]
    });

    dataMap.dataSI = dataFormatter({
      2016: [
        2026.51, 2135.07, 5271.57, 2357.04, 1773.21, 3869.4, 1580.83, 2971.68,
        4381.2, 10524.96, 7164.75, 2245.9
      ],
      2017: [
        2191.43, 2457.08, 6110.43, 2755.66, 2374.96, 4566.83, 1915.29, 3365.31,
        4969.95, 12282.89, 8511.51, 2711.18
      ],
      2018: [
        2509.4, 2892.53, 7201.88, 3454.49, 3193.67, 5544.14, 2475.45, 3695.58,
        5571.06, 14471.26, 10154.25, 3370.96
      ],
      2019: [
        2626.41, 3709.78, 8701.34, 4242.36, 4376.19, 7158.84, 3097.12, 4319.75,
        6085.84, 16993.34, 11567.42, 4198.93
      ],
      2020: [
        2855.55, 3987.84, 8959.83, 3993.8, 5114, 7906.34, 3541.92, 4060.72,
        6001.78, 18566.37, 11908.49, 4905.22
      ],
      2021: [
        3388.38, 4840.23, 10707.68, 5234, 6367.69, 9976.82, 4506.31, 5025.15,
        7218.32, 21753.93, 14297.93, 6436.62
      ],
      2022: [
        3752.48, 5928.32, 13126.86, 6635.26, 8037.69, 12152.15, 5611.48, 5962.41,
        7927.89, 25203.28, 16555.58, 8309.38
      ]
    });

    dataMap.dataPI = dataFormatter({
      2016: [
        4854.33, 1658.19, 3340.54, 1611.07, 1542.26, 3295.45, 1413.83, 1857.42,
        4776.2, 6612.22, 5360.1, 2137.77
      ],
      2017: [
        5837.55, 1902.31, 3895.36, 1846.18, 1934.35, 3798.26, 1687.07, 2096.35,
        5508.48, 7914.11, 6281.86, 2390.29
      ],
      2018: [
        7236.15, 2250.04, 4600.72, 2257.99, 2467.41, 4486.74, 2025.44, 2493.04,
        6821.11, 9730.91, 7613.46, 2789.78
      ],
      2019: [
        8375.76, 2886.65, 5276.04, 2759.46, 3212.06, 5207.72, 2412.26, 2905.68,
        7872.23, 11888.53, 8799.31, 3234.64
      ],
      2020: [
        9179.19, 3405.16, 6068.31, 2886.92, 3696.65, 5891.25, 2756.26, 3371.95,
        8930.85, 13629.07, 9918.78, 3662.15
      ],
      2021: [
        10600.84, 4238.65, 7123.77, 3412.38, 4209.03, 6849.37, 3111.12, 4040.55,
        9833.51, 17131.45, 12063.82, 4193.69
      ],
      2022: [
        12363.18, 5219.24, 8483.17, 3960.87, 5015.89, 8158.98, 3679.91, 4918.09,
        11142.86, 20842.21, 14180.23, 4975.96
      ]
    });

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [
              '2016-01-01',
              '2017-01-01',
              '2018-01-01',
              '2019-01-01',
              '2020-01-01',
              '2021-01-01',
              '2022-01-01'
            ],
            label: {
              formatter: s => {
                return new Date(s).getFullYear();
              }
            },
            lineStyle: {
              color: getColor('info')
            },
            itemStyle: {
              color: getColor('secondary')
            },
            checkpointStyle: {
              color: getColor('primary'),
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 0
            },
            controlStyle: {
              color: getColor('info')
            }
          },
          title: {
            textStyle: {
              color: getColor('tertiary-color')
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            padding: [7, 10],
            backgroundColor: getColor('body-highlight-bg'),
            borderColor: getColor('border-color'),
            textStyle: { color: getColor('light-text-emphasis') },
            borderWidth: 1,
            transitionDuration: 0,
            formatter: tooltipFormatter
          },
          legend: {
            left: 'right',
            data: ['Primary industry', 'Secondary industry', 'Tertiary Industry'],
            textStyle: {
              color: getColor('tertiary-color')
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: months,
              splitLine: { show: false },
              axisLabel: {
                color: getColor('quaternary-color')
              },
              axisLine: {
                lineStyle: {
                  color: getColor('quaternary-color')
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: value => `${value / 1000}k`,
                color: getColor('quaternary-color')
              },
              splitLine: {
                lineStyle: {
                  color: getColor('secondary-bg')
                }
              }
            }
          ],
          series: [
            {
              name: 'Primary industry',
              type: 'bar',
              itemStyle: {
                color: getColor('primary'),
                barBorderRadius: [3, 3, 0, 0]
              }
            },
            {
              name: 'Secondary industry',
              type: 'bar',
              itemStyle: {
                color: getColor('info'),
                barBorderRadius: [3, 3, 0, 0]
              }
            },
            {
              name: 'Tertiary Industry',
              type: 'bar',
              itemStyle: {
                color: getColor('warning'),
                barBorderRadius: [3, 3, 0, 0]
              }
            }
          ],
          grid: {
            top: '10%',
            bottom: '15%',
            left: 5,
            right: 10,
            containLabel: true
          }
        },
        options: [
          {
            title: { text: '2016' },
            series: [
              { data: dataMap.dataPI['2016'] },
              { data: dataMap.dataSI['2016'] },
              { data: dataMap.dataTI['2016'] }
            ]
          },
          {
            title: { text: '2017' },
            series: [
              { data: dataMap.dataPI['2017'] },
              { data: dataMap.dataSI['2017'] },
              { data: dataMap.dataTI['2017'] }
            ]
          },
          {
            title: { text: '2018' },
            series: [
              { data: dataMap.dataPI['2018'] },
              { data: dataMap.dataSI['2018'] },
              { data: dataMap.dataTI['2018'] }
            ]
          },
          {
            title: { text: '2019' },
            series: [
              { data: dataMap.dataPI['2019'] },
              { data: dataMap.dataSI['2019'] },
              { data: dataMap.dataTI['2019'] }
            ]
          },
          {
            title: { text: '2020' },
            series: [
              { data: dataMap.dataPI['2020'] },
              { data: dataMap.dataSI['2020'] },
              { data: dataMap.dataTI['2020'] }
            ]
          },
          {
            title: { text: '2021' },
            series: [
              { data: dataMap.dataPI['2021'] },
              { data: dataMap.dataSI['2021'] },
              { data: dataMap.dataTI['2021'] }
            ]
          },
          {
            title: { text: '2022' },
            series: [
              { data: dataMap.dataPI['2022'] },
              { data: dataMap.dataSI['2022'] },
              { data: dataMap.dataTI['2022'] }
            ]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const basicCandlestickChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-basic-candlestick-chart-example'
    );

    const data = [
      ['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
      ['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
      ['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
      ['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
      ['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
      ['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
      ['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
      ['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
      ['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
      ['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
      ['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
      ['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
      ['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
      ['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
      ['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
      ['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
      ['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
      ['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
      ['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
      ['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
      ['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
      ['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
      ['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
      ['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
      ['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
      ['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
      ['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
      ['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
      ['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
      ['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
      ['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
      ['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
      ['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
      ['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
      ['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
      ['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
      ['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
      ['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
      ['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
      ['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
      ['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
      ['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
      ['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
      ['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
      ['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
      ['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
      ['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
      ['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
      ['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
      ['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26]
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position: (...params) => handleTooltipPosition(params)
        },
        toolbox: {
          top: 0,
          feature: {
            dataZoom: {
              yAxisIndex: false
            },
            restore: { show: true }
          },
          iconStyle: {
            borderColor: getColor('tertiary-color'),
            borderWidth: 1
          },

          emphasis: {
            iconStyle: {
              textFill: getColor('tertiary-color')
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            minValueSpan: 10
          }
        ],
        xAxis: {
          type: 'category',
          data: data.map(item => item[0]),
          scale: true,
          splitLine: { show: false },
          splitNumber: 10,
          min: 'dataMin',
          max: 'dataMax',
          boundaryGap: true,
          axisPointer: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value =>
              window.dayjs(value, 'YYYY-MM-DD').format('MMM DD'),
            margin: 15,
            fontWeight: 500
          }
        },
        yAxis: {
          scale: true,
          axisPointer: { show: false },
          splitLine: {
            lineStyle: {
              color: getColor('secondary-bg'),
              type: 'dashed'
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('quaternary-color'),
            margin: 15,
            fontWeight: 500
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            type: 'candlestick',
            name: 'Volume',
            data: data.map(item => item.slice(1)),
            itemStyle: {
              color: getColor('warning'),
              color0: getColor('primary'),
              borderColor: getColor('warning'),
              borderColor0: getColor('primary')
            }
          }
        ],
        grid: {
          right: 5,
          left: 5,
          bottom: 5,
          top: '15%',
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const candlestickMixedChartInit = () => {
    const { getColor, getData, getPastDates } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-candlestick-mixed-chart-example'
    );
    const colorList = [
      getColor('primary'),
      getColor('info'),
      getColor('light-text-emphasis'),
      getColor('warning')
    ];

    /* eslint-disable no-continue */
    const calculateMA = (dayCount, data) => {
      const result = [];
      for (let i = 0, len = data.length; i < len; i += 1) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j += 1) {
          sum += data[i - j][1];
        }
        result.push((sum / dayCount).toFixed(2));
      }
      return result;
    };

    const dates = getPastDates(61).map(date =>
      window.dayjs(date).format('MMM DD, YYYY')
    );

    const data = [
      [17512.58, 17633.11, 17434.27, 17642.81, 86160000],
      [17652.36, 17716.66, 17652.36, 17790.11, 79330000],
      [17716.05, 17685.09, 17669.72, 17755.7, 102600000],
      [17661.74, 17792.75, 17568.02, 17811.48, 104890000],
      [17799.39, 17737, 17710.67, 17806.38, 85230000],
      [17718.03, 17603.32, 17579.56, 17718.03, 115230000],
      [17605.45, 17716.05, 17542.54, 17723.55, 99410000],
      [17687.28, 17541.96, 17484.23, 17687.28, 90120000],
      [17555.39, 17576.96, 17528.16, 17694.51, 79990000],
      [17586.48, 17556.41, 17555.9, 17731.63, 107100000],
      [17571.34, 17721.25, 17553.57, 17744.43, 81020000],
      [17741.66, 17908.28, 17741.66, 17918.35, 91710000],
      [17912.25, 17926.43, 17885.44, 17962.14, 84510000],
      [17925.95, 17897.46, 17867.41, 17937.65, 118160000],
      [17890.2, 18004.16, 17848.22, 18009.53, 89390000],
      [18012.1, 18053.6, 17984.43, 18103.46, 89820000],
      [18059.49, 18096.27, 18031.21, 18167.63, 100210000],
      [18092.84, 17982.52, 17963.89, 18107.29, 102720000],
      [17985.05, 18003.75, 17909.89, 18026.85, 134120000],
      [17990.94, 17977.24, 17855.55, 17990.94, 83770000],
      [17987.38, 17990.32, 17934.17, 18043.77, 92570000],
      [17996.14, 18041.55, 17920.26, 18084.66, 109090000],
      [18023.88, 17830.76, 17796.55, 18035.73, 100920000],
      [17813.09, 17773.64, 17651.98, 17814.83, 136670000],
      [17783.78, 17891.16, 17773.71, 17912.35, 80100000],
      [17870.75, 17750.91, 17670.88, 17870.75, 97060000],
      [17735.02, 17651.26, 17609.01, 17738.06, 95020000],
      [17664.48, 17660.71, 17615.82, 17736.11, 81530000],
      [17650.3, 17740.63, 17580.38, 17744.54, 80020000],
      [17743.85, 17705.91, 17668.38, 17783.16, 85590000],
      [17726.66, 17928.35, 17726.66, 17934.61, 75790000],
      [17919.03, 17711.12, 17711.05, 17919.03, 87390000],
      [17711.12, 17720.5, 17625.38, 17798.19, 88560000],
      [17711.12, 17535.32, 17512.48, 17734.74, 86640000],
      [17531.76, 17710.71, 17531.76, 17755.8, 88440000],
      [17701.46, 17529.98, 17469.92, 17701.46, 103260000],
      [17501.28, 17526.62, 17418.21, 17636.22, 79120000],
      [17514.16, 17435.4, 17331.07, 17514.16, 95530000],
      [17437.32, 17500.94, 17437.32, 17571.75, 111990000],
      [17507.04, 17492.93, 17480.05, 17550.7, 87790000],
      [17525.19, 17706.05, 17525.19, 17742.59, 86480000],
      [17735.09, 17851.51, 17735.09, 17891.71, 79180000],
      [17859.52, 17828.29, 17803.82, 17888.66, 68940000],
      [17826.85, 17873.22, 17824.73, 17873.22, 73190000],
      [17891.5, 17787.2, 17724.03, 17899.24, 147390000],
      [17754.55, 17789.67, 17664.79, 17809.18, 78530000],
      [17789.05, 17838.56, 17703.55, 17838.56, 75560000],
      [17799.8, 17807.06, 17689.68, 17833.17, 82270000],
      [17825.69, 17920.33, 17822.81, 17949.68, 71870000],
      [17936.22, 17938.28, 17936.22, 18003.23, 78750000],
      [17931.91, 18005.05, 17931.91, 18016, 71260000],
      [17969.98, 17985.19, 17915.88, 18005.22, 69690000],
      [17938.82, 17865.34, 17812.34, 17938.82, 90540000],
      [17830.5, 17732.48, 17731.35, 17893.28, 101690000],
      [17710.77, 17674.82, 17595.79, 17733.92, 93740000],
      [17703.65, 17640.17, 17629.01, 17762.96, 94130000],
      [17602.23, 17733.1, 17471.29, 17754.91, 91950000],
      [17733.44, 17675.16, 17602.78, 17733.44, 248680000],
      [17736.87, 17804.87, 17736.87, 17946.36, 99380000],
      [17827.33, 17829.73, 17799.8, 17877.84, 85130000],
      [17832.67, 17780.83, 17770.36, 17920.16, 89440000]
    ];

    const dataMA5 = calculateMA(5, data);

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        animation: false,
        color: colorList,
        legend: {
          top: 0,
          data: ['MA1', 'MA5', 'Volume'],
          textStyle: {
            color: getColor('quaternary-color')
          }
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          position: (...params) => handleTooltipPosition(params)
        },
        axisPointer: {
          link: [
            {
              xAxisIndex: [0, 1]
            }
          ]
        },
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: [0, 1],
            realtime: false,
            start: 20,
            end: 70,
            top: 35,
            height: 15,
            handleIcon:
              'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '120%'
          },
          {
            type: 'inside',
            xAxisIndex: [0, 1],
            start: 40,
            end: 70,
            top: 30,
            height: 20
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: dates,
            boundaryGap: false,
            axisLine: {
              lineStyle: { color: getColor('tertiary-bg') }
            },
            axisLabel: {
              color: getColor('quaternary-color'),
              formatter: value => window.dayjs(value).format('MMM DD')
            },
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
              show: true
            }
          },
          {
            type: 'category',
            gridIndex: 1,
            data: dates,
            scale: true,
            boundaryGap: false,
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            axisLine: { lineStyle: { color: 'blue' } },
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
              type: 'shadow',
              label: { show: false },
              triggerTooltip: true
            }
          }
        ],
        yAxis: [
          {
            scale: true,
            splitNumber: 2,
            axisLine: { show: false },
            splitLine: {
              lineStyle: {
                color: getColor('secondary-bg')
              }
            },
            axisTick: { show: false },
            axisLabel: {
              color: getColor('quaternary-color')
            }
          },
          {
            scale: true,
            gridIndex: 1,
            splitNumber: 2,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          }
        ],
        grid: [
          {
            left: 5,
            right: 12,
            // top: 110,
            bottom: 60,
            height: 160,
            containLabel: true
          },
          {
            left: 50,
            right: 12,
            height: 40,
            top: 260,
            containLabel: true
          }
        ],
        series: [
          {
            name: 'Volume',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: getColor('primary')
            },
            emphasis: {
              itemStyle: {
                color: getColor('primary')
              }
            },
            data: data.map(item => item[4])
          },
          {
            type: 'candlestick',
            name: 'MA1',
            data,
            itemStyle: {
              color: getColor('success'),
              color0: getColor('info'),
              borderColor: getColor('success'),
              borderColor0: getColor('info')
            }
          },
          {
            name: 'MA5',
            type: 'line',
            data: dataMA5,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              color: getColor('primary')
            }
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const sessionByCountryMapInit = () => {
    const { getColor, rgbaColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-session-by-country-map');
    const data = [
      { name: 'Afghanistan', value: 28397.812 },
      { name: 'Angola', value: 19549.124 },
      { name: 'Albania', value: 3150.143 },
      { name: 'United Arab Emirates', value: 8441.537 },
      { name: 'Argentina', value: 40374.224 },
      { name: 'Armenia', value: 2963.496 },
      { name: 'French Southern and Antarctic Lands', value: 268.065 },
      { name: 'Australia', value: 22404.488 },
      { name: 'Austria', value: 8401.924 },
      { name: 'Azerbaijan', value: 9094.718 },
      { name: 'Burundi', value: 9232.753 },
      { name: 'Belgium', value: 10941.288 },
      { name: 'Benin', value: 9509.798 },
      { name: 'Burkina Faso', value: 15540.284 },
      { name: 'Bangladesh', value: 151125.475 },
      { name: 'Bulgaria', value: 7389.175 },
      { name: 'The Bahamas', value: 66402.316 },
      { name: 'Bosnia and Herzegovina', value: 3845.929 },
      { name: 'Belarus', value: 9491.07 },
      { name: 'Belize', value: 308.595 },
      { name: 'Bermuda', value: 64.951 },
      { name: 'Bolivia', value: 716.939 },
      { name: 'Brazil', value: 195210.154 },
      { name: 'Brunei', value: 27.223 },
      { name: 'Bhutan', value: 716.939 },
      { name: 'Botswana', value: 1969.341 },
      { name: 'Central African Rep.', value: 4349.921 },
      { name: 'Canada', value: 34126.24 },
      { name: 'Switzerland', value: 7830.534 },
      { name: 'Chile', value: 17150.76 },
      { name: 'China', value: 1359821.465 },
      { name: "Côte d'Ivoire", value: 60508.978 },
      { name: 'Cameroon', value: 20624.343 },
      { name: 'Dem. Rep. Congo', value: 62191.161 },
      { name: 'Congo', value: 3573.024 },
      { name: 'Colombia', value: 46444.798 },
      { name: 'Costa Rica', value: 4669.685 },
      { name: 'Cuba', value: 11281.768 },
      { name: 'Northern Cyprus', value: 1.468 },
      { name: 'Cyprus', value: 1103.685 },
      { name: 'Czech Republic', value: 10553.701 },
      { name: 'Germany', value: 83017.404 },
      { name: 'Djibouti', value: 834.036 },
      { name: 'Denmark', value: 5550.959 },
      { name: 'Dominican Republic', value: 10016.797 },
      { name: 'Algeria', value: 37062.82 },
      { name: 'Ecuador', value: 15001.072 },
      { name: 'Egypt', value: 78075.705 },
      { name: 'Eritrea', value: 5741.159 },
      { name: 'Spain', value: 46182.038 },
      { name: 'Estonia', value: 1298.533 },
      { name: 'Ethiopia', value: 87095.281 },
      { name: 'Finland', value: 5367.693 },
      { name: 'Fiji', value: 860.559 },
      { name: 'Falkland Islands', value: 49.581 },
      { name: 'France', value: 63230.866 },
      { name: 'Gabon', value: 1556.222 },
      { name: 'United Kingdom', value: 62066.35 },
      { name: 'Georgia', value: 4388.674 },
      { name: 'Ghana', value: 24262.901 },
      { name: 'Eq. Guinea', value: 10876.033 },
      { name: 'Guinea', value: 10876.033 },
      { name: 'Gambia', value: 1680.64 },
      { name: 'Guinea Bissau', value: 10876.033 },
      { name: 'Equatorial Guinea', value: 696.167 },
      { name: 'Greece', value: 11109.999 },
      { name: 'Greenland', value: 56.546 },
      { name: 'Guatemala', value: 14341.576 },
      { name: 'French Guiana', value: 231.169 },
      { name: 'Guyana', value: 786.126 },
      { name: 'Honduras', value: 7621.204 },
      { name: 'Croatia', value: 4338.027 },
      { name: 'Haiti', value: 9896.4 },
      { name: 'Hungary', value: 10014.633 },
      { name: 'Indonesia', value: 240676.485 },
      { name: 'India', value: 1205624.648 },
      { name: 'Ireland', value: 4467.561 },
      { name: 'Iran', value: 240676.485 },
      { name: 'Iraq', value: 30962.38 },
      { name: 'Iceland', value: 318.042 },
      { name: 'Israel', value: 7420.368 },
      { name: 'Italy', value: 60508.978 },
      { name: 'Jamaica', value: 2741.485 },
      { name: 'Jordan', value: 6454.554 },
      { name: 'Japan', value: 127352.833 },
      { name: 'Kazakhstan', value: 15921.127 },
      { name: 'Kenya', value: 40909.194 },
      { name: 'Kyrgyzstan', value: 5334.223 },
      { name: 'Cambodia', value: 14364.931 },
      { name: 'South Korea', value: 51452.352 },
      { name: 'Kosovo', value: 97.743 },
      { name: 'Kuwait', value: 2991.58 },
      { name: 'Laos', value: 6395.713 },
      { name: 'Lebanon', value: 4341.092 },
      { name: 'Liberia', value: 3957.99 },
      { name: 'Libya', value: 6040.612 },
      { name: 'Sri Lanka', value: 20758.779 },
      { name: 'Lesotho', value: 2008.921 },
      { name: 'Lithuania', value: 3068.457 },
      { name: 'Luxembourg', value: 507.885 },
      { name: 'Latvia', value: 2090.519 },
      { name: 'Morocco', value: 31642.36 },
      { name: 'Moldova', value: 103.619 },
      { name: 'Madagascar', value: 21079.532 },
      { name: 'Mexico', value: 117886.404 },
      { name: 'Macedonia', value: 507.885 },
      { name: 'Mali', value: 13985.961 },
      { name: 'Myanmar', value: 51931.231 },
      { name: 'Montenegro', value: 620.078 },
      { name: 'Mongolia', value: 2712.738 },
      { name: 'Mozambique', value: 23967.265 },
      { name: 'Mauritania', value: 3609.42 },
      { name: 'Malawi', value: 15013.694 },
      { name: 'Malaysia', value: 28275.835 },
      { name: 'Namibia', value: 2178.967 },
      { name: 'New Caledonia', value: 246.379 },
      { name: 'Niger', value: 15893.746 },
      { name: 'Nigeria', value: 159707.78 },
      { name: 'Nicaragua', value: 5822.209 },
      { name: 'Netherlands', value: 16615.243 },
      { name: 'Norway', value: 4891.251 },
      { name: 'Nepal', value: 26846.016 },
      { name: 'New Zealand', value: 4368.136 },
      { name: 'Oman', value: 2802.768 },
      { name: 'Pakistan', value: 173149.306 },
      { name: 'Panama', value: 3678.128 },
      { name: 'Peru', value: 29262.83 },
      { name: 'Philippines', value: 93444.322 },
      { name: 'Papua New Guinea', value: 6858.945 },
      { name: 'Poland', value: 38198.754 },
      { name: 'Puerto Rico', value: 3709.671 },
      { name: 'North Korea', value: 1.468 },
      { name: 'Portugal', value: 10589.792 },
      { name: 'Paraguay', value: 6459.721 },
      { name: 'Qatar', value: 1749.713 },
      { name: 'Romania', value: 21861.476 },
      { name: 'Russia', value: 21861.476 },
      { name: 'Rwanda', value: 10836.732 },
      { name: 'Western Sahara', value: 514.648 },
      { name: 'Saudi Arabia', value: 27258.387 },
      { name: 'Sudan', value: 35652.002 },
      { name: 'S. Sudan', value: 9940.929 },
      { name: 'Senegal', value: 12950.564 },
      { name: 'Solomon Islands', value: 526.447 },
      { name: 'Sierra Leone', value: 5751.976 },
      { name: 'El Salvador', value: 6218.195 },
      { name: 'Somaliland', value: 9636.173 },
      { name: 'Somalia', value: 9636.173 },
      { name: 'Republic of Serbia', value: 3573.024 },
      { name: 'Suriname', value: 524.96 },
      { name: 'Slovakia', value: 5433.437 },
      { name: 'Slovenia', value: 2054.232 },
      { name: 'Sweden', value: 9382.297 },
      { name: 'Swaziland', value: 1193.148 },
      { name: 'Syria', value: 7830.534 },
      { name: 'Chad', value: 11720.781 },
      { name: 'Togo', value: 6306.014 },
      { name: 'Thailand', value: 66402.316 },
      { name: 'Tajikistan', value: 7627.326 },
      { name: 'Turkmenistan', value: 5041.995 },
      { name: 'East Timor', value: 10016.797 },
      { name: 'Trinidad and Tobago', value: 1328.095 },
      { name: 'Tunisia', value: 10631.83 },
      { name: 'Turkey', value: 72137.546 },
      { name: 'Tanzania', value: 44973.33 },
      { name: 'Uganda', value: 33987.213 },
      { name: 'Ukraine', value: 46050.22 },
      { name: 'Uruguay', value: 3371.982 },
      { name: 'United States', value: 312247.116 },
      { name: 'Uzbekistan', value: 27769.27 },
      { name: 'Venezuela', value: 236.299 },
      { name: 'Vietnam', value: 89047.397 },
      { name: 'Vanuatu', value: 236.299 },
      { name: 'West Bank', value: 13.565 },
      { name: 'Yemen', value: 22763.008 },
      { name: 'South Africa', value: 51452.352 },
      { name: 'Zambia', value: 13216.985 },
      { name: 'Zimbabwe', value: 13076.978 }
    ];

    const total = 6961500;

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params =>
            `<strong>${params.data?.name} :</strong> ${(
            (params.data?.value / total) *
            100
          ).toFixed(2)}%`
        },
        toolbox: {
          show: false,
          feature: {
            restore: {}
          }
        },
        visualMap: {
          show: false,
          min: 800,
          max: 50000,
          inRange: {
            color: [
              getColor('primary'),
              rgbaColor(getColor('primary'), 0.8),
              rgbaColor(getColor('primary'), 0.6),
              rgbaColor(getColor('primary'), 0.4),
              rgbaColor(getColor('primary'), 0.2)
            ].reverse()
          }
        },
        series: [
          {
            type: 'map',
            map: 'world',
            data,
            roam: true,
            scaleLimit: {
              min: 1,
              max: 5
            },
            left: 0,
            right: 0,
            label: {
              show: false
            },
            itemStyle: {
              borderColor: getColor('border-color')
            },
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: getColor('warning')
              }
            }
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);

      document
        .querySelector('.session-by-country-map-reset')
        ?.addEventListener('click', () => {
          chart.dispatchAction({
            type: 'restore'
          });
        });
    }
  };

  const mapUSAInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-map-usa-example');

    const data = [
      { name: 'Alabama', value: 4822023 },
      { name: 'Alaska', value: 731449 },
      { name: 'Arizona', value: 6553255 },
      { name: 'Arkansas', value: 2949131 },
      { name: 'California', value: 38041430 },
      { name: 'Colorado', value: 5187582 },
      { name: 'Connecticut', value: 3590347 },
      { name: 'Delaware', value: 917092 },
      { name: 'District of Columbia', value: 632323 },
      { name: 'Florida', value: 19317568 },
      { name: 'Georgia', value: 9919945 },
      { name: 'Hawaii', value: 1392313 },
      { name: 'Idaho', value: 1595728 },
      { name: 'Illinois', value: 12875255 },
      { name: 'Indiana', value: 6537334 },
      { name: 'Iowa', value: 3074186 },
      { name: 'Kansas', value: 2885905 },
      { name: 'Kentucky', value: 4380415 },
      { name: 'Louisiana', value: 4601893 },
      { name: 'Maine', value: 1329192 },
      { name: 'Maryland', value: 5884563 },
      { name: 'Massachusetts', value: 6646144 },
      { name: 'Michigan', value: 9883360 },
      { name: 'Minnesota', value: 5379139 },
      { name: 'Mississippi', value: 2984926 },
      { name: 'Missouri', value: 6021988 },
      { name: 'Montana', value: 1005141 },
      { name: 'Nebraska', value: 1855525 },
      { name: 'Nevada', value: 2758931 },
      { name: 'New Hampshire', value: 1320718 },
      { name: 'New Jersey', value: 8864590 },
      { name: 'New Mexico', value: 2085538 },
      { name: 'New York', value: 19570261 },
      { name: 'North Carolina', value: 9752073 },
      { name: 'North Dakota', value: 699628 },
      { name: 'Ohio', value: 11544225 },
      { name: 'Oklahoma', value: 3814820 },
      { name: 'Oregon', value: 3899353 },
      { name: 'Pennsylvania', value: 12763536 },
      { name: 'Rhode Island', value: 1050292 },
      { name: 'South Carolina', value: 4723723 },
      { name: 'South Dakota', value: 833354 },
      { name: 'Tennessee', value: 6456243 },
      { name: 'Texas', value: 26059203 },
      { name: 'Utah', value: 2855287 },
      { name: 'Vermont', value: 626011 },
      { name: 'Virginia', value: 8185867 },
      { name: 'Washington', value: 6897012 },
      { name: 'West Virginia', value: 1855413 },
      { name: 'Wisconsin', value: 5726398 },
      { name: 'Wyoming', value: 576412 },
      { name: 'Puerto Rico', value: 3667084 }
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          position: (...params) => handleTooltipPosition(params),
          formatter: params => {
            return `<strong>${params.data.name} :</strong> ${params.data.value}`;
          }
        },
        toolbox: {
          show: false,
          feature: {
            restore: {}
          }
        },
        visualMap: {
          left: 'right',
          min: 500000,
          max: 38000000,
          inRange: {
            color: [getColor('primary'), getColor('info')]
          },
          text: ['High', 'Low'],
          calculable: true,
          textStyle: {
            color: getColor('quaternary-color')
          },
          formatter: value => `${value / 1000}k`
        },
        series: [
          {
            left: 10,
            name: 'USA PopEstimates',
            type: 'map',
            zoom: 1.2,
            roam: true,
            scaleLimit: {
              min: 1,
              max: 5
            },
            itemStyle: {
              borderColor: getColor('border-color')
            },
            label: {
              color: '#fff'
            },
            map: 'USA',
            emphasis: {
              label: {
                show: true,
                color: '#fff'
              },

              itemStyle: {
                areaColor: getColor('warning')
              }
            },
            data
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
      document.querySelector('.usa-map-reset').addEventListener('click', () => {
        chart.dispatchAction({
          type: 'restore'
        });
      });
    }
  };

  const basicScatterChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-basic-scatter-chart-example'
    );

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0
        },
        xAxis: {
          axisLabel: {
            color: getColor('quaternary-color')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          }
        },
        yAxis: {
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          }
        },
        series: [
          {
            // symbolSize: val => val[2] * 2,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: 'scatter',
            itemStyle: {
              color: getColor('danger')
            }
          }
        ],
        grid: {
          right: 8,
          left: 5,
          bottom: 5,
          top: 8,
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const bubbleChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-bubble-chart-example');

    const data = [
      [
        [28604, 77, 17096869, 'Australia', 1990],
        [31163, 77.4, 27662440, 'Canada', 1990],
        [1516, 68, 1154605773, 'China', 1990],
        [28599, 75, 4986705, 'Finland', 1990],
        [29476, 77.1, 56943299, 'France', 1990],
        [31476, 75.4, 78958237, 'Germany', 1990],
        [1777, 57.7, 870601776, 'India', 1990],
        [29550, 79.1, 122249285, 'Japan', 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],
        [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],
        [38923, 80.8, 5503457, 'Finland', 2015],
        [37599, 81.9, 64395345, 'France', 2015],
        [44053, 81.1, 80688545, 'Germany', 2015],
        [5903, 66.8, 1311050527, 'India', 2015],
        [36162, 83.5, 126573481, 'Japan', 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],
        [38225, 81.4, 64715810, 'United Kingdom', 2015],
        [53354, 79.1, 321773631, 'United States', 2015]
      ]
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        title: {
          text: '1990 and 2015 have per capita and GDP',
          left: 0,
          top: 0,
          textStyle: {
            color: getColor('tertiary-color'),
            fontWeight: 600
          }
        },
        legend: {
          right: 0,
          top: '10%',
          data: ['1990', '2015'],
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        xAxis: {
          axisLabel: {
            color: getColor('quaternary-color'),
            formatter: value => `${value / 1000}k`
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          }
        },
        yAxis: {
          scale: true,
          axisLabel: {
            color: getColor('quaternary-color')
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          }
        },
        series: [
          {
            name: '1990',
            data: data[0],
            type: 'scatter',
            symbolSize: value => {
              return Math.sqrt(value[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                color: getColor('tertiary-color'),
                show: true,
                formatter: param => {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              color: rgbaColor(getColor('primary'), 0.7)
            }
          },
          {
            name: '2015',
            data: data[1],
            type: 'scatter',
            symbolSize: value => {
              return Math.sqrt(value[2]) / 7e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                color: getColor('quaternary-color'),
                show: true,
                formatter: param => {
                  return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              color: rgbaColor(getColor('warning'), 0.7)
            }
          }
        ],
        grid: {
          left: 5,
          right: 10,
          bottom: 5,
          top: '20%',
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const quartetScatterChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-quartet-scatter-chart-example'
    );

    const dataAll = [
      [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81],
        [11.0, 8.33],
        [14.0, 9.96],
        [6.0, 7.24],
        [4.0, 4.26],
        [12.0, 10.84],
        [7.0, 4.82],
        [5.0, 5.68]
      ],
      [
        [10.0, 9.14],
        [8.0, 8.14],
        [13.0, 8.74],
        [9.0, 8.77],
        [11.0, 9.26],
        [14.0, 8.1],
        [6.0, 6.13],
        [4.0, 3.1],
        [12.0, 9.13],
        [7.0, 7.26],
        [5.0, 4.74]
      ],
      [
        [10.0, 7.46],
        [8.0, 6.77],
        [13.0, 12.74],
        [9.0, 7.11],
        [11.0, 7.81],
        [14.0, 8.84],
        [6.0, 6.08],
        [4.0, 5.39],
        [12.0, 8.15],
        [7.0, 6.42],
        [5.0, 5.73]
      ],
      [
        [8.0, 6.58],
        [8.0, 5.76],
        [8.0, 7.71],
        [8.0, 8.84],
        [8.0, 8.47],
        [8.0, 7.04],
        [8.0, 5.25],
        [19.0, 12.5],
        [8.0, 5.56],
        [8.0, 7.91],
        [8.0, 6.89]
      ]
    ];

    const xAxis = () => ({
      axisLabel: {
        color: getColor('quaternary-color')
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: getColor('tertiary-bg')
        }
      },

      splitLine: {
        show: true,
        lineStyle: {
          color: getColor('secondary-bg')
        }
      }
    });

    const yAxis = () => ({
      axisLabel: {
        color: getColor('quaternary-color')
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: getColor('secondary-bg')
        }
      },

      axisLine: {
        show: true,
        lineStyle: {
          color: getColor('tertiary-bg')
        }
      }
    });

    const markLineOpt = {
      animation: false,
      label: {
        formatter: 'y = 0.5 * x + 3',
        align: 'right',
        color: getColor('tertiary-color'),
        fontWeight: 600
      },
      lineStyle: {
        type: 'solid'
      },
      tooltip: {
        formatter: 'y = 0.5 * x + 3'
      },
      data: [
        [
          {
            coord: [0, 3],
            symbol: 'none'
          },
          {
            coord: [20, 13],
            symbol: 'none'
          }
        ]
      ]
    };

    const gridMdUp = [
      { left: '7%', top: '10%', width: '38%', height: '38%' },
      { right: '7%', top: '10%', width: '38%', height: '38%' },
      { left: '7%', bottom: '7%', width: '38%', height: '38%' },
      { right: '7%', bottom: '7%', width: '38%', height: '38%' }
    ];

    const gridMdDown = [
      { left: 6, right: 7, top: '4%', height: '20%' },
      { left: 6, right: 7, top: '29%', height: '20%' },
      { left: 6, right: 7, bottom: '26%', height: '20%' },
      { left: 6, right: 7, bottom: 25, height: '20%' }
    ];
    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        color: [
          getColor('primary'),
          getColor('success'),
          getColor('warning'),
          getColor('danger')
        ],
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: 'Group {a}: ({c})'
        },
        title: {
          text: "Anscombe's quartet",
          left: 'center',
          top: 0,
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        grid: window.innerWidth < 768 ? gridMdDown : gridMdUp,
        xAxis: [
          { gridIndex: 0, min: 0, max: 20, ...xAxis() },
          { gridIndex: 1, min: 0, max: 20, ...xAxis() },
          { gridIndex: 2, min: 0, max: 20, ...xAxis() },
          { gridIndex: 3, min: 0, max: 20, ...xAxis() }
        ],
        yAxis: [
          { gridIndex: 0, min: 0, max: 15, ...yAxis() },
          { gridIndex: 1, min: 0, max: 15, ...yAxis() },
          { gridIndex: 2, min: 0, max: 15, ...yAxis() },
          { gridIndex: 3, min: 0, max: 15, ...yAxis() }
        ],
        series: [
          {
            name: 'I',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: dataAll[0],
            markLine: markLineOpt
          },
          {
            name: 'II',
            type: 'scatter',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: dataAll[1],
            markLine: markLineOpt
          },
          {
            name: 'III',
            type: 'scatter',
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: dataAll[2],
            markLine: markLineOpt
          },
          {
            name: 'IV',
            type: 'scatter',
            xAxisIndex: 3,
            yAxisIndex: 3,
            data: dataAll[3],
            markLine: markLineOpt
          }
        ]
      });
      const responsiveOptions = {
        xs: {
          grid: gridMdDown
        },
        md: {
          grid: gridMdUp
        }
      };
      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const singleAxisScatterChartInit = () => {
    const { getColor, getData, getRandomNumber } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-single-axis-scatter-chart-example'
    );

    const hours = [
      '12am',
      '1am',
      '2am',
      '3am',
      '4am',
      '5am',
      '6am',
      '7am',
      '8am',
      '9am',
      '10am',
      '11am',
      '12pm',
      '1pm',
      '2pm',
      '3pm',
      '4pm',
      '5pm',
      '6pm',
      '7pm',
      '8pm',
      '9pm',
      '10pm',
      '11pm'
    ];

    const days = [
      'Saturday',
      'Friday',
      'Thursday',
      'Wednesday',
      'Tuesday',
      'Monday',
      'Sunday'
    ];

    const data = [];
    for (let i = 0; i < 7; i += 1) {
      for (let j = 0; j < 24; j += 1) {
        data.push([j, i, getRandomNumber(0, 10)]);
      }
    }

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'none'
          },
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          position: 'top',
          formatter: params => {
            return `
            ${days[params.value[1]]} <br/>
            ${hours[params.value[0]]} : ${params.value[2]}
          `;
          }
        },
        xAxis: {
          type: 'category',
          data: hours,
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: getColor('quaternary-color')
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: getColor('quaternary-color')
            }
          },
          axisLabel: {
            margin: 15
          }
        },
        series: [
          {
            name: 'Punch Card',
            type: 'scatter',
            symbolSize: val => val[2] * 2,
            data,
            animationDelay: idx => {
              return idx * 5;
            },
            itemStyle: {
              color: getColor('primary')
            }
          }
        ],
        grid: {
          right: 12,
          left: 5,
          bottom: 5,
          top: 5,
          containLabel: true
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const pieChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-pie-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          left: 'left',
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        series: [
          {
            type: 'pie',
            radius: window.innerWidth < 530 ? '45%' : '60%',
            label: {
              color: getColor('tertiary-color')
            },
            center: ['50%', '55%'],
            data: [
              {
                value: 1200,
                name: 'Facebook',
                itemStyle: {
                  color: getColor('primary')
                }
              },
              {
                value: 1000,
                name: 'Youtube',
                itemStyle: {
                  color: getColor('danger')
                }
              },
              {
                value: 800,
                name: 'Twitter',
                itemStyle: {
                  color: getColor('info')
                }
              },
              {
                value: 600,
                name: 'Linkedin',
                itemStyle: {
                  color: getColor('success')
                }
              },
              {
                value: 400,
                name: 'Github',
                itemStyle: {
                  color: getColor('warning')
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: rgbaColor(getColor('tertiary-color'), 0.5)
              }
            }
          }
        ],
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        }
      });

      const responsiveOptions = {
        xs: {
          series: [
            {
              radius: '45%'
            }
          ]
        },
        sm: {
          series: [
            {
              radius: '60%'
            }
          ]
        }
      };

      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const doughnutChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-doughnut-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          left: 'left',
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1200,
                name: 'Facebook',
                itemStyle: {
                  color: getColor('primary')
                }
              },
              {
                value: 1000,
                name: 'Youtube',
                itemStyle: {
                  color: getColor('danger')
                }
              },
              {
                value: 800,
                name: 'Twitter',
                itemStyle: {
                  color: getColor('info')
                }
              },
              {
                value: 600,
                name: 'Linkedin',
                itemStyle: {
                  color: getColor('success')
                }
              },
              {
                value: 400,
                name: 'Github',
                itemStyle: {
                  color: getColor('warning')
                }
              }
            ]
          }
        ],
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const doughnutRoundedChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-doughnut-rounded-chart-example'
    );

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: window.innerWidth < 530 ? ['65%', '55%'] : ['50%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: getColor('body-highlight-bg'),
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1200,
                name: 'Starter',
                itemStyle: {
                  color: getColor('primary')
                }
              },
              {
                value: 1000,
                name: 'Basic',
                itemStyle: {
                  color: getColor('danger')
                }
              },
              {
                value: 800,
                name: 'Optimal',
                itemStyle: {
                  color: getColor('info')
                }
              },
              {
                value: 600,
                name: 'Business',
                itemStyle: {
                  color: getColor('success')
                }
              },
              {
                value: 400,
                name: 'Premium',
                itemStyle: {
                  color: getColor('warning')
                }
              }
            ]
          }
        ],
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        }
      });

      const responsiveOptions = {
        xs: {
          series: [
            {
              center: ['65%', '55%']
            }
          ]
        },
        sm: {
          series: [
            {
              center: ['50%', '55%']
            }
          ]
        }
      };

      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const pieMultipleChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-pie-multiple-chart-example');
    const data1 = [
      {
        value: 1048,
        name: 'Starter',
        itemStyle: {
          color: getColor('danger')
        }
      },
      {
        value: 735,
        name: 'Basic',
        itemStyle: {
          color: getColor('primary')
        }
      },
      {
        value: 580,
        name: 'Optimal',
        itemStyle: {
          color: getColor('secondary')
        }
      },
      {
        value: 484,
        name: 'Business',
        itemStyle: {
          color: getColor('warning')
        }
      },
      {
        value: 300,
        name: 'Premium',
        itemStyle: {
          color: getColor('success')
        }
      },
      {
        value: 300,
        name: 'Platinum',
        itemStyle: {
          color: getColor('info')
        }
      }
    ];

    const data2 = [
      {
        value: 1048,
        name: 'Facebook',
        itemStyle: {
          color: getColor('primary')
        }
      },
      {
        value: 735,
        name: 'Youtube',
        itemStyle: {
          color: getColor('danger')
        }
      },
      {
        value: 580,
        name: 'Twitter',
        itemStyle: {
          color: getColor('info')
        }
      },
      {
        value: 484,
        name: 'Linkedin',
        itemStyle: {
          color: getColor('success')
        }
      },
      {
        value: 300,
        name: 'Github',
        itemStyle: {
          color: getColor('warning')
        }
      }
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        title: [
          {
            text: 'Pie Multiple Chart',
            left: 'center',
            textStyle: {
              color: getColor('tertiary-color')
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },

        series: [
          {
            type: 'pie',
            radius: window.innerWidth < 450 ? '48%' : '55%',
            center: ['25%', '50%'],
            data: data1,
            label: {
              show: false
            }
          },
          {
            type: 'pie',
            radius: window.innerWidth < 450 ? '48%' : '55%',
            center: ['75%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            data: data2
          }
        ]
      });

      const responsiveOptions = {
        xs: {
          series: [{ radius: '48%' }, { radius: '48%' }]
        },
        sm: {
          series: [{ radius: '55%' }, { radius: '55%' }]
        }
      };

      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const pieLabelAlignChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-pie-label-align-chart-example'
    );

    const data = [
      {
        value: 850,
        name: 'Starter',
        itemStyle: {
          color: rgbaColor(getColor('primary'), 0.5)
        }
      },
      {
        value: 750,
        name: 'Starter Pro',
        itemStyle: {
          color: getColor('danger')
        }
      },
      {
        value: 457,
        name: 'Basic',
        itemStyle: {
          color: getColor('primary')
        }
      },
      {
        value: 654,
        name: 'Optimal',
        itemStyle: {
          color: getColor('secondary')
        }
      },
      {
        value: 447,
        name: 'Business',
        itemStyle: {
          color: getColor('warning')
        }
      },
      {
        value: 682,
        name: 'Classic addition',
        itemStyle: {
          color: rgbaColor(getColor('warning'), 0.8)
        }
      },
      {
        value: 471,
        name: 'Premium',
        itemStyle: {
          color: getColor('success')
        }
      },
      {
        value: 524,
        name: 'Platinum',
        itemStyle: {
          color: getColor('info')
        }
      },
      {
        value: 200,
        name: 'Platinum Pro',
        itemStyle: {
          color: rgbaColor(getColor('primary'), 0.5)
        }
      }
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        title: [
          {
            text: 'Pie Label Align Chart',
            left: 'center',
            textStyle: {
              color: getColor('tertiary-color')
            }
          },
          {
            subtext: 'alignTo: "labelLine"',
            left: '50%',
            top: '85%',
            textAlign: 'center',
            subtextStyle: {
              color: getColor('tertiary-color')
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position(pos, ...size) {
            if (window.innerWidth <= 540) {
              const tooltipHeight = size[1].offsetHeight;
              const obj = { top: pos[1] - tooltipHeight - 20 };
              obj[pos[0] < size[3].viewSize[0] / 2 ? 'left' : 'right'] = 5;
              return obj;
            }
            return null;
          }
        },

        series: [
          {
            type: 'pie',
            radius: window.innerWidth < 530 ? '45%' : '60%',
            center: ['50%', '50%'],
            data,
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              bleedMargin: 5,
              color: getColor('tertiary-color')
            },
            left: '5%',
            right: '5%',
            top: 0,
            bottom: 0
          }
        ]
      });

      const responsiveOptions = {
        xs: {
          series: [
            {
              radius: '45%'
            }
          ]
        },
        sm: {
          series: [
            {
              radius: '60%'
            }
          ]
        }
      };

      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const pieEdgeAlignChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-pie-edge-align-chart-example'
    );

    const data = [
      {
        value: 850,
        name: 'Starter',
        itemStyle: {
          color: rgbaColor(getColor('primary'), 0.5)
        }
      },
      {
        value: 750,
        name: 'Starter Pro',
        itemStyle: {
          color: getColor('danger')
        }
      },
      {
        value: 457,
        name: 'Basic',
        itemStyle: {
          color: getColor('primary')
        }
      },
      {
        value: 654,
        name: 'Optimal',
        itemStyle: {
          color: getColor('secondary')
        }
      },
      {
        value: 447,
        name: 'Business',
        itemStyle: {
          color: getColor('warning')
        }
      },
      {
        value: 682,
        name: 'Classic addition',
        itemStyle: {
          color: rgbaColor(getColor('warning'), 0.8)
        }
      },
      {
        value: 471,
        name: 'Premium',
        itemStyle: {
          color: getColor('success')
        }
      },
      {
        value: 524,
        name: 'Platinum',
        itemStyle: {
          color: getColor('info')
        }
      },
      {
        value: 200,
        name: 'Platinum Pro',
        itemStyle: {
          color: rgbaColor(getColor('primary'), 0.5)
        }
      }
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        title: [
          {
            text: 'Pie Edge Align Chart',
            left: 'center',
            textStyle: {
              color: getColor('tertiary-color')
            }
          },
          {
            subtext: 'alignTo: "edge"',
            left: '50%',
            top: '85%',
            textAlign: 'center',
            subtextStyle: {
              color: getColor('tertiary-color')
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position(pos, ...size) {
            if (window.innerWidth <= 540) {
              const tooltipHeight = size[1].offsetHeight;
              const obj = { top: pos[1] - tooltipHeight - 20 };
              obj[pos[0] < size[3].viewSize[0] / 2 ? 'left' : 'right'] = 5;
              return obj;
            }
            return null;
          }
        },

        series: [
          {
            type: 'pie',
            radius: window.innerWidth < 530 ? '45%' : '60%',
            center: ['50%', '50%'],
            data,
            label: {
              position: 'outer',
              alignTo: 'edge',
              margin: 20,
              color: getColor('tertiary-color')
            },
            left: '5%',
            right: '5%',
            top: 0,
            bottom: 0
          }
        ]
      });

      const responsiveOptions = {
        xs: {
          series: [
            {
              radius: '45%'
            }
          ]
        },
        sm: {
          series: [
            {
              radius: '60%'
            }
          ]
        }
      };

      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const basicGaugeChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-basic-gauge-chart-example');

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs-9 text-body-tertiary mb-0">
          <span class="fas fa-circle me-1" style='color:${params[0].color}'></span>
          ${params[0].name} : ${params[0].value}
        </h6>
    </div>
    `;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        radius: '100%',
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            splitLine: {
              lineStyle: {
                color: getColor('tertiary-color')
              }
            },
            axisLabel: {
              color: getColor('tertiary-color')
            },
            detail: {
              formatter: '{value}'
            },
            title: {
              color: getColor('tertiary-color')
            },
            data: [
              {
                value: 50,
                name: 'SCORE',
                detail: {
                  color: getColor('tertiary-color')
                }
              }
            ]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const gaugeProgressChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-gauge-progress-chart-example'
    );

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs-9 text-body-tertiary mb-0">
          <span class="fas fa-circle me-1" style='color:${params[0].color}'></span>
          ${params[0].name} : ${params[0].value}
        </h6>
    </div>
    `;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            radius: '100%',
            startAngle: 180,
            endAngle: 0,
            progress: {
              show: true,
              width: 18,
              itemStyle: {
                color: getColor('info')
              }
            },
            itemStyle: {
              color: getColor('info'),
              shadowColor: rgbaColor(getColor('primary'), 0.5),
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            axisLine: {
              lineStyle: {
                width: 18,
                color: [[1, getColor('secondary-bg')]]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 2,
                color: getColor('quaternary-color')
              }
            },
            axisLabel: {
              distance: 25,
              color: getColor('quaternary-color')
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                color: getColor('info')
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 80,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 70,
                detail: {
                  fontSize: 30,
                  color: getColor('quaternary-color'),
                  offsetCenter: [0, '40%']
                }
              }
            ]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const gaugeRingChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-gauge-ring-chart-example');

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs-9 text-body-tertiary mb-0">
          <span class="fas fa-circle me-1" style='color:${params[0].color}'></span>
          ${params[0].name} : ${params[0].value}
        </h6>
    </div>
    `;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: getColor('quaternary-color')
              }
            },
            axisLine: {
              lineStyle: {
                width: 18,
                color: [[1, getColor('secondary-bg')]]
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: [
              {
                value: 80,
                title: {
                  offsetCenter: ['0%', '0%']
                },
                detail: {
                  offsetCenter: ['0%', '0%']
                },
                itemStyle: {
                  color: getColor('primary')
                }
              }
            ],
            title: {
              fontSize: 14
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 20,
              color: 'auto',
              formatter: '{value}%'
            }
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const gaugeMultiRingChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-gauge-multiring-chart-example'
    );

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            radius: '85%',
            pointer: {
              show: false
            },
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: getColor('info')
              }
            },
            axisLine: {
              lineStyle: {
                width: 8,
                color: [[1, getColor('secondary-bg')]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: [79],
            detail: {
              show: false
            },
            animationDuration: 2000
          },
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            radius: '70%',
            pointer: {
              show: false
            },
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: getColor('primary')
              }
            },
            axisLine: {
              lineStyle: {
                width: 8,
                color: [[1, getColor('secondary-bg')]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: [85],
            detail: {
              show: false
            },
            animationDuration: 2000
          },
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            radius: '55%',
            pointer: {
              show: false
            },
            center: ['50%', '50%'],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: getColor('success')
              }
            },
            axisLine: {
              lineStyle: {
                width: 8,
                color: [[1, getColor('secondary-bg')]]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: [70],
            detail: {
              show: false
            },
            animationDuration: 2000
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const gaugeMultiTitleChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-gauge-multi-title-chart-example'
    );

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs-9 text-body-tertiary mb-0">
          <span class="fas fa-circle me-1" style='color:${params[0].color}'></span>
          ${params[0].name} : ${params[0].value}
        </h6>
    </div>
    `;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        series: [
          {
            type: 'gauge',
            radius: '100%',
            anchor: {
              show: true,
              showAbove: true,
              size: 18,
              itemStyle: {
                color: getColor('warning')
              }
            },

            progress: {
              show: true,
              overlap: true,
              roundCap: true
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                color: [[1, getColor('secondary-bg')]]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 2,
                color: getColor('quaternary-color')
              }
            },
            axisLabel: {
              distance: 25,
              color: getColor('quaternary-color')
            },
            data: [
              {
                value: 20,
                name: 'Perfect',
                title: {
                  offsetCenter: ['-40%', '80%']
                },
                detail: {
                  offsetCenter: ['-40%', '95%']
                },
                itemStyle: {
                  color: getColor('primary')
                }
              },
              {
                value: 40,
                name: 'Good',
                title: {
                  offsetCenter: ['0%', '80%']
                },
                detail: {
                  offsetCenter: ['0%', '95%']
                },

                itemStyle: {
                  color: getColor('success')
                }
              },
              {
                value: 60,
                name: 'Commonly',
                title: {
                  offsetCenter: ['40%', '80%']
                },
                detail: {
                  offsetCenter: ['40%', '95%']
                },

                itemStyle: {
                  color: getColor('warning')
                }
              }
            ],
            title: {
              fontSize: 14,
              color: getColor('tertiary-color')
            },
            detail: {
              width: 40,
              height: 14,
              fontSize: 14,
              color: '#fff',
              backgroundColor: 'auto',
              borderRadius: 3,
              formatter: '{value}%'
            }
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const gaugeGradeChartInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-gauge-grade-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        series: [
          {
            radius: '100%',
            type: 'gauge',
            center: ['50%', '70%'],
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.25, getColor('danger')],
                  [0.5, getColor('warning')],
                  [0.75, getColor('info')],
                  [1, getColor('success')]
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 20,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: getColor('quaternary-color'),
              distance: -60,
              formatter: value => {
                if (value === 0.875) {
                  return 'Excellent';
                }
                if (value === 0.625) {
                  return 'Good';
                }
                if (value === 0.375) {
                  return 'Well';
                }
                if (value === 0.125) {
                  return 'Bad';
                }
                return '';
              }
            },
            title: {
              offsetCenter: [0, '-20%'],
              color: getColor('tertiary-color')
            },
            detail: {
              offsetCenter: [0, '0%'],
              valueAnimation: true,
              formatter: value => {
                return Math.round(value * 100);
              },
              color: 'auto'
            },
            data: [
              {
                value: 0.7,
                name: 'Grade'
              }
            ]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const radarChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-radar-chart-example');

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position(pos, ...size) {
            if (window.innerWidth <= 540) {
              const tooltipHeight = size[1].offsetHeight;
              const obj = { top: pos[1] - tooltipHeight - 20 };
              obj[pos[0] < size[3].viewSize[0] / 2 ? 'left' : 'right'] = 5;
              return obj;
            }
            return null;
          }
        },

        radar: {
          indicator: [
            { name: 'Marketing', max: 6500 },
            { name: 'Admin', max: 16000 },
            { name: 'Tech', max: 30000 },
            { name: 'Support', max: 38000 },
            { name: 'Dev ', max: 52000 },
            { name: 'Sales ', max: 25000 }
          ],
          radius: 120,
          splitLine: {
            lineStyle: {
              color: rgbaColor(getColor('tertiary-color'))
            }
          }
        },

        series: [
          {
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Data A',
                itemStyle: {
                  color: getColor('primary')
                }
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Data B',
                itemStyle: {
                  color: getColor('warning')
                }
              }
            ]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const radarCustomizedChartInit = () => {
    const { getColor, getData, rgbaColor } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-radar-customized-chart-example'
    );

    const getFormatter = params => {
      const indicators = [
        ['Marketing', 'Sales', 'Dev', 'Support', 'Tech', 'Admin'],
        ['Language', 'Math', 'English', 'Physics', 'Chemistry', 'Biology']
      ];
      const num = params.seriesIndex;
      return `<strong > ${params.name} </strong>
    <div class="fs-9 text-body-tertiary">
      <strong >${indicators[params.seriesIndex][0]}</strong>: ${
      params.value[0]
    }  <br>
      <strong>${indicators[num][1]}</strong>: ${params.value[1]}  <br>
      <strong>${indicators[num][2]}</strong>: ${params.value[2]}  <br>
      <strong>${indicators[num][3]}</strong>: ${params.value[3]}  <br>
      <strong>${indicators[num][4]}</strong>: ${params.value[4]}  <br>
      <strong>${indicators[num][5]}</strong>: ${params.value[5]}  <br>
    </div>`;
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: getFormatter
        },

        radar: [
          {
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            indicator: [
              { name: 'Admin', max: 6500 },
              { name: 'Tech', max: 16000 },
              { name: 'Support', max: 30000 },
              { name: 'Dev', max: 38000 },
              { name: 'Sales', max: 52000 },
              { name: 'Marketing', max: 25000 }
            ],
            name: {
              formatter: '{value}',
              textStyle: {
                color: getColor('tertiary-color')
              }
            },
            splitLine: {
              lineStyle: {
                color: rgbaColor(getColor('tertiary-color'))
              }
            }
          },

          {
            indicator: [
              { text: 'Language', max: 150 },
              { text: 'Math', max: 150 },
              { text: 'English', max: 150 },
              { text: 'physics', max: 120 },
              { text: 'Chemistry', max: 108 },
              { text: 'Biology', max: 72 }
            ],
            radius: window.innerWidth < 576 ? 90 : 120,
            center: window.innerWidth < 992 ? ['50%', '75%'] : ['75%', '50%'],
            splitLine: {
              lineStyle: {
                color: getColor('tertiary-color')
              }
            },
            name: {
              textStyle: {
                color: getColor('tertiary-color'),
                backgroundColor: rgbaColor(getColor('body-highlight-bg')),
                borderRadius: 3,
                padding: [3, 5]
              }
            }
          }
        ],

        series: [
          {
            type: 'radar',
            data: [
              {
                value: [5200, 4000, 20000, 30000, 20000, 18000],
                name: 'Data A',
                itemStyle: {
                  color: getColor('info')
                },
                areaStyle: {
                  color: rgbaColor(getColor('info'), 0.3)
                }
              },
              {
                value: [5000, 12000, 28000, 26000, 32000, 21000],
                name: 'Data B',
                itemStyle: {
                  color: getColor('success')
                },
                areaStyle: {
                  color: rgbaColor(getColor('success'), 0.3)
                }
              }
            ]
          },

          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: [130, 110, 130, 100, 99, 70],
                name: 'Data C',
                symbol: 'rect',
                symbolSize: 12,
                lineStyle: {
                  type: 'dashed'
                },
                itemStyle: {
                  color: getColor('warning')
                },
                areaStyle: {
                  color: rgbaColor(getColor('warning'), 0.3)
                },
                label: {
                  show: true,
                  formatter: params => {
                    return params.value;
                  },
                  color: getColor('tertiary-color')
                }
              },
              {
                value: [100, 93, 50, 90, 70, 60],
                name: 'Data D',
                itemStyle: {
                  color: getColor('danger')
                },
                areaStyle: {
                  color: rgbaColor(getColor('danger'), 0.3)
                }
              }
            ]
          }
        ]
      });

      const responsiveOptions = {
        xs: {
          radar: [
            {
              center: ['50%', '30%'],
              radius: 90
            },
            {
              center: ['50%', '75%'],
              radius: 90
            }
          ]
        },
        sm: {
          radar: [
            {
              radius: 120
            },
            {
              radius: 120
            }
          ]
        },
        xl: {
          radar: [
            {
              center: ['25%', '50%']
            },
            {
              center: ['75%', '50%']
            }
          ]
        }
      };

      echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
    }
  };

  const radarMultipleChartInit = () => {
    const { getColor, getData, rgbaColor, resize } = window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-radar-multiple-chart-example'
    );

    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December'
    ];

    const getCenter = () => {
      if (window.innerWidth < 1540 && window.innerWidth > 992) {
        return [
          ['25%', '40%'],
          ['50%', '75%'],
          ['75%', '40%']
        ];
      }
      if (window.innerWidth < 992) {
        return [
          ['50%', '20%'],
          ['50%', '50%'],
          ['50%', '80%']
        ];
      }
      return [
        ['15%', '50%'],
        ['50%', '50%'],
        ['85%', '50%']
      ];
    };

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        legend: {
          left: 'left',
          textStyle: {
            color: getColor('tertiary-color')
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position(pos, ...size) {
            if (window.innerWidth <= 540) {
              const tooltipHeight = size[1].offsetHeight;
              const obj = { top: pos[1] - tooltipHeight - 20 };
              obj[pos[0] < size[3].viewSize[0] / 2 ? 'left' : 'right'] = 5;
              return obj;
            }
            return null;
          }
        },

        radar: [
          {
            indicator: [
              { text: 'Brand', max: 100 },
              { text: 'content', max: 100 },
              { text: 'Usability', max: 100 },
              { text: 'Features', max: 100 }
            ],
            center: getCenter()[0],
            radius: 85,
            splitLine: {
              lineStyle: {
                color: rgbaColor(getColor('tertiary-color'))
              }
            }
          },
          {
            indicator: [
              { text: 'Exterior', max: 100 },
              { text: 'Take pictures', max: 100 },
              { text: 'system', max: 100 },
              { text: 'performance', max: 100 },
              { text: 'screen', max: 100 }
            ],
            radius: 85,
            center: getCenter()[1],
            splitLine: {
              lineStyle: {
                color: rgbaColor(getColor('tertiary-color'))
              }
            }
          },
          {
            indicator: months.map(month => ({
              text: month,
              max: 100
            })),
            center: getCenter()[2],
            radius: 85,
            splitLine: {
              lineStyle: {
                color: rgbaColor(getColor('tertiary-color'))
              }
            }
          }
        ],

        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {
              color: rgbaColor(getColor('info'), 0.5)
            },
            data: [
              {
                value: [60, 73, 85, 40],
                name: 'A software',
                itemStyle: {
                  color: getColor('info')
                }
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 1,
            data: [
              {
                value: [85, 90, 90, 95, 95],
                name: 'A staple mobile phone',
                itemStyle: {
                  color: rgbaColor(getColor('primary'), 0.8)
                },
                areaStyle: {
                  color: rgbaColor(getColor('primary'), 0.3)
                }
              },
              {
                value: [95, 80, 75, 90, 93],
                name: 'A fruit phone',
                itemStyle: {
                  color: getColor('success')
                },
                areaStyle: {
                  color: rgbaColor(getColor('success'), 0.3)
                }
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            tooltip: {
              show: false
            },
            data: [
              {
                name: 'Precipitation',
                value: [
                  2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0,
                  2.3
                ],
                itemStyle: {
                  color: getColor('primary')
                },
                areaStyle: {
                  color: rgbaColor(getColor('primary'), 0.5)
                }
              },
              {
                name: 'Evaporation',
                value: [
                  2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4,
                  3.3
                ],
                itemStyle: {
                  color: getColor('warning')
                },
                areaStyle: {
                  color: rgbaColor(getColor('warning'), 0.5)
                }
              }
            ]
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);

      resize(() => {
        chart.setOption({
          radar: getCenter().map(item => ({
            center: item
          }))
        });
      });
    }
  };

  const heatmapChartInit = () => {
    const { getColor, getData, rgbaColor, getRandomNumber } =
      window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-heatmap-chart-example');

    const hours = [
      '12a',
      '2a',
      '4a',
      '6a',
      '8a',
      '10a',
      '12p',
      '2p',
      '4p',
      '6p',
      '8p',
      '10p'
    ];
    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    const data = [];
    for (let i = 0; i < 7; i += 1) {
      for (let j = 0; j < 12; j += 1) {
        data.push([j, i, getRandomNumber(5, 12)]);
      }
    }

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          position: 'top',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1
        },
        grid: {
          right: 5,
          left: 5,
          top: 5,
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: hours,
          splitArea: {
            show: true
          },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('quaternary-color')
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('quaternary-color')
          },
          splitArea: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('quaternary-color')
            }
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0%',
          textStyle: {
            color: getColor('tertiary-color'),
            fontWeight: 500
          },
          inRange: {
            color: [
              rgbaColor(getColor('primary'), 1),
              rgbaColor(getColor('info'), 1),
              rgbaColor(getColor('success'), 1)
              // utils.rgbaColor(utils.getColors()['warning'], 1),
              // utils.rgbaColor(utils.getColors()['danger'], 1)
            ]
          }
        },
        series: [
          {
            type: 'heatmap',
            data,
            label: {
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: rgbaColor(getColor('black'), 0.5)
              }
            }
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const heatmapSingleSeriesChartInit = () => {
    const { getColor, getData, rgbaColor, getRandomNumber } =
      window.phoenix.utils;
    const $chartEl = document.querySelector(
      '.echart-heatmap-single-series-chart-example'
    );

    const hours = [
      '12a',
      '2a',
      '4a',
      '6a',
      '8a',
      '10a',
      '12p',
      '2p',
      '4p',
      '6p',
      '8p',
      '10p'
    ];
    const days = [
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
      'Sunday'
    ];

    const data = [];
    for (let i = 0; i < 7; i += 1) {
      for (let j = 0; j < 12; j += 1) {
        data.push([j, i, getRandomNumber(1, 12)]);
      }
    }

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        gradientColor: [
          rgbaColor(getColor('info'), 1),
          rgbaColor(getColor('primary'), 1)
        ],

        tooltip: {
          position: 'top',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1
        },
        grid: {
          right: 5,
          left: 5,
          top: 5,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          axisTick: { show: false },
          type: 'category',
          data: hours,
          splitArea: {
            show: true
          },
          axisLabel: {
            color: getColor('quaternary-color')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('quaternary-color')
            }
          }
        },
        yAxis: {
          axisTick: { show: false },
          type: 'category',
          data: days,
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('quaternary-color')
          },
          splitArea: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('quaternary-color')
            }
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0%',
          textStyle: {
            color: getColor('quaternary-color'),
            fontWeight: 500
          }
        },

        series: [
          {
            type: 'heatmap',
            data,
            label: {
              show: true
            },
            itemStyle: {
              borderColor: getColor('body-highlight-bg'),
              borderWidth: 3
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: rgbaColor(getColor('black'), 0.5)
              }
            }
          }
        ]
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  const { docReady } = window.phoenix.utils;

  docReady(basicLineChartInit);
  docReady(basicAreaLineChartInit);
  docReady(stackedLineChartInit);
  docReady(stackedAreaChartInit);
  docReady(lineMarkerChartInit);
  docReady(areaPiecesChartInit);
  docReady(stepLineChartInit);
  docReady(lineGradientChartInit);
  docReady(dynamicLineChartInit);
  docReady(lineLogChartInit);
  docReady(shareDatasetChartInit);
  docReady(basicBarChartInit);
  docReady(horizontalBarChartInit);
  docReady(barNegativeChartInit);
  docReady(seriesBarChartInit);
  docReady(stackedBarChartInit);
  docReady(stackedHorizontalBarChartInit);
  docReady(barRaceChartInit);
  docReady(barGradientChartInit);
  docReady(barLineMixedChartInit);
  docReady(barWaterFallChartInit);
  docReady(barTimelineChartInit);
  docReady(basicCandlestickChartInit);
  docReady(candlestickMixedChartInit);
  docReady(sessionByCountryMapInit);
  docReady(mapUSAInit);
  docReady(basicScatterChartInit);
  docReady(bubbleChartInit);
  docReady(quartetScatterChartInit);
  docReady(singleAxisScatterChartInit);
  docReady(pieChartInit);
  docReady(doughnutChartInit);
  docReady(doughnutRoundedChartInit);
  docReady(pieMultipleChartInit);
  docReady(pieLabelAlignChartInit);
  docReady(pieEdgeAlignChartInit);
  docReady(basicGaugeChartInit);
  docReady(gaugeProgressChartInit);
  docReady(gaugeRingChartInit);
  docReady(gaugeMultiRingChartInit);
  docReady(gaugeMultiTitleChartInit);
  docReady(gaugeGradeChartInit);
  docReady(radarChartInit);
  docReady(radarCustomizedChartInit);
  docReady(radarMultipleChartInit);
  docReady(heatmapChartInit);
  docReady(heatmapSingleSeriesChartInit);

}));
//# sourceMappingURL=echarts-example.js.map
