This commit is contained in:
@@ -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();
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user