@cloudron/pankow 3.3.1 → 3.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/types/utils.d.ts +1 -0
- package/utils.js +34 -0
- package/components/CircleChart.vue +0 -40
package/package.json
CHANGED
package/types/utils.d.ts
CHANGED
|
@@ -35,6 +35,7 @@ export function prettyBinarySize(size: any, fallback: any): any;
|
|
|
35
35
|
export function prettyDecimalSize(size: any, fallback: any): any;
|
|
36
36
|
export function prettyDate(value: any): any;
|
|
37
37
|
export function prettyShortDate(value: any): string;
|
|
38
|
+
export function formatDate(format: any, value: any): any;
|
|
38
39
|
export function prettyLongDate(value: any): string;
|
|
39
40
|
export function prettyFileSize(value: any): string;
|
|
40
41
|
export function prettyEmailAddresses(addresses: any): any;
|
package/utils.js
CHANGED
|
@@ -103,6 +103,39 @@ function prettyDate(value) {
|
|
|
103
103
|
return fromNow(date);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
|
+
function formatDate(format, value) {
|
|
107
|
+
const formatters = {
|
|
108
|
+
'hh:mm A': new Intl.DateTimeFormat(undefined, {
|
|
109
|
+
hour: '2-digit',
|
|
110
|
+
minute: '2-digit',
|
|
111
|
+
hour12: true
|
|
112
|
+
}),
|
|
113
|
+
'hh:mm:ss A': new Intl.DateTimeFormat(undefined, {
|
|
114
|
+
hour: '2-digit',
|
|
115
|
+
minute: '2-digit',
|
|
116
|
+
second: '2-digit',
|
|
117
|
+
hour12: true
|
|
118
|
+
}),
|
|
119
|
+
'DD MMM': new Intl.DateTimeFormat(undefined, {
|
|
120
|
+
day: '2-digit',
|
|
121
|
+
month: 'short'
|
|
122
|
+
}),
|
|
123
|
+
'DD MMM hh:mm A': new Intl.DateTimeFormat(undefined, {
|
|
124
|
+
day: '2-digit',
|
|
125
|
+
month: 'short',
|
|
126
|
+
hour: '2-digit',
|
|
127
|
+
minute: '2-digit',
|
|
128
|
+
hour12: true
|
|
129
|
+
}),
|
|
130
|
+
'DD MMM': new Intl.DateTimeFormat(undefined, { // force this to get month first
|
|
131
|
+
day: '2-digit',
|
|
132
|
+
month: 'short'
|
|
133
|
+
})
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
return formatters[format].format(new Date(value));
|
|
137
|
+
}
|
|
138
|
+
|
|
106
139
|
function prettyShortDate(value) {
|
|
107
140
|
if (!value) return 'unknown';
|
|
108
141
|
|
|
@@ -395,6 +428,7 @@ export {
|
|
|
395
428
|
prettyDecimalSize,
|
|
396
429
|
prettyDate,
|
|
397
430
|
prettyShortDate,
|
|
431
|
+
formatDate,
|
|
398
432
|
prettyLongDate,
|
|
399
433
|
prettyFileSize,
|
|
400
434
|
prettyEmailAddresses,
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
|
|
3
|
-
import { computed } from 'vue';
|
|
4
|
-
|
|
5
|
-
const props = defineProps({
|
|
6
|
-
values: Array,
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
// const normalizedValue = computed(() => {
|
|
10
|
-
// if (props.value < 0) return 0;
|
|
11
|
-
// if (props.value > 100) return 100;
|
|
12
|
-
// return props.value;
|
|
13
|
-
// });
|
|
14
|
-
|
|
15
|
-
// we want 100 to be the circumverence so we can neatly use percentage: radius = 100 / ( 3,14159 * 2 ) = 15,9155
|
|
16
|
-
const radius = 15.9155;
|
|
17
|
-
const stroke = 10;
|
|
18
|
-
|
|
19
|
-
function calculateViewbox() {
|
|
20
|
-
return `0 0 ${radius*2+stroke} ${radius*2+stroke}`;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function calculateArcPath() {
|
|
24
|
-
return `M${radius+stroke/2} ${stroke/2} a ${radius} ${radius} 0 0 1 0 ${radius*2} a ${radius} ${radius} 0 0 1 0 -${radius*2}`;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
</script>
|
|
28
|
-
|
|
29
|
-
<template>
|
|
30
|
-
<div class="pankow-circle-chart">
|
|
31
|
-
<svg :viewBox="calculateViewbox()" xmlns="http://www.w3.org/2000/svg">
|
|
32
|
-
<path :d="calculateArcPath()" fill="none" stroke="red" :stroke-width="stroke" stroke-dasharray="75, 100" @click.stop="onClick('red')" />
|
|
33
|
-
<path :d="calculateArcPath()" fill="none" stroke="green" :stroke-width="stroke" stroke-dasharray="30, 100" @click.stop="onClick('green') "/>
|
|
34
|
-
</svg>
|
|
35
|
-
</div>
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<style>
|
|
39
|
-
|
|
40
|
-
</style>
|