heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/frontend/src/components/MkChart.vue
View file

@ -128,12 +128,8 @@ const render = () => {
chartInstance.destroy(); chartInstance.destroy();
} }
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 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 maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y))); const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
chartInstance = new Chart(chartEl.value, { chartInstance = new Chart(chartEl.value, {
@ -188,8 +184,6 @@ const render = () => {
unit: props.span === 'day' ? 'month' : 'day', unit: props.span === 'day' ? 'month' : 'day',
}, },
grid: { grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: props.detailed, display: props.detailed,
@ -208,8 +202,6 @@ const render = () => {
stacked: props.stacked, stacked: props.stacked,
suggestedMax: 50, suggestedMax: 50,
grid: { grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: props.detailed, display: props.detailed,
@ -227,7 +219,6 @@ const render = () => {
hoverBorderWidth: 2, hoverBorderWidth: 2,
}, },
}, },
animation: false,
plugins: { plugins: {
legend: { legend: {
display: props.detailed, display: props.detailed,

10
packages/frontend/src/components/MkHeatmap.vue
View file

@ -92,11 +92,6 @@ async function renderChart() {
await nextTick(); 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'; const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする // 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
@ -160,8 +155,6 @@ async function renderChart() {
}, },
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -175,8 +168,6 @@ async function renderChart() {
position: 'right', position: 'right',
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
maxRotation: 0, maxRotation: 0,
@ -189,7 +180,6 @@ async function renderChart() {
}, },
}, },
}, },
animation: false,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

10
packages/frontend/src/components/MkRetentionHeatmap.vue
View file

@ -64,11 +64,6 @@ async function renderChart() {
await nextTick(); 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'; const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする // 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
@ -119,8 +114,6 @@ async function renderChart() {
suggestedMax: maxDays, suggestedMax: maxDays,
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -143,8 +136,6 @@ async function renderChart() {
}, },
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
maxRotation: 0, maxRotation: 0,
@ -156,7 +147,6 @@ async function renderChart() {
}, },
}, },
}, },
animation: false,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

9
packages/frontend/src/pages/admin/overview.active-users.vue
View file

@ -53,12 +53,8 @@ async function renderChart() {
const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' }); 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)'; 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 colorRead = '#3498db';
const colorWrite = '#2ecc71'; const colorWrite = '#2ecc71';
@ -113,8 +109,6 @@ async function renderChart() {
}, },
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -132,8 +126,6 @@ async function renderChart() {
suggestedMax: 10, suggestedMax: 10,
grid: { grid: {
display: true, display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -145,7 +137,6 @@ async function renderChart() {
intersect: false, intersect: false,
mode: 'index', mode: 'index',
}, },
animation: false,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

14
packages/frontend/src/pages/admin/overview.ap-requests.vue
View file

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

3
packages/frontend/src/pages/admin/overview.pie.vue
View file

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

9
packages/frontend/src/pages/admin/overview.queue.chart.vue
View file

@ -21,11 +21,6 @@ const props = defineProps<{
const chartEl = ref<HTMLCanvasElement>(null); 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(); const { handler: externalTooltipHandler } = useChartTooltip();
let chartInstance: Chart; let chartInstance: Chart;
@ -101,8 +96,6 @@ onMounted(() => {
x: { x: {
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: false, display: false,
@ -112,8 +105,6 @@ onMounted(() => {
y: { y: {
min: 0, min: 0,
grid: { grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
}, },
}, },

9
packages/frontend/src/pages/admin/queue.chart.chart.vue
View file

@ -21,11 +21,6 @@ const props = defineProps<{
const chartEl = ref<HTMLCanvasElement>(null); 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(); const { handler: externalTooltipHandler } = useChartTooltip();
let chartInstance: Chart; let chartInstance: Chart;
@ -101,8 +96,6 @@ onMounted(() => {
x: { x: {
grid: { grid: {
display: true, display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: false, display: false,
@ -112,8 +105,6 @@ onMounted(() => {
y: { y: {
min: 0, min: 0,
grid: { grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
}, },
}, },

10
packages/frontend/src/pages/user/activity.heatmap.vue
View file

@ -81,11 +81,6 @@ async function renderChart() {
await nextTick(); 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'; const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする // 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
@ -149,8 +144,6 @@ async function renderChart() {
}, },
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -164,8 +157,6 @@ async function renderChart() {
position: 'right', position: 'right',
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
maxRotation: 0, maxRotation: 0,
@ -178,7 +169,6 @@ async function renderChart() {
}, },
}, },
}, },
animation: false,
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

9
packages/frontend/src/pages/user/activity.pv.vue
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 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)'; 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 colorUser = '#3498db';
const colorVisitor = '#2ecc71'; const colorVisitor = '#2ecc71';
@ -117,8 +113,6 @@ async function renderChart() {
}, },
grid: { grid: {
display: false, display: false,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -137,8 +131,6 @@ async function renderChart() {
suggestedMax: 10, suggestedMax: 10,
grid: { grid: {
display: true, display: true,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
}, },
ticks: { ticks: {
display: true, display: true,
@ -150,7 +142,6 @@ async function renderChart() {
intersect: false, intersect: false,
mode: 'index', mode: 'index',
}, },
animation: false,
plugins: { plugins: {
title: { title: {
display: true, display: true,

8
packages/frontend/src/scripts/init-chart.ts
View file

@ -19,6 +19,7 @@ import {
import gradient from 'chartjs-plugin-gradient'; import gradient from 'chartjs-plugin-gradient';
import zoomPlugin from 'chartjs-plugin-zoom'; import zoomPlugin from 'chartjs-plugin-zoom';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
import { defaultStore } from '@/store';
export function initChart() { export function initChart() {
Chart.register( Chart.register(
@ -41,4 +42,11 @@ export function initChart() {
zoomPlugin, zoomPlugin,
gradient, gradient,
); );
// フォントカラー
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
Chart.defaults.borderColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
Chart.defaults.animation = false;
} }