Highcharts: ¿Modular Highchart? Capacidad de sacudir árboles.

Hola @envil ,
Al principio, le aconsejo que cargue solo highstock.js que incluye todas las funciones de Highcharts. También puede crear su archivo personalizado con nuestra herramienta aquí:

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

Highcharts lib ya está modularizado: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

Gracias por sus respuestas.
Estoy mirando la función de compilación personalizada. Me da un highchart-custom.src.js que no es nada conveniente de usar ya que no es un node_modules, por lo que no puedo importarlo a mi aplicación Angular de manera regular. Y todas las definiciones de tipo para el mecanografiado se han ido.

También me refiero al módulo ES, completamente independiente y que se puede importar a otros módulos ES. Vea cómo lodash y date-fns han derrotado a underscore y momentjs , uno de los factores más importantes es la capacidad de modularización como esta.

@jon-a-nygaard FYI

Me estoy encontrando con esto también.
Intenté andar con import * as Highstock from 'highcharts/highstock'; pero no tuvo ningún efecto.

Hola, hace un tiempo comenzamos a publicar nuestros archivos de piezas como módulos ES, lo que significa que puedes hacer import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' . Esto puede ayudar a algunos en el tema.

Actualmente, también estamos trabajando para hacer que estos archivos de piezas sean más independientes, lo que debería mejorar las capacidades de agitación de árboles. Es un poco difícil en este momento dar una buena ETA de cuándo se publicará esto, pero los mantendré informados tan pronto como sepa algo más.

Hola,

Estoy usando solo el tipo 'stockChart' y me encontré con el mismo problema, pero encontré una solución que se describe aquí:
https://github.com/highcharts/highcharts-angular#core

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

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

ahora en paquete, se ve así:

Estoy usando highcharts-react que usa la sintaxis import *. Todavía no me doy por vencido, pero hasta ahora no he podido hacer que la sacudida de árboles funcione.

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

Mi solución actual: el módulo Alias ​​Highcharts en el módulo Highstock.

Puede usar tanto el tipo de gráfico (Highcharts/Highstock) como el tamaño de paquete más bajo 🥇.

Esto se puede hacer con Webpack (consulte "resolve.alias" en la documentación de Webpack para obtener más información):

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

Puede crear un alias con Babel para (babel-plugin-module-resolver).

Sería bueno si pudiéramos modularizar toda la librería.

Tenga en cuenta que Highstock se puede cargar como un módulo en Highcharts, utilizando el módulo modules/stock.js . Como se mencionó anteriormente:

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

@pawelfus De alguna manera eso falla en mis pruebas con: TypeError: Highcharts.stockChart is not a function

Sin embargo, no hay problemas de tipo y la aplicación en sí también funciona. Estoy usando broma. ¿Alguna idea?

ACTUALIZAR
Descubrí que resolver el módulo de manera diferente en jest.config.js funciona:

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

Algún avance en esto ? Considero eliminar Highcharts ya que es realmente una ENORME biblioteca para importar a mi proyecto :(

¡Hola @Yohandah! Estamos a mitad de camino, como puede ver en https://github.com/highcharts/highcharts/issues/12738.

Puede usar la mayoría de los módulos ES para sacudir árboles. Aunque por el momento esto no es oficialmente compatible (solo maestros), porque estamos moviendo y dividiendo archivos en este momento. Entonces, con la próxima versión, las rutas en el ejemplo serán 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/