javascript - Billboard.js: $$.generatePoint não é uma função

Estou tentando usar billboard.js como uma alternativa simples ao d3.js para exibir alguns gráficos de linha. Infelizmente, não consigo fazê-lo funcionar no meu próprio repositório, nem consigo fazê-lo funcionar em um projeto Vue puro.

Alguém pode me dizer se é necessário algo especial para colocar o billboard.js para funcionar em conjunto com o Vue?

Meu App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div id="chart">
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { bb } from 'billboard.js';

@Component
export default class App extends Vue {
  mounted() {
    console.log(this);
    console.log(bb);
    bb.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 170, 150, 250],
        ],
        types: {
          data1: 'line',
          data2: 'area-spline',
        },
        colors: {
          data1: 'red',
          data2: 'green',
        },
      },
    });
  }
}
</script>

E o código de erro que recebo do meu devtools:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: $$.generatePoint is not a function"

found in

---> <App> at src/App.vue
       <Root>

Para o que vale, estou usando as seguintes versões do npm para este projeto:

  "dependencies": {
    "billboard.js": "^2.0.3",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2"
  },

Eu criei um pequeno repositório com o código mínimo necessário para reproduzir este problema.

Resposta #1

Com base nos documentos, o uso correto para a versão ESM é:

// BEFORE:
//import { bb } from 'billboard.js';

// AFTER:
import bb, { line, areaSpline } from 'billboard.js';


export default {
  mounted() {
    bb.generate({
      //...
      data: {
        types: {
          // BEFORE:
          //data1: 'line',
          //data2: 'area-spline',

          // AFTER:
          data1: line(),
          data2: areaSpline(),
        },
      }
    });
  }
}

Além disso, se você pretende ter várias instâncias deste componente de gráfico em uma página, você deve passar referências únicas para o elemento pai do gráfico via ref:

<template>
  <!-- BEFORE: -->
  <!-- <div id="chart" /> -->

  <!-- AFTER: -->
  <div ref="chart" />
</template>

<script>
export default {
  async mounted() {
    // wait til next tick for `ref` to be available below
    await this.$nextTick();

    bb.generate({
      //...
      bindto: this.$refs.chart,
    });
  }
}
</script>

PR do GitHub com correções