Commit 9ba42737 authored by amarcic's avatar amarcic
Browse files

timeline resizing: temp removed two lines from stlye.js to show...

timeline resizing: temp removed two lines from stlye.js to show useResizeObserver working as intended
parent f1cedffb
......@@ -126,7 +126,7 @@ export const Histogram = (props) => {
</Grid>
<Grid id="histogramContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
<svg ref={svgRef}>
<svg id="histogramSVG" ref={svgRef}>
<g className="bars">
<g className="xAxis"></g>
<g className="yAxis"></g>
......
......@@ -3,13 +3,13 @@ import { Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
import { TimelineChart } from "./TimelineChart";
import {getDimensions} from "../../utils";
//import {getDimensions} from "../../utils";
export const Timeline = (props) => {
const { t, i18n } = useTranslation();
const classes = useStyles();
const [dimensions, setDimensions] = useState({width: 0, height: 0, margin: {top: 0, right: 0, left: 0, bottom: 0}});
//const [dimensions, setDimensions] = useState({width: 0, height: 0, margin: {top: 0, right: 0, left: 0, bottom: 0}});
const { timelineObjectsData } = props;
const [input, dispatch] = props.reducer;
......@@ -17,13 +17,13 @@ export const Timeline = (props) => {
.filter( datapoint =>
datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
useEffect( () => {
/*useEffect( () => {
let currentDimensions = getDimensions("timelineContainer");
if (currentDimensions&&currentDimensions.width!==dimensions?.width)
setDimensions(currentDimensions);
console.log("state dimensions", dimensions)
}, []);
}, []);*/
return (
<>
......@@ -37,7 +37,7 @@ export const Timeline = (props) => {
<TimelineChart
reducer={[input, dispatch]}
filteredTimelineData={filteredTimelineData}
dimensions={dimensions}
//dimensions={dimensions}
/>
</Grid>
</Grid>
......
......@@ -54,6 +54,7 @@ export const TimelineChart = (props) => {
if (!dimension) return;
const { data, svgRef, xDomain } = timelineConfig;
//const { width, height } = dimension;
console.log("dimension: ", dimension)
const margin = {top: 5, right: 20, left: 20, bottom: 30}//dimensions;
const width = dimension.width - margin.right - margin.left;
const height = dimension.height - margin.top - margin.bottom;
......
......@@ -24,6 +24,10 @@ svg#timelineSVG {
width: 100%;
height: 100%;
}
svg#histogramSVG {
width: 100%;
height: 100%;
}
.highlight.bar {
stroke: pink;
stroke-width: 2;
......
......@@ -42,11 +42,13 @@ const useStyles = makeStyles(theme => ({
width: "100%"
},
fullHeightTile: {
height: "calc(100vh - 12vh - 12px)",
//todo: temporary removal: fix height calculation with useResizeObserver
//height: "calc(100vh - 12vh - 12px)",
//padding: theme.spacing(2)
},
halfHeightTile: {
height: "calc(50vh - 6vh - 6px)", // half of the dashboardBody/dashboardHeader/dashboardFooter height
//todo: temporary removal: fix height calculation with useResizeObserver
//height: "calc(50vh - 6vh - 6px)", // half of the dashboardBody/dashboardHeader/dashboardFooter height
// this class will take the same height as fullHeightTile if the screen is size "xs":
[theme.breakpoints.down("xs")]: {
height: "calc(100vh - 12vh - 12px)",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment