(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));
        }
        if (responsiveOptions) {
          handleResize(responsiveOptions);
        }
      }
    );
  };
  // -------------------end config.js--------------------

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

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

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

  // dayjs.extend(advancedFormat);

  /* -------------------------------------------------------------------------- */
  /*                             Echarts Total Sales                            */
  /* -------------------------------------------------------------------------- */



  // dayjs.extend(advancedFormat);

  /* -------------------------------------------------------------------------- */
  /*                             Echarts Total Sales                            */
  /* -------------------------------------------------------------------------- */

  const contactsCreatedChartInit = () => {
    const { getColor, getData, getPastDates } = window.phoenix.utils;
    const $chartEl = document.querySelector('.echart-contacts-created');

    const dates = getPastDates(9);

    const data1 = [24, 14, 30, 24, 32, 32, 18, 12, 32];

    const data2 = [36, 28, 36, 39, 54, 38, 22, 34, 52];

    if ($chartEl) {
      const userOptions = getData($chartEl, 'echarts');
      const chart = window.echarts.init($chartEl);

      const getDefaultOptions = () => ({
        color: [getColor('primary'), getColor('tertiary-bg')],
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params),
          extraCssText: 'z-index: 1000'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          axisLabel: {
            color: getColor('secondary-color'),
            formatter: value => window.dayjs(value).format('D MMM, YY'),
            fontFamily: 'Nunito Sans',
            fontWeight: 600,
            fontSize: 10.24,
            padding: [0, 0, 0, 20]
          },
          splitLine: {
            show: true,
            interval: '10',
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          show: true,
          interval: 10,
          data: dates,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: false
        },
        yAxis: {
          axisPointer: { type: 'none' },
          position: 'right',
          axisTick: 'none',
          splitLine: {
            interval: 5,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisLine: { show: false },
          axisLabel: {
            fontFamily: 'Nunito Sans',
            fontWeight: 700,
            fontSize: 12.8,
            color: getColor('body-color'),
            margin: 20,
            verticalAlign: 'top',
            formatter: value => `${value.toLocaleString()}`
          }
        },
        series: [
          {
            name: 'Actual revenue',
            type: 'bar',
            data: data1,
            barWidth: '4px',
            barGap: '3',
            label: {
              show: true,
              position: 'top',
              color: getColor('body-color'),
              fontWeight: 'bold',
              fontSize: '10.24px'
            },
            z: 10,
            itemStyle: {
              borderRadius: [2, 2, 0, 0],
              color: getColor('tertiary-bg')
            }
          },
          {
            name: 'Projected revenue',
            type: 'bar',
            barWidth: '4px',
            data: data2,
            label: {
              show: true,
              position: 'top',
              color: getColor('primary'),
              fontWeight: 'bold',
              fontSize: '10.24px'
            },
            itemStyle: {
              borderRadius: [2, 2, 0, 0],
              color: getColor('primary')
            }
          }
        ],
        grid: {
          right: 3,
          left: 6,
          bottom: 0,
          top: '5%',
          containLabel: true
        },
        animation: false
      });

      const responsiveOptions = {
        xs: {
          series: [
            {
              label: {
                show: false
              }
            },
            {
              label: {
                show: false
              }
            }
          ]
        }
      };

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

  /* -------------------------------------------------------------------------- */
  /*                     Echart Bar Member info                                 */
  /* -------------------------------------------------------------------------- */

  const newUsersChartsInit = () => {
    const { getColor, getData, getPastDates, rgbaColor } = window.phoenix.utils;
    const $echartnewUsersCharts = document.querySelector('.echarts-new-users');
    const tooltipFormatter = params => {
      const currentDate = window.dayjs(params[0].axisValue);
      const prevDate = window.dayjs(params[0].axisValue).subtract(1, 'month');

      const result = params.map((param, index) => ({
        value: param.value,
        date: index > 0 ? prevDate : currentDate,
        color: param.color
      }));

      let tooltipItem = ``;
      result.forEach((el, index) => {
        tooltipItem += `<h6 class="fs-9 text-body-tertiary ${
        index > 0 && 'mb-0'
      }"><span class="fas fa-circle me-2" style="color:${el.color}"></span>
      ${el.date.format('MMM DD')} : ${el.value}
    </h6>`;
      });
      return `<div class='ms-1'>
              ${tooltipItem}
            </div>`;
    };

    if ($echartnewUsersCharts) {
      const userOptions = getData($echartnewUsersCharts, 'echarts');
      const chart = window.echarts.init($echartnewUsersCharts);
      const dates = getPastDates(12);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: 10,
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: tooltipFormatter,
          extraCssText: 'z-index: 1000'
        },
        xAxis: [
          {
            type: 'category',

            data: dates,
            show: true,
            boundaryGap: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: value => window.dayjs(value).format('DD MMM, YY'),
              showMinLabel: true,
              showMaxLabel: false,
              color: getColor('secondary-color'),
              align: 'left',
              interval: 5,
              fontFamily: 'Nunito Sans',
              fontWeight: 600,
              fontSize: 12.8
            }
          },
          {
            type: 'category',
            position: 'bottom',
            show: true,
            data: dates,
            axisLabel: {
              formatter: value => window.dayjs(value).format('DD MMM, YY'),
              interval: 130,
              showMaxLabel: true,
              showMinLabel: false,
              color: getColor('secondary-color'),
              align: 'right',
              fontFamily: 'Nunito Sans',
              fontWeight: 600,
              fontSize: 12.8
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            boundaryGap: false
          }
        ],
        yAxis: {
          show: false,
          type: 'value',
          boundaryGap: false
        },
        series: [
          {
            type: 'line',
            data: [220, 220, 150, 150, 150, 250, 250, 400, 400, 400, 300, 300],
            lineStyle: {
              width: 2,
              color: getColor('info')
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: rgbaColor(getColor('info'), 0.2)
                  },
                  {
                    offset: 1,
                    color: rgbaColor(getColor('info'), 0)
                  }
                ]
              }
            },
            showSymbol: false,
            symbol: 'circle',
            zlevel: 1
          }
        ],
        grid: { left: 0, right: 0, top: 5, bottom: 20 }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  /* -------------------------------------------------------------------------- */
  /*                     Echart Bar Member info                                 */
  /* -------------------------------------------------------------------------- */

  const newLeadsChartsInit = () => {
    const { getColor, getData, getPastDates, rgbaColor } = window.phoenix.utils;
    const $echartnewLeadsCharts = document.querySelector('.echarts-new-leads');
    const tooltipFormatter = params => {
      const currentDate = window.dayjs(params[0].axisValue);
      const prevDate = window.dayjs(params[0].axisValue).subtract(1, 'month');

      const result = params.map((param, index) => ({
        value: param.value,
        date: index > 0 ? prevDate : currentDate,
        color: param.color
      }));

      let tooltipItem = ``;
      result.forEach((el, index) => {
        tooltipItem += `<h6 class="fs-9 text-body-tertiary ${
        index > 0 && 'mb-0'
      }"><span class="fas fa-circle me-2" style="color:${el.color}"></span>
      ${el.date.format('MMM DD')} : ${el.value}
    </h6>`;
      });
      return `<div class='ms-1'>
              ${tooltipItem}
            </div>`;
    };

    if ($echartnewLeadsCharts) {
      const userOptions = getData($echartnewLeadsCharts, 'echarts');
      const chart = window.echarts.init($echartnewLeadsCharts);
      const dates = getPastDates(11);
      const getDefaultOptions = () => ({
        tooltip: {
          trigger: 'axis',
          padding: 10,
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: tooltipFormatter,
          extraCssText: 'z-index: 1000'
        },
        xAxis: [
          {
            type: 'category',

            data: dates,
            show: true,
            boundaryGap: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: value => window.dayjs(value).format('DD MMM, YY'),
              showMinLabel: true,
              showMaxLabel: false,
              color: getColor('secondary-color'),
              align: 'left',
              interval: 5,
              fontFamily: 'Nunito Sans',
              fontWeight: 600,
              fontSize: 12.8
            }
          },
          {
            type: 'category',
            position: 'bottom',
            show: true,
            data: dates,
            axisLabel: {
              formatter: value => window.dayjs(value).format('DD MMM, YY'),
              interval: 130,
              showMaxLabel: true,
              showMinLabel: false,
              color: getColor('secondary-color'),
              align: 'right',
              fontFamily: 'Nunito Sans',
              fontWeight: 600,
              fontSize: 12.8
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            boundaryGap: false
          }
        ],
        yAxis: {
          show: false,
          type: 'value',
          boundaryGap: false
        },
        series: [
          {
            type: 'line',
            data: [100, 100, 260, 250, 270, 160, 190, 180, 260, 200, 220],
            lineStyle: {
              width: 2,
              color: getColor('primary')
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: rgbaColor(getColor('primary'), 0.2)
                  },
                  {
                    offset: 1,
                    color: rgbaColor(getColor('primary'), 0)
                  }
                ]
              }
            },
            showSymbol: false,
            symbol: 'circle',
            zlevel: 1
          }
        ],
        grid: { left: 0, right: 0, top: 5, bottom: 20 }
      });
      echartSetOption(chart, userOptions, getDefaultOptions);
    }
  };

  /* -------------------------------------------------------------------------- */
  /*                             Echarts Total Sales                            */
  /* -------------------------------------------------------------------------- */

  const addClicksChartInit = () => {
    const { getColor, getData, getPastDates, getItemFromStore } =
      window.phoenix.utils;
    const $addClicksChart = document.querySelector('.echart-add-clicks-chart');

    // getItemFromStore('phoenixTheme')
    const dates = getPastDates(11);
    const currentMonthData = [
      2000, 2250, 1070, 1200, 1000, 1450, 3100, 2900, 1800, 1450, 1700
    ];

    const prevMonthData = [
      1100, 1200, 2700, 1700, 2100, 2000, 2300, 1200, 2600, 2900, 1900
    ];

    const tooltipFormatter = params => {
      const currentDate = window.dayjs(params[0].axisValue);
      const prevDate = window.dayjs(params[0].axisValue).subtract(1, 'month');

      const result = params.map((param, index) => ({
        value: param.value,
        date: index > 0 ? prevDate : currentDate,
        color: param.color
      }));

      let tooltipItem = ``;
      result.forEach((el, index) => {
        tooltipItem += `<h6 class="fs-9 text-body-tertiary ${
        index > 0 && 'mb-0'
      }"><span class="fas fa-circle me-2" style="color:${el.color}"></span>
      ${el.date.format('MMM DD')} : ${el.value}
    </h6>`;
      });
      return `<div class='ms-1'>
              ${tooltipItem}
            </div>`;
    };

    if ($addClicksChart) {
      const userOptions = getData($addClicksChart, 'echarts');
      const chart = window.echarts.init($addClicksChart);

      const getDefaultOptions = () => ({
        // color: [getColor('primary'), getColor('info')],
        tooltip: {
          trigger: 'axis',
          padding: 10,
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: tooltipFormatter,
          extraCssText: 'z-index: 1000'
        },
        xAxis: [
          {
            type: 'category',
            data: dates,
            axisLabel: {
              formatter: value => window.dayjs(value).format('DD MMM, YY'),
              interval: 3,
              showMinLabel: true,
              showMaxLabel: false,
              color: getColor('secondary-color'),
              align: 'left',
              fontFamily: 'Nunito Sans',
              fontWeight: 700,
              fontSize: 12.8,
              margin: 15
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: getColor('tertiary-bg')
              }
            },
            axisTick: {
              show: true,
              interval: 5
            },
            boundaryGap: false
          },
          {
            type: 'category',
            position: 'bottom',
            data: dates,
            axisLabel: {
              formatter: value => window.dayjs(value).format('DD MMM, YY'),
              interval: 130,
              showMaxLabel: true,
              showMinLabel: false,
              color: getColor('body-color'),
              align: 'right',
              fontFamily: 'Nunito Sans',
              fontWeight: 700,
              fontSize: 12.8,
              margin: 15
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: getColor('tertiary-bg')
              }
            },
            axisTick: {
              show: true
            },
            splitLine: {
              show: false
            },
            boundaryGap: false
          }
        ],
        yAxis: {
          axisPointer: { type: 'none' },
          axisTick: 'none',
          splitLine: {
            show: true,
            lineStyle: {
              color:
                getItemFromStore('phoenixTheme') === 'dark'
                  ? getColor('body-highlight-bg')
                  : getColor('secondary-bg')
            }
          },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            fontFamily: 'Nunito Sans',
            fontWeight: 700,
            fontSize: 12.8,
            color: getColor('body-color'),
            margin: 25,
            // verticalAlign: 'bottom',
            formatter: value => `${value / 1000}k`
          }
          // axisLabel: { show: true }
        },
        series: [
          {
            name: 'e',
            type: 'line',
            data: prevMonthData,
            // symbol: 'none',
            lineStyle: {
              type: 'line',
              width: 3,
              color: getColor('info-lighter')
            },
            showSymbol: false,
            symbol: 'emptyCircle',
            symbolSize: 6,
            itemStyle: {
              color: getColor('info-lighter'),
              borderWidth: 3
            },
            zlevel: 2
          },
          {
            name: 'd',
            type: 'line',
            data: currentMonthData,
            showSymbol: false,
            symbol: 'emptyCircle',
            symbolSize: 6,
            itemStyle: {
              color: getColor('primary'),
              borderWidth: 3
            },

            lineStyle: {
              type: 'line',
              width: 3,
              color: getColor('primary')
            },
            zlevel: 1
          }
        ],
        grid: {
          right: 2,
          left: 5,
          bottom: '10px',
          top: '2%',
          containLabel: true
        },
        animation: false
      });

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

  // dayjs.extend(advancedFormat);

  /* -------------------------------------------------------------------------- */
  /*                             Echarts Total Sales                            */
  /* -------------------------------------------------------------------------- */

  const echartsLeadConversiontInit = () => {
    const { getColor, getData, getPastDates, toggleColor } = window.phoenix.utils;
    const $leadConversionChartEl = document.querySelector(
      '.echart-lead-conversion'
    );

    const dates = getPastDates(4);

    const tooltipFormatter = params => {
      let tooltipItem = ``;
      params.forEach(el => {
        tooltipItem += `<h6 class="fs-9 text-body-tertiary mb-0"><span class="fas fa-circle me-2" style="color:${el.color}"></span>
      ${el.axisValue} : ${el.value}
    </h6>`;
      });
      return `<div class='ms-1'>
              ${tooltipItem}
            </div>`;
    };

    if ($leadConversionChartEl) {
      const userOptions = getData($leadConversionChartEl, 'echarts');
      const chart = window.echarts.init($leadConversionChartEl);

      const getDefaultOptions = () => ({
        color: [getColor('primary'), getColor('tertiary-bg')],
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params),
          extraCssText: 'z-index: 1000'
        },
        xAxis: {
          type: 'value',
          inverse: true,
          axisLabel: {
            show: false
          },
          show: false,
          data: dates,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: false
        },
        yAxis: {
          data: ['Closed Won', 'Objection', 'Offer', 'Qualify Lead', 'Created'],
          type: 'category',
          axisPointer: { type: 'none' },
          axisTick: 'none',
          splitLine: {
            interval: 5,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            align: 'left',
            margin: 100,
            color: getColor('body-color')
          }
        },
        series: {
          name: 'Lead Conversion',
          type: 'bar',
          barWidth: '20px',
          showBackground: true,
          backgroundStyle: {
            borderRadius: [4, 0, 0, 4]
          },
          data: [
            {
              value: 1060,
              itemStyle: {
                color: toggleColor(
                  getColor('success-lighter'),
                  getColor('success-dark')
                ),
                borderRadius: [4, 0, 0, 4]
              },
              emphasis: {
                itemStyle: {
                  color: toggleColor(
                    getColor('success-light'),
                    getColor('success-dark')
                  )
                },
                label: {
                  formatter: () => `{b| 53% }`,
                  rich: {
                    b: {
                      color: getColor('white')
                    }
                  }
                }
              },
              label: {
                show: true,
                position: 'inside',
                formatter: () => `{b| 53%}`,
                rich: {
                  b: {
                    color: toggleColor(
                      getColor('success-dark'),
                      getColor('success-subtle')
                    ),
                    fontWeight: 500,
                    padding: [0, 5, 0, 0]
                  }
                }
              }
            },
            // --
            {
              value: 1200,
              itemStyle: {
                color: toggleColor(
                  getColor('info-lighter'),
                  getColor('info-dark')
                ),
                borderRadius: [4, 0, 0, 4]
              },
              emphasis: {
                itemStyle: {
                  color: toggleColor(
                    getColor('info-light'),
                    getColor('info-dark')
                  )
                },
                label: {
                  formatter: () => `{b| 60% }`,
                  rich: {
                    b: {
                      color: getColor('white')
                    }
                  }
                }
              },
              label: {
                show: true,
                position: 'inside',
                formatter: () => `{b| 60%}`,
                rich: {
                  b: {
                    color: toggleColor(
                      getColor('info-dark'),
                      getColor('info-bg-subtle')
                    ),
                    fontWeight: 500,
                    padding: [0, 5, 0, 0]
                  }
                }
              }
            },
            {
              value: 1600,
              itemStyle: {
                color: toggleColor(
                  getColor('primary-lighter'),
                  getColor('primary-dark')
                ),
                borderRadius: [4, 0, 0, 4]
              },
              emphasis: {
                itemStyle: {
                  color: toggleColor(
                    getColor('primary-light'),
                    getColor('primary-dark')
                  )
                },
                label: {
                  formatter: () => `{b| 80% }`,
                  rich: {
                    b: {
                      color: getColor('white')
                    }
                  }
                }
              },
              label: {
                show: true,
                position: 'inside',
                formatter: () => `{b| 80% }`,
                rich: {
                  b: {
                    color: toggleColor(
                      getColor('primary-dark'),
                      getColor('primary-bg-subtle')
                    ),
                    fontWeight: 500,
                    padding: [0, 5, 0, 0]
                  }
                }
              }
            },
            {
              value: 1800,
              itemStyle: {
                color: toggleColor(
                  getColor('warning-lighter'),
                  getColor('warning-dark')
                ),
                borderRadius: [4, 0, 0, 4]
              },
              emphasis: {
                itemStyle: {
                  color: toggleColor(
                    getColor('warning-light'),
                    getColor('warning-dark')
                  )
                },
                label: {
                  formatter: () => `{b| 90% }`,
                  rich: {
                    b: {
                      color: getColor('white')
                    }
                  }
                }
              },
              label: {
                show: true,
                position: 'inside',
                formatter: () => `{b|90%}`,
                rich: {
                  b: {
                    color: toggleColor(
                      getColor('warning-dark'),
                      getColor('warning-bg-subtle')
                    ),
                    fontWeight: 500,
                    padding: [0, 5, 0, 0]
                  }
                }
              }
            },
            {
              value: 2000,
              itemStyle: {
                color: toggleColor(
                  getColor('danger-lighter'),
                  getColor('danger-dark')
                ),
                borderRadius: [4, 0, 0, 4]
              },
              emphasis: {
                itemStyle: {
                  color: toggleColor(
                    getColor('danger-light'),
                    getColor('danger-dark')
                  )
                },
                label: {
                  formatter: () => `{a|100%}`,
                  rich: {
                    a: {
                      color: getColor('white')
                    }
                  }
                }
              },
              label: {
                show: true,
                position: 'inside',
                formatter: () => `{a|100%}`,
                rich: {
                  a: {
                    color: toggleColor(
                      getColor('danger-dark'),
                      getColor('danger-bg-subtle')
                    ),
                    fontWeight: 500
                  }
                }
              }
            }
          ],
          barGap: '50%'
        },
        grid: {
          right: 5,
          left: 100,
          bottom: 0,
          top: '5%',
          containLabel: false
        },
        animation: false
      });

      const responsiveOptions = {
        xs: {
          yAxis: {
            show: false
          },
          grid: {
            left: 0
          }
        },
        sm: {
          yAxis: {
            show: true
          },
          grid: {
            left: 100
          }
        }
      };

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

  // dayjs.extend(advancedFormat);

  /* -------------------------------------------------------------------------- */
  /*                             Echarts Total Sales                            */
  /* -------------------------------------------------------------------------- */

  const echartsRevenueTargetInit = () => {
    const { getColor, getData } = window.phoenix.utils;
    const $leadConversionChartEl = document.querySelector(
      '.echart-revenue-target-conversion'
    );

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

    const data1 = [42000, 35000, 35000, 40000];
    const data2 = [30644, 33644, 28644, 38644];

    if ($leadConversionChartEl) {
      const userOptions = getData($leadConversionChartEl, 'echarts');
      const chart = window.echarts.init($leadConversionChartEl);

      const getDefaultOptions = () => ({
        color: [getColor('primary'), getColor('tertiary-bg')],
        tooltip: {
          trigger: 'axis',
          padding: [7, 10],
          backgroundColor: getColor('body-highlight-bg'),
          borderColor: getColor('border-color'),
          textStyle: { color: getColor('light-text-emphasis') },
          borderWidth: 1,
          transitionDuration: 0,
          axisPointer: {
            type: 'none'
          },
          formatter: params => tooltipFormatter(params),
          extraCssText: 'z-index: 1000'
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 3,
            showMinLabel: true,
            showMaxLabel: false,
            color: getColor('quaternary-color'),
            align: 'left',
            fontFamily: 'Nunito Sans',
            fontWeight: 400,
            fontSize: 12.8,
            margin: 10,
            formatter: value => `${value / 1000}k`
          },
          show: true,
          axisLine: {
            lineStyle: {
              color: getColor('tertiary-bg')
            }
          },
          axisTick: false,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          data: ['Luxemburg', 'Canada', 'Australia', 'India'],
          type: 'category',
          axisPointer: { type: 'none' },
          axisTick: 'none',
          splitLine: {
            interval: 5,
            lineStyle: {
              color: getColor('secondary-bg')
            }
          },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            margin: 21,
            color: getColor('body-color')
          }
        },
        series: [
          {
            name: 'Target',
            type: 'bar',
            label: {
              show: false
            },
            emphasis: {
              disabled: true
            },
            showBackground: true,
            backgroundStyle: {
              color: getColor('body-highlight-bg')
            },
            barWidth: '30px',
            barGap: '-100%',
            data: data1,
            itemStyle: {
              borderWidth: 4,
              color: getColor('secondary-bg'),
              borderColor: getColor('secondary-bg')
            }
          },
          {
            name: 'Gained',
            type: 'bar',
            emphasis: {
              disabled: true
            },
            label: {
              show: true,
              color: getColor('white'),
              fontWeight: 700,
              fontFamily: 'Nunito Sans',
              fontSize: 12.8,
              formatter: value => `$${value.value.toLocaleString()}`
            },
            // showBackground: true,
            backgroundStyle: {
              color: getColor('body-highlight-bg')
            },
            barWidth: '30px',
            data: data2,
            itemStyle: {
              borderWidth: 4,
              color: getColor('primary-light'),
              borderColor: getColor('secondary-bg')
            }
          }
        ],
        grid: {
          right: 0,
          left: 0,
          bottom: 8,
          top: 0,
          containLabel: true
        },
        animation: false
      });

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

  const { docReady } = window.phoenix.utils;

  docReady(contactsCreatedChartInit);
  docReady(newUsersChartsInit);
  docReady(newLeadsChartsInit);
  docReady(addClicksChartInit);
  docReady(echartsLeadConversiontInit);
  docReady(echartsRevenueTargetInit);

}));
//# sourceMappingURL=crm-dashboard.js.map