Issue in React-vizgrammar 0.7.25
Ambujaa10 opened this issue · comments
Description:
I have two bar charts with different chart config. The chart config of both are given below.
this.ChartConfig = {
x: "username",
charts: [
{
type: "bar",
y: "duration",
color: "sessionId",
colorScale: ["#00e600"],
orientation: "left",
}
],
yAxisLabel: ' Duration (s)',
xAxisLabel: 'Username',
maxLength: 10,
legend: false,
append: false,
};
The above config is to display the session with highest duration followed by all the sessions of that particular user and the next session with highest duration. It is Bar Chart with Color Categorization.
this.ChartConfig = {
x: "username",
charts: [
{
type: "bar",
y: "duration",
fill: "#00e600",
mode: "stacked",
orientation: "left",
}
],
yAxisLabel: ' Duration (s)',
xAxisLabel: 'Username',
maxLength: 10,
legend: false,
append: false,
};
The above chart config displays users with average duration. It is Horizontal Bar Chart.
Both configs have common issues like x axis labels cutoff and tip cutoff where the first config has an additional issue in sorting values with respective to the duration. The following images illustrate the issues. These are relevant to version 0.7.23.
I get the following error in the console.
bundle.js:formatted:118148 TypeError: Cannot read property 'x' of undefined
at eval (eval at (bundle.js:formatted:47639), :1:174888)
at eval (eval at (bundle.js:formatted:47639), :6:799501)
at Array.reduce ()
at Object.getBaseProps (eval at (bundle.js:formatted:47639), :6:799168)
at Function.C [as getBaseProps] (eval at (bundle.js:formatted:47639), :6:226576)
at u.value (eval at (bundle.js:formatted:47639), :6:291026)
at u.value (eval at (bundle.js:formatted:47639), :6:290499)
at u.value (eval at (bundle.js:formatted:47639), :6:289626)
at updateClassInstance (bundle.js:formatted:116607)
at beginWork (bundle.js:formatted:117156)
Suggested Labels:
Suggested Assignees:
@CharukaK
Affected Product Version:
React-vizgrammar 0.7.25
OS, DB, other environment details and versions:
Steps to reproduce:
X axis labels cutoff and tip cutoff should be solved in both configs and the Bar Chart with Color Categorization should sort the values of duration(Y-axis) in descending order.
Related Issues:
Issue occurs in line
Axis ticks trim as expected in 0.7.25.
Can you check the config https://stackblitz.com/edit/react-vizgrammar-time-bar-qaqwj7
