feat: lazy-load charts, avoid ssr
This commit is contained in:
Vyacheslav Matyukhin
parent
da66ea05f8
commit
8c5ed35c0f
|
|
@ -1,304 +0,0 @@
|
||||||
import {
|
|
||||||
addDays, differenceInDays, format, startOfDay, startOfToday, startOfTomorrow
|
|
||||||
} from "date-fns";
|
|
||||||
import React, { useMemo, useState } from "react";
|
|
||||||
import {
|
|
||||||
VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLine, VictoryScatter,
|
|
||||||
VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
|
|
||||||
} from "victory";
|
|
||||||
|
|
||||||
import { QuestionWithHistoryFragment } from "../../fragments.generated";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
question: QuestionWithHistoryFragment;
|
|
||||||
}
|
|
||||||
|
|
||||||
type DataSet = { x: Date; y: number; name: string }[];
|
|
||||||
|
|
||||||
const MAX_LINES = 5;
|
|
||||||
|
|
||||||
// number of colors should match MAX_LINES
|
|
||||||
// colors are taken from tailwind, https://tailwindcss.com/docs/customizing-colors
|
|
||||||
const colors = [
|
|
||||||
"#0284C7", // sky-600
|
|
||||||
"#DC2626", // red-600
|
|
||||||
"#15803D", // green-700
|
|
||||||
"#7E22CE", // purple-700
|
|
||||||
"#F59E0B", // amber-500
|
|
||||||
];
|
|
||||||
|
|
||||||
// can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children
|
|
||||||
const getVictoryGroup = ({
|
|
||||||
data,
|
|
||||||
i,
|
|
||||||
highlight,
|
|
||||||
}: {
|
|
||||||
data: DataSet;
|
|
||||||
i: number;
|
|
||||||
highlight?: boolean;
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<VictoryGroup color={colors[i] || "darkgray"} data={data} key={i}>
|
|
||||||
<VictoryLine
|
|
||||||
name={`line-${i}`}
|
|
||||||
style={{
|
|
||||||
data: {
|
|
||||||
strokeOpacity: highlight ? 1 : 0.5,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<VictoryScatter
|
|
||||||
name={`scatter-${i}`}
|
|
||||||
size={({ active }) => (active || highlight ? 3.75 : 3)}
|
|
||||||
/>
|
|
||||||
</VictoryGroup>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Legend: React.FC<{
|
|
||||||
items: { name: string; color: string }[];
|
|
||||||
setHighlight: (i: number | undefined) => void;
|
|
||||||
}> = ({ items, setHighlight }) => {
|
|
||||||
return (
|
|
||||||
<div className="space-y-2" onMouseLeave={() => setHighlight(undefined)}>
|
|
||||||
{items.map((item, i) => (
|
|
||||||
<div
|
|
||||||
className="flex items-center"
|
|
||||||
key={item.name}
|
|
||||||
onMouseOver={() => setHighlight(i)}
|
|
||||||
>
|
|
||||||
<svg className="mt-1 shrink-0" height="10" width="16">
|
|
||||||
<circle cx="4" cy="4" r="4" fill={item.color} />
|
|
||||||
</svg>
|
|
||||||
<span className="text-xs sm:text-sm sm:whitespace-nowrap sm:text-ellipsis sm:overflow-hidden sm:max-w-160">
|
|
||||||
{item.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const buildDataSets = (question: QuestionWithHistoryFragment) => {
|
|
||||||
let dataSetsNames = question.options
|
|
||||||
.sort((a, b) => {
|
|
||||||
if (a.probability > b.probability) {
|
|
||||||
return -1;
|
|
||||||
} else if (a.probability < b.probability) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return a.name < b.name ? -1 : 1; // needed for stable sorting - otherwise it's possible to get order mismatch in SSR vs client-side
|
|
||||||
})
|
|
||||||
.map((o) => o.name)
|
|
||||||
.slice(0, MAX_LINES);
|
|
||||||
|
|
||||||
const isBinary =
|
|
||||||
(dataSetsNames[0] === "Yes" && dataSetsNames[1] === "No") ||
|
|
||||||
(dataSetsNames[0] === "No" && dataSetsNames[1] === "Yes");
|
|
||||||
if (isBinary) {
|
|
||||||
dataSetsNames = ["Yes"];
|
|
||||||
}
|
|
||||||
|
|
||||||
const nameToIndex = Object.fromEntries(
|
|
||||||
dataSetsNames.map((name, i) => [name, i])
|
|
||||||
);
|
|
||||||
let dataSets: DataSet[] = [...Array(dataSetsNames.length)].map((x) => []);
|
|
||||||
|
|
||||||
const sortedHistory = question.history.sort((a, b) =>
|
|
||||||
a.timestamp < b.timestamp ? -1 : 1
|
|
||||||
);
|
|
||||||
|
|
||||||
{
|
|
||||||
let previousDate = -Infinity;
|
|
||||||
for (const item of sortedHistory) {
|
|
||||||
if (item.timestamp - previousDate < 12 * 60 * 60) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const date = new Date(item.timestamp * 1000);
|
|
||||||
|
|
||||||
for (const option of item.options) {
|
|
||||||
const idx = nameToIndex[option.name];
|
|
||||||
if (idx === undefined) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const result = {
|
|
||||||
x: date,
|
|
||||||
y: option.probability,
|
|
||||||
name: option.name,
|
|
||||||
};
|
|
||||||
dataSets[idx].push(result);
|
|
||||||
}
|
|
||||||
previousDate = item.timestamp;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let maxProbability = 0;
|
|
||||||
for (const dataSet of dataSets) {
|
|
||||||
for (const item of dataSet) {
|
|
||||||
maxProbability = Math.max(maxProbability, item.y);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const minDate = sortedHistory.length
|
|
||||||
? startOfDay(new Date(sortedHistory[0].timestamp * 1000))
|
|
||||||
: startOfToday();
|
|
||||||
const maxDate = sortedHistory.length
|
|
||||||
? addDays(
|
|
||||||
startOfDay(
|
|
||||||
new Date(sortedHistory[sortedHistory.length - 1].timestamp * 1000)
|
|
||||||
),
|
|
||||||
1
|
|
||||||
)
|
|
||||||
: startOfTomorrow();
|
|
||||||
|
|
||||||
const result = {
|
|
||||||
dataSets,
|
|
||||||
dataSetsNames,
|
|
||||||
maxProbability,
|
|
||||||
minDate,
|
|
||||||
maxDate,
|
|
||||||
};
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const HistoryChart: React.FC<Props> = ({ question }) => {
|
|
||||||
const [highlight, setHighlight] = useState<number | undefined>(undefined);
|
|
||||||
|
|
||||||
const { dataSets, dataSetsNames, maxProbability, minDate, maxDate } = useMemo(
|
|
||||||
() => buildDataSets(question),
|
|
||||||
[question]
|
|
||||||
);
|
|
||||||
|
|
||||||
const domainMax =
|
|
||||||
maxProbability < 0.5 ? Math.round(10 * (maxProbability + 0.05)) / 10 : 1;
|
|
||||||
const goldenRatio = (1 + Math.sqrt(5)) / 2;
|
|
||||||
const width = 750;
|
|
||||||
const height = width / goldenRatio;
|
|
||||||
const padding = {
|
|
||||||
top: 20,
|
|
||||||
bottom: 60,
|
|
||||||
left: 60,
|
|
||||||
right: 20,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-center flex-col sm:flex-row">
|
|
||||||
<VictoryChart
|
|
||||||
domainPadding={20}
|
|
||||||
padding={padding}
|
|
||||||
theme={VictoryTheme.material}
|
|
||||||
height={height}
|
|
||||||
width={width}
|
|
||||||
containerComponent={
|
|
||||||
<VictoryVoronoiContainer
|
|
||||||
labels={() => "Not shown"}
|
|
||||||
labelComponent={
|
|
||||||
<VictoryTooltip
|
|
||||||
constrainToVisibleArea
|
|
||||||
pointerLength={0}
|
|
||||||
dy={-12}
|
|
||||||
labelComponent={
|
|
||||||
<VictoryLabel
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
fontSize: 18,
|
|
||||||
fill: "black",
|
|
||||||
strokeWidth: 0.05,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
fontSize: 18,
|
|
||||||
fill: "#777",
|
|
||||||
strokeWidth: 0.05,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
text={({ datum }) =>
|
|
||||||
`${datum.name}: ${Math.round(datum.y * 100)}%\n${format(
|
|
||||||
datum.x,
|
|
||||||
"yyyy-MM-dd"
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
fontSize: 18, // needs to be set here and not just in labelComponent for text size calculations
|
|
||||||
fontFamily:
|
|
||||||
'"Gill Sans", "Gill Sans MT", "Seravek", "Trebuchet MS", sans-serif',
|
|
||||||
// default font family from Victory, need to be specified explicitly for some reason, otherwise text size gets miscalculated
|
|
||||||
}}
|
|
||||||
flyoutStyle={{
|
|
||||||
stroke: "#999",
|
|
||||||
fill: "white",
|
|
||||||
}}
|
|
||||||
cornerRadius={4}
|
|
||||||
flyoutPadding={{ top: 4, bottom: 4, left: 12, right: 12 }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
radius={50}
|
|
||||||
voronoiBlacklist={
|
|
||||||
[...Array(MAX_LINES).keys()].map((i) => `line-${i}`)
|
|
||||||
// see: https://github.com/FormidableLabs/victory/issues/545
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
scale={{
|
|
||||||
x: "time",
|
|
||||||
y: "linear",
|
|
||||||
}}
|
|
||||||
domain={{
|
|
||||||
x: [minDate, maxDate],
|
|
||||||
y: [0, domainMax],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<VictoryAxis
|
|
||||||
tickCount={Math.min(7, differenceInDays(maxDate, minDate) + 1)}
|
|
||||||
style={{
|
|
||||||
grid: { stroke: null, strokeWidth: 0.5 },
|
|
||||||
}}
|
|
||||||
tickLabelComponent={
|
|
||||||
<VictoryLabel
|
|
||||||
dx={-30}
|
|
||||||
dy={-3}
|
|
||||||
angle={-30}
|
|
||||||
style={{ fontSize: 18, fill: "#777" }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
scale={{ x: "time" }}
|
|
||||||
tickFormat={(t) => format(t, "yyyy-MM-dd")}
|
|
||||||
/>
|
|
||||||
<VictoryAxis
|
|
||||||
dependentAxis
|
|
||||||
style={{
|
|
||||||
grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
|
|
||||||
}}
|
|
||||||
tickLabelComponent={
|
|
||||||
<VictoryLabel dy={0} style={{ fontSize: 18, fill: "#777" }} />
|
|
||||||
}
|
|
||||||
// tickFormat specifies how ticks should be displayed
|
|
||||||
tickFormat={(x) => `${x * 100}%`}
|
|
||||||
/>
|
|
||||||
{[...Array(MAX_LINES).keys()]
|
|
||||||
.reverse() // affects svg render order, we want to render largest datasets on top of others
|
|
||||||
.filter((i) => i !== highlight)
|
|
||||||
.map((i) =>
|
|
||||||
getVictoryGroup({
|
|
||||||
data: dataSets[i],
|
|
||||||
i,
|
|
||||||
highlight: false,
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
{highlight === undefined
|
|
||||||
? null
|
|
||||||
: // render highlighted series on top of everything else
|
|
||||||
getVictoryGroup({
|
|
||||||
data: dataSets[highlight],
|
|
||||||
i: highlight,
|
|
||||||
highlight: true,
|
|
||||||
})}
|
|
||||||
</VictoryChart>
|
|
||||||
<Legend
|
|
||||||
items={dataSetsNames.map((name, i) => ({ name, color: colors[i] }))}
|
|
||||||
setHighlight={setHighlight}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
168
src/web/questions/components/HistoryChart/InnerChart.tsx
Normal file
168
src/web/questions/components/HistoryChart/InnerChart.tsx
Normal file
|
|
@ -0,0 +1,168 @@
|
||||||
|
import { differenceInDays, format } from "date-fns";
|
||||||
|
import {
|
||||||
|
VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLine, VictoryScatter,
|
||||||
|
VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
|
||||||
|
} from "victory";
|
||||||
|
|
||||||
|
import { chartColors, ChartData, ChartSeries, height, width } from "./utils";
|
||||||
|
|
||||||
|
// can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children
|
||||||
|
const getVictoryGroup = ({
|
||||||
|
data,
|
||||||
|
i,
|
||||||
|
highlight,
|
||||||
|
}: {
|
||||||
|
data: ChartSeries;
|
||||||
|
i: number;
|
||||||
|
highlight?: boolean;
|
||||||
|
}) => {
|
||||||
|
console.log(i, data, highlight, data.length);
|
||||||
|
return (
|
||||||
|
<VictoryGroup color={chartColors[i] || "darkgray"} data={data} key={i}>
|
||||||
|
<VictoryLine
|
||||||
|
name={`line-${i}`}
|
||||||
|
style={{
|
||||||
|
data: {
|
||||||
|
strokeOpacity: highlight ? 1 : 0.5,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<VictoryScatter
|
||||||
|
name={`scatter-${i}`}
|
||||||
|
size={({ active }) => (active || highlight ? 3.75 : 3)}
|
||||||
|
/>
|
||||||
|
</VictoryGroup>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InnerChart: React.FC<{
|
||||||
|
data: ChartData;
|
||||||
|
highlight: number | undefined;
|
||||||
|
}> = ({
|
||||||
|
data: { maxProbability, seriesList, minDate, maxDate },
|
||||||
|
highlight,
|
||||||
|
}) => {
|
||||||
|
const domainMax =
|
||||||
|
maxProbability < 0.5 ? Math.round(10 * (maxProbability + 0.05)) / 10 : 1;
|
||||||
|
const padding = {
|
||||||
|
top: 20,
|
||||||
|
bottom: 65,
|
||||||
|
left: 60,
|
||||||
|
right: 20,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VictoryChart
|
||||||
|
domainPadding={20}
|
||||||
|
padding={padding}
|
||||||
|
theme={VictoryTheme.material}
|
||||||
|
height={height}
|
||||||
|
width={width}
|
||||||
|
containerComponent={
|
||||||
|
<VictoryVoronoiContainer
|
||||||
|
labels={() => "Not shown"}
|
||||||
|
labelComponent={
|
||||||
|
<VictoryTooltip
|
||||||
|
constrainToVisibleArea
|
||||||
|
pointerLength={0}
|
||||||
|
dy={-12}
|
||||||
|
labelComponent={
|
||||||
|
<VictoryLabel
|
||||||
|
style={[
|
||||||
|
{
|
||||||
|
fontSize: 18,
|
||||||
|
fill: "black",
|
||||||
|
strokeWidth: 0.05,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fontSize: 18,
|
||||||
|
fill: "#777",
|
||||||
|
strokeWidth: 0.05,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
text={({ datum }) =>
|
||||||
|
`${datum.name}: ${Math.round(datum.y * 100)}%\n${format(
|
||||||
|
datum.x,
|
||||||
|
"yyyy-MM-dd"
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
fontSize: 18, // needs to be set here and not just in labelComponent for text size calculations
|
||||||
|
fontFamily:
|
||||||
|
'"Gill Sans", "Gill Sans MT", "Seravek", "Trebuchet MS", sans-serif',
|
||||||
|
// default font family from Victory, need to be specified explicitly for some reason, otherwise text size gets miscalculated
|
||||||
|
}}
|
||||||
|
flyoutStyle={{
|
||||||
|
stroke: "#999",
|
||||||
|
fill: "white",
|
||||||
|
}}
|
||||||
|
cornerRadius={4}
|
||||||
|
flyoutPadding={{ top: 4, bottom: 4, left: 12, right: 12 }}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
radius={50}
|
||||||
|
voronoiBlacklist={
|
||||||
|
[...Array(seriesList.length).keys()].map((i) => `line-${i}`)
|
||||||
|
// see: https://github.com/FormidableLabs/victory/issues/545
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
scale={{
|
||||||
|
x: "time",
|
||||||
|
y: "linear",
|
||||||
|
}}
|
||||||
|
domain={{
|
||||||
|
x: [minDate, maxDate],
|
||||||
|
y: [0, domainMax],
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<VictoryAxis
|
||||||
|
tickCount={Math.min(7, differenceInDays(maxDate, minDate) + 1)}
|
||||||
|
style={{
|
||||||
|
grid: { stroke: null, strokeWidth: 0.5 },
|
||||||
|
}}
|
||||||
|
tickLabelComponent={
|
||||||
|
<VictoryLabel
|
||||||
|
dx={-38}
|
||||||
|
dy={-5}
|
||||||
|
angle={-30}
|
||||||
|
style={{ fontSize: 18, fill: "#777" }}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
scale={{ x: "time" }}
|
||||||
|
tickFormat={(t) => format(t, "yyyy-MM-dd")}
|
||||||
|
/>
|
||||||
|
<VictoryAxis
|
||||||
|
dependentAxis
|
||||||
|
style={{
|
||||||
|
grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
|
||||||
|
}}
|
||||||
|
tickLabelComponent={
|
||||||
|
<VictoryLabel dy={0} style={{ fontSize: 18, fill: "#777" }} />
|
||||||
|
}
|
||||||
|
// tickFormat specifies how ticks should be displayed
|
||||||
|
tickFormat={(x) => `${x * 100}%`}
|
||||||
|
/>
|
||||||
|
{[...Array(seriesList.length).keys()]
|
||||||
|
.reverse() // affects svg render order, we want to render largest datasets on top of others
|
||||||
|
.filter((i) => i !== highlight)
|
||||||
|
.map((i) =>
|
||||||
|
getVictoryGroup({
|
||||||
|
data: seriesList[i],
|
||||||
|
i,
|
||||||
|
highlight: false,
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
{highlight === undefined
|
||||||
|
? null
|
||||||
|
: // render highlighted series on top of everything else
|
||||||
|
getVictoryGroup({
|
||||||
|
data: seriesList[highlight],
|
||||||
|
i: highlight,
|
||||||
|
highlight: true,
|
||||||
|
})}
|
||||||
|
</VictoryChart>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { height, width } from "./utils";
|
||||||
|
|
||||||
|
export const InnerChartPlaceholder: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
style={{ width: "100%", height: "100%" }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
59
src/web/questions/components/HistoryChart/index.tsx
Normal file
59
src/web/questions/components/HistoryChart/index.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import React, { useMemo, useState } from "react";
|
||||||
|
|
||||||
|
import { QuestionWithHistoryFragment } from "../../../fragments.generated";
|
||||||
|
import { InnerChartPlaceholder } from "./InnerChartPlaceholder";
|
||||||
|
import { buildChartData, chartColors } from "./utils";
|
||||||
|
|
||||||
|
const InnerChart = dynamic(
|
||||||
|
() => import("./InnerChart").then((mod) => mod.InnerChart),
|
||||||
|
{ ssr: false, loading: () => <InnerChartPlaceholder /> }
|
||||||
|
);
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
question: QuestionWithHistoryFragment;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Legend: React.FC<{
|
||||||
|
items: { name: string; color: string }[];
|
||||||
|
setHighlight: (i: number | undefined) => void;
|
||||||
|
}> = ({ items, setHighlight }) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-2" onMouseLeave={() => setHighlight(undefined)}>
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<div
|
||||||
|
className="flex items-center"
|
||||||
|
key={item.name}
|
||||||
|
onMouseOver={() => setHighlight(i)}
|
||||||
|
>
|
||||||
|
<svg className="mt-1 shrink-0" height="10" width="16">
|
||||||
|
<circle cx="4" cy="4" r="4" fill={item.color} />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs sm:text-sm sm:whitespace-nowrap sm:text-ellipsis sm:overflow-hidden sm:max-w-160">
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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 sm:flex-row">
|
||||||
|
<InnerChart data={data} highlight={highlight} />
|
||||||
|
<Legend
|
||||||
|
items={data.seriesNames.map((name, i) => ({
|
||||||
|
name,
|
||||||
|
color: chartColors[i],
|
||||||
|
}))}
|
||||||
|
setHighlight={setHighlight}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
113
src/web/questions/components/HistoryChart/utils.ts
Normal file
113
src/web/questions/components/HistoryChart/utils.ts
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
import { addDays, startOfDay, startOfToday, startOfTomorrow } from "date-fns";
|
||||||
|
|
||||||
|
import { QuestionWithHistoryFragment } from "../../../fragments.generated";
|
||||||
|
|
||||||
|
export type ChartSeries = { x: Date; y: number; name: string }[];
|
||||||
|
|
||||||
|
export const MAX_LINES = 5;
|
||||||
|
|
||||||
|
// number of colors should match MAX_LINES
|
||||||
|
// colors are taken from tailwind, https://tailwindcss.com/docs/customizing-colors
|
||||||
|
export const chartColors = [
|
||||||
|
"#0284C7", // sky-600
|
||||||
|
"#DC2626", // red-600
|
||||||
|
"#15803D", // green-700
|
||||||
|
"#7E22CE", // purple-700
|
||||||
|
"#F59E0B", // amber-500
|
||||||
|
];
|
||||||
|
|
||||||
|
const goldenRatio = (1 + Math.sqrt(5)) / 2;
|
||||||
|
// used both for chart and for ssr placeholder
|
||||||
|
export const width = 750;
|
||||||
|
export const height = width / goldenRatio;
|
||||||
|
|
||||||
|
export type ChartData = {
|
||||||
|
seriesList: ChartSeries[];
|
||||||
|
seriesNames: string[];
|
||||||
|
maxProbability: number;
|
||||||
|
minDate: Date;
|
||||||
|
maxDate: Date;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const buildChartData = (
|
||||||
|
question: QuestionWithHistoryFragment
|
||||||
|
): ChartData => {
|
||||||
|
let seriesNames = question.options
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (a.probability > b.probability) {
|
||||||
|
return -1;
|
||||||
|
} else if (a.probability < b.probability) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return a.name < b.name ? -1 : 1; // needed for stable sorting - otherwise it's possible to get order mismatch in SSR vs client-side
|
||||||
|
})
|
||||||
|
.map((o) => o.name)
|
||||||
|
.slice(0, MAX_LINES);
|
||||||
|
|
||||||
|
const isBinary =
|
||||||
|
(seriesNames[0] === "Yes" && seriesNames[1] === "No") ||
|
||||||
|
(seriesNames[0] === "No" && seriesNames[1] === "Yes");
|
||||||
|
if (isBinary) {
|
||||||
|
seriesNames = ["Yes"];
|
||||||
|
}
|
||||||
|
|
||||||
|
const nameToIndex = Object.fromEntries(
|
||||||
|
seriesNames.map((name, i) => [name, i])
|
||||||
|
);
|
||||||
|
let seriesList: ChartSeries[] = [...Array(seriesNames.length)].map((x) => []);
|
||||||
|
|
||||||
|
const sortedHistory = question.history.sort((a, b) =>
|
||||||
|
a.timestamp < b.timestamp ? -1 : 1
|
||||||
|
);
|
||||||
|
|
||||||
|
{
|
||||||
|
let previousDate = -Infinity;
|
||||||
|
for (const item of sortedHistory) {
|
||||||
|
if (item.timestamp - previousDate < 12 * 60 * 60) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const date = new Date(item.timestamp * 1000);
|
||||||
|
|
||||||
|
for (const option of item.options) {
|
||||||
|
const idx = nameToIndex[option.name];
|
||||||
|
if (idx === undefined) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const result = {
|
||||||
|
x: date,
|
||||||
|
y: option.probability,
|
||||||
|
name: option.name,
|
||||||
|
};
|
||||||
|
seriesList[idx].push(result);
|
||||||
|
}
|
||||||
|
previousDate = item.timestamp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let maxProbability = 0;
|
||||||
|
for (const dataSet of seriesList) {
|
||||||
|
for (const item of dataSet) {
|
||||||
|
maxProbability = Math.max(maxProbability, item.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const minDate = sortedHistory.length
|
||||||
|
? startOfDay(new Date(sortedHistory[0].timestamp * 1000))
|
||||||
|
: startOfToday();
|
||||||
|
const maxDate = sortedHistory.length
|
||||||
|
? addDays(
|
||||||
|
startOfDay(
|
||||||
|
new Date(sortedHistory[sortedHistory.length - 1].timestamp * 1000)
|
||||||
|
),
|
||||||
|
1
|
||||||
|
)
|
||||||
|
: startOfTomorrow();
|
||||||
|
|
||||||
|
return {
|
||||||
|
seriesList,
|
||||||
|
seriesNames,
|
||||||
|
maxProbability,
|
||||||
|
minDate,
|
||||||
|
maxDate,
|
||||||
|
};
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user