@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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudron/pankow",
3
3
  "private": false,
4
- "version": "3.3.1",
4
+ "version": "3.4.1",
5
5
  "description": "",
6
6
  "main": "index.js",
7
7
  "types": "types/index.d.ts",
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>