reaviz / reaviz Goto Github PK

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Hello, when I run reaviz in a next js application I have the following error message and I can't display area chart component:

Error: require() of ES Module /node_modules/d3-array/src/index.js from /node_modules/reaviz/dist/index.cjs.js not supported.
Instead change the require of index.js in /node_modules/reaviz/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

Expected behavior

See Reaviz AreaChart component without this error message.

Minimal reproduction of the problem with instructions

• create a component and writing import { AreaChart } from 'reaviz';
• create a next js page and import component in the page
• run next dev

What is the motivation / use case for changing the behavior?

Use reaviz in my nextjs application

Environment

Libs:
- react version: 18.1.0
- reaviz version: 13.1.6
- next: 12.2.5

Browser:
- [X] Chrome (desktop) Version 104.0.5112.101
- [X] Firefox version 103
 
For Tooling issues:
- Node version: 18.0.0
- Platform:  Mac

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

I constructed this demo using a few examples from the stories, and I have the following issues:

• When changing the range, the chart lines are being rendered incorrectly.
  

• The same exact chart looks different between the brush and the large chart. Is that because of the different heights?
  

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-reaviz

1. Use the chart brush to shorten the range
2. Scroll to the right.

(The codesandbox link is not working)

Environment

Libs:
- react version: 17.0.1
- reaviz version: 9.3.14

Browser:
- [x] Chrome (desktop) version 86.0.4240.198
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v12.18.3
- Platform:  Mac

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Is there an option to manually define the order of Nodes in the Sankey?

Expected behavior

For example making sure that a Node with title "High" is above "Medium" and "Low"

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: X.Y.Z
- reaviz version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Updating to the latest version of reaviz causes a compile error

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

The Map component currently supports a single fill color for all features.

Expected behavior

It would be nice if we could pass a property key as the fill value alongside colorScheme and emptyColor as props in order to render fill colors based on the designated property value of each feature.

Minimal reproduction of the problem with instructions

I wasn't able to come up with a complete test, but I think this feature can be implemented by adopting some of the logic in the HeatMap component.

The getValueScale() function used by HeatMapSeries would have to be adjusted to indicate which property to use as the value since geojson doesn't conform to the standard ChartDataShape.

The resulting valueScale() function could then be passed to the renderCountry() callback in order to apply individual fill colors to each path.

What is the motivation / use case for changing the behavior?

Mapping scaled fill values to individual paths would allow users to build choropleth maps, which offer more informative data viz than the current single-color basemaps.

Is there a way to get the data of clicked Bubble with the onClick event?

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

This is a copy-paste from jask-oss original issue

When putting an SVG or SVG partial into the format property, they do not appear because they are put inside a title tag.

Expected behavior

Putting an SVG into the format property will render it properly (maybe even extend this to normal HTML with <foreignObject>.

Minimal reproduction of the problem with instructions

https://codesandbox.io/s/reaviz-bar-demo-x2b24

• Return an SVG inside the format property.
• SVG does not appear because it's embedded in a title

What is the motivation / use case for changing the behavior?

Having icons for labels instead of text can improve the look and feel of charts.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

According to your documentation this is possible to set series label as null.
But actually when setting null, we receive an error.

Expected behavior

render Venn diagram without a label

Minimal reproduction of the problem with instructions

See this demo.
https://codesandbox.io/s/reaviz-codesandbox-template-forked-hqefg3?file=/src/App.js:375-379

Environment

Libs:
- react version: 17.0.2
- reaviz version: 12.2.0

Browser: all
 

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

ChartContainer does not render multiple series as intended and throws an error that the children is not of the right type.

Expected behavior

We should be able to create a chart with multiple types of data series.

Minimal reproduction of the problem with instructions

When following the guide to create mixed chart types here:
https://reaviz.io/?path=/docs/docs-advanced-custom-charts--page
an error is thrown.

Demo

https://codesandbox.io/s/reaviz-chartcontainer-bug-k1cj4?file=/src/App.js

Environment

Libs:
- react version: 16.13.1
- reaviz version: 8.1.3

 
For Tooling issues:
- Node version: v10.16.0
- Platform:  Windows

When bumping from 10.3.0 to 10.4.4 I encountered the following issue when building my project:

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/runner/work/monorepo/monorepo/website/node_modules/d3-array/src/index.js
require() of ES modules is not supported.
require() of /home/runner/work/monorepo/monorepo/website/node_modules/d3-array/src/index.js from /home/runner/work/monorepo/monorepo/website/node_modules/reaviz/dist/index.cjs.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/runner/work/monorepo/monorepo/website/node_modules/d3-array/package.json.

Is this an ESM-first module now?

In my opinion, this should be clearly stated in the documentation.

Also, since this breaks backward compatibility (given the current JS ecosystem), I think this should warrant a major version change; not a minor one.

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release) **i guess**
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When rendering a Heatmap and CalendarHeatmap, the cells are rendered with too much padding, making the component unusable.

