38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import dynamic from "next/dynamic";
|
|
import React, { useMemo, useState } from "react";
|
|
|
|
import { QuestionWithHistoryFragment } from "../../../fragments.generated";
|
|
import { Props as InnerChartProps } from "./InnerChart"; // hopefully doesn't import code, just types - need to check
|
|
import { InnerChartPlaceholder } from "./InnerChartPlaceholder";
|
|
import { Legend } from "./Legend";
|
|
import { buildChartData, chartColors } from "./utils";
|
|
|
|
const InnerChart = dynamic<InnerChartProps>(
|
|
() => import("./InnerChart").then((mod) => mod.InnerChart),
|
|
{ ssr: false, loading: () => <InnerChartPlaceholder /> }
|
|
);
|
|
|
|
interface Props {
|
|
question: QuestionWithHistoryFragment;
|
|
}
|
|
|
|
export const HistoryChart: React.FC<Props> = ({ question }) => {
|
|
// maybe use context instead?
|
|
const [highlight, setHighlight] = useState<number | undefined>(undefined);
|
|
|
|
const data = useMemo(() => buildChartData(question), [question]);
|
|
|
|
return (
|
|
<div className="flex items-center flex-col space-y-4 sm:flex-row sm:space-y-0">
|
|
<InnerChart data={data} highlight={highlight} />
|
|
<Legend
|
|
items={data.seriesNames.map((name, i) => ({
|
|
name,
|
|
color: chartColors[i],
|
|
}))}
|
|
setHighlight={setHighlight}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|