bettafish-company/static/js/02.js

(function(jQuery) {

    "use strict";
    // for apexchart
    function apexChartUpdate(chart, detail) {
      let color = getComputedStyle(document.documentElement).getPropertyValue('--dark');
      if (detail.dark) {
        color = getComputedStyle(document.documentElement).getPropertyValue('--white');
      }
      chart.updateOptions({
        chart: {
          foreColor: color
        }
      })
    }

    if (jQuery("#hospital-chart-02").length) var donut = new Morris.Donut({
        element: "hospital-chart-02",
        resize: !0,
        colors: ["#4788ff", "#4fd69c", "#37d5f2", "#f75676"],
        data: [
          {
            label: "New Patient",
            value: 40
          },
          {
            label: "Exit Patient",
            value: 12
          },
          {
            label: "ICU Patient",
            value: 20
          },
          {
            label: "Discharge Patient",
            value: 33
          }
        ],
        hideHover: "auto"
    });

    if (jQuery("#hospital-chart-03").length) {
        const options = {
          series: [{
            name: 'Operation',
            data: [44, 25, 10, 60, 50, 25, 40, 20]
          }, {
            name: 'Visitors',
            data: [25, 38, 70, 0, 30, 15, 30, 30]
          }],
          colors: ['#4788ff', '#4fd69c'],
          chart: {
            type: 'bar',
            height: 340,
            stacked: true,
            zoom: {
              enabled: true
            }
          },
          responsive: [{
            breakpoint: 580,
            options: {
              legend: {
                position: 'bottom',
                offsetX: -30,
                offsetY: 0,
              }
            }
          }],
          plotOptions: {
            bar: {
              horizontal: false,
              borderRadius: 4
            },
          },
          xaxis: {
            type: 'category',
            categories: ['India', 'Canada', 'U.S.A', 'Africa', 'London ', 'Europe ','Dubai','Kuvet'],
          },
           yaxis: {
            labels: {
                offsetY: 0,
                minWidth: 20,
                maxWidth: 20,
              }
           },
          legend: {
            position: 'top',
            offsetX: -35
          },
          fill: {
            opacity: 1
          },
          dataLabels: {
            enabled: false
          }
        };
      
        const chart = new ApexCharts(document.querySelector("#hospital-chart-03"), options);
        chart.render();
        const body = document.querySelector('body')
        if (body.classList.contains('dark')) {
          apexChartUpdate(chart, {
            dark: true
          })
        }
      
        document.addEventListener('ChangeColorMode', function (e) {
          apexChartUpdate(chart, e.detail)
        })
      
      }

      if (jQuery("#dash-chart-04").length) {
        const options = {
          series: [{
            name: 'Success',
            data: [110, 85, 87, 40, 45, 20, 91, 45, 94, 88]
          }, {
            name: 'Failed',
            data: [40, 55, 35, 30, 75, 80, 63, 45, 66, 115]
          }],
          chart: {
            type: 'bar',
            height: 280
          },
          colors: ['#4788ff', '#f75676'],
          plotOptions: {
            bar: {
              horizontal: false,
              borderRadius: 4
            },
          },
          legend: {
            position: 'bottom',
            offsetX: 35
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
          },
          xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
          },
          yaxis: {
            title: {
              text: '$ (thousands)'
            },
            labels: {
                offsetY: 0,
                minWidth: 20,
                maxWidth: 20,
            }
          },
          fill: {
            opacity: 1
          },
          tooltip: {
            y: {
              formatter: function (val) {
                return "$ " + val + " thousands"
              }
            }
          }
        };
      
        const chart = new ApexCharts(document.querySelector("#dash-chart-04"), options);
        chart.render();
        const body = document.querySelector('body')
        if (body.classList.contains('dark')) {
          apexChartUpdate(chart, {
            dark: true
          })
        }
      
        document.addEventListener('ChangeColorMode', function (e) {
          apexChartUpdate(chart, e.detail)
        })
      
      }

      if (jQuery("#hospital-chart-05").length) {
        var options = {
          series: [22, 83, 10, 30],
          colors: ['#f75676', '#4fd69c', '#37d5f2', '#4788ff'],
          chart: {
            height: 290,
            type: 'pie',
          },
          legend: {
            position: 'bottom',
            offsetX: 0
          },
          labels: ['Cancelled', 'Completed', 'Pending', 'Upcoming'],
      
        };
        var chart = new ApexCharts(document.querySelector("#hospital-chart-05"), options);
        chart.render();
        const body = document.querySelector('body')
        if (body.classList.contains('dark')) {
          apexChartUpdate(chart, {
            dark: true
          })
        }
      
        document.addEventListener('ChangeColorMode', function (e) {
          apexChartUpdate(chart, e.detail)
        })
      }
      
})(jQuery);