Heatmap example from Reaviz demo code:

CalendarHeatmap from my own project:

Expected behavior

Correctly rendered Headmap and CalendarHeatmap

Minimal reproduction of the problem with instructions

Visit https://codesandbox.io/s/reaviz-codesandbox-template-jpw6m?from-embed

I use this library for my react project. I need a radar chart. When I implement it, It displays the maximum value in my data as the last limit in the graph.

For example in this chart, my maximum value is 2. and the end of the chart is 2. but I want to set a default value as 5. Five circular lines I mean.

For another example my values is 3,2,4 out of 5 so I want to show chart max value is 5.

my code:

const datam = value.map(a => ({key: a.title, data: a.value}));
	    <RadialAreaChart
                                data={datam}
                                height={350}
                                width={350}

                                valueToPercent={249}
                                axis={<RadialAxis type="category"/>}
                            />

Hello,
In the bar chart example of the documentation you're using a function called getXScale but it's not specified where it comes from.

https://reaviz.io/?path=/docs/charts-bar-chart-axis--left-right-axis

I did some digging in the repository, it's comming from a common directory but it doesn't seem to be exposed. Is it for internal library use only ?

Thank you in advance for your answer

Requirement

• Convert components to FCs
• Convert utils to hooks

Tasks

FCs

• Bar Chart
• Area Chart
• Heatmap
• Hive Plot
• Sankey
• Line Chart
• Linear Gauge
• Pie Chart
• Radial Area
• Radial Line
• Radial Bar Chart
• Radial Scatter Plot
• Scatter Plot
• Sparklines
• Axis
• Gridlines
• Brush
• Legends
• Tooltip
• Masks

Hooks

• Zoom
• Pan
• Move
• ZoomPan
• ChartZoomPan
• ChartContainer

Known Issues

Parent Reading Child Props

Parent components who rely on nested properties for processing ( such as gridline direction ) will not work correctly in the current implementation. Example:

  renderSeries(
    yAxisGrid,
    xAxisGrid,
    element: GridElement,
    type: 'line' | 'stripe'
  ) {
    const { xScale, yScale } = this.props;

    return (
      <Fragment>
        {this.shouldRenderY(element.props.direction) &&
          this.renderGroup(element, yAxisGrid, yScale, 'y', type)}
        {this.shouldRenderX(element.props.direction) &&
          this.renderGroup(element, xAxisGrid, xScale, 'x', type)}
      </Fragment>
    );
  }

In this scenario, element.props.direction will be undefined since its not longer a component class.

This can be fixed by setting those defaults on the parent though. See this commit for more info: e156d00

Pan Zoom

I'm considering using the gestures library I used in reaflow for the pan / zoom operations.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Other... Please describe:

Current behavior

The PieArcSeries has a Doughnut property which affects how the pie chart is rendered

Expected behavior

This does not really make sense, either you implicitly set the arcWidth or innerRadius or you will pass explicitly a DonutArcSeries which has the properties

What is the motivation / use case for changing the behavior?

imho it is just bad api design

Environment

Libs:
- react version: X.Y.Z
- reaviz version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Now it just simply selects parts between circles. but Venn Diagrams have a selection like (A\B) or (A xor B)

Expected behavior

Some kind of selectors, like ["A","B","^A|B"]

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Real defining of Venn Diagram

The line on the area chart is not in sync w/ the area. See: https://reaviz.io/?path=/story/docs-chart-types-area-chart--page

cc @ynahmany

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When the treemap label is longer than it's rect, it doesn't wrap and instead just disappears.

Expected behavior

Labels wrap nicely.

Minimal reproduction of the problem with instructions

I've checked the current shape of the wrapText function here and while looping over the words, in lines 33 and 38 it always adds the word width to the sum. It then compares sumWidth to container width in line 52 and if we need wrapping, it's obviously longer, so it returns null.
Since wrapText is used in different charts as well and I've just started using reaviz, I'm probably not the person to fix it so I don't cause any regressions.

