@hitsoft/e-donusum 1.0.5 → 1.0.7

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

@@ -1,298 +0,0 @@
-<!--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

@@ -1,23 +0,0 @@
-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

@@ -1,358 +0,0 @@
-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;
-}