HwangTaehyun / github-repository-contribution-stats

:fire: Dynamically generated Github Repository Contribution stats on your readmes (github-repository-contribution-stats)
https://github-contributor-stats.vercel.app
98 stars 21 forks source link

fix: rank text seems not in the center of circle #2

Open kurt-liao opened 1 year ago

kurt-liao commented 1 year ago

Hi, thanks for this wonderful project. I found that rank text looks not center of the circle, so I changed the cx and cy for the circle. You can see the effect after changed:

Before

After

I've created Stack Overflow stats card which also inspired by github-readme-stats. Just too happy to see your intersting project, so want to share mine with you😀.

vercel[bot] commented 1 year ago

Someone is attempting to deploy a commit to a Personal Account owned by @HwangTaehyun on Vercel.

@HwangTaehyun first needs to authorize it.

HwangTaehyun commented 1 year ago

Hi @kurt-liao! Thank you for introducing your pretty awesome project. I will use it on my readme!

HwangTaehyun commented 1 year ago

I check your changes, but it does not work on the desktop chrome. However, I noticed that the rank is not centered in mobile chrome. Is any other method to center the rank text by SVG's CSS property?

kurt-liao commented 1 year ago

I check your changes, but it does not work on the desktop chrome. However, I noticed that the rank is not centered in mobile chrome. Is any other method to center the rank text by SVG's CSS property?

I think I've found the solution here and also I commit the new version.

Uses text-anchor="middle" and alignment-baseline="middle" to fix this problem.

Also, I've tried it on desktop chrome, it seems fine.

kurt-liao commented 1 year ago

Hi @kurt-liao! Thank you for introducing your pretty awesome project. I will use it on my readme!

Thanks! Open source hooray🎉

HwangTaehyun commented 1 year ago

@kurt-liao Actually, I think before changes have more centered rank text than after changes.

image

In this code, SVG's relative positions are literally weird. So, I want to fix them. For example, I think y offset is unnecessary but it doesn't actually.

      <g transform="translate(30,16)">
        <text class="stat bold">${name}</text>
      </g>

Doing this would be really/very helpful to this repo and the center problem also will be resolved.

kurt-liao commented 1 year ago

I think svg might have different effect on desktop and mobile.

Though I think second version is better than first, but it seems not work in mobile browser(text not show), kind weird🧐 S__165289987

I'm not that familiar in svg, but I'll keep to fix those problem.

Sangram03 commented 3 months ago

Ok