工作筆記: 你今天甘蔗了嗎?

你今天 甘蔗了嗎?

Google Gantt Chart

• See the below table for a list of how Gantt handles the presence of start, end, and duration in different circumstances.

Start	End	Duration	Result
Present	Present	Present	Check that duration is consistent with start/end times. Throws error if inconsistent.
Present	Present	Null	Computes duration from start and end times.
Present	Null	Present	Computes end time.
Present	Null	Null	Throws error as unable to compute duration or end time.
Null	Present	Present	Computes start time.
Null	Null	Present	Computes start time based on dependencies. In conjunction with defaultStartDate, enables chart to be drawn using only durations.
Null	Present	Null	Throws error as unable to calculate start time or duration.
Null	Null	Null	Throws error as unable to calculate start time, end time, or duration.

React Google charts

• data array index 0 吃的是 columns 參數
• https://react-google-charts.com/gantt-chart
• https://www.youtube.com/watch?v=oX7Wqavzoc0
• https://www.npmjs.com/package/react-google-charts#gantt-chart

  
import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}
const columns = [
  { type: "string", label: "Task ID" },
  { type: "string", label: "Task Name" },
  { type: "date", label: "Start Date" },
  { type: "date", label: "End Date" },
  { type: "number", label: "Duration" },
  { type: "number", label: "Percent Complete" },
  { type: "string", label: "Dependencies" }
];

const rows = [
  [
    "Research",
    "Find sources",
    new Date(2015, 0, 1),
    new Date(2015, 0, 5),
    null,
    100,
    null
  ],
  [
    "Write",
    "Write paper",
    null,
    new Date(2015, 0, 9),
    daysToMilliseconds(3),
    25,
    "Research,Outline"
  ],
  [
    "Cite",
    "Create bibliography",
    null,
    new Date(2015, 0, 7),
    daysToMilliseconds(1),
    20,
    "Research"
  ],
  [
    "Complete",
    "Hand in paper",
    null,
    new Date(2015, 0, 10),
    daysToMilliseconds(1),
    0,
    "Cite,Write"
  ],
  [
    "Outline",
    "Outline paper",
    null,
    new Date(2015, 0, 6),
    daysToMilliseconds(1),
    100,
    "Research"
  ]
];
class App extends React.Component {
  state = {
    chartImageURI: ""
  };
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Gantt"
          data={[columns, ...rows]}
          width="100%"
          height="50%"
          legendToggle
        />
        <div>
          I'm a picture of the chart
          <img src={this.state.chartImageURI} />
        </div>
      </div>
    );
  }
}

recharts

• https://github.com/recharts/recharts

Echarts

• https://echarts.apache.org/en/index.html

  • Echarts for react

     npm install --save echarts-for-react
          
     # `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
     npm install --save echarts
    

JSCharting

• https://jscharting.com/editor/#name=GanttMarkers.htm

• https://jscharting.com/editor/#name=GanttMilestones.htm

  • react jscharting
    • https://github.com/jscharting/jscharting-react

DHTMLX Gantt

• https://dhtmlx.com/docs/products/dhtmlxGantt/

react-gantt-timeline

• https://github.com/guiqui/react-timeline-gantt