ayanova/src/components/dash-test-bar-widget-count-by-usertype.vue

@@ -30,6 +30,9 @@
                 gridLines: { display: false }
               }
             ]
+          },
+          onClick: function(e, items) {
+            clicked(e, items);
           }
         }"
       ></gz-chart-bar-horizontal>
@@ -37,12 +40,6 @@
   </gz-dash>
 </template>
 <script>
-/*
-TODO: Move palette color stuff to it's own file that can be imported in here and in ops-metrics
-todo: change palette colors to very muted choices as per guide book
-todo: clickable bars to link to source
-
-*/
 import GzDash from "../components/dash-base.vue";
 export default {
   components: {
@@ -72,8 +69,35 @@ export default {
             data: [2, 4, 6, 8, 10],
             backgroundColor: getPalette(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: 11, type: 34 },
+          { id: 11, type: 34 },
+          { id: 11, type: 34 },
+          { id: 11, type: 34 }
         ]
       };
+    },
+    clicked: function(c, i) {
+      if (i.length == 0) return; //Clicked outside any bar.
+      let e = i[0]; //get index of bar clicked on
+      // console.log(e._index);
+      //this gets the label
+      //let x_value = this.obj.labels[e._index];
+      //this gets the value
+      //let y_value = this.obj.datasets[0].data[e._index];
+      //this gets my custom id stuff
+      //https://stackoverflow.com/a/42635435/8939
+      let dataKeyValue = this.obj.datakeys[e._index];
+      // console.log(x_value);
+      // console.log(y_value);
+      //console.log(dataKeyValue);
+
+      alert(`STUB: OPEN ITEM (data: ${JSON.stringify(dataKeyValue)})`);
+      //clickOnChart(lastHoveredIndex);
     }
   }
 };

ayanova/src/components/dash-test-day-calendar-widget.vue

@@ -108,9 +108,8 @@ export default {
       return event.color;
     },
     showEvent({ nativeEvent, event }) {
-      alert(`STUB: OPEN ITEM (data: ${JSON.stringify(event)})`);
-
       nativeEvent.stopPropagation();
+      alert(`STUB: OPEN ITEM (data: ${JSON.stringify(event)})`);
     }
   }
 };