@hitsoft/e-donusum 1.0.5

package/_metronic/partials/content/widgets/_new/charts/new-charts-widget8/new-charts-widget8.component.html

@@ -0,0 +1,298 @@
+<!--begin::Chart widget 8-->
+<div class="card card-flush" [ngClass]="cssClass">
+  <!--begin::Header-->
+  <div class="card-header pt-5">
+    <!--begin::Title-->
+    <h3 class="card-title align-items-start flex-column">
+      <span class="card-label fw-bold text-gray-900">Performance Overview</span>
+      <span class="text-gray-500 mt-1 fw-semibold fs-6">Users from all channels</span>
+    </h3>
+    <!--end::Title-->
+
+    <!--begin::Toolbar-->
+    <div class="card-toolbar">
+      <ul class="nav" id="kt_chart_widget_8_tabs">
+
+        <li class="nav-item">
+          <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1"
+            [ngClass]="{'active': tab === 'Week'}" data-bs-toggle="tab" (click)="setTab('Week')"
+            id="kt_chart_widget_8_month_toggle">Week</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1"
+            [ngClass]="{'active': tab === 'Month'}" data-bs-toggle="tab" (click)="setTab('Month')"
+            id="kt_chart_widget_8_week_toggle">Month</a>
+        </li>
+
+      </ul>
+    </div>
+    <!--end::Toolbar-->
+  </div>
+  <!--end::Header-->
+
+  <!--begin::Body-->
+  <div class="card-body pt-6">
+    <!--begin::Tab content-->
+    <div class="tab-content">
+      <!--begin::Tab pane-->
+      <div class="tab-pane fade" [ngClass]="{'active show': tab === 'Week'}" id="kt_chart_widget_8_week_tab" role="tabpanel">
+        <!--begin::Statistics-->
+        <div class="mb-5">
+          <!--begin::Statistics-->
+          <div class="d-flex align-items-center mb-2">
+            <span class="fs-1 fw-semibold text-gray-500 me-1 mt-n1">$</span>
+
+            <span class="fs-3x fw-bold text-gray-800 me-2 lh-1 ls-n2">18,89</span>
+
+            <span class="badge badge-light-success fs-base">
+              <app-keenicon name="arrow-up" class="fs-5 text-success ms-n1"></app-keenicon>
+              4,8%
+            </span>
+          </div>
+          <!--end::Statistics-->
+
+          <!--begin::Description-->
+          <span class="fs-6 fw-semibold text-gray-500">Avarage cost per interaction</span>
+          <!--end::Description-->
+        </div>
+        <!--end::Statistics-->
+
+        <!--begin::Chart-->
+        <div id="kt_chart_widget_8_week_chart" class="ms-n5 min-h-auto" [ngStyle]="{'height': chartHeight}">
+          <ng-container *ngIf="hadDelay">
+            <apx-chart [series]="chart1Options.series" [chart]="chart1Options.chart"
+              [xaxis]="chart1Options.xaxis" [yaxis]="chart1Options.yaxis" [dataLabels]="chart1Options.dataLabels"
+              [stroke]="chart1Options.stroke" [legend]="chart1Options.legend" [fill]="chart1Options.fill"
+              [states]="chart1Options.states" [tooltip]="chart1Options.tooltip" [colors]="chart1Options.colors"
+              [markers]="chart1Options.markers" [plotOptions]="chart1Options.plotOptions"></apx-chart>
+          </ng-container>
+
+
+        </div>
+        <!--end::Chart-->
+
+        <!--begin::Items-->
+        <div class="d-flex flex-wrap pt-5">
+          <!--begin::Item-->
+          <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+            <!--begin::Item-->
+            <div class="d-flex align-items-center mb-3 mb-sm-6">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Social Campaigns</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+
+            <!--begin::Item-->
+            <div class="d-flex align-items-center">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-<gray-600 fs-6">Google Ads</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+          </div>
+          <!--ed::Item-->
+
+          <!--begin::Item-->
+          <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+            <!--begin::Item-->
+            <div class="d-flex align-items-center mb-3 mb-sm-6">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Email Newsletter</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+
+            <!--begin::Item-->
+            <div class="d-flex align-items-center">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Courses</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+          </div>
+          <!--ed::Item-->
+
+          <!--begin::Item-->
+          <div class="d-flex flex-column pt-sm-3 pt-6">
+            <!--begin::Item-->
+            <div class="d-flex align-items-center mb-3 mb-sm-6">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">TV Campaign</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+
+            <!--begin::Item-->
+            <div class="d-flex align-items-center">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Radio</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+          </div>
+          <!--ed::Item-->
+        </div>
+        <!--ed::Items-->
+      </div>
+      <!--end::Tab pane-->
+
+      <!--begin::Tab pane-->
+      <div class="tab-pane fade" [ngClass]="{'active show': tab === 'Month'}" id="kt_chart_widget_8_month_tab"
+        role="tabpanel">
+        <!--begin::Statistics-->
+        <div class="mb-5">
+          <!--begin::Statistics-->
+          <div class="d-flex align-items-center mb-2">
+            <span class="fs-1 fw-semibold text-gray-500 me-1 mt-n1">$</span>
+
+            <span class="fs-3x fw-bold text-gray-800 me-2 lh-1 ls-n2">8,55</span>
+
+            <span class="badge badge-light-success fs-base">
+              <app-keenicon name="arrow-up" class="fs-5 text-success ms-n1"></app-keenicon>
+              2.2%
+            </span>
+
+          </div>
+          <!--end::Statistics-->
+
+          <!--begin::Description-->
+          <span class="fs-6 fw-semibold text-gray-500">Avarage cost per interaction</span>
+          <!--end::Description-->
+        </div>
+        <!--end::Statistics-->
+
+        <!--begin::Chart-->
+        <div id="kt_chart_widget_8_month_chart" class="ms-n5 min-h-auto" [ngStyle]="{'height': chartHeight}">
+          <ng-container *ngIf="hadDelay">
+
+            <apx-chart #monthChart [series]="chart2Options.series" [chart]="chart2Options.chart"
+              [xaxis]="chart2Options.xaxis" [yaxis]="chart2Options.yaxis" [dataLabels]="chart2Options.dataLabels"
+              [stroke]="chart2Options.stroke" [legend]="chart2Options.legend" [fill]="chart2Options.fill"
+              [states]="chart2Options.states" [tooltip]="chart2Options.tooltip" [colors]="chart2Options.colors"
+              [markers]="chart2Options.markers" [plotOptions]="chart2Options.plotOptions"></apx-chart>
+
+          </ng-container>
+
+        </div>
+        <!--end::Chart-->
+
+        <!--begin::Items-->
+        <div class="d-flex flex-wrap pt-5">
+          <!--begin::Item-->
+          <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+            <!--begin::Item-->
+            <div class="d-flex align-items-center mb-3 mb-sm-6">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Social Campaigns</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+
+            <!--begin::Item-->
+            <div class="d-flex align-items-center">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Google Ads</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+          </div>
+          <!--ed::Item-->
+
+          <!--begin::Item-->
+          <div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+            <!--begin::Item-->
+            <div class="d-flex align-items-center mb-3 mb-sm-6">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Email Newsletter</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+
+            <!--begin::Item-->
+            <div class="d-flex align-items-center">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Courses</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+          </div>
+          <!--ed::Item-->
+
+          <!--begin::Item-->
+          <div class="d-flex flex-column pt-sm-3 pt-6">
+            <!--begin::Item-->
+            <div class="d-flex align-items-center mb-3 mb-sm-6">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">TV Campaign</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+
+            <!--begin::Item-->
+            <div class="d-flex align-items-center">
+              <!--begin::Bullet-->
+              <span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+              <!--end::Bullet-->
+
+              <!--begin::Label-->
+              <span class="fw-bold text-gray-600 fs-6">Radio</span>
+              <!--end::Label-->
+            </div>
+            <!--ed::Item-->
+          </div>
+          <!--ed::Item-->
+        </div>
+        <!--ed::Items-->
+      </div>
+      <!--end::Tab pane-->
+    </div>
+    <!--end::Tab content-->
+  </div>
+  <!--end::Body-->
+</div>
+<!--end::Chart widget 8-->

