refactor
This commit is contained in:
parent
4c24bd3933
commit
2547c8c117
7 changed files with 42 additions and 77 deletions
|
@ -34,6 +34,7 @@ import { defaultStore } from '@/store';
|
|||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { alpha } from '@/scripts/color';
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
|
@ -53,14 +54,6 @@ Chart.register(
|
|||
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 chartEl = $ref<HTMLCanvasElement>(null);
|
||||
const now = new Date();
|
||||
|
|
|
@ -53,54 +53,47 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, markRaw } from 'vue';
|
||||
import {
|
||||
Chart,
|
||||
ArcElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
PointElement,
|
||||
BarController,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
Legend,
|
||||
Title,
|
||||
Tooltip,
|
||||
SubTitle,
|
||||
Chart,
|
||||
ArcElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
PointElement,
|
||||
BarController,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
Legend,
|
||||
Title,
|
||||
Tooltip,
|
||||
SubTitle,
|
||||
} from 'chart.js';
|
||||
import MkwFederation from '../../widgets/federation.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkSelect from '@/components/form/select.vue';
|
||||
import MkInput from '@/components/form/input.vue';
|
||||
import MkContainer from '@/components/MkContainer.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkwFederation from '../../widgets/federation.vue';
|
||||
import { version, url } from '@/config';
|
||||
import bytes from '@/filters/bytes';
|
||||
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 { 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({
|
||||
components: {
|
||||
|
|
|
@ -34,6 +34,7 @@ import { defaultStore } from '@/store';
|
|||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import gradient from 'chartjs-plugin-gradient';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { alpha } from '@/scripts/color';
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
|
@ -53,14 +54,6 @@ Chart.register(
|
|||
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 now = new Date();
|
||||
let chartInstance: Chart = null;
|
||||
|
|
|
@ -44,6 +44,7 @@ import { i18n } from '@/i18n';
|
|||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { defaultStore } from '@/store';
|
||||
import { alpha } from '@/scripts/color';
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
|
@ -63,14 +64,6 @@ Chart.register(
|
|||
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 chartEl = $ref<HTMLCanvasElement>();
|
||||
const chartEl2 = $ref<HTMLCanvasElement>();
|
||||
|
|
|
@ -26,6 +26,7 @@ import * as os from '@/os';
|
|||
import { defaultStore } from '@/store';
|
||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { alpha } from '@/scripts/color';
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
|
@ -48,14 +49,6 @@ const props = defineProps<{
|
|||
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 gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
||||
|
|
|
@ -26,6 +26,7 @@ import * as os from '@/os';
|
|||
import { defaultStore } from '@/store';
|
||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||
import { chartVLine } from '@/scripts/chart-vline';
|
||||
import { alpha } from '@/scripts/color';
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
|
@ -48,14 +49,6 @@ const props = defineProps<{
|
|||
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 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
7
packages/frontend/src/scripts/color.ts
Normal 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})`;
|
||||
};
|
Loading…
Reference in a new issue