import ApexCharts from "apexcharts";

import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
import 'jsvectormap/dist/maps/world-merc.js';
import 'jsvectormap/dist/maps/world.js';
import GlobalConfig, {addThousandSeparators} from '../global-config.js';

class BigData {
  init(){
    this.initAllChart();
    this.initChartTargetPAD();
    this.initChartUsaha();
    this.initChartNonUsaha();
  }

  initChartTargetPAD() {
    console.log("api host : " + GlobalConfig.apiHost);
    fetch(`${GlobalConfig.apiHost}/api/all-task-documents`)
    .then(response => {
        if(!response.ok){
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(data => {
        const seriesData = data.data.series;
        document.getElementById("countTargetPAD").innerText = `${data.data.count} Berkas`;
        document.getElementById("totalTargetPAD").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        var options1 = {
            chart: {
                type: 'area',
                height: 50,
                sparkline: {
                    enabled: true
                }
            },
            series: [{
                data: seriesData
            }],
            stroke: {
                width: 2,
                curve: 'smooth'
            },
            markers: {
                size: 0
            },
            colors: ["#7e67fe"],
            tooltip: {
                fixed: {
                    enabled: false
                },
                x: {
                    show: false
                },
                y: {
                    title: {
                        formatter: function (seriesName) {
                            return ''
                        }
                    }
                },
                marker: {
                    show: false
                }
            },
            fill: {
                opacity: [1],
                type: ['gradient'],
                gradient: {
                    type: "vertical",
                    //   shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 100]
                },
            },
        }
    
        new ApexCharts(document.querySelector("#chart12"), options1).render();
    })
    .catch(error => {
        console.error("error fetching chart dara : ", error);
    });
  }

  initChartUsaha(){
    fetch(`${GlobalConfig.apiHost}/api/business-documents`)
    .then(response => {
        if(!response.ok){
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(data => {
        const seriesData = data.data.series;
        document.getElementById("countBusinessDocuments").innerText = `${data.data.count} Berkas`;
        document.getElementById("totalBusinessDocuments").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        var options1 = {
            chart: {
                type: 'area',
                height: 50,
                sparkline: {
                    enabled: true
                }
            },
            series: [{
                data: seriesData
            }],
            stroke: {
                width: 2,
                curve: 'smooth'
            },
            markers: {
                size: 0
            },
            colors: ["#7e67fe"],
            tooltip: {
                fixed: {
                    enabled: false
                },
                x: {
                    show: false
                },
                y: {
                    title: {
                        formatter: function (seriesName) {
                            return ''
                        }
                    }
                },
                marker: {
                    show: false
                }
            },
            fill: {
                opacity: [1],
                type: ['gradient'],
                gradient: {
                    type: "vertical",
                    //   shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 100]
                },
            },
        }
    
        new ApexCharts(document.querySelector("#chartBusinessDocuments"), options1).render();
    })
    .catch(error => {
        console.error("error fetching chart dara : ", error);
    });
  }

  initChartNonUsaha(){
    fetch(`${GlobalConfig.apiHost}/api/non-business-documents`)
    .then(response => {
        if(!response.ok){
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(data => {
        const seriesData = data.data.series;
        document.getElementById("countNonUsaha").innerText = `${data.data.count} Berkas`;
        document.getElementById("totalNonUsaha").innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        var options1 = {
            chart: {
                type: 'area',
                height: 50,
                sparkline: {
                    enabled: true
                }
            },
            series: [{
                data: seriesData
            }],
            stroke: {
                width: 2,
                curve: 'smooth'
            },
            markers: {
                size: 0
            },
            colors: ["#7e67fe"],
            tooltip: {
                fixed: {
                    enabled: false
                },
                x: {
                    show: false
                },
                y: {
                    title: {
                        formatter: function (seriesName) {
                            return ''
                        }
                    }
                },
                marker: {
                    show: false
                }
            },
            fill: {
                opacity: [1],
                type: ['gradient'],
                gradient: {
                    type: "vertical",
                    //   shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 100]
                },
            },
        }
    
        new ApexCharts(document.querySelector("#chartNonUsaha"), options1).render();
    })
    .catch(error => {
        console.error("error fetching chart dara : ", error);
    });
  }

  initAllChart(){
    var options1 = {
      chart: {
        type: 'area',
        height: 50,
        sparkline: {
          enabled: true
        }
      },
      series: [{
        data: [80, 100, 50, 30, 90]
      }],
      stroke: {
        width: 2,
        curve: 'smooth'
      },
      markers: {
        size: 0
      },
      colors: ["#7e67fe"],
      tooltip: {
        fixed: {
          enabled: false
        },
        x: {
          show: false
        },
        y: {
          title: {
            formatter: function (seriesName) {
              return ''
            }
          }
        },
        marker: {
          show: false
        }
      },
      fill: {
        opacity: [1],
        type: ['gradient'],
        gradient: {
          type: "vertical",
          //   shadeIntensity: 1,
          inverseColors: false,
          opacityFrom: 0.5,
          opacityTo: 0,
          stops: [0, 100]
        },
      },
    }

    new ApexCharts(document.querySelector("#chart01"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart02"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart03"), options1).render();

    // var options1 = {
    //     chart: {
    //         type: 'area',
    //         height: 50,
    //         sparkline: {
    //             enabled: true
    //         }
    //     },
    //     series: [{
    //         data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
    //     }],
    //     stroke: {
    //         width: 2,
    //         curve: 'smooth'
    //     },
    //     markers: {
    //         size: 0
    //     },
    //     colors: ["#7e67fe"],
    //     tooltip: {
    //         fixed: {
    //             enabled: false
    //         },
    //         x: {
    //             show: false
    //         },
    //         y: {
    //             title: {
    //                 formatter: function (seriesName) {
    //                     return ''
    //                 }
    //             }
    //         },
    //         marker: {
    //             show: false
    //         }
    //     },
    //     fill: {
    //         opacity: [1],
    //         type: ['gradient'],
    //         gradient: {
    //             type: "vertical",
    //             //   shadeIntensity: 1,
    //             inverseColors: false,
    //             opacityFrom: 0.5,
    //             opacityTo: 0,
    //             stops: [0, 100]
    //         },
    //     },
    // }

    // new ApexCharts(document.querySelector("#chart04"), options1).render();

    // var options1 = {
    //   chart: {
    //     type: 'area',
    //     height: 50,
    //     sparkline: {
    //       enabled: true
    //     }
    //   },
    //   series: [{
    //     data: [80, 100, 50, 30, 90]
    //   }],
    //   stroke: {
    //     width: 2,
    //     curve: 'smooth'
    //   },
    //   markers: {
    //     size: 0
    //   },
    //   colors: ["#7e67fe"],
    //   tooltip: {
    //     fixed: {
    //       enabled: false
    //     },
    //     x: {
    //       show: false
    //     },
    //     y: {
    //       title: {
    //         formatter: function (seriesName) {
    //           return ''
    //         }
    //       }
    //     },
    //     marker: {
    //       show: false
    //     }
    //   },
    //   fill: {
    //     opacity: [1],
    //     type: ['gradient'],
    //     gradient: {
    //       type: "vertical",
    //       //   shadeIntensity: 1,
    //       inverseColors: false,
    //       opacityFrom: 0.5,
    //       opacityTo: 0,
    //       stops: [0, 100]
    //     },
    //   },
    // }

    // new ApexCharts(document.querySelector("#chart05"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart06"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart07"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart08"), options1).render();

    var options1 = {
      chart: {
        type: 'area',
        height: 50,
        sparkline: {
          enabled: true
        }
      },
      series: [{
        data: [80, 100, 50, 30, 90]
      }],
      stroke: {
        width: 2,
        curve: 'smooth'
      },
      markers: {
        size: 0
      },
      colors: ["#7e67fe"],
      tooltip: {
        fixed: {
          enabled: false
        },
        x: {
          show: false
        },
        y: {
          title: {
            formatter: function (seriesName) {
              return ''
            }
          }
        },
        marker: {
          show: false
        }
      },
      fill: {
        opacity: [1],
        type: ['gradient'],
        gradient: {
          type: "vertical",
          //   shadeIntensity: 1,
          inverseColors: false,
          opacityFrom: 0.5,
          opacityTo: 0,
          stops: [0, 100]
        },
      },
    }

    new ApexCharts(document.querySelector("#chart09"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart10"), options1).render();

    var options1 = {
        chart: {
            type: 'area',
            height: 50,
            sparkline: {
                enabled: true
            }
        },
        series: [{
            data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95]
        }],
        stroke: {
            width: 2,
            curve: 'smooth'
        },
        markers: {
            size: 0
        },
        colors: ["#7e67fe"],
        tooltip: {
            fixed: {
                enabled: false
            },
            x: {
                show: false
            },
            y: {
                title: {
                    formatter: function (seriesName) {
                        return ''
                    }
                }
            },
            marker: {
                show: false
            }
        },
        fill: {
            opacity: [1],
            type: ['gradient'],
            gradient: {
                type: "vertical",
                //   shadeIntensity: 1,
                inverseColors: false,
                opacityFrom: 0.5,
                opacityTo: 0,
                stops: [0, 100]
            },
        },
    }

    new ApexCharts(document.querySelector("#chart11"), options1).render();

    // var options1 = {
    //     chart: {
    //         type: 'area',
    //         height: 50,
    //         sparkline: {
    //             enabled: true
    //         }
    //     },
    //     series: [{
    //         data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
    //     }],
    //     stroke: {
    //         width: 2,
    //         curve: 'smooth'
    //     },
    //     markers: {
    //         size: 0
    //     },
    //     colors: ["#7e67fe"],
    //     tooltip: {
    //         fixed: {
    //             enabled: false
    //         },
    //         x: {
    //             show: false
    //         },
    //         y: {
    //             title: {
    //                 formatter: function (seriesName) {
    //                     return ''
    //                 }
    //             }
    //         },
    //         marker: {
    //             show: false
    //         }
    //     },
    //     fill: {
    //         opacity: [1],
    //         type: ['gradient'],
    //         gradient: {
    //             type: "vertical",
    //             //   shadeIntensity: 1,
    //             inverseColors: false,
    //             opacityFrom: 0.5,
    //             opacityTo: 0,
    //             stops: [0, 100]
    //         },
    //     },
    // }

    // new ApexCharts(document.querySelector("#chart12"), options1).render();
  }
}

document.addEventListener('DOMContentLoaded', function (e) {
  new BigData().init();
});