[Snyk] Upgrade highcharts from 11.3.0 to 11.4.8 (#2354)

Author: malhanpraveen

package-lock.json

@@ -72,7 +72,7 @@
         "@floating-ui/dom": "^1.6.12",
         "@google/model-viewer": "^4.0.0",
         "@marko-tags/subscribe": "^0.5.1",
-        "highcharts": "11.3.0",
+        "highcharts": "11.4.8",
         "makeup-active-descendant": "0.7.4",
         "makeup-expander": "~0.11.4",
         "makeup-floating-label": "~0.4.5",

package.json

@@ -65,7 +65,7 @@ export const chartFontFamily = '"Market Sans", Arial, sans-serif',
     ],
     // function is used to set up the colors including lineColor(svg stroke) on each of the series objects
     // based on the length of the series array
-    setSeriesColors = function (series: Highcharts.PlotAreaOptions[]) {
+    setSeriesColors = function (series: Highcharts.SeriesOptions[]) {
         const strokeColorMapping = [
             chartPrimaryColor,
             chartSecondaryColor,
@@ -77,11 +77,17 @@ export const chartFontFamily = '"Market Sans", Arial, sans-serif',
         for (let i = 0; i < series.length; i++) {
             // Added a modulus in case the user passes in more than 5 series so it doesn't error out
             const color = strokeColorMapping[i % strokeColorMapping.length];
-            series[i].lineColor = color;
-            series[i].borderColor = color;
-            series[i].fillOpacity = 1; 
+            if (series[i].type === "bar") {
+                (series[i] as Highcharts.SeriesBarOptions).borderColor = color;
+                (series[i] as Highcharts.SeriesBarOptions).color = color;
+            }
+            else {
+                (series[i] as Highcharts.SeriesAreaOptions).lineColor = color;
+                (series[i] as Highcharts.SeriesAreaOptions).fillOpacity = 1;
+            }
         }
     },
+
     setDonutColors = function (series: any) {
         const colors = [
             { lineColor: chartPrimaryColor, borderColor: chartPrimaryColor },
@@ -112,7 +118,7 @@ export const chartFontFamily = '"Market Sans", Arial, sans-serif',
 
         return colors.map((color: any) => color.lineColor);
     },
-    setSeriesMarkerStyles = function (series: Highcharts.PlotAreaOptions[]) {
+    setSeriesMarkerStyles = function (series: Highcharts.SeriesAreaOptions[]) {
         series.forEach((s, i) => {
             s.zIndex = series.length - i;
             s.marker = {

src/common/charts/shared.ts

@@ -32,7 +32,7 @@ interface SeriesItem
 interface BarChartInput
     extends Omit<Marko.Input<"div">, `on${string}` | "title"> {
     title: Highcharts.TitleOptions["text"];
-    description?: Highcharts.PlotSeriesOptions["description"];
+    description?: Highcharts.SeriesOptionsType["description"];
     "x-axis-label-format"?: Highcharts.XAxisLabelsOptions["format"];
     "x-axis-positioner"?: Highcharts.XAxisOptions["tickPositioner"];
     "y-axis-labels"?: Highcharts.YAxisLabelsOptions["format"][];
@@ -98,6 +98,7 @@ class BarChart extends Marko.Component<Input> {
             : [this.input.series];
         const stacked = this.input.stacked;
         const title = this.input.title;
+        
         // controls rounded corders and spacing at the bottom of data points
         if (stacked) {
             series[0].bottom = true; // set a variable on the first series so it renders rounder corners on the bottom of the bar
@@ -115,7 +116,9 @@ class BarChart extends Marko.Component<Input> {
                 s.bottom = true;
             });
         }
-        setSeriesColors(series);
+
+        // Cast series to Highcharts.SeriesBarOptions[] to avoid type errors
+        setSeriesColors(series as Highcharts.SeriesBarOptions[]);
 
         const config: Highcharts.Options = {
             title: {

src/components/ebay-bar-chart/component.ts

@@ -11,7 +11,7 @@ import type { LegendItem } from "../ebay-chart-legend/component";
 import type HighchartsTypes from "highcharts";
 declare const Highcharts: typeof HighchartsTypes;
 
-interface SeriesDonutOptions extends Omit<Highcharts.SeriesPieOptions, "type"> {
+interface SeriesDonutOptions extends Omit<Highcharts.SeriesOptions, "type"> {
     data: Highcharts.PointOptionsObject[];
     type?: "pie" | "variablepie";
 }
@@ -26,7 +26,7 @@ interface DonutChartInput
     "cdn-highcharts-pattern-fill"?: string;
     version?: string;
     series: SeriesDonutOptions[];
-    highchartsDescription?: Highcharts.PlotSeriesOptions["description"];
+    highchartsDescription?: string;
 }
 
 export interface Input extends WithNormalizedProps<DonutChartInput> {}
@@ -77,7 +77,7 @@ class DonutChart extends Marko.Component<Input> {
      */
     _setupChart() {
         // Set default type to "pie"
-        const series = this.input.series.map((series) => ({
+        const series = this.input.series?.map((series) => ({
             ...series,
             type: series.type || "pie",
         })) as Highcharts.SeriesOptionsType[];

src/components/ebay-donut-chart/component.ts

@@ -23,14 +23,15 @@ import tooltipTemplate from "./tooltip.marko";
 import type HighchartsTypes from "highcharts";
 declare const Highcharts: typeof HighchartsTypes;
 
-interface SeriesLineOptions extends Highcharts.SeriesLineOptions {
+interface SeriesLineOptions extends Highcharts.PlotLineOptions {
     data: Highcharts.PointOptionsObject[];
+    type: "line",
 }
 
 interface LineChartInput
     extends Omit<Marko.Input<"div">, `on${string}` | "title"> {
     title?: Highcharts.TitleOptions["text"];
-    description?: Highcharts.PlotSeriesOptions["description"];
+    description?: Highcharts.PlotLineOptions["description"];
     "x-axis-label-format"?: Highcharts.XAxisLabelsOptions["format"];
     "x-axis-positioner"?: Highcharts.XAxisOptions["tickPositioner"];
     "y-axis-labels"?: Highcharts.YAxisLabelsOptions["format"][];