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
912 stars 185 forks source link

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

Open vgb1993 opened 2 years ago

vgb1993 commented 2 years ago

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 commented 2 years ago

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