@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
159 lines (158 loc) • 4.68 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const highcharts_1 = require("@internal/highcharts");
const shared_1 = require("../../common/charts/shared");
const donut_1 = require("../../common/charts/donut");
const donut_tooltip_marko_1 = __importDefault(require("./donut-tooltip.marko"));
class DonutChart {
// Handle CDN Loader errors
handleError(err) {
this.emit("load-error", err);
}
// Handle CDN Loader success
handleSuccess() {
this._initializeHighchartsExtensions();
this._setupChart();
}
onMount() {
(0, highcharts_1.load)()
.then(() => {
this.handleSuccess();
})
.catch((e) => {
this.handleError(e);
});
}
/**
* Generate a unique id for the container element.
*
* @returns {string} The id of the container element
*/
getContainerId() {
return `ebay-donut-graph-${this.id}`;
}
/**
* Initializes highcharts extensions
*/
_initializeHighchartsExtensions() {
// Adds spacing between donut slices
(0, donut_1.ebayDonut)(Highcharts);
}
/**
* Set up the chart with the input data and configuration options.
*/
_setupChart() {
var _a;
// Set default type to "pie"
const series = (_a = this.input.series) === null || _a === void 0 ? void 0 : _a.map((series) => (Object.assign(Object.assign({}, series), { type: series.type || "pie" })));
// Check series length, DS only supports one series
if (series.length > 1) {
console.warn("Donut chart only supports one series");
}
// Set the path colors and border colors for the series data
const colors = (0, shared_1.setDonutColors)(series[0]);
const chart = this.getChartConfig();
const plotOptions = this.getPlotOptions();
const tooltip = this.getTooltipConfig();
const config = {
chart,
colors,
title: {
text: undefined,
},
plotOptions,
series,
tooltip,
credits: {
enabled: false,
},
};
this.chartRef = Highcharts.chart(this.getContainerId(), config);
}
/**
* Chart configuration options: configures the chart type, background color, font family, events.
*
* @returns {Highcharts.ChartOptions}
*/
getChartConfig() {
return {
type: "pie",
spacing: [0, 0, 0, 0],
margin: [0, 0, 0, 0],
backgroundColor: shared_1.backgroundColor,
style: {
fontFamily: shared_1.chartFontFamily,
},
};
}
/**
* Configures the pie plot options: thickness.
*
* @returns {Highcharts.PlotOptions}
*/
getPlotOptions() {
return {
pie: {
description: this.input.highchartsDescription,
size: "100%",
thickness: 10,
allowPointSelect: false,
cursor: "pointer",
borderRadius: "30%",
dataLabels: {
enabled: false,
},
states: {
hover: {
halo: { size: 0 },
},
},
},
};
}
/**
* Format tooltip to match design specs.
*
* @returns {Highcharts.TooltipOptions}
*/
getTooltipConfig() {
return {
formatter: function (a) {
return donut_tooltip_marko_1.default.renderToString({
name: this.name,
value: `${this.y}`,
});
},
hideDelay: 250,
useHTML: true,
backgroundColor: "transparent",
padding: 0,
borderWidth: 0,
borderRadius: 0,
outside: true,
shadow: false,
shared: true,
style: {
fontSize: "12px",
},
};
}
/**
* Returns the legend items for the chart.
*
* @returns {LegendItem[]}
*/
getLegendItems() {
const { series } = this.input;
return series[0].data.map((point) => {
return {
name: point.name,
value: point.y,
};
});
}
}
module.exports = DonutChart;