diff --git a/src/web/questions/components/HistoryChart/InnerChart.tsx b/src/web/questions/components/HistoryChart/InnerChart.tsx index bd11714..7713750 100644 --- a/src/web/questions/components/HistoryChart/InnerChart.tsx +++ b/src/web/questions/components/HistoryChart/InnerChart.tsx @@ -15,9 +15,9 @@ import { import { chartColors, ChartData, ChartSeries, goldenRatio } from "./utils"; -const height = 400 +const height = 200 const width = height * goldenRatio -let dateFormat = "MMM do y"; // "yyyy-MM-dd" +let dateFormat = "dd/MM/yy"; // "yyyy-MM-dd" // "MMM do yy" // can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children const getVictoryGroup = ({ @@ -39,7 +39,7 @@ const getVictoryGroup = ({ data: { // strokeOpacity: highlight ? 1 : 0.5, strokeOpacity: highlight && !isBinary ? 0.8 : 0.6, - strokeWidth: highlight && !isBinary ? 4 : 3, + strokeWidth: highlight && !isBinary ? 2.5 : 1.5, }, }} /> @@ -73,9 +73,9 @@ export const InnerChart: React.FC = ({ const domainMax = maxProbability < 0.5 ? Math.round(10 * (maxProbability + 0.05)) / 10 : 1; const padding = { - top: 20, - bottom: 75, - left: 70, + top: 15, + bottom: 50, + left: 30, right: 17, }; @@ -101,12 +101,12 @@ export const InnerChart: React.FC = ({ = ({ )}` } style={{ - fontSize: 17, // needs to be set here and not just in labelComponent for text size calculations + fontSize: 10, // needs to be set here and not just in labelComponent for text size calculations fontFamily: '"Gill Sans", "Gill Sans MT", "SerĀ­avek", "Trebuchet MS", sans-serif', // default font family from Victory, need to be specified explicitly for some reason, otherwise text size gets miscalculated @@ -130,10 +130,10 @@ export const InnerChart: React.FC = ({ fill: "white", }} cornerRadius={4} - flyoutPadding={{ top: 4, bottom: 4, left: 16, right: 16 }} + flyoutPadding={{ top: 4, bottom: 4, left: 10, right: 10 }} /> } - radius={50} + radius={20} voronoiBlacklist={ [...Array(seriesList.length).keys()].map((i) => `line-${i}`) // see: https://github.com/FormidableLabs/victory/issues/545 @@ -161,10 +161,10 @@ export const InnerChart: React.FC = ({ }} tickLabelComponent={ } scale={{ x: "time" }} @@ -176,7 +176,7 @@ export const InnerChart: React.FC = ({ grid: { stroke: "#D3D3D3", strokeWidth: 0.5 }, }} tickLabelComponent={ - + } // tickFormat specifies how ticks should be displayed tickFormat={(x) => `${x * 100}%`} @@ -207,6 +207,7 @@ export const InnerChart: React.FC = ({ }) */ } + ); }; diff --git a/src/web/questions/components/HistoryChart/index.tsx b/src/web/questions/components/HistoryChart/index.tsx index 7d512dd..3386711 100644 --- a/src/web/questions/components/HistoryChart/index.tsx +++ b/src/web/questions/components/HistoryChart/index.tsx @@ -23,7 +23,7 @@ export const HistoryChart: React.FC = ({ question }) => { const data = useMemo(() => buildChartData(question), [question]); return ( -
+
({ diff --git a/src/web/questions/pages/EmbedQuestionPage.tsx b/src/web/questions/pages/EmbedQuestionPage.tsx index 5b51df6..f6c72a2 100644 --- a/src/web/questions/pages/EmbedQuestionPage.tsx +++ b/src/web/questions/pages/EmbedQuestionPage.tsx @@ -40,14 +40,14 @@ const EmbedQuestionPage: NextPage = ({ id }) => { {({ data: { result: question } }) => question ? ( -
+
-
+
-
+