This commit is contained in:
syuilo
2023-01-02 19:58:51 +09:00
parent 70ce129478
commit f598a876eb
11 changed files with 8 additions and 92 deletions

View File

@@ -53,12 +53,8 @@ async function renderChart() {
const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const colorRead = '#3498db';
const colorWrite = '#2ecc71';
@@ -113,8 +109,6 @@ async function renderChart() {
},
grid: {
display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -132,8 +126,6 @@ async function renderChart() {
suggestedMax: 10,
grid: {
display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -145,7 +137,6 @@ async function renderChart() {
intersect: false,
mode: 'index',
},
animation: false,
plugins: {
legend: {
display: false,

View File

@@ -68,7 +68,6 @@ onMounted(async () => {
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const succColor = '#87e000';
const failColor = '#ff4400';
@@ -76,9 +75,6 @@ onMounted(async () => {
const succMax = Math.max(...raw.deliverSucceeded);
const failMax = Math.max(...raw.deliverFailed);
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
new Chart(chartEl, {
type: 'line',
data: {
@@ -133,8 +129,6 @@ onMounted(async () => {
},
grid: {
display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -154,8 +148,6 @@ onMounted(async () => {
suggestedMax: 10,
grid: {
display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -174,7 +166,6 @@ onMounted(async () => {
hoverBorderWidth: 2,
},
},
animation: false,
plugins: {
legend: {
display: false,
@@ -232,8 +223,6 @@ onMounted(async () => {
},
grid: {
display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: false,
@@ -252,8 +241,6 @@ onMounted(async () => {
suggestedMax: 10,
grid: {
display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
},
},
@@ -267,7 +254,6 @@ onMounted(async () => {
hoverBorderWidth: 2,
},
},
animation: false,
plugins: {
legend: {
display: false,

View File

@@ -18,9 +18,6 @@ const props = defineProps<{
const chartEl = ref<HTMLCanvasElement>(null);
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',
});

View File

@@ -21,11 +21,6 @@ const props = defineProps<{
const chartEl = ref<HTMLCanvasElement>(null);
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const { handler: externalTooltipHandler } = useChartTooltip();
let chartInstance: Chart;
@@ -101,8 +96,6 @@ onMounted(() => {
x: {
grid: {
display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: false,
@@ -112,8 +105,6 @@ onMounted(() => {
y: {
min: 0,
grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
},
},

View File

@@ -21,11 +21,6 @@ const props = defineProps<{
const chartEl = ref<HTMLCanvasElement>(null);
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const { handler: externalTooltipHandler } = useChartTooltip();
let chartInstance: Chart;
@@ -101,8 +96,6 @@ onMounted(() => {
x: {
grid: {
display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: false,
@@ -112,8 +105,6 @@ onMounted(() => {
y: {
min: 0,
grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
},
},

View File

@@ -81,11 +81,6 @@ async function renderChart() {
await nextTick();
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
@@ -149,8 +144,6 @@ async function renderChart() {
},
grid: {
display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -164,8 +157,6 @@ async function renderChart() {
position: 'right',
grid: {
display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
maxRotation: 0,
@@ -178,7 +169,6 @@ async function renderChart() {
},
},
},
animation: false,
plugins: {
legend: {
display: false,

View File

@@ -58,12 +58,8 @@ async function renderChart() {
const raw = await os.api('charts/user/pv', { userId: props.user.id, limit: chartLimit, span: 'day' });
const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
const colorUser = '#3498db';
const colorVisitor = '#2ecc71';
@@ -117,8 +113,6 @@ async function renderChart() {
},
grid: {
display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -137,8 +131,6 @@ async function renderChart() {
suggestedMax: 10,
grid: {
display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
ticks: {
display: true,
@@ -150,7 +142,6 @@ async function renderChart() {
intersect: false,
mode: 'index',
},
animation: false,
plugins: {
title: {
display: true,