Reactjsダッシュボード - パート2 - reduxを使った拡張、ネスト

Question

私はreactjsを使ってダッシュボードベースのアプリケーションを構築しています。ここでは、このチュートリアルを出発点として、現在のコードベースを示します。

https://github.com/facebookincubator/create-react-app

あなたは、次のステップであるものを言うのでしょうか？これらのチャートのデータをチャネリング、ネストされたチャート

の

• 取り扱いのグループ - これは コンポーネントベースの再来から来るのではないでしょうか？特定のチャートに
• 更新データを扱うReduxのデータ、マスタ/スレーブチャート関係、チャート間の通信/ウィジェット
異なるチャートのネストされたクラスタを構成することができる方法の様々な..正規化されたアレイ上の

//構成例状態。

const configState = { 
    dashboard: { 
     'averageaskingprice': { 
      id: '123', 
      title: 'My first dashboard set', 
      charts: [] // an array of charts ids 
     }, 
     'averagesoldprice': { 
      id: '456', 
      title: 'My second dashboard set', 
      charts: [] // an array of charts ids 
     } 
    }, 
    charts: { 
     'abc': { 
      id: 'abc', 
      text: 'pie chart representing average asking price' 
     }, 
     'def': { 
      id: 'def', 
      text: 'pie chart representing average sold price' 
     }, 
     'ghi': { 
      id: 'ghi', 
      text: 'bar chart representing average asking price over 12 months on a given property type' 
     } 
    } 
} 

さて私は、ファイルをカットアップを開始しようとしました。..拠点として

を作成反応するアプリを使用。 PieChart/BarChartの各部分をそれぞれのファイルに入れてみると、エラーが発生します。クラスとして変更する必要がありますか？

/src/App.css

.App { 
    text-align: center; 
} 

.App-logo { 
    animation: App-logo-spin infinite 20s linear; 
    height: 80px; 
} 

.App-header { 
    background-color: #222; 
    height: 150px; 
    padding: 20px; 
    color: white; 
} 

.App-intro { 
    font-size: large; 
} 

@keyframes App-logo-spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
} 

/src/App.js

import React, { Component } from 'react'; 
import './App.css'; 

import BarChart from './modules/BarChart'; 
import PieChart from './modules/PieChart'; 
import LineChart from './modules/LineChart'; 

// Allowed types 
const typeMapping = { 
    PieChart, // In ES6, it is the same as "PieChart": PieChart, 
    BarChart, 
    LineChart 
}; 

class App extends Component { 

    getChart(config) { 
    const { type, ...props } = config; 
    return React.createElement(typeMapping[type], props); 
    } 

    render() { 
     var config = this.props.config; 

     return (
      <div> 
       {config.map((chartConfig, index) => { 
        return (
         <div key={index} className={'holder' + index + ' floatleft'}> 
          {this.getChart(chartConfig)} 
         </div> 
       ) 
       })} 
      </div> 
    ); 
    } 
} 

export default App; 

/src/Index.css

body { 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
} 

.floatleft{ 
    float: left; 
} 

/src/Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import './index.css'; 

var config = [{ 
    "type": "PieChart", 
    "width": 150, 
    "height": 150, 
    "serviceApi": "api.php?mode=GetCars", 
    "radius": 70, 
    "innerradius": 10 
}, { 
    "type": "BarChart", 
    "width": 150, 
    "height": 150, 
    "serviceApi": "api.php?mode=GetBoats" 
}, { 
    "type": "LineChart", 
    "width": 150, 
    "height": 150, 
    "serviceApi": "api.php?mode=GetBoats" 
}, { 
    "type": "PieChart", 
    "width": 150, 
    "height": 150, 
    "serviceApi": "api.php?mode=GetCars", 
    "radius": 70, 
    "innerradius": 10 
}, { 
    "type": "PieChart", 
    "width": 150, 
    "height": 150, 
    "serviceApi": "api.php?mode=GetCars", 
    "radius": 70, 
    "innerradius": 10 
}]; 

ReactDOM.render(
    <App config={config} />, 
    document.getElementById('root') 
); 

/src/modules/BarChart.css

.barchart{ 
    background: green; 
    border: 1px solid black; 
} 

.barchart .bar { 
    fill: steelblue; 
} 

.barchart .bar:hover { 
    fill: brown; 
} 

.barchart .axis { 
    font: 10px sans-serif; 
} 

.barchart .axis path, 
.barchart .axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.barchart .x.axis path { 
    display: none; 
} 

/src/modules/BarChart.js

//barchart 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
var $ = require("jquery"); 
var d3 = require("d3"); 
import './BarChart.css'; 

