@soyfri/template 1.0.0

package/dist/partials/widgets/mixed/MixedWidget13.js

@@ -0,0 +1,204 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget13 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var _utils_1 = require("../../../assets/ts/_utils");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var MixedWidget13 = function (_a) {
+    var className = _a.className, backGroundColor = _a.backGroundColor, chartHeight = _a.chartHeight;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chartRef, mode]);
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var chart = new apexcharts_1.default(chartRef.current, chartOptions(chartHeight));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    return (react_1.default.createElement("div", { className: "card ".concat(className, " theme-dark-bg-body"), style: { backgroundColor: backGroundColor } },
+        react_1.default.createElement("div", { className: 'card-body d-flex flex-column' },
+            react_1.default.createElement("div", { className: 'd-flex flex-column flex-grow-1' },
+                react_1.default.createElement("a", { href: '#', className: 'text-gray-900 text-hover-primary fw-bolder fs-3' }, "Earnings"),
+                react_1.default.createElement("div", { ref: chartRef, className: 'mixed-widget-13-chart', style: { height: chartHeight, minHeight: chartHeight } })),
+            react_1.default.createElement("div", { className: 'pt-5' },
+                react_1.default.createElement("span", { className: 'text-gray-900 fw-bolder fs-2x lh-0' }, "$"),
+                react_1.default.createElement("span", { className: 'text-gray-900 fw-bolder fs-3x me-2 lh-0' }, "560"),
+                react_1.default.createElement("span", { className: 'text-gray-900 fw-bolder fs-6 lh-0' }, "+ 28% this week")))));
+};
+exports.MixedWidget13 = MixedWidget13;
+var chartOptions = function (chartHeight) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-800');
+    var strokeColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-300');
+    return {
+        series: [
+            {
+                name: 'Net Profit',
+                data: [15, 25, 15, 40, 20, 50],
+            },
+        ],
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            },
+        },
+        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: 'gradient',
+            gradient: {
+                opacityFrom: 0.4,
+                opacityTo: 0,
+                stops: [20, 120, 120, 120],
+            },
+        },
+        stroke: {
+            curve: 'smooth',
+            show: true,
+            width: 3,
+            colors: ['#FFFFFF'],
+        },
+        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: 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) {
+                    return '$' + val + ' thousands';
+                },
+            },
+        },
+        colors: ['#ffffff'],
+        markers: {
+            colors: [labelColor],
+            strokeColors: [strokeColor],
+            strokeWidth: 3,
+        },
+    };
+};

package/dist/partials/widgets/mixed/MixedWidget14.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    chartHeight: string;
+    backGroundColor: string;
+};
+declare const MixedWidget14: FC<Props>;
+export { MixedWidget14 };

package/dist/partials/widgets/mixed/MixedWidget14.js

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget14 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var MixedWidget14 = function (_a) {
+    var className = _a.className, backGroundColor = _a.backGroundColor, _b = _a.chartHeight, chartHeight = _b === void 0 ? '150px' : _b;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var chart = new apexcharts_1.default(chartRef.current, chartOptions(chartHeight));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className, " theme-dark-bg-body"), style: { backgroundColor: backGroundColor } },
+        react_1.default.createElement("div", { className: 'card-body d-flex flex-column' },
+            react_1.default.createElement("div", { className: 'd-flex flex-column flex-grow-1' },
+                react_1.default.createElement("a", { href: '#', className: 'text-gray-900 text-hover-primary fw-bolder fs-3' }, "Contributors"),
+                react_1.default.createElement("div", { ref: chartRef, className: 'mixed-widget-14-chart', style: { height: chartHeight, minHeight: chartHeight } })),
+            react_1.default.createElement("div", { className: 'pt-5' },
+                react_1.default.createElement("span", { className: 'text-gray-900 fw-bolder fs-2x lh-0' }, "$"),
+                react_1.default.createElement("span", { className: 'text-gray-900 fw-bolder fs-3x me-2 lh-0' }, "47"),
+                react_1.default.createElement("span", { className: 'text-gray-900 fw-bolder fs-6 lh-0' }, "- 12% this week")))));
+};
+exports.MixedWidget14 = MixedWidget14;
+var chartOptions = function (chartHeight) {
+    // const labelColor = getCSSVariableValue('--bs-gray-800')
+    return {
+        series: [
+            {
+                name: 'Inflation',
+                data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1],
+            },
+        ],
+        chart: {
+            fontFamily: 'inherit',
+            height: chartHeight,
+            type: 'bar',
+            toolbar: {
+                show: false,
+            },
+        },
+        grid: {
+            show: false,
+            padding: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            },
+        },
+        colors: ['#ffffff'],
+        plotOptions: {
+            bar: {
+                borderRadius: 2.5,
+                dataLabels: {
+                    position: 'top', // top, center, bottom
+                },
+                columnWidth: '20%',
+            },
+        },
+        dataLabels: {
+            enabled: false,
+            formatter: function (val) {
+                return val + '%';
+            },
+            offsetY: -20,
+            style: {
+                fontSize: '12px',
+                colors: ['#304758'],
+            },
+        },
+        xaxis: {
+            labels: {
+                show: false,
+            },
+            categories: [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sep',
+                'Oct',
+                'Nov',
+                'Dec',
+                'Jan',
+                'Feb',
+                'Mar',
+            ],
+            position: 'top',
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            crosshairs: {
+                show: false,
+            },
+            tooltip: {
+                enabled: false,
+            },
+        },
+        yaxis: {
+            show: false,
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+                // background: labelColor,
+            },
+            labels: {
+                show: false,
+                formatter: function (val) {
+                    return val + '%';
+                },
+            },
+        },
+    };
+};

