This commit is contained in:
2022-02-24 20:31:33 +00:00
parent ba98dc648f
commit c54fc8cbba

View File

@@ -9,35 +9,7 @@
v-on="$listeners" v-on="$listeners"
> >
<template slot="main"> <template slot="main">
settings:{{ settings }} {{ settings }}
<gz-chart-bar-horizontal
:width="400"
:height="240"
:chart-data="obj"
:options="{
maintainAspectRatio: false,
responsive: true,
legend: { display: false },
scales: {
xAxes: [
{
gridLines: { display: true },
ticks: {
beginAtZero: true
}
}
],
yAxes: [
{
gridLines: { display: false }
}
]
},
onClick: function(e, items) {
clicked(e, items);
}
}"
></gz-chart-bar-horizontal>
</template> </template>
<template slot="settings"> <template slot="settings">
<div></div> <div></div>
@@ -55,8 +27,6 @@
</v-card-title> </v-card-title>
<v-card-text style="height: 500px;"> <v-card-text style="height: 500px;">
settings:{{ settings }}<br />
localSettings:{{ localSettings }}
<v-select <v-select
v-model="localSettings.dateRange" v-model="localSettings.dateRange"
:items="selectLists.dateFilterTokens" :items="selectLists.dateFilterTokens"
@@ -101,7 +71,6 @@
</template> </template>
<script> <script>
import GzDash from "./dash-base.vue"; import GzDash from "./dash-base.vue";
import Palette from "../api/palette";
export default { export default {
components: { components: {
GzDash GzDash
@@ -125,6 +94,11 @@ export default {
async created() { async created() {
await initWidget(this); await initWidget(this);
}, },
async mounted() {
//must be called from mounted to have refs available
//console.log("reminders-mounted");
await this.getDataFromApi();
},
methods: { methods: {
showContext: function() { showContext: function() {
this.localSettings = window.$gz.util.deepCopySkip(this.settings); this.localSettings = window.$gz.util.deepCopySkip(this.settings);
@@ -138,47 +112,24 @@ export default {
this.$emit("dash-change"); this.$emit("dash-change");
this.context = false; this.context = false;
}, },
loadData: function() {
this.obj = {
labels: [
"Customer",
"Head office",
"Service",
"Non Service",
"Subcontractor"
],
datasets: [
{
label: "",
data: [2, 4, 6, 8, 10],
backgroundColor: Palette.getSoftPaletteArray(5)
}
],
//this is added for my use, not part of chart js, used to get special id value of bar since labels are localized and data is not unique
//https://stackoverflow.com/a/42635435/8939
datakeys: [
{ id: 11, type: 34 },
{ id: 22, type: 34 },
{ id: 33, type: 34 },
{ id: 44, type: 34 },
{ id: 55, type: 34 }
]
};
},
clicked: function(c, i) {
if (i.length == 0) return; //Clicked outside any bar.
const e = i[0]; //get index of bar clicked on
//this gets the label async getDataFromApi() {
//let x_value = this.obj.labels[e._index]; //todo: need a equivalent of a datalist at the server but that can take the minimal criteria offered here and return the data easily digestable
//this gets the value //do not want the client end to have to do math or anything and also it needs to drive reporting of the same type as the widget display
//let y_value = this.obj.datasets[0].data[e._index]; //so as similar as possible to the datatable system but handles the math and summarizing ideally in the db server itself
//this gets my custom id stuff // try {
//https://stackoverflow.com/a/42635435/8939 // this.errorMessage = null;
const dataKeyValue = this.obj.datakeys[e._index]; // const res = await window.$gz.api.post("schedule/personal", {
// view: 1
alert(`STUB: OPEN ITEM (data: ${JSON.stringify(dataKeyValue)})`); // });
//clickOnChart(lastHoveredIndex); // if (res.error) {
// this.errorMessage = res.error;
// } else {
// //for later
// }
// } catch (error) {
// this.errorMessage = error.toString();
// }
} }
} }
}; };