60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
//src\components\chart\styles.ts
|
|
import { GlobalToken } from 'antd';
|
|
import Color from 'color';
|
|
import styled from 'styled-components';
|
|
|
|
import { ThemeMode } from '@/types/enum';
|
|
|
|
export const StyledApexChart = styled.div<{ $thememode: ThemeMode; $theme: GlobalToken }>`
|
|
.apexcharts-canvas {
|
|
/* TOOLTIP */
|
|
.apexcharts-tooltip {
|
|
color: ${(props) => props.$theme.colorText};
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(6px);
|
|
background-color: ${(props) => Color(props.$theme.colorBgElevated).alpha(0.8).toString()};
|
|
box-shadow: ${(props) =>
|
|
props.$thememode === ThemeMode.Light
|
|
? `rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px`
|
|
: `rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;`};
|
|
.apexcharts-tooltip-title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
background-color: rgba(145, 158, 171, 0.08);
|
|
}
|
|
}
|
|
|
|
/* TOOLTIP X */
|
|
.apexcharts-xaxistooltip {
|
|
color: ${(props) => props.$theme.colorText};
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(6px);
|
|
border-color: transparent;
|
|
box-shadow: ${(props) =>
|
|
props.$thememode === ThemeMode.Light
|
|
? `rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px`
|
|
: `rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;`};
|
|
background-color: ${(props) => Color(props.$theme.colorBgElevated).alpha(0.8).toString()};
|
|
&::before {
|
|
border-bottom-color: rgba(145, 158, 171, 0.24);
|
|
}
|
|
&::after {
|
|
border-bottom-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
|
|
/* LEGEND */
|
|
.apexcharts-legend {
|
|
padding: 0;
|
|
.apexcharts-legend-series {
|
|
display: inline-flex !important;
|
|
align-items: ecnter;
|
|
}
|
|
.apexcharts-legend-text {
|
|
line-height: 18px;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
}
|
|
`;
|