highcharts / highcharts-editor

https://www.highcharts.com/products/highcharts-editor
Other
248 stars 95 forks source link

Provide more feature options for the "Customize" pane #152

Open gkjohnson opened 6 years ago

gkjohnson commented 6 years ago

I'd like to make a pretty minimal editor that just lets people edit the data series, but there aren't enough options to do so. At the moment it's all-or-nothing with the customize tab. Being able to selectively disable menus and widgets would allow for the flexibility to minimize the UI just to what you need. Something like:

highed.Editor(document.body, {
  features: {
    templates: true,  // shows tabs for both the customize and template panes
    customize: {
      dataseries: true  // shows only the data series menu in the customize pane
    }
  }
})

I know this is still very new and there's still a lot of churn, but I just thought I'd throw a few of my two cents in! This is exciting!

cvasseng commented 6 years ago

Hi,

there is actually a system that can do this in place already, but for the options it was limited to the SimpleEditor (actually, it was supposed to have worked for the main editor too, but the options weren't passed to the customizer constructor properly). Anyway, the bug causing it to not work for the regular editor is fixed in master now. Please note that it's a bit cumbersome right now - we'll be simplifying it quite a bit going forward.

Here's how to only show the data series options, and only the customizer and templates:

highed.Editor(document.body, {
  features: [
    'templates',
    'customize'
  ],
  customizer: {
    availableSettings: [
      'series--type',
      'series--color',
      'series',
      'series--negativeColor',
      'series--colorByPoint',
      'series--dashStyle',
      'series-marker--enabled',
      'series-marker--symbol'
    ]
  }
})

Maybe you could use this as a temporary workaround until the system is more elaborate.

You'll have to build the editor yourself to make it work, clone and run npm install && gulp && gulp complete in the project root.