@hitsoft/e-donusum 1.0.7 → 1.0.9

package/_metronic/partials/content/widgets/base-tables/base-tables-widget6/base-tables-widget6.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-base-tables-widget6',
+  templateUrl: './base-tables-widget6.component.html',
+})
+export class BaseTablesWidget6Component implements OnInit {
+  TABS: string[] = ['Month', 'Week', 'Day'];
+  currentTab: string;
+  @Input() cssClass: string;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.currentTab = this.TABS[2];
+  }
+
+  setCurrentTab(tab: string) {
+    this.currentTab = tab;
+  }
+}

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

@@ -0,0 +1,51 @@
+<div class="card-header border-0 pt-5">
+  <!-- begin::Title-->
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Recent Statistics</span>
+
+    <span class="text-muted fw-bold fs-7">More than 400 new members</span>
+  </h3>
+  <!-- end::Title-->
+
+  <!-- begin::Toolbar-->
+  <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>
+  <!-- end::Toolbar-->
+</div>
+<!-- end::Header-->
+
+<!-- begin::Body-->
+<div class="card-body">
+  <!-- begin::Chart-->
+  <div #chartRef id="kt_charts_widget_1_chart" [style.height]="'350px'">
+    <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>

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

@@ -0,0 +1,128 @@
+import { Component, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+
+@Component({
+  selector: 'app-charts-widget1',
+  templateUrl: './charts-widget1.component.html',
+})
+export class ChartsWidget1Component implements OnInit {
+  chartOptions: any = {};
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(350);
+  }
+}
+
+function getChartOptions(height: number) {
+  const labelColor = getCSSVariableValue('--bs-gray-500')
+  const borderColor = getCSSVariableValue('--bs-gray-200')
+  const baseColor = getCSSVariableValue('--bs-primary')
+  const secondaryColor = getCSSVariableValue('--bs-gray-300')
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [44, 55, 57, 56, 61, 58],
+      },
+      {
+        name: 'Revenue',
+        data: [76, 85, 101, 98, 87, 105],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'bar',
+      height: height,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '30%',
+        borderRadius: 5,
+      },
+    },
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    fill: {
+      opacity: 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';
+        },
+      },
+    },
+    colors: [baseColor, secondaryColor],
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,62 @@
+<div class="card-header border-0 pt-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Recent Orders</span>
+
+    <span class="text-muted fw-bold fs-7">More than 500 new orders</span>
+  </h3>
+
+  <!-- begin::Toolbar -->
+  <div class="card-toolbar" data-kt-buttons="true">
+    <a
+      class="
+        btn btn-sm btn-color-muted btn-active btn-active-primary
+        active
+        px-4
+        me-1
+      "
+      id="kt_charts_widget_2_year_btn"
+    >
+      Year
+    </a>
+
+    <a
+      class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1"
+      id="kt_charts_widget_2_month_btn"
+    >
+      Month
+    </a>
+
+    <a
+      class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4"
+      id="kt_charts_widget_2_week_btn"
+    >
+      Week
+    </a>
+  </div>
+  <!-- end::Toolbar -->
+</div>
+<!-- end::Header -->
+
+<!-- begin::Body -->
+<div class="card-body">
+  <!-- begin::Chart -->
+  <div #chartRef id="kt_charts_widget_2_chart" [style.height]="'350px'">
+    <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/charts/charts-widget2/charts-widget2.component.ts

@@ -0,0 +1,129 @@
+import { Component, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+
+@Component({
+  selector: 'app-charts-widget2',
+  templateUrl: './charts-widget2.component.html',
+})
+export class ChartsWidget2Component implements OnInit {
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(350);
+  }
+}
+
+function getChartOptions(height: number) {
+  const labelColor = getCSSVariableValue('--bs-gray-500');
+  const borderColor = getCSSVariableValue('--bs-gray-200');
+  const baseColor = getCSSVariableValue('--bs-warning');
+  const secondaryColor = getCSSVariableValue('--bs-gray-300');
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [44, 55, 57, 56, 61, 58],
+      },
+      {
+        name: 'Revenue',
+        data: [76, 85, 101, 98, 87, 105],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'bar',
+      height: height,
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '30%',
+        borderRadius: 5,
+      },
+    },
+    legend: {
+      show: false,
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+    },
+    fill: {
+      opacity: 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';
+        },
+      },
+    },
+    colors: [baseColor, secondaryColor],
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+  };
+}

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

