Skip to content

GitLab

Commit fb8995ec authored by Sarun Mungthanya's avatar Sarun Mungthanya
Browse files

main

parents
Hide whitespace changes
Inline Side-by-side
resources/css/pages.css 0 → 100644
View file @ fb8995ec
/* The-Todo App */
.todo-app .sortable-ghost {
@apply rounded-lg bg-slate-100 ring-4 ring-slate-100 dark:bg-navy-500 dark:ring-navy-500;
}
/* Kanban App */
.kanban-app .sortable-ghost {
@apply rounded-lg bg-slate-100 dark:bg-navy-500;
}
.kanban-app .board-draggable-handler {
cursor: grab;
}
@supports selector(::-webkit-scrollbar) {
.kanban-scrollbar::-webkit-scrollbar {
@apply h-2.5;
}
.kanban-scrollbar::-webkit-scrollbar-thumb{
@apply rounded-full bg-slate-400/80 dark:bg-navy-400;
}
.kanban-scrollbar::-webkit-scrollbar-thumb:hover {
@apply bg-slate-500 dark:bg-navy-300;
}
}
@media (hover: none) and (pointer: coarse) {
.kanban-app .sortable-chosen,
.todo-app .sortable-chosen {
@apply rounded-lg bg-slate-100 dark:bg-navy-500;
}
}
/* Chat App */
.chat-header:before,
.chat-footer:before,
.chat-header:after,
.chat-footer:after {
@apply absolute h-full w-[calc(100vw-100%)] bg-inherit content-[''];
}
.chat-header:before,
.chat-footer:before {
@apply left-[calc((100vw-100%)*-1)];
}
.chat-header::after,
.chat-footer::after {
@apply right-[calc((100vw-100%)*-1)];
}
/* Course Dashboard Timeline*/
.course-schedule-chart .apexcharts-series path {
clip-path: inset(5% 5% 5% 0 round 6px);
}
/* Analitcis dashboard */
.top-sellers-analytics .apexcharts-canvas .apexcharts-heatmap-rect {
@apply text-slate-100 dark:text-navy-700;
}
resources/css/status-color.css 0 → 100644
View file @ fb8995ec
/* Pre-Arrival Status */
.bg-status-gray{
background-color: #8e8d8b;
}
.bg-status-yellow{
background-color: #dbc112;
}
.bg-status-blue{
background-color: #75b9dc;
}
.bg-status-green{
background-color: #10B981;
}
.bg-status-orange{
background-color: #ea9640;
}
.bg-status-purple{
background-color: #856ada;
}
.bg-status-darkgreen{
background-color: #4b7e33;
}
.bg-status-red{
background-color: #e83627;
}
.bg-status-darkred{
background-color: #a22f29;
}
.bg-status-brown{
background-color: #a0632a;
}
/* BORDER *//* ความโปร่งแสง 30% */
.border-bg-status-gray\/30 {
border-color: rgb(142 141 139 / 0.5);
}
.border-bg-status-yellow\/30 {
border-color: rgb(219 193 18 / 0.5);
}
.border-bg-status-blue\/30 {
border-color: rgb(117 185 220 / 0.5);
}
.border-bg-status-green\/30 {
border-color: rgb(16 185 129 / 0.5);
}
.border-bg-status-orange\/30 {
border-color: rgb(234 150 64 / 0.5);
}
.border-bg-status-purple\/30 {
border-color: rgb(133 106 218 / 0.5);
}
.border-bg-status-darkgreen\/30 {
border-color: rgb(75 126 51 / 0.5);
}
.border-bg-status-red\/30 {
border-color: rgb(232 54 39 / 0.5);
}
.border-bg-status-darkred\/30 {
border-color: rgb(162 47 41 / 0.5);
}
.border-bg-status-brown\/30 {
border-color: rgb(160 99 42 / 0.5);
}
/* .bg-primary\/10 {
background-color: rgb(56 189 248 / 0.2);
} */
/* ความโปร่งแสง 10% */
.bg-status-gray\/10{
background-color: rgb(142 141 139 / 0.2);
}
.bg-status-yellow\/10{
background-color: rgb(219 193 18 / 0.2);
}
.bg-status-blue\/10{
background-color: rgb(117 185 220 / 0.2);
}
.bg-status-green\/10{
background-color: rgb(16 185 129 / 0.2);
}
.bg-status-orange\/10{
background-color: rgb(234 150 64 / 0.2);
}
.bg-status-purple\/10{
background-color: rgb(133 106 218 / 0.2);
}
.bg-status-darkgreen\/10{
background-color: rgb(75 126 51 / 0.2);;
}
.bg-status-red\/10{
background-color: rgb(232 54 39 / 0.2);
}
.bg-status-darkred\/10{
background-color: rgb(162 47 41 / 0.2);
}
.bg-status-brown\/10{
background-color: rgb(160 99 42 / 0.2);
}
.text-bg-status-gray{
color: #8e8d8b;
}
.text-bg-status-yellow{
color: #dbc112;
}
.text-bg-status-blue{
color: #75b9dc;
}
.text-bg-status-green{
color: #10B981;
}
.text-bg-status-orange{
color: #ea9640;
}
.text-bg-status-purple{
color: #856ada;
}
.text-bg-status-darkgreen{
color: #4b7e33;
}
.text-bg-status-red{
color: #e83627;
}
.text-bg-status-darkred{
color: #a22f29;
}
.text-bg-status-brown{
color: #a0632a;
}
.hover\:bg-status-gray\/20:hover {
background-color: rgb(142 141 139 / 0.4);
}
.hover\:bg-status-yellow\/20:hover {
background-color: rgb(219 193 18 / 0.4);
}
.hover\:bg-status-blue\/20:hover {
background-color: rgb(117 185 220 / 0.4);
}
.hover\:bg-status-green\/20:hover {
background-color: rgb(16 185 129 / 0.5);
}
.hover\:bg-status-orange\/20:hover {
background-color: rgb(234 150 64 / 0.4);
}
.hover\:bg-status-purple\/20:hover {
background-color: rgb(133 106 218 / 0.4);
}
.hover\:bg-status-darkgreen\/20:hover {
background-color: rgb(75 126 51 / 0.4);;
}
.hover\:bg-status-red\/20:hover {
background-color: rgb(232 54 39 / 0.4);
}
.hover\:bg-status-darkred\/20:hover {
background-color: rgb(162 47 41 / 0.4);
}
.hover\:bg-status-brown\/20:hover {
background-color: rgb(160 99 42 / 0.4);
}
.focus\:bg-primary\/20:focus {
background-color: rgb(56 189 248 / 0.4);
}
.focus\:bg-status-gray\/20:focus {
background-color: rgb(142 141 139 / 0.4);
}
.focus\:bg-status-yellow\/20:focus {
background-color: rgb(219 193 18 / 0.4);
}
.focus\:bg-status-blue\/20:focus {
background-color: rgb(117 185 220 / 0.4);
}
.focus\:bg-status-green\/20:focus {
background-color: rgb(16 185 129 / 0.4);
}
.focus\:bg-status-orange\/20:focus {
background-color: rgb(234 150 64 / 0.4);
}
.focus\:bg-status-purple\/20:focus {
background-color: rgb(133 106 218 / 0.4);
}
.focus\:bg-status-darkgreen\/20:focus {
background-color: rgb(75 126 51 / 0.4);;
}
.focus\:bg-status-red\/20:focus {
background-color: rgb(232 54 39 / 0.4);
}
.focus\:bg-status-darkred\/20:focus {
background-color: rgb(162 47 41 / 0.4);
}
.focus\:bg-status-brown\/20:focus {
background-color: rgb(160 99 42 / 0.4);
}
.active\:bg-primary\/25:active {
background-color: rgb(56 189 248 / 0.45);
}
.active\:bg-status-gray\/25:active {
background-color: rgb(142 141 139 / 0.45);
}
.active\:bg-status-yellow\/25:active {
background-color: rgb(219 193 18 / 0.45);
}
.active\:bg-status-blue\/25:active {
background-color: rgb(117 185 220 / 0.45);
}
.active\:bg-status-green\/25:active {
background-color: rgb(16 185 129 / 0.45);
}
.active\:bg-status-orange\/25:active {
background-color: rgb(234 150 64 / 0.45);
}
.active\:bg-status-purple\/25:active {
background-color: rgb(133 106 218 / 0.45);
}
.active\:bg-status-darkgreen\/25:active {
background-color: rgb(75 126 51 / 0.45);;
}
.active\:bg-status-red\/25:active {
background-color: rgb(232 54 39 / 0.45);
}
.active\:bg-status-darkred\/25:active {
background-color: rgb(162 47 41 / 0.45);
}
.active\:bg-status-brown\/25:active {
background-color: rgb(160 99 42 / 0.45);
}
\ No newline at end of file
resources/js/app.js 0 → 100644
View file @ fb8995ec
import Alpine from "alpinejs";
import $ from 'jquery';
// AlpineJS Plugins
import persist from "@alpinejs/persist"; // @see https://alpinejs.dev/plugins/persist
import collapse from "@alpinejs/collapse"; // @see https://alpinejs.dev/plugins/collapse
import intersect from "@alpinejs/intersect"; // @see https://alpinejs.dev/plugins/intersect
// Third Party Libraries
/*
Scrollbar Library
@see https://github.com/Grsmto/simplebar
*/
import SimpleBar from "simplebar";
/*
Code highlighting library
Just for demo purpose only for highlighting code
@see https://highlightjs.org/
*/
import hljs from "highlight.js/lib/core";
import xml from "highlight.js/lib/languages/xml";
/*
Date Utility Library
@see https://day.js.org/
*/
import dayjs from "dayjs";
/*
Carousel Library
@see https://swiperjs.com/
*/
import Swiper from "swiper/bundle";
/*
Drag & Drop Library
@see https://github.com/SortableJS/Sortable
*/
import Sortable from "sortablejs";
/*
Charts Libraries
@see https://apexcharts.com/
*/
import ApexCharts from "apexcharts";
/*
Tables Libraries
@see https://gridjs.io/
*/
import * as Gridjs from "gridjs";
// Forms Libraries
import "@caneara/iodine"; // @see https://github.com/caneara/iodine
import * as FilePond from "filepond"; // @see https://pqina.nl/filepond/
import FilePondPluginImagePreview from "filepond-plugin-image-preview"; // @see https://pqina.nl/filepond/docs/api/plugins/image-preview/
import FilePondPluginFileEncode from "filepond-plugin-file-encode"; // @see https://pqina.nl/filepond/docs/api/plugins/image-preview/
import Quill from "quill/dist/quill.min"; // @see https://quilljs.com/
import flatpickr from "flatpickr"; // @see https://flatpickr.js.org/
import Tom from "tom-select/dist/js/tom-select.complete.min"; // @see https://tom-select.js.org/
// Import Fortawesome icons
import "@fortawesome/fontawesome-free/css/all.css";
// Helper Functions
import * as helpers from "./utils/helpers";
// Pages Scripts
import * as pages from "./pages";
// Global Store
import store from "./store";
// Breakpoints Store
import breakpoints from "./utils/breakpoints";
// Alpine Components
import usePopper from "./components/usePopper";
import accordionItem from "./components/accordionItem";
// Alpine Directives
import tooltip from "./directives/tooltip";
import inputMask from "./directives/inputMask";
// Alpine Magic Functions
import notification from "./magics/notification";
import clipboard from "./magics/clipboard";
// Register HTML, XML language for highlight.js
// Just for demo purpose only for highlighting code
hljs.registerLanguage("xml", xml);
hljs.configure({ ignoreUnescapedHTML: true });
// Register plugin image preview for filepond
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFileEncode);
window.hljs = hljs;
window.dayjs = dayjs;
window.SimpleBar = SimpleBar;
window.Swiper = Swiper;
window.Sortable = Sortable;
window.ApexCharts = ApexCharts;
window.Gridjs = Gridjs;
window.FilePond = FilePond;
window.flatpickr = flatpickr;
window.Quill = Quill;
window.Tom = Tom;
window.Alpine = Alpine;
window.helpers = helpers;
window.pages = pages;
window.$ = $;
Alpine.plugin(persist);
Alpine.plugin(collapse);
Alpine.plugin(intersect);
Alpine.directive("tooltip", tooltip);
Alpine.directive("input-mask", inputMask);
Alpine.magic("notification", () => notification);
Alpine.magic("clipboard", () => clipboard);
Alpine.store("breakpoints", breakpoints);
Alpine.store("global", store);
Alpine.data("usePopper", usePopper);
Alpine.data("accordionItem", accordionItem);
resources/js/bootstrap.js 0 → 100644
View file @ fb8995ec
import _ from 'lodash';
window._ = _;
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// import Pusher from 'pusher-js';
// window.Pusher = Pusher;
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// });
resources/js/components/accordionItem.js 0 → 100644
View file @ fb8995ec
export default (id) => ({
acc_id: id,
get expanded() {
return this.expandedItem === this.acc_id;
},
set expanded(val) {
this.expandedItem = val ? this.acc_id : null;
}
});
resources/js/components/usePopper.js 0 → 100644
View file @ fb8995ec
import { createPopper } from "@popperjs/core";
export default (userOptions = {}) => ({
popperInstance: null,
options: buildOptions(userOptions),
isShowPopper: false,
init() {
this.$nextTick(
() =>
(this.popperInstance = createPopper(
this.$refs.popperRef,
this.$refs.popperRoot,
this.options
))
);
this.$watch("isShowPopper", (val) => val && this.popperInstance.update());
Alpine.effect(
() => Alpine.store("breakpoints").name && (this.isShowPopper = false)
);
},
});
const buildOptions = (options) => {
const config = {
placement: options.placement ?? "auto",
strategy: options.strategy ?? "fixed",
onFirstUpdate: options.onFirstUpdate ?? function () {},
modifiers: [
{
name: "offset",
options: {
offset: [0, options.offset ?? 0],
},
},
],
};
if (options.modifiers) config.modifiers.push(...options.modifiers);
return config;
};
resources/js/directives/inputMask.js 0 → 100644
View file @ fb8995ec
import Cleave from 'cleave.js/dist/cleave.min'
export default (el, { expression}, {evaluateLater, effect}) => {
const getContent = evaluateLater(expression)
effect(() => {
getContent(content => {
if (typeof content == 'object')
el.__x_cleave = new Cleave(el, content)
else console.warn('Input mask config should be object')
})
})
}
resources/js/directives/tooltip.js 0 → 100644
View file @ fb8995ec
import tippy, { followCursor, roundArrow } from "tippy.js";
export default (el, { modifiers, expression }, { evaluateLater, effect }) => {
const getContent = evaluateLater(expression);
const options = buildOptionsFromModifiers(modifiers);
effect(() => {
getContent((content) => {
if (options.content === true) {
options.content = document
.querySelector(content)
.content.cloneNode(true);
options.allowHTML = true;
el.__x_tippy = tippy(el, options);
} else {
if (!el.__x_tippy) {
el.__x_tippy = tippy(el, options);
}
el.__x_tippy.setContent(content);
}
});
});
};
const buildOptionsFromModifiers = (modifiers) => {
const options = {
plugins: [],
arrow: roundArrow,
animation: "shift-away",
zIndex: 10003,
};
if (modifiers.includes("duration")) {
options.duration = parseInt(modifiers[modifiers.indexOf("duration") + 1]);
}
if (modifiers.includes("delay")) {
options.delay = parseInt(modifiers[modifiers.indexOf("delay") + 1]);
}
if (modifiers.includes("cursor")) {
options.plugins.push(followCursor);
const next = modifiers[modifiers.indexOf("cursor") + 1] ?? null;
if (["x", "y", "initial"].includes(next)) {
if (next === "x") options.followCursor = "horizontal";
if (next === "y") options.followCursor = "vertical";
if (next === "initial") options.followCursor = "initial";
} else {
options.followCursor = true;
}
}
if (modifiers.includes("on")) {
options.trigger = modifiers[modifiers.indexOf("on") + 1];
}
if (modifiers.includes("arrowless")) {
options.arrow = false;
}
if (modifiers.includes("interactive")) {
options.interactive = true;
}
if (modifiers.includes("border") && options.interactive) {
options.interactiveBorder = parseInt(
modifiers[modifiers.indexOf("border") + 1]
);
}
if (modifiers.includes("debounce") && options.interactive) {
options.interactiveDebounce = parseInt(
modifiers[modifiers.indexOf("debounce") + 1]
);
}
if (modifiers.includes("max-width")) {
options.maxWidth = parseInt(modifiers[modifiers.indexOf("max-width") + 1]);
}
if (modifiers.includes("placement")) {
options.placement = modifiers[modifiers.indexOf("placement") + 1];
}
if (modifiers.includes("light")) options.theme = "light";
if (modifiers.includes("primary")) options.theme = "primary";
if (modifiers.includes("secondary")) options.theme = "secondary";
if (modifiers.includes("info")) options.theme = "info";
if (modifiers.includes("success")) options.theme = "success";
if (modifiers.includes("warning")) options.theme = "warning";
if (modifiers.includes("error")) options.theme = "error";
if (modifiers.includes("sm")) options.theme = `${options.theme} is-sm`;
if (modifiers.includes("content")) {
options.theme = "content";
options.content = true;
}
return options;
};
resources/js/magics/clipboard.js 0 → 100644
View file @ fb8995ec
export default (userOptions) => {
const options = {
content: userOptions.content,
onSuccess: userOptions.success ?? function () {},
onError: userOptions.error ?? function () {},
};
if (userOptions.content === "") return;
if (typeof userOptions.content === "function") {
userOptions.content = userOptions.content();
}
navigator.clipboard.writeText(options.content).then(
function () {
options.onSuccess();
},
function (err) {
options.onError(err);
}
);
};
resources/js/magics/notification.js 0 → 100644
View file @ fb8995ec
import Toastify from "toastify-js";
export default (userOptions) => {
let [position = "right", gravity = "bottom"] = userOptions.position
? userOptions.position.split("-")
: "";
let removeTrigger = null;
const options = {
duration: userOptions.duration || 5000,
gravity,
position,
text: userOptions.text || "This is a message",
newWindow: true,
close: userOptions.hasCloseBtn || false,
backgroundColor: "",
className: userOptions.class || "",
stopOnFocus: userOptions.pauseOnHover || true,
};
if (userOptions.link) {
options.destination = userOptions.link;
}
if (userOptions.variant) {
options.className = `${options.className} ${userOptions.variant}`;
}
if (userOptions.content) {
options.node = document.querySelector(userOptions.content).content.firstElementChild.cloneNode(true);
options.className += " html";
options.close = false;
}
const toastify = Toastify(options);
toastify.showToast();
if (userOptions.content) {
removeTrigger = toastify.toastElement.querySelector(
"[data-notification-remove]"
);
if (removeTrigger) {
removeTrigger.addEventListener("click", () =>
toastify.removeElement(toastify.toastElement)
);
}
}
};
resources/js/pages/apexchartDemo.js 0 → 100644
View file @ fb8995ec
export const charts = {
// Demo charts
demoChart1: {
colors: ["#34d399", "#ffba1a"],
series: [
{
name: "Series1",
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: "Series2",
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
height: 350,
type: "area",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z",
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
legend: {
position: "top",
horizontalAlign: "left",
fontSize: "14px",
},
},
demoChart2: {
colors: ["#6366f1", "#ffba1a"],
series: [
{
name: "PRODUCT B",
data: [45, 75, 50, 70, 85, 90, 70, 62],
},
{
name: "PRODUCT A",
data: [30, 16, 27, 30, 55, 60, 48, 43],
},
],
chart: {
type: "area",
stacked: false,
height: 350,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
markers: {
size: 0,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.35,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
},
tooltip: {
shared: true,
},
legend: {
position: "top",
horizontalAlign: "right",
offsetX: -10,
},
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
},
},
demoChart3: {
colors: ["#ff9800", "#6366f1"],
series: [
{
name: "Net Profit",
data: [44, 55, 57, 56, 61, 58, 63],
},
{
name: "Revenue",
data: [76, 85, 101, 98, 87, 105, 91],
},
],
chart: {
type: "bar",
height: 350,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: "55%",
borderRadius: 5,
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
},
fill: {
opacity: 1,
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands";
},
},
},
legend: {
position: "top",
horizontalAlign: "right",
fontSize: "14px",
markers: {
radius: 12,
},
},
},
demoChart4: {
colors: ["#a855f7"],
series: [
{
name: "Sales",
data: [14, 13, 10, 9, 19, 22, 25],
},
],
chart: {
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#1E202C",
top: 18,
left: 6,
blur: 8,
opacity: 0.1,
},
},
stroke: {
width: 8,
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"1/11/2000",
"2/11/2000",
"3/11/2000",
"4/11/2000",
"5/11/2000",
"6/11/2000",
"7/11/2000",
],
tickAmount: 10,
labels: {
formatter: function (value, timestamp, opts) {
return opts.dateFormatter(new Date(timestamp), "dd MMM");
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#86efac"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 0.95,
stops: [0, 100, 0, 100],
},
},
yaxis: {
min: -10,
max: 40,
},
},
demoChart5: {
series: [
{
name: "candle",
data: [
{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33],
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11],
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65],
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24],
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47],
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31],
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02],
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02],
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01],
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02],
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91],
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612],
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612],
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95],
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67],
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4],
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9],
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45],
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35],
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53],
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19],
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620],
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620],
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61],
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58],
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86],
},
],
},
],
chart: {
height: 350,
type: "candlestick",
toolbar: {
show: false,
},
},
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
},
tooltip: {
enabled: true,
},
xaxis: {
type: "category",
labels: {
formatter: function (val) {
return dayjs(val).format("MMM DD HH:mm");
},
},
},
yaxis: {
tooltip: {
enabled: true,
},
},
},
demoChart6: {
series: [
{
name: "PRODUCT A",
data: [44, 55, 41, 67, 22, 43, 21, 49],
},
{
name: "PRODUCT B",
data: [13, 23, 20, 8, 13, 27, 33, 12],
},
{
name: "PRODUCT C",
data: [11, 17, 15, 15, 21, 14, 15, 13],
},
],
chart: {
type: "bar",
height: 350,
stacked: true,
stackType: "100%",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
borderRadius: 15,
},
},
xaxis: {
categories: [
"2011 Q1",
"2011 Q2",
"2011 Q3",
"2011 Q4",
"2012 Q1",
"2012 Q2",
"2012 Q3",
"2012 Q4",
],
},
fill: {
opacity: 1,
},
legend: {
position: "top",
horizontalAlign: "left",
fontSize: "14px",
markers: {
radius: 12,
},
},
},
demoChart7: {
series: [
{
name: "SAMPLE A",
data: [
[16.4, 5.4],
[21.7, 2],
[27.1, 2.3],
[16.4, 0],
[13.6, 3.7],
[10.9, 5.2],
[16.4, 6.5],
[10.9, 0],
[24.5, 7.1],
[10.9, 0],
[8.1, 4.7],
],
},
{
name: "SAMPLE B",
data: [
[36.4, 13.4],
[1.6, 10],
[9.9, 2],
[7.1, 15],
[1.4, 0],
[3.6, 13.7],
[1.9, 15.2],
[6.4, 16.5],
[0.9, 10],
[4.5, 17.1],
[10.9, 10],
],
},
{
name: "SAMPLE C",
data: [
[21.7, 3],
[32.6, 3],
[27.1, 4],
[29.6, 6],
[31.6, 8],
[21.6, 5],
[20.9, 4],
[22.4, 0],
[32.6, 10.3],
[29.7, 20.8],
[24.5, 0.8],
],
},
],
chart: {
height: 350,
type: "scatter",
zoom: {
enabled: true,
type: "xy",
},
toolbar: {
show: false,
},
},
xaxis: {
tickAmount: 10,
labels: {
formatter: function (val) {
return parseFloat(val).toFixed(1);
},
},
},
yaxis: {
tickAmount: 7,
},
legend: {
position: "bottom",
horizontalAlign: "left",
fontSize: "14px",
},
},
demoChart8: {
colors: ["#4ade80", "#f43f5e", "#a855f7"],
series: [44, 55, 67],
chart: {
height: 350,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
margin: 15,
size: "35%",
},
track: {
margin: 15,
},
dataLabels: {
name: {
fontSize: "22px",
},
value: {
fontSize: "16px",
},
total: {
show: true,
label: "Total",
formatter: function (w) {
return w.config.series.reduce((s, v) => s + v);
},
},
},
},
},
stroke: {
lineCap: "round",
},
labels: ["Apples", "Oranges", "Bananas"],
},
demoChart9: {
series: [
{
name: "Series 1",
data: [80, 50, 30, 40, 100, 20],
},
{
name: "Series 2",
data: [20, 30, 40, 80, 20, 80],
},
{
name: "Series 3",
data: [44, 76, 78, 13, 43, 10],
},
],
chart: {
height: 350,
type: "radar",
dropShadow: {
enabled: true,
blur: 1,
left: 1,
top: 1,
},
},
grid: {
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: false,
},
},
},
stroke: {
width: 2,
},
fill: {
opacity: 0.1,
},
markers: {
size: 0,
},
xaxis: {
categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
},
},
demoChart10: {
series: [42, 47, 52, 58, 65],
chart: {
width: 380,
type: "polarArea",
animations: {
enabled: false,
},
},
labels: ["Rose A", "Rose B", "Rose C", "Rose D", "Rose E"],
fill: {
opacity: 1,
},
stroke: {
width: 1,
colors: undefined,
},
yaxis: {
show: false,
},
legend: {
position: "bottom",
horizontalAlign: "center",
},
plotOptions: {
polarArea: {
rings: {
strokeWidth: 0,
},
spokes: {
strokeWidth: 0,
},
},
},
theme: {
monochrome: {
color: "#F000B9",
enabled: true,
shadeTo: "light",
shadeIntensity: 0.6,
},
},
},
// User Card Demo
cardUser1: {
colors: ["#6366f1"],
series: [
{
name: "Posts",
data: [48, 100, 70, 92],
},
],
chart: {
type: "area",
stacked: false,
height: 85,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: 0,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
cardUser2: {
colors: ["#F000B9"],
series: [
{
name: "Posts",
data: [54, 77, 43, 69, 12],
},
],
chart: {
type: "area",
stacked: false,
height: 85,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: 0,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
cardUser3: {
colors: ["#10B981"],
series: [
{
name: "Posts",
data: [0, 100, 0],
},
],
chart: {
type: "area",
stacked: false,
height: 85,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: 0,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
cardUser4: {
colors: ["#FF5724"],
series: [
{
name: "Posts",
data: [0, 20, 10, 30, 20, 50],
},
],
chart: {
type: "area",
stacked: false,
height: 85,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: 0,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
cardUser5: {
colors: ["#FF9800"],
series: [
{
name: "Posts",
data: [33, 77, 55, 102, 12],
},
],
chart: {
type: "area",
stacked: false,
height: 85,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: 0,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Widget Chart
dailyVisitWidget: {
colors: ["#FF5724"],
series: [
{
data: [0, 20, 10, 30, 20, 50],
},
],
chart: {
type: "line",
stacked: false,
height: 150,
parentHeightOffset: 0,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
show: false,
padding: {
left: 0,
right: 0,
},
},
stroke: {
width: 3,
curve: "smooth",
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Dashboard charts
// Interview Dashboard Chart
interview: {
colors: ["#0EA5E9"],
series: [
{
name: "Interviews",
data: [31, 40, 28, 51, 42, 61, 45],
},
],
chart: {
height: "220",
type: "area",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 2,
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19",
"2018-09-20",
"2018-09-21",
"2018-09-22",
"2018-09-23",
"2018-09-24",
"2018-09-25",
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
legend: {
show: false,
},
},
// Task Report Chart
tasksReport: {
colors: ["#81E4C0", "#FFC233", "#F000B9"],
series: [
{
name: "Completed",
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: "Blocked",
data: [48, 32, 45, 77, 86, 52, 41],
},
{
name: "Pending",
data: [75, 64, 55, 62, 34, 62, 91],
},
],
chart: {
height: 300,
type: "area",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
yaxis: {
labels: {
offsetX: -12,
offsetY: 0,
},
},
stroke: {
curve: "smooth",
width: "2",
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z",
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
legend: {
position: "top",
horizontalAlign: "left",
fontSize: "14px",
offsetX: -28,
},
},
// Task Status Chart
tasksStatus: {
colors: ["#4C4EE7", "#0EA5E9"],
series: [
{
name: "High",
data: [28, 45, 35, 50, 32, 55, 23, 60],
},
{
name: "Low",
data: [14, 25, 20, 25, 12, 20, 15, 20],
},
],
chart: {
height: 250,
type: "area",
toolbar: {
show: false,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.35,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
curve: "smooth",
},
plotOptions: {
bar: {
borderRadius: 5,
barHeight: "90%",
columnWidth: "40%",
},
},
legend: {
show: false,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
},
grid: {
padding: {
left: 10,
right: 0,
top: 0,
bottom: 0,
},
},
},
// Team Efficiency
teamefficiency: {
series: [44, 55, 66],
labels: ["Design", "Development", "Support"],
chart: {
type: "donut",
height: "200px",
},
legend: { show: false },
dataLabels: { enabled: false },
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
label: "Design",
color: undefined,
fontFamily: undefined,
formatter: function (w) {
return w.config.series[0];
},
},
},
},
},
},
theme: {
monochrome: {
color: "#5F5AF6",
enabled: true,
shadeTo: "light",
shadeIntensity: 0.65,
},
},
},
// Earning White Dashboard
earningWhite: {
colors: ["#fff"],
series: [
{
name: "Earning",
data: [0, 20, 50, 10],
},
],
chart: {
type: "line",
stacked: false,
height: 60,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
},
},
stroke: {
width: 3,
curve: "smooth",
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Income Personal Dashboard
incomePersonal: {
series: [
{
name: "Income",
data: [1765, 2357, 4215, 3971, 3841, 4221, 2374, 4212],
},
],
colors: ["#4467EF"],
chart: {
height: 250,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
borderRadius: 10,
columnWidth: "55%",
dataLabels: {
position: "top",
},
},
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val >= 1000 ? (val / 1000).toFixed(2) + "k" : val;
},
offsetY: -20,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
position: "top",
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
// Courses Timeline
courseTimeline: {
series: [
{
data: [
{
x: "Analysis",
y: [
new Date("2019-02-27").getTime(),
new Date("2019-03-04").getTime(),
],
fillColor: "#008FFB",
},
{
x: "Design",
y: [
new Date("2019-03-04").getTime(),
new Date("2019-03-09").getTime(),
],
fillColor: "#00E396",
},
{
x: "Coding",
y: [
new Date("2019-03-07").getTime(),
new Date("2019-03-10").getTime(),
],
fillColor: "#775DD0",
},
{
x: "Testing",
y: [
new Date("2019-03-08").getTime(),
new Date("2019-03-12").getTime(),
],
fillColor: "#FEB019",
},
{
x: "Deployment",
y: [
new Date("2019-03-12").getTime(),
new Date("2019-03-17").getTime(),
],
fillColor: "#FF4560",
},
],
},
],
chart: {
type: "rangeBar",
height: "200px",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
padding: {
top: -16,
bottom: 0,
},
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
dataLabels: {
hideOverflowingLabels: false,
},
},
},
dataLabels: {
enabled: false,
},
xaxis: {
type: "datetime",
},
yaxis: {
show: false,
},
},
// Blog Visitors
blogVisitors: {
colors: ["#10b981"],
series: [
{
name: "Visitors",
data: [35, 20, 45, 30, 55, 27, 45],
},
],
chart: {
type: "area",
stacked: false,
height: 150,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.35,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Blog Members
blogMembers: {
colors: ["#ff5724"],
series: [
{
name: "Members",
data: [65, 40, 60, 35, 56, 42],
},
],
chart: {
type: "area",
stacked: false,
height: 150,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.35,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Authors Statistic
blogAuthors1: {
series: [
{
name: "Posts",
data: [1765, 2357, 4215, 3971, 3841, 4221],
},
],
colors: ["#4467EF"],
chart: {
height: 85,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
padding: {
left: -18,
right: 0,
top: -30,
},
},
plotOptions: {
bar: {
borderRadius: 8,
columnWidth: "55%",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
blogAuthors2: {
series: [
{
name: "Posts",
data: [2357, 4215, 1765, 4221, 3841, 5665],
},
],
colors: ["#f000b9"],
chart: {
height: 85,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
padding: {
left: -18,
right: 0,
top: -30,
},
},
plotOptions: {
bar: {
borderRadius: 8,
columnWidth: "55%",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
blogAuthors3: {
series: [
{
name: "Posts",
data: [6153, 7020, 5659, 3422, 5439, 6081],
},
],
colors: ["#10b981"],
chart: {
height: 85,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
padding: {
left: -18,
right: 0,
top: -30,
},
},
plotOptions: {
bar: {
borderRadius: 8,
columnWidth: "55%",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
blogAuthors4: {
series: [
{
name: "Posts",
data: [1499, 2303, 2857, 1791, 2194, 1351],
},
],
colors: ["#ff5724"],
chart: {
height: 85,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
padding: {
left: -18,
right: 0,
top: -30,
},
},
plotOptions: {
bar: {
borderRadius: 8,
columnWidth: "55%",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
blogAuthors5: {
series: [
{
name: "Posts",
data: [1765, 2357, 4215, 3971, 3841, 4221],
},
],
colors: ["#4467EF"],
chart: {
height: 85,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
grid: {
padding: {
left: -18,
right: 0,
top: -30,
},
},
plotOptions: {
bar: {
borderRadius: 8,
columnWidth: "55%",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
// Teacher Working Hours
workingHours: {
colors: ["#0EA5E9"],
series: [70],
chart: {
height: 210,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
},
dataLabels: {
name: {
show: false,
},
value: {
show: true,
color: "#333",
offsetY: 10,
fontSize: "24px",
fontWeight: 600,
},
},
},
},
grid: {
show: false,
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
stroke: {
lineCap: "round",
},
},
// Doctor Patient Count
patientCount: {
colors: ["#0EA5E9", "#F000B9"],
series: [
{
name: "Man",
data: [28, 45, 35, 50, 32],
},
{
name: "Woman",
data: [14, 25, 20, 25, 12],
},
],
chart: {
height: 210,
type: "bar",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 5,
barHeight: "90%",
columnWidth: "40%",
},
},
legend: {
show: false,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: -8,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
// Employee Sales Growth
salesGrowth: {
colors: ["#FF9800"],
series: [
{
name: "Sales Growth",
data: [35, 20, 45, 30, 55, 27, 45],
},
],
chart: {
type: "area",
stacked: false,
height: 120,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: -15,
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Employee Clients Growth
clientsGrowth: {
colors: ["#10B981"],
series: [
{
name: "Clients Growth",
data: [45, 20, 55, 28, 45, 25, 65],
},
],
chart: {
type: "area",
stacked: false,
height: 120,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: -15,
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Employee Task Status
employeesTask: {
colors: ["#0EA5E9"],
series: [65],
chart: {
height: 120,
width: 120,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "60%",
},
dataLabels: {
name: {
show: false,
color: "#fff",
},
value: {
show: true,
fontSize: "18px",
offsetY: 4,
},
},
},
},
grid: {
show: false,
padding: {
left: -20,
right: -20,
top: -20,
bottom: -23,
},
},
stroke: {
lineCap: "round",
},
},
// Workspace Server Traffic
serverTraffic: {
colors: ["#4C4EE7", "#0EA5E9"],
series: [
{
name: "High",
data: [28, 45, 35, 50, 32, 55, 23, 60],
},
{
name: "Low",
data: [14, 25, 20, 25, 12, 20, 15, 20],
},
],
chart: {
height: 260,
type: "bar",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 5,
barHeight: "90%",
columnWidth: "40%",
},
},
legend: {
show: false,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: -8,
right: -8,
top: 0,
bottom: -6,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
// Workspace CPU usage
cpuUsage: {
colors: ["#0EA5E9"],
series: [76],
chart: {
height: "200px",
type: "radialBar",
sparkline: {
enabled: true,
},
},
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
dataLabels: {
name: {
show: false,
},
value: {
offsetY: -2,
fontSize: "18px",
},
},
},
},
responsive: [
{
breakpoint: 400,
options: {
chart: {
height: "160px",
},
},
},
],
grid: {
padding: {
top: 0,
right: -10,
bottom: 0,
left: -10,
},
},
labels: ["Average Results"],
},
// Workspace Storage Usage
storageUsage: {
colors: ["#4C4EE7"],
series: [45],
chart: {
height: 80,
width: 50,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "45%",
},
dataLabels: {
name: {
show: false,
},
value: {
offsetY: 5,
show: true,
fontSize: "12px",
},
},
},
},
grid: {
padding: {
top: -15,
right: 0,
bottom: -17,
left: 0,
},
},
stroke: {
lineCap: "round",
},
},
// Workspace Memory Usage
memoryUsage: {
colors: ["#0EA5E9"],
series: [45],
chart: {
height: 80,
width: 50,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "45%",
},
dataLabels: {
name: {
show: false,
color: "#fff",
},
value: {
offsetY: 5,
show: true,
fontSize: "12px",
},
},
},
},
grid: {
padding: {
top: -15,
right: 0,
bottom: -17,
left: 0,
},
},
stroke: {
lineCap: "round",
},
},
// Sales Report
salesReport: {
colors: ["#4C4EE7", "#0EA5E9"],
series: [
{
name: "Sales",
data: [28, 45, 35, 50, 32, 55, 23, 60, 28, 45, 35, 50],
},
{
name: "Profit",
data: [14, 25, 20, 25, 12, 20, 15, 20, 14, 25, 20, 25],
},
],
chart: {
height: 260,
type: "bar",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 4,
barHeight: "90%",
columnWidth: "35%",
},
},
legend: {
show: false,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
hideOverlappingLabels: false,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: -8,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
responsive: [
{
breakpoint: 850,
options: {
plotOptions: {
bar: {
columnWidth: "55%",
},
},
},
},
],
},
salesEarning: {
series: [
{
name: "Earning A",
data: [44, 55, 41, 25, 22],
},
{
name: "Earning 0",
data: [13, 23, 20, 60, 13],
},
],
grid: {
show: false,
padding: {
left: -8,
right: 0,
bottom: -8,
top: 0,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
chart: {
type: "bar",
height: 120,
toolbar: {
show: false,
},
stacked: true,
stackType: "100%",
},
dataLabels: {
enabled: false,
},
fill: {
colors: ["#0EA5E9", "#e2e8f0"],
},
plotOptions: {
bar: {
borderRadius: 2,
horizontal: false,
columnWidth: 20,
},
},
legend: {
show: false,
},
},
salesRating: {
colors: ["#10b981"],
series: [85],
chart: {
height: 80,
width: 50,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "45%",
},
dataLabels: {
name: {
show: false,
},
value: {
offsetY: 5,
show: true,
fontSize: "12px",
},
},
},
},
grid: {
padding: {
top: -15,
right: 0,
bottom: -17,
left: 0,
},
},
stroke: {
lineCap: "round",
},
},
salesCompletedOrders: {
colors: ["#4C4EE7"],
series: [45],
chart: {
height: 80,
width: 50,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
size: "45%",
},
dataLabels: {
name: {
show: false,
},
value: {
offsetY: 5,
show: true,
fontSize: "12px",
},
},
},
},
grid: {
padding: {
top: -15,
right: 0,
bottom: -17,
left: 0,
},
},
stroke: {
lineCap: "round",
},
},
salesOrders: {
colors: ["#FF9800"],
series: [
{
name: "Orders",
data: [20, 50, 30, 60, 25, 82],
},
],
chart: {
type: "area",
stacked: false,
height: 140,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -10,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
topSeller1: {
colors: ["#4467EF"],
chart: {
height: 100,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Income",
data: [20, 420, 102, 540, 275, 614],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -10,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
topSeller2: {
colors: ["#4467EF"],
chart: {
height: 100,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Income",
data: [54, 77, 43, 69, 12],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -10,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
topSeller3: {
colors: ["#4467EF"],
chart: {
height: 100,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Income",
data: [0, 20, 10, 30, 20, 50],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -10,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
topSeller4: {
colors: ["#4467EF"],
chart: {
height: 100,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Income",
data: [654, 820, 102, 540, 154, 614],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -10,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
// Orders Overview
ordersOverview: {
colors: ["#4C4EE7", "#26E7A6", "#FF9800"],
series: [
{
name: "Orders",
data: [28, 45, 35, 50, 32, 55, 23, 60, 28],
},
{
name: "Completed Orders",
data: [14, 25, 20, 25, 12, 20, 15, 20, 14],
},
{
name: "Returned Orders",
data: [4, 5, 6, 5, 2, 5, 3, 6, 3],
},
],
chart: {
height: 270,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
plotOptions: {
bar: {
borderRadius: 4,
barHeight: "90%",
columnWidth: "35%",
},
},
legend: {
show: false,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
labels: {
hideOverlappingLabels: false,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
responsive: [
{
breakpoint: 850,
options: {
plotOptions: {
bar: {
columnWidth: "55%",
},
},
},
},
],
},
orderBudget: {
series: [
{
name: "Start",
data: [44, 55, 41, 25, 22, 56],
},
{
name: "End",
data: [13, 23, 20, 60, 13, 16],
},
],
grid: {
show: false,
padding: {
left: -8,
right: 0,
bottom: -12,
top: 0,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
chart: {
type: "bar",
height: 120,
parentHeightOffset: 0,
toolbar: {
show: false,
},
stacked: true,
stackType: "100%",
},
dataLabels: {
enabled: false,
},
fill: {
colors: ["#0EA5E9", "#e2e8f0"],
},
plotOptions: {
bar: {
borderRadius: 2,
horizontal: false,
columnWidth: 20,
},
},
legend: {
show: false,
},
},
orderIncome: {
colors: ["#10b981"],
series: [
{
name: "Income",
data: [20, 50, 30, 60, 33, 75],
},
],
chart: {
type: "area",
stacked: false,
height: 150,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
orderExpense: {
colors: ["#FF5724"],
series: [
{
name: "Expense",
data: [82, 25, 60, 30, 50, 20],
},
],
chart: {
type: "area",
stacked: false,
height: 150,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Banking Dashboard
historyTransactions: {
colors: ["#FF9800", "#0EA5E9"],
series: [
{
name: "High",
data: [28, 45, 35, 50, 32, 55, 23, 60],
},
{
name: "Low",
data: [14, 25, 20, 25, 12, 20, 15, 20],
},
],
chart: {
parentHeightOffset: 0,
height: 290,
type: "area",
toolbar: {
show: false,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.35,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
curve: "smooth",
},
plotOptions: {
bar: {
borderRadius: 5,
barHeight: "90%",
columnWidth: "40%",
},
},
legend: {
show: false,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
},
grid: {
padding: {
left: 10,
right: 0,
top: -10,
bottom: 0,
},
},
},
historyTransactionsLine: {
colors: ["#4C4EE7", "#0EA5E9"],
series: [
{
name: "Sales",
data: [28, 45, 35, 50, 32, 55, 23, 60, 28, 66],
},
{
name: "Profit",
data: [14, 25, 20, 25, 12, 20, 15, 20, 14, 22],
},
],
chart: {
height: 330,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {},
legend: {
show: false,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
],
labels: {
hideOverlappingLabels: false,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
stroke: {
width: 3,
},
markers: {
size: 5,
hover: {
size: 8,
},
},
grid: {
padding: {
left: 10,
right: 0,
top: -30,
bottom: -8,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
// Analytics Dashboard
analyticsSalesOverview: {
colors: ["#4C4EE7", "#0EA5E9"],
series: [
{
name: "Sales",
data: [28, 45, 35, 50, 32, 55, 23, 60, 28, 45, 35, 50],
},
{
name: "Profit",
data: [14, 25, 20, 25, 12, 20, 15, 20, 14, 25, 20, 25],
},
],
chart: {
height: 255,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 4,
barHeight: "90%",
columnWidth: "35%",
},
},
legend: {
show: false,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
hideOverlappingLabels: false,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: -10,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
responsive: [
{
breakpoint: 850,
options: {
plotOptions: {
bar: {
columnWidth: "55%",
},
},
},
},
],
},
analyticsSalesThisMonth: {
colors: ["#4467EF"],
chart: {
height: 60,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Sales",
data: [654, 820, 102, 540, 154, 614],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -10,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
analyticsBandwidth: {
colors: ["#4467EF"],
series: [
{
name: "Traffic",
data: [
8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3,
8481.85, 8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9,
8496.25, 8600.65, 8881.1, 9340.85,
],
},
],
chart: {
type: "area",
height: 220,
parentHeightOffset: 0,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 2,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: -15,
},
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Dashboard Travels
travelAnalytics: {
colors: ["#4ade80", "#f43f5e", "#a855f7"],
series: [44, 55, 67],
chart: {
height: 250,
type: "radialBar",
},
plotOptions: {
radialBar: {
hollow: {
margin: 10,
size: "35%",
},
track: {
margin: 10,
},
dataLabels: {
name: {
fontSize: "22px",
},
value: {
fontSize: "16px",
},
total: {
show: true,
label: "Total",
formatter: function (w) {
return w.config.series.reduce((s, v) => s + v);
},
},
},
},
},
grid: {
padding: {
top: -20,
bottom: -20,
right: 0,
left: 0,
},
},
stroke: {
lineCap: "round",
},
labels: ["Booked", "Cancelled", "Unconfirmed"],
},
travelExpense: {
colors: ["#0EA5E9"],
series: [
{
name: "Expense",
data: [82, 25, 60, 30, 50, 20],
},
],
chart: {
type: "area",
stacked: false,
height: 180,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
// Dashboard influencer
influencerActivity: {
colors: ["#a855f7"],
series: [
{
name: "Sales",
data: [200, 100, 300, 200, 400, 300, 500],
},
],
chart: {
height: 268,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
dropShadow: {
enabled: true,
color: "#1E202C",
top: 18,
left: 6,
blur: 8,
opacity: 0.1,
},
},
stroke: {
width: 5,
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"1/11/2000",
"2/11/2000",
"3/11/2000",
"4/11/2000",
"5/11/2000",
"6/11/2000",
"7/11/2000",
],
tickAmount: 10,
labels: {
formatter: function (value, timestamp, opts) {
return opts.dateFormatter(new Date(timestamp), "dd MMM");
},
},
},
yaxis: {
labels: {
offsetX: -12,
offsetY: 0,
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["#86efac"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 0.95,
stops: [0, 100, 0, 100],
},
},
grid: {
padding: {
left: 0,
right: 0,
},
},
},
// Dashboard Crypto
cryptoWatchlist1: {
colors: ["#F7931A"],
chart: {
height: 60,
width: 120,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Stat",
data: [20, 420, 102, 540, 275, 614],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
cryptoWatchlist2: {
colors: ["#627EEA"],
chart: {
height: 60,
width: 120,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Stat",
data: [54, 77, 43, 69, 12],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
cryptoWatchlist3: {
colors: ["#3AC5BC"],
chart: {
height: 60,
width: 120,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Stat",
data: [654, 820, 102, 540, 154, 614],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
cryptoWatchlist4: {
colors: ["#4073C3"],
chart: {
height: 60,
width: 120,
type: "line",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
series: [
{
name: "Stat",
data: [0, 20, 10, 30, 20, 50],
},
],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 3,
},
grid: {
padding: {
left: 0,
right: 0,
top: -28,
bottom: 0,
},
},
xaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
cryptoTransactions: {
colors: ["#0EA5E9", "#F000B9"],
series: [
{
name: "Income",
data: [28, 45, 35, 50, 32, 48, 31],
},
{
name: "outcome",
data: [14, 25, 20, 25, 12, 16, 12],
},
],
chart: {
height: 228,
type: "bar",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 5,
barHeight: "90%",
columnWidth: "40%",
},
},
legend: {
show: false,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: -10,
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
},
cryptoCandlestick: {
series: [
{
name: "candle",
data: [
{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33],
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11],
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65],
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24],
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47],
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31],
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02],
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02],
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01],
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02],
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91],
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612],
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612],
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95],
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67],
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4],
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9],
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45],
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35],
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53],
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19],
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620],
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620],
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61],
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58],
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86],
},
],
},
],
chart: {
height: 364,
type: "candlestick",
parentHeightOffset: 0,
toolbar: {
show: false,
},
events: {
mounted: (chart) => {
chart.windowResizeHandler();
},
},
},
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: true,
},
},
padding: {
left: -12,
right: -12,
top: -6,
bottom: 0,
},
},
tooltip: {
enabled: true,
},
xaxis: {
type: "category",
tickAmount: 10,
labels: {
formatter: function (val) {
return dayjs(val).format("HH:mm");
},
rotate: 0,
},
},
yaxis: {
tooltip: {
enabled: true,
},
labels: {
offsetX: -14,
formatter: function (val) {
return val / 1000 + "k";
},
},
},
responsive: [
{
breakpoint: 640,
options: {
xaxis: {
tickAmount: 6,
},
},
},
],
},
stockMarket1: {
colors: ["#F7931A"],
series: [
{
name: "Price",
data: [20, 50, 30, 60, 33, 75],
},
],
chart: {
type: "area",
stacked: false,
height: 100,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
stockMarket2: {
colors: ["#3AC5BC"],
series: [
{
name: "Price",
data: [654, 820, 102, 540, 154, 614],
},
],
chart: {
type: "area",
stacked: false,
height: 100,
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
padding: {
left: 0,
right: 0,
top: -20,
bottom: -8,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.45,
opacityTo: 0.1,
stops: [20, 100, 100, 100],
},
},
stroke: {
width: 2,
},
tooltip: {
shared: true,
},
legend: {
show: false,
},
yaxis: {
show: false,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
},
analyticsPagesViews: {
colors: ["#FF9800", "#4C4EE7"],
series: [
{
name: "Previous Period",
data: [14, 25, 20, 25, 12, 20, 15, 20, 14, 25, 20, 25],
},
{
name: "Current Period",
data: [28, 45, 35, 50, 32, 55, 23, 60, 28, 45, 35, 50],
},
],
chart: {
height: 280,
type: "bar",
parentHeightOffset: 0,
toolbar: {
show: false,
},
},
stroke: {
show: true,
width: 3,
colors: ["transparent"],
},
dataLabels: {
enabled: false,
},
plotOptions: {
bar: {
borderRadius: 4,
barHeight: "90%",
columnWidth: "35%",
},
},
legend: {
show: false,
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
labels: {
hideOverlappingLabels: false,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
tooltip: {
enabled: false,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: -10,
},
},
yaxis: {
show: false,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
responsive: [
{
breakpoint: 1024,
options: {
plotOptions: {
bar: {
columnWidth: "55%",
},
},
},
},
],
},
analyticsSiteOverview: {
colors: ["#0EA5E9"],
series: [
{
name: "High",
data: [28, 45, 35, 50, 32, 55, 23, 60],
},
],
chart: {
parentHeightOffset: 0,
height: 249,
type: "area",
toolbar: {
show: false,
},
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.35,
opacityTo: 0.05,
stops: [20, 100, 100, 100],
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
curve: "smooth",
},
plotOptions: {
bar: {
borderRadius: 5,
barHeight: "90%",
columnWidth: "40%",
},
},
legend: {
show: false,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
},
yaxis: {
labels: {
offsetX: -12,
offsetY: 0,
},
},
grid: {
padding: {
left: 0,
right: 0,
top: -10,
bottom: 8,
},
},
},
};
resources/js/pages/formValidationDemo.js 0 → 100644
View file @ fb8995ec
export function initFormValidationExample() {
return {
username: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required"],
},
email: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required", "email"],
},
minmax: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required", "min:5", "max:15"],
},
minmaxLength: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required", "minLength:5", "maxLength:15"],
},
url: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required", "url"],
},
instagramUsername: {
value: "",
errorMessage: "",
blurred: false,
validate: [
"required",
"regexMatch:^(?!.*\\.\\.)(?!.*\\.$)[^\\W][\\w.]{0,29}$",
],
},
startWith: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required", "startingWith:A"],
},
endWith: {
value: "",
errorMessage: "",
blurred: false,
validate: ["required", "endingWith:Z"],
},
getErrorMessage(value, rules) {
return Iodine.assert(value, rules).error;
},
};
}
\ No newline at end of file
resources/js/pages/index.js 0 → 100644
View file @ fb8995ec
export { charts } from "./apexchartDemo";
export { tomSelect } from "./tomselectDemo";
export { userSelect , fetchUsers } from "./userSelect";
export { roleSelect , fetchRoles } from "./roleSelect";
export * as tables from "./tablesDemo";
export * as formValidation from "./formValidationDemo";
export { default as initCreditCard } from "./initCreditCard";
export * as basicTable from "./utilities/basicTable";
\ No newline at end of file
resources/js/pages/initCreditCard.js 0 → 100644
View file @ fb8995ec
export default () => ({
init() {
this.$watch("cardName", (val) => {
switch (val) {
case "mastercard":
this.creditCardUI =
"bg-gradient-to-r from-green-300 via-blue-500 to-purple-600";
this.cardText = "Master Card";
this.cardLogoSrc = "/images/payments/cc-mastercard.svg";
break;
case "visa":
this.creditCardUI = "bg-gradient-to-r from-indigo-400 to-indigo-600";
this.cardLogoSrc = "/images/payments/cc-visa.svg";
this.cardText = "Visa";
break;
default:
this.creditCardUI =
"bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400";
this.cardText = "Credit Card";
this.cardLogoSrc = "";
}
});
},
cardNumber: null,
cardText: "Credit Card",
cardName: "",
cardLogoSrc: "",
nameOnCard: "",
creditCardUI: "bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400",
creditCardInput() {
let am = this;
return {
creditCard: true,
onCreditCardTypeChanged(type) {
am.cardName = type;
},
};
},
});
resources/js/pages/roleSelect.js 0 → 100644
View file @ fb8995ec
const roleSelect = {
role: {
valueField: "id",
searchField: "name",
options: [], // Initialize empty array for options
placeholder: "",
plugins: ['remove_button'],
onDelete: function (values) {
},
render: {
option: function (data, escape) {
if (!data.name) {
console.error("Invalid data for option:", data);
return "";
}
return `<div class="flex space-x-3">
<div class="flex flex-col">
<span>${escape(data.name)}</span>
</div>
</div>`;
},
item: function (data, escape) {
if (!data.name) {
console.error("Invalid data for item:", data);
return "";
}
return `<span class="badge rounded-full bg-primary dark:bg-accent text-white p-px mr-2">
<span class="mx-2">${escape(data.name)}</span>
</span>`;
},
},
},
};
const fetchRoles = (roleSelect) => {
return fetch('/get-roles')
.then(response => response.json())
.then(data => {
if (!data.roles || !Array.isArray(data.roles)) {
console.error("Invalid response format:", data);
return;
}
roleSelect.role.options = data.roles;
})
.catch(error => console.error('Error fetching role data:', error));
};
export { roleSelect, fetchRoles };
\ No newline at end of file
resources/js/pages/tablesDemo.js 0 → 100644
View file @ fb8995ec
export function initExample1() {
return {
usersData: [
{
id: "1",
avatar_url: "/images/200x200.png",
name: "John Doe",
age: "24",
phone: "443-893-2318",
role: "Superadmin",
role_bg:
"bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light",
status: true,
},
{
id: "2",
avatar_url: "/images/200x200.png",
name: "Sabina Mores",
age: "26",
phone: "442-893-2318",
role: "Author",
role_bg: "bg-info/10 text-info dark:bg-info/15",
status: false,
},
{
id: "3",
avatar_url: "/images/200x200.png",
name: "Tom Robert",
age: "34",
phone: "443-893-2318",
role: "Admin",
role_bg:
"bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light",
status: true,
},
{
id: "4",
avatar_url: "/images/200x200.png",
name: "Nolan Doe",
age: "28",
phone: "443-893-2318",
role: "Author",
role_bg: "bg-info/10 text-info dark:bg-info/15",
status: true,
},
],
allSelected: false,
userIds: [],
updateCheckAll() {
this.allSelected = this.usersData.length === this.userIds.length;
},
selectAll() {
this.userIds = [];
if (this.allSelected) {
for (user in this.usersData) {
this.userIds.push(this.usersData[user].id.toString());
}
}
},
};
}
export function initGridTableExapmle() {
return {
table: null,
config: {
columns: [
{
id: "id",
name: "ID",
formatter: (cell) => Gridjs.html(`<span class="mx-2">${cell}</span>`),
},
{
id: "name",
name: "Name",
formatter: (cell) =>
Gridjs.html(
`<span class="text-slate-700 dark:text-navy-100 font-medium">${cell}</span>`
),
},
{
id: "avatar_url",
name: "Avatar",
sort: false,
formatter: (cell) =>
Gridjs.html(`<div class="avatar flex">
<img class="rounded-full" src="${cell}" alt="avatar">
</div>`),
},
{
id: "email",
name: "Email",
},
{
id: "phone",
name: "Phone Number",
},
{
name: "Actions",
sort: false,
formatter: () =>
Gridjs.html(`<div class="flex justify-center space-x-2">
<button @click="editItem" class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa fa-edit"></i>
</button>
<button @click="deleteItem" class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
<i class="fa fa-trash-alt"></i>
</button>
</div>`),
},
],
data: [
{
id: "1",
name: "John",
email: "john@example.com",
phone: "(01) 22 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "2",
name: "Doe",
email: "thedoe@example.com",
phone: "(33) 22 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "3",
name: "Nancy",
email: "nancy@example.com",
phone: "(21) 33 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "4",
name: "Clarke",
email: "clarke@example.com",
phone: "(44) 33 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "5",
name: "Robert",
email: "robert@example.com",
phone: "(27) 63 688 6444",
avatar_url: "/images/200x200.png",
},
{
id: "6",
name: "Tom",
email: "thetom@example.com",
phone: "(57) 63 688 6444",
avatar_url: "/images/200x200.png",
},
{
id: "7",
name: "Nolan",
email: "Nolan@example.com",
phone: "(27) 63 688 6444",
avatar_url: "/images/200x200.png",
},
{
id: "8",
name: "Adam",
email: "Adam@example.com",
phone: "(12) 22 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "9",
name: "Glen",
email: "Glen@example.com",
phone: "(74) 22 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "10",
name: "Edna",
email: "Edna@example.com",
phone: "(52) 33 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "11",
name: "Dianne",
email: "dianne@example.com",
phone: "(78) 33 888 4444",
avatar_url: "/images/200x200.png",
},
{
id: "12",
name: "Wilson",
email: "wilson@example.com",
phone: "(54) 63 688 6444",
avatar_url: "/images/200x200.png",
},
{
id: "13",
name: "Ross",
email: "rose@example.com",
phone: "(98) 63 688 6444",
avatar_url: "/images/200x200.png",
},
{
id: "14",
name: "Henry",
email: "henry@example.com",
phone: "(87) 63 688 6444",
avatar_url: "/images/200x200.png",
},
{
id: "15",
name: "Kerry",
email: "kerry@example.com",
phone: "(55) 63 688 6444",
avatar_url: "/images/200x200.png",
},
],
sort: true,
search: true,
pagination: {
enabled: true,
limit: 10,
}
},
init() {
this.table = new Gridjs.Grid(this.config).render(this.$root);
},
deleteItem() {
this.$notification({ text: "Item remove action", variant: "warning" });
},
editItem() {
this.$notification({ text: "Item edit action", variant: "info" });
},
};
}
resources/js/pages/tomselectDemo.js 0 → 100644
View file @ fb8995ec
export const tomSelect = {
author: {
valueField: "id",
searchField: "title",
options: [
{
id: 1,
name: "John Doe",
job: "Web designer",
src: "images/200x200.png",
},
{
id: 2,
name: "Emilie Watson",
job: "Developer",
src: "images/200x200.png",
},
{
id: 3,
name: "Nancy Clarke",
job: "Software Engineer",
src: "images/200x200.png",
},
],
placeholder: "Select the author",
render: {
option: function (data, escape) {
return `<div class="flex space-x-3">
<div class="avatar w-8 h-8">
<img class="rounded-full" src="${escape(
data.src
)}" alt="avatar"/>
</div>
<div class="flex flex-col">
<span> ${escape(data.name)}</span>
<span class="text-xs opacity-80"> ${escape(
data.job
)}</span>
</div>
</div>`;
},
item: function (data, escape) {
return `<span class="badge rounded-full bg-primary dark:bg-accent text-white p-px mr-2">
<span class="avatar w-6 h-6">
<img class="rounded-full" src="${escape(
data.src
)}" alt="avatar">
</span>
<span class="mx-2">${escape(data.name)}</span>
</span>`;
},
},
},
assignedTodo: {
valueField: "id",
searchField: "title",
options: [
{
id: 1,
name: "John Doe",
job: "Web designer",
src: "images/200x200.png",
},
{
id: 2,
name: "Emilie Watson",
job: "Developer",
src: "images/200x200.png",
},
{
id: 3,
name: "Nancy Clarke",
job: "Software Engineer",
src: "images/200x200.png",
},
],
placeholder: "Select the user",
render: {
option: function (data, escape) {
return `<div class="flex space-x-3">
<div class="avatar w-8 h-8">
<img class="rounded-full" src="${escape(
data.src
)}" alt="avatar"/>
</div>
<div class="flex flex-col">
<span> ${escape(data.name)}</span>
<span class="text-xs opacity-80"> ${escape(
data.job
)}</span>
</div>
</div>`;
},
item: function (data, escape) {
return `<span class="inline-flex items-center">
<span class="avatar w-6 h-6">
<img class="rounded-full" src="${escape(
data.src
)}" alt="avatar">
</span>
<span class="mx-2">${escape(data.name)}</span>
</span>`;
},
},
},
};
resources/js/pages/userSelect.js 0 → 100644
View file @ fb8995ec
const userSelect = {
user: {
valueField: "id",
searchField: "name",
options: [], // Initialize empty array for options
placeholder: "Select the user",
plugins: ['remove_button'],
onDelete: function (values) {
},
render: {
option: function (data, escape) {
if (!data.name || !data.email) {
console.error("Invalid data for option:", data);
return "";
}
return `<div class="flex space-x-3">
<div class="flex flex-col">
<span>${escape(data.name)}</span>
<span class="text-xs opacity-80">${escape(data.email)}</span>
</div>
</div>`;
},
item: function (data, escape) {
if (!data.name) {
console.error("Invalid data for item:", data);
return "";
}
return `<span class="badge rounded-full bg-primary dark:bg-accent text-white p-px mr-2">
<span class="mx-2">${escape(data.name)}</span>
</span>`;
},
},
},
};
const fetchUsers = (userSelect) => {
return fetch('/get-users')
.then(response => response.json())
.then(data => {
if (!data.users || !Array.isArray(data.users)) {
console.error("Invalid response format:", data);
return;
}
userSelect.user.options = data.users;
})
.catch(error => console.error('Error fetching user data:', error));
};
export { userSelect, fetchUsers };
\ No newline at end of file
resources/js/pages/utilities/basicTable.js 0 → 100644
View file @ fb8995ec
import { RowSelection } from "gridjs/plugins/selection";
export function initGridTable(column, data, paginate, url, permission) {
let selection = {
id: 'id',
name: 'Select',
plugin: {
component: RowSelection
}
};
column.push(selection);
if (permission.length !== 0) {
if (permission.includes("EDIT") || permission.includes("DELETE")) {
let actions = {
id: "id",
name: "Actions",
sort: false,
className: "justify-center",
formatter: (cell, row, id) =>
Gridjs.html(`
<div class="flex justify-center space-x-2">
${
permission.includes("EDIT")
? `
<a href="${url}/${cell}/edit" @click="editItem" class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa fa-edit"></i>
</a>
`
: ""
}
${
permission.includes("DELETE")
? `
<div x-data="{showModal:false}">
<a @click="showModal = true" class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
<i class="fa fa-trash-alt"></i>
</a>
<template x-teleport="#x-teleport-target">
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showModal" role="dialog" @keydown.window.escape="showModal = false">
<div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showModal = false" x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
<div class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5" x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<svg xmlns="http://www.w3.org/2000/svg" class="inline h-28 w-28 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<div class="mt-4 mx-5">
<h2 class="text-2xl text-slate-700 dark:text-navy-100">Are you sure <br> you want to delete this item ?</h2>
<p class="mt-2"></p>
<button @click="showModal = false" class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">Close</button>
<a href="#" @click.prevent="deleteItem('${url}' ,${cell} ), showModal = false" class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">confirm</a>
</div>
</div>
</div>
</template>
</div>
`
: ""
}
</div>
`),
};
column.push(actions);
}
}
return {
table: null,
config: {
columns: column,
data: data,
sort: true,
search: true,
pagination: {
enabled: true,
limit: paginate,
},
},
reloadTable() {
if (this.table) {
this.table.destroy();
}
this.table = new Gridjs.Grid(this.config).render(this.$root);
},
init() {
this.table = new Gridjs.Grid(this.config).render(this.$root);
},
deleteItem(url, cell) {
const csrfToken = document.querySelector(
'meta[name="csrf-token"]'
).content;
fetch(`${url}/${cell}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": csrfToken,
},
}).then((response) => {
// console.log(response);
this.$notification({
text: "Item deleted successfully",
variant: "success",
});
window.location.href = url;
})
.catch((error) => {
this.$notification({
text: error,
variant: "error",
});
});
},
editItem() {
this.$notification({ text: "Item edit action", variant: "info" });
},
};
}
resources/js/store.js 0 → 100644
View file @ fb8995ec
export default {
isDarkModeEnabled: false,
isMonochromeModeEnabled: false,
isSearchbarActive: false,
isSidebarExpanded: false,
isRightSidebarExpanded: false,
init() {
let firstTime = true;
this.isDarkModeEnabled = Alpine.$persist(false).as("_x_darkMode_on");
this.isSidebarExpanded =
document.querySelector(".sidebar") &&
document.body.classList.contains("is-sidebar-open") &&
Alpine.store("breakpoints").xlAndUp;
Alpine.effect(() => {
this.isDarkModeEnabled
? document.documentElement.classList.add("dark")
: document.documentElement.classList.remove("dark");
});
Alpine.effect(() => {
this.isMonochromeModeEnabled
? document.body.classList.add("is-monochrome")
: document.body.classList.remove("is-monochrome");
});
Alpine.effect(() => {
this.isSidebarExpanded
? document.body.classList.add("is-sidebar-open")
: document.body.classList.remove("is-sidebar-open");
});
Alpine.effect(() => {
if (Alpine.store("breakpoints").name && !firstTime) {
this.isSidebarExpanded = false;
this.isRightSidebarExpanded = false;
}
});
Alpine.effect(() => {
if (Alpine.store("breakpoints").smAndUp) this.isSearchbarActive = false;
});
firstTime = false;
},
documentBody: {
["@load.window"]() {
const preloader = document.querySelector(".app-preloader");
if (!preloader) return;
setTimeout(() => {
preloader.classList.add(
"animate-[cubic-bezier(0.4,0,0.2,1)_fade-out_500ms_forwards]"
);
setTimeout(() => preloader.remove(), 1000);
}, 150);
},
},
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment