diff options
| author | bobzel <zzzman@gmail.com> | 2023-04-11 09:58:23 -0400 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2023-04-11 09:58:23 -0400 |
| commit | cb426bf2a9d90955195ab2e66f845a9e39df2cf3 (patch) | |
| tree | 7b171f21532b416e3c30dd3f25dbefbe72e0325b /src | |
| parent | 34d63367302d8158c71361dbcefca9e528c03333 (diff) | |
| parent | 3cb7f85b23eb0ae3a432bbe15b8a2cda37290ce2 (diff) | |
Merge branch 'master' of https://github.com/brown-dash/Dash-Web
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DataVizBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/LineChart.tsx | 12 |
2 files changed, 7 insertions, 7 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 2666787c5..eb25d3264 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -95,7 +95,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @computed get selectView() { const width = this.props.PanelWidth() * 0.9; const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9; - const margin = { top: 10, right: 10, bottom: 10, left: 10 }; + const margin = { top: 10, right: 25, bottom: 50, left:25}; if (!this.pairs) return 'no data'; // prettier-ignore switch (this.dataVizView) { diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index ecb06f64f..777bf2f66 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -74,7 +74,7 @@ export class LineChart extends React.Component<LineChartProps> { } componentDidMount = () => { this._disposers.chartData = reaction( - () => ({ dataSet: this._lineChartData, w: this.props.width, h: this.props.height }), + () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }), ({ dataSet, w, h }) => { if (dataSet) { this.drawChart([dataSet], this.rangeVals, w, h); @@ -227,16 +227,16 @@ export class LineChart extends React.Component<LineChartProps> { } // creating the x and y scales - const xScale = scaleCreatorNumerical(xMin, xMax, 0, this.width); - const yScale = scaleCreatorNumerical(0, yMax, this.height, 0); + const xScale = scaleCreatorNumerical(xMin, xMax, 0, width); + const yScale = scaleCreatorNumerical(0, yMax,height, 0); // adding svg const margin = this.props.margin; const svg = (this._lineChartSvg = d3 .select(this._lineChartRef.current) .append('svg') - .attr('width', `${width - margin.right - margin.left}`) - .attr('height', `${height - margin.top - margin.bottom}`) + .attr('width', `${width +margin.left + margin.right}`) + .attr('height', `${height + margin.top + margin.bottom }`) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`)); @@ -281,7 +281,7 @@ export class LineChart extends React.Component<LineChartProps> { svg.append('rect') .attr('class', 'overlay') - .attr('width', this.width) + .attr('width', width) .attr('height', this.height + margin.top + margin.bottom) .attr('fill', 'none') .attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`) |