github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-01 23:15:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

time series style updates

Browse Source
This commit is contained in:
Ben Haynes
2021-06-27 00:22:28 -04:00
parent f2704433c5
commit 978a435bf9
1 changed files with 57 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/src/panels/time-series/time-series.vue
View File

@@ -213,6 +213,12 @@ export default defineComponent({
width: 2,
lineCap: 'round',
},
markers: {
hover: {
size: undefined,
sizeOffset: 4,
}
},
fill: {
type: 'gradient',
gradient: {
@@ -233,9 +239,11 @@ export default defineComponent({
},
},
grid: {
borderColor: 'var(--border-subdued)',
padding: {
top: props.show_header ? -20 : 0,
bottom: 8,
top: props.show_header ? -20 : -4,
bottom: 0,
left: 8,
},
},
dataLabels: {
@@ -247,9 +255,10 @@ export default defineComponent({
},
x: {
show: true,
formatter(date: number) {
return d(new Date(date), 'long');
},
format: 'MMM dd, yyyy, h:mmt',
// formatter(date: number) {
// return d(new Date(date), 'long');
// },
},
y: {
title: {
@@ -273,16 +282,38 @@ export default defineComponent({
},
range: props.now.getTime() - adjustDate(props.now, `-${props.options.range}`)!.getTime(),
max: props.now.getTime(),
labels: {
offsetY: -4,
style: {
fontFamily: 'var(--family-sans-serif)',
foreColor: 'var(--foreground-subdued)',
fontWeight: 600,
fontSize: '10px',
},
},
crosshairs: {
stroke: {
color: 'var(--border-normal)',
},
},
},
yaxis: {
forceNiceScale: true,
min: isNil(props.options.min) ? undefined : Number(props.options.min),
max: isNil(props.options.max) ? undefined : Number(props.options.max),
tickAmount: props.height - 2,
tickAmount: props.height - 4,
labels: {
offsetY: 1,
offsetX: -4,
formatter: (value: number) => {
return value > 10000 ? abbreviateNumber(value, 1) : n(value);
},
style: {
fontFamily: 'var(--family-sans-serif)',
foreColor: 'var(--foreground-subdued)',
fontWeight: 600,
fontSize: '10px',
},
},
},
});
@@ -299,3 +330,23 @@ export default defineComponent({
height: 100%;
}
</style>
<style>
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
background-color: var(--background-subdued);
padding: 0 4px;
font-size: 10px !important;
font-weight: 600 !important;
margin-bottom: 0;
}
.apexcharts-tooltip-series-group:last-child {
padding-bottom: 0;
}
.apexcharts-tooltip-y-group {
padding: 0 0 0 4px;
font-size: 10px !important;
font-weight: 600 !important;
}
.apexcharts-tooltip-series-group {
padding: 0;
}
</style>