Skip to content

Commit 7402184

Browse files
anderlyanderly
committed
Nova ^2.1.0 compatibility.
1 parent 0b9b166 commit 7402184

File tree

9 files changed

+334
-35790
lines changed

9 files changed

+334
-35790
lines changed

‎dist/js/card.js‎

Lines changed: 1 addition & 35749 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"laravel-mix": "^1.0",
1717
"laravel-nova": "^1.0.2",
1818
"lodash": "^4.17.11",
19-
"numeral": "^2.0.6"
19+
"numbro": "^2.1.2"
2020
},
2121
"dependencies": {
2222
"vue": "^2.5.0"

‎resources/js/components/Base/PartitionMetric.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
>
1717
</template>
1818
</h3>
19-
2019
<div class="overflow-hidden overflow-y-auto max-h-90px">
2120
<ul class="list-reset">
2221
<li v-for="item in formattedItems" class="text-xs text-80 leading-normal">
@@ -111,6 +110,7 @@ export default {
111110
'vertical-center',
112111
'rounded-b-lg',
113112
'ct-chart',
113+
'mr-4',
114114
this.formattedTotal <= 0 ? 'invisible' : '',
115115
]
116116
},

‎resources/js/components/Base/TrendMetric.vue‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
<h3 class="mr-3 text-base text-80 font-bold">{{ title }}</h3>
55

66
<select
7-
v-if="ranges.length > 0"
8-
@change="handleChange"
9-
class="ml-auto min-w-24 h-6 text-xs no-appearance bg-40"
7+
v-if="ranges.length > 0"
8+
@change="handleChange"
9+
class="select-box-sm ml-auto min-w-24 h-6 text-xs appearance-none bg-40 pl-2 pr-6 active:outline-none active:shadow-outline focus:outline-none focus:shadow-outline"
1010
>
1111
<option
12-
v-for="option in ranges"
13-
:key="option.value"
14-
:value="option.value"
15-
:selected="selectedRangeKey == option.value"
12+
v-for="option in ranges"
13+
:key="option.value"
14+
:value="option.value"
15+
:selected="selectedRangeKey == option.value"
1616
>
1717
{{ option.label }}
1818
</option>
@@ -37,7 +37,9 @@
3737
</template>
3838

