@hitsoft/e-donusum 1.0.5

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

@@ -0,0 +1,40 @@
+<div
+  class="
+    card-body
+    p-0
+    d-flex
+    justify-content-between
+    flex-column
+    overflow-hidden
+  "
+>
+  <div class="d-flex flex-stack flex-wrap flex-grow-1 px-9 pt-9 pb-3">
+    <div class="me-2">
+      <span class="fw-bolder text-gray-800 d-block fs-3">Sales</span>
+
+      <span class="text-gray-500 fw-bold">Oct 8 - Oct 26 2021</span>
+    </div>
+
+    <div class="fw-bolder fs-3" [ngClass]="'fs-3 text-' + chartColor">
+      $15,300
+    </div>
+  </div>
+
+  <div #chartRef class="mixed-widget-10-chart" [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>
+</div>

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

@@ -0,0 +1,133 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget11',
+  templateUrl: './mixed-widget11.component.html',
+})
+export class MixedWidget11Component 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-500');
+  const borderColor = getCSSVariableValue('--bs-gray-200');
+  const secondaryColor = getCSSVariableValue('--bs-gray-300');
+  const baseColor = getCSSVariableValue('--bs-' + chartColor);
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [50, 60, 70, 80, 60, 50, 70, 60],
+      },
+      {
+        name: 'Revenue',
+        data: [50, 60, 70, 80, 60, 50, 70, 60],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'bar',
+      height: chartHeight,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '50%',
+        borderRadius: 5,
+      },
+    },
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    fill: {
+      type: 'solid',
+    },
+    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 + ' revenue';
+        },
+      },
+    },
+    colors: [baseColor, secondaryColor],
+    grid: {
+      padding: {
+        top: 10,
+      },
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,84 @@
+<div class="card-header border-0 py-5" [ngClass]="'bg-' + chartColor">
+  <h3 class="card-title fw-bolder text-white">Sales Statistics</h3>
+  <div class="card-toolbar">
+    <!-- begin::Menu -->
+    <button
+      type="button"
+      class="
+        btn btn-sm btn-icon btn-color-white btn-active-white btn-active-color-
+        border-0
+        me-n3
+      "
+      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">
+  <!-- begin::Chart -->
+  <div
+    #chartRef
+    class="mixed-widget-2-chart card-rounded-bottom"
+    [ngClass]="'bg-' + chartColor"
+  >
+    <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::Stats -->
+  <div class="card-p mt-n20 position-relative">
+    <!-- begin::Row -->
+    <div class="row g-0">
+      <!-- begin::Col -->
+      <div class="col bg-light-warning px-6 py-8 rounded-2 me-7 mb-7">
+        <app-keenicon name="chart-simple" class="fs-3x text-warning d-block my-2"></app-keenicon>
+        <a href="#" class="text-warning fw-bold fs-6"> Weekly Sales </a>
+      </div>
+      <!-- end::Col -->
+      <!-- begin::Col -->
+      <div class="col bg-light-primary px-6 py-8 rounded-2 mb-7">
+        <app-keenicon name="briefcase" class="fs-3x text-primary d-block my-2"></app-keenicon>
+        <a href="#" class="text-primary fw-bold fs-6"> New Projects </a>
+      </div>
+      <!-- end::Col -->
+    </div>
+    <!-- end::Row -->
+    <!-- begin::Row -->
+    <div class="row g-0">
+      <!-- begin::Col -->
+      <div class="col bg-light-danger px-6 py-8 rounded-2 me-7">
+        <app-keenicon name="abstract-26" class="fs-3x text-danger d-block my-2"></app-keenicon>
+        <a href="#" class="text-danger fw-bold fs-6 mt-2"> Item Orders </a>
+      </div>
+      <!-- end::Col -->
+      <!-- begin::Col -->
+      <div class="col bg-light-success px-6 py-8 rounded-2">
+        <app-keenicon name="sms" class="fs-3x text-success d-block my-2"></app-keenicon>
+        <a href="#" class="text-success fw-bold fs-6 mt-2"> Bug Reports </a>
+      </div>
+      <!-- end::Col -->
+    </div>
+    <!-- end::Row -->
+  </div>
+  <!-- end::Stats -->
+</div>

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

@@ -0,0 +1,157 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget2',
+  templateUrl: './mixed-widget2.component.html',
+})
+export class MixedWidget2Component implements OnInit {
+  @Input() chartColor: string = '';
+  @Input() strokeColor: string = '';
+  @Input() chartHeight: string = '';
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(
+      this.chartHeight,
+      this.chartColor,
+      this.strokeColor
+    );
+  }
+}
+
+function getChartOptions(
+  chartHeight: string,
+  chartColor: string,
+  strokeColor: string
+) {
+  const labelColor = getCSSVariableValue('--bs-gray-500');
+  const borderColor = getCSSVariableValue('--bs-gray-200');
+  const color = getCSSVariableValue('--bs-' + chartColor);
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [30, 45, 32, 70, 40, 40, 40],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'area',
+      height: chartHeight,
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false,
+      },
+      sparkline: {
+        enabled: true,
+      },
+      dropShadow: {
+        enabled: true,
+        enabledOnSeries: undefined,
+        top: 5,
+        left: 0,
+        blur: 3,
+        color: strokeColor,
+        opacity: 0.5,
+      },
+    },
+    plotOptions: {},
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      type: 'solid',
+      opacity: 0,
+    },
+    stroke: {
+      curve: 'smooth',
+      show: true,
+      width: 3,
+      colors: [strokeColor],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        show: false,
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+      crosshairs: {
+        show: false,
+        position: 'front',
+        stroke: {
+          color: borderColor,
+          width: 1,
+          dashArray: 3,
+        },
+      },
+    },
+    yaxis: {
+      min: 0,
+      max: 80,
+      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';
+        },
+      },
+      marker: {
+        show: false,
+      },
+    },
+    colors: ['transparent'],
+    markers: {
+      colors: [color],
+      strokeColors: [strokeColor],
+      strokeWidth: 3,
+    },
+  };
+}

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

