carbon-design-system/carbon-addons-data-viz-react

DEPRECATED. Please use Carbon Charts instead

carbon-addons-data-viz-react's Issues

DataTooltip 5 data elements CSS messed up

When using 5 data elements for DataTooltip the CSS for the third line is messed up. It's splitting the item__label on the left and item__data on the right.

[LineGraph] - Legend is only rendered initially and does not adjust to dynamic seriesLabels

Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?
My data changes whilst the user views it and it is possible for a new series to appear. The legend is only rendered on mount so does not update to display the new series label

Is this issue related to a specific component?
LineGraph

What did you expect to happen? What happened instead? What would you like to see changed?
Expected LineGraph to update legend when seriesLabels change

What browser are you working in?
Chrome

I've tested a change which I'm happy to put in a PR

LineGraph add prop for `dataUtc` that will use `scaleUtc()` instead of `scaleTime()`

Suggesting to add another prop such as dataUtc that will instead use the scaleUtc() function rather than the scaleTime() function for the x axis. Then we can use either the data or dataUtc props depending on its type. Another possible solution would be just having a prop for useUtc as a boolean and keeping the single data prop.

Code where scaleTime() is currently used at: https://github.com/carbon-design-system/carbon-addons-data-viz-react/blob/master/components/LineGraph/LineGraph.js#L123

Gauge Graph colors should be customizable

Detailed description

Currently the gauge colors in the gauge graph is hard coded to specific values. This issue also extends to the the gauge percentages, which, currently, is expected to only honor the first 2 entries.

Is this issue related to a specific component?
GaugeGraph

What did you expect to happen? What happened instead? What would you like to see changed?
Developers should be able to define their own gauge colors and their own percent thresholds (beyond only 2 thresholds).

LineGraph display 'No Data Available' message instead of blank graph

When the LineGraph is supplied empty/no data, instead of showing a blank graph could we have it display a message such as 'No Data Available'?

Enhancement - Ability to zoom in LineGraph

lower priority enhancement. The ability to click anywhere in the graph, and drag horizontally, to zoom in to a specific time-range within the current graph.
LineGraph should probably have a couple of new props, one to toggle the ability to zoom on/off, and another one that's just a function handler that the exploiter would pass in, HandleZoomEvent or something like that
Dragging should show a shaded rectangle as the user drags it, and when user lets go, the graph should probably call the HandleZoomEvent function handler prop, and pass in probably the first and last data point within that region as function arguments, and the exploiter would figure out based off those points what the new time is, and most likely just update the props of the LineGraph to pass a subset of the data array prop, which would be no different to the user manually changing the time himself which would also update the props data array.

[Enhancement] data schema for the graph should be an object instead of array

Detailed description

Enhancement: use object instead of an array for data in graphs

Seems the data schema in Carbon has to be nested array. However, by using GraphQL or some other framework, the array could only have one single type.

as shown in the screenshot, the data schema is like
[ [[value1, value2, value3], title1] , [[valueA, valueB, valueC], title2] ]

Is this issue related to a specific component?
Seems all components

What did you expect to happen? What happened instead? What would you like to see changed?

maybe support something like

[
{
data: [value1, value2, value3],
title: title1
} ,
{
data: [valueA, valueB, valueC],
title: title2
}
]

as data schema

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

15

Add labels

enhancement

DataTooltip not exported in index.js

Is there a reason DataTooltip is not available in exports?

Enhancement - when hovering over a LineGraph, should reflect data point visually

Several designs for graph call for a vertical line over the hovered data point, as well as hollowing out the data point(s) in the line and surrounding them with a circle, something like this:

i'd imagine we'd want this as a default behavior without customization, until someone asks for the ability to turn this off via a prop, but i doubt it

LineGraph does not rerender with new data

LineGraph component does not rerender when it's provided new data in its props.

DataTooltip styling issues - text overflow & positioning

When a name is long it overruns the tooltip box:

The component currently only renders on initial mount

Can we add a ComponentWillRecieveProps as well so the graph will update with new data without having to unmount it?

carbon-addons-data-viz-react/components/PieChart/PieChart.js

Line 27 in 7a6012d

