Highcharts: Modular Highchart? Capacidade de agitação de árvores.

Olá @envil ,
No início aconselho a carregar apenas highstock.js que inclui todas as funcionalidades do Highcharts. Você também pode criar seu arquivo personalizado por nossa ferramenta aqui:

• https://www.highcharts.com/download

A biblioteca Highcharts já está modularizada: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

Obrigado por suas respostas.
Estou olhando para o recurso de construção personalizada. Isso me dá um highchart-custom.src.js que não é conveniente de usar, pois não é um node_modules, então não posso importá-lo para meu aplicativo Angular de maneira regular. E todas as definições de tipo para o texto datilografado desapareceram.

Também o que quero dizer é módulo ES, completamente independente e pode ser importado para outros módulos ES. Veja como lodash e date-fns derrotaram underscore e momentjs , um dos fatores mais importantes é a capacidade de modularização como esta.

@jon-a-nygaard FYI

Estou correndo para isso também.
Eu tentei andar por aí com import * as Highstock from 'highcharts/highstock'; mas não tem nenhum efeito.

Olá, há algum tempo começamos a publicar nossos arquivos de peças como módulos ES, o que significa que você pode fazer import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' . Isso pode ajudar alguns sobre o assunto.

Também estamos trabalhando para tornar esses arquivos de peças mais autônomos, o que deve melhorar os recursos de trepidação de árvores. É um pouco difícil no momento dar um bom ETA para quando isso será publicado, mas os manterei atualizados assim que souber um pouco mais.

Oi,

estou usando apenas o tipo 'stockChart' e encontrei o mesmo problema, mas encontrei uma solução descrita aqui:
https://github.com/highcharts/highcharts-angular#core

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

em vez de :
import * as Highcharts from 'highcharts/highstock';

agora no bundle, fica assim:

Estou usando highcharts-react que usa a sintaxe de importação *. Eu não estou desistindo ainda, mas não consegui fazer o tree shake funcionar até agora.

https://github.com/highcharts/highcharts-react/blob/08cd61ca178276d716ae65fba76e1d07924b2838/src/HighchartsReact.d.ts#L6

Minha solução atual: módulo Alias ​​Highcharts no módulo Highstock.

Você pode usar tanto o tipo de gráfico (Highcharts/Highstock) quanto o tamanho do pacote menor 🥇 .

Isso pode ser feito com o Webpack (verifique "resolve.alias" na documentação do Webpack para obter mais informações):

    alias: {
      highcharts$: 'highcharts/highstock.js',
    }

Você pode fazer alias com o Babel para (babel-plugin-module-resolver).

Seria bom se pudéssemos modularizar toda a lib.

Observe que Highstock pode ser carregado como um módulo para Highcharts, usando o módulo modules/stock.js . Como mencionado acima:

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

@pawelfus De alguma forma isso falha nos meus testes com: TypeError: Highcharts.stockChart is not a function

Não há problemas de tipo e o próprio aplicativo também funciona. Estou usando jest. Qualquer ideia?

ATUALIZAR
Descobri que resolver o módulo de forma diferente em jest.config.js funciona:

  moduleNameMapper: {
    '^highcharts$': '<rootDir>/node_modules/highcharts/highstock'
  },

Alguma atualização disso ? Considerando descartar Highcharts, pois é realmente uma biblioteca ENORME para importar para o meu projeto :(

Olá @Yohandah! Estamos na metade do caminho, como você pode ver em https://github.com/highcharts/highcharts/issues/12738.

Você pode usar a maioria dos módulos ES para trepidar a árvore. Embora isso não seja oficialmente suportado no momento (apenas masters), porque estamos movendo e dividindo arquivos agora. Portanto, com a próxima versão, os caminhos no exemplo serão diferentes.

import Chart from 'https://code.highcharts.com/es-modules/parts/Chart.js'
import SVGRenderer from 'https://code.highcharts.com/es-modules/parts/SVGRenderer.js'
new Chart('container', { /* ...options... */ });

https://jsfiddle.net/xtof0m14/