package/dist/partials/widgets/mixed/MixedWidget15.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    backGroundColor: string;
+};
+declare const MixedWidget15: FC<Props>;
+export { MixedWidget15 };

package/dist/partials/widgets/mixed/MixedWidget15.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget15 = void 0;
+var react_1 = __importDefault(require("react"));
+var helpers_1 = require("../../../helpers");
+var MixedWidget15 = function (_a) {
+    var className = _a.className, backGroundColor = _a.backGroundColor;
+    return (react_1.default.createElement("div", { className: "card ".concat(className, " theme-dark-bg-body"), style: { backgroundColor: backGroundColor } },
+        react_1.default.createElement("div", { className: 'card-body d-flex flex-column' },
+            react_1.default.createElement("div", { className: 'd-flex flex-column mb-7' },
+                react_1.default.createElement("a", { href: '#', className: 'text-gray-900 text-hover-primary fw-bolder fs-3' }, "Summary")),
+            react_1.default.createElement("div", { className: 'row g-0' },
+                react_1.default.createElement("div", { className: 'col-6' },
+                    react_1.default.createElement("div", { className: 'd-flex align-items-center mb-9 me-2' },
+                        react_1.default.createElement("div", { className: 'symbol symbol-40px me-3' },
+                            react_1.default.createElement("div", { className: 'symbol-label bg-body bg-opacity-50' },
+                                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'abstract-42', className: 'fs-1 text-gray-900' }))),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: 'fs-5 text-gray-900 fw-bolder lh-1' }, "$50K"),
+                            react_1.default.createElement("div", { className: 'fs-7 text-gray-600 fw-bold' }, "Sales")))),
+                react_1.default.createElement("div", { className: 'col-6' },
+                    react_1.default.createElement("div", { className: 'd-flex align-items-center mb-9 ms-2' },
+                        react_1.default.createElement("div", { className: 'symbol symbol-40px me-3' },
+                            react_1.default.createElement("div", { className: 'symbol-label bg-body bg-opacity-50' },
+                                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'abstract-45', className: 'fs-1 text-gray-900' }))),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: 'fs-5 text-gray-900 fw-bolder lh-1' }, "$4,5K"),
+                            react_1.default.createElement("div", { className: 'fs-7 text-gray-600 fw-bold' }, "Revenue")))),
+                react_1.default.createElement("div", { className: 'col-6' },
+                    react_1.default.createElement("div", { className: 'd-flex align-items-center me-2' },
+                        react_1.default.createElement("div", { className: 'symbol symbol-40px me-3' },
+                            react_1.default.createElement("div", { className: 'symbol-label bg-body bg-opacity-50' },
+                                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'abstract-21', className: 'fs-1 text-gray-900' }))),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: 'fs-5 text-gray-900 fw-bolder lh-1' }, "40"),
+                            react_1.default.createElement("div", { className: 'fs-7 text-gray-600 fw-bold' }, "Tasks")))),
+                react_1.default.createElement("div", { className: 'col-6' },
+                    react_1.default.createElement("div", { className: 'd-flex align-items-center ms-2' },
+                        react_1.default.createElement("div", { className: 'symbol symbol-40px me-3' },
+                            react_1.default.createElement("div", { className: 'symbol-label bg-body bg-opacity-50' },
+                                react_1.default.createElement(helpers_1.KTIcon, { iconName: 'abstract-44', className: 'fs-1 text-gray-900' }))),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: 'fs-5 text-gray-900 fw-bolder lh-1' }, "$5.8M"),
+                            react_1.default.createElement("div", { className: 'fs-7 text-gray-600 fw-bold' }, "Sales"))))))));
+};
+exports.MixedWidget15 = MixedWidget15;

