49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { Component, Prop, Vue } from 'vue-property-decorator';
|
|
import { Measure, MeasureConfig, MeasureType, Measurement, MeasurementMeta } from '@/models';
|
|
import moment from 'moment';
|
|
import assign from 'lodash.assign';
|
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
|
|
import { byTimestampComparator } from '@/util';
|
|
|
|
library.add(faPencilAlt);
|
|
|
|
@Component({})
|
|
export class SimpleDetails extends Vue {
|
|
@Prop() private measure!: Measure<MeasureConfig>;
|
|
@Prop() private measurements!: Array<Measurement<MeasurementMeta>>;
|
|
|
|
// private newMeasurement;
|
|
private moment = moment;
|
|
private chartOptions = {
|
|
markers: { size: 6 },
|
|
noData: { text: 'no data',
|
|
style: { fontSize: '18px' } },
|
|
stroke: { curve: 'straight' },
|
|
xaxis: { type: 'datetime' }
|
|
};
|
|
|
|
private get measurementChartData(): ApexAxisChartSeries {
|
|
const measurementData = this.measurements.slice() || [];
|
|
|
|
return [{
|
|
name: this.measure.name,
|
|
data: measurementData
|
|
.sort(byTimestampComparator)
|
|
.map((m) => ({ x: m.timestamp.toISOString(), y: m.value }))
|
|
}];
|
|
}
|
|
|
|
private get measurementTableData() {
|
|
return (this.measurements || []).map((m) => {
|
|
return assign({}, m, {
|
|
tsDisplay: moment(m.timestamp).format('MMM Do, HH:mm'),
|
|
tsSort: m.timestamp.toISOString()
|
|
});
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
export default SimpleDetails;
|