Missing type definition on resetZoomButton & #10274 is not working on 7.1.0

briankpw commented 5 years ago

Expected behaviour

chart.resetZoomButton should able to apply theme, Highcharts.setOption(theme) & Range Selector and Navigator should able to apply theme on 7.1.0

on 7.0.3 resetZoomButton apply theme is working but 7.1.0 is not working.

#10274

Actual behaviour

No theme apply on Range Selector and Navigator on 7.1.0

Reset Zoom able to apply theme, but the error message is coming out when run and build the project in angular.

Error

src/app/app.component.ts(178,27): error TS2345: Argument of type '{ colors: string[]; chart: { backgroundColor: string; style: { fontFamily: string; }; plotBorderC...' is not assignable to parameter of type 'Options'.
  Types of property 'chart' are incompatible.
    Type '{ backgroundColor: string; style: { fontFamily: string; }; plotBorderColor: string; selectionMark...' is not assignable to type 'ChartOptions'.
      Types of property 'resetZoomButton' are incompatible.
        Type '{ position: { x: number; y: number; }; theme: { fill: string; stroke: string; style: { color: str...' is not assignable to type 'ChartResetZoomButtonOptions'.
          Types of property 'theme' are incompatible.
            Type '{ fill: string; stroke: string; style: { color: string; }; states: { hover: { fill: string; style...' is not assignable to type 'SVGAttributes'.
              Types of property 'states' are incompatible.
                Type '{ hover: { fill: string; style: { color: string; }; }; }' is not assignable to type 'CSSObject'.
                  Property 'hover' is incompatible with index signature.
                    Type '{ fill: string; style: { color: string; }; }' is not assignable to type 'string | number | boolean'.
                      Type '{ fill: string; style: { color: string; }; }' is not assignable to type 'false'.
src/app/app.component.ts(194,5): error TS2687: All declarations of 'color' must have identical modifiers.
src/app/app.component.ts(194,5): error TS2717: Subsequent property declarations must have the same type.  Property 'color' must be of type 'string | GradientColorObject | PatternObject', but here has type 'string'.

Live demo with steps to reproduce

https://stackblitz.com/edit/highchart-angular-theme?file=app%2Fapp.component.ts

Product version

Highcharts v7.1.0 and highchart-angular 2.4.0

Affected browser(s)

bre1470 commented 5 years ago

Thank you for the report, @briankpw !

Can you please provide the source code with it? The error message indicates, that your color type in the component is incomplete: Subsequent property declarations must have the same type. Property 'color' must be of type 'string | GradientColorObject | PatternObject', but here has type 'string'.

briankpw commented 5 years ago

Hi @bre1470,

For version 7.1.1, the issues is fixed for resetZoom

Range Selector, Navigator, Boxplot still unable to apply theme into the chart.

New error for drilldown.drillUpButton.theme.states.hover.select

Type '{ fill: string; style: { color: string; }; select: { stroke: string; fill: string; }; }' is not assignable to type 'ButtonTheme'.
  Object literal may only specify known properties, and 'select' does not exist in type 'ButtonTheme'.ts(2322)
index.d.ts(1557, 13): The expected type comes from property 'hover' which is declared here on type '{ hover?: ButtonTheme; select?: ButtonTheme; }'

bre1470 commented 5 years ago

Hello @briankpw !

Thank you for your feedback. The option path drilldown.drillUpButton.theme.states.hover.select is not valid, it should be either drilldown.drillUpButton.theme.states.hover or drilldown.drillUpButton.theme.states.select.

highcharts / highcharts