componentDidMount() {

Enhancement: Hover on Pie Chart event

Add additional hover related props to PieChart

Detailed description

The Pie Chart tooltip doesn't fit within the Pie Chart if I shrink the radius of the PieChart to anything less than 90 we'd like some enhancements to the hover event.
For these smaller PieCharts, I'd like to be able to disable the tooltip with a property, and instead receive the Hover event that we can process ourselves.

Is this issue related to a specific component?
PieChart

What did you expect to happen? What happened instead? What would you like to see changed?
For these smaller PieCharts, I'd like to be able to disable the tooltip with a property, and instead receive the Hover event with the ID that's been hovered over so we can do something like this:

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
"carbon-addons-data-viz-react": "^1.12.1",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

see an example here:
https://codesandbox.io/s/0131kj4x7w
Hover over the pie Chart

Create Tooltip Component

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Enhancement - Support for Stacked BarGraphs

Detailed description

I would like to request adding support for stacked bar graphs to the BarGraph Data Vis component. This is an important feature for the WHI dev team working on Enterprise Archive.

I have attached a sample use case - we will have a lot of different modalities to show broken down by day. If we were to use Grouped Bar Graph, we will end up having 16 or 20 bars for each day in the graph - showing that over multiple days will not really work well for us.

Line charts with very large integer data values are cutoff off in Y axis

When the data values in a chart have very large values the text of the Y axis is being cut off

Screenshots:

Data tooltips are not formatted correctly when values are very large

When the data for a tool tip is a very large integer or floating point number the text extends past the tooltip box rather than being ellipsed.

Detailed description

Screenshot provided:

Update to [email protected]?

Using `carbon-addons-data-viz-react` alongside the latest `carbon-components-react` causes unmet peer dependencies - one depends on react@15 and the other on react@16. Is there a plan to update this repo to the latest carbon components react?

Line graph shows an empty graph when only 1 data point is passed

When the data is an array of One element only, we get an empty graph:

I would expect to either see a single dot on the graph, or if that's not feasible, I would think showing the 'no data available' message would also be acceptable.

GaugeGraph-Value text and labelText props always affect the first graph, when there are multiple graphs.

When we try to render multiple graphs, only the value and label text of first graph are affected.

[Bar Graph] -- Bar going out of graph range when using String instead of Integer

Issue:
Bar going out of graph range when using String instead of Int

Expected:

Found:

Recreate:
https://codesandbox.io/s/jpoy131qry

Bug:Accessiblity failure with GaugeGraph component

We observed accessibility issues when we integrate GaugeGraph component.

Error:The identifier element has the id "identifier"that is either empty or already in use.

The possible reason for this bug might be using same same id for svg and a div in render method->
<svg id={id} ref={id} /> <div className="bx--gauge-tooltip" id={id} style={tooltipStyles}>

DataTooltip styling: bug with scss

Detailed description

When I use DataTooltip in my app, the styling is wrong. If I inspect the element, I can see that the styles of bx--tooltip and bx--tooltip--shown are being applied, but not the styles of bx--data-tooltip (which should be coming from scss file).

Has bx--data-tooltip as a class:

But doesn't show any styles from it:

The styling works fine when working in Storybook, so I think it might be an issue with how the scss is handled in the build. I don't know much about scss but I did look into the build script and notice that the 'node-sass' package is imported but never used -- not sure if that might be related.

Is this issue related to a specific component?

DataTooltip

What did you expect to happen? What happened instead? What would you like to see changed?

Should look like this:

Instead looks like this:

What browser are you working in?

Chrome, Firefox

I don't see empty text component for 2 graphs when no data is present

Oops, not using latest version :) disregard

LineGraph: `onMouseMove` for blank graph produces console errors

When hovering over a graph that has no data (either [] or null) Javascript console errors are produced by the onMouseMove function:

LineGraph.js:281 Uncaught TypeError: Cannot read property '1' of undefined
    at LineGraph.onMouseMove (LineGraph.js:281)
    at SVGRectElement.<anonymous> (LineGraph.js:244)
    at SVGRectElement.<anonymous> (on.js:27)

Add ability to display multi-line components

GaugeGraph- The box size for halfGuageGraph need to be half .

