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
876 stars 182 forks source link

[Bug]: `ccv-gauge-chart` Not Displaying Correctly in Production - `this.getHolder()` from the core is not working #1823

Open mohamedMok opened 1 month ago

mohamedMok commented 1 month ago

Application/Team

external

What happened?

Description

When using the ccv-gauge-chart, the chart displays properly in development mode, but it fails to work correctly in both preview and production environments. I am experiencing a specific error in the production environment related to the function this.getHolder() from the core library.

Environment

Vue: 3.24.21 @carbon/charts-vue: 1.16.0 Build Tool: Vite Error Details In the production environment, the following error appears in the browser console:

Error: this.getHolder return undefined

It seems like the function this.getHolder() from the core library is not functioning as expected.

Steps to Reproduce

1 Import the charts in the Vue application as shown below:

import ChartsVue from '@carbon/charts-vue';
...
app.use(ChartsVue);
...

2 Use the chart component in a Vue template with the following setup:

const chartOptions = {
  title: props.title,
  animation: true,
  height: '130px',
  // width: '100%',
  toolbar: {
    enabled: false
  },
  color: {
    pairing: {
      option: 3
    }
  },
  gauge: {
    type: 'semi'
  }
}
<template>
  <div id="chart-demo">
    <ccv-gauge-chart id="chart" :data="chartData" :options="chartOptions"></ccv-gauge-chart>
  </div>
</template>

Additional Information

The chart displays correctly in development mode. The issue occurs only in preview and production environments.

Request for Assistance

I suspect I might have missed something in the configuration or there could be an issue related to the production build process. Could you please help me identify and resolve the issue?

Configuration Files

If relevant, please find attached or referenced the configuration files for Vite and other related setup.

Thank you in advance for your assistance!

Version

@carbon/charts-vue@1.16.0

Data & options used

No response

Relevant log output

No response

StackBlitz example

No response

What priority level would this be in your opinion?

P2

mohamedMok commented 1 month ago

A link to a stackblitz => https://stackblitz.com/edit/vitejs-vite-pvftlf?file=package.json,src%2Fmain.ts,src%2FApp.vue&terminal=dev