package/_metronic/partials/content/widgets/_new/charts/new-charts-widget8/new-charts-widget8.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewChartsWidget8Component } from './new-charts-widget8.component';
+
+describe('NewChartsWidget8Component', () => {
+  let component: NewChartsWidget8Component;
+  let fixture: ComponentFixture<NewChartsWidget8Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NewChartsWidget8Component ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NewChartsWidget8Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/_metronic/partials/content/widgets/_new/charts/new-charts-widget8/new-charts-widget8.component.ts

@@ -0,0 +1,358 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import * as ApexCharts from 'apexcharts';
+import { getCSSVariableValue } from '../../../../../../kt/_utils';
+
+@Component({
+  selector: 'app-new-charts-widget8',
+  templateUrl: './new-charts-widget8.component.html',
+  styleUrls: ['./new-charts-widget8.component.scss'],
+})
+export class NewChartsWidget8Component implements OnInit {
+  @ViewChild('weekChart') weekChart: ElementRef<HTMLDivElement>;
+  @ViewChild('monthChart') monthChart: ElementRef<HTMLDivElement>;
+
+  @Input() chartHeight: string = '425px';
+  @Input() chartHeightNumber: number = 425;
+  @Input() cssClass: string = '';
+  tab: 'Week' | 'Month' = 'Week';
+  chart1Options: any = {};
+  chart2Options: any = {};
+  hadDelay: boolean = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.setupCharts();
+  }
+
+  init() {
+    this.chart1Options = getChart1Options(this.chartHeightNumber);
+    this.chart2Options = getChart2Options(this.chartHeightNumber);
+  }
+
+  setTab(_tab: 'Week' | 'Month') {
+    this.tab = _tab;
+    if (_tab === 'Week') {
+      this.chart2Options = getChart2Options(this.chartHeightNumber);
+    }
+
+    if (_tab === 'Month') {
+      this.chart1Options = getChart1Options(this.chartHeightNumber);
+    }
+
+    this.setupCharts();
+  }
+
+  setupCharts() {
+    setTimeout(() => {
+      this.hadDelay = true;
+      this.init();
+      this.cdr.detectChanges();
+    }, 100);
+  }
+}
+
+function getChart1Options(chartHeightNumber: number) {
+  const data = [
+    [[100, 250, 30]],
+    [[225, 300, 35]],
+    [[300, 350, 25]],
+    [[350, 350, 20]],
+    [[450, 400, 25]],
+    [[550, 350, 35]],
+  ];
+  const height = chartHeightNumber;
+  const borderColor = getCSSVariableValue('--bs-border-dashed-color');
+
+  const options = {
+    series: [
+      {
+        name: 'Social Campaigns',
+        data: data[0], // array value is of the format [x, y, z] where x (timestamp) and y are the two axes coordinates,
+      },
+      {
+        name: 'Email Newsletter',
+        data: data[1],
+      },
+      {
+        name: 'TV Campaign',
+        data: data[2],
+      },
+      {
+        name: 'Google Ads',
+        data: data[3],
+      },
+      {
+        name: 'Courses',
+        data: data[4],
+      },
+      {
+        name: 'Radio',
+        data: data[5],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'bubble',
+      height: height,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bubble: {},
+    },
+    stroke: {
+      show: false,
+      width: 0,
+    },
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    xaxis: {
+      type: 'numeric',
+      tickAmount: 7,
+      min: 0,
+      max: 700,
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: true,
+        height: 0,
+      },
+      labels: {
+        show: true,
+        trim: true,
+        style: {
+          colors: getCSSVariableValue('--bs-gray-500'),
+          fontSize: '13px',
+        },
+      },
+    },
+    yaxis: {
+      tickAmount: 7,
+      min: 0,
+      max: 700,
+      labels: {
+        style: {
+          colors: getCSSVariableValue('--bs-gray-500'),
+          fontSize: '13px',
+        },
+      },
+    },
+    tooltip: {
+      style: {
+        fontSize: '12px',
+      },
+      x: {
+        formatter: function (val: string) {
+          return 'Clicks: ' + val;
+        },
+      },
+      y: {
+        formatter: function (val: string) {
+          return '$' + val + 'K';
+        },
+      },
+      z: {
+        title: 'Impression: ',
+      },
+    },
+    crosshairs: {
+      show: true,
+      position: 'front',
+      stroke: {
+        color: getCSSVariableValue('--bs-border-dashed-color'),
+        width: 1,
+        dashArray: 0,
+      },
+    },
+    colors: [
+      getCSSVariableValue('--bs-primary'),
+      getCSSVariableValue('--bs-success'),
+      getCSSVariableValue('--bs-warning'),
+      getCSSVariableValue('--bs-danger'),
+      getCSSVariableValue('--bs-info'),
+      '#43CED7',
+    ],
+    fill: {
+      opacity: 1,
+    },
+    markers: {
+      strokeWidth: 0,
+    },
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      padding: {
+        right: 20,
+      },
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+  };
+  return options;
+}
+
+function getChart2Options(chartHeightNumber: number) {
+  const data = [
+    [[125, 300, 40]],
+    [[250, 350, 35]],
+    [[350, 450, 30]],
+    [[450, 250, 25]],
+    [[500, 500, 30]],
+    [[600, 250, 28]],
+  ];
+  const height = chartHeightNumber;
+  const borderColor = getCSSVariableValue('--bs-border-dashed-color');
+
+  const options = {
+    series: [
+      {
+        name: 'Social Campaigns',
+        data: data[0], // array value is of the format [x, y, z] where x (timestamp) and y are the two axes coordinates,
+      },
+      {
+        name: 'Email Newsletter',
+        data: data[1],
+      },
+      {
+        name: 'TV Campaign',
+        data: data[2],
+      },
+      {
+        name: 'Google Ads',
+        data: data[3],
+      },
+      {
+        name: 'Courses',
+        data: data[4],
+      },
+      {
+        name: 'Radio',
+        data: data[5],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'bubble',
+      height: height,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bubble: {},
+    },
+    stroke: {
+      show: false,
+      width: 0,
+    },
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    xaxis: {
+      type: 'numeric',
+      tickAmount: 7,
+      min: 0,
+      max: 700,
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: true,
+        height: 0,
+      },
+      labels: {
+        show: true,
+        trim: true,
+        style: {
+          colors: getCSSVariableValue('--bs-gray-500'),
+          fontSize: '13px',
+        },
+      },
+    },
+    yaxis: {
+      tickAmount: 7,
+      min: 0,
+      max: 700,
+      labels: {
+        style: {
+          colors: getCSSVariableValue('--bs-gray-500'),
+          fontSize: '13px',
+        },
+      },
+    },
+    tooltip: {
+      style: {
+        fontSize: '12px',
+      },
+      x: {
+        formatter: function (val: string) {
+          return 'Clicks: ' + val;
+        },
+      },
+      y: {
+        formatter: function (val: string) {
+          return '$' + val + 'K';
+        },
+      },
+      z: {
+        title: 'Impression: ',
+      },
+    },
+    crosshairs: {
+      show: true,
+      position: 'front',
+      stroke: {
+        color: getCSSVariableValue('--bs-border-dashed-color'),
+        width: 1,
+        dashArray: 0,
+      },
+    },
+    colors: [
+      getCSSVariableValue('--bs-primary'),
+      getCSSVariableValue('--bs-success'),
+      getCSSVariableValue('--bs-warning'),
+      getCSSVariableValue('--bs-danger'),
+      getCSSVariableValue('--bs-info'),
+      '#43CED7',
+    ],
+    fill: {
+      opacity: 1,
+    },
+    markers: {
+      strokeWidth: 0,
+    },
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      padding: {
+        right: 20,
+      },
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+  };
+  return options;
+}