The box size is full for halfGuage too, which kind of pushes the name of guage( like Public Outbound Traffic) down .

Multi Line Graph with different timeseries

Need Support for charts that aggregate data from different sources

Detailed description

Currently the line graph assumes that all of the lines drawn share the same timeseries (x axis) that is not the case for most complex data visualization. We need a more versatile line graph that could still function even though 2 or more lines have their independent x axis values

Line-graph re-renders even when data array is the same

Bargraph bars on hover show X-axis and Y-axis data together

Gauge graph doesn't change color.

Gauge graph doesn't change color. It doesn't change color, and defaults to fill color

Detailed description

I am using:
"carbon-addons-data-viz-react":"1.21.0",
"carbon-components": "^9.0.0",
"carbon-icons": "latest",
"carbon-components-react": "6.12.0"
The Guage graph works well, except it always has the same fill color. After I looked at the underlying code, I expected this to change out of the box(?), but it also doesn't work with user-defined values either ie.
[{ low: 0, high: 50, color: '#4B8400' },{ low: 50, high: 75, color: '#EFC100' },{ low: 75, high: 100, color: '#FF5050' }]

Steps to reproduce the issue

import { connect } from 'react-redux'
import React from 'react';
import { GaugeGraph } from 'carbon-addons-data-viz-react';
const Main = ({ severity }) => {
  return (
    <div>
      <GaugeGraph  labelText = {"Severity"} valueText= {severity + " / 5" } amount={60} total={100}/>
    </div>
  )
}

Additional information

I may be doing something completley dumb, but have spent quite a while trying to debug this!
Thanks!

LineGraph does not rerender on `height` prop change

We are trying to add a toggle to change the graph from a short view or tall view; this toggle just changes the number value of the height prop of LineGraph but when we change the height on an already mounted LineGraph it does not rerender the graph with the new height. We have to unmount then remount the LineGraph for the graph's height to visually update. Requesting that the LineGraph code be updated to rerender the graph accordingly when height is updated.

Default values for gauage component are always visible

@vidyakhadsareibm commented on Fri Oct 13 2017

Default values for amount and total (75 out of 100GB) are always visible. There was a requirement to hide those values because we dont have valid data to be displayed right now.

---

@tw15egan commented on Fri Oct 13 2017

@vidyakhadsareibm, this issue deals with the carbon-addons-data-viz-react repo, so I'm going to move this issue over there.

Support option to disable axes transitions

For large, fast-changing data sets, axes animation is a bottleneck

Detailed description

I'm displaying several line graphs on a page, each of which updates every five seconds with a growing set of data points. I noticed browser tab hangs and eventually tracked it down to vast numbers of d3 transition timers - I've seen that queue contain over 100,000 (!) timers waiting to be flushed. By instrumenting the timerFlush function I can see it sometimes taking over 5 seconds to drain the queue, at which point more data has arrived and the cycle continues.

A simple first pass of addressing this issue is to simply support disabling the axes animation, in the same way that the line animation can be disabled.

Is this issue related to a specific component?

I haven't seen this elsewhere, but it could theoretically impact the bar graph too I guess.

DataTooltip missing styles

The DataTooltip styles seem to be missing:

webpack config

Not really an issue, but I had to have webpack alias d3 to get everything to work properly:

module.exports = {
  ...other config stuff
  resolve: {
    alias: {
        d3: 'd3/build/d3.js'
    },
  },
};

Just wanted to jot this down somewhere.

[Pie Chart] No empty text

Detailed description

Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?

When there is no data passed into the Pie Chart widget, it will render a blank

Is this issue related to a specific component?

Pie Chart

What did you expect to happen? What happened instead? What would you like to see changed?

There should be an indication that there is no data available

What browser are you working in?

All browsers

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
N/A

GaugeGraph does not change with props

Detailed description

Gauge graph circle does not change based on props

Is this issue related to a specific component?

GaugeGraph

What did you expect to happen? What happened instead? What would you like to see changed?

If I pass 50 to the value prop, the gauge should fill to 50%

What browser are you working in?

GC, FF quantum

What version of the Carbon Design System are you using?

carbon-addons-data-viz-react 1.20.3

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

