You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This ticket try to resume the enhancement requests about colors in our charting library.
The main idea is to provide a set of color schemes to be used in our charts depending on the chart use case.
There are two main color scheme types:
Qualitative
Also known as categorical, needs a set of colors that use differences in hue to represent nominal differences, or differences in kind.
Quantitative
can be distinguished into two sub-categories, and can be represented as a continuous scale with an infinite number of colors or discrete scale with a finite number of colors.
sequential: where the data classes are logically arranged from high to low, and this stepped sequence of categories should be represented by sequential lightness steps. Low data values are usually represented by light colors and high values represented by dark colors.
continuous: discrete:
diverging: allow the emphasis of a quantitative data display to be progressions outward from a critical midpoint of the data range.
continuous: discrete:
Important aspect to consider:
the consumer should be aware of these different schemes (not only through documentation but from the code itself)
elastic-charts will provide a limited set of good color schemes. EUI will provide its own schemas. The consumer can choose the appropriate schema depending on the use case or let the user decide. By default in Kibana we should use EUI palettes, but we will let the user choose if they want optional choices.
each chart can consume the schema in different ways:
by default, providing an array of colors. Each color is assigned sequentially to each series defined in the chart spec, looping through the array if it contains less colors that the number of visualized series.
providing single color for each data series
(to be implemented) specifying a schema configuration that uniquely represent a color schema, elastic-charts will then compute the right parameters depending on the number of series available.
each visualization editor should provide the user with the ability to choose between saving the visualization color schema by name or by colors. By name means that if, in the future, that schema is changed (colors are swapped, added or removed) the new set of colors is applied overriding the previous configuration. By colors means that we save the schema configuration and, no matter what changes are applied, a saved visualization will remain the same.
A color schema is defined as cyclical in the following cases:
the color schema is a qualitative/categorical and we want to loop through the available set of colors if the number of colors is less then the number of series to represent. In this case, after the first "loop", we can apply a function to mutate the color by changing one of its property to avoid repeating exactly the same color.
the color schema is a quantitative and the start color is the same as the end color.
Possible color schema:
interfaceColorSchema{// start, mid, end, or any number of color steps or the full qualitative colors setcolors: string[];// https://github.com/elastic/elastic-charts/issues/294cyclical?: true|'hue'|'saturation'|'lightness';maxSteps?: number;// this is a simple descriptive fieldtype: 'quantitative'|'qualitative';// the interpolation applied to the color array. Can be undefined if using a qualitative schemainterpolation?: 'lab'|'hsl'|'hcl'|'rgb';// the type of scale used, by default could be discretescale?: 'discrete'|'continuous';}
Internally, when we are ready to apply a color to a specific series, we can call a set of functions (see #459) to compute the right amount of steps to be used.
We should apply the schema using the following conventions:
if we have a single series when using a Sequential, 2 color, scale, choose the end color as the default (the end should define the higher value on the scale)
if using the categorical schema, just apply the one color for each series. If the number of series is higher than the colors, alter the colors using the cyclical configuration when cycling again through the colors array
if using a quantitative schema, apply the interpolation specificed to the colors, using the scale provided. the cyclical configuration should not be considered, and the number of steps is determined by the number of series. If cyclical is configured and the scale is discrete, than we can assume that we want a cyclical sequential color array, that has maxSteps as the max number of steps on the discrete scale, and than cycle back if the number of series is higher than the maxSteps value.
This ticket try to resume the enhancement requests about colors in our charting library.
The main idea is to provide a set of color schemes to be used in our charts depending on the chart use case.
There are two main color scheme types:
Qualitative
Also known as categorical, needs a set of colors that use differences in hue to represent nominal differences, or differences in kind.
Quantitative
can be distinguished into two sub-categories, and can be represented as a continuous scale with an infinite number of colors or discrete scale with a finite number of colors.
continuous:
discrete:
continuous:
discrete:
Important aspect to consider:
Possible color schema:
The possible color schemas are in the form:
These can be applied to elastic-charts
theme
asInternally, when we are ready to apply a color to a specific series, we can call a set of functions (see #459) to compute the right amount of steps to be used.
We should apply the schema using the following conventions:
cyclical
configuration when cycling again through the colors arraycyclical
configuration should not be considered, and the number of steps is determined by the number of series. Ifcyclical
is configured and thescale
isdiscrete
, than we can assume that we want a cyclical sequential color array, that hasmaxSteps
as the max number of steps on the discrete scale, and than cycle back if the number of series is higher than the maxSteps value.linked issues:
references:
TODOs
The text was updated successfully, but these errors were encountered: