Using Custom Elastic Charts Fork in Kibana

Jacob_Williams · April 20, 2022, 8:43am

Like the title suggests I am trying to use a custom fork of elastic-charts in Kibana so I can do some custom themeing, mostly small things like adjusting font size on bar chart to client request.

I was able to prepare a separate npm package following suggestions from @nickofthyme who was very helpful here

github.com/elastic/elastic-charts

Nothing getting built to dist folder...

opened 04:12PM - 18 Apr 22 UTC

closed 04:43PM - 19 Apr 22 UTC

jmw992

I am trying to make a custom styled chart, for example changing the font color a…nd size of axis tick labels. When I build the elastic-charts package I'm not seeing a dist folder get created despite the compiler output showing the dist folder type checking passing... I ran ```bash yarn yarn install yarn build ``` <details> <summary>And got the following </summary> ```bash jacob@Jacobs-MacBook-Pro elastic-charts % yarn build yarn run v1.22.18 $ lerna run --loglevel=silent --scope @elastic/charts build --stream --no-prefix $ yarn build:ts && yarn build:css $ yarn build:clean && yarn build:compile && yarn build:check $ echo 'Cleaning dist...' && rm -rf ./dist Cleaning dist... $ echo 'Compiling...' && tsc -p ./tsconfig.json && tsc -p ./tsconfig.nocomments.json Compiling... $ echo 'Type checking dist...' && tsc -p ./tsconfig.check.json Type checking dist... $ yarn build:sass && yarn autoprefix:css && yarn concat:sass $ echo 'Building sass...' && sass src:dist --style compressed --quiet --color Building sass... $ echo 'Autoprefixing...' && yarn postcss dist/*.css --no-map --use autoprefixer -d dist Autoprefixing... $ /Users/jacob/elastic-charts/node_modules/.bin/postcss dist/theme_dark.css dist/theme_light.css dist/theme_only_dark.css dist/theme_only_light.css --no-map --use autoprefixer -d dist Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db $ echo 'Concat SASS...' && node scripts/concat_sass.js Concat SASS... ✨ Done in 46.17s. jacob@Jacobs-MacBook-Pro elastic-charts % cd dist cd: no such file or directory: dist ``` </details> Are the command prompts outdated or is there a step I'm missing or just a better way to approach this overall?

In kibana I tried to point the package.json elastic charts dependency as"@elastic/charts": "./dependencies/elastic-charts-40.1.1.tgz" with the a custom forked elastic charts package which had some console logging to confirm it was my own custom version. I was able to build with yarn kbn bootstrap --no-verify to allow the use of my custom dependency. However when I run with that dependency I'm not seeing any logging like I was seeing in the elastic charts storybook.

I checked the node_modules of Kibana and saw that @elastic/charts is still getting downloaded, despite my pointing the package.json to my .tgz package. I searched for @elastic/charts in Kibana and saw that /packages/kbn-ui-shared-deps-npm/BUILD.bazel, & /packages/kbn-ui-shared-deps-npm/ both reference elastic-charts. I tried removing these references but then yarn kbn bootstrap --no-verify fails.

Is there any way to build kibana with a custom packaged elastic-charts or eui when all I want to be doing is modifying some css theming to my liking?

Marius_Dragomir · April 20, 2022, 3:36pm

@nickofthyme can you take a look at this when you get the time? Thanks!

system · May 18, 2022, 3:36pm

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.

nickofthyme · July 8, 2022, 4:47pm

Hey @Jacob_Williams,

Sorry for the extremely delayed response, I haven't been getting pings from discuss lately.

It sounds like your issue was resolved per your comment here Nothing getting built to dist folder... · Issue #1654 · elastic/elastic-charts · GitHub.

If not please let us know and we can help troubleshoot, this process can be very finicky .