package/dist/partials/widgets/mixed/MixedWidget2.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    chartColor: string;
+    strokeColor: string;
+    chartHeight: string;
+};
+declare const MixedWidget2: FC<Props>;
+export { MixedWidget2 };

package/dist/partials/widgets/mixed/MixedWidget2.js

@@ -0,0 +1,213 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedWidget2 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var helpers_1 = require("../../../helpers");
+var _utils_1 = require("../../../assets/ts/_utils");
+var Dropdown1_1 = require("../../content/dropdown/Dropdown1");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var MixedWidget2 = function (_a) {
+    var className = _a.className, chartColor = _a.chartColor, chartHeight = _a.chartHeight, strokeColor = _a.strokeColor;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var chart = new apexcharts_1.default(chartRef.current, chartOptions(chartHeight, chartColor, strokeColor));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: "card-header border-0 py-5 bg-".concat(chartColor) },
+            react_1.default.createElement("h3", { className: 'card-title fw-bold text-white' }, "Sales Statistics"),
+            react_1.default.createElement("div", { className: 'card-toolbar' },
+                react_1.default.createElement("button", { type: 'button', className: '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' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'category', className: 'fs-2' })),
+                react_1.default.createElement(Dropdown1_1.Dropdown1, null))),
+        react_1.default.createElement("div", { className: 'card-body p-0' },
+            react_1.default.createElement("div", { ref: chartRef, className: "mixed-widget-2-chart card-rounded-bottom bg-".concat(chartColor) }),
+            react_1.default.createElement("div", { className: 'card-p mt-n20 position-relative' },
+                react_1.default.createElement("div", { className: 'row g-0' },
+                    react_1.default.createElement("div", { className: 'col bg-light-warning px-6 py-8 rounded-2 me-7 mb-7' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'chart-simple', className: 'fs-3x text-warning d-block my-2' }),
+                        react_1.default.createElement("a", { href: '#', className: 'text-warning fw-semibold fs-6' }, "Weekly Sales")),
+                    react_1.default.createElement("div", { className: 'col bg-light-primary px-6 py-8 rounded-2 mb-7' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'plus', className: 'fs-3x text-primary d-block my-2' }),
+                        react_1.default.createElement("a", { href: '#', className: 'text-primary fw-semibold fs-6' }, "New Users"))),
+                react_1.default.createElement("div", { className: 'row g-0' },
+                    react_1.default.createElement("div", { className: 'col bg-light-danger px-6 py-8 rounded-2 me-7' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'abstract-26', className: 'fs-3x text-danger d-block my-2' }),
+                        react_1.default.createElement("a", { href: '#', className: 'text-danger fw-semibold fs-6 mt-2' }, "Item Orders")),
+                    react_1.default.createElement("div", { className: 'col bg-light-success px-6 py-8 rounded-2' },
+                        react_1.default.createElement(helpers_1.KTIcon, { iconName: 'sms', className: 'fs-3x text-success d-block my-2' }),
+                        react_1.default.createElement("a", { href: '#', className: 'text-success fw-semibold fs-6 mt-2' }, "Bug Reports")))))));
+};
+exports.MixedWidget2 = MixedWidget2;
+var chartOptions = function (chartHeight, chartColor, strokeColor) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-500');
+    var borderColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-200');
+    var color = (0, _utils_1.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) {
+                    return '$' + val + ' thousands';
+                },
+            },
+            marker: {
+                show: false,
+            },
+        },
+        colors: ['transparent'],
+        markers: {
+            colors: [color],
+            strokeColors: [strokeColor],
+            strokeWidth: 3,
+        },
+    };
+};

package/dist/partials/widgets/mixed/MixedWidget3.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    chartColor: string;
+    chartHeight: string;
+};
+declare const MixedWidget3: FC<Props>;
+export { MixedWidget3 };