vizzuhq / vizzu-lib

Library for animated data visualizations and data stories.

Home Page:https://lib.vizzuhq.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vizzu overwrites config object

korompaiistvan opened this issue · comments

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
image

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.

I agree, the 1. solution is preferable.

This is a bit too big of a change to include in a patch version, it will be released in 0.4.0.