Histograms.vue

<template>

  <div>
<!--    <h3 class="text-center text-2xl font-bold">Histogram of Condensates</h3>-->
<!--    <div ref="proteinHistogram" class='chart'></div>-->

    <h3 class="text-center text-2xl font-bold">Condensate Proteome Size Distribution</h3>
    <div ref="condensateHistogram" class='chart'></div>
  </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 am4themesAnimated = require('@amcharts/amcharts4/themes/animated').default;

am4core.useTheme(am4themesAnimated);

export default {
  name: "SpeciesChart",
  props: ["protein", "condensate"],
  components: {
  },
  data() {
    return {
    }
  },
  methods: {
    drawHistogramChart(chartRef, data, breakStart, breakEnd, valueEnd, xTitle, yTitle) {
      const chart = am4core.create(chartRef, am4charts.XYChart);
      chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

      chart.data = data;

      var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
      categoryAxis.renderer.grid.template.location = 0;
      categoryAxis.dataFields.category = "_id";
      categoryAxis.renderer.minGridDistance = 40;
      categoryAxis.title.text = xTitle;
      categoryAxis.title.fontWeight = "bold";

      var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.min = 0;
      valueAxis.max = valueEnd;
      valueAxis.strictMinMax = true;
      valueAxis.renderer.minGridDistance = 30;
      valueAxis.title.text = yTitle;

      // axis break
      var axisBreak = valueAxis.axisBreaks.create();
      axisBreak.startValue = breakStart;
      axisBreak.endValue = breakEnd;
      //axisBreak.breakSize = 0.005;

      // fixed axis break
      var d = (axisBreak.endValue - axisBreak.startValue) / (valueAxis.max - valueAxis.min);
      axisBreak.breakSize = 0.05 * (1 - d) / d; // 0.05 means that the break will take 5% of the total value axis height

      // make break expand on hover
      var hoverState = axisBreak.states.create("hover");
      hoverState.properties.breakSize = 1;
      hoverState.properties.opacity = 0.1;
      hoverState.transitionDuration = 1500;

      axisBreak.defaultState.transitionDuration = 1000;
      /*
      // this is exactly the same, but with events
      axisBreak.events.on("over", function() {
        axisBreak.animate(
          [{ property: "breakSize", to: 1 }, { property: "opacity", to: 0.1 }],
          1500,
          am4core.ease.sinOut
        );
      });
      axisBreak.events.on("out", function() {
        axisBreak.animate(
          [{ property: "breakSize", to: 0.005 }, { property: "opacity", to: 1 }],
          1000,
          am4core.ease.quadOut
        );
      });*/

      var series = chart.series.push(new am4charts.ColumnSeries());
      series.dataFields.categoryX = "_id";
      series.dataFields.valueY = "count";
      series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
      series.columns.template.tooltipY = 0;
      series.columns.template.strokeOpacity = 0;

      // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
      series.columns.template.adapter.add("fill", function(fill, target) {
        return chart.colors.getIndex(target.dataItem.index);
      });
    },
    drawProteinHistogramChart() {
      const vm = this;

      vm.drawHistogramChart(vm.$refs.proteinHistogram, vm.protein, 50, 2310, 2320, 'No. of Condensates', 'No. of Proteins')
    },
    drawCondensateHistogramChart() {
      const vm = this;

      vm.drawHistogramChart(vm.$refs.condensateHistogram, vm.condensate, 22, 210, 213, 'No. of Proteins', 'No. of Condensates')
    }
  },
  mounted() {
    am4core.options.autoDispose = true;
    // this.drawProteinHistogramChart();
    this.drawCondensateHistogramChart();
  }
}
</script>

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

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