waiting...
- }
-
- }
-}
-
-export default Histogram
diff --git a/source/component/HomeButton.js b/source/component/HomeButton.js
new file mode 100644
index 0000000..39e1637
--- /dev/null
+++ b/source/component/HomeButton.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import BaseVisualization from './BaseVisualization.js'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+import Button from 'react-bootstrap/Button'
+class HomeButton extends BaseVisualization {
+ constructor(props, ctx) {
+ super(props, ctx);
+ }
+ goHome(){
+ const query = new URLSearchParams(window.location.search);
+ const homeUrl = query.get("homeurl") || "../"
+ console.log(homeUrl)
+ window.location.href = homeUrl;
+ }
+ render() {
+ return
+
-
{this.props.title}
+
{this.props.title}
+
+
);
}
diff --git a/source/component/Layout/VisGridView/VisGridView.css b/source/component/Layout/VisGridView/VisGridView.css
index 30e9a2d..6e3110d 100644
--- a/source/component/Layout/VisGridView/VisGridView.css
+++ b/source/component/Layout/VisGridView/VisGridView.css
@@ -3,9 +3,8 @@
flex-direction: row;
flex-wrap: wrap;
width: 100%;
- box-sizing: border-box;
+
}
-.react-grid-item {
- box-sizing: border-box;
- border: 1px solid #0984e3;
-}
\ No newline at end of file
+/* .react-grid-item {
+
+} */
\ No newline at end of file
diff --git a/source/component/Layout/VisGridView/VisGridView.js b/source/component/Layout/VisGridView/VisGridView.js
index ae0b91f..3b17fb2 100644
--- a/source/component/Layout/VisGridView/VisGridView.js
+++ b/source/component/Layout/VisGridView/VisGridView.js
@@ -1,6 +1,4 @@
-import React, {Component} from "react";
-import { Responsive, WidthProvider, GridItem } from "react-grid-layout";
-
+import React, {PureComponent} from "react";
import GridLayout from "react-grid-layout";
import VisGridItem from "./VisGridItem/VisGridItem";
import { getLayoutConfig } from "../../../common/utils";
@@ -10,39 +8,45 @@ import "./VisGridView.css";
// config for view grid and vis compoments
import _CONFIG_ from "../../../../config/vis-config.json";
-// enumeration for
-import VisTypeEnum from "../../VisualTools/VisTypeEnum.json";
-
-// import
-const _config = {
- layout: []
-};
+// enumeration for
-class VisGridView extends Component {
+class VisGridView extends PureComponent {
constructor(props) {
super(props);
this.self = React.createRef();
+ this.navHeight = 56;
+ this.filterHeight = 65;
this.state = {
draggableHandle: ".draggable",
width: 0, // -> cols
cols: 0,
config: {
layout: [], // calculate layout based on view's width and vis charts.
- grid: [..._CONFIG_.UNIT_OF_GRID_VIEW], // a size of grid [width, height] in pixel
- margins: [..._CONFIG_.MARGIN_OF_GRID_VIEW],
- visConfig: [..._CONFIG_.VISUALIZATION_VIEW_CONFIGURATION]
+ grid: [...this.props.config.UNIT_OF_GRID_VIEW], // a size of grid [width, height] in pixel
+ margins: [...this.props.config.MARGIN_OF_GRID_VIEW],
+ visConfig: [...this.props.config.VISUALIZATION_VIEW_CONFIGURATION]
},
error: null,
- isLoad: false
+ isLoad: false,
};
+
+ //
}
/**
* Calculate & Update state of new dimensions
*/
updateViewSize() {
const rect = this.self.current.getBoundingClientRect();
+ // console.log(rect, window.innerWidth, window.innerHeight)
const cols = parseInt((rect.width - this.state.config.margins[0] ) / (this.state.config.grid[0]+this.state.config.margins[0]));
+
if(cols===this.state.cols) return;
+
+ // if(this.state.config.visConfig.find(config=>config.fullScreened)){
+ // console.log('FUll')
+ // }else{
+ // console.log('No FUll')
+ // }
const gridLayoutWidth =
cols * this.state.config.grid[0] +
(cols + 1) * this.state.config.margins[0];
@@ -53,25 +57,52 @@ class VisGridView extends Component {
updatedState.config.layout = [...updatedLayout.layout];
// calculate width and height
this.setState(updatedState);
+
+ this.fullScreenHandler = this.fullScreenHandler.bind(this);
+ this.updateViewSize = this.updateViewSize.bind(this)
}
- componentDidMount() {
- // TODO loading config
+ // onRemoveItem(id) {
+ // console.log("removing", id);
+ // //this.state.config.layout
+ // //this.setState({ items: _.reject(this.state.items, { i: i }) });
+ // }
+ fullScreenHandler(id, fullScreened) {
+ const newVisConfig = [...this.state.config.visConfig].map(config=>{
+ config.fullScreened = config.id==id?fullScreened: false;
+ return config;
+ })
+ const updatedState = { ...this.state };
+ updatedState.config.visConfig = newVisConfig;
+ this.setState(updatedState);
+ this.props.fullVisScreenHandler(id, fullScreened);
+ }
- //
+ componentDidMount() {
this.updateViewSize();
+
// TODO debouce
- window.addEventListener("resize", this.updateViewSize.bind(this));
+ window.addEventListener("resize", this.updateViewSize);
+ }
+
+ componentDidUpdate() {
+
}
+
componentWillUnmount() {
- window.removeEventListener("resize", this.updateViewSize.bind(this));
+ window.removeEventListener("resize", this.updateViewSize);
+ }
+
+ layoutChangeHandler(layout){
+ console.log('layout', layout)
}
+
render() {
if (this.state.config.layout.length > 0) {
let __vis = this.state.config.layout.map((item, index) => (
-
-
));
@@ -93,6 +126,7 @@ class VisGridView extends Component {
margin={this.state.config.margins}
layout= {this.state.config.layout}
draggableHandle={this.state.draggableHandle}
+ onLayoutChange={this.layoutChangeHandler}
>
{__vis}
diff --git a/source/component/Placeholder.js b/source/component/Placeholder.js
deleted file mode 100644
index dcea8cd..0000000
--- a/source/component/Placeholder.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-
-// should only have to worry about rendering
-class Placeholder extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- }
- render() {
- return
-
- }
-}
-
-export default Placeholder
diff --git a/source/component/PureVegaLitePlot.js b/source/component/PureVegaLitePlot.js
deleted file mode 100644
index 1b54e86..0000000
--- a/source/component/PureVegaLitePlot.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import vegaEmbed from 'vega-embed'
-
-// should only have to worry about rendering
-class PureVegaLitePlot extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- }
- componentDidMount(){
- let spec = JSON.parse(this.props.spec)
- spec.data = {"values": this.state.filteredData}
- vegaEmbed('#'+this.id, spec);
- }
- componentDidUpdate(){
- let spec = JSON.parse(this.props.spec)
- spec.data = {"values": this.state.filteredData}
- vegaEmbed('#'+this.id, spec);
- }
- render() {
- if(this.state.ready){
- return
- } else {
- return
waiting...
- }
-
- }
-}
-
-export default PureVegaLitePlot
diff --git a/source/component/ResetButton.js b/source/component/ResetButton.js
deleted file mode 100644
index a7ed7b9..0000000
--- a/source/component/ResetButton.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-
-// should only have to worry about rendering
-class ResetButton extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- }
- render() {
- if(this.state.ready){
- return
- } else {
- return
- }
-
- }
-}
-
-export default ResetButton
diff --git a/source/component/SampleVisualization.js b/source/component/SampleVisualization.js
deleted file mode 100644
index 3e44305..0000000
--- a/source/component/SampleVisualization.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-
-// should only have to worry about rendering
-class SampleVisualization extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- }
- render() {
- if(this.state.ready){
- return
Records: {this.state.filteredData.length} of {this.state.baseData.length}
- } else {
- return
- }
-
- }
-}
-
-export default SampleVisualization
diff --git a/source/component/ScatterPlot.js b/source/component/ScatterPlot.js
deleted file mode 100644
index 559865c..0000000
--- a/source/component/ScatterPlot.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import {View as vegaView, parse as vegaParse} from 'vega'
-import { compile as vlCompile } from 'vega-lite'
-
-// should only have to worry about rendering
-class ScatterPlot extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- }
- componentDidMount(){
- let vlspec = {
- "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
- "data": {"values": this.state.filteredData},
- "mark": "bar",
- "selection": {
- "brush": {
- "encodings": ["x","y"],
- "type": "interval"
- }
- },
- "mark": "point",
- "encoding": {
- "x": {"field": this.props.x, "type": "quantitative"},
- "y": {"field": this.props.y, "type": "quantitative"}
- }
- }
- // IF filter state for this comopnent, set it to selection.brush.init
- if (this.state.filter[this.props.x] && this.state.filter[this.props.x].less && this.state.filter[this.props.x].greater){
- if (this.state.filter[this.props.y] && this.state.filter[this.props.y].less && this.state.filter[this.props.y].greater){
- vlspec.selection.brush.init = {"x": [this.state.filter[this.props.x].greater,this.state.filter[this.props.x].less], "y":[this.state.filter[this.props.y].greater,this.state.filter[this.props.y].less]}
- }
- }
- if (this.props.z){
- vlspec.encoding.color = {"field": this.props.z, "type": "nominal"}
- vlspec.encoding.shape = {"field": this.props.z, "type": "nominal"}
- }
- vlspec.height = this.props.h*100 || 100
- vlspec.width = this.props.w*100 || 100
- let vl_view = new vegaView(vegaParse(vlCompile(vlspec, {logger: console}).spec))
- vl_view.initialize(document.querySelector("#" + this.id))
- vl_view.addDataListener('brush_store', (t,e)=> {
- if (e.length >0 && e[0].fields.length > 1){
- window.clearTimeout(this.lastEvent)
- this.lastEvent = window.setTimeout(x=>{
- },500)
- }
- })
- vl_view.hover()
- vl_view.run();
- }
- componentDidUpdate(){
- let vlspec = {
- "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
- "data": {"values": this.state.filteredData},
- "selection": {
- "brush": {
- "encodings": ["x","y"],
- "type": "interval"
- }
- },
- "mark": "bar",
- "mark": "point",
- "encoding": {
- "x": {"field": this.props.x, "type": "quantitative"},
- "y": {"field": this.props.y, "type": "quantitative"}
- }
- }
- // IF filter state for this comopnent, set it to selection.brush.init
- if (this.state.filter[this.props.x] && this.state.filter[this.props.x].less && this.state.filter[this.props.x].greater){
- if (this.state.filter[this.props.y] && this.state.filter[this.props.y].less && this.state.filter[this.props.y].greater){
- vlspec.selection.brush.init = {"x": [this.state.filter[this.props.x].greater,this.state.filter[this.props.x].less], "y":[this.state.filter[this.props.y].greater,this.state.filter[this.props.y].less]}
- }
- }
- if (this.props.z){
- vlspec.encoding.color = {"field": this.props.z, "type": "nominal"}
- vlspec.encoding.shape = {"field": this.props.z, "type": "nominal"}
- }
- vlspec.height = this.props.h*100 || 100
- vlspec.width = this.props.w*100 || 100
- let vl_view = new vegaView(vegaParse(vlCompile(vlspec, {logger: console}).spec))
- vl_view.initialize(document.querySelector("#" + this.id))
- vl_view.addDataListener('brush_store', (t,e)=> {
- if (e.length >0 && e[0].fields.length > 1){
- window.clearTimeout(this.lastEvent)
- this.lastEvent = window.setTimeout(x=>{
- },500)
- }
- })
- vl_view.hover()
- vl_view.run();
- }
- render() {
- if(this.state.ready){
- return
- } else {
- return
waiting...
- }
-
- }
-}
-
-export default ScatterPlot
diff --git a/source/component/SearchBar.js b/source/component/SearchBar.js
deleted file mode 100644
index 3e989e4..0000000
--- a/source/component/SearchBar.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import BaseVisualization from './BaseVisualization.js'
-import { MDBDataTable } from 'mdbreact';
-
-// should only have to worry about rendering
-class SearchBar extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- this.table_data = {}
- this.width = this.props.w * 100 || 100
- this.height = this.props.h * 100 || 100
- this.style = {width: this.width, height: this.height}
- this.field = this.props.field || "__ALL"
- this.field_text = "Search"
- if (this.props.field){
- this.field_text = this.props.field
- }
- this.handleSearch = this.handleSearch.bind(this)
- }
-
- handleSearch(e){
- if (e.target && e.target.value){
- var new_val = e.target.value
- this.setState(x=>{x.value = new_val})
- let new_filter = {}
- new_filter[this.field] = {"regex":new_val}
- this.filterIn(new_filter)
- } else {
- this.setState(x=>{x.value = ""})
- let new_filter = {}
- new_filter[this.field] = {"clear":""}
- this.filterIn(new_filter)
- }
- }
-
- render() {
- if(this.state.ready){
- return(
- {this.field_text}:
-
)
- } else {
- return
- }
-
- }
-}
-
-export default SearchBar
diff --git a/source/component/VegaLitePlot.js b/source/component/VegaLitePlot.js
deleted file mode 100644
index a139683..0000000
--- a/source/component/VegaLitePlot.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import React from "react";
-import BaseVisualization from "./BaseVisualization.js";
-import {
- View as vegaView,
- parse as vegaParse,
- changeset as ChangeSet
-} from "vega";
-import { compile as vlCompile } from "vega-lite";
-
-// should only have to worry about rendering
-class VegaLitePlot extends BaseVisualization {
- constructor(props, ctx) {
- super(props, ctx);
- this.style = { width: '100%', height: '100%' };
- this.self = React.createRef();
- }
-
- componentWillMount(){
-
- }
-
- componentDidUpdate() {
- if (this.state.ready) {
- if (this.vl_view) {
- var d;
- if (this.props.allData) {
- d = this.state.baseData;
- } else {
- d = this.state.filteredData;
- }
- let changeset = ChangeSet()
- .remove(() => true)
- .insert(d);
- this.vl_view.change("source_0", changeset).run();
- } else {
- let spec = JSON.parse(this.props.spec);
- if (this.props.allData) {
- spec.data = { name: "source_0", values: this.state.baseData };
- } else {
- spec.data = { name: "source_0", values: this.state.filteredData };
- }
-
- // grab and set component's size
- const rect = this.self.current.getBoundingClientRect();
- spec.padding = 10;
- spec.width = rect.width - spec.padding * 2;
- spec.height = rect.height - spec.padding * 2;
- spec.autosize = { type: "fit"};
- // try to guess quant filter setup
- if (
- spec.selection &&
- spec.selection.brush &&
- spec.selection.brush.encodings &&
- spec.selection.brush.encodings.length
- ) {
- var fields = [];
- let candidate_state = {};
- var can_render_filter = true;
- for (var i = 0; i < spec.selection.brush.encodings.length; i++) {
- let new_field =
- spec.encoding[spec.selection.brush.encodings[i]].field;
- if (
- this.state.globalFilter[new_field] &&
- this.state.globalFilter[new_field].less &&
- this.state.globalFilter[new_field].greater
- ) {
- candidate_state[spec.selection.brush.encodings[i]] = [
- this.state.globalFilter[new_field].greater,
- this.state.globalFilter[new_field].less
- ];
- } else {
- can_render_filter = false;
- }
- }
- // set filter state
- if (can_render_filter) {
- spec.selection.brush.init = candidate_state;
- }
- }
-
-
-
- this.vl_view = new vegaView(vegaParse(vlCompile(spec).spec));
- this.vl_view.initialize(document.querySelector("#" + this.id));
- this.vl_view.hover();
- if (spec.selection && spec.selection.brush) {
- this.vl_view.addDataListener("brush_store", (t, e) => {
- if (e.length > 0 && e[0].fields.length > 0) {
- window.clearTimeout(this.lastEvent);
- this.lastEvent = window.setTimeout(x => {
- var next_filter = {};
- for (var j = 0; j < e[0].fields.length; j++) {
- let g_val = Math.min(...e[0].values[j]);
- let l_val = Math.max(...e[0].values[j]);
- next_filter[e[0].fields[j].field] = {
- greater: g_val,
- less: l_val
- };
- }
- this.filterIn(next_filter);
- }, this.bufferTime);
- }
- });
- }
- this.vl_view.run();
- }
- }
- }
- render() {
- if (this.state.ready) {
- return (
-
- );
- } else {
- return (
-
- );
- }
- }
-}
-
-export default VegaLitePlot;
diff --git a/source/component/VisSelect.js b/source/component/VisSelect.js
deleted file mode 100644
index 076d1dd..0000000
--- a/source/component/VisSelect.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import VisTypes from './VisTypes.js'
-
-// if we want a user to select their visualization
-
-class VisSelect extends React.Component {
- constructor(props, context) {
- super(props, context);
- this.height = props.h || props.height || 1
- this.width = props.w || props.width || 1
- this.state = {selected: null};
- this.selectVis = this.selectVis.bind(this);
- }
-
- selectVis(selection){
- if (VisTypes.hasOwnProperty(selection)){
- this.setState(x=>{x.selection=selection});
- this.vis = VisTypes[this.state.selection]
- } else {
- alert ("that vis does not seem to exist.")
- console.error(selection + "not found in VisTypes.js")
- }
- }
-
- render() {
- if (this.state.selection){
- const SelectedVis = this.vis
- return
- } else {
- // todo make interactive
- return
{JSON.stringify(VisTypes.keys())}
;
- }
-
- }
-}
-
-export default VisSelect
diff --git a/source/component/VisTypes.js b/source/component/VisTypes.js
deleted file mode 100644
index c5c712d..0000000
--- a/source/component/VisTypes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// so we can use our visualizations with one import
-import SampleVisualization from './SampleVisualization.js'
-import Histogram from './Histogram.js'
-import BarChart from './BarChart.js'
-import ScatterPlot from './ScatterPlot.js'
-import VegaLitePlot from './VegaLitePlot.js'
-import PureVegaLitePlot from './PureVegaLitePlot.js'
-import DataTable from './DataTable.js'
-import SearchBar from './SearchBar.js'
-import ImageGrid from './ImageGrid.js'
-import Placeholder from './Placeholder.js'
-
-var VisTypes = {}
-VisTypes.Sample = SampleVisualization
-VisTypes.Histogram = Histogram
-VisTypes.BarChart = BarChart
-VisTypes.ScatterPlot = ScatterPlot
-VisTypes.VegaLitePlot = VegaLitePlot
-VisTypes.PureVegaLitePlot = PureVegaLitePlot
-VisTypes.DataTable = DataTable
-VisTypes.SearchBar = SearchBar
-VisTypes.ImageGrid = ImageGrid
-VisTypes.Placeholder = Placeholder
-
-export default VisTypes
diff --git a/source/component/VisualTools/Chart/BarChart.js b/source/component/VisualTools/Chart/BarChart.js
index cd56de2..f6795c4 100644
--- a/source/component/VisualTools/Chart/BarChart.js
+++ b/source/component/VisualTools/Chart/BarChart.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import {isEquivalent} from '../../../common/utils.js'
import * as d3 from "d3";
-export default class BarChart extends Component {
+export default class BarChart extends PureComponent {
constructor(props) {
super(props);
this.self = React.createRef();
@@ -47,14 +47,6 @@ export default class BarChart extends Component {
.range([height, 0]);
return yScale;
}
- shouldComponentUpdate ( nextProps, nextState ) {
- // TODO LIST
- console.log('bar shouldComponentUpdate')
- //console.log(nextProps.filters, this.props.filters)
- // const flag = isEquivalent(nextProps.filters, this.props.filters);
- // console.log(flag)
- return true;
- }
drawBar(selection, data, className='og') {
const update_bars = selection.selectAll(`rect.${className}`).data(data,d=> d[this.state.fields.x])
@@ -101,7 +93,7 @@ export default class BarChart extends Component {
}
componentDidUpdate() {
- console.log('bar update',this.props)
+ // console.log('bar update',this.props)
let data = [];
if(this.props.filters.length > 0){
data = this.transform(this.props.filterData, this.props.fields.x)
@@ -111,71 +103,44 @@ export default class BarChart extends Component {
this.filterbars= this.drawBar(this.viewer,data,'ft');
}
componentDidMount() {
+ setTimeout(()=>{
+ const rect = this.self.current.getBoundingClientRect();
+ this.innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+ this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+ // create svg
+ const svg = d3.select(this.self.current)
+ .append("svg")
+ .attr("width", rect.width)
+ .attr("height", rect.height)
+ // create viewer
+ this.viewer = svg.append("g")
+ .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+ //
+ this.xScale = this.createXScale(this.state.fields.x, this.innerWidth);
+ this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
+
+ this.xAxis = d3.axisBottom(this.xScale)
+ //.tickSize(this.innerWidth)
+ this.viewer.append("g")
+ .attr("class", "x axis")
+ .attr("transform", `translate(0,${this.innerHeight})`)
+ .call(this.xAxis)
+ .selectAll(".tick text")
+ .call(this.wrap, this.xScale.bandwidth());
+
+ // add the y Axis
+ this.yAxis = d3.axisLeft(this.yScale)
+ .tickSize(-this.innerWidth)
+ this.viewer.append("g")
+ .call(this.yAxis);
+
+ this.bars = this.drawBar(this.viewer, this.state.data,'og')
+ this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
+
+ this.componentDidUpdate()
+
+ }, 500)
- console.log('bar',this.props)
- const rect = this.self.current.getBoundingClientRect();
- this.innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
- this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
- // create svg
- const svg = d3.select(this.self.current)
- .append("svg")
- .attr("width", rect.width)
- .attr("height", rect.height)
- // create viewer
- this.viewer = svg.append("g")
- .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
- //
- this.xScale = this.createXScale(this.state.fields.x, this.innerWidth);
- this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
-
- this.xAxis = d3.axisBottom(this.xScale)
- //.tickSize(this.innerWidth)
- this.viewer.append("g")
- .attr("class", "x axis")
- .attr("transform", `translate(0,${this.innerHeight})`)
- .call(this.xAxis)
- .selectAll(".tick text")
- .call(this.wrap, this.xScale.bandwidth());
-
- // add the y Axis
- this.yAxis = d3.axisLeft(this.yScale)
- .tickSize(-this.innerWidth)
- this.viewer.append("g")
- .call(this.yAxis);
-
-
- this.bars = this.drawBar(this.viewer, this.state.data,'og')
- this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
- //this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
- // this.bars = this.viewer.selectAll(".bar").data(this.state.data)
- // .enter().append("rect")
- // .attr("class", "bar")
- // .attr('fill','steelblue')
- // .attr("x", function(d) { return this.xScale(d[this.state.fields.x])}.bind(this))
- // .attr("width", this.xScale.bandwidth())
- // .attr("y", function(d) { return this.yScale(d[this.state.fields.y])}.bind(this))
- // .attr("height", function(d) { return this.innerHeight - this.yScale(d[this.state.fields.y]); }.bind(this))
- // .on('click', (data,i) =>{
- // this.bars.attr('opacity',0.2)
- // const selected = this.bars.filter(function(d){
- // return d === data
- // })
- // selected.attr('opacity',1)
- // const value = selected.data()[0].key
- // const filter = {
- // id:this.props.id,
- // field:this.props.fields.x,
- // operation:'eq',
- // values:value
- // }
- // this.props.filterAdded([filter])
- // })
- // this.bars.append('title').text(d=> `${d.key}:${d.value}`)
-
-
-
-
-
}
wrap(text, width) {
text.each(function() {
diff --git a/source/component/VisualTools/Chart/HorizontalBarChart.js b/source/component/VisualTools/Chart/HorizontalBarChart.js
index e875749..7ee1c8d 100644
--- a/source/component/VisualTools/Chart/HorizontalBarChart.js
+++ b/source/component/VisualTools/Chart/HorizontalBarChart.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import {isEquivalent} from '../../../common/utils.js'
import * as d3 from "d3";
-export default class HorizontalBarChart extends Component {
+export default class HorizontalBarChart extends PureComponent {
constructor(props) {
super(props);
this.self = React.createRef();
@@ -47,14 +47,6 @@ export default class HorizontalBarChart extends Component {
.range([0, width]);
return xScale;
}
- shouldComponentUpdate ( nextProps, nextState ) {
- // TODO LIST
- console.log('bar shouldComponentUpdate')
- //console.log(nextProps.filters, this.props.filters)
- // const flag = isEquivalent(nextProps.filters, this.props.filters);
- // console.log(flag)
- return true;
- }
drawBar(selection, data, className='og') {
const update_bars = selection.selectAll(`rect.${className}`).data(data,d=> d[this.state.fields.y])
@@ -98,7 +90,7 @@ export default class HorizontalBarChart extends Component {
}
componentDidUpdate() {
- console.log('bar update',this.props)
+ // console.log('bar update',this.props)
let data = [];
if(this.props.filters.length > 0){
data = this.transform(this.props.filterData, this.props.fields.y)
@@ -108,31 +100,35 @@ export default class HorizontalBarChart extends Component {
this.filterbars= this.drawBar(this.viewer,data,'ft');
this.createTextLabel();
}
+
componentDidMount() {
+ setTimeout(()=>{
+ const rect = this.self.current.getBoundingClientRect();
+ const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+ this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+ // create svg
+ const svg = d3.select(this.self.current)
+ .append("svg")
+ .attr("width", rect.width)
+ .attr("height", rect.height)
+ // create viewer
+ this.viewer = svg.append("g")
+ .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+ //
+ this.xScale = this.createXScale(this.state.fields.x, innerWidth);
+ this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
+
+ this.viewer.append("g")
+ .attr("transform", `translate(0,${this.innerHeight})`)
+ .call(d3.axisBottom(this.xScale).tickSize(-this.innerHeight))
+
+ this.bars = this.drawBar(this.viewer, this.state.data,'og')
+ this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
+ this.createTextLabel();
+
+ this.componentDidUpdate()
+ }, 500);
- console.log('bar',this.props)
- const rect = this.self.current.getBoundingClientRect();
- const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
- this.innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
- // create svg
- const svg = d3.select(this.self.current)
- .append("svg")
- .attr("width", rect.width)
- .attr("height", rect.height)
- // create viewer
- this.viewer = svg.append("g")
- .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
- //
- this.xScale = this.createXScale(this.state.fields.x, innerWidth);
- this.yScale = this.createYScale(this.state.fields.y, this.innerHeight);
-
- this.viewer.append("g")
- .attr("transform", `translate(0,${this.innerHeight})`)
- .call(d3.axisBottom(this.xScale).tickSize(-this.innerHeight))
-
- this.bars = this.drawBar(this.viewer, this.state.data,'og')
- this.filterbars = this.drawBar(this.viewer, this.state.data,'ft')
- this.createTextLabel();
diff --git a/source/component/VisualTools/Chart/KMCurve.js b/source/component/VisualTools/Chart/KMCurve.js
index de7dfc2..d3b00ea 100644
--- a/source/component/VisualTools/Chart/KMCurve.js
+++ b/source/component/VisualTools/Chart/KMCurve.js
@@ -1,16 +1,11 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import {isEquivalent} from '../../../common/utils.js'
import * as d3 from "d3";
-function getRandomIntInclusive(min, max) {
- min = Math.ceil(min);
- max = Math.floor(max);
- return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
-}
function isUndefined(d){
return d==undefined||d==null||(typeof d === 'string' && d.toLowerCase()==`na`)
}
-export default class KMCurve extends Component {
+export default class KMCurve extends PureComponent {
constructor(props) {
super(props);
this.self = React.createRef();
@@ -75,14 +70,8 @@ export default class KMCurve extends Component {
return rs;
- }
- shouldComponentUpdate ( nextProps, nextState ) {
- // TODO LIST
- //console.log(nextProps.filters, this.props.filters)
- // const flag = isEquivalent(nextProps.filters, this.props.filters);
- // console.log(flag)
- return true;
}
+
drawLine(viewer, points, color){
const line = d3.line()
.curve(d3.curveStepAfter)
@@ -129,91 +118,95 @@ export default class KMCurve extends Component {
componentDidUpdate() {
}
+
componentDidMount() {
- const rect = this.self.current.getBoundingClientRect();
- const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
- const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
- // create svg
- const svg = d3.select(this.self.current)
- .append("svg")
- .attr("width", rect.width)
- .attr("height", rect.height)
- // create viewer
- const viewer = svg.append("g")
- .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
- //
- this.xScale = d3.scaleLinear()
- .domain([0, this.maxTime])
- .range([0, innerWidth])
-
- this.yScale = d3.scaleLinear()
- .domain([0, 1])
- .range([innerHeight, 0])
-
- this.color = d3.scaleOrdinal()
- .domain(this.state.data.map(d => d.key))
- .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
-
-
-
-
- const xaxisGroup = viewer.append("g")
- .attr("transform", "translate(0," + innerHeight + ")")
- .call(d3.axisBottom(this.xScale).ticks(4)); //.tickSize(-innerWidth));
- xaxisGroup.append('text')
- .attr('y', 30)
- .attr('x', innerWidth/2)
- .attr('fill','black')
- .attr('font-size',13)
- .text(`Time ${this.props.fields.time.unit?`(${this.props.fields.time.unit})`:''}`)
-
- // add the y Axis
- const yaxisGroup = viewer.append("g")
- .call(d3.axisLeft(this.yScale).ticks(4)); // .tickSize(-innerWidth)
- yaxisGroup.append('text')
- .attr('y', -30)
- .attr('x', -innerHeight/3)
+ setTimeout(()=>{
+ const rect = this.self.current.getBoundingClientRect();
+ const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+ const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+ // create svg
+ const svg = d3.select(this.self.current)
+ .append("svg")
+ .attr("width", rect.width)
+ .attr("height", rect.height)
+ // create viewer
+ const viewer = svg.append("g")
+ .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+ //
+ this.xScale = d3.scaleLinear()
+ .domain([0, this.maxTime])
+ .range([0, innerWidth])
+
+ this.yScale = d3.scaleLinear()
+ .domain([0, 1])
+ .range([innerHeight, 0])
+
+ this.color = d3.scaleOrdinal()
+ .domain(this.state.data.map(d => d.key))
+ .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
+
+
+
+
+ const xaxisGroup = viewer.append("g")
+ .attr("transform", "translate(0," + innerHeight + ")")
+ .call(d3.axisBottom(this.xScale).ticks(4)); //.tickSize(-innerWidth));
+ xaxisGroup.append('text')
+ .attr('y', 30)
+ .attr('x', innerWidth/2)
.attr('fill','black')
.attr('font-size',13)
- .attr("transform", "rotate(-90)")
- .text(`Survival Probability`)
-
- this.state.data.forEach(d=>this.drawKMCurve(viewer,d))
-
-
- const height = 0;
- const width = 15;
- var nodeWidth = (d) => d.getBBox().width;
- const legend = svg.append('g')
- .attr('class', 'legend')
- .attr('transform', `translate(${this.state.margin.left+innerWidth/2},0)`);
-
- const lg = legend.selectAll('g')
- .data(this.state.data)
- .enter()
- .append('g')
- .attr('transform', (d,i) => `translate(${i * 100},${height + 15})`);
-
- lg.append('rect')
- .style('fill', d => this.color(d.key))
- .attr('x', 0)
- .attr('y', 0)
- .attr('width', 10)
- .attr('height', 10);
-
- lg.append('text')
- .style('font-family', 'Georgia')
- .style('font-size', '13px')
- .attr('x', 17.5)
- .attr('y', 10)
- .text(d => d.key);
-
- let offset = 0;
- lg.attr('transform', function(d, i) {
- let x = offset;
- offset += nodeWidth(this) + 10;
- return `translate(${x},${height + 10})`;
- });
+ .text(`Time ${this.props.fields.time.unit?`(${this.props.fields.time.unit})`:''}`)
+
+ // add the y Axis
+ const yaxisGroup = viewer.append("g")
+ .call(d3.axisLeft(this.yScale).ticks(4)); // .tickSize(-innerWidth)
+ yaxisGroup.append('text')
+ .attr('y', -30)
+ .attr('x', -innerHeight/3)
+ .attr('fill','black')
+ .attr('font-size',13)
+ .attr("transform", "rotate(-90)")
+ .text(`Survival Probability`)
+
+ this.state.data.forEach(d=>this.drawKMCurve(viewer,d))
+
+
+ const height = 0;
+ const width = 15;
+ var nodeWidth = (d) => d.getBBox().width;
+ const legend = svg.append('g')
+ .attr('class', 'legend')
+ .attr('transform', `translate(${this.state.margin.left+innerWidth/2},0)`);
+
+ const lg = legend.selectAll('g')
+ .data(this.state.data)
+ .enter()
+ .append('g')
+ .attr('transform', (d,i) => `translate(${i * 100},${height + 15})`);
+
+ lg.append('rect')
+ .style('fill', d => this.color(d.key))
+ .attr('x', 0)
+ .attr('y', 0)
+ .attr('width', 10)
+ .attr('height', 10);
+
+ lg.append('text')
+ .style('font-family', 'Georgia')
+ .style('font-size', '13px')
+ .attr('x', 17.5)
+ .attr('y', 10)
+ .text(d => d.key);
+
+ let offset = 0;
+ lg.attr('transform', function(d, i) {
+ let x = offset;
+ offset += nodeWidth(this) + 10;
+ return `translate(${x},${height + 10})`;
+ });
+ },500);
+
}
render() {
diff --git a/source/component/VisualTools/Chart/PieChart.js b/source/component/VisualTools/Chart/PieChart.js
index 701631c..218d260 100644
--- a/source/component/VisualTools/Chart/PieChart.js
+++ b/source/component/VisualTools/Chart/PieChart.js
@@ -1,118 +1,123 @@
-import React, { Component } from "react";
+import React, { PureComponent } from "react";
import * as d3 from "d3";
-export default class PieChart extends Component {
+export default class PieChart extends PureComponent {
constructor(props) {
super(props);
this.self = React.createRef();
this.tooltip = React.createRef();
this.state = {
- margin: {top: 5, right: 5, bottom: 5, left: 5},
+ margin: { top: 5, right: 5, bottom: 5, left: 5 },
loading: true,
error: null
};
const data = d3.nest()
- .key(function(d) { return d[props.fields.x]; })
+ .key(function (d) { return d[props.fields.x]; })
- .rollup(function(v) { return v.length; })
- .entries(props.data)
- data.forEach(d=>{
+ .rollup(function (v) { return v.length; })
+ .entries(props.data)
+ data.forEach(d => {
d.selected = false;
})
this.state.data = data;
- this.sum = d3.sum(this.state.data,d=>d.value)
-
+ this.sum = d3.sum(this.state.data, d => d.value)
+
}
componentDidUpdate() {
- console.log('pie did update')
- const filters = this.props.filters.filter(f=>f.id==this.props.id)
- if(filters.length > 0){ // has filters
+ // console.log('pie did update')
+ const filters = this.props.filters.filter(f => f.id == this.props.id)
+ if (filters.length > 0) { // has filters
this.pies
- .attr("fill",d=> d.data.selected?this.color(d.data.key):'#C0C0C0')
- .attr('fill-opacity',d=> d.data.selected?1:.5)
- .attr('stroke','#CCCCCC')
- .attr('stroke-width',d=> d.data.selected?3:0)
- }else{
- this.state.data.forEach(d=>d.selected = false)
+ .attr("fill", d => d.data.selected ? this.color(d.data.key) : '#C0C0C0')
+ .attr('fill-opacity', d => d.data.selected ? 1 : .5)
+ .attr('stroke', '#CCCCCC')
+ .attr('stroke-width', d => d.data.selected ? 3 : 0)
+ } else {
+ this.state.data.forEach(d => d.selected = false)
this.pies.attr("fill", d => this.color(d.data.key))
- .attr('fill-opacity',1)
- .attr('stroke','none')
+ .attr('fill-opacity', 1)
+ .attr('stroke', 'none')
}
}
componentDidMount() {
-
- const rect = this.self.current.getBoundingClientRect();
- const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
- const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
- const radius = Math.min(innerWidth, innerHeight)/2
- const pie = d3.pie().sortValues((a,b)=>b-a).value(d => d.value)
-
- const arcs = pie(this.state.data);
-
- const arc = d3.arc().innerRadius(0).outerRadius(radius)
-
- const arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
-
- this.color = d3.scaleOrdinal()
- .domain(this.state.data.map(d => d.key))
- .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
-
- const svg = d3.select(this.self.current)
- .append("svg")
+ setTimeout(() => {
+
+
+ const rect = this.self.current.getBoundingClientRect();
+ const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+ const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+ const radius = Math.min(innerWidth, innerHeight) / 2
+ const pie = d3.pie().sortValues((a, b) => b - a).value(d => d.value)
+
+ const arcs = pie(this.state.data);
+
+ const arc = d3.arc().innerRadius(0).outerRadius(radius)
+
+ const arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
+
+ this.color = d3.scaleOrdinal()
+ .domain(this.state.data.map(d => d.key))
+ .range(d3.quantize(t => d3.interpolateSpectral(t), this.state.data.length))
+
+ const svg = d3.select(this.self.current)
+ .append("svg")
.attr("width", rect.width)
.attr("height", rect.height)
-
- const viewer = svg.append("g")
+
+ const viewer = svg.append("g")
//.attr("stroke", "white")
- .attr("transform", `translate(${(innerWidth / 2 + this.state.margin.left)},${innerHeight/ 2 + this.state.margin.top})`)
-
- this.pies = viewer.selectAll("path")
- .data(arcs)
- .join("path")
- .attr("class","slide")
- // .attr("id",(d,i)=>i)
+ .attr("transform", `translate(${(innerWidth / 2 + this.state.margin.left)},${innerHeight / 2 + this.state.margin.top})`)
+
+ this.pies = viewer.selectAll("path")
+ .data(arcs)
+ .join("path")
+ .attr("class", "slide")
+ // .attr("id",(d,i)=>i)
.attr("fill", d => this.color(d.data.key))
.attr("d", arc)
- .on('click', (d, i) =>{
+ .on('click', (d, i) => {
// viewer.selectAll(".slide").attr('opacity',0.2)
// const selected = this.pies.filter(function(d){
// return d === data
// })
console.log('click')
d.data.selected = !d.data.selected;
- const values = this.state.data.reduce((values,d)=>{
- if(d.selected) values.push(d.key)
+ const values = this.state.data.reduce((values, d) => {
+ if (d.selected) values.push(d.key)
return values;
- },[])
+ }, [])
- if(values.length > 0){ // has filters
+ if (values.length > 0) { // has filters
this.pies
- .attr("fill",d=> d.data.selected?this.color(d.data.key):'#C0C0C0')
- .attr('fill-opacity',d=> d.data.selected?1:.5)
- .attr('stroke','#CCCCCC')
- .attr('stroke-width',d=> d.data.selected?3:0)
+ .attr("fill", d => d.data.selected ? this.color(d.data.key) : '#C0C0C0')
+ .attr('fill-opacity', d => d.data.selected ? 1 : .5)
+ .attr('stroke', '#CCCCCC')
+ .attr('stroke-width', d => d.data.selected ? 3 : 0)
const filter = {
- id:this.props.id,
- title:this.props.title,
- field:this.props.fields.x,
- operation:'in',
- values:values
+ id: this.props.id,
+ title: this.props.title,
+ field: this.props.fields.x,
+ operation: 'in',
+ values: values
}
this.props.filterAdded([filter])
- }else{
+ } else {
this.pies.attr("fill", d => this.color(d.data.key))
- .attr('fill-opacity',1)
- .attr('stroke','none')
+ .attr('fill-opacity', 1)
+ .attr('stroke', 'none')
this.props.filterRemove(this.props.id)
}
- })
- this.pies.append('title').text(d=> `${d.data.key}:${d.data.value}:${d3.format(".0%")(d.data.value/this.sum)}`)
+ })
+ this.pies.append('title').text(d => `${d.data.key}:${d.data.value}:${d3.format(".0%")(d.data.value / this.sum)}`)
+
+ //this.componentDidUpdate();
+ }, 500)
// .on("mousemove", function(d){
// console.log(this)
// d3.select(this.tooltip.current)
@@ -126,7 +131,7 @@ export default class PieChart extends Component {
// .html( (d.data[this.state.fields.x]) + "
" +(d.value));
// }.bind(this))
// .on("mouseout", function(d){ d3.select(this.tooltip.current).style("display", "none");}.bind(this));
-
+
// svg.append("g")
// .attr("font-family", "sans-serif")
// .attr("font-size", 12)
@@ -146,15 +151,15 @@ export default class PieChart extends Component {
// .text(d => d.data[this.state.fields.y].toLocaleString()));
}
-
+
render() {
return (
diff --git a/source/component/VisualTools/Chart/ScatterChart.js b/source/component/VisualTools/Chart/ScatterChart.js
index 33743ee..7f0e4cc 100644
--- a/source/component/VisualTools/Chart/ScatterChart.js
+++ b/source/component/VisualTools/Chart/ScatterChart.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import {numFixed} from '../../../common/utils.js';
import * as d3 from "d3";
import "./style.css";
-export default class ScatterChart extends Component {
+export default class ScatterChart extends PureComponent {
constructor(props) {
super(props);
this.self = React.createRef();
@@ -39,7 +39,7 @@ export default class ScatterChart extends Component {
}
componentDidUpdate(){
- console.log('componentDidUpdate')
+
if(this.props.filters.length > 0){
this.circles.attr('class', d=> this.props.filterData.includes(d)?'brushed':'non_brushed')
}else{
@@ -48,49 +48,54 @@ export default class ScatterChart extends Component {
}
componentDidMount() {
- const rect = this.self.current.getBoundingClientRect();
- const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
- const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
- // create svg
- const svg = d3.select(this.self.current)
- .append("svg")
- .attr("width", rect.width)
- .attr("height", rect.height)
- // create viewer
- const viewer = svg.append("g")
- .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
- //
- this.xScale = this.createScaleLiner(this.props.fields.x, [0, innerWidth]);
- this.yScale = this.createScaleLiner(this.props.fields.y, [innerHeight, 0]);
-
- this.radiusScale = this.createScaleLiner(this.props.fields.z, [3, 10]);
-
- viewer.append("g")
- .attr("transform", "translate(0," + innerHeight + ")")
- .call(d3.axisBottom(this.xScale).tickSize(-innerHeight));
-
- // add the y Axis
- viewer.append("g")
- .call(d3.axisLeft(this.yScale).tickSize(-innerWidth));
-
-
-
- this.circles = viewer.selectAll("circle").data(this.state.data)
- .enter().append("circle")
- .attr("r", d => this.radiusScale(d[this.props.fields.z]))
- .attr("cx", d => this.xScale(d[this.props.fields.x]))
- .attr("cy", d => this.yScale(d[this.props.fields.y]))
- .attr("class", "brushed");
-
-
-
- this.brush = d3.brush().extent([[0,0],[innerWidth, innerHeight]])
- //.on("brush", this.brushed.bind(this))
- .on("end", this.end.bind(this));
-
- this.brush_area = viewer.append("g")
+ setTimeout(() => {
+ const rect = this.self.current.getBoundingClientRect();
+ const innerWidth = rect.width - this.state.margin.left - this.state.margin.right;
+ const innerHeight = rect.height - this.state.margin.top - this.state.margin.bottom;
+ // create svg
+ const svg = d3.select(this.self.current)
+ .append("svg")
+ .attr("width", rect.width)
+ .attr("height", rect.height)
+ // create viewer
+ const viewer = svg.append("g")
+ .attr("transform", "translate(" + this.state.margin.left + "," + this.state.margin.top + ")");
+ //
+ this.xScale = this.createScaleLiner(this.props.fields.x, [0, innerWidth]);
+ this.yScale = this.createScaleLiner(this.props.fields.y, [innerHeight, 0]);
+
+ this.radiusScale = this.createScaleLiner(this.props.fields.z, [3, 10]);
+
+ viewer.append("g")
+ .attr("transform", "translate(0," + innerHeight + ")")
+ .call(d3.axisBottom(this.xScale).tickSize(-innerHeight));
+
+ // add the y Axis
+ viewer.append("g")
+ .call(d3.axisLeft(this.yScale).tickSize(-innerWidth));
+
+
+
+ this.circles = viewer.selectAll("circle").data(this.state.data)
+ .enter().append("circle")
+ .attr("r", d => this.radiusScale(d[this.props.fields.z]))
+ .attr("cx", d => this.xScale(d[this.props.fields.x]))
+ .attr("cy", d => this.yScale(d[this.props.fields.y]))
+ .attr("class", "brushed");
+
+
+
+ this.brush = d3.brush().extent([[0,0],[innerWidth, innerHeight]])
+ //.on("brush", this.brushed.bind(this))
+ .on("end", this.end.bind(this));
+
+ this.brush_area = viewer.append("g")
+
+ .call(this.brush);
+
+ this.componentDidUpdate()
+ }, 500);
- .call(this.brush);
}
brushed(){
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.css b/source/component/VisualTools/VisDataTable/VisDataTable.css
index cd160f1..e944993 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.css
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.css
@@ -1,20 +1,105 @@
/* VisDataTable customized style */
+
+.evenRow {
+ background-color: #ffffff;
+ border-bottom: #d1d1d1 1px dotted;
+}
+.oddRow {
+ background-color: #f9f9f9;
+ border-bottom: #d1d1d1 1px dotted;
+}
+
.ReactVirtualized__Table {
- font-size: .7rem;
+ font-size: 0.8rem;
+ display: inline-block;
+}
+
+.ReactVirtualized__Table__headerColumn {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ background-color: var(--light);
+ font-size: 0.8rem;
+ text-transform: none;
+ outline: none;
}
-.headerRow {
+.ReactVirtualized__Table__headerRow {
border-bottom: 1px solid #d1d1d1;
- background-color: #ffffff;
- font-size: .85rem;
- text-transform: none;
}
-.evenRow {
- background-color: #ffffff;
- border-bottom: #d1d1d1 1px dotted;
+.ReactVirtualized__Table__rowColumn {
+ flex-direction: row;
+ display: flex;
+ justify-content: center;
+ color: var(--dark);
+ cursor: default;
}
-.oddRow {
- background-color: #f9f9f9;
- border-bottom: #d1d1d1 1px dotted;
-}
\ No newline at end of file
+
+.ReactVirtualized__Table__headerTruncatedText {
+ flex: auto;
+}
+
+.DragHandle {
+ flex: 0 0 16px;
+ z-index: 2;
+ cursor: col-resize;
+ /* color: #0085ff; */
+ color: var(--dark);
+}
+.DragHandle:hover {
+ background-color: #eeeeee;
+}
+
+.DragHandleActive,
+.DragHandleActive:hover {
+ color: var(--dark);
+ z-index: 3;
+}
+
+.DragHandleIcon {
+ flex: 0 0 12px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+/* custom tips */
+.bs-tooltip-top .arrow::before {
+ top: -1;
+ border-width: .5rem .5rem 0;
+ border-top-color: var(--light);
+}
+.bs-tooltip-bottom .arrow::before {
+ bottom: -1;
+ border-width: 0 .5rem .5rem;
+ border-bottom-color: var(--light);
+}
+.bs-tooltip-right .arrow::before {
+ right: -1;
+ border-width: .5rem .5rem 0 .5rem;
+ border-right-color: var(--light);
+}
+.bs-tooltip-left .arrow::before {
+ left: -1;
+ border-width: .5rem 0 .5rem 0.5rem;
+ border-left-color: var(--light);
+}
+
+/* .tooltip.show {
+ opacity: 1;
+
+} */
+
+.tooltip .tooltip-inner {
+ color:var(--dark);
+ font-size: .8rem;
+ font-weight: bolder;
+ background-color: var(--light);
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* .setting {
+
+} */
+
diff --git a/source/component/VisualTools/VisDataTable/VisDataTable.js b/source/component/VisualTools/VisDataTable/VisDataTable.js
index fa876bc..9d963fc 100644
--- a/source/component/VisualTools/VisDataTable/VisDataTable.js
+++ b/source/component/VisualTools/VisDataTable/VisDataTable.js
@@ -1,48 +1,171 @@
-import React, { Component } from 'react'
-import {AutoSizer, Column, Table} from 'react-virtualized';
+import React, { Component, PureComponent } from 'react'
+import { AutoSizer, Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
+import Draggable from "react-draggable";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSortDown, faSortUp, faSort } from '@fortawesome/free-solid-svg-icons';
+import VisDataTableControl from './VisDataTableControl/VisDataTableControl';
+import arrayMove from 'array-move';
import './VisDataTable.css';
-export default class VisDataTable extends Component {
- _rowClassName({index}) {
+export default class VisDataTable extends PureComponent {
+ constructor(props, context) {
+ super(props, context);
+ const fWidth = 1 / this.props.fields.length;
+ const fields = this.props.fields.map(f => { return { ...f, width: fWidth, isShow: true } })
+ this.state = {
+ fields: fields,
+ width: null,
+ sortBy :null,
+ sortDirection: null
+ }
+
+ this.autoSizer = React.createRef();
+ this.headerRenderer = this.headerRenderer.bind(this)
+ this.cellRenderer = this.cellRenderer.bind(this)
+ this.resizeRow = this.resizeRow.bind(this)
+ this.onResize = this.onResize.bind(this)
+ this.onSortEnd = this.onSortEnd.bind(this)
+ this.onCheckChangedHandler = this.onCheckChangedHandler.bind(this)
+ this.onAllCheckHandler = this.onAllCheckHandler.bind(this)
+ this.sortHandler = this.sortHandler.bind(this);
+ this.getSortData = this.getSortData.bind(this);
+ }
+ sortHandler({ sortBy, sortDirection }) {
+ this.setState({ sortBy, sortDirection });
+ }
+ _rowClassName({ index }) {
if (index < 0) {
return 'headerRow';
} else {
return index % 2 === 0 ? 'evenRow' : 'oddRow';
}
- }
-
- render() {
- const {data, fields, filterData, filters} = this.props;
- const final_data = filters.length>0?filterData:data;
-
- return
-
- {({width, height}) => (
- final_data[index]}>
- {fields.map((f, id)=>{
-
- if(f.link) {
- const URL = `${f.link.url+d.rowData[f.link.field]}`
- return {d.cellData};
- } else {
- return d.cellData;
- }
-
- }}
- />)}
-
- )}
-
-
+ }
+ cellRenderer(d, f) {
+ return (
+
+
+ )
+ }
+
+ headerRenderer({
+ columnData,
+ dataKey,
+ disableSort,
+ label,
+ sortBy,
+ sortDirection
+ }) {
+ const filteredFields = this.state.fields.filter(f => f.isShow);
+
+ return (
+
+ {label}
+ {}
+ {sortBy==dataKey?():}
+ { this.resizeRow({ dataKey, deltaX }) }}
+ position={{ x: 0 }}
+ zIndex={999}
+ >⋮
+
+
+
+ );
+ }
+
+ resizeRow({ dataKey, deltaX }) {
+ const prevFields = this.state.fields;
+ const idx = prevFields.findIndex(f => f.dataKey == dataKey);
+
+ const percentDelta = deltaX / this.state.width;
+ prevFields[idx].width = prevFields[idx].width + percentDelta;
+
+ if (idx < prevFields.length - 1) {
+ prevFields[idx + 1].width = prevFields[idx + 1].width - percentDelta;
}
+
+ this.setState({ field: [...prevFields] })
+ }
+
+ onResize({ height, width }) {
+ this.setState({ width: width })
+ }
+ onSortEnd({ oldIndex, newIndex }) {
+ this.setState(({ fields }) => ({
+ fields: arrayMove(fields, oldIndex, newIndex),
+ }));
+ }
+ onCheckChangedHandler(e) {
+
+ const value = e.target.value;
+ const checked = e.target.checked;
+ this.setState(({ fields }) => ({
+ fields: fields.map(f => {
+ f.isShow = f.dataKey == value ? checked : f.isShow;
+ return { ...f }
+ }),
+ }));
+ }
+ onAllCheckHandler() {
+ this.setState(({ fields }) => ({
+ fields: fields.map(f => {
+ f.isShow = true;
+ return { ...f }
+ }),
+ }));
+ }
+
+ getSortData(){
+ const { data, filterData, filters } = this.props;
+ const { sortBy, sortDirection } = this.state;
+ const __data = filters.length > 0 ? filterData : data;
+ return sortBy&&sortDirection?__data.sort((a,b)=>{
+ const first = sortDirection==SortDirection.ASC?a:b;
+ const second = sortDirection==SortDirection.ASC?b:a;
+ return first[sortBy]>second[sortBy]?1:-1
+ }):__data;
+ }
+
+ render() {
+ const { fields, sortBy, sortDirection } = this.state;
+ const final_data = this.getSortData();
+
+ return
+
+
+ {({ width, height }) => (
+ final_data[index]}
+ sort={this.sortHandler}
+ sortBy={sortBy}
+ sortDirection={sortDirection}
+ >
+ {fields.filter(f => f.isShow).map((f, id) => rowData[f.dataKey]}
+ dataKey={f.dataKey}
+ label={f.label}
+ width={width * f.width}
+ headerRenderer={this.headerRenderer}
+ cellRenderer={(d) => { return this.cellRenderer(d, f) }}
+
+ />)}
+
+ )}
+
+
+ }
}
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css
new file mode 100644
index 0000000..7344daf
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.css
@@ -0,0 +1,20 @@
+.popover {
+ width: 8rem;
+}
+
+.popover-body {
+ padding: 0;
+}
+.popover-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 0 .3rem;
+ /* margin: .2rem; */
+ /* background-color: var(--light); */
+ font-size: .8rem;
+ font-weight: bolder;
+ /* text-transform: none;
+ border: solid 1px #c2c2c2;
+ color: var(--dark); */
+}
\ No newline at end of file
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
new file mode 100644
index 0000000..5e55060
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisDataTableControl.js
@@ -0,0 +1,64 @@
+import React, { PureComponent, useState } from 'react'
+import PropTypes from 'prop-types'
+import {
+ sortableContainer
+} from 'react-sortable-hoc';
+import Popover from 'react-bootstrap/Popover'
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
+import { VisSortableItem } from "./VisSortableItem/VisSortableItem"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCog, faCheckSquare, faArrowsAltV } from '@fortawesome/free-solid-svg-icons'
+import Button from 'react-bootstrap/Button';
+
+import './VisDataTableControl.css';
+const SortableContainer = sortableContainer(({ children }) => {
+ return
{children}
;
+});
+
+export class VisDataTableControl extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ show: false
+ }
+ this.onClickHandler = this.onClickHandler.bind(this);
+ this.renderPopOver = this.renderPopOver.bind(this);
+ }
+ onClickHandler() {
+ this.setState({ show: !this.state.show })
+ }
+
+ renderPopOver(props) {
+ return (
+
+
+ Fields
+
+
+
+
+ {
+ document.body.style.cursor = 'default';
+ this.props.onSortEnd({oldIndex, newIndex})
+ }} onSortStart={() => (document.body.style.cursor = 'grabbing')} useDragHandle>
+ {this.props.list.map((item, index) => (
+
+ ))}
+
+
+ );
+ }
+ render() {
+ const style = { position: 'absolute', right: 0, color:'var(--gray)' }
+ return (
+
+
+
+ )
+ }
+}
+export default VisDataTableControl;
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css
new file mode 100644
index 0000000..78a61c5
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.css
@@ -0,0 +1,39 @@
+.vis-sortable-item {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 0 .3rem;
+ margin: .2rem;
+ background-color: var(--light);
+ font-size: 0.8rem;
+ text-transform: none;
+ border: solid 1px #c2c2c2;
+ z-index: 1100;
+ color: var(--gray-dark);
+}
+.vis-sortable-item .drag-handle {
+ cursor: grab;
+}
+.vis-sortable-item:focus .drag-handle,
+.vis-sortable-item:active .drag-handle {
+ cursor: grabbing;
+}
+.vis-sortable-item .input-box {
+ display: flex;
+ align-items: center;
+}
+.vis-sortable-item .truncated-text {
+ cursor: default;
+ display: inline-block;
+ max-width: 100%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 0 .5rem;
+ font-weight: bolder;
+
+}
+
+/* .vis-sortable-item input[type="checkbox"] {
+
+} */
\ No newline at end of file
diff --git a/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js
new file mode 100644
index 0000000..8cb53ff
--- /dev/null
+++ b/source/component/VisualTools/VisDataTable/VisDataTableControl/VisSortableItem/VisSortableItem.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGripLines } from '@fortawesome/free-solid-svg-icons'
+import {
+ sortableElement,
+ sortableHandle,
+ } from 'react-sortable-hoc';
+import './VisSortableItem.css';
+
+const DragHandle = sortableHandle(() =>
);
+
+export const VisSortableItem = sortableElement((props) => (
+
+
+
{props.label}
+
+
+
+
+));
+
diff --git a/source/index.html b/source/index.html
index ab1cfdc..e50ef25 100644
--- a/source/index.html
+++ b/source/index.html
@@ -6,7 +6,7 @@
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
-
DataScope 2
+
EagleScope
diff --git a/source/index.js b/source/index.js
index 91da112..38ade10 100644
--- a/source/index.js
+++ b/source/index.js
@@ -1,14 +1,12 @@
-import React from "react";
-import DataManager from "./DataManager.js";
-import RestDataSource from "./xfRestDataSource.js";
-import VisTypes from "./component/VisTypes.js";
-import vegaSpecs from "./vegaSpecs.js";
-import ResetButton from "./component/ResetButton.js";
+import React, { PureComponent } from "react";
+import HomeButton from "./component/HomeButton.js";
import { render } from "react-dom";
import Spinner from 'react-bootstrap/Spinner'
import VisGridView from "./component/Layout/VisGridView/VisGridView.js";
+import VisFullScreenView from "./component/Layout/VisFullScreenView/VisFullScreenView.js"
import ProgressBar from 'react-bootstrap/ProgressBar'
import FilterOperationPanel from './component/FilterOperationPanel/FilterOperationPanel.js'
+import { debounce } from "lodash";
import * as d3 from "d3";
import {
Responsive,
@@ -28,22 +26,32 @@ import "../node_modules/react-resizable/css/styles.css";
import "./style/main.scss";
import 'react-virtualized/styles.css';
+
// config for view grid and vis compoments
-import _CONFIG_ from "../config/vis-config.json";
+// import _CONFIG_ from "../config/vis-config.json";
+
+// get confing on request
+function getConfig(){
+ const query = new URLSearchParams(window.location.search);
+ let config_url = query.get("template") || "../config/vis-config.json"
+ return fetch(config_url, {cors:true}).then(x=>x.json())
+}
-// var __DM = null;
+
+
+// var __DM = null;
function isNumeric(str) {
- if (typeof str != "string") return false // we only process strings!
+ if (typeof str != "string") return false // we only process strings!
return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
- !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
+ !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
}
-function covertRaw(elt){
- for(let key in elt){
+function covertRaw(elt) {
+ for (let key in elt) {
const raw = elt[key];
- if(isNumeric(raw)){
+ if (isNumeric(raw)) {
elt[key] = +raw;
- } else if(raw == 'true'||raw == 'false' ){
- elt[key] = raw=='true' ? true : false;
+ } else if (raw == 'true' || raw == 'false') {
+ elt[key] = raw == 'true' ? true : false;
}
}
return elt;
@@ -91,7 +99,7 @@ function filterData(data, filters) {
})
}
-class App extends React.Component {
+class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
@@ -100,14 +108,31 @@ class App extends React.Component {
data: [],
filterData: [],
filterOperators: "AND", // "OR"
- filters: []
+ filters: [],
+ isFullScreen: false,
+ fullScreenVis: null,
+ config: null
+
+
};
+ this.view = React.createRef();
+ this.resizeHandler = this.resizeHandler.bind(this);
+ this.debounceResizeHandler = debounce(this.resizeHandler, 500, { "maxWait": 1000 })
+ this.fullScreenHandler = this.fullScreenHandler.bind(this)
}
+ fullScreenHandler(id, fullScreened){
+ console.log(id, fullScreened)
+ this.setState({
+ isFullScreen: fullScreened,
+ fullScreenVis: id
+ })
+ //console.log(this.state)
+ }
// {
- // id:
- // field:xxx,
- // operation:, eq, gt, gte, in, lt, lte, ne, nin,
+ // id:
+ // field:xxx,
+ // operation:, eq, gt, gte, in, lt, lte, ne, nin,
// value: value, value, value, list, value, value, value, list, []
// }
addFiltersHandler(filters) {
@@ -115,7 +140,7 @@ class App extends React.Component {
const old_filters = [...this.state.filters];
- // remove first
+ // remove first
let new_filters = old_filters.filter(of => filters.some(nf => !(of.id == nf.id)))
@@ -127,7 +152,7 @@ class App extends React.Component {
// do filter
const dataset_afterFilter = filterData(this.state.data, new_filters);
- this.setState({ filterData: dataset_afterFilter, filters: new_filters })
+ this.setState({ filterData: [...dataset_afterFilter], filters: [...new_filters] })
}
@@ -141,70 +166,93 @@ class App extends React.Component {
return;
}
const old_filters = [...this.state.filters];
- console.log('old', old_filters)
let new_filters = [];
if (isIndex) {
new_filters = old_filters.filter((f, idx) => idx != id)
} else {
new_filters = old_filters.filter(of => of.id !== id)
}
-
- console.log('new', new_filters)
if (new_filters.length <= 0) {
this.setState({ filterData: [], filters: [] });
return;
}
const dataset_afterFilter = filterData(this.state.data, new_filters);
- this.setState({ filterData: dataset_afterFilter, filters: new_filters })
+ this.setState({ filterData: [...dataset_afterFilter], filters: [...new_filters] })
}
componentDidMount() {
- if (_CONFIG_.DATA_FORMAT === 'csv') {
- d3.csv(_CONFIG_.DATA_RESOURCE_URL,d=>covertRaw(d)).then(data=>{
- console.log('csv')
- this.setState({
- isLoaded: true,
- data: data
- });
- })
-
- } else if (_CONFIG_.DATA_FORMAT === 'json') {
- fetch(_CONFIG_.DATA_RESOURCE_URL, {
- mode: 'cors'
- }).then(res => res.json()).then(data => {
- console.log('json')
- // TODO need a replace method to replace null, undefined etc.
- data.forEach(d => {// clear up null value
- if (d.disease_type == null) d.disease_type = 'NA'
- if (d.sexlabel == null) d.sexlabel = 'NA'
- if (d.age == null) d.age = 'NA'
- if (d.stagelabel == null) d.stagelabel = 'NA'
- })
- return data;
- })
- .then((data) => {
- this.setState({
- isLoaded: true,
- data: data
- });
- },
- // Note: it's important to handle errors here
- // instead of a catch() block so that we don't swallow
- // exceptions from actual bugs in components.
- (error) => {
- console.log('error', error)
- this.setState({
- isLoaded: true,
- error
- });
+ getConfig().then(_CONFIG_=>{
+ if (_CONFIG_.DATA_FORMAT === 'csv') {
+ d3.csv(_CONFIG_.DATA_RESOURCE_URL, d => covertRaw(d)).then(data => {
+ this.setState({
+ isLoaded: true,
+ data: data,
+ config: _CONFIG_
+ });
+ })
+
+ } else if (_CONFIG_.DATA_FORMAT === 'json') {
+ fetch(_CONFIG_.DATA_RESOURCE_URL, {
+ mode: 'cors'
+ }).then(res => res.json()).then(data => {
+ // TODO need a replace method to replace null, undefined etc.
+ data.forEach(d => {// clear up null value
+ if (d.disease_type == null) d.disease_type = 'NA'
+ if (d.sexlabel == null) d.sexlabel = 'NA'
+ if (d.age == null) d.age = 'NA'
+ if (d.stagelabel == null) d.stagelabel = 'NA'
+ })
+ return data;
+ })
+ .then((data) => {
+ this.setState({
+ isLoaded: true,
+ data: data
+ });
+ },
+ // Note: it's important to handle errors here
+ // instead of a catch() block so that we don't swallow
+ // exceptions from actual bugs in components.
+ (error) => {
+ console.log('error', error)
+ this.setState({
+ isLoaded: true,
+ error: error
+ });
+ }
+ )
}
- )
- }
+
+ if (this.state.isFullScreen) {
+ // debounce();
+ this.resizeHandler();
+ }
+
+
+ // TODO debouce
+ window.addEventListener("resize", this.debounceResizeHandler);
+ }).catch(error=> {
+ console.error(error)
+ this.setState({
+ isLoaded: true,
+ error: error
+ });
+ })
+
+ }
+ resizeHandler() {
+
+ console.log(`resized to: ${this.state.isFullScreen}`, window.innerWidth, 'x', window.innerHeight)
+ }
+
+ componentWillUnmount() {
+ console.log('index componentWillUnmount')
+ window.removeEventListener("resize", this.debounceResizeHandler);
}
render() {
- const { error, isLoaded, data, filterData, filters } = this.state;
+ const { error, isLoaded, data, filterData, filters, config } = this.state;
const progressAttrs = {
now: data.length,
label: `${data.length}/${data.length}`
@@ -225,38 +273,35 @@ class App extends React.Component {