carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
904 stars 183 forks source link

[Enhancement]: Make ticks accessible via css classes #1896

Open max-jonas opened 1 week ago

max-jonas commented 1 week ago

Hello together,

first of all I would like to thank you very much for your great open source work! Highly appreciated! We would like to contribute a bit and make the ticks in the legend of a chart accessible from apps embedding the carbon charts. In our specific use case we need to adjust the font-weight of these ticks.

In our Angular App we are currently using

    "@carbon/charts": "1.15.3",
    "@carbon/charts-angular": "1.16.11",

Currently font-weight: bold is set on the text elements directly programmatically, see https://github.com/carbon-design-system/carbon-charts/blob/efb75e2cc4e5ac2b67e928cf0fc425e1a7999b0e/packages/core/src/components/axes/axis.ts#L410-L412

This can't be overwritten via pure css because we need to filter out only those ticks, that have style="font-weight: bold;" applied. We are able to do this via typescript, e.g.

const tickLabels: NodeListOf<HTMLElement> = document.querySelectorAll('g.tick text');
    tickLabels.forEach((element) => {
      if (element.style.fontWeight === 'bold') {
        element.style.fontWeight = '500';
      }
    });

But this results in some 'flickering' as it will get overwritten again from carbon charts e.g. on resizing the browser window.

If the font-weights would be applied via css-classes (like for example .primary-tick-label and .tick-label?) instead of adding them directly to the style of the text element would allow us to overwrite these classes on our end.

Keeping the style as is and just adding empty css classes to the text elements would also be a possibility which may be 'less invasive' as no new classes would need to be defined on your end and the changes would concentrate only on the above mentioned file.

As said at the beginning, if there is the chance that this will be accepted, we'd be happy to contribute this feature request.

Thanks and kind regards, Max

theiliad commented 1 week ago

Hi, sure. I can't really think of any issues with switching over to css classes for those 🤔 so should be ok