Right now when editing the JSON it can get into an invalid config. To avoid this add a save button and update the schema only if pressed.

This would mean changing the schema for the chart, which is a breaking change in the library.

The automatic calculation should take the number of series displayed (x-axis tick number * bar number in groups) and the width of the chart I think

Allow for rewriting part of the padding:
Eg.: Want to change the padding of the chart but only the 'left' one. Allow it without losing all the default paddings on the other sides.

I could not make it work yet but this is how it should work:

• the event props on the wrapper should have: chartNames
• the LegendComponent should have childName for the corresponding data set (one from chartNames)
• The createChart component should have name prop
• All of these seems to be set correctly, the legend from the API is updated with a childName prop, in addition when getting data from the API each series has a unique name string assigned to it, ensuring that the props will remain unique, and providing the same name for the different components in a uniform way.

• Use react router for different chart types, so you can send link to an exact chart.
• Make the link menu better, probably horizontal instead of vertical so it can grow better.
• Add a few more examples.
• Describe the examples so the user can decide which example is probably the closes to the feature they want.
• The description could be on an index page in "tiles" or just a list of charts.

• Pie chart tooltip
• Pie chart colored
• Scatter chart (standalone tooltip)
• Area chart (legend, no tooltip)
• Chart for only truncation (legend, axis)
• Chart for truncation and tootlip on legend
• Chart for only interactive legend (on click toggle visibility)

FYI, there's now an example showing how to create an interactive legend with a pie chart here:
http://patternfly-react.surge.sh/charts/legend-chart#interactive-legend-with-pie-chart

Note that we had to make a couple of small tweaks to support pie charts, which will be available in the next PatternFly release.

Please keep in mind that the next PF release is in two weeks

When using grouped bar chart the domain padding on x axis should be applied automatically so the first bar starts at the Y axis

When stacking the charts the Y-axis is not recalculated and this causes some weird chart layout where a bar heigh for huge values still can be the same as a bar height for small values.

Add option to pass a dataComponent to the library to have this fuctionality from Victory Chart.

Observe how the line moves with the mouse but not the tooltip. Optimally the switch mouseFollow option on the tooltip would toggle between:

• Line and tooltip is following the mouse
• Both the line and the tooltip sticks to the x-axis

Create a custom tooltip that supports

• Colored square before the text
• Customizable text AND value by a callback function

For MVP: Create a custom tooltip component that will have the next props (at least):

• color - control the color of the square
• callback - returns the labelName, color, other optional props to the tooltip AND the data point which is passed to the tooltip (not sure yet how it this possible)

Note: The colored square before the data should be a PF square icon: import { SquareFullIcon } from '@patternfly/react-icons'; or the icon can be a prop to pass for added customizability.

When there is a bar chart automatically apply domainPadding even if there is something else than a bar chart.

Sometimes getting this message:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
CreateWrapper

• Add option for the pie chart too

It may be needed, but it is possible maybe to make this change in a different place outside the charting library.

Make a demo if possible, make it possible if not.

We can make this in two way:

1. Pass a prop and automatically calculate the second axis. (feature)
2. Pass an array of axes and say which data set is linked to it. (breaking change)

Probably the second approach is more feasible.

If you have a legend with floating tooltip it is still visible when the user hovers over the legend on the right side.

Patternfly charts export a event helper for the chart (note that not for the legend that we use in this lib) which would make probably the chart change colors when hovering over the legend element.

https://www.patternfly.org/v4/charts/legend-chart#interactive-legend

We need a documentation for this app, we can generate one from the types, this would require for sure to comment all the types in the library which is exported.

Other way to go about this is to write it manually, or have a really well described demo application for most of the sensible combinations of charts.

Allowing to pass multiple charts to the grouped chart should enable us to create something like this:

https://issues.redhat.com/secure/RapidBoard.jspa?rapidView=8159&projectKey=AA&view=detail&selectedIssue=AA-528&quickFilter=47234

We should match the tooltip on hover action to the example provided above:

• A dot that intersects the line chart
• Tooltip is anchored to the dot and not the cursor (existing behavior)

There could be a case where the data is in multiple API requests. Option to pass array of API instead of only one.

• MVP: The default function would only process a single call, to make it work the user of the lib should supply his own function.

Example.:

• kind: group usually has empty props value, make it optional
• kind: stack the same ^

Add Math.abs(number) to the function

When hovering over the legend the tooltip still shows, this can be fixed with vornoi padding. Lets make it the same as the chart padding.

When using a tooltip which follows the mouse, the tooltip should have the color squares like the legend has.

The legend tooltip currently is defined as extra props in the schema. It would be better if it would be added as a new tpye in the ChartTooltipTypes so we can have custom functionality modualrized.

When chart has no legend allow for 'interactive legend' from outside of the chart to hide/show series

The user will have to preprocess their own data, allowing the chart builder to remain more general and not specialized for one endpoint. It will still have to add its own flags probably to the dataset, but this could be done with some exported functions from the library which the user can call, or maybe after, but then allowing the user to overwrite some of the custom added flags for more customization and tweaking if needed.

Also add tooltip when too long to the legend.

Interactive legend for multiple charts from one series

• Eg.: line chart where we have one series and we are using two different attributes for each line
• I think maybe we should sacrifice memory and just duplicate the data as if it were two series, so basically we will have a data set for each chart we are displaying, no matter if the data is duplicated --> this is not feasible from the received data
• It could be derived from the attributes field from the API
• This would mean that we create series like the following: if we have `attributes: [ 'a', 'b' ] then we duplicate the series we get in a way that one will contain everything without 'a' and the other will contain everything without 'b'

The implementation in a basic form:
RedHatInsights/tower-analytics-frontend@1f609cb

@ZitaNemeckova I got this task over from here: https://issues.redhat.com/browse/AA-925

What we need:

• Wording of the titles of the current charts, make it more transparent what the chart in that tab uses rather than something like "anomaly detection"
• Add descriptions which would in short describe what entry in the schema is responsible for the exact behavior we are trying to showcase in that demo chart.
• Add the tags (if we can come up with some nice set of tags)
• #81
  • Examples?