Advertisement
Guest User

Untitled

a guest
May 22nd, 2018
69
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.27 KB | None | 0 0
  1. <template>
  2. <div class="person-mentions-timetable" ref="timetable">
  3. <div id="chart-container">
  4. <div id="chart">
  5. </div>
  6. </div>
  7. <div id="legend">
  8. <div id="legend-title">Отображаемые сущности:</div>
  9. <button @click="showAll()">Показать все</button>
  10. <button @click="hideAll()">Скрыть все</button>
  11. <div v-for="entity in shownEntities" class="single-entity" v-bind:id="getEntityId(entity.id)">
  12. <div class="color-label" @click="hideEntity(entity.title)" v-bind:id="getColorId(entity.id)" v-bind:style="getColor(entity.title)">
  13. </div>
  14. <span @click="hideEntity(entity.title)" v-bind:style="isHidden(entity.title)">
  15. {{ entity.title }}
  16. </span>
  17. <img class="x-close" src="/static/drawable/xclose.png" @click="removeEntity(entity.id, entity.title)">
  18. </div>
  19. </div>
  20. </div>
  21. </template>
  22.  
  23. <script>
  24. import Vue from 'vue'
  25. import 'd3'
  26.  
  27. var c3 = require('c3');
  28. var chart = null;
  29.  
  30. export default {
  31. name: 'person-mentions-timetable',
  32. data() {
  33. return {
  34. 'chart': {},
  35. 'hidden': [],
  36. 'colors': {},
  37. 'freeColors': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  38. }
  39. },
  40. mounted() {
  41. this.renderTimeSeries();
  42. this.$forceUpdate();
  43. },
  44. methods: {
  45. hideAll: function() {
  46. this.hidden = this.shownEntities.map((ent) => ent.title);
  47. chart.hide();
  48. },
  49. showAll: function() {
  50. this.hidden = []
  51. chart.show();
  52. },
  53. hideEntity: function(title) {
  54. if (this.hidden.includes(title)) {
  55. chart.show(title);
  56. this.hidden = this.hidden.filter((ent_title) => ent_title != title);
  57. }
  58. else {
  59. chart.hide(title);
  60. this.hidden.push(title);
  61. }
  62. },
  63. getColorId (id) {
  64. return "label-" + id;
  65. },
  66. getEntityId (id) {
  67. return "entity-" + id;
  68. },
  69. getColor(title) {
  70. let color = this.colors[title];
  71. return "background: " + color;
  72. },
  73. isHidden(title) {
  74. if (this.hidden.includes(title)) {
  75. return "color: rgb(127, 125, 125, 0.3)";
  76. }
  77. else {
  78. return "color: black";
  79. }
  80. },
  81. reassignColors() {
  82. var this_ = this;
  83. this.shownEntities.forEach(function(d, index) {
  84. if (d.title in this_.colors) {
  85. return;
  86. }
  87. if (index < 12 && this_.freeColors.length > 0) {
  88. for(let i = 0; i < 12; i++) {
  89. if (this_.freeColors.includes(index) !== -1) {
  90. this_.colors[d.title] = d3.schemePaired[index];
  91. }
  92. }
  93. }
  94. else {
  95. this_.colors[d.title] = d3.interpolateRainbow(Math.random());
  96. }
  97. });
  98. },
  99. renderTimeSeries() {
  100. if (this.$store.state.graphData === null) {
  101. return;
  102. }
  103. if (this.$store.state.graphData.length == 0) {
  104. if (chart !== null) {
  105. chart.destroy();
  106. }
  107. chart = c3.generate({
  108. bindto: '#chart',
  109. data: {
  110. json: {}
  111. }
  112. });
  113. return;
  114. }
  115. let severalEntData = this.$store.state.graphData.entities;
  116. let columns = [];
  117. let xsToYsMap = {};
  118. this.reassignColors();
  119. severalEntData.forEach(function (entity, index) {
  120. columns.push(['x ' + entity.id]);
  121. columns.push([entity.title]);
  122. xsToYsMap[entity.title] = 'x ' + entity.id;
  123. entity.points.forEach(function (point) {
  124. columns[columns.length - 2].push(point.date);
  125. columns[columns.length - 1].push(point.total);
  126. });
  127. });
  128. if (chart !== null) {
  129. chart.destroy();
  130. }
  131. chart = c3.generate({
  132. bindto: '#chart',
  133. data: {
  134. xs: xsToYsMap,
  135. xFormat: '%Y-%m-%d',
  136. columns: columns,
  137. colors: this.colors
  138. },
  139. axis: {
  140. x: {
  141. type: 'timeseries',
  142. tick: {
  143. format: '%Y-%m-%d',
  144. culling: true
  145. }
  146. }
  147. },
  148. zoom: {
  149. enabled: true,
  150. rescale: true
  151. },
  152. subchart: {
  153. show: true
  154. },
  155. grid: {
  156. x: {
  157. show: true
  158. },
  159. y: {
  160. show: true
  161. }
  162. },
  163. tooltip: {
  164. grouped: false
  165. },
  166. size: {
  167. width: 800,
  168. height: 500
  169. },
  170. legend: {
  171. show: false
  172. }
  173. });
  174. },
  175. removeEntity: function(id, title) {
  176. let indexHidden = this.hidden.indexOf(title);
  177. if (indexHidden !== -1) {
  178. this.hidden.splice(indexHidden, 1);
  179. }
  180. let freeColor = this.colors[title];
  181. let indexColor = d3.schemePaired.includes(freeColor);
  182.  
  183. if (indexColor !== -1) {
  184. this.freeColors.push(indexColor);
  185. }
  186.  
  187. delete this.colors[title];
  188.  
  189. let params = {
  190. timeFrom: this.$store.state.time.begin,
  191. timeTo: this.$store.state.time.end,
  192. keywords: this.$store.state.filterKeys
  193. };
  194.  
  195. let ids = this.$store.state.entityIds;
  196. let index = ids.indexOf(id);
  197. if (index !== -1) {
  198. ids.splice(index, 1);
  199. this.$store.state.entityIds = ids;
  200. this.$store.dispatch('loadGraphData', params);
  201. }
  202. }
  203. },
  204. computed: {
  205. shownEntities: function() {
  206. if (!this.$store.state.graphData)
  207. return [];
  208. if (this.$store.state.graphData.entities === null) {
  209. return [];
  210. }
  211. else {
  212. return this.$store.state.graphData.entities;
  213. }
  214. }
  215. },
  216. watch: {
  217. shownEntities: function() {
  218. this.renderTimeSeries();
  219. }
  220. }
  221. }
  222. </script>
  223.  
  224. <style scoped>
  225. #chart-container {
  226. width: 850px;
  227. height: 500px;
  228. margin: 10px;
  229. border: 1px solid #DDDDDD;
  230. display: inline-block;
  231. }
  232. #chart {
  233. width: 800px;
  234. height: 500px;
  235. }
  236. #legend {
  237. display: inline-block;
  238. margin: 10px;
  239. width: 400px;
  240. height: 500px;
  241. top: 0;
  242. float: right;
  243. overflow-y: auto;
  244. }
  245.  
  246. #legend button {
  247. font-size: 15px;
  248. margin-right: 10px;
  249. margin-bottom: 10px;
  250. margin-top: 10px;
  251. }
  252.  
  253. #legend-title {
  254. padding: 5px;
  255. background: #62BABC;
  256. color: #FFFFFF
  257. }
  258. .color-label {
  259. width: 18px;
  260. height: 18px;
  261. /*background-color: #ffbe65;*/
  262. display: inline-block;
  263. border: 1px solid #656565;
  264. cursor: pointer;
  265. }
  266. .single-entity {
  267. padding: 5px;
  268. background: #DDDDDD;
  269. cursor: pointer;
  270. }
  271. .x-close {
  272. width: 20px;
  273. height: 20px;
  274. /*border-radius: 10px;*/
  275. }
  276. .x-close:hover {
  277. cursor: pointer;
  278. background: #fd0707;
  279. }
  280. #chart {
  281. width: 800px;
  282. height: 500px;
  283. }
  284. #legend {
  285. display: inline-block;
  286. margin: 10px;
  287. width: 350px;
  288. height: 500px;
  289. top: 0;
  290. float: right;
  291. overflow-y: scroll;
  292. }
  293.  
  294. #legend button {
  295. font-size: 15px;
  296. margin-right: 10px;
  297. margin-bottom: 10px;
  298. margin-top: 10px;
  299. }
  300.  
  301. #legend-title {
  302. padding: 5px;
  303. background: #62BABC;
  304. color: #FFFFFF
  305. }
  306. .color-label {
  307. width: 18px;
  308. height: 18px;
  309. /*background-color: #ffbe65;*/
  310. display: inline-block;
  311. border: 1px solid #656565;
  312. cursor: pointer;
  313. }
  314. .single-entity {
  315. padding: 5px;
  316. background: #DDDDDD;
  317. cursor: pointer;
  318. }
  319. .x-close {
  320. width: 20px;
  321. height: 20px;
  322. /*border-radius: 10px;*/
  323. }
  324. .x-close:hover {
  325. cursor: pointer;
  326. background: #fd0707;
  327. }
  328. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement