@cryptotaxi247 / netdata-1 / commits / 31338b11f

dygraph touch interface enabled

Costa Tsaousis (ktsaou) committed Dec 4, 2015 at 11:03 UTC 31338b11f35b5c7c3060b0292bb882bd56735721
1 file changed +91 -121
web/dashboard.js
+91 -121
@@ -840,114 +840,6 @@
840 }
841 };
842
843 - NETDATA.dygraphClickCallback = function(element, dygraph, event, x, points) {
844 - if(NETDATA.options.debug.dygraph) console.log('dygraphClickCallback()');
845 -
846 - // NETDATA.dygraphDoubleClickDetect(element, dygraph);
847 - NETDATA.dygraphReset(element, dygraph);
848 - }
849 -
850 - NETDATA.dygraphPointClickCallback = function(element, dygraph, event, point) {
851 - if(NETDATA.options.debug.dygraph) console.log('dygraphPointClickCallback()');
852 -
853 - // NETDATA.dygraphDoubleClickDetect(element, dygraph);
854 - NETDATA.dygraphReset(element, dygraph);
855 - }
856 -
857 - NETDATA.dygraphDrawCallback = function(element, dygraph, is_initial) {
858 - if(NETDATA.options.debug.dygraph) console.log('dygraphDrawCallback()');
859 -
860 - var x_range = dygraph.xAxisRange();
861 - var after = Math.round(x_range[0] / 1000);
862 - var before = Math.round(x_range[1] / 1000);
863 -
864 - NETDATA.dygraphZoomOrPan(element, dygraph, after, before, false, true);
865 - }
866 -
867 - NETDATA.dygraphZoomCallback = function(element, dygraph, minDate, maxDate, yRanges) {
868 - if(NETDATA.options.debug.dygraph) console.log('dygraphZoomCallback()');
869 -
870 - NETDATA.dygraphZoomOrPan(element, dygraph, Math.round(minDate / 1000), Math.round(maxDate / 1000), false, true);
871 - }
872 -
873 - NETDATA.dygraphHighlightCallback = function(element, dygraph, event, x, points, row, seriesName) {
874 - if(NETDATA.options.debug.dygraph) console.log('dygraphHighlightCallback()');
875 -
876 - // stop refreshing
877 - self = $(element);
878 - self.data('chart-paused', true);
879 - }
880 -
881 - NETDATA.dygraphUnhighlightCallback = function(element, dygraph) {
882 - if(NETDATA.options.debug.dygraph) console.log('dygraphUnhighlightCallback()');
883 -
884 - // start refreshing
885 - self = $(element);
886 - self.data('chart-paused', false);
887 - }
888 -
889 - NETDATA.dygraphMouseDown = function(element, dygraph, event, context) {
890 - if(NETDATA.options.debug.dygraph) console.log('dygraphMouseDown()');
891 -
892 - context.initializeMouseDown(event, dygraph, context);
893 - if (event.altKey || event.shiftKey)
894 - Dygraph.startZoom(event, dygraph, context);
895 - else
896 - Dygraph.startPan(event, dygraph, context);
897 - }
898 -
899 - NETDATA.dygraphMouseMove = function(element, dygraph, event, context) {
900 - if(NETDATA.options.debug.dygraph) console.log('dygraphMouseMove()');
901 -
902 - if (context.isPanning)
903 - Dygraph.movePan(event, dygraph, context);
904 - else if (context.isZooming)
905 - Dygraph.moveZoom(event, dygraph, context);
906 - }
907 -
908 - NETDATA.dygraphMouseUp = function(element, dygraph, event, context) {
909 - if(NETDATA.options.debug.dygraph) console.log('dygraphMouseUp()');
910 -
911 - if (context.isPanning)
912 - Dygraph.endPan(event, dygraph, context);
913 - else if (context.isZooming)
914 - Dygraph.endZoom(event, dygraph, context);
915 - }
916 -
917 - NETDATA.dygraphMouseClick = function(element, dygraph, event, context) {
918 - if(NETDATA.options.debug.dygraph) console.log('dygraphMouseClick()');
919 -
920 - }
921 -
922 - NETDATA.dygraphMouseDoubleClick = function(element, dygraph, event, context) {
923 - if(NETDATA.options.debug.dygraph) console.log('dygraphMouseDoubleClick()');
924 - NETDATA.dygraphReset(element, dygraph);
925 - }
926 -
927 - NETDATA.dygraphMouseWheel = function(element, dygraph, event, context) {
928 - if(NETDATA.options.debug.dygraph) console.log('dygraphMouseWheel()');
929 -
930 - if(event.altKey || event.shiftKey) {
931 - // http://dygraphs.com/gallery/interaction-api.js
932 - var normal = (event.detail) ? event.detail * -1 : event.wheelDelta / 40;
933 - var percentage = normal / 10;
934 -
935 - self = $(element);
936 - var before_old = self.data('panning-before');
937 - var after_old = self.data('panning-after');
938 - var range_old = before_old - after_old;
939 -
940 - var range = range_old * ( 1 - percentage );
941 - var dt = Math.round((range_old - range) / 2);
942 - before = before_old - dt;
943 - after = after_old + dt;
944 -
945 - if(NETDATA.options.debug.dygraph) console.log('percent: ' + percentage + ' from ' + after_old + ' - ' + before_old + ' to ' + after + ' - ' + before + ', range from ' + (before_old - after_old).toString() + ' to ' + (before - after).toString());
946 -
947 - NETDATA.dygraphZoomOrPan(element, dygraph, after, before, true);
948 - }
949 - }
950 -
843 NETDATA.dygraphReset = function(element, dygraph) {
844 if(NETDATA.options.debug.dygraph) console.log('dygraphReset()');
845
@@ -1155,20 +1047,98 @@
1047 pixelsPerLabel: 15
1048 }
1049 },
1158 - //clickCallback: function(e, x, points) { NETDATA.dygraphClickCallback(element, this, e, x, points); },
1159 - //pointClickCallback: function(e, point) { NETDATA.dygraphPointClickCallback(element, this, e, point); },
1160 - drawCallback: function(dygraph, is_initial) { NETDATA.dygraphDrawCallback(element, dygraph, is_initial); },
1161 - zoomCallback: function(minDate, maxDate, yRanges) { NETDATA.dygraphZoomCallback(element, this, minDate, maxDate, yRanges); },
1162 - highlightCallback: function(event, x, points, row, seriesName) { NETDATA.dygraphHighlightCallback(element, this, event, x, points, row, seriesName); },
1163 - unhighlightCallback: function(event) { NETDATA.dygraphUnhighlightCallback(element, this, event); },
1050 + drawCallback: function(dygraph, is_initial) {
1051 + if(NETDATA.options.debug.dygraph) console.log('dygraphDrawCallback()');
1052 +
1053 + var x_range = dygraph.xAxisRange();
1054 + var after = Math.round(x_range[0] / 1000);
1055 + var before = Math.round(x_range[1] / 1000);
1056 +
1057 + NETDATA.dygraphZoomOrPan(element, this, after, before, false, true);
1058 + },
1059 + zoomCallback: function(minDate, maxDate, yRanges) {
1060 + if(NETDATA.options.debug.dygraph) console.log('dygraphZoomCallback()');
1061 + NETDATA.dygraphZoomOrPan(element, this, Math.round(minDate / 1000), Math.round(maxDate / 1000), false, true);
1062 + },
1063 + highlightCallback: function(event, x, points, row, seriesName) {
1064 + if(NETDATA.options.debug.dygraph) console.log('dygraphHighlightCallback()');
1065 + self.data('chart-paused', true);
1066 + },
1067 + unhighlightCallback: function(event) {
1068 + if(NETDATA.options.debug.dygraph) console.log('dygraphUnhighlightCallback()');
1069 + self.data('chart-paused', false);
1070 + },
1071 interactionModel : {
1165 - mousedown: function(event, dygraph, context) { NETDATA.dygraphMouseDown(element, dygraph, event, context); },
1166 - mousemove: function(event, dygraph, context) { NETDATA.dygraphMouseMove(element, dygraph, event, context); },
1167 - mouseup: function(event, dygraph, context) { NETDATA.dygraphMouseUp(element, dygraph, event, context); },
1168 - click: function(event, dygraph, context) { NETDATA.dygraphMouseClick(element, dygraph, event, context); },
1169 - dblclick: function(event, dygraph, context) { NETDATA.dygraphMouseDoubleClick(element, dygraph, event, context); },
1170 - mousewheel: function(event, dygraph, context) { NETDATA.dygraphMouseWheel(element, dygraph, event, context); }
1171 - }
1072 + mousedown: function(event, dygraph, context) {
1073 + if(NETDATA.options.debug.dygraph) console.log('dygraphMouseDown()');
1074 +
1075 + // Right-click should not initiate a zoom.
1076 + if (event.button && event.button == 2) return;
1077 +
1078 + context.initializeMouseDown(event, dygraph, context);
1079 +
1080 + if (event.altKey || event.shiftKey)
1081 + Dygraph.startZoom(event, dygraph, context);
1082 + else
1083 + Dygraph.startPan(event, dygraph, context);
1084 + },
1085 + mousemove: function(event, dygraph, context) {
1086 + if(NETDATA.options.debug.dygraph) console.log('dygraphMouseMove()');
1087 +
1088 + if (context.isPanning)
1089 + Dygraph.movePan(event, dygraph, context);
1090 + else if (context.isZooming)
1091 + Dygraph.moveZoom(event, dygraph, context);
1092 + },
1093 + mouseup: function(event, dygraph, context) {
1094 + if(NETDATA.options.debug.dygraph) console.log('dygraphMouseUp()');
1095 +
1096 + if (context.isPanning)
1097 + Dygraph.endPan(event, dygraph, context);
1098 + else if (context.isZooming)
1099 + Dygraph.endZoom(event, dygraph, context);
1100 + },
1101 + click: function(event, dygraph, context) {
1102 + if(NETDATA.options.debug.dygraph) console.log('dygraphMouseClick()');
1103 + Dygraph.cancelEvent(event);
1104 + },
1105 + dblclick: function(event, dygraph, context) {
1106 + if(NETDATA.options.debug.dygraph) console.log('dygraphMouseDoubleClick()');
1107 + NETDATA.dygraphReset(element, dygraph);
1108 + },
1109 + mousewheel: function(event, dygraph, context) {
1110 + if(NETDATA.options.debug.dygraph) console.log('dygraphMouseWheel()');
1111 +
1112 + if(event.altKey || event.shiftKey) {
1113 + // http://dygraphs.com/gallery/interaction-api.js
1114 + var normal = (event.detail) ? event.detail * -1 : event.wheelDelta / 40;
1115 + var percentage = normal / 10;
1116 +
1117 + var before_old = self.data('panning-before');
1118 + var after_old = self.data('panning-after');
1119 + var range_old = before_old - after_old;
1120 +
1121 + var range = range_old * ( 1 - percentage );
1122 + var dt = Math.round((range_old - range) / 2);
1123 + before = before_old - dt;
1124 + after = after_old + dt;
1125 +
1126 + if(NETDATA.options.debug.dygraph) console.log('percent: ' + percentage + ' from ' + after_old + ' - ' + before_old + ' to ' + after + ' - ' + before + ', range from ' + (before_old - after_old).toString() + ' to ' + (before - after).toString());
1127 +
1128 + NETDATA.dygraphZoomOrPan(element, dygraph, after, before, true);
1129 + }
1130 + },
1131 + touchstart: function(event, dygraph, context) {
1132 + Dygraph.Interaction.startTouch(event, dygraph, context);
1133 + //context.touchDirections.y = 0;
1134 + },
1135 + touchmove: function(event, dygraph, context) {
1136 + Dygraph.Interaction.moveTouch(event, dygraph, context);
1137 + },
1138 + touchend: function(event, dygraph, context) {
1139 + Dygraph.Interaction.endTouch(event, dygraph, context);
1140 + }
1141 + }
1142 };
1143
1144 var uuid = NETDATA.guid();