3939
<script>
40-
import numeral from 'numeral'
40+
import numbro from 'numbro'
41+
import numbroLanguages from 'numbro/dist/languages.min'
42+
Object.values(numbroLanguages).forEach(l => numbro.registerLanguage(l))
4143
import _ from 'lodash'
4244
import Chartist from 'chartist'
4345
import 'chartist-plugin-tooltips'
@@ -64,11 +66,12 @@ export default {
6466
chartData: {},
6567
prefix: '',
6668
suffix: '',
69+
suffixInflection: true,
6770
ranges: { type: Array, default: () => [] },
6871
selectedRangeKey: [String, Number],
6972
format: {
7073
type: String,
71-
default: '(0[.]00a)',
74+
default: '0[.]00a',
7275
},
7376
},
7477
@@ -85,6 +88,17 @@ export default {
8588
},
8689
8790
mounted() {
91+
if (Nova.config.locale) {
92+
numbro.setLanguage(Nova.config.locale.replace('_', '-'))
93+
}
94+
95+
const low = Math.min(...this.chartData)
96+
const high = Math.max(...this.chartData)
97+
98+
// Use zero as the graph base if the lowest value is greater than or equal to zero.
99+
// This avoids the awkward situation where the chart doesn't appear filled in.
100+
const areaBase = low >= 0 ? 0 : low
101+
88102
this.chartist = new Chartist.Line(this.$refs.chart, this.chartData, {
89103
lineSmooth: Chartist.Interpolation.none(),
90104
fullWidth: true,
@@ -97,7 +111,9 @@ export default {
97111
bottom: 0,
98112
left: 0,
99113
},
100-
low: 0,
114+
low,
115+
high,
116+
areaBase,
101117
axisX: {
102118
showGrid: false,
103119
showLabel: true,
@@ -151,13 +167,19 @@ export default {
151167
152168
formattedValue() {
153169
if (!this.isNullValue) {
154-
return this.prefix + numeral(this.value).format(this.format)
170+
const value = numbro(new String(this.value)).format(this.format)
171+
172+
return `${this.prefix}${value}`
155173
}
156174
157175
return ''
158176
},
159177
160178
formattedSuffix() {
179+
if (this.suffixInflection === false) {
180+
return this.suffix
181+
}
182+
161183
return SingularOrPlural(this.value, this.suffix)
162184
},
163185
},

‎resources/js/components/Base/ValueMetric.vue‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
<h3 class="mr-3 text-base text-80 font-bold">{{ title }}</h3>
55

66
<select
7-
v-if="ranges.length > 0"
8-
@change="handleChange"
9-
class="ml-auto min-w-24 h-6 text-xs no-appearance bg-40"
7+
v-if="ranges.length > 0"
8+
@change="handleChange"
9+
class="select-box-sm ml-auto min-w-24 h-6 text-xs appearance-none bg-40 pl-2 pr-6 active:outline-none active:shadow-outline focus:outline-none focus:shadow-outline"
1010
>
1111
<option
12-
v-for="option in ranges"
13-
:key="option.value"
14-
:value="option.value"
15-
:selected="selectedRangeKey == option.value"
12+
v-for="option in ranges"
13+
:key="option.value"
14+
:value="option.value"
15+
:selected="selectedRangeKey == option.value"
1616
>
1717
{{ option.label }}
1818
</option>
@@ -78,7 +78,9 @@
7878
</template>
7979

8080
<script>
81-
import numeral from 'numeral'
81+
import numbro from 'numbro'
82+
import numbroLanguages from 'numbro/dist/languages.min'
83+
Object.values(numbroLanguages).forEach(l => numbro.registerLanguage(l))
8284
import { SingularOrPlural } from 'laravel-nova'
8385
8486
export default {
@@ -91,6 +93,9 @@ export default {
9193
url: '',
9294
prefix: '',
9395
suffix: '',
96+
suffixInflection: {
97+
default: true,
98+
},
9499
selectedRangeKey: [String, Number],
95100
ranges: { type: Array, default: () => [] },
96101
format: {
@@ -99,6 +104,12 @@ export default {
99104
},
100105
},
101106
107+
mounted() {
108+
if (Nova.config.locale) {
109+
numbro.setLanguage(Nova.config.locale.replace('_', '-'))
110+
}
111+
},
112+
102113
methods: {
103114
handleChange(event) {
104115
this.$emit('selected', event.target.value)
@@ -149,13 +160,17 @@ export default {
149160
150161
formattedValue() {
151162
if (!this.isNullValue) {
152-
return this.prefix + numeral(this.value).format(this.format)
163+
return this.prefix + numbro(new String(this.value)).format(this.format)
153164
}
154165
155166
return ''
156167
},
157168
158169
formattedSuffix() {
170+
if (this.suffixInflection === false) {
171+
return this.suffix
172+
}
173+
159174
return SingularOrPlural(this.value, this.suffix)
160175
},
161176
},

‎resources/js/components/LinkablePartitionMetric.vue‎

Lines changed: 61 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<base-partition-metric
2+
<BasePartitionMetric
33
:title="card.name"
44
:chart-data="chartData"
55
:loading="loading"
@@ -10,18 +10,75 @@
1010
<script>
1111
1212
import BasePartitionMetric from './Base/PartitionMetric'
13-
// import BasePartitionMetric from '@/components/Metrics/Base/PartitionMetric'
1413
import PartitionMetric from '@/components/Metrics/PartitionMetric'
1514
1615
export default {
1716
1817
extends: PartitionMetric,
1918
2019
components: {
21-
'base-partition-metric': BasePartitionMetric
20+
BasePartitionMetric
2221
},
2322
24-
props: ['card'],
23+
props: {
24+
card: {
25+
type: Object,
26+
required: true,
27+
},
28+
29+
resourceName: {
30+
type: String,
31+
default: '',
32+
},
33+
34+
resourceId: {
35+
type: [Number, String],
36+
default: '',
37+
},
38+
39+
lens: {
40+
type: String,
41+
default: '',
42+
},
43+
},
44+
45+
data: () => ({
46+
loading: true,
47+
chartData: [],
48+
}),
49+
50+
watch: {
51+
resourceId() {
52+
this.fetch()
53+
},
54+
},
55+
56+
created() {
57+
this.fetch()
58+
},
59+
60+
methods: {
61+
fetch() {
62+
this.loading = true
63+
64+
Minimum(Nova.request(this.metricEndpoint)).then(({ data: { value: { value } } }) => {
65+
this.chartData = value
66+
this.loading = false
67+
})
68+
},
69+
},
70+
computed: {
71+
metricEndpoint() {
72+
const lens = this.lens !== '' ? `/lens/${this.lens}` : ''
73+
if (this.resourceName && this.resourceId) {
74+
return `/nova-api/${this.resourceName}${lens}/${this.resourceId}/metrics/${this.card.uriKey}`
75+
} else if (this.resourceName) {
76+
return `/nova-api/${this.resourceName}${lens}/metrics/${this.card.uriKey}`
77+
} else {
78+
return `/nova-api/metrics/${this.card.uriKey}`
79+
}
80+
},
81+
},
2582
2683
}
2784
</script>

0 commit comments

Comments
 (0)