dc-js / react-dc-js Goto Github PK

The props of a chart are set as dependencies of the useChart hook and shallow checked, causing them to be considered different in every side-effect. The following test represents the problem:

it('should not cause a re-render if props did not change', () => {
    const chartFunc = chartMock()
    chartFunc.foo = jest.fn()
    const Chart = BaseChart(() => chartFunc, [baseMixin])
    const { rerender } = render(<Chart foo="bar" />)
    expect(chartFunc.foo).toHaveBeenCalledTimes(1)
    rerender(<Chart foo="bar" />)
    expect(chartFunc.foo).toHaveBeenCalledTimes(1)
})

On a RowChart or BarChart, the rows / bars were all rendering to the same width/height.

I was using react-bootstrap which is using bootstrap 5.1.1.

I changed the bootstrap to version 4.6.0 and the rows/bars rendered correctly.

I don't know if this is a bug or not, but, I'll thought I'd post this here if anyone comes looking for the same problem.

A line chart, for example, cannot be composed together with a range selection chart.
The ideal scenario would be to be able to do something like:

<LineChart>
    <BarChart/> // range chart
</LineChart>

The children would then be connected with the parent through refs.

An alternative would be using a custom context, and dispatch the chart instance from the chart to be used as range.

Hi,

I'm seeing an issue with stacked charts, running the playground does not produce a stacked line chart

Steps to reproduce (Node.js v14.13.1):

• Clone repo (master branch)
• cd react-dc-js
• npm install
• npm run-script build
• cd playground
• npm install
• npm start

The loaded page seems to show all plots successfully, with the exception of the LineChart which does not show the stacked data, just the base data.

Output from npm test in main directory

> [email protected] test /workspaces/react-dc-js
> jest --silent

 PASS  test/mixins/base-mixin.test.js
 PASS  test/charts/use-chart.test.js
 PASS  test/charts/bar-chart.test.js
 PASS  test/mixins/stack-mixin.test.js
 PASS  test/charts/chart-context.test.js
 PASS  test/charts/box-plot.test.js

Test Suites: 6 passed, 6 total
Tests:       9 passed, 9 total
Snapshots:   2 passed, 2 total
Time:        3.316 s, estimated 4 s

I am running in a VSCode docker devcontainer environment, but I don't think that is the problem. If you need any more details, please let me know.

How we use legend in PieChart?

Please share example code for the same

I see it's possible to do a composite chart... but I am not entirely sure of the implementation

export const CountryCharts: React.FC<any> = (props: any) => {
  const [cx, setCx] = useState(null)


  const { historicalData, historicalFeatureSet } = props

  useEffect(() => {
      const cx = crossfilter(props.historicalData)
      setCx(cx)
  }, [historicalData])

  if (!cx || !historicalFeatureSet || !historicalData ) {
    console.log(historicalData, historicalFeatureSet)
    return <p>Loading Data...</p>
  }

   const yearDimension = cx.dimension((d) => d.properties.year);


   const chartInfo = historicalFeatureSet.map((item) => {
     const keyDimension = yearDimension

     return {
       ...item,
       keyDimension,
       group: keyDimension.group().reduceSum((d) => {
         return d[`${item.key}_abs_normalised_md`]
       }),
     }
  })

  return (
    <ChartContext>
      {JSON.stringify(historicalData)}
{       
        <div className="chart-map" key={uuid()}>
            <CompositeChart
              id="time-chart"
              width={400}
              height={200}
              gap={1}
              elasticX={true}
              x={d3
                .scaleTime()
                .domain([new Date(1985, 0, 1), new Date(2012, 11, 31)])}
              compose={chartInfo.map((item)=>{
                return (
                  <LineChart     width={400}
                  height={200} dimension={item.keyDimension} group={item.group} />
                )
              })}
            />
          </div> }
       
    </ChartContext>
  )
}

This is what I have...

How can we use a filter ={[[option1, option2]]} for Bar chart?

I get an error which says:

I have gotten as far as identifying a similar issue mentioned here for dc-js:
https://groups.google.com/g/dc-js-user-group/c/azOg_Tq_ufg

I am unable to use this in react-dc-js

Can someone help me with this?

What is the correct way to reset the selection and subsequent filters? How can i access the "dc" object to call filterAll and or redrawAll?

I realize this is quite a long shot, but I'm wondering if we can use the typings from @types/dc to create typings for the functions in this library. I'm willing to help out, but I'm relatively new to creating type files and I'm having trouble with some of the code (I already started trying this on my end).

For example:

export function baseMixin(chart, props) {...

seems like it should become approximately

export function baseMixin(chart: DCGraphicType, props: BaseMixin<any>) {...

where

export type DCGraphicType =
  | dc.PieChart
  | dc.SunburstChart
  | dc.BarChart
  | dc.LineChart
  | dc.DataCountWidget
  | dc.DataTableWidget
  | dc.DataGridWidget
  | dc.BubbleChart
  | dc.CompositeChart
  | dc.SeriesChart
  | dc.GeoChoroplethChart
  | dc.BubbleOverlayChart
  | dc.RowChart
  | dc.ScatterPlot
  | dc.NumberDisplayWidget
  | dc.HeatMap
  | dc.BoxPlot
  | dc.SelectMenu
  | dc.TextFilterWidget
  | dc.CBoxMenu;

however, it seems like showControls, id are not on the BaseMixin, amongst other hurdles. I'd be open to hearing how best to approach this issue, as I tried debugging the playground but it doesn't seem there are source maps...