Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="person-mentions-timetable" ref="timetable">
- <div id="chart-container">
- <div id="chart">
- </div>
- </div>
- <div id="legend">
- <div id="legend-title">Отображаемые сущности:</div>
- <button @click="showAll()">Показать все</button>
- <button @click="hideAll()">Скрыть все</button>
- <div v-for="entity in shownEntities" class="single-entity" v-bind:id="getEntityId(entity.id)">
- <div class="color-label" @click="hideEntity(entity.title)" v-bind:id="getColorId(entity.id)" v-bind:style="getColor(entity.title)">
- </div>
- <span @click="hideEntity(entity.title)" v-bind:style="isHidden(entity.title)">
- {{ entity.title }}
- </span>
- <img class="x-close" src="/static/drawable/xclose.png" @click="removeEntity(entity.id, entity.title)">
- </div>
- </div>
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import 'd3'
- var c3 = require('c3');
- var chart = null;
- export default {
- name: 'person-mentions-timetable',
- data() {
- return {
- 'chart': {},
- 'hidden': [],
- 'colors': {},
- 'freeColors': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
- }
- },
- mounted() {
- this.renderTimeSeries();
- this.$forceUpdate();
- },
- methods: {
- hideAll: function() {
- this.hidden = this.shownEntities.map((ent) => ent.title);
- chart.hide();
- },
- showAll: function() {
- this.hidden = []
- chart.show();
- },
- hideEntity: function(title) {
- if (this.hidden.includes(title)) {
- chart.show(title);
- this.hidden = this.hidden.filter((ent_title) => ent_title != title);
- }
- else {
- chart.hide(title);
- this.hidden.push(title);
- }
- },
- getColorId (id) {
- return "label-" + id;
- },
- getEntityId (id) {
- return "entity-" + id;
- },
- getColor(title) {
- let color = this.colors[title];
- return "background: " + color;
- },
- isHidden(title) {
- if (this.hidden.includes(title)) {
- return "color: rgb(127, 125, 125, 0.3)";
- }
- else {
- return "color: black";
- }
- },
- reassignColors() {
- var this_ = this;
- this.shownEntities.forEach(function(d, index) {
- if (d.title in this_.colors) {
- return;
- }
- if (index < 12 && this_.freeColors.length > 0) {
- for(let i = 0; i < 12; i++) {
- if (this_.freeColors.includes(index) !== -1) {
- this_.colors[d.title] = d3.schemePaired[index];
- }
- }
- }
- else {
- this_.colors[d.title] = d3.interpolateRainbow(Math.random());
- }
- });
- },
- renderTimeSeries() {
- if (this.$store.state.graphData === null) {
- return;
- }
- if (this.$store.state.graphData.length == 0) {
- if (chart !== null) {
- chart.destroy();
- }
- chart = c3.generate({
- bindto: '#chart',
- data: {
- json: {}
- }
- });
- return;
- }
- let severalEntData = this.$store.state.graphData.entities;
- let columns = [];
- let xsToYsMap = {};
- this.reassignColors();
- severalEntData.forEach(function (entity, index) {
- columns.push(['x ' + entity.id]);
- columns.push([entity.title]);
- xsToYsMap[entity.title] = 'x ' + entity.id;
- entity.points.forEach(function (point) {
- columns[columns.length - 2].push(point.date);
- columns[columns.length - 1].push(point.total);
- });
- });
- if (chart !== null) {
- chart.destroy();
- }
- chart = c3.generate({
- bindto: '#chart',
- data: {
- xs: xsToYsMap,
- xFormat: '%Y-%m-%d',
- columns: columns,
- colors: this.colors
- },
- axis: {
- x: {
- type: 'timeseries',
- tick: {
- format: '%Y-%m-%d',
- culling: true
- }
- }
- },
- zoom: {
- enabled: true,
- rescale: true
- },
- subchart: {
- show: true
- },
- grid: {
- x: {
- show: true
- },
- y: {
- show: true
- }
- },
- tooltip: {
- grouped: false
- },
- size: {
- width: 800,
- height: 500
- },
- legend: {
- show: false
- }
- });
- },
- removeEntity: function(id, title) {
- let indexHidden = this.hidden.indexOf(title);
- if (indexHidden !== -1) {
- this.hidden.splice(indexHidden, 1);
- }
- let freeColor = this.colors[title];
- let indexColor = d3.schemePaired.includes(freeColor);
- if (indexColor !== -1) {
- this.freeColors.push(indexColor);
- }
- delete this.colors[title];
- let params = {
- timeFrom: this.$store.state.time.begin,
- timeTo: this.$store.state.time.end,
- keywords: this.$store.state.filterKeys
- };
- let ids = this.$store.state.entityIds;
- let index = ids.indexOf(id);
- if (index !== -1) {
- ids.splice(index, 1);
- this.$store.state.entityIds = ids;
- this.$store.dispatch('loadGraphData', params);
- }
- }
- },
- computed: {
- shownEntities: function() {
- if (!this.$store.state.graphData)
- return [];
- if (this.$store.state.graphData.entities === null) {
- return [];
- }
- else {
- return this.$store.state.graphData.entities;
- }
- }
- },
- watch: {
- shownEntities: function() {
- this.renderTimeSeries();
- }
- }
- }
- </script>
- <style scoped>
- #chart-container {
- width: 850px;
- height: 500px;
- margin: 10px;
- border: 1px solid #DDDDDD;
- display: inline-block;
- }
- #chart {
- width: 800px;
- height: 500px;
- }
- #legend {
- display: inline-block;
- margin: 10px;
- width: 400px;
- height: 500px;
- top: 0;
- float: right;
- overflow-y: auto;
- }
- #legend button {
- font-size: 15px;
- margin-right: 10px;
- margin-bottom: 10px;
- margin-top: 10px;
- }
- #legend-title {
- padding: 5px;
- background: #62BABC;
- color: #FFFFFF
- }
- .color-label {
- width: 18px;
- height: 18px;
- /*background-color: #ffbe65;*/
- display: inline-block;
- border: 1px solid #656565;
- cursor: pointer;
- }
- .single-entity {
- padding: 5px;
- background: #DDDDDD;
- cursor: pointer;
- }
- .x-close {
- width: 20px;
- height: 20px;
- /*border-radius: 10px;*/
- }
- .x-close:hover {
- cursor: pointer;
- background: #fd0707;
- }
- #chart {
- width: 800px;
- height: 500px;
- }
- #legend {
- display: inline-block;
- margin: 10px;
- width: 350px;
- height: 500px;
- top: 0;
- float: right;
- overflow-y: scroll;
- }
- #legend button {
- font-size: 15px;
- margin-right: 10px;
- margin-bottom: 10px;
- margin-top: 10px;
- }
- #legend-title {
- padding: 5px;
- background: #62BABC;
- color: #FFFFFF
- }
- .color-label {
- width: 18px;
- height: 18px;
- /*background-color: #ffbe65;*/
- display: inline-block;
- border: 1px solid #656565;
- cursor: pointer;
- }
- .single-entity {
- padding: 5px;
- background: #DDDDDD;
- cursor: pointer;
- }
- .x-close {
- width: 20px;
- height: 20px;
- /*border-radius: 10px;*/
- }
- .x-close:hover {
- cursor: pointer;
- background: #fd0707;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement