(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-700"><span class="fas fa-circle me-1 fs--2" 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-600'>
              ${
                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 = [
      '2010',
      '2011',
      '2012',
      '2013',
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
      '2020',
      '2021'
    ];

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

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs--1 text-700 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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: tooltipFormatter,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('gray-300')
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            formatter: value => value.substring(0, 3),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: getColor('gray-200')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false },
          min: 600
        },
        series: [
          {
            type: 'line',
            data,
            itemStyle: {
              color: getColor('white'),
              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 = [
      '2010',
      '2011',
      '2012',
      '2013',
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
      '2020',
      '2021'
    ];
    const data = [
      1020, 1160, 1300, 958, 1240, 1020, 1409, 1200, 1051, 1120, 1240, 1054
    ];

    const tooltipFormatter = params => {
      return `
    <div>
        <h6 class="fs--1 text-700 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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            formatter: value => value.substring(0, 3),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false },
          min: 600
        },
        series: [
          {
            type: 'line',
            data,
            itemStyle: {
              color: getColor('white'),
              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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            margin: 15,
            formatter: value => value.substring(0, 3)
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('gray-200'),
              type: 'dashed'
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: 'Matcha Latte',
            type: 'line',
            symbolSize: 6,
            itemStyle: {
              color: getColor('white'),
              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('white'),
              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('white'),
              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('white'),
              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('white'),
              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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            margin: 15,
            formatter: value => value.substring(0, 3)
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            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('white'),
              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('white'),
              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('white'),
              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('white'),
              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('white'),
              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('gray-600')
              }
            },
            {
              name: 'Min',
              textStyle: {
                color: getColor('gray-600')
              }
            }
          ]
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: tooltipFormatter
        },
        xAxis: {
          type: 'category',
          data: days,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('gray-400'),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            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('white'),
              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('gray-600')
              },
              data: [{ type: 'average', name: 'average' }]
            }
          },
          {
            name: 'Min',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            symbolSize: 10,
            itemStyle: {
              color: getColor('white'),
              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('gray-600')
              },
              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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            margin: 15,
            formatter: value => window.dayjs(value).format('MMM DD')
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          data: days,
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('gray-400'),
            margin: 15
          },
          splitLine: {
            show: false
          },
          axisPointer: {
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            margin: 15
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: 'Step Start',
            type: 'line',
            step: 'start',
            symbolSize: 10,
            itemStyle: {
              color: getColor('white'),
              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('white'),
              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('white'),
              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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-500'),
            margin: 15
          },
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisPointer: {
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: getColor('gray-500'),
            margin: 15
          },
          splitLine: {
            lineStyle: {
              color: getColor('gray-200'),
              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: {
            color: getColor('white'),
            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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: getColor('gray-500')
          },

          axisLine: {
            lineStyle: {
              color: getColor('gray-300')
            }
          },
          axisPointer: {
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            show: false
          },
          axisLabel: {
            color: getColor('gray-500')
          }
        },
        series: [
          {
            name: 'Total',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data,
            lineStyle: {
              color: getColor('primary')
            },
            itemStyle: {
              color: getColor('white'),
              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('gray-100'),
          borderColor: getColor('gray-300'),
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: getColor('gray-300')
            }
          },
          axisLabel: {
            color: getColor('gray-600')
          },
          splitLine: { show: false },
          data: Array.from(Array(10).keys()).map(item => item + 1)
        },
        yAxis: {
          type: 'log',
          axisLabel: {
            color: getColor('gray-600')
          },
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          }
        },
        series: [
          {
            name: 'Index Of 3',
            type: 'line',
            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
            symbolSize: 7,
            itemStyle: {
              color: getColor('white'),
              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('white'),
              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('white'),
              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('gray-700')
          }
        },
        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('gray-300')
            }
          },
          axisLabel: {
            color: getColor('gray-600')
          },
          axisPointer: {
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        yAxis: {
          gridIndex: 0,
          axisLabel: {
            color: getColor('gray-600')
          },
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          }
        },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' },
            symbolSize: 10,
            itemStyle: {
              color: getColor('white'),
              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('white'),
              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('white'),
              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('white'),
              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('gray-600')
            },
            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 = [
      '2010',
      '2011',
      '2012',
      '2013',
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
      '2020',
      '2021'
    ];
    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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'category',
          data: months,
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            formatter: value => value.substring(0, 3),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          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 = [
      '2010',
      '2011'
    ];
    const data = [
      1020, 1160
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          formatter: tooltipFormatter,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          type: 'value',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300')
            }
          },
          axisTick: { show: true },
          axisLabel: {
            color: getColor('gray-500')
          },
          splitLine: {
            show: false
          },
          min: 600
        },
        yAxis: {
          type: 'category',
          data: months,
          boundaryGap: true,
          axisLabel: {
            formatter: value => value.substring(0, 3),
            show: true,
            color: getColor('gray-500'),
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-200')
            }
          }
        },
        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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: value => `${value / 1000} mil`,
            color: getColor('gray-500')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: getColor('gray-200')
            }
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisLabel: {
            color: getColor('gray-500')
          },
          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('dark'), 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('gray-700')
          },
          left: 0
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            }
          },
          iconStyle: {
            borderColor: getColor('gray-700'),
            borderWidth: 1
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        xAxis: {
          data: xAxisData,
          splitLine: { show: false },
          splitArea: { show: false },

          axisLabel: {
            color: getColor('gray-600')
          },

          axisLine: {
            lineStyle: {
              color: getColor('gray-400')
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          axisLabel: {
            color: getColor('gray-600')
          }
        },
        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 = {};

    const dataMap = {};

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

    dataMap.days = dataFormatter({
      2010: ['MIN. GILMAR MENDES','MIN. ELLEN GRACIE','MIN. CARMEN LUCIA','MIN. DIAS TOFFOLI','MIN. CELSO DE MELLO','MIN. AYRES BRITTO','MIN. RICARDO LEWANDOWSKI','MIN. MARCO AURELIO','MIN. JOAQUIM BARBOSA',],
    2011: ['MIN. LUIZ FUX','MIN. RICARDO LEWANDOWSKI','MIN. GILMAR MENDES','MIN. CELSO DE MELLO','MIN. CARMEN LUCIA','MIN. AYRES BRITTO','MIN. JOAQUIM BARBOSA','MIN. DIAS TOFFOLI','MIN. MARCO AURELIO',],
    2012: ['MIN. ROSA WEBER','MIN. GILMAR MENDES','MIN. LUIZ FUX','MIN. RICARDO LEWANDOWSKI','MIN. CARMEN LUCIA','MIN. JOAQUIM BARBOSA','MIN. CELSO DE MELLO','MIN. DIAS TOFFOLI','MIN. MARCO AURELIO',],
    2013: ['MIN. GILMAR MENDES','MIN. RICARDO LEWANDOWSKI','MIN. LUIZ FUX','MIN. CELSO DE MELLO','MIN. MARCO AURELIO','MIN. TEORI ZAVASCKI','MIN. CARMEN LUCIA','MIN. DIAS TOFFOLI','MIN. ROSA WEBER',],
    2014: ['MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. LUIZ FUX','MIN. ROSA WEBER','MIN. DIAS TOFFOLI','MIN. CELSO DE MELLO','MIN. LUIS ROBERTO BARROSO','MIN. TEORI ZAVASCKI','MIN. MARCO AURELIO',],
    2015: ['MIN. EDSON FACHIN','MIN. CARMEN LUCIA','MIN. TEORI ZAVASCKI','MIN. GILMAR MENDES','MIN. ROSA WEBER','MIN. LUIZ FUX','MIN. DIAS TOFFOLI','MIN. MARCO AURELIO','MIN. CELSO DE MELLO','MIN. LUIS ROBERTO BARROSO',],
    2016: ['MIN. CARMEN LUCIA','MIN. TEORI ZAVASCKI','MIN. CELSO DE MELLO','MIN. GILMAR MENDES','MIN. MARCO AURELIO','MIN. ROSA WEBER','MIN. DIAS TOFFOLI','MIN. LUIZ FUX','MIN. LUIS ROBERTO BARROSO','MIN. EDSON FACHIN',],
    2017: ['MIN. GILMAR MENDES','MIN. CELSO DE MELLO','MIN. RICARDO LEWANDOWSKI','MIN. EDSON FACHIN','MIN. LUIS ROBERTO BARROSO','MIN. DIAS TOFFOLI','MIN. ROSA WEBER','MIN. LUIZ FUX','MIN. MARCO AURELIO','MIN. ALEXANDRE DE MORAES',],
    2018: ['MIN. DIAS TOFFOLI','MIN. CELSO DE MELLO','MIN. LUIZ FUX','MIN. GILMAR MENDES','MIN. ROSA WEBER','MIN. RICARDO LEWANDOWSKI','MIN. LUIS ROBERTO BARROSO','MIN. EDSON FACHIN','MIN. MARCO AURELIO','MIN. ALEXANDRE DE MORAES',],
    2019: ['MIN. CELSO DE MELLO','MIN. LUIZ FUX','MIN. RICARDO LEWANDOWSKI','MIN. ROSA WEBER','MIN. CARMEN LUCIA','MIN. LUIS ROBERTO BARROSO','MIN. ALEXANDRE DE MORAES','MIN. GILMAR MENDES','MIN. EDSON FACHIN','MIN. MARCO AURELIO',],
    2020: ['MIN. LUIZ FUX','MIN. CELSO DE MELLO','MIN. GILMAR MENDES','MIN. LUIS ROBERTO BARROSO','MIN. ALEXANDRE DE MORAES','MIN. CARMEN LUCIA','MIN. RICARDO LEWANDOWSKI','MIN. ROSA WEBER','MIN. EDSON FACHIN','MIN. MARCO AURELIO',],
    2021: ['MIN. MARCO AURELIO','MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. ALEXANDRE DE MORAES','MIN. NUNES MARQUES','MIN. DIAS TOFFOLI','MIN. RICARDO LEWANDOWSKI','MIN. ROSA WEBER','MIN. LUIS ROBERTO BARROSO','MIN. EDSON FACHIN',],
    2022: ['MIN. ANDRE MENDONCA','MIN. ROSA WEBER','MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. ALEXANDRE DE MORAES','MIN. NUNES MARQUES','MIN. RICARDO LEWANDOWSKI','MIN. LUIS ROBERTO BARROSO','MIN. DIAS TOFFOLI','MIN. EDSON FACHIN',],
    2023: ['MIN. CRISTIANO ZANIN','MIN. LUIS ROBERTO BARROSO','MIN. LUIZ FUX','MIN. CARMEN LUCIA','MIN. GILMAR MENDES','MIN. DIAS TOFFOLI','MIN. NUNES MARQUES','MIN. ANDRE MENDONCA','MIN. EDSON FACHIN','MIN. ALEXANDRE DE MORAES',]});
    
dataMap.dataTI = dataFormatter({
    2010: [35,17,34,52,14,29,18,25,17,],
    2011: [27,33,32,15,35,39,28,63,27,],
    2012: [13,36,36,32,16,28,12,42,41,],
    2013: [20,23,43,39,42,39,23,38,44,],
    2014: [59,38,37,31,70,53,23,35,37,],
    2015: [37,52,33,32,28,72,45,40,37,46,],
    2016: [40,33,34,26,62,41,75,30,39,60,],
    2017: [41,73,18,63,33,59,104,89,45,130,],
    2018: [79,58,130,52,23,59,93,87,176,153,],
    2019: [45,170,58,105,110,120,146,173,115,103,],
    2020: [132,134,303,269,146,212,94,216,159,303,],
    2021: [168,200,219,147,109,90,179,220,188,151,],
    2022: [89,152,158,121,112,159,105,296,128,152,],
    2023: [32,237,104,81,156,94,138,49,126,95,]
});

dataMap.dataSI = dataFormatter({
    2010: [1272,1111,1375,1282,1110,1575,1269,1206,1259,],
    2011: [858,1172,1632,1150,1361,1260,1226,1387,119,],
    2012: [1135,1134,1260,1072,985,1061,1227,658,1626,],
    2013: [1267,1561,2093,1800,1228,2142,1916,1789,1328,],
    2014: [1692,1763,1836,1511,1290,2612,2074,2222,1247,],
    2015: [815,1502,2689,2094,1415,2022,1669,1668,1806,1584,],
    2016: [791,2316,1388,1539,1685,1925,1742,1740,1754,2019,],
    2017: [2058,2077,2129,2874,2106,2373,2198,2369,2525,1408,],
    2018: [1777,2135,2179,2689,2050,2561,2624,3271,2891,2613,],
    2019: [2704,2598,3142,2824,2911,2803,3515,3393,3879,3763,],
    2020: [2876,2888,3400,2920,3103,3395,3318,4338,3873,5241,],
    2021: [3009,3270,3237,3210,3735,3595,3606,3816,4097,3690,],
    2022: [2596,2084,2793,2739,2596,2936,3054,3251,3239,3093,],
    2023: [1748,2170,3189,3104,3425,3163,3483,3569,3774,9585,]
});

dataMap.dataPI = dataFormatter({
    2010: [3808,5308,5305,5451,5701,5338,6073,6449,7863,],
    2011: [3769,4324,4340,5058,4843,6332,6686,6695,8395,],
    2012: [3910,4117,4106,4630,4758,5151,5284,6847,7005,],
    2013: [5130,4924,4403,5009,5963,5069,5608,7138,8364,],
    2014: [6159,6443,6482,6878,7393,6567,7141,7072,8569,],
    2015: [2655,6037,5662,6407,7580,7710,8275,8817,8862,11476,],
    2016: [4398,4192,5838,5866,6361,6449,6748,7224,7568,8085,],
    2017: [4940,5178,5500,5181,6013,5758,5931,6028,6001,7284,],
    2018: [3516,4661,4903,4687,5484,5105,5261,5567,6218,8199,],
    2019: [3234,3245,3315,3689,3598,3953,3584,3817,3722,4687,],
    2020: [1321,1394,1503,2122,2126,2202,2579,2223,3402,2431,],
    2021: [882,1248,1626,1828,1512,1778,1829,1686,1488,2767,],
    2022: [495,1305,1376,1636,1838,1746,2017,1965,2174,2794,],
    2023: [1290,1630,1170,1667,1490,1976,1927,2476,2567,1871,]
});

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [
              '2011-01-01',
              '2012-01-01',
              '2013-01-01',
              '2014-01-01',
              '2015-01-01',
              '2016-01-01',
              '2017-01-01',
              '2018-01-01',
              '2019-01-01',
              '2020-01-01',
              '2021-01-01',
              '2022-01-01',
              '2023-01-01',
              '2024-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('gray-700')
            }
          },
          color: [
          getColor('danger'),
          getColor('info'),
          getColor('success')
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          position: (...params) => handleTooltipPosition(params),
          formatter: tooltipFormatter
        },
        toolbox: {
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            }
          },
          right: 0
        },
        legend: {
          data: [
            'Corte Constitucional',
            'Demais',
            'Recursais'
          ],
          textStyle: {
            color: getColor('gray-600')
          },
          right: 40
        },
        calculable: true,
        xAxis: {
          type: 'value',
          min: 0,
          max: 14000,
          axisLine: {
            show: false,
            lineStyle: {
              color: getColor('gray-300')
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-500')
          },
          splitLine: {
            lineStyle: {
              show: true,
              color: getColor('gray-200')
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLine: {
            lineStyle: {
              show: true,
              color: getColor('gray-300')
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-500')
          }
        },
        series: [
          {
            name: 'Corte Constitucional',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [400, 241, 451, 150, 321, 330, 142]
          },
          {
            name: 'Demais',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [250, 200, 222, 240, 230, 230, 211]
          },
          {
            name: 'Recursais',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [190, 182, 170, 195, 260, 333, 124]
          }
        ],
        grid: {
          top: '10%',
          bottom: '15%',
          left: 5,
          right: 10,
          containLabel: true
        }
      },
      options: [
        {
          title: { text: '2010' },
          series: [
            { data: dataMap.dataTI['2010'] },
            { data: dataMap.dataSI['2010'] },
            { data: dataMap.dataPI['2010'] }
          ],
          yAxis: [{data: dataMap.days['2010']}]
        },
        {
          title: { text: '2011' },
          series: [
            { data: dataMap.dataTI['2011'] },
            { data: dataMap.dataSI['2011'] },
            { data: dataMap.dataPI['2011'] }
          ],
          yAxis: [{data: dataMap.days['2011']}]
        },
        {
          title: { text: '2012' },
          series: [
            { data: dataMap.dataTI['2012'] },
            { data: dataMap.dataSI['2012'] },
            { data: dataMap.dataPI['2012'] }
          ],
          yAxis: [{data: dataMap.days['2012']}]
        },
        {
          title: { text: '2013' },
          series: [
            { data: dataMap.dataTI['2013'] },
            { data: dataMap.dataSI['2013'] },
            { data: dataMap.dataPI['2013'] }
          ],
          yAxis: [{data: dataMap.days['2013']}]
        },
        {
          title: { text: '2014' },
          series: [
            { data: dataMap.dataTI['2014'] },
            { data: dataMap.dataSI['2014'] },
            { data: dataMap.dataPI['2014'] }
          ],
          yAxis: [{data: dataMap.days['2014']}]
        },
        {
          title: { text: '2015' },
          series: [
            { data: dataMap.dataTI['2015'] },
            { data: dataMap.dataSI['2015'] },
            { data: dataMap.dataPI['2015'] }
          ],
          yAxis: [{data: dataMap.days['2015']}]
        },
        {
          title: { text: '2016' },
          series: [
            { data: dataMap.dataTI['2016'] },
            { data: dataMap.dataSI['2016'] },
            { data: dataMap.dataPI['2016'] }
          ],
          yAxis: [{data: dataMap.days['2016']}]
        },
        {
          title: { text: '2017' },
          series: [
            { data: dataMap.dataTI['2017'] },
            { data: dataMap.dataSI['2017'] },
            { data: dataMap.dataPI['2017'] }
          ],
          yAxis: [{data: dataMap.days['2017']}]
        },
        {
          title: { text: '2018' },
          series: [
            { data: dataMap.dataTI['2018'] },
            { data: dataMap.dataSI['2018'] },
            { data: dataMap.dataPI['2018'] }
          ],
          yAxis: [{data: dataMap.days['2018']}]
        },
        {
          title: { text: '2019' },
          series: [
            { data: dataMap.dataTI['2019'] },
            { data: dataMap.dataSI['2019'] },
            { data: dataMap.dataPI['2019'] }
          ],
          yAxis: [{data: dataMap.days['2019']}]
        },
        {
          title: { text: '2020' },
          series: [
            { data: dataMap.dataTI['2020'] },
            { data: dataMap.dataSI['2020'] },
            { data: dataMap.dataPI['2020'] }
          ],
          yAxis: [{data: dataMap.days['2020']}]
        },
        {
          title: { text: '2021' },
          series: [
            { data: dataMap.dataTI['2021'] },
            { data: dataMap.dataSI['2021'] },
            { data: dataMap.dataPI['2021'] }
          ],
          yAxis: [{data: dataMap.days['2021']}]
        },
        {
          title: { text: '2022' },
          series: [
            { data: dataMap.dataTI['2022'] },
            { data: dataMap.dataSI['2022'] },
            { data: dataMap.dataPI['2022'] }
          ],
          yAxis: [{data: dataMap.days['2022']}]
        },
        {
          title: { text: '2023' },
          series: [
            { data: dataMap.dataTI['2023'] },
            { data: dataMap.dataSI['2023'] },
            { data: dataMap.dataPI['2023'] }
          ],
          yAxis: [{data: dataMap.days['2023']}]
        }
      ]
      });
      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('gray-200')
            }
          },
          axisLabel: {
            color: getColor('gray-500')
          }
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
          inverse: true,
          axisLabel: {
            color: getColor('gray-500')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300')
            }
          },
          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('gray-700'),
              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--1 text-700 mb-0">
        <span class="fas fa-circle me-1 text-primary"></span> ${params[0].name}: <b>R$ ${params[0].value / 1000} </b>por decisão
         </h6>
      </div> `;
    };const dataAxis = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', ];
    const data = [4375, 4318, 4532, 5538, 6131, 6211, 6918, 5166, ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          type: 'value',
          axisLabel: {
          
              color: getColor('gray-600'),
              formatter: value => `R$ ${value / 1000} mil`
            
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        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 barGradientChartInit2 = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-bar-gradient-chart-example2');

    const tooltipFormatter = params => {
      return `<div> 
        <h6 class="fs--1 text-700 mb-0">
        <span class="fas fa-circle me-1 text-danger"></span> ${params[0].name}: <b>R$ ${params[0].value} milhões </b> no ano
         </h6>
      </div> `;
    };const dataAxis = ['2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023', ];
        const data = [247, 226, 262, 209, 165, 182, 222, 179, ];
    
        if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params)
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          type: 'value',
          axisLabel: {
          
              color: getColor('gray-600'),
              formatter: value => `${value} mi`
            
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: 'Total',
            showBackground: true,
            itemStyle: {
              color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: getColor('danger') },
                { offset: 0.5, color: getColor('warning') },
                { offset: 1, color: getColor('warning') }
              ]),
              barBorderRadius: [3, 3, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: getColor('warning') },
                  { offset: 0.7, color: getColor('warning') },
                  { offset: 1, color: getColor('danger') }
                ])
              }
            },
            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 = [
      '2010',
      '2011',
      '2012',
      '2013',
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
      '2020',
      '2021',
      '2022',
      '2023'
    ];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: getColor('gray-500')
            },
            label: {
              show: true,
              backgroundColor: getColor('gray-600'),
              color: getColor('gray-100')
            }
          },
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-700'),
            borderWidth: 1
          },

          emphasis: {
            iconStyle: {
              textFill: getColor('gray-600')
            }
          }
        },
        legend: {
          top: 10,
          data: ['Total de Decisões Recursais', '% Não Provimento'],
          textStyle: {
            color: getColor('gray-600')
          }
        },
        xAxis: [
          {
            type: 'category',
            data: months,
            axisLabel: {
              color: getColor('gray-600'),
              formatter: value => value.slice(0, 4)
            },
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: getColor('gray-300')
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              color: getColor('gray-600'),
              formatter: '{value} %'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: getColor('gray-200')
              }
            }
          },
          {
            type: 'value',
            min: 0,
            max: 70,
            interval: 10,
            axisLabel: {
              color: getColor('gray-600'),
              formatter: value => `${value} mil`
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: getColor('gray-200')
              }
            }
          }
        ],
        series: [
          {
            name: '% Não Provimento',
            type: 'bar',
            data: [
              95.2, 95.8, 97.0, 97.4, 97.3, 96.2, 97.7, 97.6, 97.1, 96.2, 94.8, 96.4, 96.5, 95.4
            ],
            itemStyle: {
              color: getColor('info'),
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          {
            name: 'Total de Decisões Recursais',
            type: 'line',
            yAxisIndex: 1,
            data: [
              39.709, 36.453, 35.387, 37.522, 58.671, 59.089, 57.564, 53.461, 59.468, 39.146, 28.253, 30.345, 33.153, 36.206
            ],
            lineStyle: {
              color: getColor('warning')
            },
            itemStyle: {
              color: getColor('white'),
              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('gray-600')
          }
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-400'),
            formatter: value => window.dayjs(value).format('MMM DD'),
            margin: 15
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            show: true,
            color: getColor('gray-400'),
            margin: 15
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          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('gray-600')
            },
            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('gray-600')
            },
            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 = {};

    const dataMap = {};

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

    dataMap.months = dataFormatter({
      2010: ['MIN. CEZAR PELUSO','MIN. EROS GRAU','MIN. GILMAR MENDES','MIN. ELLEN GRACIE','MIN. CARMEN LUCIA','MIN. DIAS TOFFOLI','MIN. CELSO DE MELLO','MIN. AYRES BRITTO','MIN. RICARDO LEWANDOWSKI','MIN. MARCO AURELIO','MIN. JOAQUIM BARBOSA',],
    2011: ['MIN. CEZAR PELUSO','MIN. LUIZ FUX','MIN. RICARDO LEWANDOWSKI','MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. CELSO DE MELLO','MIN. AYRES BRITTO','MIN. JOAQUIM BARBOSA','MIN. DIAS TOFFOLI','MIN. MARCO AURELIO',],
    2012: ['MIN. TEORI ZAVASCKI','MIN. CEZAR PELUSO','MIN. AYRES BRITTO','MIN. ROSA WEBER','MIN. GILMAR MENDES','MIN. LUIZ FUX','MIN. RICARDO LEWANDOWSKI','MIN. CARMEN LUCIA','MIN. JOAQUIM BARBOSA','MIN. CELSO DE MELLO','MIN. DIAS TOFFOLI','MIN. MARCO AURELIO',],
    2013: ['MIN. JOAQUIM BARBOSA','MIN. LUIS BARROSO','MIN. GILMAR MENDES','MIN. RICARDO LEWANDOWSKI','MIN. LUIZ FUX','MIN. CELSO DE MELLO','MIN. MARCO AURELIO','MIN. TEORI ZAVASCKI','MIN. CARMEN LUCIA','MIN. DIAS TOFFOLI','MIN. ROSA WEBER',],
    2014: ['MIN. JOAQUIM BARBOSA','MIN. RICARDO LEWANDOWSKI','MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. LUIZ FUX','MIN. ROSA WEBER','MIN. DIAS TOFFOLI','MIN. CELSO DE MELLO','MIN. LUIS BARROSO','MIN. TEORI ZAVASCKI','MIN. MARCO AURELIO',],
    2015: ['MIN. EDSON FACHIN','MIN. CARMEN LUCIA','MIN. TEORI ZAVASCKI','MIN. GILMAR MENDES','MIN. ROSA WEBER','MIN. LUIZ FUX','MIN. DIAS TOFFOLI','MIN. MARCO AURELIO','MIN. CELSO DE MELLO','MIN. LUIS BARROSO',],
    2016: ['MIN. CARMEN LUCIA','MIN. TEORI ZAVASCKI','MIN. CELSO DE MELLO','MIN. GILMAR MENDES','MIN. MARCO AURELIO','MIN. ROSA WEBER','MIN. DIAS TOFFOLI','MIN. LUIZ FUX','MIN. LUIS BARROSO','MIN. EDSON FACHIN',],
    2017: ['MIN. GILMAR MENDES','MIN. CELSO DE MELLO','MIN. RICARDO LEWANDOWSKI','MIN. EDSON FACHIN','MIN. LUIS BARROSO','MIN. DIAS TOFFOLI','MIN. ROSA WEBER','MIN. LUIZ FUX','MIN. MARCO AURELIO','MIN. ALEXANDRE DE MORAES',],
    2018: ['MIN. DIAS TOFFOLI','MIN. CELSO DE MELLO','MIN. LUIZ FUX','MIN. GILMAR MENDES','MIN. ROSA WEBER','MIN. RICARDO LEWANDOWSKI','MIN. LUIS BARROSO','MIN. EDSON FACHIN','MIN. MARCO AURELIO','MIN. ALEXANDRE DE MORAES',],
    2019: ['MIN. CELSO DE MELLO','MIN. LUIZ FUX','MIN. RICARDO LEWANDOWSKI','MIN. CARMEN LUCIA','MIN. ROSA WEBER','MIN. LUIS BARROSO','MIN. ALEXANDRE DE MORAES','MIN. GILMAR MENDES','MIN. EDSON FACHIN','MIN. MARCO AURELIO',],
    2020: ['MIN. LUIZ FUX','MIN. CELSO DE MELLO','MIN. GILMAR MENDES','MIN. LUIS BARROSO','MIN. ALEXANDRE DE MORAES','MIN. CARMEN LUCIA','MIN. RICARDO LEWANDOWSKI','MIN. ROSA WEBER','MIN. EDSON FACHIN','MIN. MARCO AURELIO',],
    2021: ['MIN. MARCO AURELIO','MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. ALEXANDRE DE MORAES','MIN. NUNES MARQUES','MIN. DIAS TOFFOLI','MIN. RICARDO LEWANDOWSKI','MIN. ROSA WEBER','MIN. LUIS BARROSO','MIN. EDSON FACHIN',],
    2022: ['MIN. ANDRE MENDONCA','MIN. ROSA WEBER','MIN. GILMAR MENDES','MIN. CARMEN LUCIA','MIN. ALEXANDRE DE MORAES','MIN. NUNES MARQUES','MIN. RICARDO LEWANDOWSKI','MIN. LUIS BARROSO','MIN. DIAS TOFFOLI','MIN. EDSON FACHIN',],
    2023: ['MIN. RICARDO LEWANDOWSKI','MIN. CRISTIANO ZANIN','MIN. LUIS BARROSO','MIN. CARMEN LUCIA','MIN. GILMAR MENDES','MIN. DIAS TOFFOLI','MIN. NUNES MARQUES','MIN. ANDRE MENDONCA','MIN. EDSON FACHIN','MIN. ALEXANDRE DE MORAES',]});

dataMap.dataTI = dataFormatter({
    2010: [1565,2526,4354,5378,5533,6023,5655,5836,6402,7048,7949,],
    2011: [5,4062,4131,4974,4434,5662,6154,6953,6736,7338,],
    2012: [138,1099,1181,4426,4513,4377,4727,4470,5328,5193,6621,6868,],
    2013: [29,2441,5489,4914,5483,5485,5710,5848,5896,7034,8418,],
    2014: [17,3889,6700,6316,7082,6633,7330,7334,7551,7369,8153,],
    2015: [3128,6098,6527,7118,7448,8118,8202,8919,8534,11141,],
    2016: [4401,5263,6298,6746,6796,7076,7237,7731,7526,9147,],
    2017: [6328,6533,6752,7265,6558,6727,6867,7303,6671,8228,],
    2018: [4451,6052,6194,6668,6350,6614,6355,8108,7855,8538,],
    2019: [4969,4853,5253,5302,5280,5560,4938,5943,6011,6413,],
    2020: [3417,3396,4118,4179,4017,4336,4653,5458,6025,4874,],
    2021: [2436,3725,4036,3881,4556,4527,4470,4267,4700,5159,],
    2022: [2846,2630,3419,3475,3396,4037,3941,4372,4323,4992,],
    2023: [679,2606,3030,3789,3994,4085,4432,5332,4869,8694,]
});

dataMap.dataSI = dataFormatter({
    2010: [294,538,760,1058,1180,761,1168,1106,958,632,1187,],
    2011: [18,592,1397,1030,1805,1561,1473,987,1409,1200,],
    2012: [44,274,391,631,768,1011,992,1286,902,1330,1919,1782,],
    2013: [58,516,912,1590,1047,1359,1509,1399,1636,1928,1241,],
    2014: [13,1121,1189,1897,1263,1781,1423,1896,1685,1951,1689,],
    2015: [377,1477,1865,1395,1574,1676,1781,1602,2169,1960,],
    2016: [811,1274,957,667,1307,1336,1327,1257,1833,1010,],
    2017: [706,794,890,834,1592,1450,1363,1175,1899,592,],
    2018: [911,795,1016,739,1204,1100,1618,797,1424,2421,],
    2019: [1007,1157,1251,1312,1335,1307,2302,1394,1694,2140,],
    2020: [907,1014,1062,1123,1355,1466,1319,1307,1400,3068,],
    2021: [1618,972,1045,1299,798,934,1128,1452,1072,1427,],
    2022: [333,911,899,1020,1146,794,1219,1139,1218,1031,],
    2023: [308,456,1003,1063,1048,1140,1089,757,1577,2757,]
});

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [
              '2011-01-01',
              '2012-01-01',
              '2013-01-01',
              '2014-01-01',
              '2015-01-01',
              '2016-01-01',
              '2017-01-01',
              '2018-01-01',
              '2019-01-01',
              '2020-01-01',
              '2021-01-01',
              '2022-01-01',
              '2023-01-01',
              '2024-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('gray-700')
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            padding: [7, 10],
            backgroundColor: getColor('gray-100'),
            borderColor: getColor('gray-300'),
            textStyle: { color: getColor('dark') },
            borderWidth: 1,
            transitionDuration: 0,
            formatter: tooltipFormatter
          },
          legend: {
            left: 'right',
            data: ['Colegiadas', 'Monocráticas'],
            textStyle: {
              color: getColor('gray-700')
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: months,
              splitLine: { show: false },
              axisLabel: {
                color: getColor('gray-600'),
                formatter: value => value.slice(5, 24).replace(' ', '\n'),
                fontSize: 10,
                rotate: 45
              },
              axisLine: {
                lineStyle: {
                  color: getColor('gray-400')
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 12000,
              axisLabel: {
                formatter: value => `${value / 1000} mil`,
                color: getColor('gray-600')
              },
              splitLine: {
                lineStyle: {
                  color: getColor('gray-200')
                }
              }
            }
          ],
          series: [
            {
              name: 'Colegiadas',
              type: 'bar',
              itemStyle: {
                color: getColor('info'),
                barBorderRadius: [3, 3, 0, 0]
              }
            },
            {
              name: 'Monocráticas',
              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: '2010' },
            series: [
              { data: dataMap.dataSI['2010'] },
              { data: dataMap.dataTI['2010'] }
            ],
            xAxis: [{data: dataMap.months['2010']}]
          },
          {
            title: { text: '2011' },
            series: [
              { data: dataMap.dataSI['2011'] },
              { data: dataMap.dataTI['2011'] }
            ],
            xAxis: [{data: dataMap.months['2011']}]
          },
          {
            title: { text: '2012' },
            series: [
              { data: dataMap.dataSI['2012'] },
              { data: dataMap.dataTI['2012'] }
            ],
            xAxis: [{data: dataMap.months['2012']}]
          },
          {
            title: { text: '2013' },
            series: [
              { data: dataMap.dataSI['2013'] },
              { data: dataMap.dataTI['2013'] }
            ],
            xAxis: [{data: dataMap.months['2013']}]
          },
          {
            title: { text: '2014' },
            series: [
              { data: dataMap.dataSI['2014'] },
              { data: dataMap.dataTI['2014'] }
            ],
            xAxis: [{data: dataMap.months['2014']}]
          },
          {
            title: { text: '2015' },
            series: [
              { data: dataMap.dataSI['2015'] },
              { data: dataMap.dataTI['2015'] }
            ],
            xAxis: [{data: dataMap.months['2015']}]
          },
          {
            title: { text: '2016' },
            series: [
              { data: dataMap.dataSI['2016'] },
              { data: dataMap.dataTI['2016'] }
            ],
            xAxis: [{data: dataMap.months['2016']}]
          },
          {
            title: { text: '2017' },
            series: [
              { data: dataMap.dataSI['2017'] },
              { data: dataMap.dataTI['2017'] }
            ],
            xAxis: [{data: dataMap.months['2017']}]
          },
          {
            title: { text: '2018' },
            series: [
              { data: dataMap.dataSI['2018'] },
              { data: dataMap.dataTI['2018'] }
            ],
            xAxis: [{data: dataMap.months['2018']}]
          },
          {
            title: { text: '2019' },
            series: [
              { data: dataMap.dataSI['2019'] },
              { data: dataMap.dataTI['2019'] }
            ],
            xAxis: [{data: dataMap.months['2019']}]
          },
          {
            title: { text: '2020' },
            series: [
              { data: dataMap.dataSI['2020'] },
              { data: dataMap.dataTI['2020'] }
            ],
            xAxis: [{data: dataMap.months['2020']}]
          },
          {
            title: { text: '2021' },
            series: [
              { data: dataMap.dataSI['2021'] },
              { data: dataMap.dataTI['2021'] }
            ],
            xAxis: [{data: dataMap.months['2021']}]
          },
          {
            title: { text: '2022' },
            series: [
              { data: dataMap.dataSI['2022'] },
              { data: dataMap.dataTI['2022'] }
            ],
            xAxis: [{data: dataMap.months['2022']}]
          },
          {
            title: { text: '2023' },
            series: [
              { data: dataMap.dataSI['2023'] },
              { data: dataMap.dataTI['2023'] }
            ],
            xAxis: [{data: dataMap.months['2023']}]
          }
        ]
      });

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

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

    const months = {};

    const dataMap = {};

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

  2011: ['299',],
2012: ['256',],
2013: ['311',],
2014: ['383',],
2015: ['422',],
2016: ['440',],
2017: ['655',],
2018: ['910',],
2019: ['1145',],
2020: ['1968',],
2021: ['1671',],
2022: ['1472',],
    2023: ['1112',]});

