<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip :crosshairs="false" :inPlot="false" position="top" />
      <v-axis dataKey="value" :label="label" />
      <v-bar position="value*count" />
    </v-chart>
  </div>
</template>

<script>
  const DataSet = require('@antv/data-set');

  const values = [
    1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7,
    8.3, 8.6, 8.8, 9.1, 9.2, 9.4, 9.5, 9.7, 10.5, 10.7, 10.8, 11.0,
    11.0, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12.0, 12.9, 12.9,
    13.3, 13.7, 13.8, 13.9, 14.0, 14.2, 14.5, 15, 15.2, 15.6, 16.0,
    16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6, 21, 23.4
  ];
  const sourceData = values.map((value) => ({ value }));

  const dv = new DataSet.View().source(sourceData);
  dv.transform({
    type: 'bin.histogram',
    field: 'value',
    binWidth: 2,
    as: ['value', 'count'],
  });
  const data = dv.rows;

  const scale = [{
    dataKey: 'value',
    nice: false,
    min: 0,
    tickInterval: 1,
  }, {
    dataKey: 'count',
    max: 14,
  }];

  const formatter = val => {
    if ((val % 2)) {
     return val;
    }
    return '';
  };

  export default {
    data() {
      return {
        data,
        scale,
        height: 400,
        label: { formatter: formatter },
      };
    }
  };
</script>