import * as Configuration from '../src/configuration';
const generateThemePickerHTML = (container) => {
const div = document.createElement('div');
div.id = 'theme-picker';
div.innerHTML = `
`;
container.querySelector('#charting-controls').appendChild(div);
};
const colorPairingOptions = Configuration.color.pairingOptions;
const generateColorPalettePickerHTML = (container, chart) => {
const chartOptions = chart.model.getOptions();
const { numberOfVariants: variants, option } = chartOptions.color.pairing;
const numberOfVariants =
variants || chart.model.getAllDataGroupsNames().length;
let onlyCategoricalPaletteIsApplicable = false;
if (chart.model.getAllDataGroupsNames().length > 5) {
onlyCategoricalPaletteIsApplicable = true;
}
const selectedColorPalette = `${numberOfVariants}-${option}`;
const div = document.createElement('div');
div.id = 'color-palette-picker';
div.innerHTML = `
`;
div.querySelector('#color-palette-select').addEventListener(
'change',
(e: any) => {
const { value } = e.target;
const [numberOfVariants, pairingOption] = value.split(
'-color-option-'
);
chartOptions.color.pairing.numberOfVariants = numberOfVariants;
chartOptions.color.pairing.option = pairingOption;
chart.model.setOptions(chartOptions);
}
);
container.querySelector('#charting-controls').appendChild(div);
};
export const addControls = (container, chart) => {
generateThemePickerHTML(container);
generateColorPalettePickerHTML(container, chart);
addRadioButtonEventListeners(container, chart);
};
export const addRadioButtonEventListeners = (container, chart) => {
// Add event listeners for radio buttons
const radioButtons = container.querySelectorAll(
'div#theme-picker input.bx--radio-button'
);
radioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', (e: any) => {
const theme = e.target.value;
container.setAttribute('class', `container theme--${theme}`);
chart.update();
});
});
};
/**
* Generates random data going backwards from now once a minute
* @param {number} quantity number of data points to create
* @param {number} min min range of integer value
* @param {number} max max range of integer value
* @returns {array} randomly generated array of objects with a date and value field
*/
export const generateRandomData = (quantity, min, max) => {
const now = Date.now();
return Array(quantity)
.fill(0)
.map((value, index) => {
return {
group: 'group',
value: Math.floor(Math.random() * (max - min + 1) + min),
date: new Date(now.valueOf() + (index - quantity) * 60000), // go forward a minute for every value
};
});
};
/**
* Adds a generate demo data form to the story
*/
export const generateHighScaleDemoDataForm = () =>
``;
export const addDemoDataFormListeners = (container, demo, chart) => {
// Add event listeners for form
const form = container.querySelector('form#demo-data');
if (form) {
form.addEventListener('submit', (e: any) => {
e.stopPropagation();
e.preventDefault();
const recordsToGenerate =
parseInt(e.currentTarget[0].value) || 2000;
chart.model.setData(
generateRandomData(recordsToGenerate, 100, 500)
);
chart.update();
});
}
};