@david.kucsai/dc-react

@david.kucsai/dc-react

This project is still a WIP.

The goal of this library is to provide a React-styled wrapper around the great DC.js library.

To get started run:

npm install @david.kucsai/dc-react

You will need:

    "crossfilter2": "^1.4.7",
    "dc": "^3.1.0"

Documentation

Notes

• Refer to DC.js documentation for the associated properties on most of the charts.
  • Generally properties will have the same name as the original documentation.
  • There are a few extra properties which have been added that hook into underlying DC.js properties. These are the following (which can be found in src/props/BaseProps.ts)

    • Event Listeners. Corresponds with the on function calls:

          onRenderlet?: (chart: AllDcCharts, filter: any) => void;
          onPretransition?: (chart: AllDcCharts, filter: any) => void;
          onPreRender?: (chart: AllDcCharts) => void;
          onPostRender?: (chart: AllDcCharts) => void;
          onPreRedraw?: (chart: AllDcCharts) => void;
          onFiltered?: (chart: AllDcCharts, filter: any) => void;
          onZoomed?: (chart: AllDcCharts, filter: any) => void;
      

    • onChartMounted: (chart: AllDcCharts) => void

      • Called when the chart is mounted. The chart parameter is underlying DC chart implementation. This can be used to call methods directly on the chart.

    • setChartRef: (ref: any, chartGroup?: string) => AllDcCharts

      • Called to create the underlying DC chart. ref corresponds to the parent.

Status

A marked checkbox indicates that all the setter props have been specified in the component props. Which indicates that all the settable properties have been added to the property definitions.

• DataCount
• DataGrid
• DataTable
• NumberDisplay
• SelectMenu
• CboxMenu
• TextFilterWidget
• BubbleOverlay
• HeatMap
• GeoChoroplethChart
• RowChart
• PieChart
• SunburstChart
• BubbleChart
• BoxPlot
• CompositeChart - partially complete
• ScatterPlot
• SeriesChart
• BarChart
• LineChart - partially complete

Running Locally

To run the storybook:

yarn start

Compile to typescript:

yarn recompile

Build (Clean & Compile):

yarn build

Run tests:

yarn test