@hitsoft/e-donusum 1.0.5

package/_metronic/partials/content/widgets/mixed/mixed-widget8/mixed-widget8.component.html

@@ -0,0 +1,158 @@
+<!-- begin::Beader -->
+<div class="card-header border-0 py-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Trends</span>
+
+    <span class="text-muted fw-bold fs-7">Latest trends</span>
+  </h3>
+
+  <div class="card-toolbar">
+    <!-- begin::Menu -->
+    <button
+      type="button"
+      class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+      data-kt-menu-trigger="click"
+      data-kt-menu-placement="bottom-end"
+      data-kt-menu-flip="top-end"
+    >
+      <app-keenicon name="category" class="fs-2"></app-keenicon>
+    </button>
+    <app-dropdown-menu1></app-dropdown-menu1>
+    <!-- end::Menu -->
+  </div>
+</div>
+<!-- end::Header -->
+
+<!-- begin::Body -->
+<div class="card-body d-flex flex-column">
+  <!-- begin::Chart -->
+  <div
+    #chartRef
+    class="mixed-widget-5-chart card-rounded-top"
+    [style.height]="chartHeight"
+  >
+    <apx-chart
+      [series]="chartOptions.series"
+      [chart]="chartOptions.chart"
+      [xaxis]="chartOptions.xaxis"
+      [yaxis]="chartOptions.yaxis"
+      [dataLabels]="chartOptions.dataLabels"
+      [stroke]="chartOptions.stroke"
+      [legend]="chartOptions.legend"
+      [fill]="chartOptions.fill"
+      [states]="chartOptions.states"
+      [tooltip]="chartOptions.tooltip"
+      [colors]="chartOptions.colors"
+      [markers]="chartOptions.markers"
+      [plotOptions]="chartOptions.plotOptions"
+    ></apx-chart>
+  </div>
+  <!-- end::Chart -->
+
+  <!-- begin::Items -->
+  <div class="mt-5">
+    <!-- begin::Item -->
+    <div class="d-flex flex-stack mb-5">
+      <!-- begin::Section -->
+      <div class="d-flex align-items-center me-2">
+        <!-- begin::Symbol -->
+        <div class="symbol symbol-50px me-3">
+          <div class="symbol-label bg-light">
+            <img
+              src="./assets/media/svg/brand-logos/plurk.svg"
+              alt=""
+              class="h-50"
+            />
+          </div>
+        </div>
+        <!-- end::Symbol -->
+
+        <!-- begin::Title -->
+        <div>
+          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bolder">
+            Top Authors
+          </a>
+          <div class="fs-7 text-muted fw-bold mt-1">
+            Ricky Hunt, Sandra Trepp
+          </div>
+        </div>
+        <!-- end::Title -->
+      </div>
+      <!-- end::Section -->
+
+      <!-- begin::Label -->
+      <div class="badge badge-light fw-bold py-4 px-3">+82$</div>
+      <!-- end::Label -->
+    </div>
+    <!-- end::Item -->
+
+    <!-- begin::Item -->
+    <div class="d-flex flex-stack mb-5">
+      <!-- begin::Section -->
+      <div class="d-flex align-items-center me-2">
+        <!-- begin::Symbol -->
+        <div class="symbol symbol-50px me-3">
+          <div class="symbol-label bg-light">
+            <img
+              src="./assets/media/svg/brand-logos/figma-1.svg"
+              alt=""
+              class="h-50"
+            />
+          </div>
+        </div>
+        <!-- end::Symbol -->
+
+        <!-- begin::Title -->
+        <div>
+          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bolder">
+            Top Sales
+          </a>
+          <div class="fs-7 text-muted fw-bold mt-1">PitStop Emails</div>
+        </div>
+        <!-- end::Title -->
+      </div>
+      <!-- end::Section -->
+
+      <!-- begin::Label -->
+      <div class="badge badge-light fw-bold py-4 px-3">+82$</div>
+      <!-- end::Label -->
+    </div>
+    <!-- end::Item -->
+
+    <!-- begin::Item -->
+    <div class="d-flex flex-stack">
+      <!-- begin::Section -->
+      <div class="d-flex align-items-center me-2">
+        <!-- begin::Symbol -->
+        <div class="symbol symbol-50px me-3">
+          <div class="symbol-label bg-light">
+            <img
+              src="./assets/media/svg/brand-logos/vimeo.svg"
+              alt=""
+              class="h-50"
+            />
+          </div>
+        </div>
+        <!-- end::Symbol -->
+
+        <!-- begin::Title -->
+        <div class="py-1">
+          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bolder">
+            Top Engagement
+          </a>
+
+          <div class="fs-7 text-muted fw-bold mt-1">KT.com</div>
+        </div>
+        <!-- end::Title -->
+      </div>
+      <!-- end::Section -->
+
+      <!-- begin::Label -->
+      <div class="badge badge-light fw-bold py-4 px-3">+82$</div>
+      <!-- end::Label -->
+    </div>
+    <!-- end::Item -->
+  </div>
+  <!-- end::Items -->
+</div>
+<!-- end::Body -->

