EvidenceChart.vue

<template>
  <div>
    <h3 class="text-center text-2xl font-bold">
      Condensate Evidence
    </h3>
    <div
      ref="evidenceListChart"
      class="chart"
    />
    <div
      id="evidence-list-legenddiv"
      class="legend"
    />

    <h3 class="text-center text-2xl font-bold">
      Condensate Evidence Venn Diagram
    </h3>
    <div
      ref="evidenceChart"
      class="chart"
    />
    <div
      id="evidence-legenddiv"
      class="legend"
    />
  </div>
</template>

<script>
// require modules
/* eslint-disable no-unused-vars */

const _ = require('lodash');
const am4core = require('@amcharts/amcharts4/core');
const am4charts = require('@amcharts/amcharts4/charts');
const am4venn = require('@amcharts/amcharts4/plugins/venn')
const am4themesAnimated = require('@amcharts/amcharts4/themes/animated').default;

am4core.useTheme(am4themesAnimated);

export default {
  name: 'EvidenceChart',
  components: {
  },
  props: ['evidenceList', 'evidence'],
  data() {
    return {
    }
  },
  mounted() {
    am4core.options.autoDispose = true;
    this.drawEvidenceListPieChart();
    this.drawEvidenceListVennChart();
    // this.drawEvidencePieChart();
  },
  methods: {
    drawPieChart(chartRef, legendDiv, data) {
      const chart = am4core.create(chartRef, am4charts.PieChart3D);
      chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

      const dbNames = require('./js/const').db
      chart.data = _.map(data, c => {
        let dbs = _.map(c._id, i => dbNames[i])

        return {'total': c.total, '_id': dbs.join(', ')};
      })

      const pieSeries = chart.series.push(new am4charts.PieSeries3D());
      pieSeries.dataFields.value = 'total';
      pieSeries.dataFields.category = '_id';

      // chart.innerRadius = am4core.percent(40);
      // Add a legend
      chart.legend = new am4charts.Legend();
      chart.legend.labels.template.text = '{category}:';
      chart.legend.valueLabels.template.text = '{value} ({value.percent.formatNumber("#.0")}%)';

      const legendContainer = am4core.create(legendDiv, am4core.Container);
      legendContainer.width = am4core.percent(100);
      legendContainer.height = am4core.percent(100);
      chart.legend.parent = legendContainer;

      function resizeLegend() {
        const el = document.getElementById(legendDiv);
        if (el) {
          // eslint-disable-next-line
          const newHeight = chart.legend.contentHeight + 'px';
          if (el.style.height !== newHeight) {
            el.style.height = newHeight;
            setTimeout(() => {
              chart.legend.labels.template.width = am4core.percent(100);
            }, 100);
          }
        }
      }

      chart.legend.events.on('sizechanged', resizeLegend);
      chart.legend.events.on('datavalidated', resizeLegend);
      chart.legend.labels.template.truncate = false;
    },
    drawVennChart(chartRef, legendDiv, data) {
      const chart = am4core.create(chartRef, am4venn.VennDiagram);
      chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

      const series = chart.series.push(new am4venn.VennSeries());
      series.dataFields.value = 'value';
      series.dataFields.category = 'name';
      series.dataFields.intersections = 'sets';
      series.dataFields.hidden = 'selected';


      let dat = []
      const dbNames = require('./js/const').db
      _.each(data, i => {
        // if(!_.includes(i._id, 'blue')) {
          let sum = i.total;
          _.each(data, c => {
            // if(!_.includes(c._id, 'blue')) {
              if (!_.isEqual(i._id, c._id)) {
                let inter = _.intersection(i._id, c._id)
                if (_.isEqual(i._id, inter)) {
                  sum = sum + c.total
                }
              }
            // }
          })

        if(!_.includes(i._id, 'blue')) {
          dat.push({'_id': i._id, 'total': sum})
        } else {
          dat.push({'_id': i._id, 'total': sum, 'selected': true})
        }
      })

      series.data = _.sortBy(_.map(dat, c => {
        let dbs = _.map(c._id, i => dbNames[i])
        if (dbs.length === 1) return {'name': dbs.join(', '), 'value': c.total};
        return {'name': dbs.join(', '), 'value': c.total, 'sets': dbs, 'selected': c.selected};
      }), d => d.name.length)

      // chart.innerRadius = am4core.percent(40);
      // Add a legend
      chart.legend = new am4charts.Legend();
      chart.legend.labels.template.text = '{category}:{value}';
      chart.legend.valueLabels.template.text = '{value}';

      const legendContainer = am4core.create(legendDiv, am4core.Container);
      legendContainer.width = am4core.percent(100);
      legendContainer.height = am4core.percent(100);
      chart.legend.parent = legendContainer;

      function resizeLegend() {
        const el = document.getElementById(legendDiv);
        if (el) {
          // eslint-disable-next-line
          const newHeight = chart.legend.contentHeight + 'px';
          if (el.style.height !== newHeight) {
            el.style.height = newHeight;
            setTimeout(() => {
              chart.legend.labels.template.width = am4core.percent(100);
            }, 100);
          }
        }
      }

      chart.legend.events.on('sizechanged', resizeLegend);
      chart.legend.events.on('datavalidated', resizeLegend);
      chart.legend.labels.template.truncate = false;
    },
    drawEvidenceListPieChart() {
      const vm = this;

      // vm.drawVennChart(vm.$refs.evidenceListChart, 'evidence-list-legenddiv', vm.evidenceList)
      vm.drawPieChart(vm.$refs.evidenceListChart, 'evidence-list-legenddiv', vm.evidenceList)
    },
    drawEvidenceListVennChart() {
      const vm = this;

      vm.drawVennChart(vm.$refs.evidenceChart, 'evidence-legenddiv', vm.evidenceList)
    },
    drawEvidencePieChart() {
      const vm = this;

      vm.drawPieChart(vm.$refs.evidenceChart, 'evidence-legenddiv', vm.evidence)
    }
  }
}
</script>

<style scoped>
.mainContent {
  padding: 20px;
}
.chart {
  width: 100%;
  height: 500px;
}

.legend {
  width: 100%;
  border: 1px dotted #c99;
  margin: 1em 0;
}
</style>