This repository was archived by the owner on Apr 9, 2024. It is now read-only.
This repository was archived by the owner on Apr 9, 2024. It is now read-only.
Composite chart #21
Description
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...