@@ -0,0 +1,92 @@
+<div class="card-header border-0" [ngClass]="'bg-' + chartColor">
+  <h3 class="card-title fw-bolder text-white">Sales Progress</h3>
+
+  <div class="card-toolbar">
+    <!-- begin::Menu  -->
+    <button
+      type="button"
+      class="
+        btn btn-sm btn-icon btn-color-white btn-active-white
+        border-0
+        me-n3
+      "
+      [ngClass]="'btn-active-color-' + chartColor"
+      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">
+  <!-- begin::Chart  -->
+  <div
+    #chartRef
+    class="mixed-widget-12-chart card-rounded-bottom"
+    [ngClass]="'bg-' + chartColor"
+    [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::Stats  -->
+  <div class="card-rounded bg-body mt-n10 position-relative card-px py-15">
+    <!-- begin::Row  -->
+    <div class="row g-0 mb-7">
+      <!-- begin::Col  -->
+      <div class="col mx-5">
+        <div class="fs-6 text-gray-500">Avarage Sale</div>
+        <div class="fs-2 fw-bolder text-gray-800">$650</div>
+      </div>
+      <!-- end::Col  -->
+
+      <!-- begin::Col  -->
+      <div class="col mx-5">
+        <div class="fs-6 text-gray-500">Comissions</div>
+        <div class="fs-2 fw-bolder text-gray-800">$29,500</div>
+      </div>
+      <!-- end::Col  -->
+    </div>
+    <!-- end::Row  -->
+
+    <!-- begin::Row  -->
+    <div class="row g-0">
+      <!-- begin::Col  -->
+      <div class="col mx-5">
+        <div class="fs-6 text-gray-500">Revenue</div>
+        <div class="fs-2 fw-bolder text-gray-800">$55,000</div>
+      </div>
+      <!-- end::Col  -->
+
+      <!-- begin::Col  -->
+      <div class="col mx-5">
+        <div class="fs-6 text-gray-500">Expenses</div>
+        <div class="fs-2 fw-bolder text-gray-800">$1,130,600</div>
+      </div>
+      <!-- end::Col  -->
+    </div>
+    <!-- end::Row  -->
+  </div>
+  <!-- end::Stats  -->
+</div>

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

@@ -0,0 +1,141 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+@Component({
+  selector: 'app-mixed-widget3',
+  templateUrl: './mixed-widget3.component.html',
+})
+export class MixedWidget3Component implements OnInit {
+  @Input() chartColor: string = '';
+  @Input() chartHeight: string;
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(this.chartHeight);
+  }
+}
+
+function getChartOptions(chartHeight: string) {
+  const labelColor = getCSSVariableValue('--bs-gray-500');
+  const borderColor = getCSSVariableValue('--bs-gray-200');
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [35, 65, 75, 55, 45, 60, 55],
+      },
+      {
+        name: 'Revenue',
+        data: [40, 70, 80, 60, 50, 65, 60],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'bar',
+      height: chartHeight,
+      toolbar: {
+        show: false,
+      },
+      sparkline: {
+        enabled: true,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '30%',
+        borderRadius: 5,
+      },
+    },
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 1,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    yaxis: {
+      min: 0,
+      max: 100,
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    fill: {
+      type: ['solid', 'solid'],
+      opacity: [0.25, 1],
+    },
+    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';
+        },
+      },
+      marker: {
+        show: false,
+      },
+    },
+    colors: ['#ffffff', '#ffffff'],
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+      padding: {
+        left: 20,
+        right: 20,
+      },
+    },
+  };
+}