dataMap.dataTI = dataFormatter({
  2010: ['62755',],

2011: ['60607',],
2012: ['55966',],
2013: ['66732',],
2014: ['78951',],
2015: ['90745',],
2016: ['79628',],
2017: ['79931',],
2018: ['78391',],
2019: ['68376',],
2020: ['56655',],
2021: ['51909',],
2022: ['45727',],
2023: ['55274',]});

dataMap.dataSI = dataFormatter({
  2010: ['241',],

2011: ['299',],
2012: ['256',],
2013: ['311',],
2014: ['383',],
2015: ['422',],
2016: ['440',],
2017: ['655',],
2018: ['910',],
2019: ['1145',],
2020: ['1968',],
2021: ['1671',],
2022: ['1472',],
2023: ['1112',]});

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const getDefaultOptions = () => ({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [
              '2011-01-01',
              '2012-01-01',
              '2013-01-01',
              '2014-01-01',
              '2015-01-01',
              '2016-01-01',
              '2017-01-01',
              '2018-01-01',
              '2019-01-01',
              '2020-01-01',
              '2021-01-01',
              '2022-01-01',
              '2023-01-01',
              '2024-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('gray-700')
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            padding: [7, 10],
            backgroundColor: getColor('gray-100'),
            borderColor: getColor('gray-300'),
            textStyle: { color: getColor('dark') },
            borderWidth: 1,
            transitionDuration: 0,
            formatter: tooltipFormatter
          },
          legend: {
            left: 'right',
            data: ['Corte Constitucional', 'Demais'],
            textStyle: {
              color: getColor('gray-700')
            }
          },
          calculable: true,
          yAxis: [
            {
              type: 'category',
              data: months,
              splitLine: { show: false },
              axisLabel: {
                color: getColor('gray-600'),
                show: true,
                formatter: value => value.slice(5, 24).replace(' ', '\n'),
                fontSize: 10,
                rotate: 45
              },
              axisLine: {
                lineStyle: {
                  color: getColor('gray-400')
                }
              }
            }
          ],
          xAxis: [
            {
              type: 'value',
              min: 0,
              max: 95000,
              interval: 5000,
              axisLabel: {
                formatter: value => `${value / 1000} mil`,
                show: true,
                color: getColor('gray-600')
              },
              splitLine: {
                lineStyle: {
                  color: getColor('gray-200')
                }
              }
            }
          ],
          series: [
            {
              name: 'Corte Constitucional',
              type: 'bar',
              label: {
                show: true,
                position: 'right'
              },
              itemStyle: {
                color: getColor('info'),
                barBorderRadius: [0, 3, 3, 0]
              }
            },
            {
              name: 'Demais',
              type: 'bar',
              label: {
                show: true,
                position: 'right'
              },
              itemStyle: {
                color: getColor('warning'),
                barBorderRadius: [0, 3, 3, 0]
              }
            },
          ],
          grid: {
            top: '5%',
            bottom: '15%',
            left: 5,
            right: 10,
            containLabel: true
          }
        },
        options: [
          {
            title: { text: '2010' },
            series: [
              { data: dataMap.dataSI['2010'] },
              { data: dataMap.dataTI['2010'] }
            ],
            xAxis: [{data: dataMap.months['2010']}]
          },
          {
            title: { text: '2011' },
            series: [
              { data: dataMap.dataSI['2011'] },
              { data: dataMap.dataTI['2011'] }
            ],
            xAxis: [{data: dataMap.months['2011']}]
          },
          {
            title: { text: '2012' },
            series: [
              { data: dataMap.dataSI['2012'] },
              { data: dataMap.dataTI['2012'] }
            ],
            xAxis: [{data: dataMap.months['2012']}]
          },
          {
            title: { text: '2013' },
            series: [
              { data: dataMap.dataSI['2013'] },
              { data: dataMap.dataTI['2013'] }
            ],
            xAxis: [{data: dataMap.months['2013']}]
          },
          {
            title: { text: '2014' },
            series: [
              { data: dataMap.dataSI['2014'] },
              { data: dataMap.dataTI['2014'] }
            ],
            xAxis: [{data: dataMap.months['2014']}]
          },
          {
            title: { text: '2015' },
            series: [
              { data: dataMap.dataSI['2015'] },
              { data: dataMap.dataTI['2015'] }
            ],
            xAxis: [{data: dataMap.months['2015']}]
          },
          {
            title: { text: '2016' },
            series: [
              { data: dataMap.dataSI['2016'] },
              { data: dataMap.dataTI['2016'] }
            ],
            xAxis: [{data: dataMap.months['2016']}]
          },
          {
            title: { text: '2017' },
            series: [
              { data: dataMap.dataSI['2017'] },
              { data: dataMap.dataTI['2017'] }
            ],
            xAxis: [{data: dataMap.months['2017']}]
          },
          {
            title: { text: '2018' },
            series: [
              { data: dataMap.dataSI['2018'] },
              { data: dataMap.dataTI['2018'] }
            ],
            xAxis: [{data: dataMap.months['2018']}]
          },
          {
            title: { text: '2019' },
            series: [
              { data: dataMap.dataSI['2019'] },
              { data: dataMap.dataTI['2019'] }
            ],
            xAxis: [{data: dataMap.months['2019']}]
          },
          {
            title: { text: '2020' },
            series: [
              { data: dataMap.dataSI['2020'] },
              { data: dataMap.dataTI['2020'] }
            ],
            xAxis: [{data: dataMap.months['2020']}]
          },
          {
            title: { text: '2021' },
            series: [
              { data: dataMap.dataSI['2021'] },
              { data: dataMap.dataTI['2021'] }
            ],
            xAxis: [{data: dataMap.months['2021']}]
          },
          {
            title: { text: '2022' },
            series: [
              { data: dataMap.dataSI['2022'] },
              { data: dataMap.dataTI['2022'] }
            ],
            xAxis: [{data: dataMap.months['2022']}]
          },
          {
            title: { text: '2023' },
            series: [
              { data: dataMap.dataSI['2023'] },
              { data: dataMap.dataTI['2023'] }
            ],
            xAxis: [{data: dataMap.months['2023']}]
          }
        ]
      });

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

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

    const months = {};

    const dataMap = {};

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

    dataMap.months = dataFormatter({
      2010: ['PRESIDENTE','CEZAR PELUSO','EROS GRAU','MARCO AURELIO','CELSO DE MELLO','GILMAR MENDES','JOAQUIM BARBOSA','ELLEN GRACIE','CARMEN LUCIA','RICARDO LEWANDOWSKI','DIAS TOFFOLI',],
    2011: ['CEZAR PELUSO','ELLEN GRACIE','MARCO AURELIO','CELSO DE MELLO','JOAQUIM BARBOSA','RICARDO LEWANDOWSKI','LUIZ FUX','CARMEN LUCIA','AYRES BRITTO','DIAS TOFFOLI','GILMAR MENDES','PRESIDENTE',],
    2012: ['TEORI ZAVASCKI','CEZAR PELUSO','AYRES BRITTO','JOAQUIM BARBOSA','CARMEN LUCIA','PRESIDENTE','CELSO DE MELLO','RICARDO LEWANDOWSKI','LUIZ FUX','GILMAR MENDES','ROSA WEBER','DIAS TOFFOLI','MARCO AURELIO',],
    2013: ['JOAQUIM BARBOSA','LUIS BARROSO','PRESIDENTE','MARCO AURELIO','ROSA WEBER','GILMAR MENDES','TEORI ZAVASCKI','RICARDO LEWANDOWSKI','DIAS TOFFOLI','CARMEN LUCIA','CELSO DE MELLO','LUIZ FUX',],
    2014: ['ELLEN GRACIE','JOAQUIM BARBOSA','MARCO AURELIO','RICARDO LEWANDOWSKI','DIAS TOFFOLI','PRESIDENTE','ROSA WEBER','GILMAR MENDES','LUIZ FUX','CARMEN LUCIA','TEORI ZAVASCKI','CELSO DE MELLO','LUIS BARROSO',],
    2015: ['RICARDO LEWANDOWSKI','EDSON FACHIN','CARMEN LUCIA','LUIZ FUX','LUIS BARROSO','CELSO DE MELLO','ROSA WEBER','MARCO AURELIO','GILMAR MENDES','DIAS TOFFOLI','TEORI ZAVASCKI','PRESIDENTE',],
    2016: ['RICARDO LEWANDOWSKI','CARMEN LUCIA','LUIS BARROSO','GILMAR MENDES','CELSO DE MELLO','TEORI ZAVASCKI','LUIZ FUX','ROSA WEBER','DIAS TOFFOLI','PRESIDENTE','EDSON FACHIN','MARCO AURELIO',],
    2017: ['TEORI ZAVASCKI','ALEXANDRE DE MORAES','EDSON FACHIN','LUIS BARROSO','RICARDO LEWANDOWSKI','GILMAR MENDES','DIAS TOFFOLI','CELSO DE MELLO','ROSA WEBER','LUIZ FUX','MARCO AURELIO','PRESIDENTE',],
    2018: ['JOAQUIM BARBOSA','CARMEN LUCIA','DIAS TOFFOLI','LUIZ FUX','ROSA WEBER','CELSO DE MELLO','EDSON FACHIN','ALEXANDRE DE MORAES','LUIS BARROSO','GILMAR MENDES','RICARDO LEWANDOWSKI','MARCO AURELIO','PRESIDENTE',],
    2019: ['PRESIDENTE','LUIZ FUX','ROSA WEBER','LUIS BARROSO','CARMEN LUCIA','CELSO DE MELLO','EDSON FACHIN','RICARDO LEWANDOWSKI','GILMAR MENDES','ALEXANDRE DE MORAES','MARCO AURELIO',],
    2020: ['NUNES MARQUES','PRESIDENTE','DIAS TOFFOLI','CELSO DE MELLO','LUIZ FUX','LUIS BARROSO','RICARDO LEWANDOWSKI','GILMAR MENDES','ALEXANDRE DE MORAES','CARMEN LUCIA','EDSON FACHIN','ROSA WEBER','MARCO AURELIO',],
    2021: ['LUIZ FUX','CELSO DE MELLO','PRESIDENTE','MARCO AURELIO','ALEXANDRE DE MORAES','GILMAR MENDES','CARMEN LUCIA','RICARDO LEWANDOWSKI','DIAS TOFFOLI','EDSON FACHIN','ROSA WEBER','NUNES MARQUES','LUIS BARROSO',],
    2022: ['MARCO AURELIO','PRESIDENTE','LUIZ FUX','ROSA WEBER','ANDRE MENDONCA','ALEXANDRE DE MORAES','GILMAR MENDES','CARMEN LUCIA','LUIS BARROSO','NUNES MARQUES','EDSON FACHIN','RICARDO LEWANDOWSKI','DIAS TOFFOLI',],
    2023: ['ROSA WEBER','CELSO DE MELLO','MARCO AURELIO','RICARDO LEWANDOWSKI','PRESIDENTE','CRISTIANO ZANIN','LUIS BARROSO','CARMEN LUCIA','LUIZ FUX','DIAS TOFFOLI','NUNES MARQUES','ANDRE MENDONCA','GILMAR MENDES','ALEXANDRE DE MORAES','EDSON FACHIN',]});

