Closed jmw992 closed 2 years ago
nickofthyme
commented
2 years ago No we use yarn workspaces while still maintaining a top-level yarn script with lerna run. So yarn build actually calls...
lerna run --loglevel=silent --scope @elastic/charts build --stream --no-prefixThis will call build in the @elastic/charts workspace which the stdout assumes cwd as packages/charts hence the confusion. So the charts package is built within the packages/charts/dist directory.
jmw992
commented
2 years ago Tx @nickofthyme, i'll try and work with that and I'll try and report my success. Also dope github account name pun :)
jmw992
commented
2 years ago So I am trying to link this into Kibana directly by swapping out the npm dependency for a built target from this fork. I thought I could replace "@elastic/charts": 40.1.1, with "@elastic/charts": "./dependencies/charts", which was forked from the same release tag.
I copied over the packages/charts with the built dist from my elastic-chart
However when I run yarn kbn bootstrap it fails
Is there a way to point at my own custom fork like this?
markov00
commented
2 years ago I use to do the following:
1) yarn build in elastic-charts package
2) cd packages/charts and update the version in package.json it doesn't matter much which version, but you just need to update it
3) npm pack this will create a tar.gz package of the build that you can link in the Kibana package.json directly like:
"@elastic/charts": "../elastic-charts/packages/charts/elastic-chartsv50.tar.gz"
the yarn kbn bootstrap in Kibana to pick up the updated version
We are working with some folks in the Kibana Ops team to make this process more smooth, but this is how it works at the moment.
nickofthyme
commented
2 years ago Yeah linking to kibana is not very nice or easy right now. We previously had a way to link a watched charts build to kibana via https://github.com/elastic/elastic-charts/pull/1164 but that was only a brief luxury as kibana completed migration to Bazel.
So the only way to link charts now it via .gz build, AFAIK. You’d first build and pack charts locally.
cd ./packages/charts
yarn build
npm packLocate the full path to the .gz file, update kibana package.json with this path for charts in kibana.
// kibana package.json
{
"@elastic/charts": "Users/path/to/charts/file.gz"
}Then run this in kibana
yarn kbn bootstrap --no-validateThe --no-validate flag is required when installing from a local source, otherwise it will throw an error.
As far as pointing to the charts dist/ I have never gotten that to work. There are two issues at hand -- one is bazel which caches build data that likely doesn't see those changes and the second is the @kbn/ui-shared-deps-npm package that reexports charts and other ui libraries, see here. Between those two something is blocking those changes.
jmw992
commented
2 years ago Those steps did work for me, thanks @nickofthyme, you da man!
jmw992
commented
2 years ago So unfortunately I haven't been able to get that separately packaged elastic-charts package to be consumed by Kibana. I replace the @elastic/charts but then kibana seems to download and use the npm package >:(
I've tried to confirm this by just adding some console logging in my elastic-charts fork which appears in it's storybook, and then not seeing it in the kibana which should be pointing at that *.tgz file
It looks like culprit is most likely the bazel build system which is referencing it as an npm dependency still in
I know this is an issue outside of elastic-charts, but If you @nickofthyme or anyone else has experience working from an in-development or custom elastic-charts version I'd appreciate some pointers.
I suppose I could always publish an npm package of the fork and grab from that and have the bazel system pick that up, but I'd prefer not to clutter npm with my shenanigans 😛
I've posted about this on the forum as well, I'll try and bring over any answer I get over here :)
markov00
commented
2 years ago hey @jmw992, if I'm not wrong you need to update the version in the package.json before every new build/pack, if not bazel picks up the last available
jmw992
commented
2 years ago @markov00 , so update the version number in elastic-charts/packages/charts/package.json, pack that, and then set
// kibana package.json
{
"@elastic/charts": "Users/path/to/charts/file.gz"
}Then bazel should see the new version number and hopefully use the tgz from there?
markov00
commented
2 years ago exactly
jmw992
commented
2 years ago Just wanted to confirm that adjustment worked. Also want to give people a heads up that if you want to adjust font size, and other chart themeing for Kibana that it actually needs to be done in the eui crate and not here. eui/src/themes/charts/themes.ts
The version bump trick that @markov00 was required for eui which I needed to do sooner. Thanks markov00, you're also the man!
markov00
commented
2 years ago If you don't mind it would be great to see the output of your theme changes, we are going to improve our theme, but we are interested in understanding if there is something that is we should focus more on
. Also want to give people a heads up that if you want to adjust font size, and other chart themeing for Kibana that it actually needs to be done in the eui crate and not here. eui/src/themes/charts/themes.ts
You are right, in Kibana, our default themes are overridden by EUI chart theme. We anyway are going to merge this theme back to elastic-charts in the near future.
I am trying to make a custom styled chart, for example changing the font color and 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
And got the following
```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 ```Are the command prompts outdated or is there a step I'm missing or just a better way to approach this overall?