dc-js / react-dc-js Goto Github PK
View Code? Open in Web Editor NEWMulti-dimensional charting based on dc.js for React
License: Apache License 2.0
Multi-dimensional charting based on dc.js for React
License: Apache License 2.0
How we use legend in PieChart?
Please share example code for the same
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?
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)
})
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):
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.
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.
How can we use a filter ={[[option1, option2]]} for Bar chart?
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?
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...
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...
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 declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.