import { whisper, React, ReactWhisper } from '@oliveai/ldk';
import { AxisScale, SeriesColor, SeriesType } from '@oliveai/ldk/dist/whisper/types';
import { onActionWrapper } from '../utils';
const generateSeries = (inputs: SeriesInput[]) =>
for (let i = 0; i < (input.numberOfPoints || 20); i += 1) {
const x = Math.floor(Math.random() * 100);
const y = Math.floor(Math.random() * 100);
return { ...input, data };
type RegenerateButtonParams = {
setter: React.Dispatch<React.SetStateAction<SeriesInput[]>>;
seriesData: SeriesInput[];
const RegenerateButton = ({ setter, seriesData }: RegenerateButtonParams) => {
const handleClick = () => {
setter(generateSeries(seriesData));
<oh-box justifyContent={whisper.JustifyContent.Center} direction={whisper.Direction.Horizontal}>
<oh-button label="Regenerate Chart Data" onClick={handleClick} />
export const testChart = (): Promise<boolean> =>
new Promise(async (resolve, reject) => {
const resolverMap = new Map([
const ConfirmationButtons = ({
const [isTested, setIsTested] = React.useState(false);
const handleClick: whisper.WhisperHandler = (error, thisWhisper) => {
onActionWrapper(error, testName, resolverMap, thisWhisper, resolve, reject);
justifyContent={whisper.JustifyContent.Center}
direction={whisper.Direction.Horizontal}
<oh-markdown body={question} />
justifyContent={whisper.JustifyContent.Center}
direction={whisper.Direction.Horizontal}
<oh-button label="Yes" onClick={handleClick} />
<oh-button label="No" onClick={() => reject(new Error(`${testName} failed`))} />
const AreaGraph = () => {
chartTitle="Area Graph Test"
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
question="Does the chart display an area graph, custom axis labels, and a tooltip when you hover your mouse?"
type: SeriesType.VerticalBar,
type: SeriesType.VerticalBar,
const [series, setSeries] = React.useState(generateSeries(seriesData));
chartTitle="Bar Graph Test"
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
question="Does the chart display a bar graph, custom axis labels, and a tooltip when you hover your mouse? Are the bars for Test Bars 1 wider than Test Bars 2?"
<RegenerateButton setter={setSeries} seriesData={seriesData} />
const LineGraph = () => {
const [series, setSeries] = React.useState(generateSeries(seriesData));
const [sortedSeries, setSortedSeries] = React.useState(series);
series.map((unsortedSeries) => {
const data = unsortedSeries.data.sort((a, b) => a.x - b.x);
chartTitle="Line Graph Test"
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
question="Does the chart display a line graph, custom axis labels, and a tooltip when you hover your mouse?"
<RegenerateButton setter={setSeries} seriesData={seriesData} />
const MarkGraph = () => {
const [series, setSeries] = React.useState(generateSeries(seriesData));
chartTitle="Mark Graph Test"
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
question="Does the chart display a mark graph, custom axis labels, and a tooltip when you hover your mouse?"
<RegenerateButton setter={setSeries} seriesData={seriesData} />
const FourSeries = () => {
const seriesData: SeriesInput[] = [
type: SeriesType.VerticalBar,
const [series, setSeries] = React.useState(generateSeries(seriesData));
chartTitle="Four Series Test"
xAxisLabel="Custom X Axis Label"
yAxisLabel="Custom Y Axis Label"
question="Does the chart display area, bar, line, and mark graphs?"
<RegenerateButton setter={setSeries} seriesData={seriesData} />
const ChartTest = () => (
<oh-whisper label="Chart Test" onClose={() => console.debug('closed')}>
ReactWhisper.renderNewWhisper(<ChartTest />);