Composite chart

[Shavindra]

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...

[plourenco]

Hi, unfortunately composite charts are a special case I haven't yet covered. However, I think this can be achieved in a similar way to what I did with range charts, so I'm going to try to release something that covers that soon.

[Bluefissure]

Hi, unfortunately composite charts are a special case I haven't yet covered. However, I think this can be achieved in a similar way to what I did with range charts, so I'm going to try to release something that covers that soon.

Hi plourenco! Any update on this? Is there anything I can help?

[plourenco]

Hi, unfortunately composite charts are a special case I haven't yet covered. However, I think this can be achieved in a similar way to what I did with range charts, so I'm going to try to release something that covers that soon.

Hi plourenco! Any update on this? Is there anything I can help?

Hi @Bluefissure, thanks, unfortunately, I haven't had much time lately to dedicate here. However, my idea would be to create a new CompositeChart component and pass the charts as children:

<CompositeChart>
    <LineChart ... />
    <LineChart ... />
</CompositeChart>

How does that look? This new chart would then have a specific context and every children chart would register to it. I'm gonna give it a go pretty soon and come back when I've got something.

[Bluefissure]

Hi, unfortunately composite charts are a special case I haven't yet covered. However, I think this can be achieved in a similar way to what I did with range charts, so I'm going to try to release something that covers that soon.

Hi plourenco! Any update on this? Is there anything I can help?

Hi @Bluefissure, thanks, unfortunately, I haven't had much time lately to dedicate here. However, my idea would be to create a new CompositeChart component and pass the charts as children:

<CompositeChart>
    <LineChart ... />
    <LineChart ... />
</CompositeChart>

How does that look? This new chart would then have a specific context and every children chart would register to it. I'm gonna give it a go pretty soon and come back when I've got something.

This looks great! Thank you for your reply and time!