diff --git a/package-lock.json b/package-lock.json index b0f9dcf..c447dc6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "metaforecast", "version": "2.0.0", "license": "MIT", "dependencies": { diff --git a/src/web/questions/components/HistoryChart/InnerChart.tsx b/src/web/questions/components/HistoryChart/InnerChart.tsx index c25edb2..b6ad152 100644 --- a/src/web/questions/components/HistoryChart/InnerChart.tsx +++ b/src/web/questions/components/HistoryChart/InnerChart.tsx @@ -1,11 +1,20 @@ import { differenceInDays, format } from "date-fns"; import { - VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLine, VictoryScatter, - VictoryTheme, VictoryTooltip, VictoryVoronoiContainer + VictoryAxis, + VictoryChart, + VictoryGroup, + VictoryLabel, + VictoryLine, + VictoryScatter, + VictoryTheme, + VictoryTooltip, + VictoryVoronoiContainer, } from "victory"; import { chartColors, ChartData, ChartSeries, height, width } from "./utils"; +let dateFormat = "MMM do y"; // "yyyy-MM-dd" + // can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children const getVictoryGroup = ({ data, @@ -71,12 +80,12 @@ export const InnerChart: React.FC = ({ = ({ text={({ datum }) => `${datum.name}: ${Math.round(datum.y * 100)}%\n${format( datum.x, - "yyyy-MM-dd" + dateFormat )}` } style={{ - fontSize: 18, // needs to be set here and not just in labelComponent for text size calculations + fontSize: 17, // 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 @@ -100,7 +109,7 @@ export const InnerChart: React.FC = ({ fill: "white", }} cornerRadius={4} - flyoutPadding={{ top: 4, bottom: 4, left: 12, right: 12 }} + flyoutPadding={{ top: 4, bottom: 4, left: 16, right: 16 }} /> } radius={50} @@ -129,11 +138,11 @@ export const InnerChart: React.FC = ({ dx={-38} dy={-5} angle={-30} - style={{ fontSize: 18, fill: "#777" }} + style={{ fontSize: 15, fill: "#777" }} /> } scale={{ x: "time" }} - tickFormat={(t) => format(t, "yyyy-MM-dd")} + tickFormat={(t) => format(t, dateFormat)} /> -