Yan
cdc29a812f
The chart canvas in src/components/charts/Chart.tsx was rendered directly inside the Box wrapper. Chart.js writes inline pixel sizes onto the canvas, and while the canvas lives in the normal flow that pixel width propagates up as min and max content through every flex parent and into the surrounding CSS Grid track on the Tabs panel. The track therefore stayed at whatever width the canvas had when the page first loaded, and the chart could only grow on resize, never shrink, until the user reloaded. Wrap the canvas in a position-relative div and position the canvas absolutely. Out-of-flow elements do not contribute to ancestor intrinsic sizing, so the wrapper now takes its size purely from the parent layout. Chart.js' ResizeObserver picks up the wrapper size and resizes the canvas to fit, in both directions, without a reload. Verified in playwright with resize 1280 to 800 (canvas 925 to 699) and 800 to 1400 (canvas 699 to 1117), both without reload, and that the click-to-toggle legend, the focusLabel hover behaviour, and the website overview / revenue charts that share this component all still render and update normally.
Umami
Umami is a simple, fast, privacy-focused alternative to Google Analytics.
🚀 Getting Started
A detailed getting started guide can be found at umami.is/docs.
🛠 Installing from Source
Requirements
- A server with Node.js version 18.18+.
- A PostgreSQL database version v12.14+.
Get the source code and install packages
git clone https://github.com/umami-software/umami.git
cd umami
pnpm install
Configure Umami
Create an .env file with the following:
DATABASE_URL=connection-url
The connection URL format:
postgresql://username:mypassword@localhost:5432/mydb
Build the Application
pnpm run build
The build step will create tables in your database if you are installing for the first time. It will also create a login user with username admin and password umami.
Start the Application
pnpm run start
By default, this will launch the application on http://localhost:3000. You will need to either proxy requests from your web server or change the port to serve the application directly.
🐳 Installing with Docker
Umami provides Docker images as well as a Docker compose file for easy deployment.
Docker image:
docker pull docker.umami.is/umami-software/umami:latest
Docker compose (Runs Umami with a PostgreSQL database):
docker compose up -d
🔄 Getting Updates
To get the latest features, simply do a pull, install any new dependencies, and rebuild:
git pull
pnpm install
pnpm build
To update the Docker image, simply pull the new images and rebuild:
docker compose pull
docker compose up --force-recreate -d
🛟 Support
