diff --git a/src/web/questions/components/HistoryChart/InnerChart.tsx b/src/web/questions/components/HistoryChart/InnerChart.tsx index 2528166..d0b706a 100644 --- a/src/web/questions/components/HistoryChart/InnerChart.tsx +++ b/src/web/questions/components/HistoryChart/InnerChart.tsx @@ -3,9 +3,11 @@ import { VictoryAxis, VictoryChart, VictoryGroup, + VictoryStack, VictoryLabel, VictoryLine, VictoryScatter, + VictoryArea, VictoryTheme, VictoryTooltip, VictoryVoronoiContainer, @@ -20,10 +22,12 @@ const getVictoryGroup = ({ data, i, highlight, + isBinary, }: { data: ChartSeries; i: number; highlight?: boolean; + isBinary?: boolean; }) => { return ( @@ -33,10 +37,20 @@ const getVictoryGroup = ({ data: { // strokeOpacity: highlight ? 1 : 0.5, strokeOpacity: 0.6, - strokeWidth: 3, + strokeWidth: isBinary ? 4 : 3, }, }} /> + {isBinary ? ( + + ) : null} + (active || highlight ? 0 : 0)} //(active || highlight ? 3.75 : 3)} @@ -63,9 +77,12 @@ export const InnerChart: React.FC = ({ right: 17, }; + const isBinary = seriesList.length == 1; + console.log(isBinary); + return ( = ({ // 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) + //.filter((i) => i !== highlight) .map((i) => getVictoryGroup({ data: seriesList[i], i, - highlight: false, + highlight: i == highlight, // false + isBinary: isBinary, }) )} - {highlight === undefined + + { + // note: this produces an annoying change of color effect + /* + highlight === undefined ? null : // render highlighted series on top of everything else getVictoryGroup({ data: seriesList[highlight], - i: highlight, + i: highlight, highlight: true, - })} + }) + */ + } ); }; diff --git a/src/web/questions/pages/QuestionPage.tsx b/src/web/questions/pages/QuestionPage.tsx index 573e189..44c2f88 100644 --- a/src/web/questions/pages/QuestionPage.tsx +++ b/src/web/questions/pages/QuestionPage.tsx @@ -61,7 +61,7 @@ const LargeQuestionCard: React.FC<{ -
+