From 97d3e856eaf1f53948d2d0e2bc8fbae1e4617050 Mon Sep 17 00:00:00 2001 From: Mike Hobizal Date: Fri, 17 Jan 2025 11:24:51 -0800 Subject: [PATCH] feat: fix typescript issues --- package.json | 3 ++- src/common/charts/shared.ts | 16 +++++++++++----- src/components/ebay-bar-chart/component.ts | 7 +++++-- src/components/ebay-donut-chart/component.ts | 6 +++--- src/components/ebay-line-chart/component.ts | 5 +++-- 5 files changed, 24 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index bfbd0441c..c6e19d36f 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,8 @@ "makeup-roving-tabindex": "~0.7.3", "makeup-screenreader-trap": "~0.5.3", "makeup-typeahead": "^0.3.3", - "shaka-player": "4.12.5" + "shaka-player": "4.12.5", + "three": "^0.172.0" }, "devDependencies": { "@babel/cli": "^7.26.4", diff --git a/src/common/charts/shared.ts b/src/common/charts/shared.ts index e4c689c87..22302a6a2 100644 --- a/src/common/charts/shared.ts +++ b/src/common/charts/shared.ts @@ -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 = { diff --git a/src/components/ebay-bar-chart/component.ts b/src/components/ebay-bar-chart/component.ts index ba1a6a77e..089731721 100644 --- a/src/components/ebay-bar-chart/component.ts +++ b/src/components/ebay-bar-chart/component.ts @@ -32,7 +32,7 @@ interface SeriesItem interface BarChartInput extends Omit, `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 { : [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 { s.bottom = true; }); } - setSeriesColors(series); + + // Cast series to Highcharts.SeriesBarOptions[] to avoid type errors + setSeriesColors(series as Highcharts.SeriesBarOptions[]); const config: Highcharts.Options = { title: { diff --git a/src/components/ebay-donut-chart/component.ts b/src/components/ebay-donut-chart/component.ts index af0895780..7d500b384 100644 --- a/src/components/ebay-donut-chart/component.ts +++ b/src/components/ebay-donut-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 { +interface SeriesDonutOptions extends Omit { 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 {} @@ -77,7 +77,7 @@ class DonutChart extends Marko.Component { */ _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[]; diff --git a/src/components/ebay-line-chart/component.ts b/src/components/ebay-line-chart/component.ts index 8d7212db4..c085b33db 100644 --- a/src/components/ebay-line-chart/component.ts +++ b/src/components/ebay-line-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, `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"][];