Skip to content

Reduce charts bundle size #104697

@timroes

Description

@timroes

Did some investigation. The easiest way to save some bytes is to not require the color package in the main bundle.

This is where it's used:

MappedColors
-> palettes (charts)
-> LegacyColorsService
   -> ChartsPlugin (setup/start)
      -> initVisConfig (Vis) vislib
         -> render (Vis) vislib  async!
         -> render (VisController) vislib async!
lightenColor
-> palettes (charts)
-> ColorPicker (charts)
   -> getColorPicker (vis_type_xy)
      -> VisComponent (vis_type_xy) react component
         -> xyVisRenderer.render (vis_type_xy) async!
   -> getColorPicker (vis_type_pie)
      -> PieComponent (vis_type_pie) react component
         -> getPieVisRenderer (vis_type_pie) async!
-> getLayers (vis_type_pie)
      -> PieComponent (vis_type_pie) react component
         -> getPieVisRenderer (vis_type_pie) async!
createColorPalette doesn't actually need the color package

Plan:

  • Lazy load legacy color service (getLegacyColorService: Promise on contract instead of instance)
  • Resolve in render method of VisController in vislib and pass down to initVisConfig
  • Pass this service getter into PaletteService - resolve there in getPalettes and pass to buildPalettes (use sync in there)

  • Remove static export lightenColor
  • Turn into getLightenColorService: Promise on contract)
  • Pass this service getter into PaletteService - resolve there in getPalettes and pass to buildPalettes (use sync in there)
  • Resolve getLightenColorService in getPieVisRenderer and in xyVisRenderer - pass down from there through component to getColorPicker and getLayers in sync way

  • Make ColorPicker a lazy component which is exported statically (handles async-ness in react)

  • Inline small helper to turn hsl into hex (it's just a couple of lines instead of the whole color package)

Will probably save between 30 and 40%

Extracted from #103749

Metadata

Metadata

Assignees

No one assigned

    Labels

    Feature:VisualizationsGeneric visualization features (in case no more specific feature label is available)Team:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//performance

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions