baseddata.io/static/js/chart-params.js

140 lines
2.9 KiB
JavaScript

const fontScale = 0.8;
const backgroundColor = "#f9f9f9";
const tooltipBgColor = "#e7e7f5";
const textColor = "#373841";
const textStyleMain = {
fontFamily: "sans-serif",
fontSize: 12 * fontScale,
color: textColor,
};
const tooltip = {
borderColor: textColor,
backgroundColor: tooltipBgColor,
order: "seriesDesc",
textStyle: textStyleMain,
trigger: "axis",
};
const toolboxParams = {
itemSize: 16 * fontScale,
showTitle: true,
top: "-1%",
right: "20%",
iconStyle: {
borderColor: textColor,
borderWidth: 2,
},
feature: {
dataZoom: {
yAxisIndex: "none",
},
dataView: {},
saveAsImage: {
pixelRatio: 2,
},
},
};
const axisLabel = {
fontSize: 12 * fontScale,
color: textColor,
margin: 10,
};
const axisLine = {
show: true,
lineStyle: {
color: textColor,
width: 2,
},
};
const axisTick = { show: true };
const grid = {
bottom: 30,
top: 10,
left: 15,
containLabel: true,
};
const yaxisTextStyle = {
fontSize: 12 * fontScale,
padding: [0, 0, 10, 0],
color: textColor,
};
const yaxisTextStyle2 = {
fontSize: 12 * fontScale,
padding: [50, 0, 0, 0],
color: textColor,
};
function dataZoom() {
const dataZoom = [
{
type: "inside",
},
];
return dataZoom;
}
function nFormatter(value, digits) {
const lookup = [
{ value: 1, symbol: "" },
{ value: 1e3, symbol: "k" },
{ value: 1e6, symbol: "M" },
{ value: 1e9, symbol: "G" },
{ value: 1e12, symbol: "T" },
{ value: 1e15, symbol: "P" },
{ value: 1e18, symbol: "E" },
];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
const item = lookup
.slice()
.reverse()
.find((item) => value >= item.value);
return item
? (value / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
: "0";
}
function periodDropdown(periods, defaultIndex = 0) {
const modifiers = document.getElementById("chart-modifiers");
const dropdownContainer = document.createElement("div");
const dropdown = document.createElement("select");
const textNode = document.createTextNode("Select period: ");
dropdownContainer.id = "dropdown-container";
dropdown.id = "select-period-dropdown";
dropdownContainer.appendChild(textNode);
dropdownContainer.appendChild(dropdown);
modifiers.appendChild(dropdownContainer);
periods.forEach((period, index) => {
const option = document.createElement("option");
if (index === defaultIndex) {
option.selected = true;
}
option.value = period;
option.textContent = period;
dropdown.appendChild(option);
});
}
function getPeriodFromDropdown() {
let dropdown = document.getElementById("select-period-dropdown");
let selectedIndex = dropdown.selectedIndex;
return dropdown.options[selectedIndex].value;
}
window.addEventListener("resize", function () {
if (myChart != null && myChart != undefined) {
myChart.resize();
}
});