154 lines
3.1 KiB
JavaScript
154 lines
3.1 KiB
JavaScript
export class ApexOptionsBuilder {
|
|
formatters = {
|
|
["Default"]: val => Math.round(val * 100) / 100,
|
|
["Thousands"]: val => `${Math.round(val / 1000)}K`,
|
|
["Millions"]: val => `${Math.round(val / 1000000)}M`,
|
|
}
|
|
options = {
|
|
series: [],
|
|
legend: {
|
|
show: false,
|
|
position: "top",
|
|
horizontalAlign: "right",
|
|
showForSingleSeries: true,
|
|
showForNullSeries: true,
|
|
showForZeroSeries: true,
|
|
},
|
|
chart: {
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: this.formatters.Default,
|
|
},
|
|
},
|
|
}
|
|
|
|
setOption(path, value) {
|
|
if (value == null || value === "") {
|
|
return this
|
|
}
|
|
let tmp = this.options
|
|
for (let i = 0; i < path.length - 1; i++) {
|
|
const step = path[i]
|
|
if (!tmp[step]) {
|
|
tmp[step] = {}
|
|
}
|
|
tmp = tmp[step]
|
|
}
|
|
tmp[path[path.length - 1]] = value
|
|
return this
|
|
}
|
|
|
|
getOptions() {
|
|
return this.options
|
|
}
|
|
|
|
type(type) {
|
|
return this.setOption(["chart", "type"], type)
|
|
}
|
|
|
|
title(title) {
|
|
return this.setOption(["title", "text"], title)
|
|
}
|
|
|
|
color(color) {
|
|
return this.setOption(["colors"], [color])
|
|
}
|
|
|
|
width(width) {
|
|
return this.setOption(["chart", "width"], width || undefined)
|
|
}
|
|
|
|
height(height) {
|
|
return this.setOption(["chart", "height"], height || undefined)
|
|
}
|
|
|
|
xLabel(label) {
|
|
return this.setOption(["xaxis", "title", "text"], label)
|
|
}
|
|
|
|
yLabel(label) {
|
|
return this.setOption(["yaxis", "title", "text"], label)
|
|
}
|
|
|
|
categories(categories) {
|
|
return this.setOption(["xaxis", "categories"], categories)
|
|
}
|
|
|
|
series(series) {
|
|
return this.setOption(["series"], series)
|
|
}
|
|
|
|
horizontal(horizontal) {
|
|
return this.setOption(["plotOptions", "bar", "horizontal"], horizontal)
|
|
}
|
|
|
|
dataLabels(dataLabels) {
|
|
return this.setOption(["dataLabels", "enabled"], dataLabels)
|
|
}
|
|
|
|
animate(animate) {
|
|
return this.setOption(["chart", "animations", "enabled"], animate)
|
|
}
|
|
|
|
curve(curve) {
|
|
return this.setOption(["stroke", "curve"], curve)
|
|
}
|
|
|
|
gradient(gradient) {
|
|
const fill = {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.9,
|
|
stops: [0, 90, 100],
|
|
},
|
|
}
|
|
return this.setOption(["fill"], gradient ? fill : undefined)
|
|
}
|
|
|
|
legend(legend) {
|
|
return this.setOption(["legend", "show"], legend)
|
|
}
|
|
|
|
legendPosition(position) {
|
|
return this.setOption(["legend", "position"], position)
|
|
}
|
|
|
|
stacked(stacked) {
|
|
return this.setOption(["chart", "stacked"], stacked)
|
|
}
|
|
|
|
labels(labels) {
|
|
return this.setOption(["labels"], labels)
|
|
}
|
|
|
|
yUnits(units) {
|
|
return this.setOption(
|
|
["yaxis", "labels", "formatter"],
|
|
this.formatters[units || "Default"]
|
|
)
|
|
}
|
|
|
|
xType(type) {
|
|
return this.setOption(["xaxis", "type"], type)
|
|
}
|
|
|
|
yTooltip(yTooltip) {
|
|
return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
|
|
}
|
|
|
|
palette(palette) {
|
|
return this.setOption(
|
|
["theme", "palette"],
|
|
palette.toLowerCase().replace(/[\W]/g, "")
|
|
)
|
|
}
|
|
}
|