class BarChart extends Component { 
    componentDidMount() { 
     var $this = $(ReactDOM.findDOMNode(this)); 
     console.log("rendered div now engage d3", $this); 
     // set el height and width etc. 

      var w = $this.data("width"); 
      var h = $this.data("height"); 


      var data = [ 
       { 
        "letter" : "A", 
        "frequency" : .08167 
       }, 
       { 
        "letter" : "B", 
        "frequency" : .01492 
       }, 
       { 
        "letter" : "C", 
        "frequency" : .02782 
       }, 
       { 
        "letter" : "D", 
        "frequency" : .04253 
       } 
      ]; 

      var color = d3.scale.category20(); 

      var margin = {top: 20, right: 20, bottom: 30, left: 40}, 
       width = w - margin.left - margin.right, 
       height = h - margin.top - margin.bottom; 

      var x = d3.scale.ordinal() 
       .rangeRoundBands([0, width], .1); 

      var y = d3.scale.linear() 
       .range([height, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("left") 
       .ticks(10, "%"); 

      var svg = d3.select($this[0]).append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

       x.domain(data.map(function(d) { return d.letter; })); 
       y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

       svg.append("g") 
        .attr("class", "x axis") 
        .attr("transform", "translate(0," + height + ")") 
        .call(xAxis); 

       svg.append("g") 
        .attr("class", "y axis") 
        .call(yAxis) 
       .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end") 
        .text("Frequency"); 

       svg.selectAll(".bar") 
        .data(data) 
       .enter().append("rect") 
        .attr("class", "bar")   
        .attr("fill", function(d, i) { return color(i); }) 
        .attr("x", function(d) { return x(d.letter); }) 
        .attr("width", x.rangeBand()) 
        .attr("y", function(d) { return y(d.frequency); }) 
        .attr("height", function(d) { return height - y(d.frequency); }); 


      function type(d) { 
       d.frequency = +d.frequency; 
       return d; 
      } 

    } 

    render() { 
     return (
      <div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height} 
       data-service={this.props.serviceApi}>bar. 
      </div> 
     ); 
    } 
}; 

export default BarChart; 

/src/modules/LineChart.css

.linechart{ 
    background: purple; 
    border: 1px solid black; 
} 


.linechart .axis path, 
.linechart .axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.linechart .x.axis path { 
    display: none; 
} 

.linechart .line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

/SRC/modules/LineChart.js

//linechart 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
var $ = require("jquery"); 
var d3 = require("d3"); 
import './LineChart.css'; 

class LineChart extends Component { 
    componentDidMount() { 
     var $this = $(ReactDOM.findDOMNode(this)); 
     console.log("rendered div now engage d3", $this); 
     // set el height and width etc. 

      var w = $this.data("width"); 
      var h = $this.data("height"); 

      var data = [ 
       { 
        "date" : new Date("24-Apr-07"), 
        "close" : 93.24 
       }, 
       { 
        "date" : new Date("25-Apr-07"), 
        "close" : 95.35 
       }, 
       { 
        "date" : new Date("26-Apr-07"), 
        "close" : 100.39 
       }, 
       { 
        "date" : new Date("27-Apr-07"), 
        "close" : 108.74 
       } 
      ]; 

      var color = d3.scale.category20(); 

      var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
       width = w - margin.left - margin.right, 
       height = h - margin.top - margin.bottom; 

      var formatDate = d3.time.format("%d-%b-%y"); 

      var x = d3.time.scale() 
       .range([0, width]); 

      var y = d3.scale.linear() 
       .range([height, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("left"); 

      var line = d3.svg.line() 
       .x(function(d) { return x(d.date); }) 
       .y(function(d) { return y(d.close); }); 

      var svg = d3.select($this[0]).append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

       x.domain(d3.extent(data, function(d) { return d.date; })); 
       y.domain(d3.extent(data, function(d) { return d.close; })); 

       svg.append("g") 
        .attr("class", "x axis") 
        .attr("transform", "translate(0," + height + ")") 
        .call(xAxis); 

       svg.append("g") 
        .attr("class", "y axis") 
        .call(yAxis) 
       .append("text") 
        .attr("transform", "rotate(-90)") 
        .attr("y", 6) 
        .attr("dy", ".71em") 
        .style("text-anchor", "end") 
        .text("Price ($)"); 

       svg.append("path") 
        .datum(data) 
        .attr("class", "line") 
        .attr("d", line); 

      function type(d) { 
       //d.date = formatDate.parse(d.date); 
       d.close = +d.close; 
       return d; 
      } 

    } 

    render() { 
     return (
      <div className="linechart" data-role="linechart" data-width={this.props.width} data-height={this.props.height} 
       data-service={this.props.serviceApi}>line. 
      </div> 
     ); 
    } 
}; 

export default LineChart; 

/src/modul ES/PieChart.css

.piechart{ 
    background: pink; 
    border: 1px solid black; 
} 

/src/modules/PieChart.js

//piechart 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
var $ = require("jquery"); 
var d3 = require("d3"); 
import './PieChart.css'; 

class PieChart extends Component { 
    componentDidMount() { 
     var $this = $(ReactDOM.findDOMNode(this)); 
     console.log("rendered div now engage d3", $this); 
     // set el height and width etc. 


      var w = $this.data("width"); 
      var h = $this.data("height"); 
      var ir = $this.data("innerradius"); 
      var r = $this.data("radius"); 

      var dataset = { 
       apples: [53245, 28479, 19697, 24037, 40245], 
      }; 

      var width = w, 
       height = h, 
       radius = Math.min(width, height)/2; 

      var color = d3.scale.category20(); 

      var pie = d3.layout.pie() 
       .sort(null); 

      var arc = d3.svg.arc() 
       .innerRadius(radius - r) 
       .outerRadius(radius - ir); 

      var svg = d3.select($this[0]).append("svg") 
       .attr("width", width) 
       .attr("height", height) 
       .append("g") 
       .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

      var path = svg.selectAll("path") 
       .data(pie(dataset.apples)) 
       .enter().append("path") 
       .attr("fill", function(d, i) { return color(i); }) 
       .attr("d", arc); 

    } 

    render() { 
     return (
      <div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height} data-radius={this.props.radius} data-innerradius={this.props.innerradius} 
       data-service={this.props.serviceApi}>pie. 
      </div> 
     ); 
    } 
}; 

export default PieChart; 

Answer 1

私は、静的コンポーネントをマッピングし、ローカルにデータを整理することから始めます。その後、フラックスを組み込むようにしてください。