feat: add encodeable utilities for chart

[kristw]

🏆 Enhancements

Define encoding config for a visualization

• Each visualization has one or more channels that can be encoded, such as x, y, color, stroke, fill. These channels configurations should be consistent/sharable across all visualizations. For example, x and y usually have scales and axes. Scales have domain, range. Axes have label, format. Color can support categorical, sequential or fixed color. All channels can support fixed value, field name in the data, or sometimes aggregates (haven't implemented the aggregate yet).
• Each encoding channel config is based on vega-lite encoding grammar. (See line chart example, vega-lite encoding documentation)
• Only adopt a small subset of vega-lite encoding grammar for now as we don’t have enough time (and may not intend) to provide 100% feature of vega-lite.

Implement TypeScript types for the encoding config.

• First attempt was using all types from vega-lite package (XXXFieldDef) directly but ended up getting too overwhelmed.
• Now adopting the primitive types from vega-lite then write higher-level types that has same name but only with the subset of the fields, so we can keep that of what we support and slowly adopt more in the future instead of taking it all now which our encoder does not know how to handle and also make it harder to implement the encoder. (preview)

Write an encoder that parses the encoding config mention above and become a helper during visualization rendering.

• There is a base Encoder class and each visualization such as line chart will implement its own Encoder that extends from the base class. See: base Encoder class, Line Chart's Encoder

Long shot

• Once all these encoding configs code are a bit more stable, it could be extracted to @superset-ui/encodeable.

[conglei]

not sure if we can make sure that the key in the PlainObject will be always in the set of key? seems impossible.\

[williaster]

I googled a bit and couldn't figure this out, worth asking in #typescript tho?

[kristw]

Can use typeguard to help. Not sure if possible to define solely as type without knowing the fields before hand.

export type PlainObject<Key extends string = string, Value extends any = any> = {
  [key in Key]: Value
};

export type Dataset<T extends string> = {
  keys: T[];
  values: Partial<PlainObject<T>>[];
}

function isDataset<T extends string>(input: Dataset<T>): Dataset<T> {
  return input;
}

[kristw]

[kristw]

mmm. this is more complicated. the guard only work for inline input, but if you pass a variable with type already it make keys string[] instead of 'a'|'b'|'c'[] and the check does not work.

[williaster]

Looking great overall! some crazy TS in there 😎

Thanks for the hard work on this!

[williaster]

does a boolean mean it impossible to have different color / fill?

[kristw]

Umm, at this point yes. the fill is gradient from [stroke] color to white.
I can make this boolean | string, which may lead to some ugly line charts with stroke and fill not getting along.

[williaster]

I googled a bit and couldn't figure this out, worth asking in #typescript tho?

[kristw]

Addressed most of the comments.

[williaster]

Overall this looks super clean and solid improvements vs the first round! 😍 🎉 I think none of my comments are blocking and that we could extend the fill option to accept a string in the future if need be.

thanks for all the hard work on this, pretty crazy TS here! ❤️ will approve from my end but still let @conglei comment/review if he wants!

[williaster]

I didn't see any imports of vega, is this because it's a vega-lite dep? bundle size should be okay with the deep imports I'd think.

[kristw]

Tried removing it and realize vega-lite needs it.

[conglei]

Thanks for adding this! 🥂 It looks good to me!