const simpleData: ChartShallowDataShape[] = [
    {
      key: "Very long text, make it as long as necessary or shrink the treemap width so it's longer than the rect's width.",
      data: 1,
    },
    ]
    
     return <TreeMap
      height={400}
      data={simpleData}
      margins={20}
      series={
        <TreeMapSeries  />
      }
    />

Environment

Libs:
    "react": "17.0.2",
    "reaviz": "13.1.3"
Others:

hello, how to add label to venn diagram intersection?

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Attempting to read the documentation on Histograms (Bar Chart > Vertical > Histogram > Dates or Numbers) but the documentation will display very briefly (only a second or so) and then disappear. Opening the Dev Tools shows errors in the console:

vendors~main.173cd315.iframe.bundle.js:6 Uncaught Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

This is occurring both in the Reaviz documentation (https://reaviz.io/?path=/docs/charts-bar-chart-vertical-histogram--numbers) as well as through Chroma. It occurs in Chrome, Brave, and Edge browsers as well as on Chrome mobile (Android).

Expected behavior

Should be able to read the documentation on Histograms

Minimal reproduction of the problem with instructions

• Step 1 - Navigate to the docs page: https://reaviz.io/?path=/docs/docs-intro--page
• Step 2 - Navigate to Charts > Bar Chart > Vertical > Histogram
• Step 3 - Click on either Dates or Numbers

What is the motivation / use case for changing the behavior?

Environment

N/A - Issue with the documentation

Libs:
- react version: X.Y.Z
- reaviz version: X.Y.Z


Browser:
- [x] Chrome (desktop) version 102.0.5005.115
- [x] Chrome (Android) version 102.0.5005.125
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 102.0.1245.44
- [x] Brave version 1.39.122 Chromium: 102.0.5005.115
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Custom tooltip doest work for venn chart

please, check the example
https://codesandbox.io/s/reaviz-codesandbox-template-forked-oiolf?file=/src/App.js

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Currently, if there is a value for a sankey link of 100000 and another link with value 1, it is impossible to hover over/click on the smaller link.

Expected behavior

It would be great if we can define minimum link width in pixels so even if there is a small data set, the link will be clickable.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: latest
- reaviz version: latest


Browser:
- [X] Chrome (desktop) version - latest
- [X] Chrome (Android) version XX
- [X] Chrome (iOS) version XX
- [X] Firefox version XX
- [X] Safari (desktop) version XX
- [X] Safari (iOS) version XX
- [X] IE version XX
- [X] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

I'd like to make a bar chart look cleaner by removing axis lines.
To remove the line, set strokeWidth to 0 works for LinearAxisTickLine but not LinearAxisLine.
strokeWidth of LinearAxisLine is always set to 1.

Expected behavior

strokeWidth number should be used as a line element prop.

Minimal reproduction of the problem with instructions

See the following code snippet.

function MyChart() {
  return (
    <BarChart
      width={350}
      height={250}
      data={data}
      gridlines={null}
      series={<BarSeries colorScheme="hotpink" bar={<Bar gradient={null} />} />}
      xAxis={
        <LinearXAxis
          type="category"
          axisLine={<LinearAxisLine strokeWidth={0} />}
          tickSeries={
            <LinearXAxisTickSeries
              line={<LinearAxisTickLine strokeWidth={0} />}
            />
          }
        />
      }
      yAxis={
        <LinearYAxis
          type="value"
          axisLine={<LinearAxisLine strokeWidth={0} />}
          tickSeries={
            <LinearYAxisTickSeries
              line={<LinearAxisTickLine strokeWidth={0} />}
            />
          }
        />
      }
    />
  );
}

What is the motivation / use case for changing the behavior?

Remove axis line from chart.

Is it possible to implement props for min and max values of the y-axis scale on area and line charts? It seems at the moment all area and line charts have a y-axis that always starts at 0.

#87 didn't completely fix the issue as I'd have hoped. We'll also need to add "type": "module" however this breaks a couple packages that uses a legacy way of defining their exports. I am working on a fix and will open a PR soon.

The stripe is missing on this last one.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When I using the provided demo and data of component CalendarHeatmap, TypeError occured and it showed that date.getFullYear() is not a Function and date.getMonth() is not a Function in index.cjs.js. I have checked for the reason, I guess maybe the type of parameter date results in this error.

Expected behavior

Demo can be run well!

Minimal reproduction of the problem with instructions

• import { CalendarHeatmap } from "reaviz"
• <CalendarHeatmap width={750} height={115} data={data} view={"year"} />
• Run!

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: 16.13.1
- reaviz version: 8.1.8
- Typescript version: 3.9.6


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.14.1
- Platform:  Windows

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Build errors with error message:

ERROR in [at-loader] ./node_modules/reaviz/dist/src/common/utils/position.d.ts:23:71
TS2304: Cannot find name 'PointObjectNotation'.

Expected behavior

Adding reaviz to package.json allows me to use the package in my project.

The problem here is typescript, which automatically creates the definitions. Unfortunately it does not find type information for

export declare const getPointFromMatrix: (event: any, matrix: any) => PointObjectNotation

I guess this could be circumvented by either defining the type yourself:

type PointObjectNotation = { x: number; y: number };

Or importing it from transformation-matrix directly.

I can not guarantee that this is not a problem on my end, but I can understand that typescript does not like the missing type information ...

Requirement

Add the ability for line charts to have threshold markers like depicted in the screenshot below.

Is it possible to put the legend on the right side of the chart?

render charts inside a clipPath to prevent elements from overflowing the bounding box

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

I m using the simple sankey example from the docs using a white background.

Expected behavior

see the chart

Minimal reproduction of the problem with instructions

PROBLEM REPRODUCED
https://codesandbox.io/s/snowy-meadow-wk1vd

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: 16.8.0
- reaviz version: 10.2.1


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [X] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10  
- Platform: Mac  

Others:

Hi all,

could someone help with such questions?

1 is it possible to increase the distance between bubbles on the Venn chart diagram by code?
2 could we add somehow custom text below bubbles?

thank you!

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Using the current code and sample data from the CalendarHeatmap code at Reaviz Charts page gives the Error Uncaught TypeError: date.getFullYear is not a function. When instead passing the keys as Date objects, it renders. The docs and sample data should be updated to reflect this.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

The Map component only supports a Mercator projection.

Expected behavior

It would be great if the Map component could optionally render as a Robinson projection-style chart.

For the version of d3-geo used in Reviz, the geoNaturalEarth projection is pretty close.

Minimal reproduction of the problem with instructions

Here's a test of this change in Storybook:

And the original Mercator projection for contrast:

I was able to smoke-test this by importing a the geoNaturalEarth1 projection function from d3-geo:

It would be a trivial addition to add an optional projection prop to MapProps to support this feature:

interface MapProps extends ChartProps {
  markers?: MarkerElement[];
  data: any;
  fill?: string;
  projection?: "mercator" | "natural-earth"
}

What is the motivation / use case for changing the behavior?

The Mercator projection inflates the size of objects further away from the equator - notably this results in Greenland being inflated significantly. It would be exciting for the Map component to have more versatility and I think supporting a more varied selection of projections would be an awesome place to start!

I'd be happy to raise a PR with this addition - let me know your thoughts, and thanks for all the terrific work on Reaviz!

https://github.com/omgovich/colord

Requirement

Add the ability to put a 'marker' in charts.

Let's add the following charts ( Linear only ) :

• Line
• Area
• Bar ( Horz/Vertial )
• Scatter

NOTE: There is already a MarkLine ( https://github.com/reaviz/reaviz/tree/master/src/common/MarkLine ) which is different front this. Its more of a marker that follows the cursor so perhaps in this change we should rename that or consolidate these? Also MarkLine isn't great name since it includes Line which it could potentially be something else. Maybe CursorMarker?

Example API

<AreaChart
  series={
    <AreaSeries
      markers={[
        <Marker
          value={50}
          color="blue"
          label={
            <MarkerLabel
              color="white"
              position="center"
              text="Goal 900k"
            />
        }
      />
    ]}
  />}
/>

I realize the label API is a bit overkill but its needed to add more complex options. It also needs to account for the direction/scale.

Example UI

Requirement

Add the ability to highlight and optionally color area segments like so:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Scales from common/scales are not exported. The export is missing in /src/common/index.ts. This makes it harder to follow some of the docs (Bar chart axis examples) since getXScale and getYScale are not available to import.

Expected behavior

Scales are exported as part of the library

Minimal reproduction of the problem with instructions

import { getXScale } from "reaviz"

Error log:

export 'getXScale' (imported as 'getXScale') was not found in 'reaviz'

What is the motivation / use case for changing the behavior?

Easier to follow the documentation

Environment

Libs:
- react version: 18.2.0
- reaviz version: 13.1.13


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16.16.0  
- Platform:  Windows 

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

You can currently create secondary axes according to this story, but there are some issues with this approach:

• getXScale and getYScale are not exported, so the only way to create scale is to use d3 directly
• The secondaryAxes can be used only as labels for the whole data domain and there is no easy way to specify which part of data should be mapped to y1 axis and which to y2 axis

Expected behavior

I would like to be able to plot chart with y1 and y2 axes, where part of the data relates to y1 and all the other to y2.

Current investigations

I've managed to compose the following story:

It already can:

• consume the data in nested format
• allow to specify which keys should be mapped to y2 axis
• share the same colorScheme for all the data
• show tooltips with proper values and colors

There are multiple issues with my current approach:

• lacking markers for y1 series (because of current implementation details)
• multiple calls for getYScale
• incomplete support for props propagation related to y2
• possibly unusable zoom and brush with current setup

This issues can not be solved by composing existing components, so existing components should be refactored to allow such use case.

If this feature can be accepted in this lib, I can submit PR with my current MVP story and propose an API for that.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

If a bar chart is further down in a longer page, the hover element showing the data values on the chart is rendered much below the chart, sometimes even extending below the length of the page, below the footer.

Expected behavior

It should always show these elements on the chart. Pie charts for example work fine.

Minimal reproduction of the problem with instructions

Create a page with a bar chart further down in it.
UPDATE: codesandbox

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: 16.13.1
- reaviz version: 8.1.3

Browser:
- [x] Chrome (desktop) version 83
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 77
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 83
 
For Tooling issues:
- Node version: 13.8.0  
- Platform: Windows

Hi, congrats for this beautiful library.

Is there a way (or a plan) to register handlers that would be triggered when the user takes an action on the vizulations, e.g. select a bar of a barplot...?

I need a way to bind different plots, hence the need to update the UI based on user selection.

This is a regression - the UI should show the color next to the entry. Likely the color isn't getting passed correctly or something.

How can I display charts with float numbers? When I use it displays as Integer. But I need float numbers. Here is my code:

 <RadialGauge
                data={datam}
                startAngle={0}
                endAngle={Math.PI * 2}
                height={250}
                width={550}
                minValue={0}
                maxValue={max}
                fill={"white"}
                series={
                    <RadialGaugeSeries
                        arcWidth={10}
                        colorScheme={[
                            '#00ECB1',
                            '#DF8D03',
                        ]}/>
                }
            />

And this is my output:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Feature Stacked Radial Gauge

The Stacked Radial Gauge renders a series of ChartShallowDataShape within RadialGauge

There are some properties to control the StackedRadialGaugeSeries

fillFactor

fillFactor = 0.3	fillFactor = 1

arcPadding

arcPadding = 0	arcPadding = 0.5

What is the motivation / use case for changing the behavior?

We need this for our own application

Issues

The Tooltip of the Arcs might not be great, maybe I it should be removed in favor of showing the value below the label (There needs to be space for it, might not be possible everywhere)

Current Tooltip (form RadialGaugeArc)

I'm reopening this issue, since it is was closed without a fix.

I'm submitting a...

[x] Bug report  

Current behavior

If a bar chart is further down in a longer page, the hover element showing the data values on the chart is rendered much below the chart, sometimes even extending below the length of the page, below the footer.

Expected behavior

It should always show these elements on the chart. Pie charts for example work fine.

Minimal reproduction of the problem with instructions

Create a page with a bar chart further down in it.
codesandbox

Environment

Libs:
- react version: any version past 16.13.1
- reaviz version: any version past 7.0.0

Browser:
- [x] Chrome (desktop) version 83
- [x] Firefox version 77
- [x] Edge version 83
 
For Tooling issues:
- Node version: 13.8.0  
- Platform: Windows

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

In the current grouped BarChart, each of the bars in a group are adjacent to each other (which is what you want in almost all cases), but I'm trying to create a bar chart where the bars within a group overlap each other.

In my use case I have a primary dataset representing this year's data, which is the focus, but I also want last year's data as an underlay/overlap to be able to show the previous distribution as well.

Expected behavior

I want to reproduce something like this:

It would be nice to be able to configure the degree of overlap, but it's not 100% necessary for my use case (I can live with either partial or full).

If there's a way to do that with the current BarChart, then please let me know!

Hi
can you tell me please if i can to customize value label in the venn diagram (to add some layout icon etc)

thank you for your great library!

Browser:

• [ x ] Chrome (desktop) Version 88.0.4324.96 (Official Build) (x86_64)

i checked on firefox and safari is working ^^

maybe help