dataMap.dataTI = dataFormatter({
    2010: [142,203,367,501,536,558,563,626,645,664,707,],
    2011: [1,269,434,476,482,531,555,568,608,681,687,747,],
    2012: [37,139,159,435,438,463,530,571,577,584,698,711,743,],
    2013: [2,284,441,543,584,630,649,665,699,720,759,890,],
    2014: [1,1,320,401,508,609,666,679,682,717,797,1080,1112,],
    2015: [4,291,523,609,626,673,673,676,737,745,923,1147,],
    2016: [337,365,695,723,803,836,839,844,894,972,1001,1079,],
    2017: [3,881,1062,1122,1162,1169,1217,1323,1330,1412,1623,2606,],
    2018: [1,309,990,1129,1176,1409,1481,1584,1608,1699,1702,1875,3793,],
    2019: [649,1334,1429,1528,1635,1690,1772,1801,1819,2124,2618,],
    2020: [220,556,649,1605,1637,1649,1868,1945,1975,2131,2195,2625,3605,],
    2021: [1,6,488,1554,1894,1930,1978,1995,2072,2172,2193,2435,2544,],
    2022: [4,405,501,1190,1444,1523,1540,1633,1646,1650,1661,1820,1842,],
    2023: [1,2,2,282,450,893,1043,1455,1462,1469,1599,1606,1683,1711,1758,]
});

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const tooltipFormatter = params => {
        return `<div> 
          MIN. ${params[0].name}<br />
          &nbsp;&nbsp;<span class="fas fa-circle me-1 text-warning"></span> Habeas Corpus : <b>${params[0].value} 
        </div> `;
      };
      const getDefaultOptions = () => ({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [
              '2011-01-01',
              '2012-01-01',
              '2013-01-01',
              '2014-01-01',
              '2015-01-01',
              '2016-01-01',
              '2017-01-01',
              '2018-01-01',
              '2019-01-01',
              '2020-01-01',
              '2021-01-01',
              '2022-01-01',
              '2023-01-01',
              '2024-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('gray-700')
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            padding: [7, 10],
            backgroundColor: getColor('gray-100'),
            borderColor: getColor('gray-300'),
            textStyle: { color: getColor('dark') },
            borderWidth: 1,
            transitionDuration: 0,
            formatter: tooltipFormatter
          },
          legend: {
            left: 'right',
            data: ['Habeas Corpus'],
            textStyle: {
              color: getColor('gray-700')
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: months,
              splitLine: { show: false },
              axisLabel: {
                color: getColor('gray-600'),
                formatter: value => value.slice(0, 19).replace(' ', '\n'),
                fontSize: 10,
                rotate: 45
              },
              axisLine: {
                lineStyle: {
                  color: getColor('gray-400')
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 2500,
              axisLabel: {
                formatter: value => `${value / 1000} mil`,
                color: getColor('gray-600')
              },
              splitLine: {
                lineStyle: {
                  color: getColor('gray-200')
                }
              }
            }
          ],
          series: [
            {
              name: 'Habeas Corpus',
              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: '2010' },
            series: [
              { data: dataMap.dataTI['2010'] }
            ],
            xAxis: [{data: dataMap.months['2010']}]
          },
          {
            title: { text: '2011' },
            series: [
              { data: dataMap.dataTI['2011'] }
            ],
            xAxis: [{data: dataMap.months['2011']}]
          },
          {
            title: { text: '2012' },
            series: [
              { data: dataMap.dataTI['2012'] }
            ],
            xAxis: [{data: dataMap.months['2012']}]
          },
          {
            title: { text: '2013' },
            series: [
              { data: dataMap.dataTI['2013'] }
            ],
            xAxis: [{data: dataMap.months['2013']}]
          },
          {
            title: { text: '2014' },
            series: [
              { data: dataMap.dataTI['2014'] }
            ],
            xAxis: [{data: dataMap.months['2014']}]
          },
          {
            title: { text: '2015' },
            series: [
              { data: dataMap.dataTI['2015'] }
            ],
            xAxis: [{data: dataMap.months['2015']}]
          },
          {
            title: { text: '2016' },
            series: [
              { data: dataMap.dataTI['2016'] }
            ],
            xAxis: [{data: dataMap.months['2016']}]
          },
          {
            title: { text: '2017' },
            series: [
              { data: dataMap.dataTI['2017'] }
            ],
            xAxis: [{data: dataMap.months['2017']}]
          },
          {
            title: { text: '2018' },
            series: [
              { data: dataMap.dataTI['2018'] }
            ],
            xAxis: [{data: dataMap.months['2018']}]
          },
          {
            title: { text: '2019' },
            series: [
              { data: dataMap.dataTI['2019'] }
            ],
            xAxis: [{data: dataMap.months['2019']}]
          },
          {
            title: { text: '2020' },
            series: [
              { data: dataMap.dataTI['2020'] }
            ],
            xAxis: [{data: dataMap.months['2020']}]
          },
          {
            title: { text: '2021' },
            series: [
              { data: dataMap.dataTI['2021'] }
            ],
            xAxis: [{data: dataMap.months['2021']}]
          },
          {
            title: { text: '2022' },
            series: [
              { data: dataMap.dataTI['2022'] }
            ],
            xAxis: [{data: dataMap.months['2022']}]
          },
          {
            title: { text: '2023' },
            series: [
              { data: dataMap.dataTI['2023'] }
            ],
            xAxis: [{data: dataMap.months['2023']}]
          }
        ]
      });

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

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

    const months = {};

    const dataMap = {};

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

    dataMap.months = dataFormatter({
      2010: ['PRESIDENTE','CEZAR PELUSO','EROS GRAU','MARCO AURELIO','CELSO DE MELLO','GILMAR MENDES','JOAQUIM BARBOSA','ELLEN GRACIE','CARMEN LUCIA','RICARDO LEWANDOWSKI','DIAS TOFFOLI',],
    2011: ['CEZAR PELUSO','ELLEN GRACIE','MARCO AURELIO','CELSO DE MELLO','JOAQUIM BARBOSA','RICARDO LEWANDOWSKI','LUIZ FUX','CARMEN LUCIA','AYRES BRITTO','DIAS TOFFOLI','GILMAR MENDES','PRESIDENTE',],
    2012: ['TEORI ZAVASCKI','CEZAR PELUSO','AYRES BRITTO','JOAQUIM BARBOSA','CARMEN LUCIA','PRESIDENTE','CELSO DE MELLO','RICARDO LEWANDOWSKI','LUIZ FUX','GILMAR MENDES','ROSA WEBER','DIAS TOFFOLI','MARCO AURELIO',],
    2013: ['JOAQUIM BARBOSA','LUIS BARROSO','PRESIDENTE','MARCO AURELIO','ROSA WEBER','GILMAR MENDES','TEORI ZAVASCKI','RICARDO LEWANDOWSKI','DIAS TOFFOLI','CARMEN LUCIA','CELSO DE MELLO','LUIZ FUX',],
    2014: ['ELLEN GRACIE','JOAQUIM BARBOSA','MARCO AURELIO','RICARDO LEWANDOWSKI','DIAS TOFFOLI','PRESIDENTE','ROSA WEBER','GILMAR MENDES','LUIZ FUX','CARMEN LUCIA','TEORI ZAVASCKI','CELSO DE MELLO','LUIS BARROSO',],
    2015: ['RICARDO LEWANDOWSKI','EDSON FACHIN','CARMEN LUCIA','LUIZ FUX','LUIS BARROSO','CELSO DE MELLO','ROSA WEBER','MARCO AURELIO','GILMAR MENDES','DIAS TOFFOLI','TEORI ZAVASCKI','PRESIDENTE',],
    2016: ['RICARDO LEWANDOWSKI','CARMEN LUCIA','LUIS BARROSO','GILMAR MENDES','CELSO DE MELLO','TEORI ZAVASCKI','LUIZ FUX','ROSA WEBER','DIAS TOFFOLI','PRESIDENTE','EDSON FACHIN','MARCO AURELIO',],
    2017: ['TEORI ZAVASCKI','ALEXANDRE DE MORAES','EDSON FACHIN','LUIS BARROSO','RICARDO LEWANDOWSKI','GILMAR MENDES','DIAS TOFFOLI','CELSO DE MELLO','ROSA WEBER','LUIZ FUX','MARCO AURELIO','PRESIDENTE',],
    2018: ['JOAQUIM BARBOSA','CARMEN LUCIA','DIAS TOFFOLI','LUIZ FUX','ROSA WEBER','CELSO DE MELLO','EDSON FACHIN','ALEXANDRE DE MORAES','LUIS BARROSO','GILMAR MENDES','RICARDO LEWANDOWSKI','MARCO AURELIO','PRESIDENTE',],
    2019: ['PRESIDENTE','LUIZ FUX','ROSA WEBER','LUIS BARROSO','CARMEN LUCIA','CELSO DE MELLO','EDSON FACHIN','RICARDO LEWANDOWSKI','GILMAR MENDES','ALEXANDRE DE MORAES','MARCO AURELIO',],
    2020: ['NUNES MARQUES','PRESIDENTE','DIAS TOFFOLI','CELSO DE MELLO','LUIZ FUX','LUIS BARROSO','RICARDO LEWANDOWSKI','GILMAR MENDES','ALEXANDRE DE MORAES','CARMEN LUCIA','EDSON FACHIN','ROSA WEBER','MARCO AURELIO',],
    2021: ['LUIZ FUX','CELSO DE MELLO','PRESIDENTE','MARCO AURELIO','ALEXANDRE DE MORAES','GILMAR MENDES','CARMEN LUCIA','RICARDO LEWANDOWSKI','DIAS TOFFOLI','EDSON FACHIN','ROSA WEBER','NUNES MARQUES','LUIS BARROSO',],
    2022: ['MARCO AURELIO','PRESIDENTE','LUIZ FUX','ROSA WEBER','ANDRE MENDONCA','ALEXANDRE DE MORAES','GILMAR MENDES','CARMEN LUCIA','LUIS BARROSO','NUNES MARQUES','EDSON FACHIN','RICARDO LEWANDOWSKI','DIAS TOFFOLI',],
    2023: ['ROSA WEBER','CELSO DE MELLO','MARCO AURELIO','RICARDO LEWANDOWSKI','PRESIDENTE','CRISTIANO ZANIN','LUIS BARROSO','CARMEN LUCIA','LUIZ FUX','DIAS TOFFOLI','NUNES MARQUES','ANDRE MENDONCA','GILMAR MENDES','ALEXANDRE DE MORAES','EDSON FACHIN',]});

dataMap.dataTI = dataFormatter({
    2010: [142,203,367,501,536,558,563,626,645,664,707,],
    2011: [1,269,434,476,482,531,555,568,608,681,687,747,],
    2012: [37,139,159,435,438,463,530,571,577,584,698,711,743,],
    2013: [2,284,441,543,584,630,649,665,699,720,759,890,],
    2014: [1,1,320,401,508,609,666,679,682,717,797,1080,1112,],
    2015: [4,291,523,609,626,673,673,676,737,745,923,1147,],
    2016: [337,365,695,723,803,836,839,844,894,972,1001,1079,],
    2017: [3,881,1062,1122,1162,1169,1217,1323,1330,1412,1623,2606,],
    2018: [1,309,990,1129,1176,1409,1481,1584,1608,1699,1702,1875,3793,],
    2019: [649,1334,1429,1528,1635,1690,1772,1801,1819,2124,2618,],
    2020: [220,556,649,1605,1637,1649,1868,1945,1975,2131,2195,2625,3605,],
    2021: [1,6,488,1554,1894,1930,1978,1995,2072,2172,2193,2435,2544,],
    2022: [4,405,501,1190,1444,1523,1540,1633,1646,1650,1661,1820,1842,],
    2023: [1,2,2,282,450,893,1043,1455,1462,1469,1599,1606,1683,1711,1758,]
});

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);
      const tooltipFormatter = params => {
        return `<div> 
          MIN. ${params[0].name}<br />
          &nbsp;&nbsp;<span class="fas fa-circle me-1 text-warning"></span> Habeas Corpus : <b>${params[0].value} 
        </div> `;
      };
      const getDefaultOptions = () => ({
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: false,
            playInterval: 1000,
            data: [
              '2011-01-01',
              '2012-01-01',
              '2013-01-01',
              '2014-01-01',
              '2015-01-01',
              '2016-01-01',
              '2017-01-01',
              '2018-01-01',
              '2019-01-01',
              '2020-01-01',
              '2021-01-01',
              '2022-01-01',
              '2023-01-01',
              '2024-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('gray-700')
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            padding: [7, 10],
            backgroundColor: getColor('gray-100'),
            borderColor: getColor('gray-300'),
            textStyle: { color: getColor('dark') },
            borderWidth: 1,
            transitionDuration: 0,
            formatter: tooltipFormatter
          },
          legend: {
            left: 'right',
            data: ['Habeas Corpus'],
            textStyle: {
              color: getColor('gray-700')
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: months,
              splitLine: { show: false },
              axisLabel: {
                color: getColor('gray-600'),
                formatter: value => value.slice(0, 19).replace(' ', '\n'),
                fontSize: 10,
                rotate: 45
              },
              axisLine: {
                lineStyle: {
                  color: getColor('gray-400')
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 2500,
              axisLabel: {
                formatter: value => `${value / 1000} mil`,
                color: getColor('gray-600')
              },
              splitLine: {
                lineStyle: {
                  color: getColor('gray-200')
                }
              }
            }
          ],
          series: [
            {
              name: 'Habeas Corpus',
              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: '2010' },
            series: [
              { data: dataMap.dataTI['2010'] }
            ],
            xAxis: [{data: dataMap.months['2010']}]
          },
          {
            title: { text: '2011' },
            series: [
              { data: dataMap.dataTI['2011'] }
            ],
            xAxis: [{data: dataMap.months['2011']}]
          },
          {
            title: { text: '2012' },
            series: [
              { data: dataMap.dataTI['2012'] }
            ],
            xAxis: [{data: dataMap.months['2012']}]
          },
          {
            title: { text: '2013' },
            series: [
              { data: dataMap.dataTI['2013'] }
            ],
            xAxis: [{data: dataMap.months['2013']}]
          },
          {
            title: { text: '2014' },
            series: [
              { data: dataMap.dataTI['2014'] }
            ],
            xAxis: [{data: dataMap.months['2014']}]
          },
          {
            title: { text: '2015' },
            series: [
              { data: dataMap.dataTI['2015'] }
            ],
            xAxis: [{data: dataMap.months['2015']}]
          },
          {
            title: { text: '2016' },
            series: [
              { data: dataMap.dataTI['2016'] }
            ],
            xAxis: [{data: dataMap.months['2016']}]
          },
          {
            title: { text: '2017' },
            series: [
              { data: dataMap.dataTI['2017'] }
            ],
            xAxis: [{data: dataMap.months['2017']}]
          },
          {
            title: { text: '2018' },
            series: [
              { data: dataMap.dataTI['2018'] }
            ],
            xAxis: [{data: dataMap.months['2018']}]
          },
          {
            title: { text: '2019' },
            series: [
              { data: dataMap.dataTI['2019'] }
            ],
            xAxis: [{data: dataMap.months['2019']}]
          },
          {
            title: { text: '2020' },
            series: [
              { data: dataMap.dataTI['2020'] }
            ],
            xAxis: [{data: dataMap.months['2020']}]
          },
          {
            title: { text: '2021' },
            series: [
              { data: dataMap.dataTI['2021'] }
            ],
            xAxis: [{data: dataMap.months['2021']}]
          },
          {
            title: { text: '2022' },
            series: [
              { data: dataMap.dataTI['2022'] }
            ],
            xAxis: [{data: dataMap.months['2022']}]
          },
          {
            title: { text: '2023' },
            series: [
              { data: dataMap.dataTI['2023'] }
            ],
            xAxis: [{data: dataMap.months['2023']}]
          }
        ]
      });

      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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          position: (...params) => handleTooltipPosition(params)
        },
        toolbox: {
          top: 0,
          feature: {
            dataZoom: {
              yAxisIndex: false
            },
            restore: { show: true }
          },
          iconStyle: {
            borderColor: getColor('gray-700'),
            borderWidth: 1
          },

          emphasis: {
            iconStyle: {
              textFill: getColor('gray-600')
            }
          }
        },
        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('gray-300'),
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: getColor('gray-300'),
              type: 'solid'
            }
          },
          axisTick: { show: false },
          axisLabel: {
            color: getColor('gray-600'),
            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('gray-200'),
              type: 'dashed'
            }
          },
          boundaryGap: false,
          axisLabel: {
            show: true,
            color: getColor('gray-600'),
            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('dark'),
      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('gray-600')
          }
        },
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-300') }
            },
            axisLabel: {
              color: getColor('gray-600'),
              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('gray-200')
              }
            },
            axisTick: { show: false },
            axisLabel: {
              color: getColor('gray-600')
            }
          },
          {
            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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-300')
            },
            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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-600')
          },
          formatter: value => `${value / 1000} mil`
        },
        series: [
          {
            left: 10,
            name: 'USA PopEstimates',
            type: 'map',
            zoom: 1.2,
            roam: true,
            scaleLimit: {
              min: 1,
              max: 5
            },
            itemStyle: {
              borderColor: getColor('gray-300')
            },
            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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0
        },
        xAxis: {
          axisLabel: {
            color: getColor('gray-600')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          }
        },
        yAxis: {
          axisLabel: {
            color: getColor('gray-600')
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          }
        },
        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('gray-600'),
            fontWeight: 600
          }
        },
        legend: {
          right: 0,
          top: '10%',
          data: ['1990', '2015'],
          textStyle: {
            color: getColor('gray-600')
          }
        },
        xAxis: {
          axisLabel: {
            color: getColor('gray-600'),
            formatter: value => `${value / 1000} mil`
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300')
            }
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          }
        },
        yAxis: {
          scale: true,
          axisLabel: {
            color: getColor('gray-600')
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-200')
            }
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-300')
            }
          }
        },
        series: [
          {
            name: '1990',
            data: data[0],
            type: 'scatter',
            symbolSize: value => {
              return Math.sqrt(value[2]) / 5e2;
            },
            emphasis: {
              focus: 'series',
              label: {
                color: getColor('gray-600'),
                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('gray-600'),
                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('gray-600')
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: getColor('gray-300')
        }
      },

      splitLine: {
        show: true,
        lineStyle: {
          color: getColor('gray-200')
        }
      }
    });

    const yAxis = () => ({
      axisLabel: {
        color: getColor('gray-600')
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: getColor('gray-200')
        }
      },

      axisLine: {
        show: true,
        lineStyle: {
          color: getColor('gray-300')
        }
      }
    });

    const markLineOpt = {
      animation: false,
      label: {
        formatter: 'y = 0.5 * x + 3',
        align: 'right',
        color: getColor('gray-600'),
        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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          transitionDuration: 0,
          formatter: 'Group {a}: ({c})'
        },
        title: {
          text: "Anscombe's quartet",
          left: 'center',
          top: 0,
          textStyle: {
            color: getColor('gray-600')
          }
        },
        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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-200')
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: getColor('gray-600')
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: getColor('gray-600')
            }
          },
          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('gray-600')
          }
        },
        series: [
          {
            type: 'pie',
            radius: window.innerWidth < 530 ? '45%' : '60%',
            label: {
              color: getColor('gray-700')
            },
            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('gray-600'), 0.5)
              }
            }
          }
        ],
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-600')
          }
        },
        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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-600')
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['38%', '70%'],
            center: window.innerWidth < 530 ? ['65%', '55%'] : ['50%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: getColor('gray-100'),
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 11285,
                name: 'Corte Constitucional',
                itemStyle: {
                  color: getColor('danger')
                }
              },
              {
                value: 931647,
                name: 'Demais',
                itemStyle: {
                  color: getColor('primary')
                }
              }
            ]
          }
        ],
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-600')
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-600')
            }
          },
          {
            subtext: 'alignTo: "labelLine"',
            left: '50%',
            top: '85%',
            textAlign: 'center',
            subtextStyle: {
              color: getColor('gray-700')
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-700')
            },
            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('gray-600')
            }
          },
          {
            subtext: 'alignTo: "edge"',
            left: '50%',
            top: '85%',
            textAlign: 'center',
            subtextStyle: {
              color: getColor('gray-700')
            }
          }
        ],

        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-700')
            },
            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--1 text-700 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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1,
          formatter: params => tooltipFormatter(params),
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          }
        },
        radius: '100%',
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            splitLine: {
              lineStyle: {
                color: getColor('gray-600')
              }
            },
            axisLabel: {
              color: getColor('gray-600')
            },
            detail: {
              formatter: '{value}'
            },
            title: {
              color: getColor('gray-600')
            },
            data: [
              {
                value: 50,
                name: 'SCORE',
                detail: {
                  color: getColor('gray-600')
                }
              }
            ]
          }
        ]
      });
      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--1 text-700 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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-200')]]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 2,
                color: getColor('gray-600')
              }
            },
            axisLabel: {
              distance: 25,
              color: getColor('gray-600')
            },
            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('gray-600'),
                  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--1 text-700 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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-500')
              }
            },
            axisLine: {
              lineStyle: {
                width: 18,
                color: [[1, getColor('gray-200')]]
              }
            },
            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('gray-200')]]
              }
            },
            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('gray-200')]]
              }
            },
            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('gray-200')]]
              }
            },
            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--1 text-700 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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-200')]]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                width: 2,
                color: getColor('gray-600')
              }
            },
            axisLabel: {
              distance: 25,
              color: getColor('gray-600')
            },
            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('gray-600')
            },
            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('gray-600'),
              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('gray-600')
            },
            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('gray-600')
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-700'))
            }
          }
        },

        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--1 text-600">
      <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('gray-600')
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-700')
              }
            },
            splitLine: {
              lineStyle: {
                color: rgbaColor(getColor('gray-700'))
              }
            }
          },

          {
            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: rgbaColor(getColor('gray-700'))
              }
            },
            name: {
              textStyle: {
                color: rgbaColor(getColor('gray-1000')),
                backgroundColor: rgbaColor(getColor('gray-100')),
                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('gray-700')
                }
              },
              {
                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 = [
      '2010',
      '2011',
      '2012',
      '2013',
      '2014',
      '2015',
      '2016',
      '2017',
      '2018',
      '2019',
      '2020',
      '2021'
    ];

    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('gray-600')
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [7, 10],
          backgroundColor: getColor('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-700'))
              }
            }
          },
          {
            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('gray-700'))
              }
            }
          },
          {
            indicator: months.map(month => ({
              text: month,
              max: 100
            })),
            center: getCenter()[2],
            radius: 85,
            splitLine: {
              lineStyle: {
                color: rgbaColor(getColor('gray-700'))
              }
            }
          }
        ],

        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: 'Total de Decisões Recursais',
                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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          borderWidth: 1
        },
        grid: {
          right: 5,
          left: 5,
          top: 5,
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: hours,
          splitArea: {
            show: true
          },
          axisLabel: {
            color: getColor('gray-600')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-400')
            }
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('gray-600')
          },
          splitArea: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-400')
            }
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0%',
          textStyle: {
            color: getColor('gray-600'),
            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('gray-100'),
          borderColor: getColor('gray-300'),
          textStyle: { color: getColor('dark') },
          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('gray-600')
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-400')
            }
          }
        },
        yAxis: {
          axisTick: { show: false },
          type: 'category',
          data: days,
          axisLabel: {
            formatter: value => value.substring(0, 3),
            color: getColor('gray-600')
          },
          splitArea: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: getColor('gray-400')
            }
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0%',
          textStyle: {
            color: getColor('gray-600'),
            fontWeight: 500
          }
        },

        series: [
          {
            type: 'heatmap',
            data,
            label: {
              show: true
            },
            itemStyle: {
              borderColor: getColor('white'),
              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(barGradientChartInit2);
  docReady(barLineMixedChartInit);
  docReady(barWaterFallChartInit);
  docReady(barTimelineChartInit);
  docReady(barTimelineChartInit2);
  docReady(barTimelineChartInit3);
  docReady(barTimelineChartInit5);
  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