mirror of
https://github.com/paricafe/misskey.git
synced 2024-12-01 02:56:43 -06:00
refactor
This commit is contained in:
parent
70ce129478
commit
f598a876eb
11 changed files with 8 additions and 92 deletions
|
@ -128,12 +128,8 @@ const render = () => {
|
|||
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)';
|
||||
|
||||
// フォントカラー
|
||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
|
||||
|
||||
const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
|
||||
|
||||
chartInstance = new Chart(chartEl.value, {
|
||||
|
@ -188,8 +184,6 @@ const render = () => {
|
|||
unit: props.span === 'day' ? 'month' : 'day',
|
||||
},
|
||||
grid: {
|
||||
color: gridColor,
|
||||
borderColor: 'rgb(0, 0, 0, 0)',
|
||||
},
|
||||
ticks: {
|
||||
display: props.detailed,
|
||||
|
@ -208,8 +202,6 @@ const render = () => {
|
|||
stacked: props.stacked,
|
||||
suggestedMax: 50,
|
||||
grid: {
|
||||
color: gridColor,
|
||||
borderColor: 'rgb(0, 0, 0, 0)',
|
||||
},
|
||||
ticks: {
|
||||
display: props.detailed,
|
||||
|
@ -227,7 +219,6 @@ const render = () => {
|
|||
hoverBorderWidth: 2,
|
||||
},
|
||||
},
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: props.detailed,
|
||||
|
|
|
@ -92,11 +92,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つの値の平均を最大値とする
|
||||
|
@ -160,8 +155,6 @@ async function renderChart() {
|
|||
},
|
||||
grid: {
|
||||
display: false,
|
||||
color: gridColor,
|
||||
borderColor: 'rgb(0, 0, 0, 0)',
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
|
@ -175,8 +168,6 @@ async function renderChart() {
|
|||
position: 'right',
|
||||
grid: {
|
||||
display: false,
|
||||
color: gridColor,
|
||||
borderColor: 'rgb(0, 0, 0, 0)',
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
|
@ -189,7 +180,6 @@ async function renderChart() {
|
|||
},
|
||||
},
|
||||
},
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
|
|
|
@ -64,11 +64,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つの値の平均を最大値とする
|
||||
|
@ -119,8 +114,6 @@ async function renderChart() {
|
|||
suggestedMax: maxDays,
|
||||
grid: {
|
||||
display: false,
|
||||
color: gridColor,
|
||||
borderColor: 'rgb(0, 0, 0, 0)',
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
|
@ -143,8 +136,6 @@ async function renderChart() {
|
|||
},
|
||||
grid: {
|
||||
display: false,
|
||||
color: gridColor,
|
||||
borderColor: 'rgb(0, 0, 0, 0)',
|
||||
},
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
|
@ -156,7 +147,6 @@ async function renderChart() {
|
|||
},
|
||||
},
|
||||
},
|
||||
animation: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
});
|
||||
|
|
|
@ -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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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)',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -19,6 +19,7 @@ import {
|
|||
import gradient from 'chartjs-plugin-gradient';
|
||||
import zoomPlugin from 'chartjs-plugin-zoom';
|
||||
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
||||
import { defaultStore } from '@/store';
|
||||
|
||||
export function initChart() {
|
||||
Chart.register(
|
||||
|
@ -41,4 +42,11 @@ export function initChart() {
|
|||
zoomPlugin,
|
||||
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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue