Snippets Groups Projects

migrate pie chart to echarts (#43555)

Emmad Usmani authored 8 months ago

* echarts pie

* setup rendering pipeline for static pie chart (#43547)

* setup rendering pipeline for static pie chart

* remove more donut code from BE

* compute viz settings for static pie chart (#43548)

* compute viz settings for static pie chart

* create chartModel for pie chart (#43549)

* create chartModel for pie chart

* render static pie chart (#43550)

* render static pie chart

* render static pie chart legend (#43551)

* disable animation

* alter static-viz pie chart be tests to account for echarts-impl

The old implementation had a different implementation for legends, separate from the 'categorical/donut' js
render. Echarts nicely combines the legend into the pie render, so we don't need to worry about that stuff anymore.

Instead, I've written a simple set of assertions on the echarts pie implementation now.

* Get rid of this test that was attempting to use old code path

* echarts pie

* One last spot where we don't need old pie stuff anymore.

* add loki specs

* save snapshots

* fix small slices disappearing

* update snapshots

* add repro story for exteremely small slice

* add snapshot

* fix rounded total

* fix percent formatting in legend

* fix date dimension formatting

* fix binned and relative date dimension labels on legend

* add specs and snapshots for null and unaggregated dimensions

* hide overlaping labels on chart

* fix null dimension color

* show error when metric column has a negative value

* move legend to botom

* make dot margin smaller

* add columns to legend

* sort legend vertically

* dont use grid if only one row for legend

* never hide legend in static viz

* fix empty column culling

* show single legend item

* add long dimension name story

* fix long dimension name in legend

* right justify percentages in legend

* remove negative error and re-add stories

* handle negative values

* create chart definition for dynamic pie chart

* render chart with responsiveness

* add comment for borderWidth calculation

* center legend

* fix legend centering

* add story for missing currency formatting

* fix missing currency formatting

* fix graalvm crashing

* fix column settings computation

* add another currency formatting repro

* fix wrong order of col settings computations

* convert colors to hex

* fix colors missing from viz settings

* temp todo comment

* fix colors in dynamic viz

* update snapshots

* fix crashing due to invalid dimension/metric setting

* fix chart crashing for boolean dimension with labels on chart

* add repro

* fix regression in label formatting

* fix labels on small slices

* update specs

* emphasis state for slice hover

* recreate old label hiding logic

* include height measurement in getIsLabelVisible

* move d3 slices to chart model

* fix labels on static viz

* wip basic hover state and tooltip

* fix emphasis style getting stuck by memoizing everything

* update total display value

* fix stuck emphasis by setting notMerge to false for pie only

* handle other slice in tooltip

* fix bugs in total graphic

* use OTHER_SLICE_KEY const in static viz legend

* implement legend and connect to hover state

* implement click actions

* fix slice not clickable

* handle all zero slices

* add repro

* update specs

* update pie_chart.cy.spec.js

* update chart_drill.cy.spec.js

* add repro for single column legend

* use minimum 2 legend columns

* fix legend text overlap

* use more margin for single row legend

* update specs

* add repro for 28568

* add repro for 38424

* fix percent label not showing on large slices

* hide total text when chart is small

* replace comment about animations

* show warning for mixed positive and negative values

* delete old chart files

* fix type errors

* update d3 import

* update specs

* remove branch from uberjar.yml

* dont put single slice into other

* fix lint errors and pie render test

* update more d3 imports

* remove unused settings

* revert preview-card-width change

* remove unused import

* remove majorWidth option from formatting

* use debounceLeading refresh mode in ChartWithLegend

* remove TOTAL_GRAPHIC_OPTION constant

* delete unit test for pie chart

* fix failing test by doing set comparison instead

* fix typo in comment

* remove SUNBURST_SERIES_OPTION constant

* fix lint by removing unused eslint-disable

* move default color computation to getValue

* fix static pie test to show that we will always render the legend

* update pie border color for night mode and embedding

* fix styles for embedding case and add stories

* skip embedding stories

---------

Co-authored-by: Adam James <adam.vermeer2@gmail.com>

4ec1fd88

4ec1fd88 8 months ago

Name	Last commit	Last update
.babel_cache
.clj-kondo
.devcontainer
.github
.husky
.loki
.lsp
.storybook
.vscode
bin
dev
docs
e2e
enterprise
frontend
hooks
locales
modules/drivers
patches
release
resources
snowplow
src/metabase
test/metabase
test_config
test_modules/drivers
test_resources
.cljfmt.edn
.dir-locals.el
.dockerignore
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.mlc_config.json
.nvmrc
.pre-commit-config.yaml
.prettierignore
.prettierrc
.stylelintrc.json
.yarnrc
Dockerfile
LICENSE-AGPL.txt
LICENSE-EMBEDDING.txt
LICENSE-MCL.txt
LICENSE.txt
README.md
SECURITY.md
babel.config.json
codecov.yml
deps.edn
jest.config.js
jest.tz.unit.conf.json
loki.config.js
package.json
postcss.config.js
shadow-cljs.edn
tsconfig.base.json
tsconfig.json
tsconfig.sdk.json
webpack.config.js
webpack.embedding-sdk-cli.config.js
webpack.embedding-sdk.config.js
webpack.shared.config.js
webpack.static-viz.config.js
yarn.lock
zen.md

Metabase

Metabase is the easy, open-source way for everyone in your company to ask questions and learn from data.

Get started

The easiest way to get started with Metabase is to sign up for a free trial of Metabase Cloud. You get support, backups, upgrades, an SMTP server, SSL certificate, SoC2 Type 2 security auditing, and more (plus your money goes toward improving Metabase). Check out our quick overview of cloud vs self-hosting. If you need to, you can always switch to self-hosting Metabase at any time (or vice versa).

Features

Set up in five minutes (we're not kidding).
Let anyone on your team ask questions without knowing SQL.
Use the SQL editor for more complex queries.
Build handsome, interactive dashboards with filters, auto-refresh, fullscreen, and custom click behavior.
Create models that clean up, annotate, and/or combine raw tables.
Define canonical segments and metrics for your team to use.
Send data to Slack or email on a schedule with dashboard subscriptions.
Set up alerts to have Metabase notify you when your data changes.
Embed charts and dashboards in your app, or even your entire Metabase.

Take a tour of Metabase.

Supported databases

Installation

Metabase can be run just about anywhere. Check out our Installation Guides.

Contributing

Quick Setup: Dev environment

In order to spin up a development environment, you need to start the front end and the backend as follows:

Frontend quick setup

The following command will install the Javascript dependencies:

$ yarn install

To build and run without watching changes:

$ yarn build

To build and run with hot-reload:

$ yarn build-hot

Backend quick setup

In order to run the backend, you'll need to build the drivers first, and then start the backend:

$ ./bin/build-drivers.sh
$ clojure -M:run

For a more detailed setup of a dev environment for Metabase, check out our Developers Guide.

Internationalization

We want Metabase to be available in as many languages as possible. See which translations are available and help contribute to internationalization using our project over at POEditor. You can also check out our policies on translations.

Extending Metabase

Hit our Query API from Javascript to integrate analytics. Metabase enables your application to:

Build moderation interfaces.
Export subsets of your users to third party marketing automation software.
Provide a custom customer lookup application for the people in your company.

Check out our guide, Working with the Metabase API.

Security Disclosure

See SECURITY.md for details.

License

This repository contains the source code for both the Open Source edition of Metabase, released under the AGPL, as well as the commercial editions of Metabase, which are released under the Metabase Commercial Software License.

See LICENSE.txt for details.

Unless otherwise noted, all files © 2024 Metabase, Inc.

Metabase Experts

If you’d like more technical resources to set up your data stack with Metabase, connect with a Metabase Expert.