@@ -0,0 +1,63 @@
+<!-- begin::Header -->
+<div class="card-header border-0 pt-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Recent Transactions</span>
+
+    <span class="text-muted fw-bold fs-7">More than 1000 new records</span>
+  </h3>
+
+  <!-- begin::Toolbar -->
+  <div class="card-toolbar" data-kt-buttons="true">
+    <a
+      class="
+        btn btn-sm btn-color-muted btn-active btn-active-primary
+        active
+        px-4
+        me-1
+      "
+      id="kt_charts_widget_3_year_btn"
+    >
+      Year
+    </a>
+
+    <a
+      class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1"
+      id="kt_charts_widget_3_month_btn"
+    >
+      Month
+    </a>
+
+    <a
+      class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4"
+      id="kt_charts_widget_3_week_btn"
+    >
+      Week
+    </a>
+  </div>
+  <!-- end::Toolbar -->
+</div>
+<!-- end::Header -->
+
+<!-- begin::Body -->
+<div class="card-body">
+  <!-- begin::Chart -->
+  <div #chartRef id="kt_charts_widget_3_chart" [style.height]="'350px'">
+    <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/charts/charts-widget3/charts-widget3.component.ts

@@ -0,0 +1,141 @@
+import { Component, OnInit } from '@angular/core';
+import { getCSSVariableValue } from '../../../../../kt/_utils';
+
+@Component({
+  selector: 'app-charts-widget3',
+  templateUrl: './charts-widget3.component.html',
+})
+export class ChartsWidget3Component implements OnInit {
+  chartOptions: any = {};
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.chartOptions = getChartOptions(350);
+  }
+}
+
+function getChartOptions(height: number) {
+  const labelColor = getCSSVariableValue('--bs-gray-500');
+  const borderColor = getCSSVariableValue('--bs-gray-200');
+  const baseColor = getCSSVariableValue('--bs-info');
+  const lightColor = getCSSVariableValue('--bs-info-light');
+
+  return {
+    series: [
+      {
+        name: 'Net Profit',
+        data: [30, 40, 40, 90, 90, 70, 70],
+      },
+    ],
+    chart: {
+      fontFamily: 'inherit',
+      type: 'area',
+      height: 350,
+      toolbar: {
+        show: false,
+      },
+    },
+    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', 'Aug'],
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: '12px',
+        },
+      },
+      crosshairs: {
+        position: 'front',
+        stroke: {
+          color: baseColor,
+          width: 1,
+          dashArray: 3,
+        },
+      },
+      tooltip: {
+        enabled: true,
+        formatter: undefined,
+        offsetY: 0,
+        style: {
+          fontSize: '12px',
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        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],
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 4,
+      yaxis: {
+        lines: {
+          show: true,
+        },
+      },
+    },
+    markers: {
+      strokeColors: baseColor,
+      strokeWidth: 3,
+    },
+  };
+}

package/_metronic/partials/content/widgets/charts/charts-widget4/charts-widget4.component.html

@@ -0,0 +1,55 @@
+<div class="card-header border-0 pt-5">
+  <h3 class="card-title align-items-start flex-column">
+    <span class="card-label fw-bolder fs-3 mb-1">Recent Customers</span>
+
+    <span class="text-muted fw-bold fs-7">More than 500 new customers</span>
+  </h3>
+
+  <div class="card-toolbar" data-kt-buttons="true">
+    <a
+      class="
+        btn btn-sm btn-color-muted btn-active btn-active-primary
+        active
+        px-4
+        me-1
+      "
+      id="kt_charts_widget_4_year_btn"
+    >
+      Year
+    </a>
+
+    <a
+      class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1"
+      id="kt_charts_widget_4_month_btn"
+    >
+      Month
+    </a>
+
+    <a
+      class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4"
+      id="kt_charts_widget_4_week_btn"
+    >
+      Week
+    </a>
+  </div>
+</div>
+
+<div class="card-body">
+  <div #chartRef id="kt_charts_widget_4_chart" [style.height]="'350px'">
+    <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>