This is for an internal dashboard, so not high priority

Steps to reproduce the issue

See code sandbox: https://codesandbox.io/s/lx519nj139

Additional information

Add labels

bug

AVT[LineGraph] -- duplicated Id for tooltip

The id for tooltip in LineGraph is always same, so it causes an AVT issue about duplicated Id.

Bar graph component showing both X-axis and Yaxis data together when hover over bars

Title line template: [Title]: Brief description

Bar graph component showing both X-axis and Yaxis data together when hover over bars.

Detailed description

I am using Bar graph component . Problem is that on hover over the bars it shows both X-axis and Yaxis data together . Can we have it just show Y- axis label ?

Is this issue related to a specific component?

Yes Bar graph component

What did you expect to happen? What happened instead? What would you like to see changed?

When i hover over the bars i expect it to show just the Y-axis data instead of showing both

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

1.20.3

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM watson assistant solution

Steps to reproduce the issue

1. Just hover over the bars to see the value

Additional information

• Screen
  
  shots or code
  <BarGraph
  width={ 1220 }
  height={ 350 }
  id="graph"
  containerId="containerId"
  xAxisLabel={ "Current month" }
  yAxisLabel={ "Interaction" }
  emptyText="There is currently no data available"
  color={['#00a68f', '#3b1a40']}
  />
  
• Notes

emptyText for LineGraph isn't vertically centered

Detailed description

In the LineGraph component (version 1.20.0 of carbon-addons-data-viz-react), emptyText does not center vertically very well. The longer the text and/or shorter the graph, the more of an issue it becomes. In the following example, the last line of text starts to overlap the bottom line of the graph (with plenty of room above it), making it somewhat difficult to read:

Console errors when hovering over graph with no data

TypeError: undefined has no properties[Learn More] device-details.js:24684:11
onMouseMove https://current.portal4.public.alortiz.devapphou0202.dev.softlayer.local/js/react-containers/device-details.js:24684:11
renderOverlay/overlay< https://current.portal4.public.alortiz.devapphou0202.dev.softlayer.local/js/react-containers/device-details.js:24664:9
contextListener/<

when there's no data, or hovering over the first data point, you get errors when trying to index data if data is an empty array, or when hovering over last datapoint, it might be trying to access the array at an index that doesn't exist., should probably add some safety checks before indexing this.props.data

[Strict Mode Warning]: cWRP usage in PieChart

Detailed description

We just turned on Strict Mode for our project. PieChart uses componentWillReceiveProps, so we're seeing a warning to instead use getDerivedStateFromProps.

Is this issue related to a specific component?

We're only using PieChart, although other components may be affected.

What did you expect to happen? What happened instead? What would you like to see changed?

No warnings in the console when Strict Mode is turned on.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

    "carbon-addons-cloud": "^2.1.0",
    "carbon-addons-cloud-react": "^1.2.0",
    "carbon-addons-data-viz-react": "^1.21.0",
    "carbon-components": "^9.26.0",
    "carbon-components-react": "^6.39.1",
    "carbon-icons": "^7.0.7",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Watson IoT Platform

Steps to reproduce the issue

1. Wrap an app using PieChart with <React.StrictMode>
2. View errors in browser console

Additional information

Add labels

I don't have access to add labels.

BarGraph docs don't describe useful showTooltip prop

I just needed to disable the tooltip for my bargraph and it wasn't clear in the Graph Props documentation that I could use showTooltip={false}

[Undefined variable: "$text-02"]: carbon design scss variable not defined

Detailed description

Describe in detail the issue you're having. Is this a feature request (new component, new icon), a bug, or a general issue?

When trying to use scss import, I'm getting this:

./node_modules/carbon-addons-data-viz-react/scss/index.scss
  color: $text-02;
        ^
      Undefined variable: "$text-02".
      in /media/sf_nodeapp/DCS-Dashboard/src/node_modules/carbon-addons-data-viz-react/scss/components/DataTooltip/_data-tooltip.scss (line 11, column 10)

Class just looks like this:

import {PureComponent} from 'react'
import { LineGraph } from 'carbon-addons-data-viz-react'

