carbon-charts icon indicating copy to clipboard operation
carbon-charts copied to clipboard

[Bug]: Bullet chart right-labels missing if ratio is repeated

Open vgb1993 opened this issue 2 years ago • 1 comments

Contact Details

No response

What happened?

myChart (3)

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

vgb1993 avatar Mar 16 '22 18:03 vgb1993

Is someone working on this bug? We had complains about the labels not displaying correctly.

vgb1993 avatar May 23 '22 12:05 vgb1993