D3 SVG Maps

[ghost]

@edgarordonez

I need to make some SVG maps and I wan to use stenciljs.

It would be cool if I can turn them into components.

If I fork your work and attempt to integrate SVG maps could you help me make it happen?

Thanks so muck in advance!

[ghost]

Hello @Ry10p

Of course!

You can use D3.js to make SVG maps from JSON like this.

I would like that you can follow the interfaces, decorators, etc. In this way, we doing all the components similar use for the client as far as possible. If you need more information contact me.

Send a pull request and I merge your work!

Thanks for your interest!

[ghost]

@edgarordonez

Just so I am following along correctly, I want to make sure that "graph-data.ts & the shared folder" is essentially a service providing data and type format for example data in for all the charts?

Thanks so much!
Ryan

[ghost]

Hi @Ry10p

Today I made some changes that have a relation with "graph-data.ts & the shared folder".

I changed the "graph-data.ts to default-graph-data.ts". Now, all graphs doing a deep copy of default data, that are in "default-graph-data.ts". So, the properties of graph-data not are mandatory if the default options are valid for the client. If update your fork, can see the example in "App Component."

Therefore, We can say that "shared folder" provide formats and default data for all the charts, yes!

If you have any doubt, write me!

Thank you, I hope your maps! :)

Edgar.

[ghost]

Hi @edgarordonez ,

Maps are coming along.
I have a question for you... do you know where i can find a good tutorial on how to implement interfaces in typescript?

Thanks again!

[ghost]

Hi @Ry10p,

I have read some articles on Medium for example Interface vs Type alias in TypeScript 2.7
or in my repository of books I have some about TypeScript, but sincerely, I don't read all parts of the book, I never found the time. I use Mastering TypeScript or TypeScript Design Patterns like sourcebook.

I hope that these resources are of help and if you have any question, write me, and we can speak it.

We are in contact! 😄

[ghost]

Good Morning! @edgarordonez

I was Interested if you knew a pure JS or a "StencilJS" way around React.cloneElement(), according to the react documentation it is very different from,
let blah = document.getElementById("anID"); ,
let cln = itm.cloneNode(true);,
document.getElementById("myList1").appendChild(cln);
...?

it is in the utils file of link to react-simple-maps utils page

My assumption is that it is because react is rendering the elements and not in the traditional way, but i'm not the smartest when it comes to this. LOL

Thanks in advance!

[ghost]

Hi @Ry10p

I guess that it's for shadow DOM or immutable purposes, but I'm not sure.

I saw this method in examples like this: https://mxstbr.blog/2017/02/react-children-deepdive/#immutably-cloning-elements, but I don't know something like this is StencilJS... I need investigate sorry.

What do you want to do or why you think that you need this?

Thanks!

[ghost]

@edgarordonez
Thanks for getting back to me so fast!

I though I would need to be able to access the child elements in a unconventional way, but I watched this Video and read over the docs, and it seems that stencil makes it possible to just use a slot and map in whatever we need.

That is SO COOL!... because, in react-simple-maps they had to create a component that was essentially a group component that ties all the markers and locations together.

If I am understanding correctly we can just use them like native components without the need to use a filler. :)

You can take a look at a prototype for a map that I have here=)

[ghost]

Hi @Ry10p

Sorry for the delay!

Yes, exactly!

For example, I made a Tooltip and Legend components as a slot, and all others components have access to them. It seemed a simple way, and I hope that it'll util and simple for use.

You can see that I'm making more changes in the project, adding some test, removing others, etc... Sorry. When you finished the maps, we will look a simple way to incorporate!

I'm downloading your prototype :)

Thanks!!

[ghost]

Hi @Ry10p

I published the d3-stencil first version into NPM package. I guess that I made more changes than you have in your fork so, sorry for that, but I'm gonna to close this issue for now.

If you have the maps components ready, feels free to fork the repository again and I'll add your contributions, okay?

Thanks so much, and sorry for the changes!

Keep in touch! :)