import 'carbon-components/scss/globals/scss/styles.scss'
import 'carbon-addons-data-viz-react/scss/index.scss'

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?

Should pick up scss global variable from carbon design, but not sure why it doesn't. Carbon design scss loads fine since I have all style there.

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?

carbon design: 9.79.2
carbon react: 6.98.1

What offering/product do you work on? Any pressing ship or release dates we should be aware of?
DCS Dashboard ()internal IBM software for professional writers

Steps to reproduce the issue

Use this class:

import {PureComponent} from 'react'
import { LineGraph } from 'carbon-addons-data-viz-react'

import 'carbon-components/scss/globals/scss/styles.scss'
import 'carbon-addons-data-viz-react/scss/index.scss'

export default class AccessibilityCharts extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      lineData: [[50, new Date().getTime() - 5000],[40, new Date().getTime() - 4000],[30, new Date().getTime() - 3000],[10, new Date().getTime()]]
    }
  }

  render() {
    return <LineGraph xAxisLabel="" yAxisLabel="" seriesLabels={['Violation', 'Potential violation', 'Recommendation', 'Potential recommendation', 'Manual']}
      showLegend={true} drawLine={false} animateAxes={false} data={this.state.lineData}
      isUTC={true} showTooltip={true} />
  }

}

Shows fine without

import 'carbon-components/scss/globals/scss/styles.scss'
import 'carbon-addons-data-viz-react/scss/index.scss'

I have imported carbon-components/scss/globals/scss/styles.scss in my header file

Additional information

Without import

With import

I know I probably did something wrong, but not sure why. I'm using next.js 8 with next-sass plugin, which works perfectly fine for carbon design components

Ref error for Gauge Graph

Detailed description

A bug: I am getting the following error:

• The gauge graph component is using the old ref api, perhaps switching to the new createRef api would solve.
• Is ref necessary at all? This is used internally in component by D3 .select method and changing the selection from a ref to an id ('#' + id)selector does work for selection purposes.
• Additionally the id of container is surely to collide with a users own ids who are not intimately familiar with this components inner workings. Perhaps name-spacing would help prevent this.

Is this issue related to a specific component?

Yes, the GaugeGraph

What browser are you working in?

Google chrome Version 66.0.3359.139 (Official Build) (64-bit)

What version of the Carbon Design System are you using?

"carbon-addons-data-viz-react": "^1.13.0",
"carbon-components": "^8.18.16",
"carbon-components-react": "^5.43.1",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Watson IoT connection services

Notes

I have npm ls react to check for multiple instances and this has been ruled out as reason. I have also switched out the changed the D3 .select to use an id selector and this fixed the problem. Unless there is a reason for having the ref other than this selection I would suggest removing to avoid issues such as this.

Add labels

Bug

Module not found: Error: Can't resolve 'babel-runtime/core-js/object/get-prototype-of ... \BarGraph

Detailed description

I'm having troubles every time I use npm install on my project after added this package, the webpack bundle won't be compiled, because one module seems to be missing, and all the components need it.

I would like to know if is related to any missing dependencies, so I would like to be tokd

Carbon Design System:

"carbon-addons-cloud": "^2.2.0",
"carbon-addons-cloud-react": "^1.3.2",
"carbon-addons-data-viz-react": "^1.21.0",
"carbon-components": "^9.9.1",
"carbon-components-react": "^6.28.1",
"carbon-icons": "^7.0.7",

Steps to reproduce the issue

$  webpack-dev-server --config-name client-dev --env.wds --progress --open

Additional information

• Screenshots or code
  

• Notes
  Every time this happen, I enter the node_modules/carbon-addons-data-viz-react and use npm install

updating from 1.6.1 to 1.6.2 breaks LineGraph

The graph appears but no Line Graph is visible. When i update props after the initial render, then the line graph shows up. So it must be related to the changes to allow it to update via prop updates, it's breaking the initial render.

[SCSS not SASS] Correct path for SCSS import in Data Viz Addon Readme

Title line template: [Title]: Brief description

Detailed description

The current Readme has a path with sass instead of scss for the directory from which the data viz component styles are going to be loaded.

Corrected import should be from

carbon-addons-data-viz-react/scss/index.scss