SelectMenu using React JS

[satra2806]

@gordonwoodhull , is it possible to create SelectMenu using React JS , when i try to integrate BootStrap in React is very hard

[gordonwoodhull]

I’m not sure I understand your question.

dc.js only uses bootstrap for the examples - it’s not a dependency.

React is a different paradigm from D3, which dc.js is built on, so it’s not really feasible to use React inside of or as an implementation of dc.js. Generally when people use dc.js in React applications, they wrap the charts in components, like dc.react.js does.

If that library does not support SelectMenu it would be trivial to add.

[satra2806]

can we us a Bootstrap in react to get the result , please see the code below , when i run this in react it's not applying the changes

// import '/bootstrap-select/dist/js/bootstrap-select.min.js';
// import '/bootstrap-select/dist/css/bootstrap-select.min.css';
// import 'bootstrap/dist/css/bootstrap.min.css';
import React from "react";
import * as d3 from 'd3'
import * as crossfilter from "crossfilter2/crossfilter";
import * as dc from 'dc'

// import { ChartTemplate } from "./chartTemplate";

// import 'b
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-select/dist/js/bootstrap-select.min.js';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';
;

// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

export const Select = (data) => {
    // console.log(data)
    React.useEffect(() => {
        var select1 = dc.selectMenu('#select1')
        var data1 = data.data;
        var key = data1.key1;
        // var key1 = data1.key2;
        // var data2 = data.data.data

        var ndx = crossfilter(data1.data),
            letterDimension = ndx.dimension(function (d) {
                console.log(d[key])
                return d[key];
            })
        // colorDimension = ndx.dimension(function(d) { return d.color; }),
        // stateDimension = ndx.dimension(function(d) { return d.state; }),
        // letterDimension2 = ndx.dimension(function(d) { return d.letter; });

        select1
            .dimension(letterDimension)
            .group(letterDimension.group())
            .multiple(true)
            .controlsUseVisibility(true)
            .title(kv => kv.key);

        select1.render();

        // $(document).ready(function () {
        //     $('#select1 .dc-select-menu').selectpicker({
        //         style: 'btn-info',
        //         size: 10
        //     });

        // })
        // dc.renderAll();

    }, [])
         return (<div id="select1" >
    </div>);
}

[gordonwoodhull]

I still have no idea why you are talking about Bootstrap. dc.js does not use Bootstrap.

Please use dc.react.js if you want to integrate dc.js in React. This is not the way to integrate dc.js in React.

[gordonwoodhull]

I'm going to close this, because it wouldn't make sense for dc.js to depend on React. (It would become a completely different library, since dc.js currently uses D3 to build/update the DOM.)

On the other hand, integrating dc.js charts as components works well, and dc.react.js demonstrates a nice way to do this. If that library doesn't have support for SelectMenu, it should. It would not be complicated.

[satra2806]

@gordonwoodhull , dc js is working well in react js , the issue with select menu is I can't able to beautify it using bootstrap seems like react not supporting bootstrap, if there is any alternative method for beautify the select menu that would be great

[gordonwoodhull]

Oh I finally understand your question.

Yes in order to beautify the select menu, Bootstrap completely rebuilds it with different elements, and this is not likely to play well with React.

Sorry, I don’t know a good alternative (although I’m sure one exists).