I'm playing around in a react project created with create-react-app (which uses webpack for bundling) and between how Vizzu is trying to locate its WASM and how webpack bundles it, I can't figure out an elegant way to get it to work.

I realize this is not an issue with Vizzu per se, but wanted to highlight it, as it will be important for the adoption.

Details as I understand them right now. The vizzu js module tries to import its own wasm module based on its own import path.

In my case this resolves to http://localhost:3000/node_modules/vizzu/dist/cvizzu.wasm

This file path is not recognized by the local dev server (as it only bundles .js/.ts files by default) Since the path is not recognized it serves the main webpage I'm trying to develop to test the module.

The wasm parser naturally fails to parse this and I get an empty page.

I know that there is a way to update the webpack config in order to serve the wasm file on this exact path, which is a half-decent solution but I don't (yet) know how to do it. I'll add details here once I have them

Hi,

my X axis contains more than 700 values (dates), which overlaps and looks like a big gray box.

How do I skip values, or override how this is displayed?

thanks

vizzu.min.js:19 Uncaught RangeError: WebAssembly.Memory(): could not allocate memory at eval (vizzu.min.js:19:1) at new Vizzu (vizzu.min.js:19:1) at eval (ShareOfChart.js:158:1) at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at flushPassiveEffectsImpl (react-dom.development.js:23574:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1)

Hi all!

Awesome project! I'm looking for the example code which made the logo gif. Is it shareable?

Atm i'm trying to concat the animations from 1 -> 2 in examples wihout success

https://lib.vizzuhq.com/0.3.0/#example-1.1.0

https://lib.vizzuhq.com/0.3.0/#example-1.1.1

can anyone guide/help me? https://jsfiddle.net/crashlaker/7L3yg1bk/

regards, C.

ps: perhaps we could only do this with the same dataset

The types for color palettes are a little odd.

type Color = `#${number}`
	|`rgb(${number},${number},${number})`
	|`rgba(${number},${number},${number},${number})`;

type ColorPalette = Color 
	| `${Color} ${Color}` 
	| `${Color} ${Color} ${Color}`
	| `${Color} ${Color} ${Color} ${Color}`
	| `${Color} ${Color} ${Color} ${Color} ${Color}`;

This makes sense, but in the docs, and in many CSS hex codes, they aren't just numbers.

In the docs, the examples give #9355e8FF #123456FF #BDAF10FF as a valid option, but this throws a TS error because there are numbers and letters.

Changing the color template string to #1 #11 #1 fixes the TS error, but is not actually valid.

Possible Solution

type Color = `#${number | string}`
	|`rgb(${number},${number},${number})`
	|`rgba(${number},${number},${number},${number})`;

This solves my use case, but I'm not sure if there was some logic around needing to be a number?

Is there an example of user interaction, i.e. I click a button, chart gets updated (for example with a different filter value)? I assume this could be achieved by registering a handler via chart.on() but the tutorial does not seem to have an example of this.

Perhaps I am doing something silly, but trying to recreate the tutorial line by line, I get this error when trying to add a tooltip.

import Vizzu from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js";

let data = {
  series: [
  {
    name: 'Genres',
    type: 'dimension',
    values: [
    'Pop', 'Rock', 'Jazz', 'Metal',
    'Pop', 'Rock', 'Jazz', 'Metal',
    'Pop', 'Rock', 'Jazz', 'Metal'
    ]
  },
  {
    name: 'Types',
    type: 'dimension',
    values: [
    'Hard', 'Hard', 'Hard', 'Hard',
    'Smooth', 'Smooth', 'Smooth', 'Smooth',
    'Experimental', 'Experimental', 'Experimental', 'Experimental'
    ]
  },
  {
    name: 'Popularity',
    type: 'measure',
    values: [ 114, 96, 78, 52, 56, 36, 174, 121, 127, 83, 94, 58 ]
  }
  ]
};

let chart = new Vizzu('vizzu-tooltip')

chart.animate({ data });

chart.animate({
  config: {
    channels: {
      x: { set: ['Genres'] },
      y: { set: ['Popularity'] }
    }
  }
})

chart.feature('tooltip',true)

I am on [email protected], using npm live-server.

Upon removing a series from label, the numbers run to zero while fading out. See below gif

Is this intended? My expectation would be a simple fadeout.

This is a strange one, I'm not even sure it's a bug or just unexpected for me.

In my WIP application, I'm keeping track of the config object I'm passing to Vizzu because I use it to render pieces of the UI. This state object extends the AppState interface from the below definition:

import { Data, Config } from "vizzu/dist/vizzu";
type FullConfig = NoOptional<Config.Chart>;
interface AppState {
  chartConfig: FullConfig;
  dataset: Data.TableBySeries;
}  

in my app I pass this to Vizzu every single time it gets modified by my app

// whenever state.chartConfig is changed by the app
chart.animate({
  config: state.chartConfig,
});  

in another place I attempt to render UI elements based on the state object, and so I loop through the key-value pairs of state.chartConfig.channels. a simplified snippet for this would be e.g.:

const colorSeries = state.chartConfig.channels.color
colorSeries.map(series => // render the ui)  

However, after the first UI change, I get the following error:

TypeError: selected.map is not a function

Looking at my state object, it's because the channels no longer hold string arrays, they have been replaced by objects

I believe this is done because JavaScript passes objects by reference and not by value, so this line in the lib mutates my original object, instead of creating a copy for its own internal use.

This can be solved in two places in my view.

1. Either the lib takes a deep copy of the config object before mutating it
2. I pass a deep copy to the animate method instead of the actual object

I think option 1 would give the better developer experience.

In the first example, the series of Foo, Bar and Baz fails to compile for TS.

Here is a screenshot of the error after copy / pasting.

It's complaining that type is required on each entry, but is not present in the example.

I am not sure if the following is correct, but it passes TS

import Vizzu, { AnimTarget } from 'vizzu'

let data: AnimTarget['data'] = {
    series: [
      { name: 'Foo', values: ['Alice', 'Bob', 'Ted'], type: 'dimension' },
      { name: 'Bar', values: [15, 32, 12], type: 'measure' },
      { name: 'Baz', values: [5, 3, 2], type: 'measure' }
    ]
  }

let chart = new Vizzu('myVizzu', { data })

If type is not actually required, perhaps make it so in the types. If it is, could you add it to the example?

In the distributed package.json, the key for TS types is missing, thus leading to TS complaining it cannot find them.

// package.json
{
  "name": "vizzu",
   ...
  "types": "dist/vizzu.d.ts",
  ... 
}

They are being included, but not referenced. Doing the above in my node_modules directory solved the issue

Legend and Geometry: Area charts work in reverse of each other as shown in the attached image.

I attempted to remedy this with configurations (reverse, orientation, rotate, etc.), but none seemed to solve with desirable outcome. It would be nice if this directionality was corrected by default, or a configuration to reverse the order in the Y Axis.

• use the project wiki page for only general information, for example roadmap
• link wiki page in every project's contributing guide and use a project specific contributing.md