Skip to content

Commit

Permalink
feat: fix typescript issues
Browse files Browse the repository at this point in the history
  • Loading branch information
mhobizal-ebay committed Jan 17, 2025
1 parent f79094c commit 97d3e85
Showing 5 changed files with 24 additions and 13 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
16 changes: 11 additions & 5 deletions src/common/charts/shared.ts
Original file line number Diff line number Diff line change
@@ -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 = {
7 changes: 5 additions & 2 deletions src/components/ebay-bar-chart/component.ts
Original file line number Diff line number Diff line change
@@ -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: {
6 changes: 3 additions & 3 deletions src/components/ebay-donut-chart/component.ts
Original file line number Diff line number Diff line change
@@ -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[];
5 changes: 3 additions & 2 deletions src/components/ebay-line-chart/component.ts
Original file line number Diff line number Diff line change
@@ -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"][];

0 comments on commit 97d3e85

Please sign in to comment.