Add more breathing room to x-axis

brokalys · Apr 1, 2024 · bb6460b · bb6460b
1 parent 484f986
commit bb6460b
Show file tree

Hide file tree

Showing 3 changed files with 315 additions and 179 deletions.
diff --git a/package.json b/package.json
@@ -6,11 +6,11 @@
   "dependencies": {
     "@apollo/client": "^3.0.0-beta.45",
     "@brokalys/location-json-schemas": "^1.4.3",
-    "@bugsnag/js": "^7.1.0",
-    "@bugsnag/plugin-react": "^7.1.0",
-    "@nivo/bar": "^0.80.0",
-    "@nivo/core": "^0.80.0",
-    "@nivo/line": "^0.80.0",
+    "@bugsnag/js": "^7.22.4",
+    "@bugsnag/plugin-react": "^7.19.0",
+    "@nivo/bar": "^0.85.1",
+    "@nivo/core": "^0.85.1",
+    "@nivo/line": "^0.85.1",
     "@react-google-maps/api": "^2.8.1",
     "apollo-link": "^1.2.14",
     "apollo-link-debounce": "^3.0.0",

diff --git a/src/components/PropertyPriceChart/PropertyPriceChart.tsx b/src/components/PropertyPriceChart/PropertyPriceChart.tsx
@@ -220,9 +220,16 @@ const PropertyPriceChart: React.FC<PropertyPriceChartProps> = (props) => {
             axisLeft={{
               tickValues: 2,
             }}
+            xScale={{
+              type: 'time',
+              format: '%Y-%m-%d',
+              useUTC: false,
+              precision: 'day',
+            }}
             gridYValues={4}
             animate={false}
             axisBottom={{
+              tickValues: 10,
               format: (x) => {
                 return moment(x).format(
                   isSourceClassifieds ? 'YYYY-MM-DD' : 'YYYY [Q]Q',
@@ -364,7 +371,7 @@ const warningAreaGenerator = (innerHeight: number, points: ComputedDatum[]) =>
 
 const WarningLayer: CustomLayer = (props) => {
   const points = props.series[0].data;
-  const path = warningAreaGenerator(props.innerHeight, points);
+  const path = warningAreaGenerator(props.innerHeight, points as any);
 
   return <path d={path} fill="#f9cd31" fillOpacity={0.3} />;
 };