How you can reuse a chart component?

[GilbertMizrahi]

First, thanks for putting this together (and the article).

My question is, let's say I have a number of dimensions that I want to display with a rowChart.
Thus, instead of creating a component for each one, I would like to create instances of a generic one.

How do I pass the data for each specific dimension?

I am thinking something like a props on the component on the dashboard.js
<DayOfWeekChart data="d.dd/>

I want to be able able to make a general purpose tool, so there could be another data source with the metadata for the "real" data source.

how you will pass the data to each instance of such component?

[talolard]

Hi,
If I understand you correctly, you'd like to define the visuals of a chart once and then use different data on it.
You'd need to do it a little differently from what we showed here. In our example the creation of the chart and the dimension happen together, and you'd need to seperate that to do what you want.

One way would be something like changing this

const dayOfWeekFunc = (divRef, ndx) => {
    const dayOfWeekChart = dc.rowChart(divRef)
    const dimension = ndx.dimension(function (d) {
        var day = d.dd.getDay();
        var name = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        return day + '.' + name[day];
    });
    const group = dimension.group()
    dayOfWeekChart
    .dimension(dimension)
    .group(group)

    return dayOfWeekChart
}

export const DayOfWeekChart = props => (
    <ChartTemplate chartFunction={dayOfWeekFunc} title="Weekday"/>
)

to

const dayOfWeekFunc = (divRef, ndx,chartVizFunc) => {
    const myChart = chartVizFunc(ndx)
    const dimension = ndx.dimension(function (d) {
        var day = d.dd.getDay();
        var name = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        return day + '.' + name[day];
    });
    const group = dimension.group()
    myChart
    .dimension(dimension)
    .group(group)

    return myChart
}

export const DayOfWeekChart = props => (
    <ChartTemplate chartFunction={dayOfWeekFunc} chartVizFunc={myChartFunc} title="Weekday"/>
)

And then change the template context to pass the chartVizFunc

Does that help ?

[GilbertMizrahi]

Thanks. This helps. I will experiment with that.

The idea is that I could create a multidimensional tool that is agnostic to the dataset. Besides loading the CSV dataset, the tool will require another CSV file with metadata associated with the visualization.

About 7 years ago I worked on a quick prototype to do just that. http://mylinerider.com/D3/Multidimensional2.html

I didn't continue working on it, since then (just throwing something quick as an experiment).
The CSV looks like ttp://mylinerider.com/D3/producttest.csv
and the metadata is:

In this example, when some categorical variable has a value of TRUE for dimension, it renders the equivalent of a rawChart. This can be modified to render any type of chart.

If the type of a variable is a date, it renders a histogram.

So, I want to replicate/expand on this model. Hence I need to pass also the variable name as a prop (I guess).

I think with the help you have provided I can get started.

[GilbertMizrahi]

Hi @talolard,

I was able to advance on my visualization. However, I have one more question:

Using your approach, how you would add one or more numberDisplay items?
Like

Thanks again.