[Bug]: Cannot import labels enum

[leetrout]

Contact Details

No response

What happened?

Typescript error

Type '"labels"' is not assignable to type 'ScaleTypes'

And if I try to import it I get a different error:

import { ScaleTypes } from "@carbon/charts/interfaces/enums";

import * as EventEnums from './events';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)

Version

"@carbon/charts-svelte": "^0.54.0"

Data & options used

<script lang="ts">
  // import { ScaleTypes } from "@carbon/charts/interfaces/enums"
  import { BarChartSimple } from "@carbon/charts-svelte";
  import "@carbon/charts/styles.min.css";
  import "carbon-components/css/carbon-components.min.css";
</script>

<BarChartSimple
  data={[
    { group: "Qty", value: 65000 },
    { group: "More", value: 29123 },
    { group: "Sold", value: 35213 },
    { group: "Restocking", value: 51213 },
    { group: "Misc", value: 16932 },
  ]}
  options={{
    title: "Simple bar (discrete)",
    height: "400px",
    axes: {
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: "labels" },
    },
  }}
/>

### Relevant log output

```js
Error: Type '"labels"' is not assignable to type 'ScaleTypes'. (ts)
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: "labels" },
    },

### Codesandbox example

_No response_

[leetrout]

Maybe related to vitejs/vite#2579

[theiliad]

Hi 👋🏻
Thank you for reporting this, however I'm not really a vite user. I'd need some help on this one...

[metonym]

So this is related to #1148 (comment) and metonym/carbon-charts-svelte-examples#1.

Full credit to @benmccann for getting to the bottom of this: metonym/carbon-charts-svelte-examples#1 (comment)

@leetrout Try the following workaround:

• import ScaleTypes as a type
• define options in script
• cast "labels" as ScaleTypes.LABELS

<script lang="ts">
  import { BarChartSimple } from "@carbon/charts-svelte";
  import type { BarChartOptions, ScaleTypes } from "@carbon/charts/interfaces";

  const options: BarChartOptions = {
    title: "Simple bar (discrete)",
    height: "400px",
    axes: {
      left: { mapsTo: "value" },
      bottom: { mapsTo: "group", scaleType: "labels" as ScaleTypes.LABELS },
    },
  };
</script>

<BarChartSimple
  data={[
    { group: "Qty", value: 65000 },
    { group: "More", value: 29123 },
    { group: "Sold", value: 35213 },
    { group: "Restocking", value: 51213 },
    { group: "Misc", value: 16932 },
  ]}
  {options}
/>

An alternative is to type options as any.

Full sveltekit-typescript example

[R-Bower]

I'm seeing this same issue with @carbon/charts-react.
@metonym you may be able to get away with applying as any to the labels field, like so:

<GroupedBarChart
      data={data}
      options={{
        axes: {
          bottom: {
            mapsTo: "value",
          },
          left: {
            mapsTo: "key",
            scaleType: "labels" as any,
          },
        },
        height: "320px",
        width: "500px",
      }}
    />

[theiliad]

Hi @leetrout,

Pls let us know if @metonym's proposed solutions solves this issue for you #1255 (comment)

Closing for now, feel free to reopen with additional details 🙂

[HighPriest]

The installation guide in Svelte README isn't mentioning that the enums are stored in @carbon/charts package, which also has to be installed as a development dependency.
This is causing confusion as the imports are no-where to be found, the enums are inside the charts-svelte package, but are not exported and there is no information about this.

Here is the fixed installation one-liner:

npm install -D @carbon/charts-svelte @carbon/charts @carbon/styles d3 d3-cloud d3-sankey

Here is the old one:

npm install -D @carbon/charts-svelte @carbon/styles d3 d3-cloud d3-sankey