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 { 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,15 +67,18 @@ import {
|
||||||
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';
|
||||||
|
import * as os from '@/os';
|
||||||
|
import { stream } from '@/stream';
|
||||||
|
import { alpha } from '@/scripts/color';
|
||||||
|
|
||||||
Chart.register(
|
Chart.register(
|
||||||
ArcElement,
|
ArcElement,
|
||||||
|
@ -92,16 +95,6 @@ Chart.register(
|
||||||
SubTitle,
|
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';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
MkButton,
|
MkButton,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>();
|
||||||
|
|
|
@ -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)';
|
||||||
|
|
|
@ -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
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