Question

我正在研究使用reactjs构建基于仪表板的应用程序。这是当前的代码库 - 以本教程为出发点。

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

你会说接下来的步骤是什么？

处理嵌套图表组
引导这些图表的数据 - 这不是来自基于redux的零件？ 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'
        }
    }
}

好吧，所以使用create-react-app作为基础..

我试图开始切割文件。当我尝试将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/modules/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

我首先要绘制静态组件并在本地组织数据。然后考虑加入助焊剂。

Reactjs仪表板 - 第2部分 - 使用redux进行增强，嵌套

1 个答案: