monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

refactor

Browse source
This commit is contained in:
syuilo 2022-12-28 13:42:30 +09:00
parent 4c24bd3933
commit 2547c8c117
7 changed files with 42 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,6 +34,7 @@ import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix'; import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
import { chartVLine } from '@/scripts/chart-vline'; import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
Chart.register( Chart.register(
ArcElement, ArcElement,
@ -53,14 +54,6 @@ Chart.register(
MatrixController, MatrixElement, MatrixController, MatrixElement,
); );
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
const rootEl = $ref<HTMLDivElement>(null); const rootEl = $ref<HTMLDivElement>(null);
const chartEl = $ref<HTMLCanvasElement>(null); const chartEl = $ref<HTMLCanvasElement>(null);
const now = new Date(); const now = new Date();

67
packages/frontend/src/pages/admin/metrics.vue
View file

@ -53,54 +53,47 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, markRaw } from 'vue'; import { defineComponent, markRaw } from 'vue';
import { import {
Chart, Chart,
ArcElement, ArcElement,
LineElement, LineElement,
BarElement, BarElement,
PointElement, PointElement,
BarController, BarController,
LineController, LineController,
CategoryScale, CategoryScale,
LinearScale, LinearScale,
Legend, Legend,
Title, Title,
Tooltip, Tooltip,
SubTitle, SubTitle,
} from 'chart.js'; } from 'chart.js';
import MkwFederation from '../../widgets/federation.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkContainer from '@/components/MkContainer.vue'; import MkContainer from '@/components/MkContainer.vue';
import MkFolder from '@/components/MkFolder.vue'; import MkFolder from '@/components/MkFolder.vue';
import MkwFederation from '../../widgets/federation.vue';
import { version, url } from '@/config'; import { version, url } from '@/config';
import bytes from '@/filters/bytes'; import bytes from '@/filters/bytes';
import number from '@/filters/number'; import number from '@/filters/number';
Chart.register(
ArcElement,
LineElement,
BarElement,
PointElement,
BarController,
LineController,
CategoryScale,
LinearScale,
Legend,
Title,
Tooltip,
SubTitle,
);
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
import * as os from '@/os'; import * as os from '@/os';
import { stream } from '@/stream'; import { stream } from '@/stream';
import { alpha } from '@/scripts/color';
Chart.register(
ArcElement,
LineElement,
BarElement,
PointElement,
BarController,
LineController,
CategoryScale,
LinearScale,
Legend,
Title,
Tooltip,
SubTitle,
);
export default defineComponent({ export default defineComponent({
components: { components: {

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

@ -34,6 +34,7 @@ import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import gradient from 'chartjs-plugin-gradient'; import gradient from 'chartjs-plugin-gradient';
import { chartVLine } from '@/scripts/chart-vline'; import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
Chart.register( Chart.register(
ArcElement, ArcElement,
@ -53,14 +54,6 @@ Chart.register(
gradient, gradient,
); );
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
const chartEl = $ref<HTMLCanvasElement>(null); const chartEl = $ref<HTMLCanvasElement>(null);
const now = new Date(); const now = new Date();
let chartInstance: Chart = null; let chartInstance: Chart = null;

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

@ -44,6 +44,7 @@ import { i18n } from '@/i18n';
import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline'; import { chartVLine } from '@/scripts/chart-vline';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { alpha } from '@/scripts/color';
Chart.register( Chart.register(
ArcElement, ArcElement,
@ -63,14 +64,6 @@ Chart.register(
gradient, gradient,
); );
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
const chartLimit = 50; const chartLimit = 50;
const chartEl = $ref<HTMLCanvasElement>(); const chartEl = $ref<HTMLCanvasElement>();
const chartEl2 = $ref<HTMLCanvasElement>(); const chartEl2 = $ref<HTMLCanvasElement>();

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

@ -26,6 +26,7 @@ import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline'; import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
Chart.register( Chart.register(
ArcElement, ArcElement,
@ -48,14 +49,6 @@ const props = defineProps<{
type: string; type: string;
}>(); }>();
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
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)'; const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';

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

@ -26,6 +26,7 @@ import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip'; import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline'; import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
Chart.register( Chart.register(
ArcElement, ArcElement,
@ -48,14 +49,6 @@ const props = defineProps<{
type: string; type: string;
}>(); }>();
const alpha = (hex, a) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};
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)'; const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';

7
packages/frontend/src/scripts/color.ts Normal file
View file

@ -0,0 +1,7 @@
export const alpha = (hex: string, a: number): string => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, ${a})`;
};