carbon-charts
carbon-charts copied to clipboard
[Bug]: Bullet chart right-labels missing if ratio is repeated
Contact Details
No response
What happened?
The progress labels on the right of the bullet chart get missaligned if the ratio is repeated.
No duplicates should be removed in a bullet chart, it breaks the layout of the labels.
I suspect the bug is around here: https://github.com/carbon-design-system/carbon-charts/blob/ab9b8e90a0e128f6c9a185091d06e62c35e90042/packages/core/src/services/scales-cartesian.ts#L606
I managed to reproduce this issue in your Storybook as well.
Version
"@carbon/charts": "^0.55.1",
"@carbon/charts-angular": "^0.55.1",
"@carbon/icons-angular": "^11.2.2",
"d3": "^7.2.1",
"carbon-components": "^10.55.1",
"carbon-components-angular": "^4.57.10",
Data & options used
[
{
"title": "% del nº de pedidos expedidos antes del cutt off de las 13:00h.",
"group": "Excelente",
"ranges": [
0,
95,
98
],
"marker": 100,
"value": 99
},
{
"title": "% del volumen de unidades enviado a tiempo CATÁLOGO",
"group": "Satisfactorio",
"ranges": [
0,
95,
97
],
"marker": 100,
"value": 95
},
{
"title": "% del volumen de unidades enviado a tiempo Nuevos Lanzamientos y Campañas",
"group": "Satisfactorio",
"ranges": [
0,
97,
99.5
],
"marker": 100,
"value": 98
},
{
"title": "% asignado líneas de pedido cumplidas Nuevos Lanzamientos y Campañas",
"group": "Deficiente",
"ranges": [
0,
97,
99.5
],
"marker": 100,
"value": 96
},
{
"title": "% asignado Líneas de pedido cumplidas CATÁLOGO",
"group": "Deficiente",
"ranges": [
0,
97,
99
],
"marker": 100,
"value": 92
},
{
"title": "% de reclamaciones.",
"group": "Deficientes",
"ranges": [
0,
91,
95
],
"marker": 110,
"value": 87
},
{
"title": "% de devoluciones realizadas en un plazo máximo de 5 días para Amazon. Resto clientes entre mínimo 5 días y máximo 8 días. Hasta 5.000 unidades procesadas.",
"group": "Excelente",
"ranges": [
0,
90,
95
],
"marker": 100,
"value": 96
}
]
{
"title": "Basic bullet",
"axes": {
"bottom": {
"mapsTo": "value",
"extendLinearDomainBy": "marker",
"title": "%"
},
"left": {
"scaleType": "labels",
"mapsTo": "title"
},
"right": {
"scaleType": "labels-ratio",
"mapsTo": "title"
}
},
"color": {
"scale": {
"Excelente": "#bee670",
"Satisfactorio": "#ee8c2f",
"Deficiente": "#e06767"
}
}
}
Relevant log output
No logs where output
Codesandbox example
No response
Is someone working on this bug? We had complains about the labels not displaying correctly.