package/_metronic/partials/content/widgets/mixed/mixed-widget8/mixed-widget8.component.ts

@@ -0,0 +1,164 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget8',
+  templateUrl: './mixed-widget8.component.html',
+})
+export class MixedWidget8Component implements OnInit {
+  @Input() chartColor: string = '';
+  @Input() chartHeight: string;
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(this.chartHeight, this.chartColor);
+  }
+
+  refreshCharts() {
+    return getChartOptions(this.chartHeight, this.chartColor);
+  }
+}
+
+function getChartOptions(chartHeight: string, chartColor: string) {
+  const labelColor = getCSSVariableValue('--bs-gray-800');
+  const strokeColor = getCSSVariableValue('--bs-gray-300');
+  const baseColor = getCSSVariableValue('--bs-' + chartColor);
+  const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light');
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [30, 30, 60, 25, 25, 40],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'area',
+      height: chartHeight,
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      sparkline: {
+        enabled: true,
+      },
+    },
+    plotOptions: {},
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      type: 'solid',
+      opacity: 1,
+    },
+    fill1: {
+      type: 'gradient',
+      opacity: 1,
+      gradient: {
+        type: 'vertical',
+        shadeIntensity: 0.5,
+        gradientToColors: undefined,
+        inverseColors: true,
+        opacityFrom: 1,
+        opacityTo: 0.375,
+        stops: [25, 50, 100],
+        colorStops: [],
+      },
+    },
+    stroke: {
+      curve: 'smooth',
+      show: true,
+      width: 3,
+      colors: [baseColor],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+      crosshairs: {
+        show: false,
+        position: 'front',
+        stroke: {
+          color: strokeColor,
+          width: 1,
+          dashArray: 3,
+        },
+      },
+      tooltip: {
+        enabled: true,
+        formatter: undefined,
+        offsetY: 0,
+        style: {
+          fontSize: '12px',
+        },
+      },
+    },
+    yaxis: {
+      min: 0,
+      max: 65,
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    states: {
+      normal: {
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+      hover: {
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+      active: {
+        allowMultipleDataPointsSelection: false,
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+    },
+    tooltip: {
+      style: {
+        fontSize: '12px',
+      },
+      y: {
+        formatter: function (val: any) {
+          return '$' + val + ' thousands';
+        },
+      },
+    },
+    colors: [lightColor],
+    markers: {
+      colors: [lightColor],
+      // @ts-ignore
+      strokeColor: [baseColor],
+      strokeWidth: 3,
+    },
+  };
+}

package/_metronic/partials/content/widgets/mixed/mixed-widget9/mixed-widget9.component.html

@@ -0,0 +1,147 @@
+<div class="card-header border-0 py-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Sales Statistics</span>
+
+    <span class="text-muted fw-bold fs-7">Recent sales statistics</span>
+  </h3>
+
+  <div class="card-toolbar">
+    <!-- begin::Menu -->
+    <button
+      type="button"
+      class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
+      data-kt-menu-trigger="click"
+      data-kt-menu-placement="bottom-end"
+      data-kt-menu-flip="top-end"
+    >
+      <app-keenicon name="category" class="fs-2"></app-keenicon>
+    </button>
+    <app-dropdown-menu1></app-dropdown-menu1>
+    <!-- end::Menu -->
+  </div>
+</div>
+<!-- end::Header -->
+
+<!-- begin::Body -->
+<div class="card-body p-0 d-flex flex-column">
+  <!-- begin::Stats -->
+  <div class="card-px pt-5 pb-10 flex-grow-1">
+    <!-- begin::Row -->
+    <div class="row g-0 mt-5 mb-10">
+      <!-- begin::Col -->
+      <div class="col">
+        <div class="d-flex align-items-center me-2">
+          <!-- begin::Symbol -->
+          <div class="symbol symbol-50px me-3">
+            <div class="symbol-label bg-light-info">
+              <app-keenicon name="bucket" class="fs-1 text-info"></app-keenicon>
+            </div>
+          </div>
+          <!-- end::Symbol -->
+
+          <!-- begin::Title -->
+          <div>
+            <div class="fs-4 text-gray-900 fw-bolder">$2,034</div>
+            <div class="fs-7 text-muted fw-bold">Author Sales</div>
+          </div>
+          <!-- end::Title -->
+        </div>
+      </div>
+      <!-- end::Col -->
+
+      <!-- begin::Col -->
+      <div class="col">
+        <div class="d-flex align-items-center me-2">
+          <!-- begin::Symbol -->
+          <div class="symbol symbol-50px me-3">
+            <div class="symbol-label bg-light-danger">
+              <app-keenicon name="abstract-26" class="fs-1 text-danger"></app-keenicon>
+            </div>
+          </div>
+          <!-- end::Symbol -->
+
+          <!-- begin::Title -->
+          <div>
+            <div class="fs-4 text-gray-900 fw-bolder">$706</div>
+            <div class="fs-7 text-muted fw-bold">Commision</div>
+          </div>
+          <!-- end::Title -->
+        </div>
+      </div>
+      <!-- end::Col -->
+    </div>
+    <!-- end::Row -->
+
+    <!-- begin::Row -->
+    <div class="row g-0">
+      <!-- begin::Col -->
+      <div class="col">
+        <div class="d-flex align-items-center me-2">
+          <!-- begin::Symbol -->
+          <div class="symbol symbol-50px me-3">
+            <div class="symbol-label bg-light-success">
+              <app-keenicon name="basket" class="fs-1 text-success"></app-keenicon>
+            </div>
+          </div>
+          <!-- end::Symbol -->
+
+          <!-- begin::Title -->
+          <div>
+            <div class="fs-4 text-gray-900 fw-bolder">$49</div>
+            <div class="fs-7 text-muted fw-bold">Average Bid</div>
+          </div>
+          <!-- end::Title -->
+        </div>
+      </div>
+      <!-- end::Col -->
+
+      <!-- begin::Col -->
+      <div class="col">
+        <div class="d-flex align-items-center me-2">
+          <!-- begin::Symbol -->
+          <div class="symbol symbol-50px me-3">
+            <div class="symbol-label bg-light-primary">
+              <app-keenicon name="ecm010.svg" class="fs-1 text-primary"></app-keenicon>
+            </div>
+          </div>
+          <!-- end::Symbol -->
+
+          <!-- begin::Title -->
+          <div>
+            <div class="fs-4 text-gray-900 fw-bolder">$5.8M</div>
+            <div class="fs-7 text-muted fw-bold">All Time Sales</div>
+          </div>
+          <!-- end::Title -->
+        </div>
+      </div>
+      <!-- end::Col -->
+    </div>
+    <!-- end::Row -->
+  </div>
+  <!-- end::Stats -->
+
+  <!-- begin::Chart -->
+  <div
+    #chartRef
+    class="mixed-widget-6-chart card-rounded-bottom"
+    [style.height]="chartHeight"
+  >
+    <apx-chart
+      [series]="chartOptions.series"
+      [chart]="chartOptions.chart"
+      [xaxis]="chartOptions.xaxis"
+      [yaxis]="chartOptions.yaxis"
+      [dataLabels]="chartOptions.dataLabels"
+      [stroke]="chartOptions.stroke"
+      [legend]="chartOptions.legend"
+      [fill]="chartOptions.fill"
+      [states]="chartOptions.states"
+      [tooltip]="chartOptions.tooltip"
+      [colors]="chartOptions.colors"
+      [markers]="chartOptions.markers"
+      [plotOptions]="chartOptions.plotOptions"
+    ></apx-chart>
+  </div>
+  <!-- end::Chart -->
+</div>
+<!-- end::Body -->

package/_metronic/partials/content/widgets/mixed/mixed-widget9/mixed-widget9.component.spec.ts

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

package/_metronic/partials/content/widgets/mixed/mixed-widget9/mixed-widget9.component.ts

@@ -0,0 +1,140 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget9',
+  templateUrl: './mixed-widget9.component.html',
+})
+export class MixedWidget9Component implements OnInit {
+  @Input() chartColor: string = '';
+  @Input() chartHeight: string;
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(this.chartHeight, this.chartColor);
+  }
+}
+
+function getChartOptions(chartHeight: string, chartColor: string) {
+  const labelColor = getCSSVariableValue('--bs-gray-800');
+  const strokeColor = getCSSVariableValue('--bs-gray-300');
+  const baseColor = getCSSVariableValue('--bs-' + chartColor);
+  const lightColor = getCSSVariableValue('--bs-' + chartColor + '-light');
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [30, 25, 45, 30, 55, 55],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'area',
+      height: chartHeight,
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      sparkline: {
+        enabled: true,
+      },
+    },
+    plotOptions: {},
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      type: 'solid',
+      opacity: 1,
+    },
+    stroke: {
+      curve: 'smooth',
+      show: true,
+      width: 3,
+      colors: [baseColor],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+      crosshairs: {
+        show: false,
+        position: 'front',
+        stroke: {
+          color: strokeColor,
+          width: 1,
+          dashArray: 3,
+        },
+      },
+      tooltip: {
+        enabled: false,
+      },
+    },
+    yaxis: {
+      min: 0,
+      max: 60,
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    states: {
+      normal: {
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+      hover: {
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+      active: {
+        allowMultipleDataPointsSelection: false,
+        filter: {
+          type: 'none',
+          value: 0,
+        },
+      },
+    },
+    tooltip: {
+      style: {
+        fontSize: '12px',
+      },
+      y: {
+        formatter: function (val: number) {
+          return '$' + val + ' thousands';
+        },
+      },
+    },
+    colors: [lightColor],
+    markers: {
+      colors: [lightColor],
+      strokeColors: [baseColor],
+      strokeWidth: 3,
+    },
+  };
+}

package/_metronic/partials/content/widgets/stats/stats-widget1/stats-widget1.component.html

@@ -0,0 +1,12 @@
+<div class="card-body">
+  <a href="#" class="card-title fw-bolder text-muted text-hover-primary fs-4">
+    {{ title }}
+  </a>
+
+  <div class="fw-bolder text-primary my-6">{{ time }}</div>
+
+  <p class="text-gray-900-75 fw-bold fs-5 m-0">
+    Create a headline that is informative<br />and will capture readers
+    <ng-content select="description"></ng-content>
+  </p>
+</div>

package/_metronic/partials/content/widgets/stats/stats-widget1/stats-widget1.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-stats-widget1',
+  templateUrl: './stats-widget1.component.html',
+})
+export class StatsWidget1Component {
+  @Input() title = '';
+  @Input() time = '';
+  @Input() description = '';
+
+  constructor() {}
+}

package/_metronic/partials/content/widgets/stats/stats-widget2/stats-widget2.component.html

@@ -0,0 +1,13 @@
+<div class="card-body d-flex align-items-center pt-3 pb-0">
+  <div class="d-flex flex-column flex-grow-1 py-2 py-lg-13 me-2">
+    <a href="#" class="fw-bolder text-gray-900 fs-4 mb-2 text-hover-primary">
+      {{ title }}
+    </a>
+
+    <span class="fw-bold text-muted fs-5">
+      <ng-content select="description"></ng-content>
+    </span>
+  </div>
+
+  <img [src]="avatar" alt="" class="align-self-end h-100px" />
+</div>

package/_metronic/partials/content/widgets/stats/stats-widget2/stats-widget2.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-stats-widget2',
+  templateUrl: './stats-widget2.component.html',
+})
+export class StatsWidget2Component {
+  @Input() title = '';
+  @Input() time = '';
+  @Input() description = '';
+  @Input() avatar = '';
+
+  constructor() {}
+}