Base Template
This commit is contained in:
@@ -17,36 +17,7 @@ export default function Logo({ disabledLink = false, sx }: Props) {
|
||||
|
||||
const logo = (
|
||||
<Box sx={{ width: 40, height: 40, ...sx }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512">
|
||||
<defs>
|
||||
<linearGradient id="BG1" x1="100%" x2="50%" y1="9.946%" y2="50%">
|
||||
<stop offset="0%" stopColor={PRIMARY_DARK} />
|
||||
<stop offset="100%" stopColor={PRIMARY_MAIN} />
|
||||
</linearGradient>
|
||||
<linearGradient id="BG2" x1="50%" x2="50%" y1="0%" y2="100%">
|
||||
<stop offset="0%" stopColor={PRIMARY_LIGHT} />
|
||||
<stop offset="100%" stopColor={PRIMARY_MAIN} />
|
||||
</linearGradient>
|
||||
<linearGradient id="BG3" x1="50%" x2="50%" y1="0%" y2="100%">
|
||||
<stop offset="0%" stopColor={PRIMARY_LIGHT} />
|
||||
<stop offset="100%" stopColor={PRIMARY_MAIN} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill={PRIMARY_MAIN} fillRule="evenodd" stroke="none" strokeWidth="1">
|
||||
<path
|
||||
fill="url(#BG1)"
|
||||
d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"
|
||||
/>
|
||||
<path
|
||||
fill="url(#BG2)"
|
||||
d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994"
|
||||
/>
|
||||
<path
|
||||
fill="url(#BG3)"
|
||||
d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<img src="/logo/logo-linksehat.png" alt="LinkSehat" />
|
||||
</Box>
|
||||
);
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ interface Props extends BoxProps {
|
||||
const Page = forwardRef<HTMLDivElement, Props>(({ children, title = '', meta, ...other }, ref) => (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{`${title} | Minimal-UI`}</title>
|
||||
<title>{`${title} | LinkSehat`}</title>
|
||||
{meta}
|
||||
</Helmet>
|
||||
|
||||
|
||||
191
frontend/dashboard/src/components/chart/BaseOptionChart.tsx
Normal file
191
frontend/dashboard/src/components/chart/BaseOptionChart.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import { ApexOptions } from 'apexcharts';
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function BaseOptionChart(): ApexOptions {
|
||||
const theme = useTheme();
|
||||
|
||||
const LABEL_TOTAL = {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
color: theme.palette.text.secondary,
|
||||
fontSize: theme.typography.subtitle2.fontSize as string,
|
||||
fontWeight: theme.typography.subtitle2.fontWeight,
|
||||
lineHeight: theme.typography.subtitle2.lineHeight,
|
||||
};
|
||||
|
||||
const LABEL_VALUE = {
|
||||
offsetY: 8,
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: theme.typography.h3.fontSize as string,
|
||||
fontWeight: theme.typography.h3.fontWeight,
|
||||
lineHeight: theme.typography.h3.lineHeight,
|
||||
};
|
||||
|
||||
return {
|
||||
// Colors
|
||||
colors: [
|
||||
theme.palette.primary.main,
|
||||
theme.palette.chart.yellow[0],
|
||||
theme.palette.chart.blue[0],
|
||||
theme.palette.chart.violet[0],
|
||||
theme.palette.chart.green[0],
|
||||
theme.palette.chart.red[0],
|
||||
],
|
||||
|
||||
// Chart
|
||||
chart: {
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
// animations: { enabled: false },
|
||||
foreColor: theme.palette.text.disabled,
|
||||
fontFamily: theme.typography.fontFamily,
|
||||
},
|
||||
|
||||
// States
|
||||
states: {
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'lighten',
|
||||
value: 0.04,
|
||||
},
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'darken',
|
||||
value: 0.88,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Fill
|
||||
fill: {
|
||||
opacity: 1,
|
||||
gradient: {
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0,
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0,
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
|
||||
// Datalabels
|
||||
dataLabels: { enabled: false },
|
||||
|
||||
// Stroke
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth',
|
||||
lineCap: 'round',
|
||||
},
|
||||
|
||||
// Grid
|
||||
grid: {
|
||||
strokeDashArray: 3,
|
||||
borderColor: theme.palette.divider,
|
||||
},
|
||||
|
||||
// Xaxis
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
|
||||
// Markers
|
||||
markers: {
|
||||
size: 0,
|
||||
strokeColors: theme.palette.background.paper,
|
||||
},
|
||||
|
||||
// Tooltip
|
||||
tooltip: {
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
// Legend
|
||||
legend: {
|
||||
show: true,
|
||||
fontSize: String(13),
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
markers: {
|
||||
radius: 12,
|
||||
},
|
||||
fontWeight: 500,
|
||||
itemMargin: { horizontal: 12 },
|
||||
labels: {
|
||||
colors: theme.palette.text.primary,
|
||||
},
|
||||
},
|
||||
|
||||
// plotOptions
|
||||
plotOptions: {
|
||||
// Bar
|
||||
bar: {
|
||||
columnWidth: '28%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
// Pie + Donut
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
value: LABEL_VALUE,
|
||||
total: LABEL_TOTAL,
|
||||
},
|
||||
},
|
||||
},
|
||||
// Radialbar
|
||||
radialBar: {
|
||||
track: {
|
||||
strokeWidth: '100%',
|
||||
background: theme.palette.grey[500_16],
|
||||
},
|
||||
dataLabels: {
|
||||
value: LABEL_VALUE,
|
||||
total: LABEL_TOTAL,
|
||||
},
|
||||
},
|
||||
// Radar
|
||||
radar: {
|
||||
polygons: {
|
||||
fill: { colors: ['transparent'] },
|
||||
strokeColors: theme.palette.divider,
|
||||
connectorColors: theme.palette.divider,
|
||||
},
|
||||
},
|
||||
// polarArea
|
||||
polarArea: {
|
||||
rings: {
|
||||
strokeColor: theme.palette.divider,
|
||||
},
|
||||
spokes: {
|
||||
connectorColors: theme.palette.divider,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Responsive
|
||||
responsive: [
|
||||
{
|
||||
// sm
|
||||
breakpoint: theme.breakpoints.values.sm,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '40%' } },
|
||||
},
|
||||
},
|
||||
{
|
||||
// md
|
||||
breakpoint: theme.breakpoints.values.md,
|
||||
options: {
|
||||
plotOptions: { bar: { columnWidth: '32%' } },
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
58
frontend/dashboard/src/components/chart/ChartStyle.tsx
Normal file
58
frontend/dashboard/src/components/chart/ChartStyle.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
// @mui
|
||||
import { alpha, useTheme } from '@mui/material/styles';
|
||||
import { GlobalStyles } from '@mui/material';
|
||||
// utils
|
||||
import cssStyles from '../../utils/cssStyles';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function ChartStyle() {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<GlobalStyles
|
||||
styles={{
|
||||
'&.apexcharts-canvas': {
|
||||
// Tooltip
|
||||
'.apexcharts-xaxistooltip': {
|
||||
...cssStyles(theme).bgBlur(),
|
||||
border: 0,
|
||||
color: theme.palette.text.primary,
|
||||
boxShadow: theme.customShadows.dropdown,
|
||||
borderRadius: Number(theme.shape.borderRadius) * 1.5,
|
||||
'&:before': { borderBottomColor: 'transparent' },
|
||||
'&:after': { borderBottomColor: alpha(theme.palette.background.default, 0.8) },
|
||||
},
|
||||
'.apexcharts-tooltip.apexcharts-theme-light': {
|
||||
...cssStyles(theme).bgBlur(),
|
||||
border: 0,
|
||||
boxShadow: theme.customShadows.dropdown,
|
||||
borderRadius: Number(theme.shape.borderRadius) * 1.5,
|
||||
'& .apexcharts-tooltip-title': {
|
||||
border: 0,
|
||||
textAlign: 'center',
|
||||
fontWeight: theme.typography.fontWeightBold,
|
||||
backgroundColor: theme.palette.grey[500_16],
|
||||
color: theme.palette.text[theme.palette.mode === 'light' ? 'secondary' : 'primary'],
|
||||
},
|
||||
},
|
||||
// Legend
|
||||
'.apexcharts-legend': {
|
||||
padding: 0,
|
||||
},
|
||||
'.apexcharts-legend-series': {
|
||||
display: 'flex !important',
|
||||
alignItems: 'center',
|
||||
},
|
||||
'.apexcharts-legend-marker': {
|
||||
marginRight: 8,
|
||||
},
|
||||
'.apexcharts-legend-text': {
|
||||
lineHeight: '18px',
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
2
frontend/dashboard/src/components/chart/index.ts
Normal file
2
frontend/dashboard/src/components/chart/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as ChartStyle } from './ChartStyle';
|
||||
export { default as BaseOptionChart } from './BaseOptionChart';
|
||||
@@ -30,9 +30,10 @@ export default function NavSectionVertical({
|
||||
}: NavSectionProps) {
|
||||
return (
|
||||
<Box {...other}>
|
||||
{navConfig.map((group) => (
|
||||
<List key={group.subheader} disablePadding sx={{ px: 2 }}>
|
||||
{navConfig.map((group, index) => (
|
||||
<List key={index} disablePadding sx={{ px: 2 }}>
|
||||
<ListSubheaderStyle
|
||||
key={index}
|
||||
sx={{
|
||||
...(isCollapse && {
|
||||
opacity: 0,
|
||||
|
||||
Reference in New Issue
Block a user